Merge branch 'main' into 6472-productive-card-avt

.github/workflows/process-pr-review-data.yml

@@ -25,4 +25,5 @@ jobs:
       - uses: ./actions/add-review-labels
         with:
           APP_ID: ${{ secrets.APP_ID }}
-          APP_PRIVATE_KEY: ${{ secrets.APP_PRIVATE_KEY }}
+          APP_PRIVATE_KEY: ${{ secrets.APP_PRIVATE_KEY }}
+          APP_INSTALLATION_ID: ${{ secrets.APP_INSTALLATION_ID }}

.github/workflows/update.yml

@@ -74,6 +74,13 @@ jobs:
         env:
           YARN_ENABLE_IMMUTABLE_INSTALLS: false
 
+      - name: Generate token
+        uses: tibdex/github-app-token@3beb63f4bd073e61482598c45c71c1019b59b73a #v2.1.0
+        id: generate_token
+        with:
+          app_id: ${{ secrets.APP_ID }}
+          private_key: ${{ secrets.APP_PRIVATE_KEY }}
+
       - name: Create PR
         id: create-pr
         uses: peter-evans/create-pull-request@5e914681df9dc83aa4e4905692ca88beb2f9e91f # v7.0.5

.stylelintrc.js

@@ -1,11 +1,18 @@
 module.exports = {
   extends: ['stylelint-config-carbon'],
+  plugins: ['stylelint-plugin-carbon-tokens'],
   rules: {
     'max-nesting-depth': null,
     'scss/no-global-function-names': null,
     'csstools/use-logical': null,
     'scss/load-no-partial-leading-underscore': null,
     'scss/double-slash-comment-inline': null,
     'no-duplicate-selectors': null,
+
+    'carbon/layout-use': true,
+    'carbon/motion-duration-use': [true, { severity: 'warning' }],
+    'carbon/motion-easing-use': true,
+    'carbon/theme-use': true,
+    'carbon/type-use': true,
   },
 };

.vscode/carbon-snippets.code-snippets

@@ -28,7 +28,7 @@
 	"prefix": [
 		"//la"
 	],
-	"body": "// stylelint-disable-next-line carbon/layout-token-use"
+	"body": "// stylelint-disable-next-line carbon/layout-use"
 },
 "Stylelint disable next line Carbon Duraion": {
 	"scope": "scss",
@@ -49,14 +49,14 @@
 	"prefix": [
 		"//ty"
 	],
-	"body": "// stylelint-disable-next-line carbon/type-token-use"
+	"body": "// stylelint-disable-next-line carbon/type-use"
 },
 "Stylelint disable next line Carbon Theme": {
 	"scope": "scss",
 	"prefix": [
 		"//th"
 	],
-	"body": "// stylelint-disable-next-line carbon/theme-token-use"
+	"body": "// stylelint-disable-next-line carbon/theme-use"
 },
 // spacing tokens
 "spacing-01 (0.125rem 2px)": { "scope": "scss", "prefix": ["$sp", "$car"], "body": "$$spacing-01", "description": "Carbon spacing token" },

actions/add-review-labels/action.yml

@@ -7,6 +7,9 @@ inputs:
   APP_PRIVATE_KEY:
     description: GitHub app private key
     required: true
+  APP_INSTALLATION_ID:
+    description: Carbon automation GitHub app installation id
+    required: true
 runs:
   using: 'docker'
   image: 'Dockerfile'

actions/add-review-labels/index.js

