diff --git a/e2e/components/UIShell/UIShell-test.avt.e2e.js b/e2e/components/UIShell/UIShell-test.avt.e2e.js new file mode 100644 index 000000000000..2c0091a259e4 --- /dev/null +++ b/e2e/components/UIShell/UIShell-test.avt.e2e.js @@ -0,0 +1,144 @@ +/** + * 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('UIShell @avt', () => { + test('header base', async ({ page }) => { + await visitStory(page, { + component: 'UIShell', + id: 'components-ui-shell--header-base', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('UIShell'); + }); + + test('sidenav rail w/header', async ({ page }) => { + await visitStory(page, { + component: 'UIShell', + id: 'components-ui-shell--side-nav-rail-w-header', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('UIShell-side-nav-rail-w-header'); + }); + + test('sidenav rail w/header - expanded state', async ({ page }) => { + await visitStory(page, { + component: 'UIShell', + id: 'components-ui-shell--side-nav-rail-w-header', + globals: { + theme: 'white', + }, + }); + + // open the menu + page.getByRole('button', { name: 'Open menu' }).click(); + await expect(page).toHaveNoACViolations( + 'UIShell-side-nav-rail-w-header--expanded' + ); + }); + + test('sidenav rail w/header - expanded state open category sidenav', async ({ + page, + }) => { + await visitStory(page, { + component: 'UIShell', + id: 'components-ui-shell--side-nav-rail-w-header', + globals: { + theme: 'white', + }, + }); + // open a category within the menu + page + .getByRole('button', { name: 'Category title' }) + .first() + // The overlay causes the actionability checks to fail, so use `force` to bypass the checks + .click({ force: true }); + await expect(page).toHaveNoACViolations( + 'UIShell-side-nav-rail-w-header--expanded--category-expanded' + ); + }); + + test('sidenav rail w/header - expanded state header link', async ({ + page, + }) => { + await visitStory(page, { + component: 'UIShell', + id: 'components-ui-shell--side-nav-rail-w-header', + globals: { + theme: 'white', + }, + }); + + // open the header link dropdown + page + .getByRole('link', { name: 'Link 4' }) + // The overlay causes the actionability checks to fail, so use `force` to bypass the checks + .click({ force: true }); + await expect(page).toHaveNoACViolations( + 'UIShell-side-nav-rail-w-header--expanded--header-link' + ); + }); + + test('sidenav rail w/header - keyboard nav', async ({ page }) => { + await visitStory(page, { + component: 'UIShell', + id: 'components-ui-shell--side-nav-rail-w-header', + globals: { + theme: 'white', + }, + }); + + await page.keyboard.press('Tab'); + await expect( + page.getByRole('link', { name: 'Skip to main content' }) + ).toBeFocused(); + // tab through the links in the header, landing on the link with sublinks + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await expect(page.getByRole('link', { name: 'Link 4' })).toBeFocused(); + // open the sublinks menu + await page.keyboard.press('Space'); + await expect(page.getByRole('link', { name: 'Sub-link 1' })).toBeVisible(); + // tab through the sublinks menu + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await expect(page.getByRole('link', { name: 'Sub-link 3' })).toBeFocused(); + // tab once more and the sublinks menu should close + await page.keyboard.press('Tab'); + await expect( + page.getByRole('link', { name: 'Sub-link 1' }) + ).not.toBeVisible(); + // tab through to open the sidenav + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await expect( + page.getByRole('button', { name: 'Category title' }).first() + ).toBeFocused(); + // tab through the rest of the sidenav menu + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + // focus should then be within the main content of the page + await expect(page.getByRole('link', { name: 'Carbon' })).toBeFocused(); + }); +}); diff --git a/e2e/components/UIShell/UIShell-test.e2e.js b/e2e/components/UIShell/UIShell-test.e2e.js index 7abbbd979c2c..b550cc158592 100644 --- a/e2e/components/UIShell/UIShell-test.e2e.js +++ b/e2e/components/UIShell/UIShell-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('UIShell', () => { themes.forEach((theme) => { @@ -137,15 +137,4 @@ test.describe('UIShell', () => { }); }); }); - - test('accessibility-checker @avt', async ({ page }) => { - await visitStory(page, { - component: 'UIShell', - id: 'components-ui-shell--header-base', - globals: { - theme: 'white', - }, - }); - await expect(page).toHaveNoACViolations('UIShell'); - }); }); diff --git a/e2e/pictograms-react/__snapshots__/PublicAPI-test.js.snap b/e2e/pictograms-react/__snapshots__/PublicAPI-test.js.snap index 4927cbf3dc6e..edeb5443c0d3 100644 --- a/e2e/pictograms-react/__snapshots__/PublicAPI-test.js.snap +++ b/e2e/pictograms-react/__snapshots__/PublicAPI-test.js.snap @@ -11,6 +11,7 @@ Array [ "AdvancedFraudProtection", "AdvancedThreats", "Advocate", + "AdvocateMask", "Agility", "AgilityWithHybridMulticloud", "Agriculture", @@ -217,6 +218,8 @@ Array [ "Console", "ConsoleWireless", "Construct", + "ConstructionWorker", + "ConstructionWorkerMask", "ConsumerEngagementFoodJourney", "Container", "ContainerMicroservices", @@ -238,6 +241,14 @@ Array [ "CreditCard", "Crop", "Cupcake", + "CurveCubic", + "CurveExponential", + "CurveInverse", + "CurveLinear", + "CurveLogarithmic", + "CurveLogistic", + "CurvePower", + "CurveQuadratic", "CustomReports", "CustomWorkloads", "CustomerService", @@ -680,6 +691,7 @@ Array [ "Puzzle", "QQPlot", "QrCode", + "Quantum", "QuantumComputing", "QuantumSafe", "Question", @@ -916,6 +928,7 @@ Array [ "UserExperienceDesign", "UserInsights", "UserInterface", + "UserMask", "UserProfile", "UserSearch", "Vancouver", @@ -944,6 +957,10 @@ Array [ "WashingtonDcCapitol", "WashingtonDcMonument", "WatsonLogo", + "Watsonx", + "WatsonxAi", + "WatsonxData", + "WatsonxGovernance", "Weather", "WebDeveloper", "Webcast", diff --git a/e2e/pictograms/__snapshots__/PublicAPI-test.js.snap b/e2e/pictograms/__snapshots__/PublicAPI-test.js.snap index d99625ebbed3..f350de442a2d 100644 --- a/e2e/pictograms/__snapshots__/PublicAPI-test.js.snap +++ b/e2e/pictograms/__snapshots__/PublicAPI-test.js.snap @@ -11,6 +11,7 @@ Array [ "AdvancedFraudProtection", "AdvancedThreats", "Advocate", + "AdvocateMask", "Agility", "AgilityWithHybridMulticloud", "Agriculture", @@ -217,6 +218,8 @@ Array [ "Console", "ConsoleWireless", "Construct", + "ConstructionWorker", + "ConstructionWorkerMask", "ConsumerEngagementFoodJourney", "Container", "ContainerMicroservices", @@ -238,6 +241,14 @@ Array [ "CreditCard", "Crop", "Cupcake", + "CurveCubic", + "CurveExponential", + "CurveInverse", + "CurveLinear", + "CurveLogarithmic", + "CurveLogistic", + "CurvePower", + "CurveQuadratic", "CustomReports", "CustomWorkloads", "CustomerService", @@ -679,6 +690,7 @@ Array [ "Puzzle", "QQPlot", "QrCode", + "Quantum", "QuantumComputing", "QuantumSafe", "Question", @@ -915,6 +927,7 @@ Array [ "UserExperienceDesign", "UserInsights", "UserInterface", + "UserMask", "UserProfile", "UserSearch", "Vancouver", @@ -943,6 +956,10 @@ Array [ "WashingtonDcCapitol", "WashingtonDcMonument", "WatsonLogo", + "Watsonx", + "WatsonxAi", + "WatsonxData", + "WatsonxGovernance", "Weather", "WebDeveloper", "Webcast", diff --git a/packages/icons/examples/preview/.yarn/install-state.gz b/packages/icons/examples/preview/.yarn/install-state.gz index b52a0a0149ed..7531363713d4 100644 Binary files a/packages/icons/examples/preview/.yarn/install-state.gz and b/packages/icons/examples/preview/.yarn/install-state.gz differ diff --git a/packages/icons/examples/preview/yarn.lock b/packages/icons/examples/preview/yarn.lock index 99fb9bf2b99d..8b022fd536c0 100644 --- a/packages/icons/examples/preview/yarn.lock +++ b/packages/icons/examples/preview/yarn.lock @@ -1271,13 +1271,13 @@ fsevents@~2.3.2: linkType: hard "semver@npm:^7.3.2": - version: 7.3.4 - resolution: "semver@npm:7.3.4" + version: 7.5.3 + resolution: "semver@npm:7.5.3" dependencies: lru-cache: ^6.0.0 bin: semver: bin/semver.js - checksum: 96451bfd7cba9b60ee87571959dc47e87c95b2fe58a9312a926340fee9907fc7bc062c352efdaf5bb24b2dff59c145e14faf7eb9d718a84b4751312531b39f43 + checksum: 9d58db16525e9f749ad0a696a1f27deabaa51f66e91d2fa2b0db3de3e9644e8677de3b7d7a03f4c15bc81521e0c3916d7369e0572dbde250d9bedf5194e2a8a7 languageName: node linkType: hard diff --git a/packages/pictograms/categories.yml b/packages/pictograms/categories.yml index d582989eafb0..ea5361bd7a6a 100644 --- a/packages/pictograms/categories.yml +++ b/packages/pictograms/categories.yml @@ -390,6 +390,14 @@ categories: - chart--t-SNE - circle--packing - code--syntax + - curve--cubic + - curve--exponential + - curve--inverse + - curve--linear + - curve--logarithmic + - curve--logistic + - curve--power + - curve--quadratic - dashboard - data--apis - data--set @@ -401,6 +409,7 @@ categories: - math--curve - population--diagram - q-q-plot + - quantum - rank - relationship--diagram - report @@ -456,6 +465,7 @@ categories: - name: Design and development members: - app--developer + - app--modernization - application - art--tools--01 - birthday--cake @@ -639,6 +649,8 @@ categories: - cargo--crane - cargo--ship - cheese + - construction-worker--mask + - construction-worker - farm--01 - farm--02 - farmer--01 @@ -788,6 +800,7 @@ categories: - name: People members: - advocate + - advocate--mask - design-thinking-team - expand--user - face--dissatisfied @@ -815,6 +828,7 @@ categories: - team--alignment - teammates - user + - user--mask - user--profile - user--search - name: Red Hat @@ -1019,6 +1033,10 @@ categories: - visual--insights - visual--recognition - watson--logo + - watsonx--ai + - watsonx--data + - watsonx--governance + - watsonx - name: Weather members: - cloudy diff --git a/packages/pictograms/examples/preview/.yarn/install-state.gz b/packages/pictograms/examples/preview/.yarn/install-state.gz index 24af2076a1dd..d8419a848714 100644 Binary files a/packages/pictograms/examples/preview/.yarn/install-state.gz and b/packages/pictograms/examples/preview/.yarn/install-state.gz differ diff --git a/packages/pictograms/examples/preview/yarn.lock b/packages/pictograms/examples/preview/yarn.lock index 38dcf7caadaa..413f19254d6b 100644 --- a/packages/pictograms/examples/preview/yarn.lock +++ b/packages/pictograms/examples/preview/yarn.lock @@ -1271,13 +1271,13 @@ fsevents@~2.3.2: linkType: hard "semver@npm:^7.3.2": - version: 7.3.4 - resolution: "semver@npm:7.3.4" + version: 7.5.3 + resolution: "semver@npm:7.5.3" dependencies: lru-cache: ^6.0.0 bin: semver: bin/semver.js - checksum: 96451bfd7cba9b60ee87571959dc47e87c95b2fe58a9312a926340fee9907fc7bc062c352efdaf5bb24b2dff59c145e14faf7eb9d718a84b4751312531b39f43 + checksum: 9d58db16525e9f749ad0a696a1f27deabaa51f66e91d2fa2b0db3de3e9644e8677de3b7d7a03f4c15bc81521e0c3916d7369e0572dbde250d9bedf5194e2a8a7 languageName: node linkType: hard diff --git a/packages/pictograms/pictograms.yml b/packages/pictograms/pictograms.yml index f29fb0feba1e..d8cd27201f50 100644 --- a/packages/pictograms/pictograms.yml +++ b/packages/pictograms/pictograms.yml @@ -61,6 +61,9 @@ - heart - human - person +- name: advocate--mask + friendly_name: advocate--mask + aliases: [] - name: agility friendly_name: Agility aliases: @@ -1515,6 +1518,12 @@ aliases: - construct - cloud +- name: construction-worker + friendly_name: construction-worker + aliases: [] +- name: construction-worker--mask + friendly_name: construction-worker--mask + aliases: [] - name: consumer--engagement--food--journey friendly_name: Consumer engagement food journey aliases: @@ -1643,6 +1652,30 @@ - cupcake - cake - creative +- name: curve--cubic + friendly_name: curve--cubic + aliases: [] +- name: curve--exponential + friendly_name: curve--exponential + aliases: [] +- name: curve--inverse + friendly_name: curve--inverse + aliases: [] +- name: curve--linear + friendly_name: curve--linear + aliases: [] +- name: curve--logarithmic + friendly_name: curve--logarithmic + aliases: [] +- name: curve--logistic + friendly_name: curve--logistic + aliases: [] +- name: curve--power + friendly_name: curve--power + aliases: [] +- name: curve--quadratic + friendly_name: curve--quadratic + aliases: [] - name: custom--workloads friendly_name: Custom workloads aliases: @@ -2863,7 +2896,7 @@ aliases: - handicap active - people - - disabled user + - disabled user - wheelchair - name: hard--drive friendly_name: Hard disk drive @@ -4602,6 +4635,9 @@ - qr code - code - ID +- name: quantum + friendly_name: quantum + aliases: [] - name: quantum--safe friendly_name: Quantum safe aliases: @@ -6218,6 +6254,9 @@ - interface - UX - design and development +- name: user--mask + friendly_name: user--mask + aliases: [] - name: user--profile friendly_name: User profile aliases: @@ -6400,6 +6439,18 @@ - watson - ibm watson - avatar +- name: watsonx + friendly_name: watsonx + aliases: [] +- name: watsonx--ai + friendly_name: watsonx--ai + aliases: [] +- name: watsonx--data + friendly_name: watsonx--data + aliases: [] +- name: watsonx--governance + friendly_name: watsonx--governance + aliases: [] - name: weather friendly_name: Weather aliases: diff --git a/packages/pictograms/src/svg/advocate--mask.svg b/packages/pictograms/src/svg/advocate--mask.svg new file mode 100644 index 000000000000..566198463d55 --- /dev/null +++ b/packages/pictograms/src/svg/advocate--mask.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/packages/pictograms/src/svg/construction-worker--mask.svg b/packages/pictograms/src/svg/construction-worker--mask.svg new file mode 100644 index 000000000000..ac5aa00b766d --- /dev/null +++ b/packages/pictograms/src/svg/construction-worker--mask.svg @@ -0,0 +1,19 @@ + + + + + + diff --git a/packages/pictograms/src/svg/construction-worker.svg b/packages/pictograms/src/svg/construction-worker.svg new file mode 100644 index 000000000000..710cea883ee8 --- /dev/null +++ b/packages/pictograms/src/svg/construction-worker.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/packages/pictograms/src/svg/curve--cubic.svg b/packages/pictograms/src/svg/curve--cubic.svg new file mode 100644 index 000000000000..7115f642c893 --- /dev/null +++ b/packages/pictograms/src/svg/curve--cubic.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/packages/pictograms/src/svg/curve--exponential.svg b/packages/pictograms/src/svg/curve--exponential.svg new file mode 100644 index 000000000000..6c59fd454fba --- /dev/null +++ b/packages/pictograms/src/svg/curve--exponential.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/packages/pictograms/src/svg/curve--inverse.svg b/packages/pictograms/src/svg/curve--inverse.svg new file mode 100644 index 000000000000..0c20c76b744a --- /dev/null +++ b/packages/pictograms/src/svg/curve--inverse.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/packages/pictograms/src/svg/curve--linear.svg b/packages/pictograms/src/svg/curve--linear.svg new file mode 100644 index 000000000000..8e3562e222fb --- /dev/null +++ b/packages/pictograms/src/svg/curve--linear.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/packages/pictograms/src/svg/curve--logarithmic.svg b/packages/pictograms/src/svg/curve--logarithmic.svg new file mode 100644 index 000000000000..b60b4f23281e --- /dev/null +++ b/packages/pictograms/src/svg/curve--logarithmic.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/packages/pictograms/src/svg/curve--logistic.svg b/packages/pictograms/src/svg/curve--logistic.svg new file mode 100644 index 000000000000..dbc3a4087102 --- /dev/null +++ b/packages/pictograms/src/svg/curve--logistic.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/packages/pictograms/src/svg/curve--power.svg b/packages/pictograms/src/svg/curve--power.svg new file mode 100644 index 000000000000..5e7f0e553c85 --- /dev/null +++ b/packages/pictograms/src/svg/curve--power.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/packages/pictograms/src/svg/curve--quadratic.svg b/packages/pictograms/src/svg/curve--quadratic.svg new file mode 100644 index 000000000000..8ef5d8434502 --- /dev/null +++ b/packages/pictograms/src/svg/curve--quadratic.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/packages/pictograms/src/svg/quantum.svg b/packages/pictograms/src/svg/quantum.svg new file mode 100644 index 000000000000..8cfa73f667df --- /dev/null +++ b/packages/pictograms/src/svg/quantum.svg @@ -0,0 +1,22 @@ + + + + + + diff --git a/packages/pictograms/src/svg/user--mask.svg b/packages/pictograms/src/svg/user--mask.svg new file mode 100644 index 000000000000..aa221918a794 --- /dev/null +++ b/packages/pictograms/src/svg/user--mask.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/packages/pictograms/src/svg/watsonx--ai.svg b/packages/pictograms/src/svg/watsonx--ai.svg new file mode 100644 index 000000000000..aa08be3ba04b --- /dev/null +++ b/packages/pictograms/src/svg/watsonx--ai.svg @@ -0,0 +1,32 @@ + + + + + + diff --git a/packages/pictograms/src/svg/watsonx--data.svg b/packages/pictograms/src/svg/watsonx--data.svg new file mode 100644 index 000000000000..12ecfeae0e30 --- /dev/null +++ b/packages/pictograms/src/svg/watsonx--data.svg @@ -0,0 +1,47 @@ + + + + + + diff --git a/packages/pictograms/src/svg/watsonx--governance.svg b/packages/pictograms/src/svg/watsonx--governance.svg new file mode 100644 index 000000000000..558166dc89d7 --- /dev/null +++ b/packages/pictograms/src/svg/watsonx--governance.svg @@ -0,0 +1,35 @@ + + + + + + diff --git a/packages/pictograms/src/svg/watsonx.svg b/packages/pictograms/src/svg/watsonx.svg new file mode 100644 index 000000000000..d9e66ac61145 --- /dev/null +++ b/packages/pictograms/src/svg/watsonx.svg @@ -0,0 +1,38 @@ + + + + + + diff --git a/packages/themes/examples/preview-v10/.yarn/install-state.gz b/packages/themes/examples/preview-v10/.yarn/install-state.gz index 7286c7ef35ec..2e5ad9dfd20a 100644 Binary files a/packages/themes/examples/preview-v10/.yarn/install-state.gz and b/packages/themes/examples/preview-v10/.yarn/install-state.gz differ diff --git a/packages/themes/examples/preview-v10/yarn.lock b/packages/themes/examples/preview-v10/yarn.lock index 69a64c7827ed..0eb0f768bab7 100644 --- a/packages/themes/examples/preview-v10/yarn.lock +++ b/packages/themes/examples/preview-v10/yarn.lock @@ -1273,13 +1273,13 @@ __metadata: linkType: hard "semver@npm:^7.3.5": - version: 7.3.8 - resolution: "semver@npm:7.3.8" + version: 7.5.3 + resolution: "semver@npm:7.5.3" dependencies: lru-cache: ^6.0.0 bin: semver: bin/semver.js - checksum: ba9c7cbbf2b7884696523450a61fee1a09930d888b7a8d7579025ad93d459b2d1949ee5bbfeb188b2be5f4ac163544c5e98491ad6152df34154feebc2cc337c1 + checksum: 9d58db16525e9f749ad0a696a1f27deabaa51f66e91d2fa2b0db3de3e9644e8677de3b7d7a03f4c15bc81521e0c3916d7369e0572dbde250d9bedf5194e2a8a7 languageName: node linkType: hard diff --git a/playwright.config.js b/playwright.config.js index 0a1992ec72d9..947cfaede49d 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -22,7 +22,7 @@ const config = { ], // https://playwright.dev/docs/api/class-testconfig#test-config-test-match - testMatch: /.*-test.e2e\.m?js$/, + testMatch: /.*-test(.avt|.vrt)?.e2e\.m?js$/, // https://playwright.dev/docs/api/class-testconfig#test-config-timeout timeout: 1000 * 30,