Merge branch 'main' into feature-flags-tile-list-doc-update

carbon-design-system · Oct 10, 2024 · 1cc7030 · 1cc7030
2 parents edd7815 + 9c4ad91
commit 1cc7030
Show file tree

Hide file tree

Showing 84 changed files with 876 additions and 252 deletions.
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -61,6 +61,10 @@ export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
       name="twitter:creator"
       content="@_carbondesign"
     />,
+    <script
+      key="video-player"
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/video-player.min.js" />,
   ]);
 
   setPostBodyComponents([

diff --git a/package.json b/package.json
@@ -38,9 +38,9 @@
   ],
   "dependencies": {
     "@carbon/charts-react": "0.55.0",
-    "@carbon/icons-react": "^11.48.0",
-    "@carbon/pictograms": "^12.39.0",
-    "@carbon/pictograms-react": "^11.65.0",
+    "@carbon/icons-react": "^11.50.0",
+    "@carbon/pictograms": "^12.41.0",
+    "@carbon/pictograms-react": "^11.67.0",
     "@loadable/babel-plugin": "^5.16.1",
     "@loadable/component": "^5.16.4",
     "codesandbox": "^2.2.3",

diff --git a/src/components/ComponentOverview/ComponentOverview.js b/src/components/ComponentOverview/ComponentOverview.js
@@ -2,14 +2,16 @@
 import React from 'react';
 import { Link } from 'gatsby';
 import componentList from '../../data/components.json';
+import { Tag } from '@carbon/react';
 
 // only display components where overview is true in the data
 const filteredComponentList = componentList.components.filter(
   (item) => item.overview !== false
 );
+
 class ComponentOverview extends React.Component {
   renderItems = (currentItem) => {
-    const { component } = currentItem;
+    const { component, featureFlag } = currentItem;
     let componentUrl;
     if (component === 'Multiselect') {
       componentUrl = '/components/dropdown/usage';
@@ -39,7 +41,12 @@ class ComponentOverview extends React.Component {
                 alt={component}
                 className="component-item__img"
               />
-              <p className="component-name">{component}</p>
+              <p className="component-name">{component}</p>{' '}
+              {featureFlag ? (
+                <Tag type="blue" className="component-tag--feature-flag">
+                  Feature flag
+                </Tag>
+              ) : null}
             </Link>
           </div>
         </div>

diff --git a/src/components/ComponentOverview/component-overview.scss b/src/components/ComponentOverview/component-overview.scss
@@ -117,6 +117,13 @@ $hover-ui: #e5e5e5;
   text-align: left;
   display: flex;
   position: absolute;
-  top: 1rem;
-  left: 1rem;
+  top: $spacing-05;
+  left: $spacing-05;
+}
+
+.component-tag--feature-flag {
+  position: absolute;
+  bottom: $spacing-05;
+  left: $spacing-05;
+  margin: 0;
 }
diff --git a/src/components/KalturaVideo/KalturaVideo.js b/src/components/KalturaVideo/KalturaVideo.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * KalturaVideo component: A video player container for Kaltura videos.
+ *
+ * @param {object} videoProps - KalturaVideo component props
+ * @param {string} videoProps.videoid - The ID of the Kaltura video to be played.
+ * @param {boolean} videoProps.hideCaption - Determines if caption should be hidden.
+ * @returns {JSX.Element} JSX element containing the video player container.
+ */
+const KalturaVideo = ({ videoid, hideCaption = false }) => {
+  let videoProps = {
+    'video-id': videoid,
+  };
+
+  if (hideCaption) {
+    videoProps['hide-caption'] = true;
+  }
+
+  return (
+    <div>
+      <dds-video-player-container {...videoProps}></dds-video-player-container>
+    </div>
+  );
+};
+
+/**
+ * @typedef {object} KalturaVideoProps
+ *
+ * @property {string} videoid - The ID of the Kaltura video to be played.
+ */
+KalturaVideo.propTypes = {
+  hideCaption: PropTypes.bool,
+  videoid: PropTypes.string.isRequired,
+};
+
+/**
+ * @type {{hideCaption: boolean}}
+ */
+KalturaVideo.defaultProps = {
+  hideCaption: false,
+};
+
+export default KalturaVideo;
diff --git a/src/components/KalturaVideo/index.js b/src/components/KalturaVideo/index.js
@@ -0,0 +1,3 @@
+import KalturaVideo from './KalturaVideo';
+
+export default KalturaVideo;
diff --git a/src/components/MdxIcon/icons/carbon.svg b/src/components/MdxIcon/icons/carbon.svg
diff --git a/src/components/MdxIcon/index.js b/src/components/MdxIcon/index.js
@@ -19,8 +19,10 @@ import medium from './icons/medium.svg';
 import sass from './icons/sass.png';
 import figma from './icons/figma.svg';
 import yourlearning from './icons/yourlearning.svg';
+import carbon from './icons/carbon.svg';
 
 const localIcons = {
+  carbon,
   sketch,
   ase,
   codesandbox,

diff --git a/src/data/components.json b/src/data/components.json
@@ -298,12 +298,14 @@
     },
     {
       "component": "Menu buttons",
+      "featureFlag": true,
       "testing": {
         "screenreader": "manual"
       }
     },
     {
       "component": "Modal",
+      "featureFlag": true,
       "testing": {
         "screenreader": "manual"
       }
@@ -317,6 +319,7 @@
     },
     {
       "component": "Notification",
+      "featureFlag": true,
       "testing": {
         "screenreader": "manual"
       }
@@ -408,6 +411,7 @@
     },
     {
       "component": "Structured list",
+      "featureFlag": true,
       "testing": {
         "screenreader": "manual"
       }
@@ -447,6 +451,7 @@
     },
     {
       "component": "Tile",
+      "featureFlag": true,
       "testing": {
         "screenreader": "manual"
       }
@@ -479,6 +484,7 @@
     },
     {
       "component": "Treeview",
+      "featureFlag": true,
       "testing": {
         "screenreader": "manual"
       }

diff --git a/src/data/guidelines/color-tokens.js b/src/data/guidelines/color-tokens.js
@@ -4054,7 +4054,7 @@ const colorTokens = {
         },
         g90: {
           name: 'Gray 80',
-          hex: '#8d8d8d',
+          hex: '#393939',
         },
         g100: {
           name: 'Gray 90',
@@ -4075,7 +4075,7 @@ const colorTokens = {
         },
         g90: {
           name: 'Gray 80',
-          hex: '#8d8d8d',
+          hex: '#393939',
         },
         g100: {
           name: 'Gray 90',
@@ -4096,7 +4096,7 @@ const colorTokens = {
         },
         g90: {
           name: 'Gray 80',
-          hex: '#8d8d8d',
+          hex: '#393939',
         },
         g100: {
           name: 'Gray 90',
@@ -4108,16 +4108,16 @@ const colorTokens = {
       role: ['Warning low contrast notification background'],
       value: {
         white: {
-          name: 'Yellow 30, White',
-          hex: '#f1c21b, #ffffff',
+          name: 'Yellow 10',
+          hex: '#fcf4d6',
         },
         g10: {
-          name: 'Yellow 30, White',
-          hex: '#f1c21b, #ffffff',
+          name: 'Yellow 10',
+          hex: '#fcf4d6',
         },
         g90: {
           name: 'Gray 80',
-          hex: '#8d8d8d',
+          hex: '#393939',
         },
         g100: {
           name: 'Gray 90',

diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml
@@ -42,11 +42,9 @@
 - title: Contributing
   pages:
     - title: Get started
-      path: /contributing/get-started/
-    - title: Code
-      path: /contributing/code/
-    - title: Design
-      path: /contributing/design/
+      path: /contributing/get-started/overview
+    - title: Component checklist
+      path: /contributing/component-checklist/
     - title: Documentation
       path: /contributing/documentation/
 - title: Migrating

diff --git a/src/pages/all-about-carbon/releases.mdx b/src/pages/all-about-carbon/releases.mdx
@@ -62,6 +62,8 @@ redesign product UIs and begin a migration plan to comply with IBM brand
 experience standards. For more details about this release, see our
 [v10 release page](https://v10.carbondesignsystem.com/help/migration-guide/overview).
 
+As of September 30, 2024, all v10 assets have been deprecated.
+
 ## Release history
 
 {/* prettier-ignore-start */}

diff --git a/src/pages/all-about-carbon/the-carbon-ecosystem.mdx b/src/pages/all-about-carbon/the-carbon-ecosystem.mdx
@@ -68,7 +68,7 @@ _Some of this content is accessible to IBMers only._
     href="/community/component-index/"
     >
 
-![Carbon icon](images/ecosystem/carbon.svg)
+<MdxIcon name="carbon" />
 
   </ResourceCard>
 
@@ -90,7 +90,7 @@ _Some of this content is accessible to IBMers only._
     href="/community/patterns/"
     >
 
-![Carbon icon](images/ecosystem/carbon.svg)
+<MdxIcon name="carbon" />
 
   </ResourceCard>
 

diff --git a/src/pages/all-about-carbon/what-is-carbon.mdx b/src/pages/all-about-carbon/what-is-carbon.mdx
@@ -6,6 +6,8 @@ description:
   consists of working code, design tools, and more.
 ---
 
+import KalturaVideo from 'components/KalturaVideo';
+
 <PageDescription>
 
 Carbon is IBM's open source design system for products and digital experiences.
@@ -52,7 +54,7 @@ Learn about Carbon and its history. This video covers how the IBM Design
 Language is applied to Carbon, how Carbon interacts with domain level guidance,
 and what it means to be an open source design system.
 
-<Video title="Introduction to Carbon" vimeoId="457802924" />
+<KalturaVideo videoid="1_68e5qyal"></KalturaVideo>
 
 ## How Carbon works
 
@@ -93,7 +95,7 @@ primary maintainers:
 - [Elements](https://github.com/carbon-design-system/carbon): Carbon team
 - [React](https://github.com/carbon-design-system/carbon/tree/main/packages/react):
   Carbon team
-- [Web Components](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components):
+- [Web Components](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components):
   Carbon team
 - [Angular](https://angular.carbondesignsystem.com/): Community maintained
 - [Vue](https://github.com/carbon-design-system/carbon-components-vue):

diff --git a/src/pages/all-about-carbon/who-uses-carbon.mdx b/src/pages/all-about-carbon/who-uses-carbon.mdx
@@ -280,5 +280,4 @@ Here are some ways people in support roles can begin engaging with Carbon:
 
 - Report issues in these primary support Slack channels:
   - [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/)
-  - [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD)
   - [#carbon-react](https://ibm-studios.slack.com/archives/C2K6RFJ1G)
diff --git a/src/pages/community/component-index.mdx b/src/pages/community/component-index.mdx
@@ -26,7 +26,7 @@ patterns, functions, and templates that once lived here in the community index.
     href="https://next.carbondesignsystem.com/assets/components"
     >
 
-![Carbon icon](/images/carbon.svg)
+<MdxIcon name="carbon" />
 
   </ResourceCard>
 </Column>
@@ -38,7 +38,7 @@ patterns, functions, and templates that once lived here in the community index.
     href="https://next.carbondesignsystem.com/assets/patterns"
     >
 
-![Carbon icon](/images/carbon.svg)
+<MdxIcon name="carbon" />
 
   </ResourceCard>
 </Column>
@@ -50,7 +50,7 @@ patterns, functions, and templates that once lived here in the community index.
     href="https://next.carbondesignsystem.com/assets/functions"
     >
 
-![Carbon icon](/images/carbon.svg)
+<MdxIcon name="carbon" />
 
   </ResourceCard>
 </Column>
@@ -62,7 +62,7 @@ patterns, functions, and templates that once lived here in the community index.
     href="https://next.carbondesignsystem.com/assets/templates"
     >
 
-![Carbon icon](/images/carbon.svg)
+<MdxIcon name="carbon" />
 
   </ResourceCard>
 </Column>

diff --git a/src/pages/components/UI-shell-header/code.mdx b/src/pages/components/UI-shell-header/code.mdx
@@ -17,9 +17,9 @@ the Storybooks for each framework below.
 
 <Row className="resource-card-group">
 <Column colLg={4} colMd={4} noGutterSm>
-  <ResourceCard
+ <ResourceCard
     subTitle="React"
-    href="https://react.carbondesignsystem.com/?path=/story/components-ui-shell--header-base"
+    href="https://react.carbondesignsystem.com/?path=/story/components-ui-shell-header--header-w-navigation"
     >
 
 <MdxIcon name="react" />

diff --git a/src/pages/components/UI-shell-left-panel/code.mdx b/src/pages/components/UI-shell-left-panel/code.mdx
@@ -19,7 +19,7 @@ see the Storybooks for each framework below.
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
     subTitle="React"
-    href="https://react.carbondesignsystem.com/?path=/story/components-ui-shell--fixed-side-nav"
+    href="https://react.carbondesignsystem.com/?path=/story/components-ui-shell-sidenav--fixed-side-nav"
     >
 
 <MdxIcon name="react" />

diff --git a/src/pages/components/UI-shell-right-panel/code.mdx b/src/pages/components/UI-shell-right-panel/code.mdx
@@ -19,7 +19,7 @@ documentation, see the Storybooks for each framework below.
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
     subTitle="React"
-    href="https://react.carbondesignsystem.com/?path=/story/components-ui-shell--header-base-w-actions-and-right-panel"
+    href="https://react.carbondesignsystem.com/?path=/story/components-ui-shell-header--header-w-actions-and-right-panel"
     >
 
 <MdxIcon name="react" />

diff --git a/src/pages/components/ai-label/code.mdx b/src/pages/components/ai-label/code.mdx
@@ -17,7 +17,7 @@ documentation, see the Storybooks for each framework below.
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
     subTitle="React"
-    href="https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-slug--overview"
+    href="https://react.carbondesignsystem.com/?path=/story/components-ailabel--default"
     >
 
 <MdxIcon name="react" />

diff --git a/src/pages/components/breadcrumb/code.mdx b/src/pages/components/breadcrumb/code.mdx
@@ -19,7 +19,7 @@ usage documentation, see the Storybooks for each framework below.
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
     subTitle="React"
-    href="https://react.carbondesignsystem.com/?path=/story/components-breadcrumb--breadcrumb"
+    href="https://react.carbondesignsystem.com/?path=/story/components-breadcrumb--default"
     >
 
 <MdxIcon name="react" />

diff --git a/src/pages/components/checkbox/code.mdx b/src/pages/components/checkbox/code.mdx
@@ -19,7 +19,7 @@ documentation, see the Storybooks for each framework below.
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
     subTitle="React"
-    href="https://react.carbondesignsystem.com/?path=/story/components-checkbox--checkbox"
+    href="https://react.carbondesignsystem.com/?path=/story/components-checkbox--default"
     >
 
 <MdxIcon name="react" />