@@ -21,8 +21,11 @@ async function run() {
   const privateKey = core.getInput('APP_PRIVATE_KEY', {
     required: true,
   });
+  const installId = core.getInput('APP_INSTALLATION_ID', {
+    required: true,
+  });
   const app = new App({ appId, privateKey });
-  const octokit = await app.getInstallationOctokit(52238220);
+  const octokit = await app.getInstallationOctokit(installId);
 
   const { workflow_run, repository, organization } = context.payload;
   const workflowRunId = workflow_run.id;
@@ -98,7 +101,7 @@ async function run() {
   // Get reviewer team data
   const { data } = await octokit.request('GET /orgs/{org}/teams/{team_slug}', {
     org: organization.login,
-    team_slug: 'reviewing-team', // Should be only hardcoded value (outside of the labels) needed within this action. Replace with the appropriate reviewing team that is assigned to review PRs.
+    team_slug: 'carbon-for-ibm-products-reviewers', // Should be only hardcoded value (outside of the labels) needed within this action.
     headers: {
       'X-GitHub-Api-Version': '2022-11-28',
     },

config/jest-config-ibm-cloud-cognitive/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.14.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@[email protected]) (2024-12-04)
+
+**Note:** Version bump only for package jest-config-ibm-cloud-cognitive
+
+
+
+
+
 # [1.14.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@[email protected]) (2024-11-25)
 
 **Note:** Version bump only for package jest-config-ibm-cloud-cognitive

config/jest-config-ibm-cloud-cognitive/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jest-config-ibm-cloud-cognitive",
   "private": true,
-  "version": "1.14.0-rc.0",
+  "version": "1.14.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -36,7 +36,7 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@testing-library/jest-dom": "^6.3.0",
-    "accessibility-checker": "^3.1.65",
+    "accessibility-checker": "^3.1.78",
     "axe-core": "^4.8.3",
     "babel-jest": "^29.7.0",
     "babel-preset-ibm-cloud-cognitive": "^0.14.40",

config/storybook-addon-carbon-theme/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-04)
+
+**Note:** Version bump only for package @carbon/storybook-addon-theme
+
+
+
+
+
 # [2.4.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-11-25)
 
 **Note:** Version bump only for package @carbon/storybook-addon-theme

config/storybook-addon-carbon-theme/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/storybook-addon-theme",
   "description": "Carbon theme switcher for Storybook",
-  "version": "2.4.0-rc.0",
+  "version": "2.4.0",
   "license": "Apache-2.0",
   "main": "dist/react.js",
   "repository": {

e2e/components/ExpressiveCard/ExpressiveCard-test.avt.e2e.js

@@ -9,6 +9,7 @@
 
 import { expect, test } from '@playwright/test';
 import { visitStory } from '../../test-utils/storybook';
+import { pkg } from '../../../packages/ibm-products/src/settings';
 
 test.describe('ExpressiveCard @avt', () => {
   test('@avt-default-state', async ({ page }) => {
@@ -22,5 +23,137 @@ test.describe('ExpressiveCard @avt', () => {
     await expect(page).toHaveNoACViolations(
       'ExpressiveCard @avt-default-state'
     );
+    const buttonEle = page.getByText('Read more');
+    // Pressing 'Tab' key to focus on the "Read more" button
+    await page.keyboard.press('Tab');
+    await expect(buttonEle).toBeFocused();
+  });
+
+  test('@avt-label-only-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--label-only',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-label-only-state'
+    );
+  });
+  test('@avt-with-caption-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-caption',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-caption-state'
+    );
+  });
+  test('@avt-with-media-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-media',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-media-state'
+    );
+  });
+  test('@avt-with-action-icon-href-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-action-icon-href',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-action-icon-href-state'
+    );
+
+    const hrefEle = page.locator('a[href="#"]');
+    // Pressing 'Tab' key to focus on the '->' href button
+    await page.keyboard.press('Tab');
+    await expect(hrefEle).toBeFocused();
+  });
+  test('@avt-with-pictogram-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-pictogram',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-pictogram-state'
+    );
+  });
+  test('@avt-with-secondary-action-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-secondary-action',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-secondary-action-state'
+    );
+    const primaryButtonEle = page.getByText('Remove');
+    const secondaryButtonEle = page.getByText('Read more');
+    // Pressing 'Tab' key to focus on the "Remove" button
+    await page.keyboard.press('Tab');
+    await expect(primaryButtonEle).toBeFocused();
+    // Pressing 'Tab' key to focus on the "Read more" button
+    await page.keyboard.press('Tab');
+    await expect(secondaryButtonEle).toBeFocused();
+  });
+  test('@avt-clickable-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--clickable',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-clickable-state'
+    );
+    const cardElement = page.locator(
+      `[data-carbon-devtools-id="${pkg.prefix}--ExpressiveCard"]`
+    );
+    // Pressing 'Tab' key to focus on the clickable card
+    await page.keyboard.press('Tab');
+    await expect(cardElement).toBeFocused();
+  });
+  test('@avt-with-button-href-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-button-href',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-button-href-state'
+    );
+  });
+  test('@avt-with-button-icon-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-button-icon',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-button-icon-state'
+    );
   });
 });