Chore/update carbon platform branch

.github/workflows/add-to-project.yml

@@ -0,0 +1,11 @@
+name: Add To Project
+
+on:
+  issues:
+    types: [opened, labeled]
+
+jobs:
+  issue-triage:
+    uses: carbon-design-system/carbon/.github/workflows/add-to-project.yml@main
+    secrets:
+      ADD_TO_PROJECT_PAT: ${{ secrets.ADD_TO_PROJECT_PAT }}

.github/workflows/issue-triage.yml

@@ -10,4 +10,3 @@ jobs:
     secrets:
       APP_ID: ${{ secrets.APP_ID }}
       APP_PRIVATE_KEY: ${{ secrets.APP_PRIVATE_KEY }}
-      ADD_TO_PROJECT_PAT: ${{ secrets.ADD_TO_PROJECT_PAT }}

.github/workflows/platform-content-sync.yml

@@ -0,0 +1,29 @@
+name: Sync content with platform
+
+on:
+  push:
+    branches:
+      - 'main'
+    paths:
+      - '**.mdx'
+
+jobs:
+  create_issue:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          repository: carbon-design-system/carbon-platform
+          ref: main
+      - name: Generate token
+        uses: tibdex/github-app-token@v1
+        id: generate_token
+        with:
+          app_id: ${{ secrets.APP_ID }}
+          private_key: ${{ secrets.APP_PRIVATE_KEY }}
+      - name: Create issue on platform repo
+        run: |
+          gh issue create --title "[Content sync]: carbon-website" --label "role: dev 🤖" --label "service: web-app 🌎" --body 'A pull request on carbon-website was just merged. It contains .mdx content changes that may need to be synced to platform:
+          - ${{ github.event.compare }}'
+        env:
+          GITHUB_TOKEN: ${{ steps.generate_token.outputs.token }}

gatsby-node.js

@@ -44,6 +44,11 @@ exports.createPages = ({ actions }) => {
     toPath: '/community/component-index',
     isPermanent: true,
   });
+  createRedirect({
+    fromPath: '/community/contribute-a-component',
+    toPath: '/community/component-index',
+    isPermanent: true,
+  });
 
   // Developing
   createRedirect({
@@ -66,4 +71,9 @@ exports.createPages = ({ actions }) => {
     toPath: '/developing/vue-tutorial/overview',
     isPermanent: true,
   });
+  createRedirect({
+    fromPath: '/guidelines/typography/styling-strategies',
+    toPath: '/guidelines/typography/style-strategies',
+    isPermanent: true,
+  });
 };

gatsby-ssr.js

@@ -1,17 +1,17 @@
 import React from 'react';
 
