Merge branch 'main' into callout_accessibility

.github/ISSUE_TEMPLATE/accessibility-issue.md

@@ -1,9 +1,10 @@
 ---
 name: Accessibility issue ♿
 about: Report an accessibility or usability issue
-title: ""
-labels: "type: a11y ♿"
-assignees: ""
+title: ''
+type: 'bug'
+labels: ['type: a11y ♿', 'status: needs triage 🕵️‍♀️']
+assignees: ''
 ---
 
 <!-- Feel free to remove sections that aren't relevant.

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,9 +1,10 @@
 ---
-name: "Bug report 🐛"
+name: 'Bug report 🐛'
 about: Create a report to help us improve
-title: ""
-labels: "type: bug 🐛"
-assignees: ""
+title: ''
+type: 'bug'
+labels: ['type: bug 🐛', 'status: needs triage 🕵️‍♀️']
+assignees: ''
 ---
 
 <!-- Feel free to remove sections that aren't relevant.
@@ -16,7 +17,8 @@ assignees: ""
 
 > Describe in detail the issue you're having.
 
-> What did you expect to happen? What happened instead? What would you like to see changed?
+> What did you expect to happen? What happened instead? What would you like to
+> see changed?
 
 > What browser are you working in?
 

.github/ISSUE_TEMPLATE/component-accessibility-deliverables.yaml

@@ -1,7 +1,8 @@
 name: Component accessibility deliverables
 description: Submit the accessibility portion of your component
 title: '[Component name] component – accessibility '
-labels: 'accessibility'
+type: 'task'
+labels: ['accessibility', 'status: needs triage 🕵️‍♀️']
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/docs-issue.yaml

@@ -2,7 +2,8 @@ name: Documentation issue 📖
 description:
   Report missing, incorrect, or otherwise inconsistent documentation here.
 title: '[Docs]: '
-labels: 'type: bug 🐛'
+type: 'bug'
+labels: ['type: bug 🐛', 'type: docs 📖', 'status: needs triage 🕵️‍♀️']
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,43 +1,52 @@
 ---
-name: "Feature request 💡"
+name: 'Feature request 💡'
 about: Suggest an idea for this project
-title: ""
-labels: "type: enhancement 💡"
-assignees: ""
+title: ''
+type: 'enhancement'
+labels: ['type: enhancement 💡', 'status: needs triage 🕵️‍♀️']
+assignees: ''
 ---
 
-Use this template if you want to request a new feature, or a change to an existing feature.
+Use this template if you want to request a new feature, or a change to an
+existing feature.
 
 If you are reporting a bug or problem, please use the bug template instead.
 
 ### Summary
 
 Please describe your request in one or two sentences.
 
-Clarify if you are asking for both design and development, or just design, or just development.
+Clarify if you are asking for both design and development, or just design, or
+just development.
 
 ### Justification
 
 Provide the business reasons for this request.
 
 ### Desired UX and success metrics
 
-Describe the full user experience for this feature. Also define the metrics by which we can measure success/failure for the user.
+Describe the full user experience for this feature. Also define the metrics by
+which we can measure success/failure for the user.
 
 ### Must-have functionality
 
 Highlight any "must have" needs and functionality for the request.
 
-This should not be a full list of functionality; the Carbon team will work with you to define functionality based on the desired UX.
+This should not be a full list of functionality; the Carbon team will work with
+you to define functionality based on the desired UX.
 
 ### Specific timeline issues / requests
 
-Do you want this work within a specific time period? Is it related to an upcoming release?
+Do you want this work within a specific time period? Is it related to an
+upcoming release?
 
-_NB: The Carbon team will try to work with your timeline, but it's not guaranteed. The earlier you make a request in advance of a desired delivery date, the better!_
+_NB: The Carbon team will try to work with your timeline, but it's not
+guaranteed. The earlier you make a request in advance of a desired delivery
+date, the better!_
 
 ### Available extra resources
 
 What resources do you have to assist this effort?
 
-_Carbon is a collaborative system. We encourage teams to build components and submit them for integration as either add-ons or core components._
+_Carbon is a collaborative system. We encourage teams to build components and
+submit them for integration as either add-ons or core components._

