WIP - Charts

docs/pattern-template.mdx

@@ -0,0 +1,55 @@
+---
+title: Pattern title
+---
+
+<PageDescription>
+
+Include a short description of your pattern. This header should be longer than one line and no longer than four.
+
+</PageDescription>
+
+<AnchorLinks>
+  <AnchorLink>Overview</AnchorLink>
+  <AnchorLink>Behavior guidance</AnchorLink>
+  <AnchorLink>Assets</AnchorLink>
+  <AnchorLink>References</AnchorLink>
+  <AnchorLink>Metadata</AnchorLink>
+</AnchorLinks>
+
+### Overview
+
+**Define the use of your pattern with a problem statement.** Explain a user's needs and how the pattern meets those needs. Communicate anything a designer needs to know about the pattern.
+
+**Show a high-level image of the pattern in use.** The pattern should be presented in context and include a caption.
+
+### Behavior guidance
+
+**Include guidance on interactions and states.** Most patterns depend on interactions with components. Include guidance on motion, behavior, and states of the components.
+
+**Use visuals wherever possible.** Show a user's flow through your pattern with images of your product at each step of the way.
+
+### Assets
+
+**Include any resources and references.** Attach and document any page templates, design specifications, and design software assets.
+
+**Document how a user would navigate your pattern.** Provide documentation to make onboarding and use easier.
+
+**Create a functional prototype.** The best way to prove your pattern solves a problem is to let designers test it. A link to the actual implementation is best, and a demo is also valuable.
+
+### References
+
+**Explain any accessibility testing you conducted.** No individual component or pattern can be accessible, but they can be used in an accessible way to create an accessible experience. Include any research and proof you may have in your pattern documentation.
+
+**Include any citations.** Research, books, and articles you found helpful offer legitimacy to your pattern and help designers understand your decisions.
+
+**Offer any development notes you may have.** Many patterns don't require specific developer attention to implement. If you have any developer guidance, include it here.
+
+### Metadata 
+
+**Include a list of components used in the pattern.** Link to where where each component is documented.
+
+**Link to any related patterns.** This may not be the right pattern for a designer's problem, but other closely related patterns might be helpful.
+
+**Link to the maintainer's GitHub profile.** GitHub is the best way to ask questions and provide feedback about the pattern.
+
+**Communicate what happens next.** If there are any outstanding issues or gaps, include those here. Ask for help if you need it, and be transparent about the completeness of the pattern.

gatsby-ssr.js

@@ -1,10 +1,18 @@
 /* eslint-disable import/prefer-default-export */
 import React from 'react';
 
-export const onRenderBody = ({ setPostBodyComponents }) =>
+export const onRenderBody = ({ setPostBodyComponents, setHeadComponents }) => {
+  setHeadComponents([
+    <link
+      key="serif"
+      href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif&display=swap"
+      rel="stylesheet"
+    />,
+  ]);
   setPostBodyComponents([
     <script
       key="docsearch"
       src="https://cdn.jsdelivr.net/npm/docsearch.js@2.6.2/dist/cdn/docsearch.min.js"
     />,
   ]);
+};

package.json

