Merge pull request #221 from abbeyhrt/chore-update-list-classes

Refactor: update list classes to carbon classes

packages/example/src/pages/components/Video.mdx

@@ -34,7 +34,6 @@ The `<Video>` component can render a Vimeo player or a html video player.
 <Video src="/videos/hero-video.mp4" poster="/images/poster.png">
   <track default src="/videos/vtt/hero-video.vtt" srcLang="en" />
 </Video>
-
 ```
 
 ## Props

packages/gatsby-theme-carbon/src/components/MDXProvider/defaultComponents.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { P, H1, H2, H3, H4, H5, Ul, Ol, Blockquote } from '../markdown';
+import { P, H1, H2, H3, H4, H5, Ul, Ol, Li, Blockquote } from '../markdown';
 import PageTable from '../PageTable';
 import Code from '../Code';
 import PageDescription from '../PageDescription';
@@ -30,6 +30,7 @@ const components = {
   p: P,
   ol: Ol,
   ul: Ul,
+  li: Li,
   blockquote: Blockquote,
   pre: Code,
   table: PageTable,

packages/gatsby-theme-carbon/src/components/markdown/Li.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import cx from 'classnames';
+
+const Li = ({ children, ...rest }) => (
+  <li className="bx--list__item" {...rest}>
+    {React.Children.map(children, child => {
+      if (child.props) {
+        if (
+          (child.props.originalType === 'ul' ||
+            child.props.originalType === 'ol') &&
+          child.props.parentName === 'li'
+        ) {
+          return React.cloneElement(child, {
+            className: cx(child.props.className, 'bx--list--nested'),
+          });
+        }
+        return child;
+      }
+      return child;
+    })}
+  </li>
+);
+
+export default Li;

packages/gatsby-theme-carbon/src/components/markdown/Markdown.module.scss

@@ -120,74 +120,3 @@
   @include carbon--type-style('heading-01');
 }
 
-//---------------------------------------
-// Lists
-//---------------------------------------
-.ordered,
-.unordered {
-  margin-bottom: $spacing-06;
-  padding-left: 1.25em;
-  line-height: 1.5;
-  @include carbon--type-style('body-long-02');
-  @include carbon--breakpoint('md') {
-    padding-left: 1em;
-  }
-
-  // No margin for nested lists
-  .ordered,
-  .unordered {
-    margin-bottom: 0;
-  }
-}
-
-.ordered p,
-.unordered p {
-  width: 100%;
-}
-
-// Unordered lists
-.unordered {
-  padding-left: 0;
-  li {
-    list-style: none;
-    &::before {
-      content: '– ';
-      display: inline-block;
-      margin-right: $spacing-03;
-    }
-  }
-}
-
-.unordered .ordered {
-  margin-left: $spacing-08;
-}
-
-.unordered .unordered {
-  padding-left: $spacing-08;
-}
-
-// Ordered lists
-.ordered {
-  li {
-    list-style: decimal;
-    &::before {
-      content: none;
-    }
-  }
-}
-
-.ordered .unordered {
-  padding-left: $spacing-06;
-  li {
-    list-style: none;
-    &::before {
-      content: '– ';
-      display: inline-block;
-      margin-right: $spacing-03;
-    }
-  }
-}
-
-.ordered .ordered {
-  margin-left: $spacing-06;
-}

packages/gatsby-theme-carbon/src/components/markdown/Ol.js

@@ -1,9 +1,7 @@
 import React from 'react';
 
-import { ordered } from './Markdown.module.scss';
-
 const Ol = ({ children, ...rest }) => (
-  <ol className={ordered} {...rest}>
+  <ol className="bx--list--ordered" {...rest}>
     {children}
   </ol>
 );

packages/gatsby-theme-carbon/src/components/markdown/Ul.js

@@ -1,9 +1,7 @@
 import React from 'react';
 
-import { unordered } from './Markdown.module.scss';
-
 const Ul = ({ children, ...rest }) => (
-  <ul className={unordered} {...rest}>
+  <ul className="bx--list--unordered" {...rest}>
     {children}
   </ul>
 );

packages/gatsby-theme-carbon/src/components/markdown/index.js

@@ -6,4 +6,5 @@ export { default as H5 } from './H5';
 export { default as Ol } from './Ol';
 export { default as P } from './P';
 export { default as Ul } from './Ul';
+export { default as Li } from './Li';
 export { default as Blockquote } from './Blockquote';

packages/gatsby-theme-carbon/src/styles/index.scss

@@ -1,7 +1,7 @@
 // Base global
 @import './internal/global';
 
-// Global stylesbeet to inject global dependencies via shadowing
+// Global stylesheet to inject global dependencies via shadowing
 @import 'global';
 
 //---------------------------------------

packages/gatsby-theme-carbon/src/styles/internal/_global.scss

@@ -18,6 +18,7 @@ $feature-flags: (
 @import '~carbon-components/scss/components/code-snippet/code-snippet';
 @import '~carbon-components/scss/components/button/button';
 @import '~carbon-components/scss/components/tabs/tabs';
+@import '~carbon-components/scss/components/list/list';
 
 @import '~@carbon/addons-website/scss/components/website-grid';
 @import '~@carbon/addons-website/scss/components/website-header';