.github/ISSUE_TEMPLATE/feedback.md

@@ -1,8 +1,9 @@
 ---
 name: Website feedback
 about: User feedback collected from the Carbon Design System Website.
-labels: "type: discussion 💬"
-assignees: ""
+type: 'task'
+labels: ['type: discussion 💬', 'status: needs triage 🕵️‍♀️']
+assignees: ''
 ---
 
 <!--

.github/ISSUE_TEMPLATE/question.md

@@ -1,9 +1,10 @@
 ---
 name: Question ❓
 about: Usage question or discussion about the Carbon Design System Website.
-title: ""
-labels: "type: question ❓"
-assignees: ""
+title: ''
+type: 'task'
+labels: ['type: question ❓', 'status: needs triage 🕵️‍♀️']
+assignees: ''
 ---
 
 <!--

.github/workflows/issue-triage.yml

@@ -4,9 +4,46 @@ on:
     types: [opened]
   issue_comment:
     types: [created]
+env:
+  ISSUE_NUMBER: ${{ github.event.issue.number }}
+  OWNER: ${{ github.repository_owner }}
+  REPOSITORY: ${{ github.repository }}
+
+  PROJECT_ID: 39
+  ITEM_FETCH_LIMIT: 1200
+
+  AREA_FIELD_ID: PVTSSF_lADOAYA3Ss1Nv84BfRL4
+  AREA_WEBSITE: 113a0859
 jobs:
   issue-triage:
     uses: carbon-design-system/carbon/.github/workflows/issue-triage.yml@main
     secrets:
       APP_ID: ${{ secrets.APP_ID }}
       APP_PRIVATE_KEY: ${{ secrets.APP_PRIVATE_KEY }}
+  set-area-per-repo:
+    needs: setup-variables
+    runs-on: ubuntu-latest
+    if: ${{ github.event_name == 'issues' && github.event.action == 'opened' }}
+    steps:
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+      - name: Get issue ID
+        id: get_issue_id
+        run: |
+            ISSUE_ID=$(gh project item-list $PROJECT_ID --owner=$OWNER --limit=$ITEM_FETCH_LIMIT --format=json --jq ".items[] | select(.content.number == $ISSUE_NUMBER and .content.repository == $REPOSITORY) | .id" -r)
+            if [ -z "$ISSUE_ID" ]; then
+              echo "Issue ID not found for issue number $ISSUE_NUMBER"
+              exit 1
+            fi
+            echo "Issue ID is $ISSUE_ID"
+            echo "issue_id=$ISSUE_ID" >> "$GITHUB_OUTPUT"
+      - name: Update issue with website area field
+        run:
+          gh project item-edit --project-id $PROJECT_ID --id $ISSUE_ID
+          --field-id $AREA_FIELD_ID --single-select-option-id $AREA_WEBSITE
+        env:
+          GH_TOKEN: ${{ steps.app-token.outputs.token }}
+          $ISSUE_ID: ${{ steps.get_issue_id.outputs.issue_id }}

README.md

@@ -1,3 +1,5 @@
+TEST
+
 # Carbon Design System
 
 ![Deployment status](https://github.com/carbon-design-system/carbon-website/workflows/Deployment%20status/badge.svg)

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([

package.json

@@ -38,16 +38,16 @@
   ],
   "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.52.0",
+    "@carbon/pictograms": "^12.42.0",
+    "@carbon/pictograms-react": "^11.68.0",
     "@loadable/babel-plugin": "^5.16.1",
     "@loadable/component": "^5.16.4",
     "codesandbox": "^2.2.3",
     "d3": "^7.9.0",
     "gatsby": "^5.13.5",
     "gatsby-plugin-sharp": "^5.13.1",
-    "gatsby-theme-carbon": "^4.0.8",
+    "gatsby-theme-carbon": "^4.1.13",
     "markdown-it": "^14.1.0",
     "prettier-config-carbon": "^0.11.0",
     "react": "^18.2.0",

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>

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;
 }

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;

src/components/KalturaVideo/index.js

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

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,