gatsby-theme-carbon 2.3.0 → 3.0.0-next.2

package/gatsby-config.js

@@ -93,12 +93,6 @@ module.exports = (themeOptions) => {
       `gatsby-remark-images`,
       `gatsby-transformer-yaml`,
       `gatsby-plugin-catch-links`,
-      {
-        resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
-        options: {
-          disable: !process.env.ANALYZE,
-        },
-      },
       {
         resolve: 'gatsby-plugin-lunr',
         options: lunrOptions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "2.3.0",
+  "version": "3.0.0-next.2",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {
@@ -12,60 +12,56 @@
   },
   "license": "Apache 2.0",
   "peerDependencies": {
-    "gatsby": "^3.3.0",
+    "gatsby": "^4.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "gatsby": "^3.3.1",
+    "gatsby": "^4.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "dependencies": {
     "@babel/core": "^7.14.6",
     "@carbon/elements": "^10.38.0",
-    "@carbon/icons-react": "^10.35.0",
     "@carbon/pictograms-react": "^11.14.0",
+    "@carbon/react": "^0.15.1",
     "@carbon/themes": "^10.38.0",
     "@mdx-js/mdx": "^1.5.5",
     "@mdx-js/react": "^1.5.5",
     "@reach/router": "^1.2.1",
     "@vimeo/player": "^2.9.1",
     "beautiful-react-hooks": "^0.23.1",
-    "carbon-components": "^10.39.0",
-    "carbon-components-react": "^7.39.0",
-    "carbon-icons": "^7.0.7",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "focus-trap-react": "^8.4.2",
-    "gatsby-plugin-catch-links": "^3.7.1",
+    "gatsby-plugin-catch-links": "^4.0.0",
     "gatsby-plugin-lunr": "^1.5.2",
-    "gatsby-plugin-manifest": "^3.7.1",
-    "gatsby-plugin-mdx": "^2.7.1",
-    "gatsby-plugin-offline": "^4.7.1",
-    "gatsby-plugin-react-helmet": "^4.7.1",
-    "gatsby-plugin-sass": "^4.7.1",
+    "gatsby-plugin-manifest": "^4.0.0",
+    "gatsby-plugin-mdx": "^3.0.0",
+    "gatsby-plugin-offline": "^5.0.0",
+    "gatsby-plugin-react-helmet": "^5.0.0",
+    "gatsby-plugin-sass": "^5.0.0",
     "gatsby-plugin-sass-resources": "^2.0.0",
-    "gatsby-plugin-sharp": "^3.7.1",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22",
-    "gatsby-remark-copy-linked-files": "^4.4.1",
-    "gatsby-remark-images": "^5.4.1",
-    "gatsby-remark-responsive-iframe": "^4.4.1",
-    "gatsby-remark-smartypants": "^4.4.1",
+    "gatsby-plugin-sharp": "^4.0.0",
+    "gatsby-remark-copy-linked-files": "^5.0.0",
+    "gatsby-remark-images": "^6.0.0",
+    "gatsby-remark-responsive-iframe": "^5.0.0",
+    "gatsby-remark-smartypants": "^5.0.0",
     "gatsby-remark-unwrap-images": "^1.0.1",
-    "gatsby-source-filesystem": "^3.7.1",
+    "gatsby-source-filesystem": "^4.0.0",
     "gatsby-source-medium-feed": "^1.0.6",
-    "gatsby-transformer-yaml": "^3.7.1",
+    "gatsby-transformer-yaml": "^4.0.0",
     "lodash.startcase": "^4.4.0",
     "lodash.throttle": "^4.1.1",
     "mkdirp": "^1.0.3",
-    "node-sass": "^6.0.1",
     "prism-react-renderer": "^1.2.1",
     "prop-types": "^15.7.2",
     "react-helmet": "^6.0.0-beta",
     "react-transition-group": "^4.4.2",
     "react-use": "^15.3.4",
     "remark-slug": "^6.0.0",
+    "sass": "^1.49.0",
     "slugify": "^1.3.4",
     "smooth-scroll": "^16.1.3",
     "use-media": "^1.4.0"

package/src/components/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { Accordion as CarbonAccordion } from 'carbon-components-react';
+import { Accordion as CarbonAccordion } from '@carbon/react';
 import { accordion } from './Accordion.module.scss';
 import { Row, Column } from '../Grid';
 

package/src/components/Accordion/Accordion.module.scss

@@ -1,17 +1,17 @@
-.accordion :global(.bx--accordion__content) {
+.accordion :global(.cds--accordion__content) {
   padding-right: 4rem;
 }
 
-.accordion :global(.bx--accordion__heading) {
+.accordion :global(.cds--accordion__heading) {
   padding-top: $spacing-04;
   padding-bottom: $spacing-04;
 }
 
-.accordion :global(.bx--accordion__title) {
-  @include carbon--type-style('heading-02');
+.accordion :global(.cds--accordion__title) {
+  @include type-style('heading-02');
   padding-right: $spacing-07;
 }
 
-.accordion :global(.bx--accordion__content) p {
-  @include carbon--type-style('body-long-02');
+.accordion :global(.cds--accordion__content) p {
+  @include type-style('body-long-02');
 }

package/src/components/Accordion/AccordionItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { AccordionItem as CarbonAccordionItem } from 'carbon-components-react';
+import { AccordionItem as CarbonAccordionItem } from '@carbon/react';
 
 const AccordionItem = ({ className, children, ...rest }) => (
   <CarbonAccordionItem {...rest} className={cx(className)}>

package/src/components/AlertBanner.js

@@ -1,24 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
-import { ArrowRight20, Information20 } from '@carbon/icons-react';
+import { ArrowRight, Information } from '@carbon/react/icons';
 
 const AlertBanner = ({ alertText, buttonText }) => (
   <aside aria-label="alert banner" className="website-alert">
-    <Information20 className="website-alert__icon" />
+    <Information size={20} className="website-alert__icon" />
     <p className="website-alert__text">{alertText}</p>
     <Link
       className="website-alert__button"
       tabIndex="-1"
       to="/updates/v10-migration/overview">
-      <button className="bx--btn bx--btn--secondary bx--btn--sm" type="button">
+      <button
+        className="cds--btn cds--btn--secondary cds--btn--sm"
+        type="button">
         {buttonText}
-        <ArrowRight20 />
+        <ArrowRight size={20} />
       </button>
     </Link>
   </aside>
 );
-
 AlertBanner.propTypes = {
   alertText: PropTypes.string.isRequired,
   buttonText: PropTypes.string.isRequired,

package/src/components/AnchorLinks/AnchorLinks.module.scss

@@ -2,7 +2,7 @@
   width: 100%;
   --space: 32px;
 
-  @include carbon--breakpoint('lg') {
+  @include breakpoint('lg') {
     width: 66.67%;
   }
 }
@@ -12,10 +12,10 @@
 }
 
 .link {
-  @include carbon--type-style('expressive-heading-03', true);
+  @include type-style('expressive-heading-03', true);
   position: relative;
   display: inline-block;
-  transition: color $transition--base;
+  transition: color $transition-base;
   color: currentColor;
   text-decoration: none;
   margin-bottom: $spacing-03;
@@ -35,13 +35,13 @@
 }
 
 .list--small .link {
-  @include carbon--type-style('body-long-02');
+  @include type-style('body-long-02');
   margin-bottom: 0;
 }
 
 // Multiple Columns
 .multiple-columns {
-  @include carbon--breakpoint('md') {
+  @include breakpoint('md') {
     column-count: 2;
   }
 }

package/src/components/ArticleCard/ArticleCard.js

@@ -3,15 +3,12 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Link } from 'gatsby';
 import {
-  Launch20,
-  Download20,
-  ArrowRight20,
-  Error20,
-  Email20,
-} from '@carbon/icons-react';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
+  Launch,
+  Download,
+  ArrowRight,
+  Error,
+  Email,
+} from '@carbon/react/icons';
 
 export default class ArticleCard extends React.Component {
   render() {
@@ -30,69 +27,64 @@ export default class ArticleCard extends React.Component {
       ...rest
     } = this.props;
 
+    // const prefix = 'cds';
+
     let isLink;
     if (href !== undefined) {
       isLink = href.charAt(0) === '/';
     }
 
-    const ArticleCardClassNames = cx(className, `${prefix}--article-card`, {
-      [`${prefix}--article-card--disabled`]: disabled,
-      [`${prefix}--article-card--dark`]: color === 'dark',
+    const ArticleCardClassNames = cx(className, `cds--article-card`, {
+      [`cds--article-card--disabled`]: disabled,
+      [`cds--article-card--dark`]: color === 'dark',
     });
 
     const aspectRatioClassNames = cx(
-      [`${prefix}--aspect-ratio`],
-      [`${prefix}--aspect-ratio--2x1`]
+      [`cds--aspect-ratio`],
+      [`cds--aspect-ratio--2x1`]
     );
 
     const cardContentClassNames = cx(
-      [`${prefix}--tile`],
-      [`${prefix}--tile--clickable`],
-      [`${prefix}--article-card_content`]
+      [`cds--tile`],
+      [`cds--tile--clickable`],
+      [`cds--article-card_content`]
     );
 
     const cardContent = (
       <>
-        <div className={`${prefix}--article-card__img`}>{children}</div>
+        <div className="cds--article-card__img">{children}</div>
         <div className={aspectRatioClassNames}>
-          <div
-            className={`${prefix}--aspect-ratio--object ${prefix}--article-card__tile`}>
+          <div className="cds--aspect-ratio--object cds--article-card__tile">
             {subTitle ? (
-              <h5 className={`${prefix}--article-card__subtitle`}>
-                {subTitle}
-              </h5>
+              <h5 className="cds--article-card__subtitle">{subTitle}</h5>
             ) : null}
             {title ? (
-              <h4 className={`${prefix}--article-card__title`}>{title}</h4>
+              <h4 className="cds--article-card__title">{title}</h4>
             ) : null}
-            <div className={`${prefix}--article-card__info`}>
+            <div className="cds--article-card__info">
               {author ? (
-                <p className={`${prefix}--article-card__author`}>{author}</p>
-              ) : null}
-              {date ? (
-                <p className={`${prefix}--article-card__date`}>{date}</p>
+                <p className="cds--article-card__author">{author}</p>
               ) : null}
+              {date ? <p className="cds--article-card__date">{date}</p> : null}
               {readTime ? (
-                <p className={`${prefix}--article-card__read-time`}>
-                  {readTime}
-                </p>
+                <p className="cds--article-card__read-time">{readTime}</p>
               ) : null}
             </div>
-            <div className={`${prefix}--article-card__icon--action`}>
+            <div className="cds--article-card__icon--action">
               {actionIcon === 'launch' && !disabled ? (
-                <Launch20 aria-label="Open" />
+                <Launch size={20} aria-label="Open" />
               ) : null}
               {actionIcon === 'arrowRight' && !disabled ? (
-                <ArrowRight20 aria-label="Open" />
+                <ArrowRight size={20} aria-label="Open" />
               ) : null}
               {actionIcon === 'download' && !disabled ? (
-                <Download20 aria-label="Download" />
+                <Download size={20} aria-label="Download" />
               ) : null}
               {actionIcon === 'email' && !disabled ? (
-                <Email20 aria-label="Email" />
+                <Email size={20} aria-label="Email" />
               ) : null}
               {actionIcon === 'disabled' || disabled === true ? (
-                <Error20 aria-label="disabled" />
+                <Error size={20} aria-label="disabled" />
               ) : null}
             </div>
           </div>

package/src/components/ArticleCard/article-card.scss

@@ -1,37 +1,55 @@
-.#{$prefix}--article-card .#{$prefix}--tile {
+// $carbon--white-0
+@use '@carbon/react/scss/colors' as *;
+// $spacing-0X
+@use '@carbon/react/scss/spacing' as *;
+// carbon--type-style
+@use '@carbon/react/scss/type' as *;
+// color tokens
+@use '@carbon/react/scss/compat/theme' as *;
+// $standard-easing $transition-x
+@use '@carbon/react/scss/motion' as *;
+// carbon--breakpoint
+@use '@carbon/react/scss/breakpoint' as *;
+
+.cds--article-card .cds--tile {
   background: $ui-01;
   height: 100%;
   padding: 0;
   position: relative;
-  transition: background $duration--fast-01;
+  transition: background $duration-fast-01;
   text-decoration: none;
-  @include carbon--breakpoint('lg') {
+  @include breakpoint('lg') {
     margin-bottom: var(--space);
   }
 }
 
-.#{$prefix}--article-card:hover .#{$prefix}--article-card__tile {
-  background: $hover-ui;
+.cds--article-card__tile {
+  padding: $spacing-05 25% $spacing-05 $spacing-05;
 }
 
-.#{$prefix}--article-card__tile {
-  padding: $spacing-05 25% $spacing-05 $spacing-05;
+// Dark
+.cds--article-card--dark .cds--article-card__tile {
+  background: $gray-90; //$ui-background for gray 90 theme
 }
 
-.#{$prefix}--article-card__title {
-  @include carbon--type-style('body-short-02');
+.cds--article-card:hover .cds--article-card__tile {
+  background: $hover-ui;
+}
+
+.cds--article-card__title {
+  @include type-style('body-short-02');
   text-decoration: none;
   color: $text-01;
 }
 
-.#{$prefix}--article-card__subtitle {
-  @include carbon--type-style('heading-01');
+.cds--article-card__subtitle {
+  @include type-style('heading-01');
   font-weight: 400;
   text-decoration: none;
   color: $text-01;
 }
 
-.#{$prefix}--article-card__info {
+.cds--article-card__info {
   position: absolute;
   bottom: 1rem;
   left: 1rem;
@@ -39,22 +57,22 @@
   color: $text-02;
 }
 
-.#{$prefix}--article-card__info p {
-  @include carbon--type-style('caption-01');
+.cds--article-card__info p {
+  @include type-style('caption-01');
 }
 
 // At the moment, we force 16:9 for medium posts, this
 // is how we would force 16:9 for all article cards
 //
-// .#{$prefix}--article-card__img {
+// .cds--article-card__img {
 //   aspect-ratio: 16 / 9;
 // }
 
-.#{$prefix}--article-card__img .gatsby-resp-image-wrapper {
+.cds--article-card__img .gatsby-resp-image-wrapper {
   margin-bottom: 0;
 }
 
-.#{$prefix}--article-card__icon--action {
+.cds--article-card__icon--action {
   position: absolute;
   bottom: 1rem;
   right: 1rem;
@@ -62,71 +80,62 @@
   height: 20px;
 }
 
-.#{$prefix}--article-card__icon--action svg {
+.cds--article-card__icon--action svg {
   fill: $icon-01;
 }
 
-// Dark
-.#{$prefix}--article-card--dark .#{$prefix}--article-card__tile {
-  background: $carbon--gray-90; //$ui-background for gray 90 theme
+.cds--article-card--dark:hover .cds--article-card__tile {
+  background: $gray-80; //$hover-ui for gray 90 theme
 }
 
-.#{$prefix}--article-card--dark:hover .#{$prefix}--article-card__tile {
-  background: $carbon--gray-80; //$hover-ui for gray 90 theme
-}
-
-.#{$prefix}--article-card--dark .#{$prefix}--article-card__title,
-.#{$prefix}--article-card--dark .#{$prefix}--article-card__subtitle {
+.cds--article-card--dark .cds--article-card__title,
+.cds--article-card--dark .cds--article-card__subtitle {
   color: $text-04;
 }
 
-.#{$prefix}--article-card--dark .#{$prefix}--article-card__info {
-  color: $carbon--gray-30; //$text-02 for gray 90 theme
+.cds--article-card--dark .cds--article-card__info {
+  color: $gray-30; //$text-02 for gray 90 theme
 }
 
-.#{$prefix}--article-card--dark .#{$prefix}--article-card__icon--action svg {
-  fill: $carbon--gray-10; //$icon-01 for grsay 90 theme
+.cds--article-card--dark .cds--article-card__icon--action svg {
+  fill: $gray-10; //$icon-01 for grsay 90 theme
 }
 
 // Disabled
-.#{$prefix}--article-card--disabled {
+.cds--article-card--disabled {
   cursor: not-allowed;
 }
 
-.#{$prefix}--article-card--disabled .#{$prefix}--article-card__tile:hover {
+.cds--article-card--disabled .cds--article-card__tile:hover {
   background: $ui-01;
   cursor: not-allowed;
 }
 
-.#{$prefix}--article-card--disabled .#{$prefix}--article-card__title,
-.#{$prefix}--article-card--disabled .#{$prefix}--article-card__subtitle,
-.#{$prefix}--article-card--disabled .#{$prefix}--article-card__info {
+.cds--article-card--disabled .cds--article-card__title,
+.cds--article-card--disabled .cds--article-card__subtitle,
+.cds--article-card--disabled .cds--article-card__info {
   color: $disabled-03;
 }
 
-.#{$prefix}--article-card--disabled
-  .#{$prefix}--article-card__icon--action
-  svg {
+.cds--article-card--disabled .cds--article-card__icon--action svg {
   fill: $disabled-02;
 }
 
 // Disabled dark
-.#{$prefix}--article-card--disabled.#{$prefix}--article-card--dark
-  .#{$prefix}--article-card__tile:hover {
-  background: $carbon--gray-90; //$ui-background for gray 90 theme
+.cds--article-card--disabled.cds--article-card--dark
+  .cds--article-card__tile:hover {
+  background: $gray-90; //$ui-background for gray 90 theme
 }
 
-.#{$prefix}--article-card--disabled.#{$prefix}--article-card--dark
-  .#{$prefix}--article-card__title,
-.#{$prefix}--article-card--disabled.#{$prefix}--article-card--dark
-  .#{$prefix}--article-card__subtitle,
-.#{$prefix}--article-card--disabled.#{$prefix}--article-card--dark
-  .#{$prefix}--article-card__info {
-  color: $carbon--gray-50; //$disabled-03 for gray 90
+.cds--article-card--disabled.cds--article-card--dark .cds--article-card__title,
+.cds--article-card--disabled.cds--article-card--dark
+  .cds--article-card__subtitle,
+.cds--article-card--disabled.cds--article-card--dark .cds--article-card__info {
+  color: $gray-50; //$disabled-03 for gray 90
 }
 
-.#{$prefix}--article-card--disabled.#{$prefix}--article-card--dark
-  .#{$prefix}--article-card__icon--action
+.cds--article-card--disabled.cds--article-card--dark
+  .cds--article-card__icon--action
   svg {
-  fill: $carbon--gray-70; //$disabled-02 for gray 90
+  fill: $gray-70; //$disabled-02 for gray 90
 }

package/src/components/Aside/Aside.module.scss

@@ -1,15 +1,15 @@
 .aside {
-  @include carbon--type-style('body-long-01');
+  @include type-style('body-long-01');
   position: relative;
   padding-top: $spacing-04;
   top: -$spacing-04;
   display: none;
 
-  @include carbon--breakpoint('md') {
+  @include breakpoint('md') {
     display: block;
   }
 
-  @include carbon--breakpoint('lg') {
+  @include breakpoint('lg') {
     padding-right: 26%; //spacing values came from IDL site design
   }
 }
@@ -28,13 +28,13 @@
   content: none;
 }
 
-:global(.#{$prefix}--row) .aside p {
-  @include carbon--type-style('body-long-01');
+:global(.cds--row) .aside p {
+  @include type-style('body-long-01');
   width: 100%;
   padding-right: 0;
 }
 
 // dark background
 :global(.container--dark) .aside:before {
-  background: $carbon--white-0;
+  background: $white-0;
 }

package/src/components/AutolinkHeader/AutolinkHeader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import useMedia from 'use-media';
 import { breakpoints } from '@carbon/elements';
-import { Link20 as Link } from '@carbon/icons-react';
+import { Link } from '@carbon/react/icons';
 import cx from 'classnames';
 import slugify from 'slugify';
 
@@ -23,7 +23,7 @@ const Anchor = ({ id, string, position }) => {
       className={anchorClasses}
       href={`#${id}`}
       aria-label={`${string} permalink`}>
-      <Link />
+      <Link size={20} />
     </a>
   );
 };

package/src/components/AutolinkHeader/AutolinkHeader.module.scss

@@ -4,7 +4,7 @@
 
 .anchor {
   opacity: 0;
-  transition: opacity $duration--fast-01 $carbon--standard-easing;
+  transition: opacity $duration-fast-01 $standard-easing;
 
   &:hover,
   &:active,
@@ -32,7 +32,7 @@
   margin-left: $spacing-03;
 }
 
-@include carbon--breakpoint('md') {
+@include breakpoint('md') {
   .header:hover .anchor {
     opacity: 1;
   }

package/src/components/BackToTopBtn/BackToTopBtn.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UpToTop20 } from '@carbon/icons-react';
+import { UpToTop } from '@carbon/react/icons';
 import { button } from './BackToTopBtn.module.scss';
 
 const BackToTopBtn = () => (
@@ -8,7 +8,7 @@ const BackToTopBtn = () => (
     className={button}
     type="button"
     aria-label="Back to Top">
-    <UpToTop20 />
+    <UpToTop size={20} />
   </button>
 );
 

package/src/components/BackToTopBtn/BackToTopBtn.module.scss

@@ -4,7 +4,7 @@
   border-radius: 50%;
   border-color: transparent;
   background: $interactive-02; //g60
-  transition: all $duration--fast-02;
+  transition: all $duration-fast-02;
   z-index: z('modal');
   padding-top: 0.325rem;
   cursor: pointer;
@@ -12,7 +12,7 @@
   bottom: $spacing-06;
   right: $spacing-05;
 
-  @include carbon--breakpoint('md') {
+  @include breakpoint('md') {
     bottom: $spacing-09;
     right: $spacing-07;
   }
@@ -34,7 +34,7 @@
 
 [class*='container--dark'] {
   .button {
-    background: $carbon--gray-60;
+    background: $gray-60;
     &:hover {
       background: #606060;
     }

package/src/components/Caption/Caption.module.scss

@@ -1,22 +1,22 @@
 .caption {
-  @include carbon--type-style('body-short-01');
+  @include type-style('body-short-01');
   --space: #{$spacing-05};
 }
 
 // Responsive by default
 .caption-responsive {
   // 6/8 columns
-  @include carbon--breakpoint('md') {
+  @include breakpoint('md') {
     width: 75%;
   }
 
   // 6/12 columns wide
-  @include carbon--breakpoint('lg') {
+  @include breakpoint('lg') {
     width: 50%;
   }
 }
 
 // If caption is inside a user specified row then allow the grid code to set the width
-:global(.#{$prefix}--row) .caption {
+:global(.cds--row) .caption {
   width: 100%;
 }