Merge branch 'main' into renovate/eslint-plugin-jest-27.x

.github/workflows/deploy-react-storybook.yml

@@ -44,7 +44,7 @@ jobs:
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v2
         with:
           path: 'packages/react/storybook-static'
 

.yarnrc

@@ -1,4 +1,4 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
 
-yarn-path ".yarn/releases/yarn-3.5.0.cjs"
+yarn-path ".yarn/releases/yarn-3.6.1.cjs"

.yarnrc.yml

@@ -20,4 +20,4 @@ supportedArchitectures:
     - linux
     - win32
 
-yarnPath: .yarn/releases/yarn-3.6.0.cjs
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

achecker.js

@@ -10,7 +10,7 @@
 const path = require('path');
 
 module.exports = {
-  ruleArchive: '26May2023',
+  ruleArchive: 'latest',
   policies: ['Custom_Ruleset'],
   failLevels: ['violation'],
   reportLevels: [

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

@@ -0,0 +1,141 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('ProgressIndicator', () => {
+  test('accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ProgressIndicator');
+  });
+
+  test('accessibility-checker interactive progressindicator @avt', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--interactive',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ProgressIndicator-interactive');
+  });
+
+  test('accessibility-checker skeleton progressindicator @avt', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ProgressIndicator-skeleton');
+  });
+
+  test('accessibility-checker - onHover @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    await expect(page.getByText('First step')).toBeVisible();
+
+    page.getByText('First step').hover();
+
+    await expect(page).toHaveNoACViolations('ProgressIndicator-onhover');
+  });
+
+  test('accessibility-checker - complete @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    // Checking if the 'complete' prop is adding the correct class
+    expect(page.locator('.cds--progress-step--complete')).toBeTruthy();
+  });
+
+  test('accessibility-checker - current @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    // Checking if the 'current' prop is adding the correct class
+    expect(page.locator('.cds--progress-step--current')).toBeTruthy();
+  });
+
+  test('accessibility-checker - interactive onHover @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--interactive',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    await expect(page.getByText('Click me')).toBeVisible();
+
+    page.getByText('Click me').hover();
+
+    await expect(page).toHaveNoACViolations(
+      'ProgressIndicator-interactive-onhover'
+    );
+  });
+
+  test('progress indicator - keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--interactive',
+      globals: {
+        theme: 'white',
+      },
+    });
+    // Testing the first element interaction
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('button', { name: 'Click me' })).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('button', { name: 'Click me' })).toBeFocused();
+
+    await page.keyboard.press('Enter');
+    await page.keyboard.press('Escape');
+
+    // Testing the third element interaction
+    await page.keyboard.press('Tab');
+    await expect(
+      page.getByRole('button', { name: 'Third step' })
+    ).toBeFocused();
+
+    await page.keyboard.press('Enter');
+    await page.keyboard.press('Escape');
+
+    await expect(
+      page.getByRole('button', { name: 'Third step' })
+    ).toBeFocused();
+  });
+});

e2e/components/ProgressIndicator/ProgressIndicator-test.e2e.js

@@ -7,9 +7,9 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test');
+const { test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+const { snapshotStory } = require('../../test-utils/storybook');
 
 test.describe('ProgressIndicator', () => {
   themes.forEach((theme) => {
@@ -31,15 +31,4 @@ test.describe('ProgressIndicator', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'ProgressIndicator',
-      id: 'components-progressindicator--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('ProgressIndicator');
-  });
 });

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

@@ -0,0 +1,40 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('TextInput @avt', () => {
+  test('default state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TextInput',
+      id: 'components-textinput--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('TextInput');
+  });
+
+  test('disabled state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'TextInput',
+      id: 'components-textinput--playground',
+      globals: {
+        theme: 'white',
+      },
+      args: {
+        disabled: 'true',
+      },
+    });
+
+    await expect(page.getByRole('textbox')).toBeDisabled();
+    await expect(page).toHaveNoACViolations('TextInput-Disabled');
+  });
+});

e2e/components/TextInput/TextInput-test.e2e.js

@@ -7,9 +7,9 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test');
+const { test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+const { snapshotStory } = require('../../test-utils/storybook');
 
 test.describe('TextInput', () => {
   themes.forEach((theme) => {
@@ -55,15 +55,4 @@ test.describe('TextInput', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'TextInput',
-      id: 'components-textinput--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('TextInput');
-  });
 });

e2e/test-utils/storybook.js

@@ -8,13 +8,22 @@
 const { snapshot } = require('./snapshot');
 
 async function visitStory(page, options) {
-  const { component, story, id, globals } = options;
+  const { component, story, id, globals, args } = options;
   let url = getStoryUrl({
     component,
     story,
     id,
   });
 
+  if (args) {
+    const values = Object.entries(args)
+      .map(([key, value]) => {
+        return `${key}:${value}`;
+      })
+      .join(';');
+    url = url + `&args=${values}`;
+  }
+
   if (globals) {
     const values = Object.entries(globals)
       .map(([key, value]) => {

examples/class-prefix/README.md

@@ -9,15 +9,26 @@ component.
 
 ## Getting Started
 
-First, run `yarn` or `npm install` and then run the development server:
+First, run `yarn build` in the root of the `carbon` repository.
 
-```bash
-npm run dev
+```sh
+yarn install && yarn build
+```
+
+Now, all you need to do is `cd` into the directory and run:
+
+```sh
+yarn install
 # or
+npm install
+
+
 yarn dev
+# or
+npm run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the
 result.
 
 ## Sass

examples/codesandbox-styles/README.md

@@ -0,0 +1,23 @@
+# Getting Started with Code Sandbox styles
+
+First, run `yarn build` in the root of the `carbon` repository.
+
+```sh
+yarn install && yarn build
+```
+
+Now, all you need to do is `cd` into the directory and run:
+
+```sh
+yarn install
+# or
+npm install
+
+
+yarn dev
+# or
+npm run dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the
+result.

examples/codesandbox-with-sass-compilation/README.md

@@ -9,11 +9,14 @@ In the project directory, you can run:
 
 ### `npm start`
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+First, run `yarn build` in the root of the `carbon` repository.
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+```sh
+yarn install && yarn build
+```
+
+Now to run this example, all you need to do is `cd` into the directory, run
+`yarn install`, and then `yarn start`.
 
 ### `npm test`
 

examples/codesandbox/README.md

@@ -7,13 +7,16 @@ This project was bootstrapped with
 
 In the project directory, you can run:
 
-### `npm start`
+### Usage
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+First, run `yarn build` in the root of the `carbon` repository.
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+```sh
+yarn install && yarn build
+```
+
+Now to run this example, all you need to do is `cd` into the directory, run
+`yarn install`, and then `yarn start`.
 
 ### `npm test`