@@ -14,16 +14,17 @@
     "timestamp": "./build-timestamp.sh"
   },
   "dependencies": {
-    "@carbon/charts": "^0.15.8",
-    "@carbon/charts-react": "^0.15.7",
-    "@carbon/elements": "^10.5.1",
-    "@carbon/icons": "^10.5.0",
-    "@carbon/icons-react": "^10.5.0",
+    "@carbon/charts": "^0.16.2",
+    "@carbon/charts-react": "^0.16.2",
+    "@carbon/elements": "^10.6.0",
+    "@carbon/icons": "^10.6.0",
+    "@carbon/icons-react": "^10.6.0",
     "babel-eslint": "^10.0.3",
-    "carbon-components": "^10.5.1",
-    "carbon-components-react": "^7.5.1",
+    "carbon-components": "^10.6.0",
+    "carbon-components-react": "^7.6.0",
     "change-case": "^3.1.0",
     "classnames": "^2.2.6",
+    "d3": "^5.12.0",
     "docsearch.js": "^2.6.3",
     "gatsby": "^2.13.73",
     "gatsby-plugin-compile-es6-packages": "^2.1.0",

src/components/GlossaryComponent/GlossaryList/GlossaryList.js

@@ -21,7 +21,7 @@ class Glossary extends Component {
           {glossaryEntry}
           <span>{glossaryEntry}</span>
         </h2>
-        {Object.keys(entry).map(list => {
+        {Object.keys(entry).map((list, i) => {
           const listItems = Object.keys(entry[list]).map(word => {
             counter += 1;
             const currentWord = entry[list][word];
@@ -50,8 +50,7 @@ class Glossary extends Component {
             );
           });
           return (
-            <div key={list} className="glossary-entry__list">
-              <h3 className="glossary-entry__heading page-h3">{list}</h3>
+            <div key={i} className="glossary-entry__list">
               {listItems}
             </div>
           );

src/components/GlossaryComponent/GlossaryList/glossary-list.scss

@@ -2,6 +2,10 @@
   padding-top: rem(36px);
 }
 
+.glossary-entry__main-heading {
+  margin-bottom: $spacing-06;
+}
+
 .glossary-entry__main-heading span {
   text-transform: lowercase;
 }

src/components/TypesetStyle/TypesetStyle.js

@@ -871,11 +871,12 @@ class TypesetStyle extends React.Component {
   addScrollListener() {
     document.addEventListener('scroll', () => {
       if (this.refs.stickyBar) {
-        if (this.refs.stickyBar.getBoundingClientRect().top <= 104) {
+        console.log(this.refs.stickyBar.getBoundingClientRect().top);
+        if (this.refs.stickyBar.getBoundingClientRect().top <= 112) {
           this.setState({
             sticky: true,
           });
-        } else if (this.refs.stickyBar.getBoundingClientRect().top > 104) {
+        } else if (this.refs.stickyBar.getBoundingClientRect().top > 112) {
           this.setState({
             sticky: false,
           });

src/components/TypesetStyle/typeset-example.scss

@@ -4,6 +4,13 @@
 
 .bx--typeset-example {
   margin-top: $spacing-05;
+  margin-left: -$spacing-03;
+  margin-right: -$spacing-03;
+
+  @include carbon--breakpoint('md') {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 .bx--typeset-example-row {
@@ -17,11 +24,12 @@
 }
 
 .bx--typeset-example-description {
-  padding: $spacing-05 15% $spacing-05 $spacing-05;
+  padding: $spacing-05;
   overflow: hidden;
 
   @include carbon--breakpoint('md') {
     width: 62.5%;
+    padding-right: 15%;
   }
 
   @include carbon--breakpoint('lg') {
@@ -30,10 +38,10 @@
 }
 
 .bx--typeset-example-specs {
-  padding: $spacing-05;
-  width: 33.3%;
+  padding: $spacing-05 $spacing-06;
 
   @include carbon--breakpoint('md') {
+    width: 33.3%;
     border-left: 1px solid $carbon--gray-20;
   }
 }

src/components/TypesetStyle/typeset-style.scss

@@ -141,6 +141,7 @@ $prefix: 'bx';
   align-items: center;
   height: 3rem;
   border-top: 1px solid $carbon--gray-20;
+  border-bottom: 1px solid $carbon--gray-20;
   padding-left: $spacing-05;
   padding-right: $spacing-05;
   display: grid;
@@ -149,6 +150,7 @@ $prefix: 'bx';
 
   @include carbon--breakpoint('md') {
     border-top: none;
+    border-bottom: none;
     border-left: 1px solid $carbon--gray-20;
     width: 37.5%;
   }
@@ -369,6 +371,13 @@ $prefix: 'bx';
   transition-property: top;
   transition-duration: $transition--expansion;
   transition-timing-function: $carbon--standard-easing;
+  margin-left: -$spacing-03;
+  margin-right: -$spacing-03;
+
+  @include carbon--breakpoint('md') {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 div[class*='PageHeader-module--page-header--shifted']
@@ -407,55 +416,3 @@ div[class*='PageHeader-module--page-header--shifted']
     top: 8.5rem;
   }
 }
-
-// ------------------------------------------------------
-// Typeset Example
-// ------------------------------------------------------
-.#{$prefix}--typeset-example-container {
-  margin-top: $spacing-05;
-}
-
-.#{$prefix}--typeset-example {
-  margin-top: $spacing-05;
-}
-
-.#{$prefix}--typeset-example-row {
-  background-color: $carbon--white-0;
-  min-height: rem(216px);
-}
-
-.#{$prefix}--typeset-example-group-title {
-  background-color: $carbon--gray-20;
-  height: 4rem;
-}
-
-.#{$prefix}--typeset-example-description {
-  padding: $spacing-05 15% $spacing-05 $spacing-05;
-  overflow: hidden;
-
-  @include carbon--breakpoint('md') {
-    width: 62.5%;
-  }
-
-  @include carbon--breakpoint('lg') {
-    width: 66.7%;
-  }
-}
-
-.#{$prefix}--typeset-example-specs {
-  padding: $spacing-05;
-  width: 33.3%;
-
-  @include carbon--breakpoint('md') {
-    border-left: 1px solid $carbon--gray-20;
-  }
-}
-
-.#{$prefix}--typeset-example-specs-text {
-  margin-bottom: $spacing-03;
-}
-
-.#{$prefix}--typeset-example-code-style {
-  display: block;
-  margin-top: $spacing-03;
-}