gatsby-theme-carbon 2.1.6 → 2.3.1

package/gatsby-config.js

@@ -34,6 +34,7 @@ module.exports = (themeOptions) => {
     gatsbyPluginSharpOptions = {},
     isServiceWorkerEnabled = false,
     isSwitcherEnabled = true,
+    extraLayouts = {},
   } = themeOptions;
 
   const theme = { ...defaultTheme, ...themeOption };
@@ -121,6 +122,7 @@ module.exports = (themeOptions) => {
           defaultLayouts: {
             default: require.resolve('./src/templates/Default.js'),
             home: require.resolve('./src/templates/Homepage.js'),
+            ...extraLayouts,
           },
         },
       },

package/gatsby-ssr.js

@@ -32,7 +32,7 @@ export const onRenderBody = ({ setHeadComponents, setBodyAttributes }) => {
     <link
       key="sans"
       rel="preload"
-      href="https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatin-VF.woff2"
+      href="https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-VF.woff2"
       as="font"
       type="font/woff2"
       crossOrigin=""

package/index.js

@@ -16,5 +16,7 @@ export { default as ImageCard } from './src/components/ImageCard';
 export { default as SquareCard } from './src/components/SquareCard';
 export { Tabs, Tab } from './src/components/Tabs';
 export { default as InlineNotification } from './src/components/InlineNotification';
+export { default as ExpressiveListContainer } from './src/components/ExpressiveListContainer';
+export { default as ExpressiveList } from './src/components/ExpressiveList';
 // Homepage Template Components
 export { HomepageCallout, HomepageBanner } from './src/components/Homepage';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "2.1.6",
+  "version": "2.3.1",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {

package/src/components/DoDontExample/DoDontExample.js

@@ -23,18 +23,25 @@ export default class DoDontExample extends React.Component {
   };
 
   render() {
-    const {
-      children,
-      caption,
-      captionTitle,
-      text,
-      aspectRatio,
-      color,
-      type,
-    } = this.props;
+    const { children, caption, captionTitle, text, aspectRatio, color, type } =
+      this.props;
 
     const wrapperClassNames = cx(`${prefix}--example`, {
-      [`${prefix}--example--square`]: aspectRatio === '1:1',
+      [`${prefix}--example--ratio`]:
+        aspectRatio === '1:1' ||
+        aspectRatio === '2:1' ||
+        aspectRatio === '1:2' ||
+        aspectRatio === '4:3' ||
+        aspectRatio === '3:4' ||
+        aspectRatio === '9:16' ||
+        aspectRatio === '16:9',
+      [`${prefix}--example--1x1`]: aspectRatio === '1:1',
+      [`${prefix}--example--2x1`]: aspectRatio === '2:1',
+      [`${prefix}--example--1x2`]: aspectRatio === '1:2',
+      [`${prefix}--example--4x3`]: aspectRatio === '4:3',
+      [`${prefix}--example--3x4`]: aspectRatio === '3:4',
+      [`${prefix}--example--9x16`]: aspectRatio === '9:16',
+      [`${prefix}--example--16x9`]: aspectRatio === '16:9',
       [`${prefix}--example--correct`]: type === 'do',
       [`${prefix}--example--incorrect`]: type !== 'do',
       [`${prefix}--example--dark`]: color === 'dark',

package/src/components/DoDontExample/do-dont-example.scss

@@ -34,11 +34,37 @@
   position: relative;
 }
 
-.#{$prefix}--example--square .#{$prefix}--example-card {
+// Aspect Ratio
+
+.#{$prefix}--example--1x1 .#{$prefix}--example-card {
   padding-top: 100%;
 }
 
-.#{$prefix}--example--square .#{$prefix}--example-card__content {
+.#{$prefix}--example--4x3 .#{$prefix}--example-card {
+  padding-top: 75%;
+}
+
+.#{$prefix}--example--3x4 .#{$prefix}--example-card {
+  padding-top: 133.3333333333%;
+}
+
+.#{$prefix}--example--2x1 .#{$prefix}--example-card {
+  padding-top: 50%;
+}
+
+.#{$prefix}--example--1x2 .#{$prefix}--example-card {
+  padding-top: 150%;
+}
+
+.#{$prefix}--example--9x16 .#{$prefix}--example-card {
+  padding-top: 177.7777777778%;
+}
+
+.#{$prefix}--example--16x9 .#{$prefix}--example-card {
+  padding-top: 56.25%;
+}
+
+.#{$prefix}--example--ratio .#{$prefix}--example-card__content {
   position: absolute;
   top: 0;
   left: 0;
