feat: add experimental ListSection component from IDL

gatsby-config.js

@@ -9,6 +9,11 @@ module.exports = {
     keywords:
       'IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud',
   },
+  flags: {
+    PRESERVE_WEBPACK_CACHE: true,
+    FAST_DEV: true,
+    FAST_REFRESH: true,
+  },
   plugins: [
     {
       resolve: 'gatsby-source-filesystem',
@@ -33,7 +38,6 @@ module.exports = {
         linkImagesToOriginal: false,
         quality: 75,
         withWebp: false,
-        pngCompressionSpeed: 4,
       },
     },
     'gatsby-plugin-sharp',

gatsby-ssr.js

@@ -31,6 +31,7 @@ export const onRenderBody = ({ setHeadComponents }) => {
       src="https://cdn.usefathom.com/script.js"
       spa="auto"
       site="VMSGXQRS"
+      key="fathom"
       defer
     />,
   ]);

src/components/ListSection/ListSection.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import cx from 'classnames';
+import { Row } from 'gatsby-theme-carbon';
+import { listSection } from './ListSection.module.scss';
+
+const ListSection = ({ className, ...props }) => (
+  <Row className={cx(className, listSection)} {...props} />
+);
+
+export default ListSection;

src/components/ListSection/ListSection.module.scss

@@ -0,0 +1,28 @@
+//---------------------------------------
+// Principles page
+//---------------------------------------
+.list-section {
+  --space: 24px;
+  padding-top: 2rem;
+}
+
+.list-section:before {
+  content: '';
+  display: block;
+  background: $ui-04;
+  height: 1px;
+  width: calc(100% - 2rem);
+  margin: 0rem 1rem 1.5rem 1rem;
+}
+
+.list-section h2 {
+  margin-top: 0;
+}
+
+// Principles/Layout page
+.list-section [class*='#{$prefix}--col'] {
+  margin-bottom: 1.5rem;
+  @include carbon--breakpoint('md') {
+    margin-bottom: 0;
+  }
+}

src/components/ListSection/index.js

@@ -0,0 +1,3 @@
+import ListSection from './ListSection';
+
+export default ListSection;

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

@@ -5,6 +5,7 @@ import ComponentDemo from '../../../components/ComponentDemo';
 import ComponentVariant from '../../../components/ComponentDemo/ComponentVariant';
 import ColorPalette from '../../../components/ColorPalette';
 import Profile from '../../../components/Profile';
+import ListSection from '../../../components/ListSection';
 
 export default {
   ...defaultComponents,
@@ -13,4 +14,5 @@ export default {
   MdxIcon,
   ColorPalette,
   Profile,
+  ListSection,
 };

src/pages/test/list-section.mdx

@@ -0,0 +1,108 @@
+---
+title: Principles
+description:
+  IBM Design principles are carefully considered, uniquely unified, expertly
+  executed and positively progressive. Learn why to guide is to lead.
+---
+
+<PageDescription>
+
+IBM Design principles provide clear criteria for the conception, craftsmanship
+and creativity our brand demands and our clients deserve. They are for designers
+and non-designers alike, anyone authoring or authorizing any form of design on
+behalf of IBM.
+
+</PageDescription>
+
+<ListSection>
+<Column colMd={2} colLg={4}>
+
+## Carefully Considered
+
+</Column>
+<Column colMd={6} colLg={8}>
+
+**Design is an exercise of decision-making; experience, judgement,
+responsibility and timing.** These softer skills are difficult to distribute.
+Before we decide to do anything, we must consider its usefulness and utility to
+others. Then, we must determine how committed we are to enthusiastically explore
+and progressively deliver the full potential of a design.
+
+- Is it IBM to do? Is it essential? Is it opinionated?
+- Do we have the resources we need to fully realize a design’s impact and
+  intent?
+- Have we removed everything gratuitous?
+- Does an execution respect the time being asked for to experience it?
+
+</Column>
+</ListSection>
+
+<ListSection>
+<Column colMd={2} colLg={4}>
+
+## Uniquely Unified
+
+</Column>
+<Column colMd={6} colLg={8}>
+
+**In order to guide, continuity and creativity must co-exist in design.** Both
+of these qualities must be recognizable. Successful systems require both fixed
+and fluid elements of expression. The elements that bind all experiences are
+essential to providing a unified look, feel and tone. The innovative ways in
+which we use these elements delivers distinction and uniqueness.
+
+- Are we delivering recognizable, repeatable, reusable solutions?
+- Does solving one problem shorten the distance to another solution?
+- If you covered up our logo or name, would you identify an execution as being
+  designed by IBM?
+- Does one experience family well, reinforce and support another, side-by-side?
+
+</Column>
+</ListSection>
+
+<ListSection>
+<Column colMd={2} colLg={4}>
+
+## Expertly Executed
+
+</Column>
+<Column colMd={6} colLg={8}>
+
+**Everything communicates, both the things we do and the things we don’t do.**
+The care and craft we put into every experience is equal to any confidence or
+consideration we should expect in return. Every execution of IBM should exude
+expertise. This extends to the partners we choose to work with. We embrace the
+best of the best. And we never limit the impact of our ideas to our own
+abilities to deliver completely our design intent.
+
+- Can an experience be improved? If so, keep exploring.
+- Are we working with the right talent, team or timeframe?
+- Are we doing more with less?
+- Have we left any detail overlooked?
+- Can you feel the care and craft put into the experience?
+
+</Column>
+</ListSection>
+
+<ListSection>
+<Column colMd={2} colLg={4}>
+
+## Positively Progressive
+
+</Column>
+<Column colMd={6} colLg={8}>
+
+**To guide is to lead.** We are a Company with a history of firsts, including
+‘good design’. We are forward thinkers, futurists. We believe in and are
+dedicated to advancing the world around us, positively, progressively. Every
+design should present these qualities.
+
+- Think ahead. Is it additive or advancing?
+- Does it communicate confidence and positivity?
+- What is ingenious or innovative about the experience?
+- Have we removed all friction or obstacles to understanding or usability?
+- Does it render the previous permanently replaced?
+- Does it give more than it takes?
+
+</Column>
+</ListSection>