-export const onRenderBody = ({ setHeadComponents }) => {
+export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
   const script = `
   if(!window) window = {};
-  window.idaPageIsSPA = true;
+  window.idaPageIsSPA = false;
   window.digitalData = {
     page: {
       category: {
         primaryCategory: 'DESIGN',
       },
       pageInfo: {
         ibm: {
-          siteID: 'CARBON_DESIGN_SYSTEM',
+          siteID: 'CARBON_DESIGN_SYSTEM_WWW',
           country: 'US',
           industry: 'Design',
           owner: 'carbon@us.ibm.com',
@@ -20,12 +20,7 @@ export const onRenderBody = ({ setHeadComponents }) => {
     },
   }`;
 
-  return setHeadComponents([
-    <meta
-      key="description"
-      name="description"
-      content="Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors."
-    />,
+  setHeadComponents([
     <meta key="image" name="image" content={'/ogimage.png'} />,
     <meta
       key="og:url"
@@ -73,6 +68,9 @@ export const onRenderBody = ({ setHeadComponents }) => {
       key="fathom"
       defer
     />,
+  ]);
+
+  setPostBodyComponents([
     <script key="digital-data" dangerouslySetInnerHTML={{ __html: script }} />,
     <script
       defer

package.json

@@ -24,7 +24,7 @@
     "update-browserslist": "npx browserslist-ga"
   },
   "engines": {
-    "node": ">=16.x"
+    "node": "^16"
   },
   "browserslist": [
     "last 1 edge version",
@@ -40,11 +40,11 @@
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@carbon/charts-react": "0.55.0",
-    "@carbon/elements": "^11.8.0-rc.0",
-    "@carbon/icons-react": "^11.7.0",
-    "@carbon/pictograms": "^12.3.0",
-    "@carbon/pictograms-react": "^11.29.0",
-    "@carbon/react": "^1.10.0-rc.0",
+    "@carbon/elements": "^11.17.0",
+    "@carbon/icons-react": "^11.14.0",
+    "@carbon/pictograms": "^12.11.0",
+    "@carbon/pictograms-react": "^11.37.0",
+    "@carbon/react": "^1.20.0",
     "@loadable/component": "^5.15.2",
     "@slack/web-api": "^5.11.0",
     "babel-preset-env": "^1.7.0",
@@ -57,7 +57,7 @@
     "gatsby": "^4.9.2",
     "gatsby-image": "^3.7.1",
     "gatsby-plugin-image": "^2.9.0",
-    "gatsby-theme-carbon": "^3.0.0-next.12",
+    "gatsby-theme-carbon": "^3.0.0-next.13",
     "lodash-es": "^4.17.15",
     "markdown-it": "^12.3.2",
     "nanoid": "^2.1.11",

src/components/Banner/Banner.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+
+import {
+  banner,
+  bannerText,
+  bannerHeading,
+  bannerDetails,
+  buttonBanner,
+} from './Banner.module.scss';
+
+const Banner = () => {
+  return (
+    <div aria-label="banner" className={banner}>
+      <p className={bannerText}>
+        <strong className={bannerHeading}>
+          A new web experience is coming!
+        </strong>
+        <span className={bannerDetails}>
+          The v1 Carbon platform is now available in public beta.
+        </span>
+      </p>
+      <Button
+        href="https://next.carbondesignsystem.com"
+        className={buttonBanner}
+        kind="ghost"
+        renderIcon={ArrowRight}>
+        Try the Carbon Platform
+      </Button>
+    </div>
+  );
+};
+
+export default Banner;

src/components/Banner/Banner.module.scss

@@ -0,0 +1,61 @@
+// position header, left nav and content with banner
+.banner + :global(.cds--header),
+.banner + header + nav + div[class*='leftNavWrapper'],
+.banner + header + nav + div + span + div + #main-content {
+  top: rem(48px);
+}
+
+// adjust nav container to account for banner
+.banner + header + nav[class*='Switcher-module--nav'] {
+  top: 6rem;
+}
+
+// banner styles
+.banner {
+  position: fixed;
+  top: 0;
+  z-index: 99999;
+  display: flex;
+  width: 100%;
+  height: rem(48px);
+  justify-content: space-between;
+
+  background: $blue-70;
+  color: $text-on-color;
+}
+
+.banner-text {
+  display: none;
+
+  @include breakpoint('md') {
+    @include type-style('body-short-01');
+
+    display: block;
+    padding: rem(15px) 0 0 $spacing-05;
+  }
+}
+
+.banner-details {
+  display: none;
+
+  @include breakpoint('lg') {
+    display: inline;
+    padding-left: $spacing-03;
+  }
+}
+
+// override carbon button styles
+.banner :global(.cds--btn--ghost).button-banner {
+  width: 100%;
+  max-width: 100%;
+  color: $text-on-color;
+
+  @include breakpoint('md') {
+    width: auto;
+  }
+
+  &:hover {
+    background: $blue-70-hover;
+    color: $text-on-color;
+  }
+}

src/components/Banner/index.js

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

src/components/ColorBlock/color-block.scss

@@ -19,8 +19,8 @@
     width: rem(14px);
     border-radius: rem(14px);
     border: 1px solid $gray-30;
-    left: -1px;
-    top: -1px;
+    left: 0px;
+    top: 0px;
   }
 }
 

src/components/ColorPalette/ColorPalette.module.scss

@@ -284,7 +284,6 @@
     #a2191f,
     #da1e28,
     #fa4d56,
-    #fa4d56,
     #ffb3b8,
     #ffd7d9,
     #fff1f1,

src/components/ComponentDemo/ComponentDemo.module.scss

@@ -233,14 +233,16 @@
 
 // custom classnames are being applied to both fieldset and label
 // https://github.com/carbon-design-system/carbon/issues/4572
-fieldset.form-group {
+fieldset.form-group,
+fieldset[class*='--radio-button-group'] {
   padding: 1rem;
   padding-top: 0;
   margin-bottom: 0;
   border-bottom: 1px solid $ui-03;
 }
 
-fieldset.form-group:last-of-type {
+fieldset.form-group:last-of-type,
+fieldset[class*='--radio-button-group']:last-of-type {
   border-bottom: 0;
 }
 

src/components/ComponentDemo/KnobContainer.js

@@ -79,8 +79,7 @@ const Component = ({
       <div
         role="group"
         aria-labelledby={componentGroupId}
-        className={componentKnobWrapper}
-      >
+        className={componentKnobWrapper}>
         {booleanKnobs.length > 0 && (
           <FormGroup className={formGroup} legendText="Modifiers">
             {booleanKnobs.map(([name, info]) => (
@@ -228,22 +227,21 @@ const Knob = ({
     }
 
     return (
-      <FormGroup className={formGroup} legendText={name}>
-        <RadioButtonGroup
-          onChange={(val) => updateKnob(val)}
-          defaultSelected={defaultSelected}
-          name={name}
-          orientation="vertical"
-        >
-          {values.map(({ value }) => (
-            <RadioButton
-              key={`${inputId}-${value}`}
-              value={value}
-              labelText={value.replace(/'/g, '')}
-            />
-          ))}
-        </RadioButtonGroup>
-      </FormGroup>
+      <RadioButtonGroup
+        className={formGroup}
+        legendText={name}
+        onChange={(val) => updateKnob(val)}
+        defaultSelected={defaultSelected}
+        name={name}
+        orientation="vertical">
+        {values.map(({ value }) => (
+          <RadioButton
+            key={`${inputId}-${value}`}
+            value={value}
+            labelText={value.replace(/'/g, '')}
+          />
+        ))}
+      </RadioButtonGroup>
     );
   }
   return '';
@@ -291,15 +289,13 @@ const KnobContainer = ({ knobs, code, setCode, initialCode, variantId }) => {
     <Form
       className={cx(knobContainer, {
         [knobContainerCollapsed]: isMobile && isKnobContainerCollapsed,
-      })}
-    >
+      })}>
       {isMobile && (
         <div className={iconButtonRow}>
           <button
             className={iconButton}
             type="button"
-            onClick={() => setIsKnobContainerCollapsed(true)}
-          >
+            onClick={() => setIsKnobContainerCollapsed(true)}>
             <Close size={20} />
           </button>
         </div>