@@ -74,7 +100,7 @@
 }
 
 .#{$prefix}--example--correct .#{$prefix}--example-card::before {
-  background: $support-02;
+  background: $carbon--green-50;
 }
 
 .#{$prefix}--example--incorrect .#{$prefix}--example-card::before {
@@ -92,7 +118,7 @@
 }
 
 .#{$prefix}--example__icon--correct {
-  fill: $support-02;
+  fill: $carbon--green-50;
 }
 
 .#{$prefix}--example__icon--incorrect {

package/src/components/DoDontRow/DoDont.js

@@ -38,8 +38,22 @@ export default class DoDont extends React.Component {
     const wrapperClassNames = cx(className, styles.example, {
       [styles.correct]: type === 'do',
       [styles.incorrect]: type === 'dont',
-      [styles.square]: aspectRatio === '1:1',
       [styles.dark]: color === 'dark',
+      [styles.ratio]:
+        aspectRatio === '1:1' ||
+        aspectRatio === '2:1' ||
+        aspectRatio === '1:2' ||
+        aspectRatio === '4:3' ||
+        aspectRatio === '3:4' ||
+        aspectRatio === '9:16' ||
+        aspectRatio === '16:9',
+      [styles.ratio1x1]: aspectRatio === '1:1',
+      [styles.ratio2x1]: aspectRatio === '2:1',
+      [styles.ratio1x2]: aspectRatio === '1:2',
+      [styles.ratio4x3]: aspectRatio === '4:3',
+      [styles.ratio3x4]: aspectRatio === '3:4',
+      [styles.ratio9x16]: aspectRatio === '9:16',
+      [styles.ratio16x9]: aspectRatio === '16:9',
     });
 
     return (

package/src/components/DoDontRow/DoDontRow.module.scss

@@ -103,10 +103,34 @@
   color: $carbon--white-0;
 }
 
-.square .card {
+.ratio1x1 .card {
   padding-top: 100%;
 }
 
+.ratio4x3 .card {
+  padding-top: 75%;
+}
+
+.ratio3x4 .card {
+  padding-top: 133.3333333333%;
+}
+
+.ratio2x1 .card {
+  padding-top: 50%;
+}
+
+.ratio1x2 .card {
+  padding-top: 150%;
+}
+
+.ratio9x16 .card {
+  padding-top: 177.7777777778%;
+}
+
+.ratio16x9 .card {
+  padding-top: 56.25%;
+}
+
 .card::before {
   content: '';
   position: absolute;
@@ -145,7 +169,7 @@
   position: relative;
 }
 
-.square .card-content {
+.ratio .card-content {
   position: absolute;
   top: 0;
   left: 0;

package/src/components/ExpressiveList/ExpressiveList.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import cx from 'classnames';
+import { settings } from 'carbon-components';
+import { Row, Column } from '../Grid';
+import * as styles from './ExpressiveList.module.scss';
+
+const { prefix } = settings;
+
+const ExpressiveList = ({
+  children,
+  className,
+  pictogram,
+  title,
+  titleType,
+}) => {
+  const ExpressiveListTitleClassNames = cx(styles.title, {
+    [styles.expressive_04]: titleType === 'expressive-04',
+    [styles.expressive_02]: titleType === 'expressive-02',
+  });
+
+  if (!pictogram) {
+    return (
+      <Row className={(cx(className), styles.listRow)}>
+        <Column colMd={2} colLg={4} noGutterLgLeft>
+          <h3 className={ExpressiveListTitleClassNames}>{title}</h3>
+        </Column>
+        <Column colMd={6} colLg={8}>
+          <p className={styles.content}>{children}</p>
+        </Column>
+      </Row>
+    );
+  }
+  return (
+    <Row className={(cx(className), styles.listRow)}>
+      <Column colMd={2} colLg={1} noGutterLgLeft>
+        {pictogram}
+      </Column>
+      <Column colMd={6} colLg={7} className={styles.pictogramContent}>
+        <h3 className={ExpressiveListTitleClassNames}>{title}</h3>
+        <p className={styles.content}>{children}</p>
+      </Column>
+    </Row>
+  );
+};
+
+ExpressiveList.propTypes = {
+  children: propTypes.string,
+  className: propTypes.string,
+  pictogram: propTypes.node,
+  title: propTypes.string,
+  titleType: propTypes.string,
+};
+
+export default ExpressiveList;

package/src/components/ExpressiveList/ExpressiveList.module.scss

@@ -0,0 +1,44 @@
+.listRow {
+  background: $ui-01;
+  padding: 1rem;
+  padding-bottom: 4rem;
+  border-bottom: 1px solid $ui-03;
+}
+
+.listRow:not(:first-child) {
+  margin-top: 0;
+}
+
+.listRow:last-child {
+  border-bottom: none;
+}
+
+.title {
+  @include carbon--type-style('expressive-heading-03', true);
+
+  padding-right: 2rem;
+}
+
+.expressive_04 {
+  @include carbon--type-style('expressive-heading-04', true);
+
+  @include carbon--breakpoint-down('lg') {
+    padding: 1rem;
+  }
+
+  @include carbon--breakpoint-down('md') {
+    @include carbon--type-style('expressive-heading-03', true);
+  }
+}
+
+.expressive_02 {
+  @include carbon--type-style('expressive-heading-02', true);
+}
+
+.content {
+  @include carbon--type-style('body-long-02');
+}
+
+.pictogramContent {
+  padding-right: 2rem;
+}

package/src/components/ExpressiveList/index.js

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

package/src/components/ExpressiveListContainer/ExpressiveListContainer.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import cx from 'classnames';
+import { settings } from 'carbon-components';
+import { Row, Column } from '../Grid';
+import * as styles from './ExpressiveListContainer.module.scss';
+
+const { prefix } = settings;
+
+const ExpressiveListContainer = ({
+  contentClassName,
+  children,
+  className,
+  text,
+  title,
+  titleType,
+}) => {
+  const ExpressiveContainerClassNames = cx(className, styles.container);
+
+  const TitleClassNames = cx(styles.title, {
+    [styles.expressive_04]: titleType === 'expressive-04',
+    [styles.expressive_02]: titleType === 'expressive-02',
+  });
+
+  const ContentClassNames = cx(contentClassName, styles.content);
+
+  return (
+    <Row className={ExpressiveContainerClassNames}>
+      <Column colMd={2} colLg={4} noGutterLgLeft>
+        <h3 className={TitleClassNames}>{title}</h3>
+      </Column>
+      <Column colMd={6} colLg={8} noGutterLgRight className={ContentClassNames}>
+        <p className={styles.text}>{text}</p>
+        {children}
+      </Column>
+    </Row>
+  );
+};
+
+ExpressiveListContainer.propTypes = {
+  contentClassName: propTypes.string,
+  children: propTypes.node,
+  className: propTypes.string,
+  title: propTypes.string,
+  titleType: propTypes.string,
+};
+
+export default ExpressiveListContainer;

package/src/components/ExpressiveListContainer/ExpressiveListContainer.module.scss

@@ -0,0 +1,40 @@
+.container {
+  border-top: 1px solid $ui-04;
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+}
+
+.title {
+  @include carbon--type-style('expressive-heading-03', true);
+
+  padding-right: 2rem;
+}
+
+.expressive_04 {
+  @include carbon--type-style('expressive-heading-04', true);
+
+  @include carbon--breakpoint-down('lg') {
+    padding: 1rem;
+  }
+
+  @include carbon--breakpoint-down('md') {
+    @include carbon--type-style('expressive-heading-03', true);
+  }
+}
+
+.expressive_02 {
+  @include carbon--type-style('expressive-heading-02', true);
+}
+
+.content {
+  @include carbon--type-style('body-long-02');
+}
+
+.text {
+  padding-right: 2rem;
+}
+
+.text > *:first-child,
+.text:empty + *:nth-child(2) {
+  margin-top: 0;
+}

package/src/components/ExpressiveListContainer/index.js

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

package/src/components/MDXProvider/defaultComponents.js

@@ -31,6 +31,8 @@ import { MiniCard, CardGroup } from '../MiniCard';
 import Sup from '../markdown/Sup';
 import Abbr from '../markdown/Abbr';
 import SquareCard from '../SquareCard';
+import ExpressiveListContainer from '../ExpressiveListContainer';
+import ExpressiveList from '../ExpressiveList';
 
 const components = {
   wrapper: function Wrapper({ children, ...props }) {
@@ -83,6 +85,8 @@ const components = {
   MiniCard,
   CardGroup,
   SquareCard,
+  ExpressiveListContainer,
+  ExpressiveList,
 };
 
 export default components;

package/src/components/Switcher/Switcher.js

@@ -96,6 +96,9 @@ const DefaultChildren = () => (
     <SwitcherLink href="https://www.carbondesignsystem.com/">
       Carbon Design System
     </SwitcherLink>
+    <SwitcherLink href="http://ibm.biz/carbon4ibmproducts" isInternal>
+      Carbon for IBM Products
+    </SwitcherLink>
     <SwitcherLink href="https://www.ibm.com/standards/carbon/">
       Carbon for IBM.com
     </SwitcherLink>
@@ -118,9 +121,6 @@ const DefaultChildren = () => (
     <SwitcherLink href="https://www.ibm.com/design/research/">
       IBM Design Research
     </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/services/ibmix/">
-      IBM iX
-    </SwitcherLink>
     <SwitcherLink
       isInternal
       href="https://w3.ibm.com/design/experience-standards/">

package/src/styles/internal/_plex.scss

@@ -7,9 +7,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+0020-00FF;
   font-display: swap;
-  src: url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatin-VF.woff2')
+  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatin-VF.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-VF.woff2')
       format('woff2');
   font-weight: 100 900;
   font-style: normal;
@@ -19,9 +19,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+0100-1EF9;
   font-display: swap;
-  src: url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatinExt-VF.woff2')
+  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatinExt-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatinExt-VF.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatinExt-VF.woff2')
       format('woff2');
   font-weight: 100 900;
   font-style: normal;
@@ -31,9 +31,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+2000-FB02;
   font-display: swap;
-  src: url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansOther-VF.woff2')
+  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansOther-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansOther-VF.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansOther-VF.woff2')
       format('woff2');
   font-weight: 100 900;
   font-style: normal;
@@ -44,9 +44,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+0020-00FF;
   font-display: swap;
-  src: url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatin-Italic-VF.woff2')
+  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-Italic-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatin-Italic-VF.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-Italic-VF.woff2')
       format('woff2');
   font-weight: 100 900;
   font-style: italic;
@@ -56,9 +56,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+0100-1EF9;
   font-display: swap;
-  src: url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatinExt-Italic-VF.woff2')
+  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatinExt-Italic-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansLatinExt-Italic-VF.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatinExt-Italic-VF.woff2')
       format('woff2');
   font-weight: 100 900;
   font-style: italic;
@@ -68,9 +68,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+2000-FB02;
   font-display: swap;
-  src: url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansOther-Italic-VF.woff2')
+  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansOther-Italic-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/IBMPlexSansOther-Italic-VF.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansOther-Italic-VF.woff2')
       format('woff2');
   font-weight: 100 900;
   font-style: italic;
@@ -82,7 +82,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/mono/IBMPlexMono-Regular-Latin1.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Latin1.woff2')
       format('woff2');
   unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131,
     U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E,
@@ -95,7 +95,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/mono/IBMPlexMono-Regular-Latin2.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Latin2.woff2')
       format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF,
     U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
@@ -106,7 +106,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/mono/IBMPlexMono-Regular-Latin3.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Latin3.woff2')
       format('woff2');
   unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 }
@@ -116,7 +116,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/mono/IBMPlexMono-Regular-Pi.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Pi.woff2')
       format('woff2');
   unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083,
     U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E,
@@ -131,7 +131,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby-theme-carbon.now.sh/fonts/mono/IBMPlexMono-Regular-Cyrillic.woff2')
+    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Cyrillic.woff2')
       format('woff2');
   unicode-range: U+0400-045F, U+0472-0473, U+0490-049D, U+04A0-04A5, U+04AA-04AB,
     U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9,
@@ -160,7 +160,7 @@ body {
 }
 
 @supports (font-variation-settings: normal) {
-  // This rule includes both html and body to outgun the carbon--type-reset mixin 
+  // This rule includes both html and body to outgun the carbon--type-reset mixin
   // carbon--type-reset is being called inadvertantly when sites invoke the carbon--type-style mixin
   // Without it both html and body, the font-family gets overridden with `IBM Plex Sans` (not the variable font)
   html body {