chore(fluid-inputs): update branch with latest changes from main

gatsby-node.js

@@ -66,4 +66,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,6 +1,6 @@
 import React from 'react';
 
-export const onRenderBody = ({ setHeadComponents }) => {
+export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
   const script = `
   if(!window) window = {};
   window.idaPageIsSPA = true;
@@ -20,7 +20,7 @@ export const onRenderBody = ({ setHeadComponents }) => {
     },
   }`;
 
-  return setHeadComponents([
+  setHeadComponents([
     <meta key="image" name="image" content={'/ogimage.png'} />,
     <meta
       key="og:url"
@@ -68,6 +68,9 @@ export const onRenderBody = ({ setHeadComponents }) => {
       key="fathom"
       defer
     />,
+  ]);
+
+  setPostBodyComponents([
     <script key="digital-data" dangerouslySetInnerHTML={{ __html: script }} />,
     <script
       defer

package.json

@@ -40,11 +40,11 @@
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@carbon/charts-react": "0.55.0",
-    "@carbon/elements": "^11.10.0-rc.0",
-    "@carbon/icons-react": "^11.8.0-rc.0",
-    "@carbon/pictograms": "^12.6.0-rc.0",
-    "@carbon/pictograms-react": "^11.32.0-rc.0",
-    "@carbon/react": "^1.13.0-rc.0",
+    "@carbon/elements": "^11.12.0",
+    "@carbon/icons-react": "^11.10.0",
+    "@carbon/pictograms": "^12.7.0",
+    "@carbon/pictograms-react": "^11.33.0",
+    "@carbon/react": "^1.15.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,56 @@
+// 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);
+}
+
+// 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/TypesetStyle/typeset-style.scss

@@ -83,9 +83,14 @@
 .cds--typeset-style-controls-sticky {
   align-items: center;
   background-color: $white-0;
+  box-sizing: content-box;
+  position: sticky;
   width: auto;
   z-index: 2;
-  box-sizing: content-box;
+
+  @include breakpoint('md') {
+    flex-wrap: nowrap;
+  }
 }
 
 .cds--typeset-style-controls-sticky-stuck {
@@ -119,22 +124,14 @@
 }
 
 .cds--typeset-style-breakpoint-controls {
-  height: 3rem;
   align-items: center;
   display: flex;
+  height: 3rem;
   overflow-x: auto;
-  white-space: nowrap;
   padding-left: $spacing-05;
   padding-right: 0;
+  white-space: nowrap;
   width: 100%;
-
-  @include breakpoint('md') {
-    width: 62.5%;
-  }
-
-  @include breakpoint('lg') {
-    width: 50%;
-  }
 }
 
 .cds--typeset-style-screen-width-label {
@@ -147,21 +144,16 @@
   height: 3rem;
   border-top: 1px solid $gray-20;
   border-bottom: 1px solid $gray-20;
-  padding-left: $spacing-05;
-  padding-right: $spacing-05;
   display: grid;
   grid-template-columns: auto 1fr auto;
+  padding-left: $spacing-05;
+  padding-right: $spacing-05;
   width: 100%;
 
   @include breakpoint('md') {
     border-top: none;
     border-bottom: none;
     border-left: 1px solid $gray-20;
-    width: 37.5%;
-  }
-
-  @include breakpoint('lg') {
-    width: 50%;
   }
 }
 

src/data/docgen/react-docgen.json

@@ -4702,6 +4702,82 @@
     }
   },
   "PrimaryButton": { "description": "", "displayName": "PrimaryButton" },
+  "ProgressBar": {
+    "description": "",
+    "displayName": "ProgressBar",
+    "methods": [],
+    "props": {
+      "className": {
+        "type": { "name": "string" },
+        "required": false,
+        "description": "Additional CSS class names."
+      },
+      "helperText": {
+        "type": { "name": "string" },
+        "required": false,
+        "description": "The current progress as a textual representation."
+      },
+      "hideLabel": {
+        "type": { "name": "bool" },
+        "required": false,
+        "description": "Whether the label should be visually hidden."
+      },
+      "label": {
+        "type": { "name": "string" },
+        "required": true,
+        "description": "A label describing the progress bar."
+      },
+      "max": {
+        "type": { "name": "number" },
+        "required": false,
+        "description": "The maximum value.",
+        "defaultValue": { "value": "100", "computed": false }
+      },
+      "size": {
+        "type": {
+          "name": "enum",
+          "value": [
+            { "value": "'small'", "computed": false },
+            { "value": "'big'", "computed": false }
+          ]
+        },
+        "required": false,
+        "description": "Specify the size of the ProgressBar.",
+        "defaultValue": { "value": "'big'", "computed": false }
+      },
+      "status": {
+        "type": {
+          "name": "enum",
+          "value": [
+            { "value": "'active'", "computed": false },
+            { "value": "'finished'", "computed": false },
+            { "value": "'error'", "computed": false }
+          ]
+        },
+        "required": false,
+        "description": "Specify the status.",
+        "defaultValue": { "value": "'active'", "computed": false }
+      },
+      "type": {
+        "type": {
+          "name": "enum",
+          "value": [
+            { "value": "'default'", "computed": false },
+            { "value": "'inline'", "computed": false },
+            { "value": "'indented'", "computed": false }
+          ]
+        },
+        "required": false,
+        "description": "Defines the alignment variant of the progress bar.",
+        "defaultValue": { "value": "'default'", "computed": false }
+      },
+      "value": {
+        "type": { "name": "number" },
+        "required": false,
+        "description": "The current value."
+      }
+    }
+  },
   "ProgressIndicator": {
     "description": "",
     "displayName": "ProgressIndicator",

src/data/nav-items.yaml

@@ -6,8 +6,6 @@
       path: /all-about-carbon/who-uses-carbon/
     - title: The Carbon ecosystem
       path: /all-about-carbon/the-carbon-ecosystem/
-    - title: The Carbon team
-      path: /all-about-carbon/the-team/
     - title: Partners
       path: /all-about-carbon/partners/
     - title: Releases
@@ -114,6 +112,8 @@
       path: /components/checkbox/usage/
     - title: Code snippet
       path: /components/code-snippet/usage/
+    - title: Contained list
+      path: /components/contained-list/usage/
     - title: Content switcher
       path: /components/content-switcher/usage/
     - title: Data table

src/gatsby-theme-carbon/components/Footer/index.js

@@ -40,6 +40,7 @@ const links = {
     },
     { href: 'https://www.ibm.com/privacy', linkText: 'Privacy' },
     { href: 'https://www.ibm.com/legal', linkText: 'Terms of use' },
+    { href: 'https://www.ibm.com/able', linkText: 'Accessibility' },
     { href: 'https://www.ibm.com/', linkText: 'IBM.com' },
   ],
   secondCol: [

src/gatsby-theme-carbon/components/Layout.js

@@ -7,6 +7,7 @@ import Header from 'gatsby-theme-carbon/src/components/Header';
 import Switcher from 'gatsby-theme-carbon/src/components/Switcher';
 import Footer from 'gatsby-theme-carbon/src/components/Footer';
 import Container from 'gatsby-theme-carbon/src/components/Container';
+import Banner from '../../components/Banner';
 
 import 'gatsby-theme-carbon/src/styles/index.scss';
 import { layout } from '../../styles/Layout.module.scss';
@@ -43,6 +44,7 @@ const Layout = ({
         pageDescription={pageDescription}
         pageKeywords={pageKeywords}
       />
+      {homepage && <Banner />}
       <Header />
       <Switcher />
       <LeftNav homepage={homepage} is404Page={is404} theme={theme} />