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

* chore(release): update carbon deps (#3159) Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com> * feat(website): add accessibility link, update common js (#3155) * feat(footer): add accessibility link * fix(cookies): remove defer from script * fix(common): move to post body components * fix(common): remove defer * fix(common): unique name * fix(common): re-add defer Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix: mdx formatting inside component demo (#3160) * docs: contained-list (#3145) * add new mdx pages * add images for usage tab * fix content * fix typos * update content * update headers * Update src/pages/components/contained-list/usage.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * Update src/pages/components/contained-list/usage.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * Update src/pages/components/contained-list/usage.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * Update src/pages/components/contained-list/usage.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * Update src/pages/components/contained-list/usage.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * add in inline notification * fix images * update side nav * update images * add Mike A feedback * add code, accessibility, and style tab content * add style tab images * rename tab * fix style images * update style content * update from Jan * stlye image update * update break * Update src/pages/components/contained-list/style.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * Update src/pages/components/contained-list/style.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * update style and usage content * update style and usage images * update image bug * insert break * update structure content * update style images * update image * update style tab * style tab updates Co-authored-by: Anna Gonzales <agonz@us.ibm.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * docs(grid): updated with API docs and example (#3136) * docs(grid): updated with API docs and example * docs(grid): better description * docs(grid): progressive disclosure and helpers * fix(typography): fix controls bug (#3130) * fix(typography): fix controls bug * chore(typsets): fix mobile typeset controls bug Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Updated outdated links to storybook (#3164) * Change tab text of typography from "Styling strategies" to "Style strategies" (#3163) * fix: Change tab text from "Styling strategies" to "Style Strategies" * fix: Change tab text from "Styling strategies" to "Style strategies" * fix: Change tab text from "Styling strategies" to "Style strategies" * fix: Change tab text from "Styling strategies" to "Style strategies" * fix: Update links in page to "Style Strategies" * fix: Update link in page to "Style strategies" * fix: rectify verbiage * fix: fix minor typo * fix: fix typo * fix: fix the link to "Style Strategies" * fix: fix the link to "Style strategies" * fix: create redirect to "Style strategies" * Update gatsby-node.js Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> * Update accessibility.mdx (#3143) * Update accessibility.mdx updated accessibility content * Update accessibility.mdx Made text updates for consistency * uploading images for accessibility tab * Update accessibility.mdx updates to try to make the ask easier to understand * Update header-accessibility-5.png alter annotation example * Added Lauren's images * Update src/pages/components/UI-shell-header/accessibility.mdx Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> * Update src/pages/components/UI-shell-header/accessibility.mdx Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> * Update src/pages/components/UI-shell-header/accessibility.mdx Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> * Update src/pages/components/UI-shell-header/accessibility.mdx Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> * Update src/pages/components/UI-shell-header/accessibility.mdx Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> * Update src/pages/components/UI-shell-header/accessibility.mdx Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> * Update src/pages/components/UI-shell-header/accessibility.mdx Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> * chore: output of yarn format Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> Co-authored-by: Taylor Jones <taylor.jones826@gmail.com> * Correct verbiage on ibm commerce platform page (#3157) * Compressed Images (#3162) Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * docs(Theme): update Theme docs with new guidance/usage (#2998) * docs(Theme): update Theme docs with new guidance/usage * Update src/pages/guidelines/themes/code.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * Update src/pages/guidelines/themes/code.mdx Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * docs(Themes): update docs with PR changes * chore(number-input): run prettier * docs(theme): update theme docs for v11 * docs(themes): update overview page for v11 * docs(theme): update overview page, remove tokens * docs(theme): rephrase notification for elements packages Co-authored-by: Anna Gonzales <agonz@us.ibm.com> Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> Co-authored-by: Taylor Jones <taylor.jones826@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * docs(team): removed team page and removed photos from partners (#3170) * fix(content): broken links (#3167) * Update writing-style.mdx * Update overview.mdx * fix: mdx formatting Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * docs(meetups): added office hours) (#3165) * update dataviz meeting time (#3177) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore(release): update carbon deps (#3178) Co-authored-by: abbeyhrt <abbeyhrt@users.noreply.github.com> * docs: figma v11 release content updates (#3176) * updated design and migration .mdx files * update content * update images * update figma .mdx * update figme content * update migration content * fix typo * remove break in figma.mdx * format fix * update images * update component count * typo update * add figma migration section * edit content * update migration design guide * add migration steps * update migration docs * update figma design kit page with links * chore(format): run yarn format Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <tw15egan@gmail.com> * Compressed Images (#3184) Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com> * docs(Accordion): match Accordion to ken to code (#3180) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Ecosystem updates (#3150) * Update the-carbon-ecosystem.mdx * Ecosystem updates Rename: AI Apps > Sustainability Software Merge: Cloud and Cloud & Cognitive to Carbon for IBM Products * More updates for IBM internal sites Bring naming changes to Domain Guidance page. Update some job titles and membership for team & partners. * Sync with conflicting changes docs(team): removed team page and removed photos from partners #3170 * feat: add crosslink banner to carbon platform on homepage (#3185) * feat: add crosslink banner to carbon platform on homepage * fix: remove calc from sass * Update Banner.module.scss * Update Banner.module.scss * Update Banner.js * Update Banner.module.scss * Update Banner.js * Update src/components/Banner/Banner.js Co-authored-by: Anna Gonzales <agonz@us.ibm.com> Co-authored-by: Anna Gonzales <agonz@us.ibm.com> * docs: add flush accordion content (#3168) * update usage docs with flush modifier * update usage images * update: usage * update: style * fix break * update mdx * update mdx * update image * update style tab * refine style images * adjust style images in tab comp. * update style structure * update style image * update color image * docs(progress-bar): add component live demo (#3182) * docs(progress-bar): add component live demo * chore(package): add @carbon/react resolution * chore(package): update gatsby-theme-carbon Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * docs(svelte): update resources and intro (#3183) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Compressed Images (#3189) Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com> * docs(contact-us): minor updates to contact us page (#3186) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore(release): update carbon deps (#3194) Co-authored-by: aledavila <aledavila@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(tutorial): remove optimize sass from step 5 (#3192) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(tutorial): remove badging (#3197) Co-authored-by: Alessandra Davila <adavila91@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore(release): update carbon deps (#3200) Co-authored-by: aledavila <aledavila@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(Icons): fix broken link (#3196) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * docs(Fluid inputs): text input and text area (#3158) * docs(main): Fluid inputs * Update src/pages/components/text-input/usage.mdx Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> * Apply suggestions from design review Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> * fixed-image-names * update image * update-placeholder-images * Update usage.mdx * remove italic headings * manually fixed typos from lauren Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> * chore(format): run yarn format Co-authored-by: carbon-automation[bot] <103539138+carbon-automation[bot]@users.noreply.github.com> Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com> Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com> Co-authored-by: Anna Gonzales <agonz@us.ibm.com> Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com> Co-authored-by: Alessandra Davila <adavila91@gmail.com> Co-authored-by: Anna Gonzales <anna.gonzales3@gmail.com> Co-authored-by: Abhilipsa Sahoo <abhilipsasahoo03@gmail.com> Co-authored-by: Mike Gower <mikegower@gmail.com> Co-authored-by: Taylor Jones <taylor.jones826@gmail.com> Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com> Co-authored-by: D.A. Kahn <40970507+dakahn@users.noreply.github.com> Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com> Co-authored-by: abbeyhrt <abbeyhrt@users.noreply.github.com> Co-authored-by: Michael Zuliani <zuliani@ca.ibm.com> Co-authored-by: Jan Hassel <jan.hassel@ibm.com> Co-authored-by: metonym <ericyl.us@gmail.com> Co-authored-by: Jeff Chew <jeff.chew@gmail.com> Co-authored-by: aledavila <aledavila@users.noreply.github.com>
carbon-design-system · Oct 14, 2022 · 25af05c · 25af05c
1 parent e8f3357
commit 25af05c
Show file tree

Hide file tree

Showing 131 changed files with 2,173 additions and 2,077 deletions.
diff --git a/gatsby-node.js b/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,
+  });
 };
diff --git a/gatsby-ssr.js b/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

diff --git a/package.json b/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",

diff --git a/src/components/Banner/Banner.js b/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;
diff --git a/src/components/Banner/Banner.module.scss b/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;
+  }
+}
diff --git a/src/components/Banner/index.js b/src/components/Banner/index.js
@@ -0,0 +1,3 @@
+import Banner from './Banner';
+
+export default Banner;
diff --git a/src/components/TypesetStyle/typeset-style.scss b/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%;
   }
 }
 

diff --git a/src/data/docgen/react-docgen.json b/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",

diff --git a/src/data/nav-items.yaml b/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

diff --git a/src/gatsby-theme-carbon/components/Footer/index.js b/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: [

diff --git a/src/gatsby-theme-carbon/components/Layout.js b/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} />

diff --git a/src/pages/all-about-carbon/images/ecosystem/carbon-for-ibm-product.svg b/src/pages/all-about-carbon/images/ecosystem/carbon-for-ibm-product.svg
diff --git a/src/pages/all-about-carbon/images/ecosystem/crop-growth.svg b/src/pages/all-about-carbon/images/ecosystem/crop-growth.svg