diff --git a/.github/workflows/deploy-canary.yml b/.github/workflows/deploy-canary.yml index 6c8e75a85a1..f23edf140e8 100644 --- a/.github/workflows/deploy-canary.yml +++ b/.github/workflows/deploy-canary.yml @@ -82,7 +82,7 @@ jobs: - name: Install dependencies run: yarn install --immutable --immutable-cache - name: Build project - run: yarn lerna run --ignore build + run: yarn lerna run build - name: Set env vars uses: ./.github/actions/set-dotenv @@ -197,7 +197,7 @@ jobs: - name: Install dependencies run: yarn install --immutable --immutable-cache - name: Build project - run: yarn lerna run --ignore --ignore @carbon/ibmdotcom-web-components --ignore @carbon/web-components build + run: yarn lerna run --ignore @carbon/ibmdotcom-web-components --ignore @carbon/web-components build - name: Set env vars uses: ./.github/actions/set-dotenv with: diff --git a/.github/workflows/e2e-tests-parallel.yml b/.github/workflows/e2e-tests-parallel.yml index 6c010e041a6..577473628a6 100644 --- a/.github/workflows/e2e-tests-parallel.yml +++ b/.github/workflows/e2e-tests-parallel.yml @@ -26,7 +26,7 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'yarn' - - uses: actions/cache@v3 + - uses: actions/cache@v4 name: Download any existing cache id: yarn-cache with: @@ -95,7 +95,7 @@ jobs: name: storybook-build path: packages/web-components/storybook-static - - uses: actions/cache@v3 + - uses: actions/cache@v4 name: Retrieve yarn cache id: yarn-cache with: diff --git a/.yarn/cache/@carbon-icons-react-npm-10.49.2-5ba53838d4-9b591d2f5c.zip b/.yarn/cache/@carbon-icons-npm-11.31.0-3bec00ed0e-da2ae3f51a.zip similarity index 60% rename from .yarn/cache/@carbon-icons-react-npm-10.49.2-5ba53838d4-9b591d2f5c.zip rename to .yarn/cache/@carbon-icons-npm-11.31.0-3bec00ed0e-da2ae3f51a.zip index 9099c6ce083..db445971452 100644 Binary files a/.yarn/cache/@carbon-icons-react-npm-10.49.2-5ba53838d4-9b591d2f5c.zip and b/.yarn/cache/@carbon-icons-npm-11.31.0-3bec00ed0e-da2ae3f51a.zip differ diff --git a/.yarn/cache/@carbon-icons-react-npm-11.32.0-57e6e5849d-538f83c10f.zip b/.yarn/cache/@carbon-icons-react-npm-11.32.0-57e6e5849d-538f83c10f.zip deleted file mode 100644 index 46f40671b61..00000000000 Binary files a/.yarn/cache/@carbon-icons-react-npm-11.32.0-57e6e5849d-538f83c10f.zip and /dev/null differ diff --git a/.yarn/cache/@carbon-react-npm-1.46.0-5b5d8e05f5-7a7805f58a.zip b/.yarn/cache/@carbon-react-npm-1.47.0-6e2714c8c3-01dfec292c.zip similarity index 81% rename from .yarn/cache/@carbon-react-npm-1.46.0-5b5d8e05f5-7a7805f58a.zip rename to .yarn/cache/@carbon-react-npm-1.47.0-6e2714c8c3-01dfec292c.zip index d4c10fec593..6ca83a059c3 100644 Binary files a/.yarn/cache/@carbon-react-npm-1.46.0-5b5d8e05f5-7a7805f58a.zip and b/.yarn/cache/@carbon-react-npm-1.47.0-6e2714c8c3-01dfec292c.zip differ diff --git a/.yarn/cache/@carbon-styles-npm-1.45.0-67fc1de473-8372874f57.zip b/.yarn/cache/@carbon-styles-npm-1.45.0-67fc1de473-8372874f57.zip deleted file mode 100644 index a949195bb70..00000000000 Binary files a/.yarn/cache/@carbon-styles-npm-1.45.0-67fc1de473-8372874f57.zip and /dev/null differ diff --git a/.yarn/cache/@carbon-styles-npm-1.46.0-69d4aec9e6-e403d3890d.zip b/.yarn/cache/@carbon-styles-npm-1.47.0-0d50a041b3-a320dd704f.zip similarity index 62% rename from .yarn/cache/@carbon-styles-npm-1.46.0-69d4aec9e6-e403d3890d.zip rename to .yarn/cache/@carbon-styles-npm-1.47.0-0d50a041b3-a320dd704f.zip index 889be097ad4..4c26ead554c 100644 Binary files a/.yarn/cache/@carbon-styles-npm-1.46.0-69d4aec9e6-e403d3890d.zip and b/.yarn/cache/@carbon-styles-npm-1.47.0-0d50a041b3-a320dd704f.zip differ diff --git a/.yarn/cache/@carbon-web-components-npm-2.0.2-rc.1-9586370cb1-3875b649a4.zip b/.yarn/cache/@carbon-web-components-npm-2.0.2-rc.1-9586370cb1-3875b649a4.zip deleted file mode 100644 index b8c894970f0..00000000000 Binary files a/.yarn/cache/@carbon-web-components-npm-2.0.2-rc.1-9586370cb1-3875b649a4.zip and /dev/null differ diff --git a/.yarn/cache/@ibm-telemetry-js-npm-1.1.0-b3b4946df0-4a7b5fcf56.zip b/.yarn/cache/@ibm-telemetry-js-npm-1.1.0-b3b4946df0-4a7b5fcf56.zip new file mode 100644 index 00000000000..9a94b9ece19 Binary files /dev/null and b/.yarn/cache/@ibm-telemetry-js-npm-1.1.0-b3b4946df0-4a7b5fcf56.zip differ diff --git a/.yarn/cache/carbon-components-npm-10.58.3-57a9dc3544-6b3a2f8b18.zip b/.yarn/cache/carbon-components-npm-10.58.3-57a9dc3544-6b3a2f8b18.zip deleted file mode 100644 index e55da07ab60..00000000000 Binary files a/.yarn/cache/carbon-components-npm-10.58.3-57a9dc3544-6b3a2f8b18.zip and /dev/null differ diff --git a/.yarn/cache/classnames-npm-2.3.2-d2fdae468d-ba3151c12e.zip b/.yarn/cache/classnames-npm-2.3.2-d2fdae468d-ba3151c12e.zip deleted file mode 100644 index cbb980c4d64..00000000000 Binary files a/.yarn/cache/classnames-npm-2.3.2-d2fdae468d-ba3151c12e.zip and /dev/null differ diff --git a/.yarn/cache/classnames-npm-2.5.0-52351935b9-729436ac76.zip b/.yarn/cache/classnames-npm-2.5.0-52351935b9-729436ac76.zip new file mode 100644 index 00000000000..063d74bba7b Binary files /dev/null and b/.yarn/cache/classnames-npm-2.5.0-52351935b9-729436ac76.zip differ diff --git a/.yarn/cache/downshift-npm-8.2.3-8c74cc268e-08c15b9e88.zip b/.yarn/cache/downshift-npm-8.2.3-8c74cc268e-08c15b9e88.zip deleted file mode 100644 index b92c91fcaaf..00000000000 Binary files a/.yarn/cache/downshift-npm-8.2.3-8c74cc268e-08c15b9e88.zip and /dev/null differ diff --git a/.yarn/cache/downshift-npm-8.2.4-b8528cd8ba-c6ce78312b.zip b/.yarn/cache/downshift-npm-8.2.4-b8528cd8ba-c6ce78312b.zip new file mode 100644 index 00000000000..773d91b8a67 Binary files /dev/null and b/.yarn/cache/downshift-npm-8.2.4-b8528cd8ba-c6ce78312b.zip differ diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json index 1a7c114e78d..0da554da00e 100644 --- a/packages/carbon-web-components/package.json +++ b/packages/carbon-web-components/package.json @@ -1,7 +1,6 @@ { "name": "@carbon/web-components", - "private": true, - "version": "2.1.1", + "version": "2.1.2", "publishConfig": { "access": "public" }, @@ -69,7 +68,7 @@ ], "dependencies": { "@babel/runtime": "^7.16.3", - "@carbon/styles": "^1.46.0", + "@carbon/styles": "1.47.0", "flatpickr": "4.6.1", "lit": "^2.7.6", "lodash-es": "^4.17.21" @@ -89,8 +88,8 @@ "@babel/preset-modules": "^0.1.5", "@babel/template": "~7.12.0", "@babel/traverse": "~7.23.0", - "@carbon/icon-helpers": "^10.45.1", - "@carbon/icons": "^11.31.0", + "@carbon/icon-helpers": "10.45.1", + "@carbon/icons": "11.31.0", "@open-wc/semantic-dom-diff": "~0.18.0", "@percy-io/in-percy": "^0.1.11", "@percy/cli": "^1.27.4", diff --git a/packages/carbon-web-components/src/components/data-table/_table-core.scss b/packages/carbon-web-components/src/components/data-table/_table-core.scss index 9484b5538c0..8b13441116c 100644 --- a/packages/carbon-web-components/src/components/data-table/_table-core.scss +++ b/packages/carbon-web-components/src/components/data-table/_table-core.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2023 +// Copyright IBM Corp. 2019, 2024 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. diff --git a/packages/carbon-web-components/src/components/data-table/_table-selection.scss b/packages/carbon-web-components/src/components/data-table/_table-selection.scss index 2dcc4e4e921..c7a66c067e8 100644 --- a/packages/carbon-web-components/src/components/data-table/_table-selection.scss +++ b/packages/carbon-web-components/src/components/data-table/_table-selection.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2023 +// Copyright IBM Corp. 2019, 2024 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. @@ -73,9 +73,9 @@ } :host(#{$prefix}-table-row[selected][slug]) { - .#{$prefix}--table-column-checkbox, ::slotted(#{$prefix}-table-cell), - .#{$prefix}--table-expand { + .#{$prefix}--table-expand, + .#{$prefix}--table-column-checkbox { background-color: transparent; } } diff --git a/packages/carbon-web-components/src/components/date-picker/range-plugin.ts b/packages/carbon-web-components/src/components/date-picker/range-plugin.ts index ca7e01657d0..5d2f5e81e6f 100644 --- a/packages/carbon-web-components/src/components/date-picker/range-plugin.ts +++ b/packages/carbon-web-components/src/components/date-picker/range-plugin.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -11,7 +11,7 @@ import rangePlugin, { Config } from 'flatpickr/dist/plugins/rangePlugin'; import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance'; import { Plugin } from 'flatpickr/dist/types/options'; -import on from 'carbon-components/es/globals/js/misc/on'; +import on from '../../globals/mixins/on'; import Handle from '../../globals/internal/handle'; /** diff --git a/packages/carbon-web-components/src/components/number-input/number-input.scss b/packages/carbon-web-components/src/components/number-input/number-input.scss index f4d2a6b407a..33560cb23bf 100644 --- a/packages/carbon-web-components/src/components/number-input/number-input.scss +++ b/packages/carbon-web-components/src/components/number-input/number-input.scss @@ -36,6 +36,14 @@ $css--plex: true !default; background-color: $border-subtle; } +.#{$prefix}--number--readonly { + .#{$prefix}--number__controls { + .#{$prefix}--number__control-btn { + border-block-end: 0; + } + } +} + :host(#{$prefix}-number-input) { ::slotted(#{$prefix}-slug) { position: absolute; diff --git a/packages/carbon-web-components/src/components/slider/slider.scss b/packages/carbon-web-components/src/components/slider/slider.scss index e0ae19bab5f..f4ef412b652 100644 --- a/packages/carbon-web-components/src/components/slider/slider.scss +++ b/packages/carbon-web-components/src/components/slider/slider.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2023 +// Copyright IBM Corp. 2019, 2024 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. diff --git a/packages/carbon-web-components/src/components/slug/slug-story.scss b/packages/carbon-web-components/src/components/slug/slug-story.scss index 4021f4020fd..fa46768161f 100644 --- a/packages/carbon-web-components/src/components/slug/slug-story.scss +++ b/packages/carbon-web-components/src/components/slug/slug-story.scss @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2023 + * Copyright IBM Corp. 2019, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip.ts b/packages/carbon-web-components/src/components/tooltip/tooltip.ts index 209aed62203..0f5e0e14096 100644 --- a/packages/carbon-web-components/src/components/tooltip/tooltip.ts +++ b/packages/carbon-web-components/src/components/tooltip/tooltip.ts @@ -67,6 +67,12 @@ class CDSTooltip extends HostListenerMixin(CDSPopover) { @property({ reflect: true }) size = false; + /** + * Specify the timeout reference for the tooltip + */ + @property({ reflect: true }) + timeoutId = 0; + /** * Specify whether the tooltip should be open when it first renders */ @@ -77,7 +83,8 @@ class CDSTooltip extends HostListenerMixin(CDSPopover) { * Handles `mouseover` event on this element. */ private _handleHover = async () => { - setTimeout(async () => { + window.clearTimeout(this.timeoutId); + this.timeoutId = window.setTimeout(async () => { this.open = true; const { open, updateComplete } = this; if (open) { @@ -93,7 +100,8 @@ class CDSTooltip extends HostListenerMixin(CDSPopover) { * Handles `mouseleave` event on this element. */ private _handleHoverOut = async () => { - setTimeout(async () => { + window.clearTimeout(this.timeoutId); + this.timeoutId = window.setTimeout(async () => { const { open } = this; if (open) { this.open = false; diff --git a/packages/carbon-web-components/tests/snapshots/cds-checkbox.md b/packages/carbon-web-components/tests/snapshots/cds-checkbox.md index 69aca633101..a0d0ae7de41 100644 --- a/packages/carbon-web-components/tests/snapshots/cds-checkbox.md +++ b/packages/carbon-web-components/tests/snapshots/cds-checkbox.md @@ -61,4 +61,3 @@ ``` - diff --git a/packages/services-store/package.json b/packages/services-store/package.json index d3390cea757..ffc5e0c29f6 100644 --- a/packages/services-store/package.json +++ b/packages/services-store/package.json @@ -32,7 +32,6 @@ "dependencies": { "@carbon/ibmdotcom-services": "1.53.0", "@carbon/ibmdotcom-utilities": "1.53.0", - "carbon-components": "10.58.3", "redux": "^4.0.0", "redux-logger": "^3.0.0", "redux-thunk": "^2.3.0", diff --git a/packages/services-store/src/actions/__tests__/translateAPI.test.ts b/packages/services-store/src/actions/__tests__/translateAPI.test.ts index bd875da1eff..1cf6c65188e 100644 --- a/packages/services-store/src/actions/__tests__/translateAPI.test.ts +++ b/packages/services-store/src/actions/__tests__/translateAPI.test.ts @@ -38,14 +38,10 @@ const mockTranslation: Partial = { }, { title: 'menu-title-foo', - menuSections: [ + submenu: [ { - menuItems: [ - { - title: 'menu-item-title-bar', - url: 'https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/bar', - }, - ], + title: 'menu-item-title-bar', + url: 'https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/bar', }, ], }, @@ -54,7 +50,7 @@ const mockTranslation: Partial = { }; const endpoint = - '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2'; + '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2.1'; describe('Redux actions for `TranslateAPI`', () => { it('dispatches the action to set translation data', () => { diff --git a/packages/services-store/src/reducers/__tests__/translateAPI.test.ts b/packages/services-store/src/reducers/__tests__/translateAPI.test.ts index af002cd8dad..2ed09bd7758 100644 --- a/packages/services-store/src/reducers/__tests__/translateAPI.test.ts +++ b/packages/services-store/src/reducers/__tests__/translateAPI.test.ts @@ -25,14 +25,10 @@ const mockTranslation: Partial = { }, { title: 'menu-title-foo', - menuSections: [ + submenu: [ { - menuItems: [ - { - title: 'menu-item-title-bar', - url: 'https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/bar', - }, - ], + title: 'menu-item-title-bar', + url: 'https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/bar', }, ], }, diff --git a/packages/services-store/src/types/translateAPI.ts b/packages/services-store/src/types/translateAPI.ts index b9884009b36..aa2d31d9b5f 100644 --- a/packages/services-store/src/types/translateAPI.ts +++ b/packages/services-store/src/types/translateAPI.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -29,69 +29,29 @@ export interface BasicLinkSet { links: BasicLink[]; } -/** - * A feature in mega panel. - */ -export interface MegapanelFeature { - heading?: string; - imageUrl?: string; - linkTitle?: string; - linkUrl?: string; -} - -/** - * A content in mega panel. - */ -export interface MegapanelContent { - headingTitle?: string; - headingUrl?: string; - description?: string; - quickLinks: BasicLinkSet; - feature: MegapanelFeature; +export interface L0Menu { + items: L0MenuItem[]; } -/** - * A menu item in masthead. - */ -export interface MastheadMenuItem { - title: string; - titleEnglish?: string; - url?: string; - highlighted?: boolean; - megaPanelViewAll?: boolean; - megapanelContent?: MegapanelContent; +export interface L0MenuItem extends BasicLink { + submenu?: L0Megamenu | BasicLink[]; } -/** - * A menu section in masthead. - */ -export interface MastheadMenuSection { - heading?: string; - menuItems: MastheadMenuItem[]; +export interface L0Megamenu { + sections: Megapanel[]; + highlights?: MegapanelLinkGroup[]; + viewAll?: BasicLink; } -/** - * An item in masthead. - */ -export interface MastheadLink { - title: string; - titleEnglish?: string; - url?: string; - hasMenu?: boolean; - hasMegapanel?: boolean; - megamenuLayout?: 'tab' | 'list'; - menuSections?: MastheadMenuSection[]; +export interface Megapanel { + heading?: BasicLink; + groups: MegapanelLinkGroup[]; + viewAll?: BasicLink; } -/** - * A menu section for masthead - * - * @deprecated - */ -export interface LegacyMastheadL1 { - title: string; - url?: string; - menuItems?: MastheadLink[]; +export interface MegapanelLinkGroup { + heading?: BasicLink; + links?: BasicLink[]; } /** @@ -176,12 +136,13 @@ export interface MastheadLogoData { /** * Cloud Masthead Profile content + * + * @deprecated */ export interface MastheadProfileContent { iconLabel: string; links: MastheadProfileItem[]; ctaButtons: MastheadProfileItem[]; - contactUsButton: string; } /** @@ -194,11 +155,16 @@ export interface MiscLabels { * The translation data for ibm.com sites */ export interface Translation { + /** + * Main masthead navigation data. + * + * @deprecated Use masthead.nav instead. + */ mastheadNav: { /** * The nav links. */ - links: MastheadLink[]; + links: L0MenuItem[]; }; /** @@ -211,8 +177,25 @@ export interface Translation { */ footerThin: BasicLink[]; + /** + * Masthead items other than main navigation + */ + masthead: { + logo: MastheadLogoData; + nav: L0MenuItem[]; + contact: MastheadProfileItem; + profileMenu: { + unauthenticated: MastheadProfileItem[]; + authenticated: MastheadProfileItem[]; + signedin: MastheadProfileContent; + signedout: MastheadProfileContent; + }; + }; + /** * The profile menus. + * + * @deprecated Use masthead.profileMenu instead. */ profileMenu: { /** @@ -226,18 +209,6 @@ export interface Translation { signedout: MastheadProfileItem[]; }; - /** - * Cloud masthead items - */ - masthead: { - logo: MastheadLogoData; - contact: MastheadProfileContent; - profileMenu: { - signedout: MastheadProfileContent; - signedin: MastheadProfileContent; - }; - }; - /** * Miscellaneous translations */ @@ -296,29 +267,3 @@ export interface TranslateAPIState { */ errorsRequestTranslation?: { [language: string]: Error }; } - -// New for v2.1.0 -export interface L0Menu { - items: L0MenuItem[]; -} - -export interface L0MenuItem extends BasicLink { - submenu?: L0Megamenu | BasicLink[]; -} - -export interface L0Megamenu { - sections: Megapanel[]; - highlights?: MegapanelLinkGroup[]; - viewAll?: BasicLink; -} - -export interface Megapanel { - heading?: BasicLink; - groups: MegapanelLinkGroup[]; - viewAll?: BasicLink; -} - -export interface MegapanelLinkGroup { - heading?: BasicLink; - links?: BasicLink[]; -} diff --git a/packages/services/CHANGELOG.md b/packages/services/CHANGELOG.md index 8529f030865..bf02d132c43 100644 --- a/packages/services/CHANGELOG.md +++ b/packages/services/CHANGELOG.md @@ -3,6 +3,45 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.1.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.1.0-rc.0...@carbon/ibmdotcom-services@2.1.0) (2024-01-17) + +**Note:** Version bump only for package @carbon/ibmdotcom-services + + + + + +# [2.1.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.0.0...@carbon/ibmdotcom-services@2.1.0-rc.0) (2024-01-09) + + +### Bug Fixes + +* **tests:** fix unit test snapshots and misc fixes ([#11203](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11203)) ([766682c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/766682cb732c86950f2a345bdbd5ad871dd5d9c5)) + + + +# 1.53.0 (2023-11-15) + + + +# 1.53.0-rc.2 (2023-11-06) + + + +# 1.53.0-rc.1 (2023-11-02) + + + +# 1.52.0-rc.0 (2023-10-03) + + + +# 1.51.0 (2023-09-19) + + + + + # [2.0.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.0.0-rc.3...@carbon/ibmdotcom-services@2.0.0) (2023-12-11) **Note:** Version bump only for package @carbon/ibmdotcom-services diff --git a/packages/services/package.json b/packages/services/package.json index d19b9da9123..bd15a9f6918 100644 --- a/packages/services/package.json +++ b/packages/services/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibmdotcom-services", "description": "Carbon for IBM.com Services", - "version": "2.0.0", + "version": "2.1.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -46,7 +46,7 @@ }, "dependencies": { "@babel/runtime": "^7.16.3", - "@carbon/ibmdotcom-utilities": "2.0.0", + "@carbon/ibmdotcom-utilities": "2.1.0", "@carbon/telemetry": "0.1.0", "axios": "^1.6.0", "marked": "^4.0.10", diff --git a/packages/services/src/services/Locale/Locale.js b/packages/services/src/services/Locale/Locale.js index 094205c99ff..ed02ccadc53 100644 --- a/packages/services/src/services/Locale/Locale.js +++ b/packages/services/src/services/Locale/Locale.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -11,7 +11,13 @@ import ipcinfoCookie from '../../internal/vendor/@carbon/ibmdotcom-utilities/uti import root from 'window-or-global'; /** - * @constant {string | string} Host for the Locale API call + * @typedef {object} Locale + * @property {string} cc The country code. + * @property {string} lc The language code. + */ + +/** + * @constant {string | string} Host for the Locale API call. * @private */ const _host = @@ -20,9 +26,9 @@ const _host = 'https://1.www.s81c.com'; /** - * Sets the default location if nothing is returned + * Sets the default location if nothing is returned. * - * @type {object} + * @type {Locale} * @private */ const _localeDefault = { @@ -31,7 +37,7 @@ const _localeDefault = { }; /** - * Default display name for lang combination + * Default display name for lang combination. * * @type {string} * @private @@ -39,7 +45,7 @@ const _localeDefault = { const _localeNameDefault = 'United States — English'; /** - * Locale API endpoint + * Locale API endpoint. * * @type {string} * @private @@ -47,7 +53,7 @@ const _localeNameDefault = 'United States — English'; const _endpoint = `${_host}/common/js/dynamicnav/www/countrylist/jsononly`; /** - * Configuration for axios + * Configuration for axios. * * @type {{headers: {'Content-Type': string}}} * @private @@ -59,7 +65,7 @@ const _axiosConfig = { }; /** - * Session Storage key for country list + * Session Storage key for country list. * * @type {string} * @private @@ -75,38 +81,95 @@ const _sessionListKey = 'cds-countrylist'; const _twoHours = 60 * 60 * 2000; /** - * Use the lang attr to determine a return locale object + * The cache for in-flight or resolved requests for the country list, keyed by + * the initiating locale. * * @type {object} * @private */ -const _getLocaleByLangAttr = () => { +const _requestsList = {}; + +/** + * Retrieves the default locale. + * + * @returns {Locale} The default locale. + */ +const _getLocaleDefault = () => _localeDefault; + +/** + * Use the lang attr to determine a return locale object, or "false" + * when it's not available so the consumer can decide what to do next. + * + * @type {(Locale | boolean)} + * @private + */ +function _getLocaleFromLangAttr() { if (root.document?.documentElement?.lang) { const lang = root.document.documentElement.lang.toLowerCase(); + const locale = {}; if (lang.indexOf('-') === -1) { - return { lc: lang }; + locale.lc = lang; } else { const codes = lang.split('-'); - return { cc: codes[1], lc: codes[0] }; + locale.cc = codes[1]; + locale.lc = codes[0]; } - } else { - return _localeDefault; + return locale; + } + return false; +} + +/** + * Gets the locale from the cookie and returns it if both 'cc' and 'lc' values + * are present. + * + * @async + * @returns {Promise} The cookie object if 'cc' and 'lc' values are present, otherwise false. + */ +const _getLocaleFromCookie = async () => { + const cookie = ipcinfoCookie.get(); + if (cookie && cookie.cc && cookie.lc) { + await LocaleAPI.getList(cookie); + return cookie; } + return false; }; /** - * The cache for in-flight or resolved requests for the country list, keyed by the initiating locale. + * Get the locale from the user's browser. * - * @type {object} - * @private + * @async + * @returns {Promise} The verified locale or false if not found. */ -const _requestsList = {}; +const _getLocaleFromBrowser = async () => { + try { + const cc = await DDOAPI.getLocation(); + + // Language preference from browser can return in either 'en-US' format or + // 'en' so will need to extract language only. + const lang = root.navigator.language; + const lc = lang.split('-')[0]; + + if (cc && lc) { + const list = await LocaleAPI.getList({ cc, lc }); + const verifiedCodes = LocaleAPI.verifyLocale(cc, lc, list); + + // Set the ipcInfo cookie. + ipcinfoCookie.set(verifiedCodes); + + return verifiedCodes; + } + } catch (e) { + // Intentionally throw away the exception in favor of returning false. + } + return false; +}; /** - * Return a locale object based on the DDO API, or "false" - * so the consumer can decide what to do next + * Return a locale object based on the DDO API, or "false" so the consumer can + * decide what to do next. * - * @type {(object | boolean)} + * @returns {(Locale | boolean)} Locale from the DDO, or "false" if not present. * @private */ function _getLocaleFromDDO() { @@ -150,8 +213,7 @@ function _getLocaleFromDDO() { } /** - * Locale API class with method of fetching user's locale for - * ibm.com + * Locale API class with method of fetching user's locale for ibm.com. */ class LocaleAPI { /** @@ -170,14 +232,18 @@ class LocaleAPI { } /** - * Gets the user's locale + * Gets the user's locale. + * + * Grab the locale from the available information on the page in the following + * order: * - * Grab the locale from the `lang` attribute from html, else - * check if ipcinfo cookie exists (ipcinfoCookie util) - * if not, retrieve the user's locale through DDO service + gets user's - * browser language preference then set the cookie + * 1. DDO + * 2. HTML lang attribute + * 3. ipcInfo cookie + * 4. Browser (navigator.language) + * 5. Default (us-EN) * - * @returns {object} object with lc and cc + * @returns {Promise} Locale object. * @example * import { LocaleAPI } from '@carbon/ibmdotcom-services'; * @@ -187,69 +253,46 @@ class LocaleAPI { * } */ static async getLocale() { - const cookie = ipcinfoCookie.get(); - const lang = await this.getLang(); - - if (lang) { - return lang; - } - // grab the locale from the cookie - else if (cookie && cookie.cc && cookie.lc) { - await this.getList(cookie); - return cookie; - } else { - const cc = await DDOAPI.getLocation(); - /** - * get language preference from browser - * can return in either 'en-US' format or 'en' so will need to extract language only - */ - const lang = root.navigator.language; - const lc = lang.split('-')[0]; - - if (cc && lc) { - const list = await this.getList({ cc, lc }); - const verifiedCodes = this.verifyLocale(cc, lc, list); - - // set the ipcInfo cookie - ipcinfoCookie.set(verifiedCodes); - - return verifiedCodes; + const localeGetters = [ + _getLocaleFromDDO, + _getLocaleFromLangAttr, + _getLocaleFromCookie, + _getLocaleFromBrowser, + ]; + for (const getter of localeGetters) { + const locale = await getter(); + if (locale) { + return locale; } } + return _getLocaleDefault(); } /** - * Checks for DDO object to return the correct cc and lc - * Otherwise gets those values from the lang attribute + * Gets the user's locale. * - * @returns {object} locale object + * @returns {Promise} Locale object. * @example * import { LocaleAPI } from '@carbon/ibmdotcom-services'; * * function async getLocale() { * const locale = await LocaleAPI.getLang(); * } + * + * @deprecated in favor of LocalAPI.getLocale. */ - static getLang() { - return new Promise((resolve) => { - const getLocaleFromDDO = _getLocaleFromDDO(); - - if (getLocaleFromDDO) { - resolve(getLocaleFromDDO); - } else { - resolve(_getLocaleByLangAttr()); - } - }); + static async getLang() { + return this.getLocale(); } /** - * This fetches the language display name based on language/locale combo + * This fetches the language display name based on locale. * - * @param {object} langCode lang code with cc and lc - * @returns {Promise} Display name of locale/language + * @param {(Locale | boolean)} locale (optional) If not given, uses LocaleAPI.getLocale logic. + * @returns {Promise} Display name of locale/language. */ - static async getLangDisplay(langCode) { - const lang = langCode ? langCode : await this.getLang(); + static async getLangDisplay(locale) { + const lang = locale ? locale : await this.getLocale(); const list = await this.getList(lang); // combines the countryList arrays let countries = []; @@ -281,12 +324,12 @@ class LocaleAPI { /** * Get the country list of all supported countries and their languages - * if it is not already stored in session storage + * if it is not already stored in session storage. * - * @param {object} params params object - * @param {string} params.cc country code - * @param {string} params.lc language code - * @returns {Promise} promise object + * @param {Locale} locale Locale object. + * @param {string} locale.cc Country code. + * @param {string} locale.lc Language code. + * @returns {Promise} Promise object. * @example * import { LocaleAPI } from '@carbon/ibmdotcom-services'; * @@ -302,12 +345,12 @@ class LocaleAPI { } /** - * Fetches the list data based on cc/lc combination + * Fetches the list data based on cc/lc combination. * - * @param {string} cc country code - * @param {string} lc language code - * @param {Function} resolve resolves the Promise - * @param {Function} reject rejects the promise + * @param {string} cc Country code. + * @param {string} lc Language code. + * @param {Function} resolve Resolves the Promise. + * @param {Function} reject Rejects the promise. */ static fetchList(cc, lc, resolve, reject) { const key = cc !== 'undefined' ? `${lc}-${cc}` : `${lc}`; @@ -345,13 +388,12 @@ class LocaleAPI { } /** - * Verify that the cc and lc combo is in the list of - * supported cc-lc combos + * Verify that the cc and lc combo is in the list of supported cc-lc combos. * - * @param {string} cc country code - * @param {string} lc language code - * @param {object} list country list - * @returns {object} object with lc and cc + * @param {string} cc Country code. + * @param {string} lc Language code. + * @param {object} list Country list. + * @returns {object} Object with lc and cc. * @example * import { LocaleAPI } from '@carbon/ibmdotcom-services'; * @@ -369,8 +411,8 @@ class LocaleAPI { list.regionList.forEach((region) => region.countryList.forEach((country) => { const code = country.locale[0][0].split('-'); - const countryCode = code[1]; const languageCode = code[0]; + const countryCode = code[1]; if (countryCode === cc && languageCode === lc) { locale = { cc, lc }; } @@ -389,7 +431,7 @@ class LocaleAPI { /** * Retrieves session cache and checks if cache needs to be refreshed * - * @param {string} key session storage key + * @param {string} key Session storage key. */ static getSessionCache(key) { const session = diff --git a/packages/services/src/services/Locale/__tests__/Locale.test.js b/packages/services/src/services/Locale/__tests__/Locale.test.js index ec4feef65a1..18102d5ea12 100644 --- a/packages/services/src/services/Locale/__tests__/Locale.test.js +++ b/packages/services/src/services/Locale/__tests__/Locale.test.js @@ -1,61 +1,78 @@ /** - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ -import { ipcinfoCookie } from '../../../internal/vendor/@carbon/ibmdotcom-utilities'; -import digitalDataResponse from '../../DDO/__tests__/data/response.json'; +import ipcinfoCookie from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/ipcinfoCookie/ipcinfoCookie'; import LocaleAPI from '../Locale'; import { DDOAPI } from '../../DDO'; import mockAxios from 'axios'; -import oldSession from './data/timestamp_response.json'; -import response from './data/response.json'; import root from 'window-or-global'; +import countriesResponse from './data/countries_response.json'; +import digitalDataResponse from './data/ddo_response.json'; +import oldSession from './data/timestamp_response.json'; const mockDigitalDataResponse = digitalDataResponse; jest.mock( - '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/ipcinfoCookie/ipcinfoCookie', - () => ({ - get: jest.fn(() => ({ cc: 'us', lc: 'en' })), - set: jest.fn(() => ({})), - }) + '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/ipcinfoCookie/ipcinfoCookie' ); - -jest.mock('../../DDO', () => ({ - DDOAPI: { - getLocation: jest.fn(() => Promise.resolve('us')), - }, -})); +jest.mock('../../DDO'); describe('LocaleAPI', () => { const handles = []; beforeEach(function () { mockAxios.get.mockImplementation(async () => ({ - data: response, + data: countriesResponse, })); - root.digitalData = mockDigitalDataResponse; + // Setup all fallback levels to initially be set to Brazilian Portuguese. + // We intentionally avoid en-US to avoid matching the default fallback and + // producing false positives. - Object.defineProperty(window.document.documentElement, 'lang', { - value: '', + // Mock DDO includes: + // page.pageInfo.language === 'pt-BR' + // page.pageInfo.ibm.country === 'br' + root.digitalData = JSON.parse(JSON.stringify(mockDigitalDataResponse)); + + Object.defineProperty(root.document.documentElement, 'lang', { + value: 'pt', configurable: true, }); + ipcinfoCookie.get.mockImplementation(() => ({ cc: 'br', lc: 'pt' })); + + DDOAPI.getLocation.mockImplementation(() => Promise.resolve('br')); + + Object.defineProperty(root, 'navigator', { + value: { language: 'pt-BR' }, + writable: true, + }); + LocaleAPI.clearCache(); }); - it('should fetch the lang from the html attribute when there is no ddo defined', async () => { - root.digitalData.page = false; + afterEach(() => { + for (let handle = handles.pop(); handle; handle = handles.pop()) { + handle.release(); + } + // Restore any mocks back to a predictable state. + jest.restoreAllMocks(); + mockAxios.get.mockRestore(); + ipcinfoCookie.get.mockRestore(); + DDOAPI.getLocation.mockRestore(); + }); - Object.defineProperty(window.document.documentElement, 'lang', { - value: 'fr-ca', + it('should fallback to the locale from the html lang attribute (cc and lc) when there is no ddo defined', async () => { + root.digitalData.page = false; + Object.defineProperty(root.document.documentElement, 'lang', { + value: 'fr-CA', configurable: true, }); - const lang = await LocaleAPI.getLang(); + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ cc: 'ca', @@ -63,20 +80,21 @@ describe('LocaleAPI', () => { }); }); - it('should default to value from the html lang attribute if cc and lc are not defined', async () => { - Object.defineProperty(window.document.documentElement, 'lang', { + it('should fallback to the lang from the html lang attribute (lc only) when there is no ddo defined', async () => { + root.digitalData.page = false; + Object.defineProperty(root.document.documentElement, 'lang', { value: 'it', configurable: true, }); - const lang = await LocaleAPI.getLang(); + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ lc: 'it', }); }); - it('should return only lc when only lc is present in ddo language', async () => { + it('should fallback to only lc when only lc is present in ddo language', async () => { root.digitalData = { page: { pageInfo: { @@ -85,16 +103,57 @@ describe('LocaleAPI', () => { }, }; - const lang = await LocaleAPI.getLang(); + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ lc: 'es', }); }); - it('should default when ddo and lang are undefined', async () => { + it('should fallback to the cookie locale when ddo and lang are undefined', async () => { root.digitalData = undefined; - const lang = await LocaleAPI.getLang(); + Object.defineProperty(root.document.documentElement, 'lang', { + value: '', + configurable: true, + }); + ipcinfoCookie.get.mockImplementationOnce(() => ({ cc: 'ca', lc: 'fr' })); + + const lang = await LocaleAPI.getLocale(); + + expect(lang).toEqual({ cc: 'ca', lc: 'fr' }); + }); + + it('should fallback to browser locale when ddo, lang, and cookie are undefined', async () => { + root.digitalData = undefined; + Object.defineProperty(root.document.documentElement, 'lang', { + value: '', + configurable: true, + }); + ipcinfoCookie.get.mockImplementationOnce(() => undefined); + DDOAPI.getLocation.mockImplementation(() => Promise.resolve('fr')); + Object.defineProperty(root, 'navigator', { + value: { language: 'fr-FR' }, + writable: true, + }); + + const lang = await LocaleAPI.getLocale(); + + expect(lang).toEqual({ cc: 'fr', lc: 'fr' }); + }); + + it('should fallback to default when ddo, lang, cookie, and browser are undefined', async () => { + root.digitalData = undefined; + Object.defineProperty(root.document.documentElement, 'lang', { + value: '', + configurable: true, + }); + ipcinfoCookie.get.mockImplementationOnce(() => undefined); + Object.defineProperty(root, 'navigator', { + value: { language: '' }, + writable: true, + }); + + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ cc: 'us', @@ -102,9 +161,20 @@ describe('LocaleAPI', () => { }); }); - it('should default when no ddo.page', async () => { - root.digitalData.page = false; - const lang = await LocaleAPI.getLang(); + it('should fallback to default when ddo, lang, cookie, and browser are undefined and the DDOAPI timeouts', async () => { + root.digitalData = undefined; + Object.defineProperty(root.document.documentElement, 'lang', { + value: '', + configurable: true, + }); + ipcinfoCookie.get.mockImplementationOnce(() => undefined); + DDOAPI.getLocation.mockImplementation(() => Promise.reject(new Error())); + Object.defineProperty(root, 'navigator', { + value: { language: '' }, + writable: true, + }); + + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ cc: 'us', @@ -112,21 +182,41 @@ describe('LocaleAPI', () => { }); }); - it('should default when no ddo.page.pageInfo', async () => { + it('should fallback to the locale from the html lang attribute when no ddo.page', async () => { + root.digitalData.page = false; + Object.defineProperty(root.document.documentElement, 'lang', { + value: 'fr-CA', + configurable: true, + }); + + const lang = await LocaleAPI.getLocale(); + + expect(lang).toEqual({ + cc: 'ca', + lc: 'fr', + }); + }); + + it('should fallback to the locale from the html lang attribute when no ddo.page.pageInfo', async () => { root.digitalData = { page: { pageInfo: false, }, }; - const lang = await LocaleAPI.getLang(); + Object.defineProperty(root.document.documentElement, 'lang', { + value: 'fr-CA', + configurable: true, + }); + + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ - cc: 'us', - lc: 'en', + cc: 'ca', + lc: 'fr', }); }); - it('should default when no ddo.page.pageInfo.ibm', async () => { + it('should fallback to the locale from the html lang attribute when no ddo.page.pageInfo.ibm', async () => { root.digitalData = { page: { pageInfo: { @@ -134,15 +224,20 @@ describe('LocaleAPI', () => { }, }, }; - const lang = await LocaleAPI.getLang(); + Object.defineProperty(root.document.documentElement, 'lang', { + value: 'fr-CA', + configurable: true, + }); + + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ - cc: 'us', - lc: 'en', + cc: 'ca', + lc: 'fr', }); }); - it('should default when no ddo.page.pageInfo.ibm.country', async () => { + it('should fallback to the locale from the html lang attribute when no ddo.page.pageInfo.ibm.country', async () => { root.digitalData = { page: { pageInfo: { @@ -152,15 +247,20 @@ describe('LocaleAPI', () => { }, }, }; - const lang = await LocaleAPI.getLang(); + Object.defineProperty(root.document.documentElement, 'lang', { + value: 'fr-CA', + configurable: true, + }); + + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ - cc: 'us', - lc: 'en', + cc: 'ca', + lc: 'fr', }); }); - it('should default when no ddo.page.pageInfo.language', async () => { + it('should fallback to the locale from the html lang attribute when no ddo.page.pageInfo.language', async () => { root.digitalData = { page: { pageInfo: { @@ -171,15 +271,20 @@ describe('LocaleAPI', () => { }, }, }; - const lang = await LocaleAPI.getLang(); + Object.defineProperty(root.document.documentElement, 'lang', { + value: 'fr-CA', + configurable: true, + }); + + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ - cc: 'us', - lc: 'en', + cc: 'ca', + lc: 'fr', }); }); - it('should get from DDO', async () => { + it('should get locale from DDO', async () => { root.digitalData = { page: { pageInfo: { @@ -190,7 +295,7 @@ describe('LocaleAPI', () => { }, }, }; - const lang = await LocaleAPI.getLang(); + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ cc: 'de', @@ -209,7 +314,7 @@ describe('LocaleAPI', () => { }, }, }; - const lang = await LocaleAPI.getLang(); + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ cc: 'de', @@ -228,7 +333,7 @@ describe('LocaleAPI', () => { }, }, }; - const lang = await LocaleAPI.getLang(); + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ cc: 'uk', @@ -247,7 +352,7 @@ describe('LocaleAPI', () => { }, }, }; - const lang = await LocaleAPI.getLang(); + const lang = await LocaleAPI.getLocale(); expect(lang).toEqual({ cc: 'us', @@ -267,11 +372,10 @@ describe('LocaleAPI', () => { { headers: { 'Content-Type': 'application/json; charset=utf-8' } } ); - expect(countries).toEqual(response); + expect(countries).toEqual(countriesResponse); }); it('should get countries list from session cache', async () => { - mockAxios.get.mockClear(); const countries1 = await LocaleAPI.getList({ cc: 'testCC', lc: 'testLC', @@ -282,15 +386,14 @@ describe('LocaleAPI', () => { }); expect(mockAxios.get).toHaveBeenCalledTimes(1); - expect(countries1).toEqual(response); - expect(countries2).toEqual(response); + expect(countries1).toEqual(countriesResponse); + expect(countries2).toEqual(countriesResponse); }); - it('should get default countries list on inital reject', async () => { - mockAxios.get.mockClear(); + it('should get default countries list on initial reject', async () => { mockAxios.get .mockReturnValueOnce(Promise.reject()) - .mockReturnValueOnce(Promise.resolve({ data: response })); + .mockReturnValueOnce(Promise.resolve({ data: countriesResponse })); const countries = await LocaleAPI.getList({ cc: 'testCC', @@ -307,7 +410,7 @@ describe('LocaleAPI', () => { { headers: { 'Content-Type': 'application/json; charset=utf-8' } } ); - expect(countries).toEqual(response); + expect(countries).toEqual(countriesResponse); }); it('should reject countries list', async () => { @@ -408,13 +511,16 @@ describe('LocaleAPI', () => { expect(display).toEqual('testName — testDisplay'); }); - it('should get lang for display', async () => { + it('should use getLocale for display with no langCode argument', async () => { + jest.spyOn(LocaleAPI, 'getLocale'); + const display = await LocaleAPI.getLangDisplay(false); - expect(display).toEqual('testName — testDisplay'); + expect(LocaleAPI.getLocale).toHaveBeenCalledTimes(1); + expect(display).toEqual('Brazil — Portuguese'); }); - it('should get default lang display', async () => { + it('should get default lang display for missing locale', async () => { const display = await LocaleAPI.getLangDisplay({ cc: 'missingCC', lc: 'missingLC', @@ -423,74 +529,18 @@ describe('LocaleAPI', () => { expect(display).toEqual('United States — English'); }); - it('should get locale from getLang', async () => { + it('should get locale from getLocale', async () => { jest - .spyOn(LocaleAPI, 'getLang') + .spyOn(LocaleAPI, 'getLocale') .mockReturnValue(Promise.resolve('testLang')); - jest - .spyOn(LocaleAPI, 'getList') - .mockReturnValue(Promise.resolve('testList')); - jest.spyOn(LocaleAPI, 'verifyLocale').mockReturnValue('testVerified'); - const locale = await LocaleAPI.getLocale(); - - expect(locale).toEqual('testLang'); - }); - - it('should get locale from cookies', async () => { - jest.spyOn(LocaleAPI, 'getLang').mockReturnValue(Promise.resolve(false)); - - const locale = await LocaleAPI.getLocale(); - - expect(locale).toEqual({ cc: 'us', lc: 'en' }); - }); - - it('should get locale from DDO on missing cookie', async () => { - ipcinfoCookie.get.mockImplementation(() => false); - - await LocaleAPI.getLocale(); - - expect(DDOAPI.getLocation).toHaveBeenCalledTimes(1); - }); - - it('should get locale from DDO on missing cookie lc', async () => { - DDOAPI.getLocation.mockClear(); - ipcinfoCookie.get.mockImplementation(() => ({ cc: 'testCC' })); - - await LocaleAPI.getLocale(); - - expect(DDOAPI.getLocation).toHaveBeenCalledTimes(1); - }); - - it('should get locale from DDO on missing cookie cc', async () => { - DDOAPI.getLocation.mockClear(); - ipcinfoCookie.get.mockImplementation(() => ({ lc: 'testLC' })); - - await LocaleAPI.getLocale(); - expect(DDOAPI.getLocation).toHaveBeenCalledTimes(1); - }); - - it('should get locale from DDO', async () => { - ipcinfoCookie.set.mockClear(); - ipcinfoCookie.get.mockImplementation(() => false); - - const locale = await LocaleAPI.getLocale(); + const locale = await LocaleAPI.getLang(); - expect(locale).toEqual('testVerified'); - expect(ipcinfoCookie.set).toHaveBeenCalledTimes(1); - expect(ipcinfoCookie.set).toHaveBeenCalledWith('testVerified'); - }); - - it('should get undefined locale on no cc', async () => { - DDOAPI.getLocation.mockImplementation(() => Promise.resolve(false)); - - const locale = await LocaleAPI.getLocale(); - expect(locale).toBeUndefined(); + expect(LocaleAPI.getLocale).toHaveBeenCalledTimes(1); + expect(locale).toEqual('testLang'); }); it('should use the cache for the country list, keyed by locale', async () => { - mockAxios.get.mockClear(); - LocaleAPI.getList.mockRestore(); await LocaleAPI.getList({ cc: 'us', lc: 'en' }); await LocaleAPI.getList({ cc: 'us', lc: 'en' }); await LocaleAPI.getList({ cc: 'kr', lc: 'ko' }); @@ -519,12 +569,12 @@ describe('LocaleAPI', () => { }; })(); - Object.defineProperty(window, 'sessionStorage', { + Object.defineProperty(root, 'sessionStorage', { value: sessionStorageMock, }); const mockDate = 1546300800000; // Epoch time of January 1, 2019 midnight UTC - global.Date.now = jest.fn(() => mockDate); + root.Date.now = jest.fn(() => mockDate); // using very old cached session sessionStorageMock.setItem( @@ -544,10 +594,4 @@ describe('LocaleAPI', () => { // fresh cached data would lack this property expect(newSession).not.toHaveProperty('CACHE'); }); - - afterEach(() => { - for (let handle = handles.pop(); handle; handle = handles.pop()) { - handle.release(); - } - }); }); diff --git a/packages/services/src/services/Locale/__tests__/data/response.json b/packages/services/src/services/Locale/__tests__/data/countries_response.json similarity index 100% rename from packages/services/src/services/Locale/__tests__/data/response.json rename to packages/services/src/services/Locale/__tests__/data/countries_response.json diff --git a/packages/services/src/services/Locale/__tests__/data/ddo_response.json b/packages/services/src/services/Locale/__tests__/data/ddo_response.json new file mode 100644 index 00000000000..8d1eb066b22 --- /dev/null +++ b/packages/services/src/services/Locale/__tests__/data/ddo_response.json @@ -0,0 +1,247 @@ +{ + "page": { + "attributes": { + "pageidQueryStrings": ["q", "s", "tabType[0]", "tabType%5B0%5D"], + "agentMobileOS": "unknown" + }, + "category": { + "ibm": {}, + "primaryCategory": "null", + "iniPrimaryCategory": "null" + }, + "pageInfo": { + "analytics": { + "category": "Uncategorized" + }, + "convertro": { + "enabled": "false" + }, + "coremetrics": { + "visitorID": null, + "visitorId": null, + "clientID": "50200000|IBMTESTWWW", + "isEluminateLoaded": false, + "enabled": true + }, + "demandbase": { + "enabled": true + }, + "hotjar": { + "enabled": "false" + }, + "ibm": { + "siteID": "IBMTESTWWW", + "country": "br", + "industry": "", + "owner": "", + "subject": "", + "type": "", + "iniSiteID": "IBMTESTWWW" + }, + "lotame": { + "activeAudience": null, + "audience": "240097", + "pid": "446689ed8a1d9791b415f537e490d3af" + }, + "metrics": {}, + "medallia": { + "triggerFired": "true" + }, + "optimizely": { + "enabled": "false", + "projectID": "" + }, + "segment": { + "enabled": "false", + "key": "" + }, + "tealium": { + "collect": {} + }, + "trustarc": { + "enabled": "true" + }, + "urx": {}, + "destinationURL": "https://www.ibm.com/standards/carbon/react/", + "destinationDomain": "carbon-design-system.github.io", + "description": "A collection of IBM.com components implemented using React and Carbon Design System.", + "effectiveDate": "", + "expiryDate": "", + "keywords": "IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js", + "language": "pt-BR", + "publishDate": "", + "publisher": "", + "rights": "", + "source": "", + "referrer": "", + "referrerDomain": "", + "referrerID": "", + "urlID": "www.ibm.com/standards/carbon/react", + "clickableURLID": "https://www.ibm.com/standards/carbon/react", + "pageID": "www.ibm.com/standards/carbon/react", + "dleID": "6804808e6d33a5e4e0eed41c0771f7e9d725a0a8f50799b3c9bec2e488e72c8e", + "dleURL": "https://tags.tiqcdn.com/dle/ibm/web/p_6804808e6d33a5e4e0eed41c0771f7e9d725a0a8f50799b3c9bec2e488e72c8e.js", + "contentId": "url-6804808e6d33a5e4e0eed41c0771f7e9d725a0a8f50799b3c9bec2e488e72c8e", + "canonical": "www.ibm.com/standards/carbon/react", + "onsiteSearchTerm": "", + "onsiteSearchResult": "", + "pageHeader": null, + "pageName": "Storybook", + "title": "Storybook", + "google": { + "gtag": { + "pageURL": "https://www.ibm.com/standards/carbon/react/", + "pageReferrerURL": "", + "pagePath": "www.ibm.com/standards/carbon/react", + "pageTitle": "", + "customDimension1": 1, + "customDimension2": "IBMTESTWWW", + "customDimension4": "", + "customDimension5": "5f3e204f-8dca-41f7-873b-3c608634cfdd", + "customDimension7": "", + "customDimension12": "www.ibm.com/standards/carbon/react", + "customDimension13": "https://www.ibm.com/standards/carbon/react/", + "customDimension16": "", + "customDimension17": "", + "customDimension3": "", + "customDimension6": "", + "customDimension8": "", + "customDimension9": "", + "customDimension10": "", + "customDimension11": "", + "customDimension14": "", + "customDimension15": "S:628|T:2,162,46,28,93,53,45,94|L:100|IP:f|IPC:us|DBC:us", + "customDimension18": "bf43c6e1-0681-49fd-8945-50a64c60fc92" + } + }, + "productTitle": "Unnamed Product" + }, + "session": { + "engagement": { + "isEngaged": false, + "isPageEngaged": false, + "scorePage": 0, + "scoreVisit": 0, + "events": 0, + "pages": 0, + "totalPages": 1 + }, + "pageloadEpoch": 1569589572001, + "pageviewId": "5f3e204f-8dca-41f7-873b-3c608634cfdd", + "uPageViewID": "5f3e204f-8dca-41f7-873b-3c608634cfdd", + "issuedInitialPageview": true, + "event": "profile" + }, + "isDataLayerReady": true + }, + "events": { + "processed": [], + "current": {} + }, + "content": { + "drivers": {}, + "nbo": {} + }, + "user": { + "gdpr": { + "state": "ny", + "country": "us", + "latitude": 40.75, + "longitude": -73.9967, + "isCountryMemberOfEU": false, + "isCountryRequiringExplicitConsent": false + }, + "location": { + "country": "US", + "stateProvince": "NJ", + "city": "NEWARK" + }, + "profile": { + "dw": {}, + "ex": {}, + "ng": { + "iuiHashed": null + }, + "topics": [] + }, + "segment": { + "30": true, + "31": true, + "11241": true, + "18192": true, + "isIBMer": 1 + }, + "userInfo": { + "registry_country_code": "us", + "browserLanguage": "en-US", + "annual_sales": 79590000000, + "audience_segment": "software & technology", + "audience": "enterprise business", + "b2b": true, + "b2c": true, + "city": "poughkeepsie", + "company_name": "ibm corporation", + "country_name": "united states", + "country": "us", + "demandbase_sid": 50918973, + "employee_count": 351000, + "employee_range": "enterprise", + "forbes_2000": false, + "fortune_1000": false, + "industry": "software & technology", + "information_level": "detailed", + "ip": "129.42.208.183", + "isp": false, + "latitude": 41.66, + "longitude": -73.93, + "marketing_alias": "ibm", + "phone": "845-433-1234", + "primary_naics": "334111", + "primary_sic": "3571", + "region_name": "new york", + "registry_city": "new york", + "registry_company_name": "advanced workstations division, ibm corporation", + "registry_country": "united states", + "registry_dma_code": 501, + "registry_latitude": 40.77, + "registry_longitude": -73.99, + "registry_state": "ny", + "registry_zip_code": "10019", + "revenue_range": "over $5b", + "state": "ny", + "street_address": "2455 south rd", + "sub_industry": "computer & mobile devices", + "traffic": "very high", + "web_site": "ibm.com", + "zip": "12601", + "ipLastOctet": "184" + } + }, + "util": { + "cp": { + "cmTPSet": "Y", + "_ga": "GA1.3.781956925.1569442431", + "_gid": "GA1.3.1110946260.1569442431", + "CMAVID": "none", + "notice_behavior": "implied|eu", + "pageviewContext": "5f3e204f-8dca-41f7-873b-3c608634cfdd" + }, + "meta": { + "viewport": "width=device-width,initial-scale=1", + "keywords": "IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js", + "description": "A collection of IBM.com components implemented using React and Carbon Design System.", + "og:title": "Carbon for IBM.com React", + "og:site_name": "Carbon for IBM.com React", + "og:description": "A collection of IBM.com components implemented using React and Carbon Design System.", + "og:image": "https://media.github.ibm.com/user/525/files/59e3bfde-b990-11e7-87ef-072e89a87719", + "og:url": "https://www.ibm.com/standards/carbon/react", + "twitter:card": "summary_large_image", + "twitter:image:alt": "Carbon for IBM.com", + "twitter:site": "@_IBM", + "og:type": "website", + "og:locale": "en-US" + }, + "qp": {}, + "referrer": {} + } +} diff --git a/packages/services/src/services/SearchTypeahead/__tests__/SearchTypeahead.test.js b/packages/services/src/services/SearchTypeahead/__tests__/SearchTypeahead.test.js index b250d7cad9e..2bb8ee311e6 100644 --- a/packages/services/src/services/SearchTypeahead/__tests__/SearchTypeahead.test.js +++ b/packages/services/src/services/SearchTypeahead/__tests__/SearchTypeahead.test.js @@ -1,19 +1,17 @@ /** - * Copyright IBM Corp. 2020, 2022 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ -import digitalDataResponse from '../../DDO/__tests__/data/response.json'; import mockAxios from 'axios'; import responseSuccess from './data/response.json'; -import root from 'window-or-global'; import SearchTypeaheadAPI from '../SearchTypeahead'; +import { LocaleAPI } from '../../Locale'; const _lc = 'en'; // TODO: bake in tests where lc changes const _cc = 'us'; // TODO: bake in tests where cc changes -const mockDigitalDataResponse = digitalDataResponse; describe('SearchTypeaheadAPI', () => { beforeEach(function () { @@ -23,10 +21,16 @@ describe('SearchTypeaheadAPI', () => { }) ); - root.digitalData = mockDigitalDataResponse; + // Restore any mocks back to a predictable state. + jest.restoreAllMocks(); }); it('should search for ibm.com results with just lc param', async () => { + jest.spyOn(LocaleAPI, 'getLang').mockReturnValue( + Promise.resolve({ + lc: 'en', + }) + ); const query = 'red hat'; const endpoint = `${process.env.SEARCH_TYPEAHEAD_API}/search/typeahead/${process.env.SEARCH_TYPEAHEAD_VERSION}`; const fetchUrl = `${endpoint}?lang=${_lc}&query=${encodeURIComponent( @@ -44,15 +48,12 @@ describe('SearchTypeaheadAPI', () => { }); it('should search for ibm.com results with both cc and lc param', async () => { - root.digitalData = { - page: { - pageInfo: { - ibm: { - country: 'us', - }, - }, - }, - }; + jest.spyOn(LocaleAPI, 'getLang').mockReturnValue( + Promise.resolve({ + lc: 'en', + cc: 'us', + }) + ); const query = 'red hat'; const endpoint = `${process.env.SEARCH_TYPEAHEAD_API}/search/typeahead/${process.env.SEARCH_TYPEAHEAD_VERSION}`; diff --git a/packages/services/src/services/global/__tests__/global.test.js b/packages/services/src/services/global/__tests__/global.test.js index 2f46eeca775..905add1de7d 100644 --- a/packages/services/src/services/global/__tests__/global.test.js +++ b/packages/services/src/services/global/__tests__/global.test.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -14,6 +14,11 @@ jest.mock('../../DDO', () => ({ setVersion: jest.fn(async () => {}), }, })); +jest.mock('../../Locale', () => ({ + LocaleAPI: { + getLang: jest.fn(async () => ({ lc: 'en', cc: 'us' })), + }, +})); jest.mock('../../Analytics', () => ({ AnalyticsAPI: { initAll: jest.fn(), diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md index 60274dbdb65..8a5854b176e 100644 --- a/packages/styles/CHANGELOG.md +++ b/packages/styles/CHANGELOG.md @@ -3,6 +3,71 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.1.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.1.0-rc.0...@carbon/ibmdotcom-styles@2.1.0) (2024-01-17) + +**Note:** Version bump only for package @carbon/ibmdotcom-styles + + + + + +# [2.1.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.0.0...@carbon/ibmdotcom-styles@2.1.0-rc.0) (2024-01-09) + + +### Bug Fixes + +* **carousel:** carousel rtl fixes ([#11030](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11030)) ([5ea87bd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5ea87bd0b417b3f6148a174233e98602c1585da9)) +* **tests:** fix unit test snapshots and misc fixes ([#11203](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11203)) ([766682c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/766682cb732c86950f2a345bdbd5ad871dd5d9c5)) +* **web-component:** issues with new style update ([5f39ec5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5f39ec54eebe285929af6674cea0146959ec3d36)) + + +### Features + +* **card:** use link instead of button for pictogram card ([#11225](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11225)) ([5d531a2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5d531a2ff8596fcb31fefe6f43ebb52cfddf6f8f)), closes [#10960](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10960) [#10960](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10960) [/css-tricks.com/block-links-the-search-for-a-perfect-solution/#aa-method-3](https://github.com//css-tricks.com/block-links-the-search-for-a-perfect-solution//issues/aa-method-3) +* **modal:** with slug ([#11247](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11247)) ([209142a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/209142a44187788965dd5b193f31491de8b12c0b)), closes [#11142](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11142) +* **video-player:** Improve usage as background media ([#11188](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11188)) ([375a57b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/375a57b0d9abef4539f891c3ebf5a882e7d52d0c)) + + + +# 1.53.0 (2023-11-15) + + + +# 1.53.0-rc.2 (2023-11-06) + + + +# 1.53.0-rc.1 (2023-11-02) + + + +# 1.52.0-rc.2 (2023-10-12) + + +### Bug Fixes + +* **deps:** update dependency @carbon/layout to v10.37.2 ([#10949](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10949)) ([369a0c2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/369a0c2b4d35cab348e2a571e035c9c9a0d0a8da)) + + + +# 1.52.0-rc.0 (2023-10-03) + + +### Bug Fixes + +* **deps:** update dependency @carbon/grid to v10.43.2 ([#10948](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10948)) ([8e5996d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8e5996df1ec19c03656496a47988cf82cba5a2ff)) +* **deps:** update dependency @carbon/motion to v10.29.2 ([#10989](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10989)) ([64b1ed7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/64b1ed7d7ccb5131dfb1db63d6fd95905ab6477d)) +* **deps:** update dependency @carbon/themes to v10.55.3 ([#10990](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10990)) ([20fe23e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/20fe23eadcb7e9c86f5d39db6a7f7b0bfb042917)) +* **masthead:** add high contrast styles for ibm logo ([#10988](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10988)) ([c5331f2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c5331f2ec063676d2efe07d05b07cd1e5a7063dc)), closes [#10977](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10977) + + + +# 1.51.0 (2023-09-19) + + + + + # [2.0.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.0.0-rc.3...@carbon/ibmdotcom-styles@2.0.0) (2023-12-11) **Note:** Version bump only for package @carbon/ibmdotcom-styles diff --git a/packages/styles/package.json b/packages/styles/package.json index 61e00e9ecee..4c2e86b7744 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibmdotcom-styles", "description": "Carbon for IBM.com Styles", - "version": "2.0.0", + "version": "2.1.0", "license": "Apache-2.0", "main": "dist/ibm-dotcom-styles.min.css", "module": "src/scss", @@ -29,14 +29,14 @@ "upgrade-carbon": "yarn upgrade-interactive @carbon/layout @carbon/styles @carbon/themes @carbon/icons-react --latest --exact" }, "dependencies": { - "@carbon/icons-react": "^11.31.0", - "@carbon/layout": "^11.20.1", - "@carbon/styles": "^1.46.0", + "@carbon/icons-react": "11.33.0", + "@carbon/layout": "11.20.1", + "@carbon/styles": "1.47.0", "@carbon/telemetry": "0.1.0", - "@carbon/type": "^11.25.1" + "@carbon/type": "11.25.1" }, "devDependencies": { - "@carbon/themes": "^11.28.0", + "@carbon/themes": "11.28.0", "del": "^6.0.0", "gulp": "^4.0.2", "gulp-autoprefixer": "^6.1.0", diff --git a/packages/styles/scss/components/masthead/_masthead-l1.scss b/packages/styles/scss/components/masthead/_masthead-l1.scss index 573642ec33b..84881eb680a 100644 --- a/packages/styles/scss/components/masthead/_masthead-l1.scss +++ b/packages/styles/scss/components/masthead/_masthead-l1.scss @@ -13,6 +13,7 @@ @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '@carbon/styles/scss/components/button/tokens' as *; @use '../../globals/vars' as *; @use 'vars' as *; diff --git a/packages/styles/scss/components/masthead/_masthead-megamenu.scss b/packages/styles/scss/components/masthead/_masthead-megamenu.scss index 5aa22e1ecf8..58d7de698e6 100644 --- a/packages/styles/scss/components/masthead/_masthead-megamenu.scss +++ b/packages/styles/scss/components/masthead/_masthead-megamenu.scss @@ -12,6 +12,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; @@ -78,7 +79,6 @@ .#{$prefix}--header__menu-title[aria-expanded='false'] + .#{$prefix}--header__menu { ::slotted(#{$c4d-prefix}-megamenu), - ::slotted(#{$c4d-prefix}-cloud-megamenu), .#{$prefix}--masthead__megamenu { animation: $transition-expansion motion(standard, expressive) collapse; } @@ -99,7 +99,6 @@ visibility: visible; ::slotted(#{$c4d-prefix}-megamenu), - ::slotted(#{$c4d-prefix}-cloud-megamenu), .#{$prefix}--masthead__megamenu { animation: $transition-expansion motion(standard, expressive) expand; } @@ -121,7 +120,6 @@ } :host(#{$c4d-prefix}-megamenu), - :host(#{$c4d-prefix}-cloud-megamenu), .#{$prefix}--masthead__megamenu { @include box-shadow; --#{$c4d-prefix}-masthead-max-height: calc( diff --git a/packages/styles/scss/components/masthead/_masthead.scss b/packages/styles/scss/components/masthead/_masthead.scss index eaed25489a7..5160b2d2192 100755 --- a/packages/styles/scss/components/masthead/_masthead.scss +++ b/packages/styles/scss/components/masthead/_masthead.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -17,7 +17,9 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/layout' as layout; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; @use '../link-with-icon'; @use 'vars' as *; @@ -266,10 +268,12 @@ } :host(#{$c4d-prefix}-masthead-composite), - :host(#{$c4d-prefix}-masthead-container), - :host(#{$c4d-prefix}-cloud-masthead-container) { + :host(#{$c4d-prefix}-masthead-container) { + @include layout.emit-layout-tokens(); + position: relative; z-index: 900; + display: block; padding-block-start: $spacing-09; } diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md index a3adcfac436..6f69bf073ca 100644 --- a/packages/utilities/CHANGELOG.md +++ b/packages/utilities/CHANGELOG.md @@ -3,6 +3,46 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.1.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.1.0-rc.0...@carbon/ibmdotcom-utilities@2.1.0) (2024-01-17) + +**Note:** Version bump only for package @carbon/ibmdotcom-utilities + + + + + +# [2.1.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.0.0...@carbon/ibmdotcom-utilities@2.1.0-rc.0) (2024-01-09) + + + +# 1.53.0 (2023-11-15) + + + +# 1.53.0-rc.2 (2023-11-06) + + + +# 1.53.0-rc.1 (2023-11-02) + + + +# 1.53.0-rc.0 (2023-10-30) + + + +# 1.52.0-rc.0 (2023-10-03) + + + +# 1.51.0 (2023-09-19) + +**Note:** Version bump only for package @carbon/ibmdotcom-utilities + + + + + # [2.0.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.0.0-rc.3...@carbon/ibmdotcom-utilities@2.0.0) (2023-12-11) **Note:** Version bump only for package @carbon/ibmdotcom-utilities diff --git a/packages/utilities/package.json b/packages/utilities/package.json index f52b3aa6256..82f6473eff0 100644 --- a/packages/utilities/package.json +++ b/packages/utilities/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibmdotcom-utilities", "description": "Carbon for IBM.com Utilities", - "version": "2.0.0", + "version": "2.1.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/utilities/src/utilities/StickyHeader/StickyHeader.js b/packages/utilities/src/utilities/StickyHeader/StickyHeader.js index e68a9ccf700..265c03ddfa1 100644 --- a/packages/utilities/src/utilities/StickyHeader/StickyHeader.js +++ b/packages/utilities/src/utilities/StickyHeader/StickyHeader.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -226,7 +226,7 @@ class StickyHeader { } const newY = window.scrollY; - this._lastScrollPosition = newY; + this._lastScrollPosition = Math.max(0, newY); /** * maxScrollaway is a calculated value matching the height of all components diff --git a/packages/utilities/src/utilities/settings/settings.js b/packages/utilities/src/utilities/settings/settings.js index 32809a03992..e96eb6c119f 100644 --- a/packages/utilities/src/utilities/settings/settings.js +++ b/packages/utilities/src/utilities/settings/settings.js @@ -12,10 +12,10 @@ * @type {object} Settings object * @property {string} [stablePrefix=c4d] stable prefix * @property {string} [prefix=cds] core Carbon prefix - * Carbon for IBM.com v2.0.0', + * Carbon for IBM.com v2.1.0', */ const settings = { - version: 'Carbon for IBM.com v2.0.0', + version: 'Carbon for IBM.com v2.1.0', stablePrefix: 'c4d', prefix: 'cds', }; diff --git a/packages/web-components/.env.example b/packages/web-components/.env.example index 02cd01fa735..a8bc6fb537f 100644 --- a/packages/web-components/.env.example +++ b/packages/web-components/.env.example @@ -19,4 +19,3 @@ KALTURA_UICONF_ID= # Feature Flags C4D_FLAGS_ALL= -C4D_CLOUD_MASTHEAD= diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md index 33483f42061..62e7d1760d3 100644 --- a/packages/web-components/CHANGELOG.md +++ b/packages/web-components/CHANGELOG.md @@ -1,10 +1,106 @@ # Change Log - - All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.1.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.1.0-rc.0...@carbon/ibmdotcom-web-components@2.1.0) (2024-01-17) + +**Note:** Version bump only for package @carbon/ibmdotcom-web-components + + + + + +# [2.1.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.0.0...@carbon/ibmdotcom-web-components@2.1.0-rc.0) (2024-01-09) + + +### Bug Fixes + +* **carousel:** carousel rtl fixes ([#11030](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11030)) ([5ea87bd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5ea87bd0b417b3f6148a174233e98602c1585da9)) +* **stackblitz:** versions pointing to v2 ([#11277](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11277)) ([bd01c71](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bd01c71ed1c691a75bff692e26b6797752bd8753)) +* **tests:** fix unit test snapshots and misc fixes ([#11203](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11203)) ([766682c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/766682cb732c86950f2a345bdbd5ad871dd5d9c5)) + + +### Features + +* **card:** use link instead of button for pictogram card ([#11225](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11225)) ([5d531a2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5d531a2ff8596fcb31fefe6f43ebb52cfddf6f8f)), closes [#10960](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10960) [#10960](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10960) [/css-tricks.com/block-links-the-search-for-a-perfect-solution/#aa-method-3](https://github.com//css-tricks.com/block-links-the-search-for-a-perfect-solution//issues/aa-method-3) +* **modal:** with slug ([#11247](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11247)) ([209142a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/209142a44187788965dd5b193f31491de8b12c0b)), closes [#11142](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11142) +* **video-player:** Improve usage as background media ([#11188](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11188)) ([375a57b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/375a57b0d9abef4539f891c3ebf5a882e7d52d0c)) + + + +# 1.53.0 (2023-11-15) + + +### Bug Fixes + +* **content-group-pictograms:** screen reader issue fix ([#11099](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11099)) ([c42a71f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c42a71faf8db29fe90f6e0115bb1d3bfb4ee5f40)), closes [#9655](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9655) +* **e2e:** fix harness for e2e integration tests ([#11106](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11106)) ([15673b0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/15673b0bc4dc568830ee2fd8328dee5dd6fe008a)) + + + +# 1.53.0-rc.2 (2023-11-06) + + +### Bug Fixes + +* **link-with-icon:** remove property set-by-enum ([#11092](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11092)) ([885ed65](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/885ed656ff6f0dcf58ebcd684e0b6c6c8878d247)) + + + +# 1.53.0-rc.1 (2023-11-02) + + +### Bug Fixes + +* **deps:** update dependency @carbon/layout to v10.37.2 ([#11076](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11076)) ([a641446](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a641446796354a9d405e9afd55922441466a10a6)) +* **language-selector:** remove internal decorator ([#11069](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11069)) ([d61199d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d61199d5c9e03671aa08f9a0b774f470900dfd0c)), closes [#10885](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10885) +* **masthead-a11y:** navigation role do not have unique labels ([#10881](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10881)) ([2c9d0ab](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2c9d0ab2ea97e6cdce58c41a677714077196b480)) +* **quote:** make quote-link-with-icon available in quote cdn bundle ([#11020](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11020)) ([8e6b754](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8e6b754ee49aaf8c4704ed6ff34da155a26a8f21)) +* **storybook:** set dir attribute in storybook for rtl ([#11031](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11031)) ([b4f26f2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b4f26f2e6925e357ec2e219b756e4f47bf37fa36)) +* **ui-shell:** a11y issue with side nav item ([#11044](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11044)) ([9eb94ea](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9eb94ea097dcf9610a72900468008373cfec3bbe)), closes [#10918](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10918) +* **video-player:** move updateThumbnailUrl callback after updateComplete ([#11067](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11067)) ([b9445ec](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b9445eccfc896d261f310bba57a0aafe6b6c8dcd)), closes [#7914](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7914) [/github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/video-player/video-player-composite.ts#L230-L234](https://github.com//github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/video-player/video-player-composite.ts/issues/L230-L234) + + +### Features + +* **locale-modal:** only render modal when its called by user click ([#10892](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10892)) ([317d2be](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/317d2bee88f8a704a56a4e10492a936fd29bdfe4)), closes [#10657](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10657) + + + +# 1.52.0-rc.2 (2023-10-12) + + +### Bug Fixes + +* **callout-quote:** content off grid ([#10869](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10869)) ([3f94c14](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3f94c14bbac86ce847b4cee3b7fc4d01d17a1601)) +* **lightbox-media-viewer:** add cdn link ([#11005](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11005)) ([ef5e0de](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ef5e0de95b17214233b3928f694e1662246600c4)) + + + +# 1.52.0-rc.1 (2023-10-04) + + + +# 1.52.0-rc.0 (2023-10-03) + + +### Bug Fixes + +* **carousel:** delay instantiation of IntersectionObserver ([#10971](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10971)) ([4dc0f91](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4dc0f9129d5cc6033b562a1d682f5493555390b5)), closes [#10929](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10929) +* **masthead:** new property for custom nav links ([#10986](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10986)) ([b512715](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b512715e936f0d729646b434020f535588fe27ff)), closes [#10984](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10984) +* **notice-choice:** fixed onclick hidden values ([#10917](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10917)) ([#10956](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10956)) ([f316c10](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f316c1090366fefc0832caf3f9510c3cf74486a9)) +* **package:** update web components component exports ([#10955](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10955)) ([8b188bf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8b188bfc150eb66772a3e0708974bff51eff8f77)) +* **video-player-composite:** fix isPlaying boolean ([#10957](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10957)) ([78ee219](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/78ee2198042234cf1266676c8ba82d0b9b267327)) + + + +# 1.51.0 (2023-09-19) + + + + + # [2.0.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.0.0-rc.3...@carbon/ibmdotcom-web-components@2.0.0) (2023-12-11) **Note:** Version bump only for package @carbon/ibmdotcom-web-components diff --git a/packages/web-components/IMPLEMENTATION_NOTES.md b/packages/web-components/IMPLEMENTATION_NOTES.md index beca75342a1..79574a95aad 100644 --- a/packages/web-components/IMPLEMENTATION_NOTES.md +++ b/packages/web-components/IMPLEMENTATION_NOTES.md @@ -202,6 +202,12 @@ There are some common behaviors in CTA components that are implemented by attribute of `` for `external` CTA types. - [Use a hash link](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0-rc.0/packages/web-components/src/component-mixins/cta/cta.ts#L113-L122) for `video` CTA types. +- Trigger a CTA video on page load using a `#cta-video-[video-id]` URL fragment. + For any page that includes a CTA component composed with `CTAMixin`, the CTA + will look for a URL fragment following the pattern `#cta-video-[video-id]`, + where `[video-id]` is the video id configured for the component. If there is a + match, the CTA will automatically be triggered, which in most cases will open + a lightbox and begin video playback (subject to browser auto-play policies). ### Video CTA diff --git a/packages/web-components/examples/stackblitz/components/cloud-masthead/.gitignore b/packages/web-components/examples/stackblitz/components/cloud-masthead/.gitignore deleted file mode 100644 index d94d6e13e94..00000000000 --- a/packages/web-components/examples/stackblitz/components/cloud-masthead/.gitignore +++ /dev/null @@ -1,22 +0,0 @@ -# See https://help.github.com/ignore-files/ for more about ignoring files. - -# dependencies -/node_modules - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.cache -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* diff --git a/packages/web-components/examples/stackblitz/components/cloud-masthead/.sassrc b/packages/web-components/examples/stackblitz/components/cloud-masthead/.sassrc deleted file mode 100644 index c0ad86448e3..00000000000 --- a/packages/web-components/examples/stackblitz/components/cloud-masthead/.sassrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "includePaths": [ - "node_modules", "../../node_modules" - ], -} diff --git a/packages/web-components/examples/stackblitz/components/cloud-masthead/cdn-rtl.html b/packages/web-components/examples/stackblitz/components/cloud-masthead/cdn-rtl.html deleted file mode 100644 index be161cfb984..00000000000 --- a/packages/web-components/examples/stackblitz/components/cloud-masthead/cdn-rtl.html +++ /dev/null @@ -1,91 +0,0 @@ - - - - - @carbon/ibmdotcom-web-components example - - - - - - - - - -
-
-
-
-

- Purpose and function -

-

- The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework - for the entire design system and ties the products in IBM’s portfolio together in a cohesive and elegant way. The - shell is the home of the topmost navigation, where users can quickly and dependably gain their bearings and move - between pages. -
-
- The shell was designed with maximum flexibility built in, to serve the needs of a broad range of products and users. - Adopting the shell ensures compliance with IBM design standards, simplifies development efforts, and provides great - user experiences. All IBM products built with Carbon are required to use the shell’s header. -
-
- To better understand the purpose and function of the UI shell, consider the “shell” of MacOS, which contains the - Apple menu, top-level navigation, and universal, OS-level controls at the top of the screen, as well as a universal - dock along the bottom or side of the screen. The Carbon UI shell is roughly analogous in function to these parts of - the Mac UI. For example, the app switcher portion of the shell can be compared to the dock in MacOS. -

-

- Header responsive behavior -

-

- As a header scales down to fit smaller screen sizes, headers with persistent side nav menus should have the side nav - collapse into “hamburger” menu. See the example to better understand responsive behavior of the header. -

-

- Secondary navigation -

-

- The side-nav contains secondary navigation and fits below the header. It can be configured to be either fixed-width - or flexible, with only one level of nested items allowed. Both links and category lists can be used in the side-nav - and may be mixed together. There are several configurations of the side-nav, but only one configuration should be - used per product section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in - hierarchy to the side-nav. -

-
-
-
-
- - diff --git a/packages/web-components/examples/stackblitz/components/cloud-masthead/cdn.html b/packages/web-components/examples/stackblitz/components/cloud-masthead/cdn.html deleted file mode 100644 index b0d8957e2d5..00000000000 --- a/packages/web-components/examples/stackblitz/components/cloud-masthead/cdn.html +++ /dev/null @@ -1,91 +0,0 @@ - - - - - @carbon/ibmdotcom-web-components example - - - - - - - - - -
-
-
-
-

- Purpose and function -

-

- The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework - for the entire design system and ties the products in IBM’s portfolio together in a cohesive and elegant way. The - shell is the home of the topmost navigation, where users can quickly and dependably gain their bearings and move - between pages. -
-
- The shell was designed with maximum flexibility built in, to serve the needs of a broad range of products and users. - Adopting the shell ensures compliance with IBM design standards, simplifies development efforts, and provides great - user experiences. All IBM products built with Carbon are required to use the shell’s header. -
-
- To better understand the purpose and function of the UI shell, consider the “shell” of MacOS, which contains the - Apple menu, top-level navigation, and universal, OS-level controls at the top of the screen, as well as a universal - dock along the bottom or side of the screen. The Carbon UI shell is roughly analogous in function to these parts of - the Mac UI. For example, the app switcher portion of the shell can be compared to the dock in MacOS. -

-

- Header responsive behavior -

-

- As a header scales down to fit smaller screen sizes, headers with persistent side nav menus should have the side nav - collapse into “hamburger” menu. See the example to better understand responsive behavior of the header. -

-

- Secondary navigation -

-

- The side-nav contains secondary navigation and fits below the header. It can be configured to be either fixed-width - or flexible, with only one level of nested items allowed. Both links and category lists can be used in the side-nav - and may be mixed together. There are several configurations of the side-nav, but only one configuration should be - used per product section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in - hierarchy to the side-nav. -

-
-
-
-
- - diff --git a/packages/web-components/examples/stackblitz/components/cloud-masthead/index.html b/packages/web-components/examples/stackblitz/components/cloud-masthead/index.html deleted file mode 100644 index 981e6c2caf7..00000000000 --- a/packages/web-components/examples/stackblitz/components/cloud-masthead/index.html +++ /dev/null @@ -1,71 +0,0 @@ - - - - - @carbon/ibmdotcom-web-components example - - - - - - - -
-
-
-
-

- Purpose and function -

-

- The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework - for the entire design system and ties the products in IBM’s portfolio together in a cohesive and elegant way. The - shell is the home of the topmost navigation, where users can quickly and dependably gain their bearings and move - between pages. -
-
- The shell was designed with maximum flexibility built in, to serve the needs of a broad range of products and users. - Adopting the shell ensures compliance with IBM design standards, simplifies development efforts, and provides great - user experiences. All IBM products built with Carbon are required to use the shell’s header. -
-
- To better understand the purpose and function of the UI shell, consider the “shell” of MacOS, which contains the - Apple menu, top-level navigation, and universal, OS-level controls at the top of the screen, as well as a universal - dock along the bottom or side of the screen. The Carbon UI shell is roughly analogous in function to these parts of - the Mac UI. For example, the app switcher portion of the shell can be compared to the dock in MacOS. -

-

- Header responsive behavior -

-

- As a header scales down to fit smaller screen sizes, headers with persistent side nav menus should have the side nav - collapse into “hamburger” menu. See the example to better understand responsive behavior of the header. -

-

- Secondary navigation -

-

- The side-nav contains secondary navigation and fits below the header. It can be configured to be either fixed-width - or flexible, with only one level of nested items allowed. Both links and category lists can be used in the side-nav - and may be mixed together. There are several configurations of the side-nav, but only one configuration should be - used per product section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in - hierarchy to the side-nav. -

-
-
-
-
- - diff --git a/packages/web-components/examples/stackblitz/components/cloud-masthead/package.json b/packages/web-components/examples/stackblitz/components/cloud-masthead/package.json deleted file mode 100644 index 30995b83ae1..00000000000 --- a/packages/web-components/examples/stackblitz/components/cloud-masthead/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "ibmdotcom-web-components-cloud-masthead-example", - "version": "0.1.0", - "private": true, - "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.", - "license": "Apache-2", - "main": "index.html", - "scripts": { - "clean": "rimraf node_modules dist .cache", - "start": "parcel index.html --port=9000 --no-hmr", - "build": "parcel build *.html --no-minify --public-url ./" - }, - "dependencies": { - "@carbon/ibmdotcom-web-components": "latest" - }, - "devDependencies": { - "@babel/core": "^7.0.0-0", - "carbon-components": "^10.36.0", - "parcel-bundler": "1.12.3", - "rimraf": "^3.0.2", - "sass": "^1.32.13" - } -} diff --git a/packages/web-components/examples/stackblitz/components/cloud-masthead/src/index-cdn.js b/packages/web-components/examples/stackblitz/components/cloud-masthead/src/index-cdn.js deleted file mode 100644 index 55686b8a66d..00000000000 --- a/packages/web-components/examples/stackblitz/components/cloud-masthead/src/index-cdn.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 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. - */ - -window.digitalData = { - page: { - pageInfo: { - language: 'en-US', - ibm: { - country: 'US', - siteID: 'IBMTESTWWW', - }, - }, - isDataLayerReady: true, - }, -}; diff --git a/packages/web-components/examples/stackblitz/components/cloud-masthead/src/index.js b/packages/web-components/examples/stackblitz/components/cloud-masthead/src/index.js deleted file mode 100644 index 6160f4834c6..00000000000 --- a/packages/web-components/examples/stackblitz/components/cloud-masthead/src/index.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 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. - */ - -import '@carbon/ibmdotcom-web-components/es/components/masthead/cloud/index.js'; -import './index.scss'; - -window.digitalData = { - page: { - pageInfo: { - language: 'en-US', - ibm: { - country: 'US', - siteID: 'IBMTESTWWW', - }, - }, - isDataLayerReady: true, - }, -}; diff --git a/packages/web-components/examples/stackblitz/components/cloud-masthead/src/index.scss b/packages/web-components/examples/stackblitz/components/cloud-masthead/src/index.scss deleted file mode 100644 index 3fcda169c02..00000000000 --- a/packages/web-components/examples/stackblitz/components/cloud-masthead/src/index.scss +++ /dev/null @@ -1,37 +0,0 @@ -// -// @license -// -// Copyright IBM Corp. 2020, 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. -// - -// `enable-css-custom-properties` and `grid-columns-16` feature flags are requirements for Carbon for IBM.com styles -$feature-flags: ( - enable-css-custom-properties: true, - grid-columns-16: true, -); - -@import 'carbon-components/scss/globals/grid/grid'; -@import 'carbon-components/scss/components/ui-shell/content'; - -body { - padding: calc(#{$spacing-09} + #{mini-units(6)} + 1px) $spacing-09 $spacing-09 $spacing-09; -} - -@media (min-width: 66rem) { - .cds--offset-lg-3 { - margin-left: 0; - } -} - -.cds--content.cds-ce-demo--ui-shell-content { - h2 { - margin: 30px 0; - - &:first-of-type { - margin-top: 0; - } - } -} diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 7e0f02329fb..c9c7e8cd976 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/ibmdotcom-web-components", - "version": "2.0.0", + "version": "2.1.0", "description": "Carbon for IBM.com Web Components", "license": "Apache-2.0", "exports": { @@ -90,14 +90,14 @@ "wca": "web-component-analyzer analyze src --outFile custom-elements.json" }, "dependencies": { - "@carbon/ibmdotcom-services": "2.0.0", - "@carbon/ibmdotcom-styles": "2.0.0", - "@carbon/ibmdotcom-utilities": "2.0.0", - "@carbon/layout": "^11.20.1", - "@carbon/motion": "^11.16.1", - "@carbon/styles": "^1.46.0", + "@carbon/ibmdotcom-services": "2.1.0", + "@carbon/ibmdotcom-styles": "2.1.0", + "@carbon/ibmdotcom-utilities": "2.1.0", + "@carbon/layout": "11.20.1", + "@carbon/motion": "11.16.1", + "@carbon/styles": "1.47.0", "@carbon/telemetry": "0.1.0", - "@carbon/web-components": "2.0.2-rc.1", + "@carbon/web-components": "2.1.2", "lit": "^2.7.6", "lodash-es": "^4.17.21", "redux": "^4.0.0", @@ -107,7 +107,7 @@ "window-or-global": "^1.0.1" }, "optionalDependencies": { - "@carbon/icons-react": "10.49.2", + "@carbon/icons-react": "^11.33.0", "lodash.pickby": "^4.6.0", "prop-types": "^15.7.0", "react": "^16.10.0 || ^17.0.0", @@ -133,10 +133,10 @@ "@carbon/ibmdotcom-services-store": "1.53.0", "@carbon/icon-helpers": "10.45.1", "@carbon/icons": "^11.31.0", - "@carbon/icons-react": "10.49.2", + "@carbon/icons-react": "^11.33.0", "@carbon/pictograms-react": "11.55.0", - "@carbon/react": "^1.46.0", - "@carbon/type": "^11.25.1", + "@carbon/react": "1.47.0", + "@carbon/type": "11.25.1", "@open-wc/semantic-dom-diff": "~0.18.0", "@percy-io/in-percy": "^0.1.11", "@percy/cli": "^1.27.4", diff --git a/packages/web-components/src/component-mixins/cta/cta.ts b/packages/web-components/src/component-mixins/cta/cta.ts index 8aaa313a822..31d7c5cad95 100644 --- a/packages/web-components/src/component-mixins/cta/cta.ts +++ b/packages/web-components/src/component-mixins/cta/cta.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -29,6 +29,7 @@ import { formatVideoCaption, formatVideoDuration, } from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js'; +import root from 'window-or-global'; const { prefix, stablePrefix: c4dPrefix } = settings; @@ -201,6 +202,14 @@ const CTAMixin = >(Base: T) => { `; } + firstUpdated() { + const { ctaType, href } = this; + // Check for the URL trigger meant to fire eventRunAction. + if (ctaType === CTA_TYPE.VIDEO && href) { + this._checkUrlVideoTrigger(); + } + } + /** * Handles `.updated()` method of `lit-element`. */ @@ -324,6 +333,46 @@ const CTAMixin = >(Base: T) => { } } + /** + * Check the URL for a fragment including the video id. + * + * If we find a URL fragment that includes the video id, we trigger the + * eventRunAction event, which for video will open the video and start + * playback in a lightbox. This is the same thing that happens when the user + * clicks on the CTA. + */ + _checkUrlVideoTrigger() { + const { ctaType, disabled, href, videoDescription, videoName } = this; + // Without a video id, or if the button is disabled, there is nothing to + // do here. + if (ctaType !== CTA_TYPE.VIDEO || !href || disabled) { + return; + } + // Only trigger for the first CTA with the video id in the page. + if (this.ownerDocument.querySelector(`[href='${href}']`) !== this) { + return; + } + const { eventRunAction } = this.constructor as typeof CTAMixinImpl; + const hash = root.location.hash; + const urlTrigger = `cta-video-${href}`; + + if (hash === `#${urlTrigger}`) { + this.dispatchEvent( + new CustomEvent(eventRunAction, { + bubbles: true, + cancelable: true, + composed: true, + detail: { + href, + ctaType, + videoName, + videoDescription, + }, + }) + ); + } + } + /** * Updates video thumbnail url to match card width. */ diff --git a/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.react.tsx b/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.react.tsx index cb4ebd1a150..9c3212ec312 100644 --- a/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.react.tsx +++ b/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.react.tsx @@ -1,14 +1,14 @@ /** * @license * - * Copyright IBM Corp. 2021 + * Copyright IBM Corp. 2021, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ // @ts-nocheck -import ArrowDown20 from '@carbon/icons-react/es/arrow--down/20.js'; +import { ArrowDown, ArrowRight } from '@carbon/icons-react'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. import C4DBackToTop from '@carbon/ibmdotcom-web-components/es/components-react/back-to-top/back-to-top'; @@ -26,7 +26,6 @@ import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-reac /* eslint-disable max-len */ import C4DContentBlockSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-block-simple/content-block-simple'; import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; import React from 'react'; import readme from './README.stories.react.mdx'; import styles from './back-to-top.stories.scss'; @@ -116,6 +115,11 @@ natoque penatibus et magnis dis parturient. Nec dubitamus multa iter quae et nos bona sunt, inclinet, amari petere vellent. Phasellus laoreet lorem vel dolor tempus vehicula. `; +const iconProps = { + size: 20, + slot: 'icon', +}; + export const Default = () => { return ( <> @@ -129,7 +133,7 @@ export const Default = () => { data-target="#section-1" href="#section-1"> Scroll down - + @@ -162,11 +166,11 @@ export const Default = () => { Try it on premises - + Try it on cloud - + @@ -174,31 +178,31 @@ export const Default = () => { More ways to explore Linux servers - Products + Products - Key concepts + Key concepts - Analyst insights + Analyst insights - Blogs + Blogs - Client stories + Client stories - Events + Events - Latest Research + Latest Research - Training + Training - Partners + Partners diff --git a/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.react.tsx b/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.react.tsx index 199b44fea60..37715e486a8 100644 --- a/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.react.tsx +++ b/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.react.tsx @@ -1,14 +1,14 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ import React from 'react'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore @@ -40,6 +40,10 @@ const copyOdd = ` ${copyDefault} Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. `; +const iconProps = { + size: 20, + slot: 'icon', +}; const Card = ({ copy = copyDefault, @@ -50,7 +54,7 @@ const Card = ({ {heading}

{copy}

- + ); @@ -67,7 +71,7 @@ export const Default = () => { Link text - + diff --git a/packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.react.tsx b/packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.react.tsx index 601f649d104..17c56adc95f 100644 --- a/packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.react.tsx +++ b/packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,7 +9,7 @@ import React from 'react'; import { select } from '@storybook/addon-knobs'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container'; @@ -27,6 +27,11 @@ import image from '../../../../.storybook/storybook-images/assets/card-section-o import textNullable from '../../../../.storybook/knob-text-nullable'; import readme from './README.stories.react.mdx'; +const iconProps = { + size: 20, + slot: 'icon', +}; + const ctaTypes = { [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL, [`Download (${CTA_TYPE.DOWNLOAD})`]: CTA_TYPE.DOWNLOAD, @@ -60,7 +65,7 @@ const defaultCardGroupItem = ( democritum ex. Illud ullum graecis

- + ); diff --git a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx index a1d3883603a..bf9d65ddf40 100644 --- a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx +++ b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,7 +9,7 @@ import React from 'react'; import { boolean, select } from '@storybook/addon-knobs'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; import Desktop from '@carbon/pictograms-react/lib/desktop/index.js'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. @@ -36,6 +36,11 @@ import { types, } from '../../cta/__stories__/ctaTypeConfig'; +const iconProps = { + size: 20, + slot: 'icon', +}; + export const Default = (args) => { const { aspectRatio, @@ -249,7 +254,7 @@ export const Static = (args) => { {cta ? ( Sign up for the trial - + ) : ( '' diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.react.tsx b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.react.tsx index b316ff9c208..9964b8a29cd 100644 --- a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.react.tsx +++ b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -38,7 +38,7 @@ import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-rea import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; import TouchScreen from '@carbon/pictograms-react/es/touch--screen/index.js'; import readme from './README.stories.react.mdx'; @@ -48,6 +48,11 @@ import imgMd16x9 from '../../../../.storybook/storybook-images/assets/480/fpo--1 import imgSm16x9 from '../../../../.storybook/storybook-images/assets/320/fpo--16x9--320x180--002.jpg'; import { CTA_TYPE } from '../../cta/defs'; +const iconProps = { + size: 20, + slot: 'icon', +}; + const pictogramsItems = [ { heading: 'Aliquam condimentum interdum', @@ -129,7 +134,7 @@ export const Default = (args) => { eiusmod tempor incididunt ut labore et dolore magna aliqua.

- + @@ -142,7 +147,7 @@ export const Default = (args) => { eiusmod tempor incididunt ut labore et dolore magna aliqua.

- + @@ -156,7 +161,7 @@ export const Default = (args) => { {itemHeading} {itemCopy} - {linkWithIcon.copy} + {linkWithIcon.copy} ) @@ -210,7 +215,7 @@ export const withLinkList = (args) => { eiusmod tempor incididunt ut labore et dolore magna aliqua.

- + @@ -223,7 +228,7 @@ export const withLinkList = (args) => { eiusmod tempor incididunt ut labore et dolore magna aliqua.

- + @@ -237,7 +242,7 @@ export const withLinkList = (args) => { {itemHeading} {itemCopy} - {linkWithIcon.copy} + {linkWithIcon.copy} ) diff --git a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.react.tsx b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.react.tsx index 8942cea8e99..4f8bc88eaa0 100644 --- a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.react.tsx +++ b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2021, 2022 + * Copyright IBM Corp. 2021, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,7 +9,7 @@ import { text, select } from '@storybook/addon-knobs'; import React from 'react'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. /* eslint-disable max-len */ @@ -45,6 +45,11 @@ const copy = `Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean - list item 2a.a `; +const iconProps = { + size: 20, + slot: 'icon', +}; + const ctaTypes = { [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL, [`Jump (${CTA_TYPE.JUMP})`]: CTA_TYPE.JUMP, @@ -72,7 +77,7 @@ export const Default = (args) => { href="https://example.com"> Lorem ipsum dolor sit amet - + ) : ( diff --git a/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.react.tsx b/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.react.tsx index a667fedaf69..c520278f28c 100644 --- a/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.react.tsx +++ b/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.react.tsx @@ -1,14 +1,14 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ import React from 'react'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; // eslint-disable-next-line max-len import C4DContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item'; import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading'; @@ -19,6 +19,11 @@ import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components- import { text } from '@storybook/addon-knobs'; import readme from './README.stories.react.mdx'; +const iconProps = { + size: 20, + slot: 'icon', +}; + const card1 = ( @@ -30,7 +35,7 @@ const card1 = ( tempor incididunt ut labore et dolore magna aliqua.

- + ); @@ -42,7 +47,7 @@ const card2 = (

Lorem ipsum dolor sit amet, consectetur adipiscing elit

- + ); diff --git a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.react.tsx b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.react.tsx index 38804edd5e9..697913a2980 100644 --- a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.react.tsx +++ b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -16,11 +16,16 @@ import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-r import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon'; import C4DPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; import { TouchScreen, Pattern, Touch } from '@carbon/pictograms-react'; import { boolean, number, select, text } from '@storybook/addon-knobs'; import readme from './README.stories.react.mdx'; +const iconProps = { + size: 20, + slot: 'icon', +}; + const pictograms = { TouchScreen: 'TouchScreen', Touch: 'Touch', @@ -127,7 +132,7 @@ export const Default = (args) => { {copy} {cta && ( - {linkWithIcon.copy} + {linkWithIcon.copy} )} diff --git a/packages/web-components/src/components/content-section/__stories__/content-section.stories.react.tsx b/packages/web-components/src/components/content-section/__stories__/content-section.stories.react.tsx index cadd51fce6f..5160eaf2b69 100644 --- a/packages/web-components/src/components/content-section/__stories__/content-section.stories.react.tsx +++ b/packages/web-components/src/components/content-section/__stories__/content-section.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -13,7 +13,7 @@ import React from 'react'; // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. /* eslint-disable max-len */ // @ts-ignore -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; import C4DContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item'; import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card'; import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group'; @@ -44,6 +44,11 @@ And here's an intriguing paradox: over time, as our assumptions shift about what For example: optical scan of documents (to create a text file out of an image of text) used to be considered artificial intelligence before it became common in our everyday lives. Observers of the history of AI call this phenomenon "the AI effect." `; +const iconProps = { + size: 20, + slot: 'icon', +}; + const card1 = ( @@ -55,7 +60,7 @@ const card1 = ( tempor incididunt ut labore et dolore magna aliqua.

- + ); @@ -68,7 +73,7 @@ const card2 = (

Lorem ipsum dolor sit amet, consectetur adipiscing elit

- + ); @@ -91,7 +96,7 @@ const Card = ({ {heading} {copy} - + ); @@ -135,27 +140,27 @@ export const Default = (args) => { Learn more about Kubernetes and automating deployment - + Containerization A Complete Guide - + Microservices and container - + Learn more about Kubernetes and automating deployment - + Containerization A Complete Guide - + Microservices and container - + ) : ( diff --git a/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.react.tsx b/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.react.tsx index 75c76666c53..3f784068745 100644 --- a/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.react.tsx +++ b/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,8 +9,7 @@ import { text, boolean, select, number } from '@storybook/addon-knobs'; import React from 'react'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; -import Launch20 from '@carbon/icons-react/es/launch/20.js'; +import { ArrowRight, Launch } from '@carbon/icons-react'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. @@ -37,21 +36,26 @@ import content from '../../cta-section/__stories__/content'; import readme from './README.stories.react.mdx'; import styles from './cta-block.stories.scss'; +const iconProps = { + size: 20, + slot: 'icon', +}; + const iconMap = { - ArrowRight20: , - Launch20: , + ArrowRight: , + Launch: , }; const iconOptions = { - 'Arrow Right': 'ArrowRight20', - 'External Launch': 'Launch20', + 'Arrow Right': 'ArrowRight', + 'External Launch': 'Launch', }; const renderCTA = { text: (renderIcon) => ( CTA text link @@ -59,7 +63,7 @@ const renderCTA = { button: (renderIcon) => ( CTA text link @@ -106,7 +110,7 @@ const renderItems = (item, count) => ( export const Default = (args) => { const { heading, border, copy, renderIcon, cta } = args?.CTABlock ?? {}; - const target = renderIcon === iconMap.Launch20 ? '_blank' : ''; + const target = renderIcon === iconMap.Launch ? '_blank' : ''; const headingComponent = document.querySelector('cds-content-block-heading'); @@ -126,7 +130,7 @@ export const Default = (args) => { export const WithContentItems = (args) => { const { heading, border, copy, renderIcon, cta } = args?.CTABlock ?? {}; const { contentItemType, contentItemCount } = args?.WithContentItems ?? {}; - const target = renderIcon === iconMap.Launch20 ? '_blank' : ''; + const target = renderIcon === iconMap.Launch ? '_blank' : ''; const headingComponent = document.querySelector('cds-content-block-heading'); @@ -160,7 +164,7 @@ WithContentItems.story = { export const WithLinkList = (args) => { const { border, heading, copy, renderIcon, cta } = args?.CTABlock ?? {}; - const target = renderIcon === iconMap.Launch20 ? '_blank' : ''; + const target = renderIcon === iconMap.Launch ? '_blank' : ''; const headingComponent = document.querySelector('cds-content-block-heading'); @@ -177,22 +181,22 @@ export const WithLinkList = (args) => { More ways to explore DevOps - Events + Events - Blogs + Blogs - Training + Training - Developer resources + Developer resources - Research + Research - News + News diff --git a/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.react.tsx b/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.react.tsx index 6a445003897..7b7844fad84 100644 --- a/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.react.tsx +++ b/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -30,11 +30,16 @@ import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/compone import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading'; import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; import readme from './README.stories.react.mdx'; import content from './content'; +const iconProps = { + size: 20, + slot: 'icon', +}; + const contentItemTypeMap = { text: ({ heading, copy, links }) => ( @@ -250,22 +255,22 @@ export const WithLinkList = (args) => { More ways to explore DevOps - Events + Events - Blogs + Blogs - Training + Training - Developer resources + Developer resources - Research + Research - News + News diff --git a/packages/web-components/src/components/cta/__stories__/cta.stories.ts b/packages/web-components/src/components/cta/__stories__/cta.stories.ts index 8d47f1aa6dc..a48d08423bc 100644 --- a/packages/web-components/src/components/cta/__stories__/cta.stories.ts +++ b/packages/web-components/src/components/cta/__stories__/cta.stories.ts @@ -99,10 +99,27 @@ export const Default = (args) => { : ((childCta as HTMLElement).innerText = customVideoTitle); } } + if (ctaType !== 'video') { + const childCta = document.querySelector('c4d-cta')?.shadowRoot!.children[0]; + const headingComponent = + childCta?.shadowRoot?.querySelector('c4d-card-heading') || + childCta?.querySelector('c4d-card-heading'); + headingComponent && !duration + ? (duration = headingComponent!.textContent!.match(/\((.*)\)/)?.pop()) + : null; + if (headingComponent?.textContent) { + duration + ? (headingComponent!.textContent = `${heading} (${duration})`) + : (headingComponent!.textContent = heading); + } + } const childCta = document.querySelector('c4d-cta')?.shadowRoot!.children[0]; childCta?.setAttribute('href', href); - + const childCtaRoot = document.querySelector('c4d-cta')?.shadowRoot; + const ctaFeatured = childCtaRoot?.querySelector('c4d-feature-cta'); + const c4dImage = ctaFeatured?.querySelectorAll('c4d-image') || []; + const c4dHeading = ctaFeatured?.querySelectorAll('c4d-card-heading') || []; return html` ${ctaStyle === 'button' ? html` @@ -153,16 +170,26 @@ export const Default = (args) => { : ''} ${ctaStyle === 'feature' ? html` - ${ctaType !== 'video' - ? html` ${heading} ` + ${c4dHeading?.length < 1 + ? html` + ${ctaType !== 'video' + ? html` + ${heading} + ` + : ''} + ` : ''} - ${ctaType !== CTA_TYPE.VIDEO || customThumbnail + ${c4dImage?.length < 1 ? html` - - + ${ctaType !== CTA_TYPE.VIDEO || customThumbnail + ? html` + + + ` + : ''} ` : ''} Featured products - IBM Cloud Continuous Delivery + IBM Cloud Continuous Delivery - UrbanCode + UrbanCode - View all products + View all products @@ -286,7 +291,7 @@ export const tocContent = ( morbu tristique.

- + @@ -368,10 +373,10 @@ export const tocContent = ( - Secondary Button + Secondary Button - Primary button + Primary button @@ -468,7 +473,7 @@ export const StoryContentNoToC = () => ( Habitant morbu tristique.

- + @@ -546,10 +551,10 @@ export const StoryContentNoToC = () => ( - Secondary Button + Secondary Button - Primary button + Primary button diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts b/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts index 6513798093d..6c792def0a0 100644 --- a/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts +++ b/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -22,7 +22,7 @@ import { import mastheadStyles from '../../masthead/__stories__/masthead.stories.scss'; import { FOOTER_SIZE } from '../../footer/footer'; import { - mastheadLinksV2 as l0Data, + mastheadL0Data as l0Data, mastheadL1Data as l1Data, } from '../../masthead/__stories__/links'; import mockLangList from '../../footer/__stories__/language-list'; diff --git a/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.react.tsx b/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.react.tsx index 40d71f1cd1a..5b208ce84bb 100644 --- a/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.react.tsx +++ b/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -11,7 +11,7 @@ import { boolean, select } from '@storybook/addon-knobs'; import React from 'react'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; // @ts-ignore /* eslint-disable max-len */ import C4DExpressiveModal from '../../../../es/components-react/expressive-modal/expressive-modal.js'; @@ -26,6 +26,11 @@ import { EXPRESSIVE_MODAL_SIZE } from '../defs'; import readme from './README.stories.react.mdx'; import textNullable from '../../../../.storybook/knob-text-nullable'; +const iconProps = { + size: 20, + slot: 'icon', +}; + const sizes = { [`Regular size`]: null, [`One that takes full width (${EXPRESSIVE_MODAL_SIZE.FULL_WIDTH})`]: @@ -64,7 +69,7 @@ export const Default = (args) => { - {buttonContent} + {buttonContent} diff --git a/packages/web-components/src/components/expressive-modal/expressive-modal.ts b/packages/web-components/src/components/expressive-modal/expressive-modal.ts index dfd56b21708..801c4198b9a 100644 --- a/packages/web-components/src/components/expressive-modal/expressive-modal.ts +++ b/packages/web-components/src/components/expressive-modal/expressive-modal.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -530,7 +530,7 @@ class C4DExpressiveModal extends StableSelectorMixin( static get selectorPrimaryFocus() { return ` [data-modal-primary-focus], - ${c4dPrefix}-expressive-modal-footer ${c4dPrefix}-button[kind="primary"], + ${c4dPrefix}-expressive-modal-footer ${c4dPrefix}-button[kind="primary"] `; } diff --git a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.react.tsx b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.react.tsx index a8fcc326a57..bdf25deaf84 100644 --- a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.react.tsx +++ b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -11,7 +11,7 @@ import { text } from '@storybook/addon-knobs'; import React from 'react'; // @ts-ignore -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; import C4DFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card'; import C4DFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer'; import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading'; @@ -27,6 +27,11 @@ import imgXlg2x1 from '../../../../.storybook/storybook-images/assets/1312/fpo-- import readme from './README.stories.react.mdx'; +const iconProps = { + size: 20, + slot: 'icon', +}; + export const Medium = (args) => { const { heading, href } = args?.FeatureCard ?? {}; return ( @@ -34,7 +39,7 @@ export const Medium = (args) => { {heading} - + ); @@ -55,7 +60,7 @@ export const Large = (args) => { {heading}

{copy}

- + ); diff --git a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.react.tsx b/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.react.tsx index 9bdfbf31e4a..ca1d638ffe6 100644 --- a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.react.tsx +++ b/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,8 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs'; import React from 'react'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; -import Download20 from '@carbon/icons-react/es/download/20.js'; +import { ArrowRight, Download } from '@carbon/icons-react'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. @@ -36,6 +35,11 @@ import imgMd16x9 from '../../../../.storybook/storybook-images/assets/480/fpo--1 import readme from './README.stories.react.mdx'; +const iconProps = { + size: 20, + slot: 'icon', +}; + const image = ( Featured products - IBM Cloud Continuous Delivery + IBM Cloud Continuous Delivery - UrbanCode + UrbanCode - View all products + View all products ); diff --git a/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.react.tsx b/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.react.tsx index 43e8e85a78f..1a45384248b 100644 --- a/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.react.tsx +++ b/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,9 +9,7 @@ import React from 'react'; import { text, select, number } from '@storybook/addon-knobs'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; -import ArrowDown20 from '@carbon/icons-react/es/arrow--down/20.js'; -import Pdf20 from '@carbon/icons-react/es/PDF/20.js'; +import { ArrowDown, ArrowRight, Pdf } from '@carbon/icons-react'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore @@ -72,26 +70,31 @@ const navigationWithBreadcrumbs = ( const getAriaLabel = (type) => { switch (type) { - case 'ArrowDown20': + case 'ArrowDown': return 'anchor link'; - case 'Pdf20': + case 'Pdf': return 'pdf link'; default: return ''; } }; +const iconProps = { + size: 20, + slot: 'icon', +}; + const iconMap = { - ArrowRight20: , - ArrowDown20: , - Pdf20: , + ArrowRight: , + ArrowDown: , + Pdf: , }; const iconOptions = { None: null, - 'Arrow Right': 'ArrowRight20', - 'Arrow Down': 'ArrowDown20', - PDF: 'Pdf20', + 'Arrow Right': 'ArrowRight', + 'Arrow Down': 'ArrowDown', + PDF: 'Pdf', }; const Default = (args) => { diff --git a/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.react.tsx b/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.react.tsx index e2ee9fad493..a68f228c412 100644 --- a/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.react.tsx +++ b/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2021, 2023 + * Copyright IBM Corp. 2021, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -22,12 +22,17 @@ import C4DFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react import C4DFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer'; import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image'; import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon'; -import Launch20 from '@carbon/icons-react/es/launch/20'; +import { Launch } from '@carbon/icons-react'; import C4DLeavingIBMContainer from '@carbon/ibmdotcom-web-components/es/components-react/leaving-ibm/leaving-ibm-container'; import mediumImgLg1x1 from '../../../../.storybook/storybook-images/assets/720/fpo--1x1--720x720--004.jpg'; import readme from './README.stories.react.mdx'; import styles from './leaving-ibm.stories.scss'; +const iconProps = { + size: 20, + slot: 'icon', +}; + export const Default = (args) => { const { href, ctaText, ctaType } = args?.LeavingIBM ?? {}; return ( @@ -36,14 +41,14 @@ export const Default = (args) => { {ctaType === 'Link' ? ( {ctaText} - + ) : null} {ctaType === 'Button' ? ( {ctaText} - + ) : null} @@ -52,7 +57,7 @@ export const Default = (args) => { {ctaText}

Lorem ipsum dolor sit

- + ) : null} @@ -65,7 +70,7 @@ export const Default = (args) => { /> {ctaText} - + ) : null} diff --git a/packages/web-components/src/components/link-list-section/__stories__/link-list-section.stories.react.tsx b/packages/web-components/src/components/link-list-section/__stories__/link-list-section.stories.react.tsx index 0919ec46f63..a87c94c5599 100644 --- a/packages/web-components/src/components/link-list-section/__stories__/link-list-section.stories.react.tsx +++ b/packages/web-components/src/components/link-list-section/__stories__/link-list-section.stories.react.tsx @@ -1,14 +1,14 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ import React from 'react'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore @@ -23,6 +23,11 @@ import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-reac import readme from './README.stories.react.mdx'; import textNullable from '../../../../.storybook/knob-text-nullable'; +const iconProps = { + size: 20, + slot: 'icon', +}; + export const Default = (args) => { const { heading } = args?.LinkListSection ?? {}; return ( @@ -31,22 +36,22 @@ export const Default = (args) => { Learn more about Kubernetes and automating deployment{' '} - + - Containerization A Complete Guide + Containerization A Complete Guide - Microservices and containers + Microservices and containers - Learn more about Kubernetes + Learn more about Kubernetes - Containerization A Complete Guide + Containerization A Complete Guide - Microservices and containers + Microservices and containers diff --git a/packages/web-components/src/components/link-list/__stories__/link-list.stories.react.tsx b/packages/web-components/src/components/link-list/__stories__/link-list.stories.react.tsx index f3cf17fb5dc..23068b23415 100644 --- a/packages/web-components/src/components/link-list/__stories__/link-list.stories.react.tsx +++ b/packages/web-components/src/components/link-list/__stories__/link-list.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,7 +9,7 @@ import React from 'react'; import { select } from '@storybook/addon-knobs'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore @@ -32,6 +32,11 @@ import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon'; import textNullable from '../../../../.storybook/knob-text-nullable'; import readme from './README.stories.react.mdx'; +const iconProps = { + size: 20, + slot: 'icon', +}; + const hrefsForType = { [CTA_TYPE.REGULAR]: 'https://www.example.com', [CTA_TYPE.LOCAL]: 'https://www.example.com', @@ -66,11 +71,11 @@ export const Default = (args) => { Tutorial

Learn more about Kubernetes

- +

Containerization A Complete Guide

- + ) : ( @@ -142,12 +147,12 @@ export const Horizontal = (args) => { - Learn more about Kubernetes + Learn more about Kubernetes - Containerization A Complete Guide + Containerization A Complete Guide ) : ( @@ -220,14 +225,14 @@ export const Vertical = (args) => { icon-placement={iconPlacement} href="https://example.com">

- Learn more about Kubernetes + Learn more about Kubernetes

- Containerization A Complete Guide + Containerization A Complete Guide

diff --git a/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.react.tsx b/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.react.tsx index 097b44e5eb8..086a281d024 100644 --- a/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.react.tsx +++ b/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -12,7 +12,7 @@ import React from 'react'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; +import { ArrowRight } from '@carbon/icons-react'; import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer'; import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading'; import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading'; @@ -24,6 +24,11 @@ import logos from './data/logos.js'; import readme from './README.stories.react.mdx'; import textNullable from '../../../../.storybook/knob-text-nullable'; +const iconProps = { + size: 20, + slot: 'icon', +}; + export const Default = (args) => { const { heading, @@ -57,7 +62,7 @@ export const Default = (args) => { {ctaCopy} - + ) : ( diff --git a/packages/web-components/src/components/masthead/__stories__/README.stories.mdx b/packages/web-components/src/components/masthead/__stories__/README.stories.mdx index ffad4eaecc6..641b6ad682d 100644 --- a/packages/web-components/src/components/masthead/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/masthead/__stories__/README.stories.mdx @@ -1,8 +1,6 @@ import { - Preview, Props, Description, - Story, } from '@storybook/addon-docs/blocks'; import contributing from '../../../../../../docs/contributing-license.md'; import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; @@ -13,6 +11,8 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; > displays consistently at the top of each page. It also includes search and > profile services for IBM.com. +## Examples + > 💡 Check our > [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/masthead) > example implementation. @@ -25,92 +25,48 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; [![Edit @carbon/ibmdotcom-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/masthead-l1) -## Getting Started +## Getting started -##### Note: Masthead uses the Carbon White theme by design. Using other themes will not change the Masthead color scheme. +**Note: Masthead uses the Carbon White theme by design. Using other themes will not change the Masthead color scheme.** ### JS (via import) -````javascript -import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-container.js'; -``` - - -### HTML - -```html - -```` - -#### Adopting Masthead v2 with new data endpoint - -###### JS (via CDN): - -```html -// Alpha tag using changes from the feature branch (feat/masthead-v2) - -``` - -###### Markup: - -```html - -``` - -#### Adopting Masthead v2 with Cloud data endpoint - -###### JS (via CDN): - -```html -// Alpha tag using changes from the feature branch (feat/masthead-v2) - +```javascript +import '@carbon/ibmdotcom-web-components/es/components/masthead'; ``` -###### Markup: + + +### HTML +Using the default data provides visitors a consistent navigation experience across web properties. ```html + data-endpoint="/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2.1" +> ``` -#### Setting Platform +## Modifying the masthead +### Setting platform name ```html ``` -#### Setting Platform URL - -The `platformUrl` property accepts a single URL as string or an object with a -specific URL for each locale. This property has to be set via javascript. - -###### Setting a single platform URL: - +### Setting platform URL ```html + id="masthead"> ``` ```javascript -const singleUrl = 'https://www.example.com'; - -document.getElementById('masthead-container').platformUrl = singleUrl; +document.getElementById('masthead').platformUrl = 'https://www.example.com'; ``` -###### Setting multiple platform URLs with an object: +#### Localized platform URLs -With an object, the component will show a specific URL depending on the locale: +The component will show a specific URL depending on the locale if you set the `platformUrl` property to an object, like so: ```javascript const urlObject = { @@ -125,32 +81,74 @@ const urlObject = { }, }; -document.getElementById('masthead-container').platformUrl = urlObject; +document.getElementById('masthead').platformUrl = urlObject; ``` +### Custom navigation + +In order to set custom navigation for the masthead, use JavaScript to set the `navLinks` property of the masthead-composite component. This property should be an array of `L0MenuItem` objects as defined in [the services-store package](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/services-store/src/types/translateAPI.ts). + ```html - + +``` + +```javascript +const customNavData = [ + { + title: 'Basic Link', + titleEnglish: 'Basic Link', + url: 'https://www.example.com/', + }, + { + title: 'Dropdown', + titleEnglish: 'Dropdown', + submenu: [ + { + title: 'Dropdown Link', + titleEnglish: 'Dropdown Link', + url: 'https://www.example.com/demo', + }, + { + title: 'Dropdown Link 2', + titleEnglish: 'Dropdown Link 2', + url: 'https://www.example.com/demo-2', + }, + ], + }, + { + title: 'Megamenu', + titleEnglish: 'Megamenu', + submenu: { + sections: [...], + viewAll: {...}, + }, + }, +]; +document.getElementById('masthead').navLinks = customNavData; ``` -#### Custom Navigation +#### Custom data endpoint -In order to set custom navigation for the masthead, set the custom navigation -data to the `customNavLinks` property of the masthead-container component. +To set a custom endpoint for the translation service to fetch from, set either +the `data-endpoint` attribute like below or `C4D_TRANSLATION_ENDPOINT` +environment variable. -```javascript -const links = [...menu items...]; -document.getElementById('masthead-container').customNavLinks = links; +```html + ``` -#### Using L1 nav +### Using L1 Nav -To use L1 nav, set `l1Data` prop. `l1Data` prop should be a MastheadL1 object, -as defined in packages/services-store/src/actions/translateAPI.ts that contains -the navigation data of L1 nav: +To use L1 nav, set `l1Data` property in JavaScript. It should be a `MastheadL1` object, as defined in [the services-store package](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/services-store/src/types/translateAPI.ts). -```javascipt +```html + +``` + +```javascript const l1Data = { platform: { name: 'Stock Charts', @@ -159,19 +157,8 @@ const l1Data = { menuItems: [...], actions: {...}, } -``` -```html - -``` - -To set a custom endpoint for the translation service to fetch from, set either -the `data-endpoint` attribute like below or `C4D_TRANSLATION_ENDPOINT` -environment variable. - -```html - +document.getElementById('masthead').l1Data = l1Data; ``` ### Setting the active menu item @@ -179,19 +166,23 @@ environment variable. The active menu item receives a unique style treatment to indicate where the current page is within the navigation hierarchy. -##### Manually - -Manually set the active item by using the `selected-menu-item` property. See -[the Props table](#props). +> Note: If no menu items are marked active and the optional `platformUrl` property +has been set, the platform link will be marked active. -##### Automatically +#### Automatically The first menu item whose `href` value matches the browser window's current URL will automatically be marked active if the `selected-menu-item` property has not been set. -If no other menu items are marked active and the optional `platformUrl` property -has been set, the platform link will be marked active. +#### Manually + +Manually set the active item by using the `selected-menu-item` property. Any navigation items with a matching `titleEnglish` value from the `navLinks` data will be marked active. + +```html + +``` ### Understanding the different authentication method types @@ -211,7 +202,9 @@ method. See below for more context on each available value. console API user login response. This method is designed and intended for Cloud Docs (https://cloud.ibm.com) team usage only. -## Using custom search with typeahead API +### Customizing search + +#### Using custom search with typeahead API Using a search API other than the default provided from IBM Search is supported. @@ -226,14 +219,11 @@ As an example, we will be using the IBM Docs API to fetch the data, retrieving an array of result suggestions. ```javascript -async function customTypeaheadApiFunction(searchVal) { - return fetch( - `https://ibmdocs-dev.mybluemix.net/docs/api/v1/suggest?query=${searchVal}&lang=en&categories=&limit=6` - ) - .then((response) => response.json()) - .then((data) => { - let searchResults = [data.hints]; - return searchResults; +async function customTypeaheadApiFunction(query) { + return fetch(`https://www-api.ibm.com/search/typeahead/v1?query=${query}`) + .then(response => response.json()) + .then(data => { + return [data.response.map(result => result[0])]; }); } ``` @@ -241,8 +231,8 @@ async function customTypeaheadApiFunction(searchVal) { To query the current masthead search input, we need to create an event listener to listen for the `c4d-search-with-typeahead-input` event. Once captured, we need to call our asynchronous function to fetch the custom API results based on -the query. Once the results are retrieved, a new custom event -`c4d-custom-typeahead-api-results` needs to be dispatched containing the results +the query. Once the results are retrieved, a new custom event - +`c4d-custom-typeahead-api-results` - needs to be dispatched containing the results for the component to render the search suggestions. ```javascript @@ -254,30 +244,35 @@ document.addEventListener('c4d-search-with-typeahead-input', async (e) => { }); ``` -### Grouped Search +#### Grouped search Some APIs contain grouped results in addition to regular search suggestions, which can also be displayed upon search. As before, create a function that fetches the query and make sure to include a JSON object containing the section's `title` and the array of retrieved section -suggestions in `items`. In the example below, the section `Product pages` is +suggestions in `items`. In the example below, the `Carbon` section is added to the results array. ```javascript -async function customTypeaheadApiFunction(searchVal) { - return fetch( - `https://ibmdocs-dev.mybluemix.net/docs/api/v1/suggest?query=${searchVal}&lang=en&categories=&limit=6` - ) +async function customTypeaheadApiFunction(query) { + return fetch(`https://www-api.ibm.com/search/typeahead/v1?query=${query}`) .then((response) => response.json()) .then((data) => { let searchResults = [ - data.hints, - - // optional category results fetched from API + // Results not including "carbon" + data.response + .filter(result => !result[0].toLowerCase().includes('carbon')) + .map(result => result[0]), + // Optional grouped category results including "carbon" { - title: 'Product pages', - items: data.products, + title: 'Carbon', + items: data.response + .filter(result => result[0].toLowerCase().includes('carbon')) + .map(result => ({ + name: result[0], + href: `https://www.example.com/${encodeURIComponent(result[0])}` + })), }, ]; return searchResults; @@ -289,7 +284,7 @@ As mentioned above, the two events `c4d-search-with-typeahead-input` and `c4d-custom-typeahead-api-results` must be handled for suggestions to be rendered -- the same code for the event listener can be reused. -#### Note +##### Note The API results must match the following structure: @@ -298,19 +293,45 @@ The API results must match the following structure: ['result 1', 'result 2', 'result 3'], { title: 'Example group 1' - items: ['result a', 'result b', 'result c'] + items: [ + { + name: 'result a', + url: 'https://www.example.com/a', + }, + { + name: 'result b', + url: 'https://www.example.com/b', + }, + { + name: 'result c', + url: 'https://www.example.com/c', + }, + ] }, { title: "Example group 2", - items: ['result d', 'result e', 'result f'] + items: [ + { + name: 'result d', + url: 'https://www.example.com/d', + }, + { + name: 'result e', + url: 'https://www.example.com/e', + }, + { + name: 'result f', + url: 'https://www.example.com/f', + }, + ], } ] ``` -Note that only the first array element is necessary to render the basic search -suggestions, the following JSON objects are optional Grouped sections. +The first array element is required to render the basic search +suggestions, and the following JSON objects are optional grouped sections. -## Scoped search +#### Scoped search Scoped searches are also supported, returning results from specifically targeted IBM pages and products. @@ -350,7 +371,7 @@ const scopeParameters = [ ]; ``` -#### Note +##### Note A list of the available scoped categories can be found [here](https://github.ibm.com/digital-marketplace/columbus/blob/master/docs/SCOPED.MD). @@ -389,16 +410,6 @@ document.querySelector('c4d-search-with-typeahead').placeholderFormatter = -For Cloud-specific version of masthead-container, -``, we support two user authentication methods, -via cookie or api. To select between the two, provide the `auth-method` prop -with a value of either 'cookie' or 'api'. - -```html - -``` - ## Stable selectors See diff --git a/packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx b/packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx index 5caf6c3c655..6e7c480f8df 100644 --- a/packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx @@ -1,8 +1,6 @@ import { - Preview, Props, Description, - Story, } from '@storybook/addon-docs/blocks'; import contributing from '../../../../../../docs/contributing-license.md'; import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-composite.js'; @@ -13,6 +11,8 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea > displays consistently at the top of each page. It also includes search and > profile services for IBM.com. +## Examples + > 💡 Check our > [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components-react/masthead) > example implementation. @@ -27,54 +27,45 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea ## Getting Started -##### Note: Masthead uses the Carbon White theme by design. Using other themes will not change the Masthead color scheme. +**Note: Masthead uses the Carbon White theme by design. Using other themes will not change the Masthead color scheme.** -### JS +Using the default data provides visitors a consistent navigation experience across web properties. ```javascript import C4DMastheadContainer from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-container.js'; function App() { - return ; -} -``` - -#### Setting Platform - -```javascript -function App() { - return ; + return ( + + ); } ``` -#### Setting Platform URL +## Modifying the masthead -The `platformUrl` property accepts a single URL as string or an object with a -specific URL for each locale. This property has to be set via javascript. - -###### Setting a single platform URL: +### Setting platform name and URL ```javascript function App() { return ( - ); + platformUrl="https://www.example.com"> + ); } ``` -```javascript -const singleUrl = 'https://www.example.com'; - -document.getElementById('masthead-container').platformUrl = singleUrl; -``` - -###### Setting multiple platform URLs with an object: +#### Localized platform URLs -With an object, the component will show a specific URL depending on the locale: +The `platformUrl` property can also be set to an object to show a specific URL depending on the locale. ```javascript +function App() { + return ; +} + const urlObject = { 'en-US': { url: 'https://www.example.com', @@ -87,60 +78,88 @@ const urlObject = { }, }; -document.getElementById('masthead-container').platformUrl = urlObject; +document.querySelector('c4d-masthead-container').platformUrl = urlObject; ``` +### Custom navigation + +In order to set custom navigation for the masthead, set the `navLinks` property of the masthead-composite component. This property should be an array of `L0MenuItem` objects as defined in [the services-store package](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/services-store/src/types/translateAPI.ts). + ```javascript function App() { - return ( - - ); + return ; } -``` - -#### Custom Navigation -In order to set custom navigation for the masthead, set the custom navigation -data to the `customNavLinks` property of the masthead-container component. +const customNavData = [ + { + title: 'Basic Link', + titleEnglish: 'Basic Link', + url: 'https://www.example.com/', + }, + { + title: 'Dropdown', + titleEnglish: 'Dropdown', + submenu: [ + { + title: 'Dropdown Link', + titleEnglish: 'Dropdown Link', + url: 'https://www.example.com/demo', + }, + { + title: 'Dropdown Link 2', + titleEnglish: 'Dropdown Link 2', + url: 'https://www.example.com/demo-2', + }, + ], + }, + { + title: 'Megamenu', + titleEnglish: 'Megamenu', + submenu: { + sections: [...], + viewAll: {...}, + }, + }, +]; -```javascript -const links = [...menu items...]; -document.getElementById('masthead-container').customNavLinks = links; +document.querySelector('c4d-masthead-container').navLinks = customNavData; ``` -#### Using L1 nav +#### Custom data endpoint -To use L1 nav, set `l1Data` prop. `l1Data` prop should be an object that -contains the navigation data of L1 nav: - -```javascipt -const l1Data = { - platform: { - name: 'Stock Charts', - url: 'https://example.com/', - }, - menuItems: (The nav links), -} -``` +To set a custom endpoint for the translation service to fetch from, set either +the `data-endpoint` attribute like below or `C4D_TRANSLATION_ENDPOINT` +environment variable. ```javascript function App() { - return ; + return ( + + ); } ``` -To set a custom endpoint for the translation service to fetch from, set either -the `data-endpoint` attribute like below or `C4D_TRANSLATION_ENDPOINT` -environment variable. +### Using L1 nav + +To use L1 nav, set `l1Data` property. It should be a `MastheadL1` object, as defined in [the services-store package](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/services-store/src/types/translateAPI.ts). ```javascript function App() { return ( - + ); } + +const l1Data = { + platform: { + name: 'Stock Charts', + url: 'https://example.com/', + }, + menuItems: [...], + actions: {...}, +} + +document.querySelector('c4d-masthead-container').l1Data = l1Data; ``` ### Setting the active menu item @@ -148,21 +167,31 @@ function App() { The active menu item receives a unique style treatment to indicate where the current page is within the navigation hierarchy. -##### Manually - -Manually set the active item by using the `selected-menu-item` property. See -[the Props table](#props). +> Note: If no menu items are marked active and the optional `platformUrl` property +has been set, the platform link will be marked active. -##### Automatically +#### Automatically The first menu item whose `href` value matches the browser window's current URL will automatically be marked active if the `selected-menu-item` property has not been set. -If no other menu items are marked active and the optional `platformUrl` property -has been set, the platform link will be marked active. +#### Manually -## Using custom search with typeahead API +Manually set the active item by using the `selected-menu-item` property. Any navigation items with a matching `titleEnglish` value from the `navLinks` data will be marked active. + +```javascript +function App() { + return ( + + ); +} +``` + +### Customizing search + +#### Using custom search with typeahead API Using a search API other than the default provided from IBM Search is supported. @@ -175,36 +204,38 @@ function App() { ); } +``` -async function customTypeaheadApiFunction(searchVal) { - return fetch( - `https://ibmdocs-dev.mybluemix.net/docs/api/v1/suggest?query=${searchVal}&lang=en&categories=&limit=6` - ) - .then((response) => response.json()) - .then((data) => { - let searchResults = [data.hints]; - return searchResults; +As an example, we will be using the IBM Docs API to fetch the data, retrieving +an array of result suggestions. + +```javascript +async function customTypeaheadApiFunction(query) { + return fetch(`https://www-api.ibm.com/search/typeahead/v1?query=${query}`) + .then(response => response.json()) + .then(data => { + return [data.response.map(result => result[0])]; }); } ``` To query the current masthead search input, we need to create an event listener -to listen for the `cds-search-with-typeahead-input` event. Once captured, we +to listen for the `c4d-search-with-typeahead-input` event. Once captured, we need to call our asynchronous function to fetch the custom API results based on -the query. Once the results are retrieved, a new custom event -`cds-custom-typeahead-api-results` needs to be dispatched containing the results +the query. Once the results are retrieved, a new custom event - +`c4d-custom-typeahead-api-results` - needs to be dispatched containing the results for the component to render the search suggestions. ```javascript -document.addEventListener('cds-search-with-typeahead-input', async (e) => { +document.addEventListener('c4d-search-with-typeahead-input', async (e) => { const results = await customTypeaheadApiFunction(e.detail.value); document.dispatchEvent( - new CustomEvent('cds-custom-typeahead-api-results', { detail: results }) + new CustomEvent('c4d-custom-typeahead-api-results', { detail: results }) ); }); ``` -### Grouped Search +#### Grouped Search Some APIs contain grouped results in addition to regular search suggestions, which can also be displayed upon search. @@ -215,19 +246,24 @@ suggestions in `items`. In the example below, the section `Product pages` is added to the results array. ```javascript -async function customTypeaheadApiFunction(searchVal) { - return fetch( - `https://ibmdocs-dev.mybluemix.net/docs/api/v1/suggest?query=${searchVal}&lang=en&categories=&limit=6` - ) +async function customTypeaheadApiFunction(query) { + return fetch(`https://www-api.ibm.com/search/typeahead/v1?query=${query}`) .then((response) => response.json()) .then((data) => { let searchResults = [ - data.hints, - - // optional category results fetched from API + // Results not including "carbon" + data.response + .filter(result => !result[0].toLowerCase().includes('carbon')) + .map(result => result[0]), + // Optional grouped category results including "carbon" { - title: 'Product pages', - items: data.products, + title: 'Carbon', + items: data.response + .filter(result => result[0].toLowerCase().includes('carbon')) + .map(result => ({ + name: result[0], + href: `https://www.example.com/${encodeURIComponent(result[0])}` + })), }, ]; return searchResults; @@ -235,11 +271,11 @@ async function customTypeaheadApiFunction(searchVal) { } ``` -As mentioned above, the two events `cds-search-with-typeahead-input` and -`cds-custom-typeahead-api-results` must be handled for suggestions to be +As mentioned above, the two events `c4d-search-with-typeahead-input` and +`c4d-custom-typeahead-api-results` must be handled for suggestions to be rendered -- the same code for the event listener can be reused. -#### Note +##### Note The API results must match the following structure: @@ -248,11 +284,37 @@ The API results must match the following structure: ['result 1', 'result 2', 'result 3'], { title: 'Example group 1' - items: ['result a', 'result b', 'result c'] + items: [ + { + name: 'result a', + url: 'https://www.example.com/a', + }, + { + name: 'result b', + url: 'https://www.example.com/b', + }, + { + name: 'result c', + url: 'https://www.example.com/c', + }, + ] }, { title: "Example group 2", - items: ['result d', 'result e', 'result f'] + items: [ + { + name: 'result d', + url: 'https://www.example.com/d', + }, + { + name: 'result e', + url: 'https://www.example.com/e', + }, + { + name: 'result f', + url: 'https://www.example.com/f', + }, + ], } ] ``` @@ -260,7 +322,7 @@ The API results must match the following structure: Note that only the first array element is necessary to render the basic search suggestions, the following JSON objects are optional Grouped sections. -## Scoped search +#### Scoped search Scoped searches are also supported, returning results from specifically targeted IBM pages and products. @@ -300,16 +362,14 @@ const scopeParameters = [ ]; ``` -#### Note +##### Note A list of the available scoped categories can be found [here](https://github.ibm.com/digital-marketplace/columbus/blob/master/docs/SCOPED.MD). The `value` property can either be a single string, or an array of strings. -This array will be passed into the `scopeParameters` property. If using -`lit-html` to render your page, this can be added using `.scopeParameters` (note -the `.`), in order for the array to be processed properly in the component. +This array will be passed into the `scopeParameters` property. ```javascript function App() { @@ -323,7 +383,7 @@ function App() { Alternatively, JavaScript can be used to insert it into the component. ```javascript -document.querySelector('cds-masthead-composite').scopeParameters = +document.querySelector('c4d-masthead-composite').scopeParameters = scopeParameters; ``` @@ -333,7 +393,7 @@ scope. ```javascript const placeholderFormatter = ({ scopeValue }) => `Buscar en ${scopeValue}`; -document.querySelector('cds-search-with-typeahead').placeholderFormatter = +document.querySelector('c4d-search-with-typeahead').placeholderFormatter = placeholderFormatter; ``` @@ -341,7 +401,7 @@ document.querySelector('cds-search-with-typeahead').placeholderFormatter = -[cds-masthead-container props](https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/?path=/docs/components-masthead--with-alternate-logo-and-tooltip#props) +[c4d-masthead-container props](https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/?path=/docs/components-masthead--with-alternate-logo-and-tooltip#props) For Cloud-specific version of masthead-container, ``, we support two user authentication methods, diff --git a/packages/web-components/src/components/masthead/__stories__/cloud-masthead.stories.ts b/packages/web-components/src/components/masthead/__stories__/cloud-masthead.stories.ts deleted file mode 100644 index af4742631a8..00000000000 --- a/packages/web-components/src/components/masthead/__stories__/cloud-masthead.stories.ts +++ /dev/null @@ -1,176 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2021, 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. - */ - -import { html } from 'lit'; -import { select } from '@storybook/addon-knobs'; -import on from '../../../internal/vendor/@carbon/web-components/globals/mixins/on.js'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import inPercy from '@percy-io/in-percy'; -import c4dLeftNav from '../left-nav'; -import '../masthead-container'; -import '../cloud/cloud-masthead-container'; -import styles from './masthead.stories.scss'; -import { mastheadLinks as links } from './links'; -import { - authenticatedProfileItems, - unauthenticatedProfileItems, -} from './profile-items'; -import readme from './README.stories.mdx'; -import textNullable from '../../../../.storybook/knob-text-nullable'; - -/** - * platform knob data - */ -const platformData = { - name: 'IBM Cloud', - url: 'https://www.ibm.com/cloud', -}; - -const urlObject = { - default: { - url: 'https://www.ibm.com/cloud', - }, - 'en-US': { - url: 'https://www.ibm.com/us-en/cloud', - }, - 'fr-FR': { - url: 'https://www.ibm.com/fr-fr/cloud', - }, - 'es-MX': { - url: 'https://www.ibm.com/es-mx/cloud', - }, -}; - -export const Default = (args) => { - const { - hasContact, - hasProfile, - hasSearch, - selectedMenuItem, - searchPlaceholder, - userStatus, - navLinks, - redirectPath, - authMethod, - } = args?.CloudMastheadComposite ?? {}; - const { useMock } = args?.Other ?? {}; - return html` - - ${useMock - ? html` - - ` - : html` - - `} - `; -}; - -export default { - title: 'Experimental/Cloud masthead', - decorators: [ - (story) => { - if (!(window as any)._hPageShow) { - (window as any)._hPageShow = on(window, 'pageshow', () => { - const leftNav = document.querySelector('c4d-left-nav'); - if (leftNav) { - (leftNav as c4dLeftNav).expanded = false; - } - }); - } - return story(); - }, - ], - parameters: { - ...readme.parameters, - 'carbon-theme': { disabled: true }, - percy: { - skip: true, - }, - knobs: { - escapeHTML: false, - CloudMastheadComposite: () => ({ - userStatus: select( - 'The user authenticated status (user-status)', - ['authenticated', 'anonymous'], - 'anonymous' - ), - hasContact: select( - 'Contact us button visibility (has-contact)', - ['true', 'false'], - 'true' - ), - selectedMenuItem: textNullable( - 'selected menu item (selected-menu-item)', - 'Docs' - ), - redirectPath: textNullable('redirect path (redirect-path)', ''), - authMethod: select( - 'auth method (auth-method)', - ['cookie', 'api'], - 'cookie' - ), - }), - }, - props: (() => { - // Lets `` load the nav links - const useMock = - inPercy() || new URLSearchParams(window.location.search).has('mock'); - return { - CloudMastheadComposite: { - navLinks: !useMock ? undefined : links, - }, - Other: { - useMock, - }, - }; - })(), - propsSet: { - default: { - CloudMastheadComposite: { - userStatus: 'anonymous', - hasContact: true, - selectedMenuItem: 'Docs', - redirectPath: '', - authMethod: 'cookie', - navLinks: links, - }, - }, - }, - }, -}; diff --git a/packages/web-components/src/components/masthead/__stories__/links.ts b/packages/web-components/src/components/masthead/__stories__/links.ts index 45716770aa3..75f7b0a763d 100644 --- a/packages/web-components/src/components/masthead/__stories__/links.ts +++ b/packages/web-components/src/components/masthead/__stories__/links.ts @@ -8,7 +8,6 @@ */ import { - MastheadLink, MastheadL1, MastheadLogoData, L0MenuItem, @@ -19,7 +18,7 @@ import { /** * Alternate logo */ -const logoData: MastheadLogoData = { +const mastheadLogoData: MastheadLogoData = { svg: ` Artboard @@ -468,3274 +467,7 @@ const mastheadL1Data: MastheadL1 = { }, }; -/** - * Masthead items. - */ -const mastheadLinks: MastheadLink[] = [ - { - title: 'Products', - titleEnglish: 'Products', - url: '', - hasMenu: true, - hasMegapanel: true, - megamenuLayout: 'tab', - menuSections: [ - { - heading: '', - menuItems: [ - { - title: 'Featured', - titleEnglish: 'Featured', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Featured', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ', - quickLinks: { - title: '', - links: [ - { - title: 'IBM Cloud Pak for Data', - titleEnglish: 'IBM Cloud Pak for Data', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Tools for data analysis, organization and management', - }, - { - title: 'IBM Cloud Pak for Security', - titleEnglish: 'IBM Cloud Pak for Security', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Security auditing, reporting, analysis and governance', - }, - { - title: 'IBM Cloud Pak for Business Automation', - titleEnglish: 'IBM Cloud Pak for Business Automation', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Operations management software with AI insights', - }, - { - title: 'IBM Cloud Pak for Integration', - titleEnglish: 'IBM Cloud Pak for Integration', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Tools to connect all of your apps, data and events', - }, - { - title: 'IBM Cloud Pak for Network Automation', - titleEnglish: 'IBM Cloud Pak for Network Automation', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Management software for telco network operations', - }, - { - title: 'IBM Cloud', - titleEnglish: 'IBM Cloud', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'IBM Z', - titleEnglish: 'IBM Z', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Analytics', - titleEnglish: 'Analytics', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Analytics', - headingUrl: 'https://www.ibm.com/placeholder', - description: 'Aggregate and analyze large datasets', - quickLinks: { - title: '', - links: [ - { - title: 'IBM Cloud Pak for Data', - titleEnglish: 'IBM Cloud Pak for Data', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Tools for data analysis, organization and management', - }, - { - title: 'Business Analytics Enterprise', - titleEnglish: 'Business Analytics Enterprise', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Cognos', - titleEnglish: 'Cognos', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'SPSS', - titleEnglish: 'SPSS', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'cplex', - titleEnglish: 'cplex', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Netezza', - titleEnglish: 'Netezza', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Watson Studio', - titleEnglish: 'Watson Studio', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: 'IDE to build, run and manage AI models', - }, - { - title: 'Planning Analytics', - titleEnglish: 'Planning Analytics', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Watson Discovery', - titleEnglish: 'Watson Discovery', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Search and analytics engine that adapts to custom domains', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Business Automation', - titleEnglish: 'Business Automation', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Business Automation', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - quickLinks: { - title: '', - links: [ - { - title: 'IBM Cloud Pak for Business Automation', - titleEnglish: 'IBM Cloud Pak for Business Automation', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Operations management software with AI insights', - }, - { - title: 'Watson Orchestrate', - titleEnglish: 'Watson Orchestrate', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'IBM RPA', - titleEnglish: 'IBM RPA', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'BlueWorks Live', - titleEnglish: 'BlueWorks Live', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'IBM Operational Decision Manager', - titleEnglish: 'IBM Operational Decision Manager', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'AI & ML', - titleEnglish: 'AI & ML', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'AI & ML', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Use Watson’s AI or build your own machine learning models', - quickLinks: { - title: '', - links: [ - { - title: 'IBM Cloud Pak for Data', - titleEnglish: 'IBM Cloud Pak for Data', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Tools for data analysis, organization and management', - }, - { - title: 'Watson Discovery', - titleEnglish: 'Watson Discovery', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Search and analytics engine that adapts to custom domains', - }, - { - title: 'Spech to Text', - titleEnglish: 'Spech to Text', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'API for real-time speech recognition and transcription', - }, - { - title: 'Text to Speech', - titleEnglish: 'Text to Speech', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: 'API for real-time text to speech conversion', - }, - { - title: 'IBM Cloud Pak for Data', - titleEnglish: 'IBM Cloud Pak for Data', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Tools for data analysis, organization and management', - }, - { - title: 'IBM Cloud Pak for AIOps', - titleEnglish: 'IBM Cloud Pak for AIOps', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'DevOps management tool with AI analysis and recommendations', - }, - { - title: 'IBM Watson Natural Language Understanding', - titleEnglish: 'IBM Watson Natural Language Understanding', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'API for text analysis and metadata extraction', - }, - { - title: 'Watson Studio', - titleEnglish: 'Watson Studio', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: 'IDE to build, run and manage AI models', - }, - { - title: 'IBM Watson Knowledge Catalog', - titleEnglish: 'IBM Watson Knowledge Catalog', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: 'SaaS for AI data management', - }, - { - title: 'Watson Assistant', - titleEnglish: 'Watson Assistant', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Compute & Servers', - titleEnglish: 'Compute & Servers', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Compute & Servers', - headingUrl: 'https://www.ibm.com/placeholder', - description: 'Run workloads on cloud infrastrcture', - quickLinks: { - title: '', - links: [ - { - title: 'IBM Z', - titleEnglish: 'IBM Z', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Power', - titleEnglish: 'Power', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Spectrum Computing', - titleEnglish: 'Spectrum Computing', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'LinuxONE', - titleEnglish: 'LinuxONE', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'IBM Cloud Bare Metal Servers', - titleEnglish: 'IBM Cloud Bare Metal Servers', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'IBM Cloud Virtual Servers', - titleEnglish: 'IBM Cloud Virtual Servers', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Database', - titleEnglish: 'Database', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Database', - headingUrl: 'https://www.ibm.com/placeholder', - description: 'Store, query and analyze structured data', - quickLinks: { - title: '', - links: [ - { - title: 'IBM Cloud Pak for Data', - titleEnglish: 'IBM Cloud Pak for Data', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Tools for data analysis, organization and management', - }, - { - title: 'IBM Informix on Cloud', - titleEnglish: 'IBM Informix on Cloud', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Managed DB for time series, spatial, NoSQL and SQL data', - }, - { - title: 'IBM Cloudant', - titleEnglish: 'IBM Cloudant', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Managed PCI-compliant JSON document store on CouchDB', - }, - { - title: 'IBM Cloud Database', - titleEnglish: 'IBM Cloud Database', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'IBM Cloud Hyper Protect DbaaS', - titleEnglish: 'IBM Cloud Hyper Protect DbaaS', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Managed PostgreSQL and MongoDB for sensitive data', - }, - { - title: 'IMS', - titleEnglish: 'IMS', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Tools for data analysis, organization and management', - }, - { - title: 'Db2', - titleEnglish: 'Db2', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'DevOps', - titleEnglish: 'DevOps', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'DevOps', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Manage infrastructure, environments and deployments', - quickLinks: { - title: '', - links: [ - { - title: 'IBM Cloud Pak for AIOps', - titleEnglish: 'IBM Cloud Pak for AIOps', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'IBM Cloud Continuous Delivery', - titleEnglish: 'IBM Cloud Continuous Delivery', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'UI and CLI based DevOps workflows based on Tekton Pipelines', - }, - { - title: 'IBM Cloud Schematics', - titleEnglish: 'IBM Cloud Schematics', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Managed service to provision resources with terraform templates', - }, - { - title: 'UrbanCode', - titleEnglish: 'UrbanCode', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'IT Automation', - titleEnglish: 'IT Automation', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'IT Automation', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - quickLinks: { - title: '', - links: [ - { - title: 'IBM Cloud Pak for AIOps', - titleEnglish: 'IBM Cloud Pak for AIOps', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'IBM Turbonomic', - titleEnglish: 'IBM Turbonomic', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Software to automate application resource management and optimize costs', - }, - { - title: 'IBM Instana', - titleEnglish: 'IBM Instana', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Middleware', - titleEnglish: 'Middleware', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Middleware', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - quickLinks: { - title: '', - links: [ - { - title: 'IBM Cloud Pak for Integration', - titleEnglish: 'IBM Cloud Pak for Integration', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Tools to connect all of your apps, data and events', - }, - { - title: 'MQ', - titleEnglish: 'MQ', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: 'Managed message broker', - }, - { - title: 'DataPower', - titleEnglish: 'DataPower', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'API Connect', - titleEnglish: 'API Connect', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'App Connect', - titleEnglish: 'App Connect', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Event Streams', - titleEnglish: 'Event Streams', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Aspera', - titleEnglish: 'Aspera', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'WebSphere Application Server', - titleEnglish: 'WebSphere Application Server', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: 'Runtime and SDK for Java applications', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Networking', - titleEnglish: 'Networking', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Networking', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Cloud Pak for Network Automation', - titleEnglish: 'Cloud Pak for Network Automation', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Management software for telco network operations', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Operating Systems', - titleEnglish: 'Operating Systems', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Operating Systems', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'z/OS', - titleEnglish: 'z/OS', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'z/VSE', - titleEnglish: 'z/VSE', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'z/TPF', - titleEnglish: 'z/TPF', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'IBM i', - titleEnglish: 'IBM i', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Operations', - titleEnglish: 'Operations', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Operations', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - quickLinks: { - title: '', - links: [ - { - title: 'Maximo', - titleEnglish: 'Maximo', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'IBM Environmental Intelligence Suite', - titleEnglish: 'IBM Environmental Intelligence Suite', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Tririga', - titleEnglish: 'Tririga', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'IBM Sterling', - titleEnglish: 'IBM Sterling', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Supply Chain Intelligence Suite', - titleEnglish: 'Supply Chain Intelligence Suite', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'IBM Engineering Lifecycle Management', - titleEnglish: 'IBM Engineering Lifecycle Management', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Quantum', - titleEnglish: 'Quantum', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Quantum', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - quickLinks: { - title: '', - links: [ - { - title: 'IBM Quantum Systems', - titleEnglish: 'IBM Quantum Systems', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Qiskit runtime', - titleEnglish: 'Qiskit runtime', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'IBM Quantum Safe', - titleEnglish: 'IBM Quantum Safe', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Storage', - titleEnglish: 'Storage', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Storage', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Spectrum', - titleEnglish: 'Spectrum', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Software for backup & recovery, SDS and analytics.', - }, - { - title: 'FlashSystem', - titleEnglish: 'FlashSystem', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Hybrid and all flash arrays for Block (SAN) storage', - }, - { - title: 'DS8900F', - titleEnglish: 'DS8900F', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: 'Storage for IBM Z and IBM Power Systems', - }, - { - title: 'Elastic Scale Storage', - titleEnglish: 'Elastic Scale Storage', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: 'Distributed file storage for big data and AI', - }, - { - title: 'Cloud Object Storage (On-premises)', - titleEnglish: 'Cloud Object Storage (On-premises)', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: 'Hyperscale object storage in the data center', - }, - { - title: 'SAN Volume Controller', - titleEnglish: 'SAN Volume Controller', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Storage virtualization for large scale workloads', - }, - { - title: 'SAN B-Type Switches', - titleEnglish: 'SAN B-Type Switches', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Support end-to-end NVMe with Gen 7 Fibre Channel', - }, - { - title: 'SAN C-Type Switches', - titleEnglish: 'SAN C-Type Switches', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'High-performance, multiprotocal storage networking', - }, - { - title: 'Tape System', - titleEnglish: 'Tape System', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: 'Tape libraries, cartridges and media', - }, - { - title: 'Cloud File Storage', - titleEnglish: 'Cloud File Storage', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Flash-backed, durable, fast and flexible NFS-based file storage', - }, - { - title: 'Cloud Block Storage', - titleEnglish: 'Cloud Block Storage', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Flash-backed, local disk performance with SAN persistence and durability', - }, - { - title: 'Cloud Object Storage', - titleEnglish: 'Cloud Object Storage', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Flexible, cost-effective and scalable cloud storage for unstructured data', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Security & Identity', - titleEnglish: 'Security & Identity', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Security & Identity', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Trusteer', - titleEnglish: 'Trusteer', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Randori', - titleEnglish: 'Randori', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - target: 'external', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Verify', - titleEnglish: 'Verify', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'OpenPages with Watson', - titleEnglish: 'OpenPages with Watson', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'QRadar SIEM', - titleEnglish: 'QRadar SIEM', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Verify Privilege', - titleEnglish: 'Verify Privilege', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'MaaS360', - titleEnglish: 'MaaS360', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'QRadar SOAR', - titleEnglish: 'QRadar SOAR', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'zSecure', - titleEnglish: 'zSecure', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Guardium', - titleEnglish: 'Guardium', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'QRadar XDR Connect', - titleEnglish: 'QRadar XDR Connect', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'IBM Cloud Pak for Security', - titleEnglish: 'IBM Cloud Pak for Security', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Security auditing, reporting, analysis and governance', - }, - { - title: 'ReaQta', - titleEnglish: 'ReaQta', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'View all products', - titleEnglish: 'View all products', - url: 'https://www.ibm.com/products?lnk=hpmps_buall', - megaPanelViewAll: true, - }, - ], - }, - ], - }, - { - title: 'Solutions', - titleEnglish: 'Solutions', - url: '', - hasMenu: true, - hasMegapanel: true, - megamenuLayout: 'tab', - menuSections: [ - { - heading: '', - menuItems: [ - { - title: 'Automation', - titleEnglish: 'Automation', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Automation', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Workflow', - titleEnglish: 'Workflow', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Enterprise Content Management', - titleEnglish: 'Enterprise Content Management', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Decision Management', - titleEnglish: 'Decision Management', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Tools for data analysis, organization and management', - }, - { - title: 'Application Performance Management', - titleEnglish: 'Application Performance Management', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Security auditing, reporting, analysis and governance', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Data & AI', - titleEnglish: 'Data & AI', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Data & AI', - headingUrl: 'https://www.ibm.com/placeholder', - description: 'Aggregate and analyze large datasets', - quickLinks: { - title: '', - links: [ - { - title: 'Data Fabric', - titleEnglish: 'Data Fabric', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'AI', - titleEnglish: 'AI', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Master Data Management', - titleEnglish: 'Master Data Management', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Tools for data analysis, organization and management', - }, - { - title: 'Data Lake', - titleEnglish: 'Data Lake', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Security auditing, reporting, analysis and governance', - }, - { - title: 'Data Warehouse', - titleEnglish: 'Data Warehouse', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Managed PostgreSQL and MongoDB for sensitive data', - }, - { - title: 'Customer Care', - titleEnglish: 'Customer Care', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Tools to connect all of your apps, data and events', - }, - { - title: 'Data Science', - titleEnglish: 'Data Science', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Operations management software with AI insights', - }, - { - title: 'Data Management', - titleEnglish: 'Data Management', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Management software for telco network operations', - }, - { - title: 'Data Quality', - titleEnglish: 'Data Quality', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Search and analytics engine that adapts to custom domains', - }, - { - title: 'Data Ops', - titleEnglish: 'Data Ops', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Hybrid Cloud', - titleEnglish: 'Hybrid Cloud', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Hybrid Cloud', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Public Cloud', - titleEnglish: 'Public Cloud', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Private Cloud', - titleEnglish: 'Private Cloud', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Edge Computing', - titleEnglish: 'Edge Computing', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Hybrid Cloud Storage', - titleEnglish: 'Hybrid Cloud Storage', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Hybrid Cloud Management', - titleEnglish: 'Hybrid Cloud Management', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Infrastructure', - titleEnglish: 'Infrastructure', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Infrastructure', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'HPC', - titleEnglish: 'HPC', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Cloud Hosting', - titleEnglish: 'Cloud Hosting', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'IT Modernization', - titleEnglish: 'IT Modernization', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Tools for data analysis, organization and management', - }, - { - title: 'Data protection', - titleEnglish: 'Data protection', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Security auditing, reporting, analysis and governance', - }, - { - title: 'Confidential Computing', - titleEnglish: 'Confidential Computing', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Managed PostgreSQL and MongoDB for sensitive data', - }, - { - title: 'Backup and Recovery', - titleEnglish: 'Backup and Recovery', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Archivex', - titleEnglish: 'Archivex', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Industry', - titleEnglish: 'Industry', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Industry', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Aerospace', - titleEnglish: 'Aerospace', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Airline industry', - titleEnglish: 'Airline industry', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Automotive', - titleEnglish: 'Automotive', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Banking and finance', - titleEnglish: 'Banking and finance', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Consumer goods', - titleEnglish: 'Consumer goods', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Education', - titleEnglish: 'Education', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Electronics industry', - titleEnglish: 'Electronics industry', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Energy and utilities', - titleEnglish: 'Energy and utilities', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Federal', - titleEnglish: 'Federal', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Financial services', - titleEnglish: 'Financial services', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Freight and logistics industry', - titleEnglish: 'Freight and logistics industry', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Government', - titleEnglish: 'Government', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Healthcare', - titleEnglish: 'Healthcare', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Hotel industry', - titleEnglish: 'Hotel industry', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Insurance', - titleEnglish: 'Insurance', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Life sciences', - titleEnglish: 'Life sciences', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Manufacturing', - titleEnglish: 'Manufacturing', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Media and entertainment', - titleEnglish: 'Media and entertainment', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Partners & Applications', - titleEnglish: 'Partners & Applications', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Partners & Applications', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'SAP', - titleEnglish: 'SAP', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'VMware', - titleEnglish: 'VMware', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'AWS', - titleEnglish: 'AWS', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'GCP', - titleEnglish: 'GCP', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Azure', - titleEnglish: 'Azure', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Salesforce', - titleEnglish: 'Salesforce', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Adobe', - titleEnglish: 'Adobe', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Nvidia', - titleEnglish: 'Nvidia', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Security', - titleEnglish: 'Security', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Security', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Zero Trust', - titleEnglish: 'Zero Trust', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Data Security', - titleEnglish: 'Data Security', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Security auditing, reporting, analysis and governance', - }, - { - title: 'XDR', - titleEnglish: 'XDR', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Data Security', - titleEnglish: 'Data Security', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Security auditing, reporting, analysis and governance', - }, - { - title: 'Cloud Security', - titleEnglish: 'Cloud Security', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Managed PostgreSQL and MongoDB for sensitive data', - }, - { - title: 'Security Services', - titleEnglish: 'Security Services', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Ransomware', - titleEnglish: 'Ransomware', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Operations management software with AI insights', - }, - { - title: 'Insider Threat', - titleEnglish: 'Insider Threat', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Management software for telco network operations', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Supply Chain', - titleEnglish: 'Supply Chain', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Supply Chain', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Visibility', - titleEnglish: 'Visibility', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'EDI', - titleEnglish: 'EDI', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Blockchain', - titleEnglish: 'Blockchain', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Data Exchange', - titleEnglish: 'Data Exchange', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Supply Chain Services', - titleEnglish: 'Supply Chain Services', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Sustainable Supply Chains', - titleEnglish: 'Sustainable Supply Chains', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Sustainability', - titleEnglish: 'Sustainability', - url: 'https://www.ibm.com/placeholder', - highlighted: true, - megapanelContent: { - headingTitle: 'Sustainability', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Asset Management', - titleEnglish: 'Asset Management', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Operations management software with AI insights', - }, - { - title: 'Facilities Management', - titleEnglish: 'Facilities Management', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Carbon Peformance Engine', - titleEnglish: 'Carbon Peformance Engine', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Regenerative Agriculture', - titleEnglish: 'Regenerative Agriculture', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Renewables Forecasting', - titleEnglish: 'Renewables Forecasting', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Vegetation Management', - titleEnglish: 'Vegetation Management', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'IT Sustainability', - titleEnglish: 'IT Sustainability', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'Sustainable Supply Chains', - titleEnglish: 'Sustainable Supply Chains', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - { - title: 'ESG Reporting', - titleEnglish: 'ESG Reporting', - highlightedLink: false, - url: 'https://www.ibm.com/placeholder', - description: - 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - ], - }, - ], - }, - { - title: 'Consulting', - titleEnglish: 'Consulting', - url: '', - hasMenu: true, - hasMegapanel: true, - megamenuLayout: 'tab', - menuSections: [ - { - heading: '', - menuItems: [ - { - title: 'Overview', - titleEnglish: 'Overview', - url: 'https://www.ibm.com/consulting?lnk=hpmco&lnk2=link', - megapanelContent: { - headingTitle: 'IBM Consulting', - headingUrl: 'https://www.ibm.com/consulting?lnk=hpmco&lnk2=link', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'IBM iX', - titleEnglish: 'IBM iX', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Garage', - titleEnglish: 'Garage', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'X-Force', - titleEnglish: 'X-Force', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'TSS', - titleEnglish: 'TSS', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Lab Services', - titleEnglish: 'Lab Services', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Investments', - titleEnglish: 'Investments', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Announcements', - titleEnglish: 'Announcements', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Client Success', - titleEnglish: 'Client Success', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Careers', - titleEnglish: 'Careers', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Cloud', - titleEnglish: 'Cloud', - url: 'https://www.ibm.com/placeholder', - megapanelContent: { - headingTitle: 'Cloud', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Cloud Strategy', - titleEnglish: 'Cloud Strategy', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Hybrid Cloud', - titleEnglish: 'Hybrid Cloud', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Cloud Migration', - titleEnglish: 'Cloud Migration', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Multicloud', - titleEnglish: 'Multicloud', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Cloud Architecture', - titleEnglish: 'Cloud Architecture', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Managed Cloud Services', - titleEnglish: 'Managed Cloud Services', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Data & Apps', - titleEnglish: 'Data & Apps', - url: 'https://www.ibm.com/placeholder', - megapanelContent: { - headingTitle: 'Data & Apps', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Data and Analytics', - titleEnglish: 'Data and Analytics', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'AI', - titleEnglish: 'AI', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Application Services', - titleEnglish: 'Application Services', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Application Development', - titleEnglish: 'Application Development', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Application Modernization', - titleEnglish: 'Application Modernization', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Mobile', - titleEnglish: 'Mobile', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Application Security', - titleEnglish: 'Application Security', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Experience', - titleEnglish: 'Experience', - url: 'https://www.ibm.com/placeholder', - megapanelContent: { - headingTitle: 'Experience', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Customer Experience', - titleEnglish: 'Customer Experience', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'E-commerce', - titleEnglish: 'E-commerce', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Payments', - titleEnglish: 'Payments', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Operations', - titleEnglish: 'Operations', - url: 'https://www.ibm.com/placeholder', - megapanelContent: { - headingTitle: 'Operations', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Outsourcing', - titleEnglish: 'Outsourcing', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Procurement & Strategic Sourcing', - titleEnglish: 'Procurement & Strategic Sourcing', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Supply Chain', - titleEnglish: 'Supply Chain', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Finance', - titleEnglish: 'Finance', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Marketing', - titleEnglish: 'Marketing', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Talent', - titleEnglish: 'Talent', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Finance', - titleEnglish: 'Finance', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Business Process Reengineering', - titleEnglish: 'Business Process Reengineering', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Security', - titleEnglish: 'Security', - url: 'https://www.ibm.com/placeholder', - megapanelContent: { - headingTitle: 'Security', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Security Strategy', - titleEnglish: 'Security Strategy', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Cloud', - titleEnglish: 'Cloud', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Threat managment', - titleEnglish: 'Threat managment', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'GRC', - titleEnglish: 'GRC', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Data', - titleEnglish: 'Data', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Threat intelligence', - titleEnglish: 'Threat intelligence', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Risk Management', - titleEnglish: 'Risk Management', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Applications', - titleEnglish: 'Applications', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Virtual SOC', - titleEnglish: 'Virtual SOC', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Offensive Security Services', - titleEnglish: 'Offensive Security Services', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Identity and Access', - titleEnglish: 'Identity and Access', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Managed Detection and Response', - titleEnglish: 'Managed Detection and Response', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Penetration Testing', - titleEnglish: 'Penetration Testing', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Managed Security Services', - titleEnglish: 'Managed Security Services', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Adversary Simulation', - titleEnglish: 'Adversary Simulation', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Managed Infrastructure and Endpoint Security', - titleEnglish: - 'Managed Infrastructure and Endpoint Security', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Strategy', - titleEnglish: 'Strategy', - url: 'https://www.ibm.com/placeholder', - megapanelContent: { - headingTitle: 'Strategy', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'Business Strategy', - titleEnglish: 'Business Strategy', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Sustainability', - titleEnglish: 'Sustainability', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'GRC', - titleEnglish: 'GRC', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Risk Management', - titleEnglish: 'Risk Management', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Partners', - titleEnglish: 'Partners', - url: 'https://www.ibm.com/placeholder', - megapanelContent: { - headingTitle: 'Partners', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'SAP', - titleEnglish: 'SAP', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Adobe', - titleEnglish: 'Adobe', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'AWS', - titleEnglish: 'AWS', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Red Hat', - titleEnglish: 'Red Hat', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'SalesForce', - titleEnglish: 'SalesForce', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'ServiceNow', - titleEnglish: 'ServiceNow', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Microsoft', - titleEnglish: 'Microsoft', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Workday', - titleEnglish: 'Workday', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Celonis', - titleEnglish: 'Celonis', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Oracle', - titleEnglish: 'Oracle', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Insights', - titleEnglish: 'Insights', - url: 'https://www.ibm.com/placeholder', - megapanelContent: { - headingTitle: 'Insights', - headingUrl: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - quickLinks: { - title: '', - links: [ - { - title: 'IBV', - titleEnglish: 'IBV', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Cost of a Data Breach', - titleEnglish: 'Cost of a Data Breach', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'X-Force Threat Intelligence', - titleEnglish: 'X-Force Threat Intelligence', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Hybrid Cloud Insight', - titleEnglish: 'Hybrid Cloud Insight', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'AI Insight', - titleEnglish: 'AI Insight', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Sustainability Insight', - titleEnglish: 'Sustainability Insight', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Customer Experience Insight', - titleEnglish: 'Customer Experience Insight', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - { - title: 'Supply Chain Insight', - titleEnglish: 'Supply Chain Insight', - url: 'https://www.ibm.com/placeholder', - description: - 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - ], - }, - ], - }, - { - title: 'Support', - titleEnglish: 'Support', - url: '', - hasMenu: true, - hasMegapanel: true, - megamenuLayout: 'list', - menuSections: [ - { - heading: '', - menuItems: [ - { - title: 'What is...', - titleEnglish: 'What is...', - url: 'https://www.ibm.com/cloud/learn?lnk=hpmls_buwi', - megapanelContent: { - headingTitle: 'What is...', - headingUrl: 'https://www.ibm.com/cloud/learn?lnk=hpmls_buwi', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Artificial intelligence', - titleEnglish: 'Artificial intelligence', - url: 'https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=hpmls_buwi', - }, - { - title: 'Automation', - titleEnglish: 'Automation', - url: 'https://www.ibm.com/topics/automation?lnk=hpmls_buwi', - }, - { - title: 'Blockchain', - titleEnglish: 'Blockchain', - url: 'https://www.ibm.com/topics/what-is-blockchain?lnk=hpmls_buwi', - }, - { - title: 'Business intelligence', - titleEnglish: 'Business intelligence', - url: 'https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi', - }, - { - title: 'Chatbots', - titleEnglish: 'Chatbots', - url: 'https://www.ibm.com/cloud/learn/chatbots-explained?lnk=hpmls_buwi', - }, - { - title: 'Cloud computing', - titleEnglish: 'Cloud computing', - url: 'https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi', - }, - { - title: 'Containerization', - titleEnglish: 'Containerization', - url: 'https://www.ibm.com/cloud/container-service?lnk=hpmls_buwi', - }, - { - title: 'Cybersecurity', - titleEnglish: 'Cybersecurity', - url: 'https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi', - }, - { - title: 'Databases', - titleEnglish: 'Databases', - url: 'https://www.ibm.com/cloud/learn/database?lnk=hpmls_buwi', - }, - { - title: 'DevOps', - titleEnglish: 'DevOps', - url: 'https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi', - }, - { - title: 'Hybrid Cloud', - titleEnglish: 'Hybrid Cloud', - url: 'https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmls_buwi', - }, - { - title: 'Kubernetes', - titleEnglish: 'Kubernetes', - url: 'https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi', - }, - { - title: 'Quantum computing', - titleEnglish: 'Quantum computing', - url: 'https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing?lnk=hpmls_buwi', - }, - { - title: 'Supply chain', - titleEnglish: 'Supply chain', - url: 'https://www.ibm.com/topics/supply-chain-management?lnk=hpmls_buwi', - }, - ], - }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/581adf40f2b008ec/original/megamenu-pictogram-what-is-_.png', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Training', - titleEnglish: 'Training', - url: 'https://www.ibm.com/training/?lnk=hpmls_butr', - megapanelContent: { - headingTitle: 'Training', - headingUrl: 'https://www.ibm.com/training/?lnk=hpmls_butr', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Courses', - titleEnglish: 'Courses', - url: 'https://www.ibm.com/training/search?q=course&lnk=hpmls_butr', - }, - { - title: 'Learning journeys', - titleEnglish: 'Learning journeys', - url: 'https://www.ibm.com/training/journeys?lnk=hpmls_butr', - }, - { - title: 'Professional certifications', - titleEnglish: 'Professional certifications', - url: 'https://www.ibm.com/certify?lnk=hpmls_butr', - }, - { - title: 'Digital learning subscriptions', - titleEnglish: 'Digital learning subscriptions', - url: 'https://www.ibm.com/training/subscriptions?lnk=hpmls_butr', - }, - ], - }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/5540e5627aeb2568/original/megamenu-pictogram-training.png', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Developer education', - titleEnglish: 'Developer education', - url: 'https://developer.ibm.com/?lnk=hpmls_bude', - megapanelContent: { - headingTitle: 'Developer education', - headingUrl: 'https://developer.ibm.com/?lnk=hpmls_bude', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Code patterns', - titleEnglish: 'Code patterns', - url: 'https://developer.ibm.com/patterns/?lnk=hpmls_bude', - }, - { - title: 'Developer community', - titleEnglish: 'Developer community', - url: 'https://developer.ibm.com/community/?lnk=hpmls_bude', - }, - { - title: 'Developer events', - titleEnglish: 'Developer events', - url: 'https://developer.ibm.com/events/?lnk=hpmls_bude', - }, - { - title: 'Open Source @ IBM', - titleEnglish: 'Open Source @ IBM', - url: 'https://ibm.com/opensource?lnk=hpmls_bude', - }, - { - title: 'Technical articles', - titleEnglish: 'Technical articles', - url: 'https://developer.ibm.com/articles?lnk=hpmls_bude', - }, - { - title: 'Tutorials', - titleEnglish: 'Tutorials', - url: 'https://developer.ibm.com/tutorials/?lnk=hpmls_bude', - }, - { - title: 'Videos', - titleEnglish: 'Videos', - url: 'https://developer.ibm.com/videos?lnk=hpmls_bude', - }, - { - title: 'View more Developer education', - titleEnglish: 'View more Developer education', - url: 'https://developer.ibm.com/?lnk=hpmls_bude', - }, - ], - }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/1e651d0f7b539774/original/megamenu-pictogram-developer-education.png', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Documentation', - titleEnglish: 'Documentation', - url: 'https://www.ibm.com/docs/en?lnk=hpmls_budc', - megapanelContent: { - headingTitle: 'Documentation', - headingUrl: 'https://www.ibm.com/docs/en?lnk=hpmls_budc', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'All product documentation', - titleEnglish: 'All product documentation', - url: 'https://www.ibm.com/docs/en?lnk=hpmls_budc', - }, - { - title: 'For products on IBM Cloud', - titleEnglish: 'For products on IBM Cloud', - url: 'https://cloud.ibm.com/docs?lnk=hpmls_budc', - }, - { - title: 'For use cases — IBM Redbooks', - titleEnglish: 'For use cases — IBM Redbooks', - url: 'https://www.redbooks.ibm.com/?lnk=hpmls_budc', - }, - ], - }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/49d529fab45bb565/original/megamenu-pictogram-documentation.png', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Community', - titleEnglish: 'Community', - url: '', - megapanelContent: { - headingTitle: 'Community', - headingUrl: '', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'IBM Developer', - titleEnglish: 'IBM Developer', - url: 'https://developer.ibm.com/?lnk=hpmls_buco', - }, - { - title: 'IBM Community', - titleEnglish: 'IBM Community', - url: 'https://community.ibm.com/community/user/home?lnk=hpmls_buco', - }, - { - title: 'Support forums', - titleEnglish: 'Support forums', - url: 'https://www.ibm.com/mysupport/s/forumshome?lnk=hpmls_buco', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Resources', - titleEnglish: 'Resources', - url: 'https://www.ibm.com/blogs/?lnk=hpmls_bure', - megapanelContent: { - headingTitle: 'Resources', - headingUrl: 'https://www.ibm.com/blogs/?lnk=hpmls_bure', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Blogs & thought leadership', - titleEnglish: 'Blogs & thought leadership', - url: 'https://www.ibm.com/blogs/?lnk=hpmls_bure', - }, - { - title: 'Case studies & client stories', - titleEnglish: 'Case studies & client stories', - url: 'https://www.ibm.com/case-studies?lnk=hpmls_bure', - }, - { - title: 'Upcoming events & webinars', - titleEnglish: 'Upcoming events & webinars', - url: 'https://www.ibm.com/events?lnk=hpmls_bure', - }, - { - title: 'IBM Institute for Business Value', - titleEnglish: 'IBM Institute for Business Value', - url: 'https://www.ibm.com/thought-leadership/institute-business-value?lnk=hpmls_bure', - }, - { - title: 'Licensing & compliance', - titleEnglish: 'Licensing & compliance', - url: 'https://www.ibm.com/about/software-licensing/?lnk=hpmls_bure', - }, - ], - }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/164ef3660bad78a8/original/megamenu-pictogram-resources.png', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Support', - titleEnglish: 'Support', - url: 'https://www.ibm.com/mysupport?lnk=hpmls_busu', - megapanelContent: { - headingTitle: 'Support', - headingUrl: 'https://www.ibm.com/mysupport?lnk=hpmls_busu', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Download fixes, updates & drivers', - titleEnglish: 'Download fixes, updates & drivers', - url: 'https://www.ibm.com/support/fixcentral/?lnk=hpmls_busu', - }, - { - title: 'Download licensed software - Passport Advantage', - titleEnglish: - 'Download licensed software - Passport Advantage', - url: 'https://www.ibm.com/software/passportadvantage/pao_customer.html?lnk=hpmls_busu', - }, - { - title: 'View your cases', - titleEnglish: 'View your cases', - url: 'https://www.ibm.com/mysupport/s/my-cases?lnk=hpmls_busu', - }, - { - title: 'Open a case', - titleEnglish: 'Open a case', - url: 'https://www.ibm.com/mysupport/s/redirecttoopencasepage?lnk=hpmls_busu', - }, - { - title: 'View available support plans', - titleEnglish: 'View available support plans', - url: 'https://www.ibm.com/support/offerings?lnk=hpmls_busu', - }, - { - title: 'View more on Support', - titleEnglish: 'View more on Support', - url: 'https://www.ibm.com/mysupport?lnk=hpmls_busu&lnk2=all', - }, - ], - }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/5b1abed637b01b55/original/megamenu-pictogram-support.png', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Cloud platform support', - titleEnglish: 'Cloud platform support', - url: 'https://www.ibm.com/cloud/support?lnk=hpmls_bucl', - }, - { - title: 'Newsletter subscriptions', - titleEnglish: 'Newsletter subscriptions', - url: 'https://www.ibm.com/subscribe/', - }, - ], - }, - ], - }, - { - title: 'More', - titleEnglish: 'More', - url: '', - hasMenu: true, - hasMegapanel: true, - megamenuLayout: 'list', - menuSections: [ - { - heading: '', - menuItems: [ - { - title: 'Partner with us', - titleEnglish: 'Partners', - url: 'https://www.ibm.com/partners?lnk=hpmex_bupa', - megapanelContent: { - headingTitle: 'Partner with us', - headingUrl: 'https://www.ibm.com/partners?lnk=hpmex_bupa', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'PartnerWorld', - titleEnglish: 'Partner with us — PartnerWorld', - url: 'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa', - }, - { - title: 'Our strategic partnerships', - titleEnglish: 'Our strategic partnerships', - url: 'https://www.ibm.com/alliances?lnk=hpmex_bupa', - }, - { - title: 'Flexible payment plans', - titleEnglish: 'Flexible payment plans', - url: 'https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa', - }, - ], - }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/4075a8633a1137d/original/megamenu-pictogram-partners.png', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'IBM Research', - titleEnglish: 'IBM Research', - url: 'https://research.ibm.com?lnk=hpmex_bure', - megapanelContent: { - headingTitle: 'IBM Research', - headingUrl: 'https://research.ibm.com?lnk=hpmex_bure', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Blog', - titleEnglish: 'Blog', - url: 'https://research.ibm.com/blog?lnk=hpmex_bure', - }, - { - title: 'Publications', - titleEnglish: 'Publications', - url: 'https://research.ibm.com/publications?lnk=hpmex_bure', - }, - { - title: 'Teams', - titleEnglish: 'Teams', - url: 'https://research.ibm.com/teams?lnk=hpmex_bure', - }, - { - title: 'Collaborate with us', - titleEnglish: 'Collaborate with us', - url: 'https://research.ibm.com/collaborate?lnk=hpmex_bure', - }, - ], - }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/5e05b0b234bc3846/original/megamenu-pictogram-ibm-research.png', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'About IBM', - titleEnglish: 'About IBM', - url: 'https://www.ibm.com/about?lnk=hpmex_buab', - megapanelContent: { - headingTitle: 'About IBM', - headingUrl: 'https://www.ibm.com/about?lnk=hpmex_buab', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Annual report', - titleEnglish: 'Annual report', - url: 'https://www.ibm.com/annualreport/?lnk=hpmex_buab', - }, - { - title: 'Career opportunities', - titleEnglish: 'Career opportunities', - url: 'https://www.ibm.com/employment/?lnk=hpmex_buab', - }, - { - title: 'Corporate social responsibility', - titleEnglish: 'Corporate social responsibility', - url: 'https://www.ibm.org?lnk=hpmex_buab', - }, - { - title: 'Diversity & inclusion', - titleEnglish: 'Diversity & inclusion', - url: 'https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab', - }, - { - title: 'Industry analyst reports', - titleEnglish: 'Industry analyst reports', - url: 'https://www.ibm.com/reports/analyst/?lnk=hpmex_buab', - }, - { - title: 'Investor relations', - titleEnglish: 'Investor relations', - url: 'https://www.ibm.com/investor/?lnk=hpmex_buab', - }, - { - title: 'Licensing & compliance', - titleEnglish: 'Licensing & compliance', - url: 'https://www.ibm.com/about/software-licensing/?lnk=hpmex_buab', - }, - { - title: 'News & announcements', - titleEnglish: 'News & announcements', - url: 'https://newsroom.ibm.com?lnk=hpmex_buab', - }, - { - title: 'Thought leadership', - titleEnglish: 'Thought leadership', - url: 'https://www.ibm.com/thought-leadership/?lnk=hpmex_buab', - }, - { - title: 'Security, privacy & trust', - titleEnglish: 'Security, privacy & trust', - url: 'https://www.ibm.com/trust?lnk=hpmex_buab', - }, - ], - }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/220eb8ea8345a4d6/original/megamenu-pictogram-about-ibm.png', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'COVID-19', - titleEnglish: 'COVID-19', - url: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco', - megapanelContent: { - headingTitle: 'COVID-19', - headingUrl: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Business solutions', - titleEnglish: 'Business solutions', - url: 'https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco', - }, - { - title: 'Action guide', - titleEnglish: 'Action guide', - url: 'https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - ], - }, - ], - }, -]; - -const mastheadLinksV2: L0MenuItem[] = [ +const mastheadL0Data: L0MenuItem[] = [ { title: 'Faceted Megamenu', titleEnglish: 'Faceted Megamenu', @@ -5450,644 +2182,11 @@ const mastheadLinksV2: L0MenuItem[] = [ }, { title: 'Basic Link', - titleEnglish: 'Demo Simple', + titleEnglish: 'Basic Link', url: 'https://www.example.com', }, ]; -/** - * Custom masthead link items. - */ -const customLinks: MastheadLink[] = [ - { - title: 'Products & Solutions', - titleEnglish: 'Products & Solutions', - url: '', - hasMenu: true, - hasMegapanel: true, - menuSections: [ - { - heading: 'The essentials', - menuItems: [ - { - title: 'Hybrid Cloud', - titleEnglish: 'Hybrid Cloud', - url: '', - highlighted: true, - megapanelContent: { - headingTitle: 'Hybrid Cloud', - headingUrl: '', - description: - 'Blend cloud and on-premises resources for flexibility and balance', - quickLinks: { - title: '', - links: [ - { - title: 'What is Hybrid Cloud?', - titleEnglish: 'What is Hybrid Cloud?', - highlightedLink: true, - url: 'https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmps_ess', - }, - { - title: 'Hybrid Cloud solutions', - titleEnglish: 'Hybrid Cloud solutions', - highlightedLink: true, - url: 'https://www.ibm.com/cloud/go-hybrid?lnk=hpmps_ess', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Artificial intelligence', - titleEnglish: 'Artificial intelligence', - url: '', - highlighted: true, - megapanelContent: { - headingTitle: 'Artificial intelligence', - headingUrl: '', - description: 'Unlock the value in your organization with Watson', - quickLinks: { - title: '', - links: [ - { - title: 'What is AI?', - titleEnglish: 'What is AI?', - highlightedLink: true, - url: 'https://www.ibm.com/cloud/learn/artificial-intelligence?lnk=hpmps_ess', - }, - { - title: 'AI solutions', - titleEnglish: 'AI solutions', - highlightedLink: true, - url: 'https://www.ibm.com/cloud/ai?lnk=hpmps_ess', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Top products & platforms', - titleEnglish: 'Top products & platforms', - url: 'https://www.ibm.com/products?lnk=hpmps_bupr', - megapanelContent: { - headingTitle: 'Top products & platforms', - headingUrl: 'https://www.ibm.com/products?lnk=hpmps_bupr', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Aspera', - titleEnglish: 'Aspera', - url: 'https://www.ibm.com/products/aspera?lnk=hpmps_bupr', - }, - { - title: 'Cognos', - titleEnglish: 'Cognos', - url: 'https://www.ibm.com/products/cognos-analytics?lnk=hpmps_bupr', - }, - { - title: 'Db2', - titleEnglish: 'Db2', - url: 'https://www.ibm.com/analytics/db2?lnk=hpmps_bupr', - }, - { - title: 'IBM Cloud', - titleEnglish: 'IBM Cloud', - url: 'https://www.ibm.com/cloud?lnk=hpmps_bupr', - }, - { - title: 'IBM Cloud Paks', - titleEnglish: 'IBM Cloud Paks', - url: 'https://www.ibm.com/cloud/paks?lnk=hpmps_bupr', - }, - { - title: 'IBM Sterling', - titleEnglish: 'IBM Sterling', - url: 'https://www.ibm.com/supply-chain/sterling?lnk=hpmps_bupr', - }, - { - title: 'IBM Z', - titleEnglish: 'IBM Z', - url: 'https://www.ibm.com/it-infrastructure/z?lnk=hpmps_bupr', - }, - { - title: 'Red Hat OpenShift', - titleEnglish: 'Red Hat OpenShift', - url: 'https://www.ibm.com/cloud/openshift?lnk=hpmps_bupr', - }, - { - title: 'SPSS Statistics', - titleEnglish: 'SPSS Statistics', - url: 'https://www.ibm.com/products/spss-statistics?lnk=hpmps_bupr', - }, - { - title: 'Watson', - titleEnglish: 'Watson', - url: 'https://www.ibm.com/watson?lnk=hpmps_bupr', - }, - { - title: 'WebSphere', - titleEnglish: 'WebSphere', - url: 'https://www.ibm.com/cloud/websphere-application-server?lnk=hpmps_bupr', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Solutions', - titleEnglish: 'Solutions', - url: '', - megapanelContent: { - headingTitle: 'Solutions', - headingUrl: '', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Artificial intelligence', - titleEnglish: 'Artificial intelligence', - url: 'https://www.ibm.com/cloud/ai?lnk=hpmps_buai', - }, - { - title: 'Blockchain', - titleEnglish: 'Blockchain', - url: 'https://www.ibm.com/blockchain?lnk=hpmps_bubc', - }, - { - title: 'Business automation', - titleEnglish: 'Business automation', - url: 'https://www.ibm.com/cloud/automation?lnk=hpmps_buau', - }, - { - title: 'Business operations', - titleEnglish: 'Business operations', - url: 'https://www.ibm.com/business-operations?lnk=hpmps_buop', - }, - { - title: 'Cloud computing', - titleEnglish: 'Cloud computing', - url: 'https://www.ibm.com/cloud?lnk=hpmps_bucl', - }, - { - title: 'Data & Analytics', - titleEnglish: 'Data & Analytics', - url: 'https://www.ibm.com/analytics?lnk=hpmps_buda', - }, - { - title: 'Hybrid Cloud', - titleEnglish: 'Hybrid Cloud', - url: 'https://www.ibm.com/cloud/hybrid?lnk=hpmps_bucl', - }, - { - title: 'IT infrastructure', - titleEnglish: 'IT infrastructure', - url: 'https://www.ibm.com/it-infrastructure?lnk=hpmps_buit', - }, - { - title: 'Quantum computing', - titleEnglish: 'Quantum computing', - url: 'https://www.ibm.com/quantum-computing/?lnk=hpmps_qc', - }, - { - title: 'Security', - titleEnglish: 'Security', - url: 'https://www.ibm.com/security?lnk=hpmps_buse', - }, - { - title: 'Supply chain', - titleEnglish: 'Supply chain', - url: 'https://www.ibm.com/supply-chain?lnk=hpmps_busc', - }, - { - title: 'COVID-19 solutions', - titleEnglish: 'COVID-19 solutions', - url: 'https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmps_buco', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Industries', - titleEnglish: 'Industries', - url: 'https://www.ibm.com/industries?lnk=hpmps_buin', - megapanelContent: { - headingTitle: 'Industries', - headingUrl: 'https://www.ibm.com/industries?lnk=hpmps_buin', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Aerospace & defense', - titleEnglish: 'Aerospace & defense', - url: 'https://www.ibm.com/industries/aerospace-defense?lnk=hpmps_buin', - }, - { - title: 'Automotive', - titleEnglish: 'Automotive', - url: 'https://www.ibm.com/industries/automotive?lnk=hpmps_buin', - }, - { - title: 'Banking & financial markets', - titleEnglish: 'Banking & financial markets', - url: 'https://www.ibm.com/industries/banking-financial-markets?lnk=hpmps_buin', - }, - { - title: 'Education', - titleEnglish: 'Education', - url: 'https://www.ibm.com/industries/education?lnk=hpmps_buin', - }, - { - title: 'Electronics', - titleEnglish: 'Electronics', - url: 'https://www.ibm.com/industries/electronics?lnk=hpmps_buin', - }, - { - title: 'Energy & utilities', - titleEnglish: 'Energy & utilities', - url: 'https://www.ibm.com/industries/energy?lnk=hpmps_buin', - }, - { - title: 'Government', - titleEnglish: 'Government', - url: 'https://www.ibm.com/industries/government?lnk=hpmps_buin', - }, - { - title: 'Healthcare', - titleEnglish: 'Healthcare', - url: 'https://www.ibm.com/industries/healthcare?lnk=hpmps_buin', - }, - { - title: 'Insurance', - titleEnglish: 'Insurance', - url: 'https://www.ibm.com/industries/insurance?lnk=hpmps_buin', - }, - { - title: 'Life sciences', - titleEnglish: 'Life sciences', - url: 'https://www.ibm.com/industries/lifesciences?lnk=hpmps_buin', - }, - { - title: 'View all Industries', - titleEnglish: 'View all Industries', - url: 'https://www.ibm.com/industries?lnk=hpmps_buin#2546397', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'View all products', - titleEnglish: 'View all products', - url: 'https://www.ibm.com/products?lnk=hpmps_buall', - megaPanelViewAll: true, - }, - ], - }, - ], - }, - { - title: 'Lorem ipsum dolor sit amet', - titleEnglish: 'Lorem ipsum dolor sit amet', - url: '', - hasMenu: true, - hasMegapanel: true, - menuSections: [ - { - heading: 'Explore', - menuItems: [ - { - title: 'Link 1', - url: '', - megapanelContent: { - headingTitle: '', - headingUrl: '', - description: '', - quickLinks: { - title: 'Title', - links: [ - { - title: 'Subnav 1', - url: '', - }, - { - title: 'Subnav 2', - url: '', - }, - { - title: 'Subnav 3', - url: '', - }, - { - title: 'Subnav 4', - url: '', - }, - ], - }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', - }, - }, - }, - ], - }, - ], - }, - { - title: 'Consectetur adipiscing elit', - titleEnglish: 'Consectetur adipiscing elit', - url: '', - hasMenu: true, - menuSections: [ - { - heading: '', - menuItems: [ - { - title: 'Link 1', - titleEnglish: 'Link 1', - url: '', - }, - { - title: 'Menu dropdown item with extra long text', - titleEnglish: 'Menu dropdown item with extra long text', - url: '', - }, - { - title: 'Financing', - url: 'https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn', - megapanelContent: { - headingTitle: 'Financing', - headingUrl: - 'https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn', - description: 'Funding options that fit your business', - quickLinks: { - title: 'Quicklinks', - links: [ - { - title: 'Subnav 1', - url: '', - }, - { - title: 'Subnav 2', - url: '', - }, - { - title: 'Subnav 3', - url: '', - }, - { - title: 'Subnav 4', - url: '', - }, - ], - }, - feature: { - heading: - 'Cloud financing strategies that work for your business', - imageUrl: - 'https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1', - linkTitle: - 'Committed to cloud? Make the most of your cash flow.', - linkUrl: - 'https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn', - }, - }, - }, - ], - }, - ], - }, - { - title: 'Nulla quis sem at nibh elementum imperdiet', - titleEnglish: 'Nulla quis sem at nibh elementum imperdiet', - url: 'https://www.ibm.com/industries?lnk=min', - hasMenu: false, - hasMegapanel: false, - menuSections: [], - }, - { - title: 'Fusce nec tellus sed augue semper porta', - titleEnglish: 'Fusce nec tellus sed augue semper porta', - url: '', - hasMenu: true, - hasMegapanel: true, - menuSections: [ - { - heading: '', - menuItems: [ - { - title: 'IBM Developer', - url: 'https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn', - megapanelContent: { - headingTitle: 'IBM Developer', - headingUrl: 'https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn', - description: '', - quickLinks: { - title: 'Quicklinks', - links: [ - { - title: 'Subnav 1', - url: '', - }, - { - title: 'Subnav 2', - url: '', - }, - { - title: 'Subnav 3', - url: '', - }, - { - title: 'Subnav 4', - url: '', - }, - ], - }, - feature: { - heading: 'IBM Developer newsletters', - imageUrl: - 'https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg', - linkTitle: - 'Technical info on popular software development topics, including AI, Blockchain, Java and more', - linkUrl: - 'https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn', - }, - }, - }, - { - title: 'Blockchain', - url: 'https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn', - megapanelContent: { - headingTitle: 'Blockchain', - headingUrl: - 'https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn', - description: '', - quickLinks: { - title: 'Quicklinks', - links: [ - { - title: 'Subnav 1', - url: '', - }, - { - title: 'Subnav 2', - url: '', - }, - { - title: 'Subnav 3', - url: '', - }, - { - title: 'Subnav 4', - url: '', - }, - ], - }, - feature: { - heading: 'Blockchain 101', - imageUrl: - 'https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3', - linkTitle: - 'Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan', - linkUrl: - 'https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn', - }, - }, - }, - { - title: 'Containers', - url: 'https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn', - megapanelContent: { - headingTitle: 'Containers', - headingUrl: - 'https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn', - description: '', - quickLinks: { - title: 'Quicklinks', - links: [ - { - title: 'Code patterns', - url: 'https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn', - }, - { - title: 'Tutorials', - url: 'https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn', - }, - { - title: 'Events', - url: 'https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn', - }, - ], - }, - feature: { - heading: 'Make sense of Kubernetes', - imageUrl: - 'https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2', - linkTitle: 'Deploy a simple Python application with Kubernetes', - linkUrl: - 'https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn', - }, - }, - }, - { - title: 'Analytics', - url: 'https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn', - megapanelContent: { - headingTitle: 'Analytics', - headingUrl: - 'https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn', - description: '', - quickLinks: { - title: 'Quicklinks', - links: [ - { - title: 'Code patterns', - url: 'https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn', - }, - { - title: 'Tutorials', - url: 'https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn', - }, - { - title: 'Events', - url: 'https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn', - }, - { - title: 'Developer community', - url: 'https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn', - }, - ], - }, - feature: { - heading: 'Train your data no matter where it lives', - imageUrl: - 'https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg', - linkTitle: - 'Easily and securely connect to your data source for initial model training and continuous learning', - linkUrl: - 'https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn', - }, - }, - }, - ], - }, - ], - }, - { - title: 'Sed cursus ante dapibus diam', - titleEnglish: 'Sed cursus ante dapibus diam', - url: 'https://www.ibm.com/support/home/?lnk=msu_usen', - hasMenu: false, - hasMegapanel: false, - menuSections: [], - }, -]; - /* eslint-enable max-len */ -export { - mastheadLinks, - customLinks, - logoData, - mastheadL1Data, - mastheadLinksV2, -}; -export default mastheadLinks; +export { mastheadLogoData, mastheadL1Data, mastheadL0Data }; diff --git a/packages/web-components/src/components/masthead/__stories__/masthead.stories.react.tsx b/packages/web-components/src/components/masthead/__stories__/masthead.stories.react.tsx index 90f647f3500..13d70278428 100644 --- a/packages/web-components/src/components/masthead/__stories__/masthead.stories.react.tsx +++ b/packages/web-components/src/components/masthead/__stories__/masthead.stories.react.tsx @@ -1,19 +1,19 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ -import { select } from '@storybook/addon-knobs'; +import { boolean, select } from '@storybook/addon-knobs'; import React from 'react'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore import C4DMastheadContainer from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-container'; -import { mastheadL1Data, logoData } from './links'; +import { mastheadL0Data, mastheadL1Data, mastheadLogoData } from './links'; import { C4D_CUSTOM_PROFILE_LOGIN } from '../../../globals/internal/feature-flags'; import { UNAUTHENTICATED_STATUS } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI'; @@ -54,17 +54,24 @@ const scopeParameters = [ }, ]; -async function customTypeaheadApiFunction(searchVal) { - return fetch( - `https://ibmdocs-dev.mybluemix.net/docs/api/v1/suggest?query=${searchVal}&lang=undefined&categories=&limit=6` - ) +async function customTypeaheadApiFunction(query) { + return fetch(`https://www-api.ibm.com/search/typeahead/v1?query=${query}`) .then((response) => response.json()) .then((data) => { - const searchResults = [ - data.hints, + let searchResults = [ + // Results not including "carbon" + data.response + .filter((result) => !result[0].toLowerCase().includes('carbon')) + .map((result) => result[0]), + // Optional grouped category results including "carbon" { - title: 'Product pages', - items: data.products, + title: 'Carbon', + items: data.response + .filter((result) => result[0].toLowerCase().includes('carbon')) + .map((result) => ({ + name: result[0], + href: `https://www.example.com/${encodeURIComponent(result[0])}`, + })), }, ]; return searchResults; @@ -79,22 +86,29 @@ export const Default = (args) => { selectedMenuItem, searchPlaceholder, userStatus, - navLinks, + useMock, } = args?.MastheadComposite ?? {}; if (!hasSearch) { setTimeout(() => { document - .querySelector('cds-masthead-container') + .querySelector('c4d-masthead-container') ?.removeAttribute('has-search'); }, 1000); } + if (useMock) { + setTimeout(() => { + const masthead = document.querySelector('c4d-masthead-container'); + if (masthead) { + (masthead as any).navLinks = mastheadL0Data; + } + }, 1000); + } return ( @@ -103,13 +117,13 @@ export const Default = (args) => { export const WithCustomTypeahead = () => { document.documentElement.addEventListener( - 'cds-search-with-typeahead-input', + 'c4d-search-with-typeahead-input', async (e) => { const results = await customTypeaheadApiFunction( (e as CustomEvent).detail.value ); document.dispatchEvent( - new CustomEvent('cds-custom-typeahead-api-results', { detail: results }) + new CustomEvent('c4d-custom-typeahead-api-results', { detail: results }) ); } ); @@ -155,11 +169,16 @@ searchOpenOnload.story = { export const withPlatform = (args) => { const { platform, platformUrl } = args?.WithPlatform ?? {}; - return ( - - ); + if (platformUrl) { + setTimeout(() => { + const masthead = document.querySelector('c4d-masthead-container'); + if (masthead) { + (masthead as any).platformUrl = platformUrl; + } + }, 1000); + } + + return ; }; withPlatform.story = { @@ -180,10 +199,17 @@ withPlatform.story = { export const withL1 = (args) => { const { selectedMenuItem } = args?.MastheadComposite ?? {}; + + setTimeout(() => { + const masthead = document.querySelector('c4d-masthead-container'); + if (masthead) { + (masthead as any).l1Data = mastheadL1Data; + } + }, 1000); + return ( + selected-menu-item={selectedMenuItem}> ); }; @@ -204,12 +230,16 @@ withL1.story = { export const withAlternateLogoAndTooltip = (args) => { const { mastheadLogo } = args?.MastheadComposite ?? {}; - return ( - - ); + if (mastheadLogo === 'alternateWithTooltip') { + setTimeout(() => { + const masthead = document.querySelector('c4d-masthead-container'); + if (masthead) { + (masthead as any).logoData = mastheadLogoData; + } + }, 1000); + } + + return ; }; withAlternateLogoAndTooltip.story = { @@ -231,10 +261,14 @@ withAlternateLogoAndTooltip.story = { }; export const WithScopedSearch = () => { - return ( - - ); + setTimeout(() => { + const masthead = document.querySelector('c4d-masthead-container'); + if (masthead) { + (masthead as any).scopeParameters = scopeParameters; + } + }, 1000); + + return ; }; WithScopedSearch.story = { @@ -287,6 +321,7 @@ export default { 'custom profile login url (customProfileLogin)', 'https://www.example.com/' ), + useMock: boolean('use mock nav data', false), }), }, }, diff --git a/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts b/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts index f1bd3502861..40589463e7b 100644 --- a/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts +++ b/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -16,7 +16,7 @@ import c4dLeftNav from '../left-nav'; import '../masthead-container'; import styles from './masthead.stories.scss'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { mastheadLinksV2 as links, mastheadL1Data, logoData } from './links'; +import { mastheadL0Data, mastheadL1Data, mastheadLogoData } from './links'; import { UNAUTHENTICATED_STATUS, MASTHEAD_AUTH_METHOD, @@ -110,7 +110,7 @@ export const Default = (args) => { has-profile="${hasProfile}" has-search="${hasSearch}" has-contact="${hasContact}" - .navLinks="${links}" + .l0Data="${mastheadL0Data}" .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}" .unauthenticatedProfileItems="${ifNonEmpty( unauthenticatedProfileItems @@ -133,51 +133,6 @@ export const Default = (args) => { `; }; -export const withCloudData = (args) => { - const { - customProfileLogin, - hasSearch, - selectedMenuItem, - searchPlaceholder, - useMock, - } = args?.MastheadComposite ?? {}; - - return html` - - ${useMock - ? html` - - ` - : html` - - `} - `; -}; - export const WithCustomTypeahead = (args) => { const { useMock } = args?.MastheadComposite ?? {}; @@ -200,7 +155,7 @@ export const WithCustomTypeahead = (args) => { ${useMock ? html` { ${useMock ? html` { ? html` { ${useMock ? html` { ${useMock ? html` { unauthenticatedProfileItems )}" .logoData="${mastheadLogo === 'alternateWithTooltip' - ? logoData + ? mastheadLogoData : null}"> ` : html` `} `; @@ -474,7 +429,7 @@ export const WithScopedSearch = (args) => { ${useMock ? html` { const { customProfileLogin, @@ -66,7 +69,6 @@ export const Default = (args) => { searchPlaceholder, hasProfile, hasSearch, - navLinks, } = args?.MastheadComposite ?? {}; const { useMock } = args?.Other ?? {}; @@ -85,7 +87,7 @@ export const Default = (args) => { .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" - .navLinks="${navLinks}" + .l0Data="${mastheadL0Data}" .unauthenticatedProfileItems="${ifDefined( unauthenticatedProfileItems )}" @@ -99,7 +101,7 @@ export const Default = (args) => { selected-menu-item="${ifDefined(selectedMenuItem)}" user-status="${ifDefined(userStatus)}" searchPlaceholder="${ifDefined(searchPlaceholder)}" - .navLinks="${navLinks}" + data-endpoint=${dataEndpoint} ?has-profile="${hasProfile}" ?has-search="${hasSearch}" custom-profile-login="${customProfileLogin}" @@ -163,9 +165,6 @@ export default { const useMock = inPercy() || new URLSearchParams(window.location.search).has('mock'); return { - MastheadComposite: { - navLinks: !useMock ? undefined : links, - }, Other: { useMock, }, @@ -181,7 +180,6 @@ export default { selectedMenuItem: 'Services & Consulting', userStatus: userStatuses.unauthenticated, customProfileLogin: 'https://www.example.com/', - navLinks: links, }, }, }, diff --git a/packages/web-components/src/components/masthead/__tests__/cloud-masthead-composite.test.ts b/packages/web-components/src/components/masthead/__tests__/cloud-masthead-composite.test.ts deleted file mode 100644 index 4484b8b5a4c..00000000000 --- a/packages/web-components/src/components/masthead/__tests__/cloud-masthead-composite.test.ts +++ /dev/null @@ -1,52 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2021, 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. - */ - -import { html, render } from 'lit/html.js'; - -describe('c4d-cloud-masthead-composite', function () { - describe('Rendering Cloud-specific global bar', function () { - it('should not render cloud profile when unauthenticated', async function () { - render( - html` - - `, - document.body - ); - await Promise.resolve(); - const cloudMastheadComposite = document.body.querySelector( - 'c4d-cloud-masthead-composite' - ); - expect( - cloudMastheadComposite?.shadowRoot?.querySelector( - 'c4d-cloud-masthead-profile' - ) - ).toBeNull(); - }); - - it('should render cloud profile when authenticated', async function () { - render( - html` - - `, - document.body - ); - await Promise.resolve(); - const cloudMastheadComposite = document.body.querySelector( - 'c4d-cloud-masthead-composite' - ); - expect( - cloudMastheadComposite?.shadowRoot?.querySelector( - 'c4d-cloud-masthead-profile' - ) - ).not.toBeNull(); - }); - }); -}); diff --git a/packages/web-components/src/components/masthead/__tests__/masthead-composite.test.ts b/packages/web-components/src/components/masthead/__tests__/masthead-composite.test.ts index 5e260271550..57e73da330f 100644 --- a/packages/web-components/src/components/masthead/__tests__/masthead-composite.test.ts +++ b/packages/web-components/src/components/masthead/__tests__/masthead-composite.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -23,13 +23,13 @@ const template = (props?) => { language="${ifDefined(language)}" user-status="${ifDefined(userStatus)}" .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}" - .navLinks="${navLinks}" + .l0Data="${navLinks}" .unauthenticatedProfileItems="${ifDefined(unauthenticatedProfileItems)}"> `; }; -describe('cds-masthead-composite', function () { +describe('c4d-masthead-composite', function () { const events = new EventManager(); describe('Rendering global bar', function () { @@ -63,7 +63,7 @@ describe('cds-masthead-composite', function () { const mastheadComposite = document.body.querySelector( 'c4d-masthead-composite' ); - expect(mastheadComposite!.querySelector('cds-top-nav')).toBeNull(); + expect(mastheadComposite!.querySelector('c4d-top-nav')).toBeNull(); }); }); diff --git a/packages/web-components/src/components/masthead/__tests__/masthead.steps.js b/packages/web-components/src/components/masthead/__tests__/masthead.steps.js index a6427b810eb..03f718ab66f 100644 --- a/packages/web-components/src/components/masthead/__tests__/masthead.steps.js +++ b/packages/web-components/src/components/masthead/__tests__/masthead.steps.js @@ -1,13 +1,13 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ -describe('cds-masthead-*', () => { +describe('c4d-masthead-*', () => { describe('With wide screen', () => { beforeEach(async () => { await page.setViewportSize({ width: 1280, height: 720 }); @@ -18,7 +18,7 @@ describe('cds-masthead-*', () => { it('should support clicking the logo', async () => { const promiseNavigation = page.waitForNavigation(); - await page.click('cds-masthead-logo'); + await page.click('c4d-masthead-logo'); await promiseNavigation; expect(await page.evaluate(() => window.location.href)).toMatch( 'https://www.ibm.com' @@ -26,9 +26,9 @@ describe('cds-masthead-*', () => { }); it('should support navigating in profile menu', async () => { - await page.click('cds-masthead-profile'); + await page.click('c4d-masthead-profile'); const promiseNavigation = page.waitForNavigation(); - await page.click('cds-masthead-profile-item[href*="authorize"]'); + await page.click('c4d-masthead-profile-item[href*="authorize"]'); await promiseNavigation; expect(await page.evaluate(() => window.location.href)).toMatch( 'https://idaas.iam.ibm.com' @@ -36,9 +36,9 @@ describe('cds-masthead-*', () => { }); it('should support navigating in top nav menu', async () => { - await page.click('cds-megamenu-top-nav-menu:first-of-type'); + await page.click('c4d-megamenu-top-nav-menu:first-of-type'); const promiseNavigation = page.waitForNavigation(); - await page.click('cds-megamenu-link-with-icon:first-of-type'); + await page.click('c4d-megamenu-link-with-icon:first-of-type'); await promiseNavigation; expect(await page.evaluate(() => window.location.href)).toMatch( 'https://www.ibm.com' @@ -46,14 +46,14 @@ describe('cds-masthead-*', () => { }); it('should support showing/hiding the search box', async () => { - await page.click('cds-masthead-search button[part="open-button"]'); + await page.click('c4d-masthead-search button[part="open-button"]'); await expect(page).toHaveSelector( - 'cds-masthead-search input[part="search-input"]', + 'c4d-masthead-search input[part="search-input"]', { state: 'visible' } ); - await page.click('cds-masthead-search button[part="close-button"]'); + await page.click('c4d-masthead-search button[part="close-button"]'); await expect(page).toHaveSelector( - 'cds-masthead-search input[part="search-input"]', + 'c4d-masthead-search input[part="search-input"]', { state: 'hidden' } ); }); @@ -68,10 +68,10 @@ describe('cds-masthead-*', () => { }); it('should support navigating in left nav menu', async () => { - await page.click('cds-masthead-menu-button'); - await page.click('cds-left-nav-menu[title*="Products"]'); - await page.click('cds-left-nav-menu[title="Industries"]'); - await page.click('cds-left-nav-menu-item[title="Healthcare"]'); + await page.click('c4d-masthead-menu-button'); + await page.click('c4d-left-nav-menu[title*="Products"]'); + await page.click('c4d-left-nav-menu[title="Industries"]'); + await page.click('c4d-left-nav-menu-item[title="Healthcare"]'); expect(await page.evaluate(() => window.location.href)).toMatch( 'https://www.ibm.com/industries/healthcare' ); diff --git a/packages/web-components/src/components/masthead/cloud/cloud-button-cta.ts b/packages/web-components/src/components/masthead/cloud/cloud-button-cta.ts deleted file mode 100644 index de40ec7f238..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-button-cta.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2021, 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. - */ - -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import { CTA_TYPE } from '../../cta/defs'; -import C4DButtonExpressive from '../../button/button'; -import styles from './cloud-masthead.scss'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; - -export { CTA_TYPE }; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Cloud Button CTA. - * - * @element c4d-cloud-button-cta - */ -@customElement(`${c4dPrefix}-cloud-button-cta`) -class C4DCloudButtonCTA extends C4DButtonExpressive { - static styles = styles; -} - -export default C4DCloudButtonCTA; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-left-nav-item.ts b/packages/web-components/src/components/masthead/cloud/cloud-left-nav-item.ts deleted file mode 100644 index b4405f36553..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-left-nav-item.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 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. - */ - -import CDSSideNavLink from '../../../internal/vendor/@carbon/web-components/components/ui-shell/side-nav-link.js'; -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import styles from './cloud-masthead.scss'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Cloud-specific masthead left nav item. - * - * @element c4d-cloud-left-nav-item - */ -@customElement(`${c4dPrefix}-cloud-left-nav-item`) -class C4DCloudLeftNavItem extends CDSSideNavLink { - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -export default C4DCloudLeftNavItem; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts b/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts deleted file mode 100644 index 91bdc27d1de..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts +++ /dev/null @@ -1,499 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2021, 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. - */ - -import { html } from 'lit'; -import { property } from 'lit/decorators.js'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import { globalInit } from '../../../internal/vendor/@carbon/ibmdotcom-services/services/global/global'; -import './cloud-button-cta'; -import './cloud-left-nav-item'; -import './cloud-masthead-global-bar'; -import './cloud-masthead-profile'; -import './cloud-top-nav-name'; -import './cloud-megamenu'; -import './cloud-megamenu-tabs'; -import './cloud-megamenu-tab'; -import './cloud-megamenu-left-navigation'; -import './cloud-megamenu-right-navigation'; -import './cloud-megamenu-category-heading'; -import './cloud-megamenu-category-link'; -import './cloud-megamenu-category-link-group'; -import { - MastheadMenuItem, - MastheadProfileItem, -} from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/translateAPI.d'; -import { UNAUTHENTICATED_STATUS } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/cloudAccountAuthAPI'; -import { MASTHEAD_AUTH_METHOD } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI'; -import styles from './cloud-masthead.scss'; -import C4DMastheadComposite, { - NAV_ITEMS_RENDER_TARGET, -} from '../masthead-composite'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; - -const { stablePrefix: c4dPrefix } = settings; - -// Magic Number: 960px matches masthead.scss's `$breakpoint--desktop-nav`. -const layoutBreakpoint = window.matchMedia(`(max-width: 959px)`); - -/** - * Component that renders masthead from links, etc. data. - * - * @element c4d-cloud-masthead-composite - */ - -@customElement(`${c4dPrefix}-cloud-masthead-composite`) -class C4DCloudMastheadComposite extends C4DMastheadComposite { - /** - * The placeholder for `loadUserStatus()` Redux action that will be mixed in. - * - * @internal - */ - _loadUserStatus?: (authMethod?: string) => void; - - /** - * The profile items for unauthenticated state. - */ - @property({ attribute: false }) - authenticatedCtaButtons?: MastheadProfileItem[]; - - /** - * Text for Contact us button - */ - @property({ attribute: false }) - contactUsButton?: MastheadProfileItem; - - /** - * `true` if Contact us should be shown. - */ - @property({ type: String, reflect: true, attribute: 'has-contact' }) - hasContact = 'true'; - - /** - * The profile items for unauthenticated state. - */ - @property({ attribute: false }) - unauthenticatedCtaButtons?: MastheadProfileItem[]; - - /** - * The selected authentication method, either 'cookie' or 'api'. - */ - @property({ attribute: 'auth-method' }) - authMethod = MASTHEAD_AUTH_METHOD.COOKIE; - - /** - * The user authentication status. - */ - @property({ attribute: 'user-status' }) - userStatus = UNAUTHENTICATED_STATUS; - - /** - * The path to which a user will be redirected after successful login. - */ - @property({ type: String, reflect: false, attribute: 'redirect-path' }) - redirectPath? = ''; - - /** - * Whether the nav should load as `left-nav` or `top-nav` - */ - _isMobileVersion = layoutBreakpoint.matches; - - /** - * Render MegaMenu content - * - * @param sections menu section data object - * @param parentKey parent key - */ - // eslint-disable-next-line class-methods-use-this - protected _renderMegaMenu(sections, parentKey) { - let viewAllLink; - type menuItem = MastheadMenuItem & { itemKey: String }; - const sortedMenuItems: menuItem[] = []; - sections[0].menuItems?.forEach((item, i) => { - if (item.megaPanelViewAll) { - viewAllLink = item; - return viewAllLink; - } - - return sortedMenuItems.push({ ...item, itemKey: `${parentKey}-${i}` }); - }); - - return html` - - - - ${sortedMenuItems.map((item) => { - return html` - ${item.title} - `; - })} - - - - ${sortedMenuItems.map((item) => { - return html` - - `; - })} - - - `; - } - - /** - * Renders the left nav menus sections - * - * @param object heading heading of menu section - * @param object.menuItems menu items - * @param object.heading heading heading of menu section - * @param object.isSubmenu determines whether menu section is a submenu section - * @param object.showBackButton Determines whether to show back button - * @param object.sectionTitle title of menu section - * @param object.sectionUrl section title url of menu section - * @param object.sectionId id of menu section - */ - protected _renderLeftNavMenuSections({ - menuItems, - heading = '', - isSubmenu = false, - showBackButton = false, - sectionTitle = '', - sectionUrl = '', - sectionId = '', - }) { - const { - userStatus, - authenticatedProfileItems, - unauthenticatedProfileItems, - authenticatedCtaButtons, - unauthenticatedCtaButtons, - } = this; - const authenticated = userStatus !== 'anonymous'; - const profileItems = authenticated - ? authenticatedProfileItems - : unauthenticatedProfileItems; - const ctaButtons = authenticated - ? authenticatedCtaButtons - : unauthenticatedCtaButtons; - - const items = menuItems.map((elem) => { - if (elem.menu) { - return html` - - - `; - } - - return html` - - `; - }); - - if (heading) { - items.unshift( - html` - ${heading} - ` - ); - } - - if (!isSubmenu) { - items.push( - html` - ${authenticated - ? null - : html` - ${profileItems?.map((item) => { - return html` - - `; - })} - `} - ${ctaButtons?.map((item) => { - return html` - - `; - })} - ` - ); - } - - return html` - - ${items} - - `; - } - - firstUpdated() { - const { language, dataEndpoint } = this; - globalInit(); - if (language) { - this._setLanguage?.(language); - } - this._loadTranslation?.(language, dataEndpoint).catch(() => {}); // The error is logged in the Redux store - this._loadUserStatus?.(this.authMethod); - - this.style.zIndex = '900'; - - // Allows conditional rendering of left/top navs. - layoutBreakpoint.addEventListener('change', () => { - this._isMobileVersion = layoutBreakpoint.matches; - this.requestUpdate(); - }); - } - - render() { - const { - _isMobileVersion: isMobileVersion, - activateSearch, - authenticatedProfileItems, - authenticatedCtaButtons, - contactUsButton, - hasContact, - platform, - platformUrl, - inputTimeout, - mastheadAssistiveText, - menuBarAssistiveText, - menuButtonAssistiveTextActive, - menuButtonAssistiveTextInactive, - language, - openSearchDropdown, - searchPlaceholder, - unauthenticatedProfileItems, - unauthenticatedCtaButtons, - userStatus, - l1Data, - } = this; - const authenticated = userStatus !== 'anonymous'; - const profileItems = authenticated - ? authenticatedProfileItems - : unauthenticatedProfileItems; - const ctaButtons = authenticated - ? authenticatedCtaButtons - : unauthenticatedCtaButtons; - const formattedLang = language - ?.toLowerCase() - .replace(/-(.*)/, (m) => m.toUpperCase()); - let platformAltUrl = platformUrl; - if (platformUrl && formattedLang) { - if ( - typeof platformUrl === 'object' && - Object.prototype.hasOwnProperty.call(platformUrl, formattedLang) - ) { - platformAltUrl = platformUrl[formattedLang].url || platformUrl; - } - } - - return html` - ${isMobileVersion - ? html` - - - ${!platform - ? undefined - : html` - ${platform} - `} - ${this._renderNavItems({ - target: NAV_ITEMS_RENDER_TARGET.LEFT_NAV, - hasL1: !!l1Data, - })} - - ` - : ''} - - ${isMobileVersion - ? html` - - - ` - : ''} - ${this._renderLogo()} - ${!platform - ? undefined - : html` - ${platform} - `} - ${l1Data - ? undefined - : !isMobileVersion - ? html` - - ${this._renderNavItems({ - target: NAV_ITEMS_RENDER_TARGET.TOP_NAV, - hasL1: false, - })} - - ` - : undefined} - - ${authenticated - ? html` - - - ${profileItems?.map( - ({ title, url }) => - html` - ${title} - ` - )} - - ${hasContact === 'false' - ? '' - : html` - ${contactUsButton?.title} - `} - ${ctaButtons?.map( - ({ title, url }) => - html` - ${title} - ` - )} - - ` - : html` - - ${hasContact === 'false' - ? '' - : html` - ${contactUsButton?.title} - `} - ${profileItems?.map( - ({ title, url }) => - html` - ${title} - ` - )} - ${ctaButtons?.map( - ({ title, url }) => - html` - ${title} - ` - )} - - `} - ${!l1Data ? undefined : this._renderL1()} - - - `; - } - - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -export default C4DCloudMastheadComposite; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead-container.ts b/packages/web-components/src/components/masthead/cloud/cloud-masthead-container.ts deleted file mode 100644 index bdee02caac1..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-masthead-container.ts +++ /dev/null @@ -1,142 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2021, 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. - */ -import pickBy from 'lodash-es/pickBy.js'; -import { - ActionCreatorsMapObject, - Dispatch, - Store, - bindActionCreators, -} from 'redux'; -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import { CloudAccountAuthAPIState } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/cloudAccountAuthAPI.d'; -import store from '../../../internal/vendor/@carbon/ibmdotcom-services-store/store'; -import { LocaleAPIActions } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/actions/localeAPI.d'; -import { TranslateAPIActions } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/actions/translateAPI.d'; -import { loadUserStatus } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/actions/cloudAccountAuthAPI'; -// eslint-disable-next-line max-len -import { CloudAccountAuthAPIActions } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/actions/cloudAccountAuthAPI.d'; -import ConnectMixin from '../../../globals/mixins/connect'; -import { loadTranslation } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/actions/translateAPI'; -import { - loadLanguage, - setLanguage, -} from '../../../internal/vendor/@carbon/ibmdotcom-services-store/actions/localeAPI'; -import { - MastheadContainerState, - MastheadContainerStateProps, -} from '../masthead-container'; -import C4DCloudMastheadComposite from './cloud-masthead-composite'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * The Redux state used for `` - */ -export interface CloudMastheadContainerState - extends Omit { - /** - * The Redux state for `CloudAccountAuthAPI` - */ - cloudAccountAuthAPI?: CloudAccountAuthAPIState; -} - -/** - * The Redux actions used for `. - */ -export type CloudMastheadContainerActions = - | ReturnType - | ReturnType - | ReturnType - | ReturnType; - -/** - * @param state The Redux state for masthead. - * @returns The converted version of the given state, tailored for ``. - */ -export function mapStateToProps( - state: CloudMastheadContainerState -): MastheadContainerStateProps { - const { localeAPI, translateAPI, cloudAccountAuthAPI } = state; - const { language } = localeAPI ?? {}; - const { translations } = translateAPI ?? {}; - const { request } = cloudAccountAuthAPI ?? {}; - return pickBy( - { - authenticatedProfileItems: !language - ? undefined - : translations?.[language]?.masthead?.profileMenu.signedin.links, - authenticatedCtaButtons: !language - ? undefined - : translations?.[language]?.masthead?.profileMenu.signedin.ctaButtons, - contactUsButton: !language - ? undefined - : translations?.[language]?.masthead?.contact, - navLinks: !language - ? undefined - : translations?.[language]?.mastheadNav?.links, - unauthenticatedProfileItems: !language - ? undefined - : translations?.[language]?.masthead?.profileMenu.signedout.links, - unauthenticatedCtaButtons: !language - ? undefined - : translations?.[language]?.masthead?.profileMenu.signedout.ctaButtons, - logoData: !language - ? undefined - : translations?.[language]?.masthead?.logo, - userStatus: request?.user, - language, - }, - (value) => value !== undefined - ); -} - -/** - * @param dispatch The Redux `dispatch()` API. - * @returns The methods in `` to dispatch Redux actions. - */ -export function mapDispatchToProps( - dispatch: Dispatch< - LocaleAPIActions | TranslateAPIActions | CloudAccountAuthAPIActions - > -) { - return bindActionCreators< - CloudMastheadContainerActions, - ActionCreatorsMapObject - >( - { - _loadLanguage: loadLanguage, - _setLanguage: setLanguage, - _loadTranslation: loadTranslation, - _loadUserStatus: loadUserStatus, - }, - dispatch as Dispatch // TS definition of `bindActionCreators()` seems to have no templated `Dispatch` - ); -} -/** - * Container component for Cloud masthead. - * - * @element c4d-cloud-masthead-container - */ -@customElement(`${c4dPrefix}-cloud-masthead-container`) -class C4DCloudMastheadContainer extends ConnectMixin< - CloudMastheadContainerState, - LocaleAPIActions | TranslateAPIActions | CloudAccountAuthAPIActions, - MastheadContainerStateProps, - ActionCreatorsMapObject ->( - store as Store< - CloudMastheadContainerState, - LocaleAPIActions | TranslateAPIActions | CloudAccountAuthAPIActions - >, - mapStateToProps, - mapDispatchToProps -)(C4DCloudMastheadComposite) {} - -export default C4DCloudMastheadContainer; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead-global-bar.ts b/packages/web-components/src/components/masthead/cloud/cloud-masthead-global-bar.ts deleted file mode 100644 index c01503024b7..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-masthead-global-bar.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2021, 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. - */ - -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import styles from './cloud-masthead.scss'; -import C4DMastheadGlobalBar from '../masthead-global-bar'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * The action bar in Cloud masthead. - * - * @element c4d-cloud-masthead-global-bar - */ -@customElement(`${c4dPrefix}-cloud-masthead-global-bar`) -class C4DCloudMastheadGlobalBar extends C4DMastheadGlobalBar { - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -export default C4DCloudMastheadGlobalBar; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead-profile.ts b/packages/web-components/src/components/masthead/cloud/cloud-masthead-profile.ts deleted file mode 100644 index db14d600469..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-masthead-profile.ts +++ /dev/null @@ -1,54 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2021, 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. - */ - -import { ifDefined } from 'lit/directives/if-defined.js'; -import { html } from 'lit'; -import User20 from '../../../internal/vendor/@carbon/web-components/icons/user/20.js'; -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import styles from './cloud-masthead.scss'; -import C4DMastheadProfile from '../masthead-profile'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; - -const { prefix, stablePrefix: c4dPrefix } = settings; - -/** - * The Cloud-specific profile menu UI in the masthead. - * - * @element c4d-cloud-masthead-profile - */ -@customElement(`${c4dPrefix}-cloud-masthead-profile`) -class C4DCloudMastheadProfile extends C4DMastheadProfile { - render() { - const { - expanded, - menuLabel, - triggerLabel, - _handleClick: handleClick, - } = this; - return html` - - ${User20()} - -
    - -
- `; - } - - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -export default C4DCloudMastheadProfile; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead.scss b/packages/web-components/src/components/masthead/cloud/cloud-masthead.scss deleted file mode 100644 index 7bda7f819ee..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-masthead.scss +++ /dev/null @@ -1,346 +0,0 @@ -// -// Copyright IBM Corp. 2021, 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 '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/config' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/components/button/tokens' as *; -@use '@carbon/styles/scss/utilities/convert' as *; -@use '@carbon/ibmdotcom-styles/scss/components/masthead' as *; -@use '../masthead'; -@use '../../cta/cta'; -@use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *; -@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; - -// Cloud Masthead. - -:host(#{$c4d-prefix}-cloud-masthead-container), -#{$c4d-prefix}-cloud-masthead-container { - position: relative; -} - -:host(#{$c4d-prefix}-cloud-masthead-global-bar) { - @extend :host(#{$c4d-prefix}-masthead-global-bar); - - z-index: 0; - flex: none; - - background-color: $background; -} - -:host(#{$c4d-prefix}-cloud-masthead-global-bar) - ::slotted(#{$c4d-prefix}-cloud-button-cta) { - @include breakpoint-down(md) { - display: none; - } -} - -:host(#{$c4d-prefix}-cloud-button-cta) { - @extend :host(#{$c4d-prefix}-button-cta); - - margin: 0; - - padding-inline-end: 0; - - &.console .#{$prefix}--btn--ghost { - border-inline-start: 1px solid $button-separator; - color: $link-secondary; - } - - .#{$prefix}--btn { - padding: calc(0.875rem - 3px) to-rem(15px); - } - - .#{$prefix}--btn--ghost { - color: $text-secondary; - - &:hover, - &:focus { - color: $text-primary; - } - } -} - -:host(#{$c4d-prefix}-cloud-top-nav-name) { - position: relative; - z-index: 1; - background-color: $background; - outline: none; - - a.#{$prefix}--header__name { - margin-inline-start: 0; - - @include masthead-top-nav-name; - - @include breakpoint-down(800px) { - position: absolute; - display: flex; - inset-block-start: 0; - inset-inline-start: 0; - } - - @include breakpoint(lg) { - margin-inline-start: 0; - } - - @include breakpoint(xlg) { - position: relative; - margin-inline-start: $spacing-05; - } - } -} - -// Cloud Megamenu. - -:host(#{$c4d-prefix}-cloud-megamenu), -.#{$prefix}--masthead__megamenu { - position: relative; - - &::after { - position: fixed; - background: linear-gradient( - rgba(255, 255, 255, 0.001), - $background - ); /* transparent keyword is broken in Safari */ - - block-size: $spacing-09; - - content: ''; - inline-size: 100%; - inset-block-end: 0; - } - - .#{$prefix}--masthead__megamenu__container { - block-size: 100%; - inline-size: 100%; - overflow-x: hidden; - } - - .#{$prefix}--masthead__megamenu__container--row { - // Override flex-direction: column set in _masthead-megamenu.scss. - @include breakpoint-between(960px, 1055px) { - flex-direction: inherit; - } - } -} - -:host(#{$c4d-prefix}-cloud-megamenu-left-navigation) { - @include make-col(4, 16); - - display: flex; - flex-direction: column; - justify-content: space-between; - border-inline-end: to-rem(1px) solid $border-subtle-01; - - @include breakpoint(md) { - min-block-size: to-rem(580px); - } - - @include breakpoint(xlg) { - min-block-size: to-rem(475px); - } -} - -:host(#{$c4d-prefix}-cloud-megamenu-right-navigation) { - @include make-col(12, 16); - - display: flex; - flex-direction: column; - margin-block-end: $spacing-07; - padding-block-start: $spacing-06; -} - -:host(#{$c4d-prefix}-cloud-megamenu-tabs) { - display: flex; - flex-direction: column; - margin-block: to-rem(18px); - - .#{$prefix}--tabs-trigger { - display: none; - } -} - -:host(#{$c4d-prefix}-cloud-megamenu-tab) { - outline: 0; - - button { - @include type-style(body-short-01); - - padding: to-rem(6px) $spacing-05; - border: none; - background-color: $background; - - color: $text-secondary; - cursor: pointer; - - inline-size: 100%; - text-align: start; - - &:hover, - &:focus { - color: $text-primary; - } - - &:hover { - background-color: $background-hover; - } - - &:focus { - outline: $spacing-01 solid $focus; - outline-offset: -#{$spacing-01}; - } - } -} - -:host(#{$c4d-prefix}-cloud-megamenu-tab)[selected] button { - background-color: $background-selected; - color: $text-primary; -} - -:host(#{$c4d-prefix}-cloud-megamenu-category-link-group) { - display: flex; - flex-flow: wrap; - justify-content: flex-start; -} - -:host(#{$c4d-prefix}-cloud-megamenu-category-link) { - inline-size: 100%; - max-inline-size: 50%; - outline: 0; - - @include breakpoint(xlg) { - max-inline-size: 33.33%; - } - - a { - display: block; - padding: $spacing-04 $spacing-05; - block-size: 100%; - - p { - @include type-style('heading-01'); - - color: $text-primary; - } - - span { - @include type-style(body-short-01); - - display: block; - - color: $text-secondary; - inline-size: 90%; - } - - &:hover { - background-color: $background-hover; - text-decoration: none; - - span { - color: $text-primary; - } - } - - &:focus { - outline: $spacing-01 solid $focus; - outline-offset: #{$spacing-01}; - } - } -} - -:host(#{$c4d-prefix}-cloud-megamenu-category-heading) { - display: block; - padding: 0 $spacing-05; - inline-size: 66.66%; - margin-block-end: $spacing-07; - - @include breakpoint(lg) { - inline-size: auto; - } - - h2 { - display: flex; - margin-block-end: $spacing-03; - - a { - align-self: center; - color: $text-primary; - text-decoration: none; - - svg { - margin: 0 $spacing-03; - fill: $icon-primary; - padding-block-start: $spacing-02; - - /* stylelint-disable-next-line comment-whitespace-inside */ - /* !rtl:raw: - transform: scaleX(-1); - */ - } - - &:hover { - text-decoration: underline; - } - - &:focus { - outline: $spacing-01 solid $focus; - outline-offset: -#{$spacing-01}; - } - } - } - - span { - display: block; - @include type-style(body-short-01); - - color: $text-secondary; - - @include breakpoint(lg) { - inline-size: 40%; - } - } -} - -:host(#{$c4d-prefix}-cloud-left-nav-item) { - @extend :host(#{$c4d-prefix}-left-nav-item); - - a.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text { - color: $text-secondary; - - &:hover, - &:focus { - color: $text-primary; - } - } - - &:last-child { - a.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text { - color: $link-primary; - - &:hover, - &:focus { - color: $link-secondary; - } - } - } -} - -:host(#{$c4d-prefix}-cloud-masthead-profile) - .#{$prefix}--header__menu-title[aria-expanded='true'] - + .#{$prefix}--header__menu { - @include breakpoint-down(md) { - inline-size: 100vw; - } -} - -:host(#{$c4d-prefix}-cloud-masthead-profile) a.#{$prefix}--header__menu-item { - svg { - fill: $icon-secondary; - } -} diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-heading.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-heading.ts deleted file mode 100644 index 6f76ded7831..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-heading.ts +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 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. - */ - -import { LitElement, html } from 'lit'; -import { property } from 'lit/decorators.js'; -import ArrowRight32 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/32.js'; -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import styles from './cloud-masthead.scss'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Cloud MegaMenu Category Heading. - * - * @element c4d-cloud-megamenu-category-heading - */ -@customElement(`${c4dPrefix}-cloud-megamenu-category-heading`) -class C4DCloudMegaMenuCategoryHeading extends LitElement { - /** - * href. - */ - @property({ reflect: true }) - href = ''; - - /** - * Megamenu content category heading - */ - @property({ reflect: true }) - title = ''; - - render() { - return html` -

${this.title} ${ArrowRight32()}

- - `; - } - - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -export default C4DCloudMegaMenuCategoryHeading; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link-group.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link-group.ts deleted file mode 100644 index 699fe4b4a22..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link-group.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 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. - */ - -import { LitElement, html } from 'lit'; -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; -import styles from './cloud-masthead.scss'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Cloud Megamenu category link group - * - * @element c4d-cloud-megamenu-category-link-group - */ -@customElement(`${c4dPrefix}-cloud-megamenu-category-link-group`) -class C4DCloudMegaMenuCategoryLinkGroup extends LitElement { - render() { - return html` `; - } - - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -export default C4DCloudMegaMenuCategoryLinkGroup; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link.ts deleted file mode 100644 index be75ba2cb85..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link.ts +++ /dev/null @@ -1,46 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 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. - */ - -import { html } from 'lit'; -import { property } from 'lit/decorators.js'; -import CDSLink from '../../../internal/vendor/@carbon/web-components/components/link/link.js'; -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import styles from './cloud-masthead.scss'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Cloud MegaMenu category link - * - * @element c4d-cloud-megamenu-category-link - */ -@customElement(`${c4dPrefix}-cloud-megamenu-category-link`) -class C4DCloudMegaMenuCateoryLink extends CDSLink { - /** - * link title. - */ - @property({ reflect: true }) - title = ''; - - /** - * @returns The inner content. - */ - protected _renderInner() { - const { title } = this; - return html` -

${title}

- - `; - } - - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -export default C4DCloudMegaMenuCateoryLink; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-left-navigation.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-left-navigation.ts deleted file mode 100644 index 1fe862fdae5..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-left-navigation.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2021, 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. - */ - -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; -import C4DMegaMenuRightNavigation from '../megamenu-right-navigation'; -import styles from './cloud-masthead.scss'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Cloud Megamenu Left Navigation Section. - * - * @element c4d-cloud-megamenu-left-navigation - */ -@customElement(`${c4dPrefix}-cloud-megamenu-left-navigation`) -class C4DCloudMegaMenuLeftNavigation extends C4DMegaMenuRightNavigation { - static styles = styles; -} - -export default C4DCloudMegaMenuLeftNavigation; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-right-navigation.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-right-navigation.ts deleted file mode 100644 index 4a11c709dc0..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-right-navigation.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2021, 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. - */ - -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; -import C4DMegaMenuLeftNavigation from '../megamenu-left-navigation'; -import styles from './cloud-masthead.scss'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Cloud Megamenu Right Navigation Section. - * - * @element c4d-cloud-megamenu-right-navigation - */ -@customElement(`${c4dPrefix}-cloud-megamenu-right-navigation`) -class C4DCloudMegaMenuRightNavigation extends C4DMegaMenuLeftNavigation { - static styles = styles; -} - -export default C4DCloudMegaMenuRightNavigation; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tab.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tab.ts deleted file mode 100644 index 9755d1deda7..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tab.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2021, 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. - */ - -import { html } from 'lit'; -import CDSTab from '../../../internal/vendor/@carbon/web-components/components/tabs/tab.js'; -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import styles from './cloud-masthead.scss'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; - -const { prefix, stablePrefix: c4dPrefix } = settings; - -/** - * Cloud Megamenu Tab. - * - * @element c4d-cloud-megamenu-tab - */ -@customElement(`${c4dPrefix}-cloud-megamenu-tab`) -class C4DCloudMegaMenuTab extends CDSTab { - render() { - const { disabled, selected } = this; - return html` - - `; - } - - static styles = styles; -} - -export default C4DCloudMegaMenuTab; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tabs.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tabs.ts deleted file mode 100644 index 08fec50dc20..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tabs.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2021, 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. - */ - -import CDSTabs from '../../../internal/vendor/@carbon/web-components/components/tabs/tabs.js'; -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import styles from './cloud-masthead.scss'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Cloud Megamenu Tabs. - * - * @element c4d-cloud-megamenu-tabs - */ -@customElement(`${c4dPrefix}-cloud-megamenu-tabs`) -class C4DCloudMegaMenuTabs extends CDSTabs { - /** - * A selector that will return megamenu tabs. - */ - static get selectorItem() { - return `${c4dPrefix}-cloud-megamenu-tab`; - } - - /** - * A selector that will return selected items. - */ - static get selectorItemSelected() { - return `${c4dPrefix}-cloud-megamenu-tab[selected]`; - } - - static styles = styles; -} - -export default C4DCloudMegaMenuTabs; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu.ts deleted file mode 100644 index efcebe81eee..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu.ts +++ /dev/null @@ -1,42 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 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. - */ - -import { html } from 'lit'; -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import C4DMegaMenu from '../megamenu'; -import styles from './cloud-masthead.scss'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; - -const { prefix, stablePrefix: c4dPrefix } = settings; - -/** - * Cloud MegaMenu. - * - * @element c4d-cloud-megamenu - */ -@customElement(`${c4dPrefix}-cloud-megamenu`) -class C4DCloudMegaMenu extends C4DMegaMenu { - render() { - return html` -
-
- -
-
- `; - } - - static get stableSelector() { - return `${c4dPrefix}--masthead__megamenu`; - } - - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -export default C4DCloudMegaMenu; diff --git a/packages/web-components/src/components/masthead/cloud/cloud-top-nav-name.ts b/packages/web-components/src/components/masthead/cloud/cloud-top-nav-name.ts deleted file mode 100644 index 031ebeb3d29..00000000000 --- a/packages/web-components/src/components/masthead/cloud/cloud-top-nav-name.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2021, 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. - */ - -import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; -import C4DTopNavName from '../top-nav-name'; -import styles from './cloud-masthead.scss'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Cloud's brand name UI in top nav. - * - * @element c4d-cloud-top-nav-name - */ -@customElement(`${c4dPrefix}-cloud-top-nav-name`) -class C4DCloudTopNavName extends C4DTopNavName { - static styles = styles; -} - -export default C4DCloudTopNavName; diff --git a/packages/web-components/src/components/masthead/cloud/index.ts b/packages/web-components/src/components/masthead/cloud/index.ts deleted file mode 100644 index 48a379ec1a1..00000000000 --- a/packages/web-components/src/components/masthead/cloud/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 2021 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import './cloud-masthead-container'; diff --git a/packages/web-components/src/components/masthead/defs.ts b/packages/web-components/src/components/masthead/defs.ts index 8082f0a9bd9..d1e31e834a7 100644 --- a/packages/web-components/src/components/masthead/defs.ts +++ b/packages/web-components/src/components/masthead/defs.ts @@ -47,26 +47,6 @@ export enum MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME { HAS_SIDEBAR = 'has-sidebar', } -/** - * The style scheme for the right navigation. - */ -export enum LEGACY_MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME { - /** - * Regular style. - */ - REGULAR = 'regular', - - /** - * For left (highlighted) section layout. - */ - LEFT_SECTION = 'left-section', - - /** - * For tabbed megamenus. - */ - TAB = 'tab', -} - /** * The layout options for rendering a megamenu */ diff --git a/packages/web-components/src/components/masthead/left-nav-cta-item.ts b/packages/web-components/src/components/masthead/left-nav-cta-item.ts deleted file mode 100644 index 827604f8471..00000000000 --- a/packages/web-components/src/components/masthead/left-nav-cta-item.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2022, 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. - */ - -import { html } from 'lit'; -import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16.js'; -import BXSideNavMenuItem from '../../internal/vendor/@carbon/web-components/components/ui-shell/side-nav-menu-item.js'; -import styles from './masthead.scss'; -import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; - -const { prefix, stablePrefix: c4dPrefix } = settings; - -/** - * Masthead left nav CTA item. - * - * @element c4d-left-nav-cta-item - */ -@customElement(`${c4dPrefix}-left-nav-cta-item`) -class C4DLeftNavCtaItem extends BXSideNavMenuItem { - render() { - const { href, title } = this; - return html` - -
- ${title} - ${ArrowRight16()} -
- - `; - } - - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -export default C4DLeftNavCtaItem; diff --git a/packages/web-components/src/components/masthead/left-nav.ts b/packages/web-components/src/components/masthead/left-nav.ts index fb0e4463670..77bebe98c34 100644 --- a/packages/web-components/src/components/masthead/left-nav.ts +++ b/packages/web-components/src/components/masthead/left-nav.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -252,14 +252,11 @@ class C4DLeftNav extends StableSelectorMixin(CDSSideNav) { const masthead: HTMLElement | null | undefined = doc ?.querySelector( - `${c4dPrefix}-cloud-masthead-container, - ${c4dPrefix}-cloud-masthead-composite, - ${c4dPrefix}-masthead-container, + `${c4dPrefix}-masthead-container, ${c4dPrefix}-masthead-composite` ) ?.querySelector(`${c4dPrefix}-masthead`); if (expanded && !this._importedSideNav) { - import('./left-nav-cta-item'); import('./left-nav-name'); import('./left-nav-menu'); import('./left-nav-menu-section'); diff --git a/packages/web-components/src/components/masthead/masthead-button-cta.ts b/packages/web-components/src/components/masthead/masthead-button-cta.ts deleted file mode 100644 index 0ff6e3c0a0a..00000000000 --- a/packages/web-components/src/components/masthead/masthead-button-cta.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2022, 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. - */ - -import BXButton from '../../internal/vendor/@carbon/web-components/components/button/button'; -import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import { CTA_TYPE } from '../cta/defs'; -import styles from './masthead.scss'; -import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; - -export { CTA_TYPE }; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Masthead Button CTA. - * - * @element c4d--masthead-button-cta - */ -@customElement(`${c4dPrefix}-masthead-button-cta`) -class C4DMastheadButtonCTA extends BXButton { - static styles = styles; - - connectedCallback() { - super.connectedCallback(); - } -} - -export default C4DMastheadButtonCTA; diff --git a/packages/web-components/src/components/masthead/masthead-composite.ts b/packages/web-components/src/components/masthead/masthead-composite.ts index eebad67d9fd..62eee269f7c 100644 --- a/packages/web-components/src/components/masthead/masthead-composite.ts +++ b/packages/web-components/src/components/masthead/masthead-composite.ts @@ -1,14 +1,14 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ import { LitElement, html, TemplateResult } from 'lit'; -import { state, property } from 'lit/decorators.js'; +import { state, property, query } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16.js'; import ifNonEmpty from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-empty.js'; @@ -29,7 +29,6 @@ import { L0Megamenu, Megapanel, MegapanelLinkGroup, - L1MenuItem, } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/translateAPI.d'; import { UNAUTHENTICATED_STATUS, @@ -41,8 +40,8 @@ import { C4D_CUSTOM_PROFILE_LOGIN } from '../../globals/internal/feature-flags'; import C4DMastheadLogo from './masthead-logo'; import C4DMegaMenuTabs from './megamenu-tabs'; import C4DMegamenuTopNavMenu from './megamenu-top-nav-menu'; +import C4DMastheadL1 from './masthead-l1'; import './masthead'; -import './masthead-button-cta'; import './masthead-l1'; import './masthead-l1-name'; import './masthead-menu-button'; @@ -70,21 +69,6 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we const { stablePrefix: c4dPrefix } = settings; -/** - * Rendering target for masthead navigation items. - */ -export enum NAV_ITEMS_RENDER_TARGET { - /** - * For top navigation. - */ - TOP_NAV = 'top-nav', - - /** - * For left navigation. - */ - LEFT_NAV = 'left-nav', -} - /** * Globally-scoped Contact Module variable. * @@ -94,6 +78,7 @@ export interface CMApp { version: string; ready: boolean; init: Function; + minimize: Function; refresh: Function; register: Function; deregister: Function; @@ -116,24 +101,25 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { /** * Renders L1 menu based on l1Data & screen width. * - * @returns {TemplateResult | undefined} The L1 nav. + * @returns {TemplateResult | undefined} */ protected _renderL1() { - if (!this.l1Data) return undefined; - - return html` - - - `; + const { l1Data, selectedMenuItemL1 } = this; + return !l1Data + ? undefined + : html` + + + `; } /** * Renders masthead logo * - * @returns TemplateResult + * @returns {TemplateResult} A template fragment representing the logo. */ protected _renderLogo() { if (!this.logoData) { @@ -161,7 +147,7 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { * @param menu megamenu data object * @param _parentKey parent key * @param layout layout selection to render the megamenu with - * @returns TemplateResult + * @returns {TemplateResult} A template fragment representing a megamenu. */ // eslint-disable-next-line class-methods-use-this protected _renderMegaMenu( @@ -181,7 +167,7 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { * * @param menu megamenu data object * @param _parentKey key that identifies parent nav item - * @returns TemplateResult + * @returns {TemplateResult} A template fragment representing a tabbed megamenu. */ protected _renderMegaMenuTabbed(menu: L0Megamenu, _parentKey) { const { viewAll, sections } = menu; @@ -234,6 +220,12 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { `; } + /** + * Render individual tabpanel in a tabbed megamenu. + * + * @param menuItem menuItem data object + * @returns {TemplateResult} A template fragment representing a megamenu tabpanel. + */ protected _renderMegamenuTabPanel(menuItem) { const { itemKey, groups, heading, viewAll: itemViewAll } = menuItem; return html` @@ -283,7 +275,7 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { * * @param menu megamenu data object * @param _parentKey key that identifies parent nav item - * @returns TemplateResult + * @returns {TemplateResult} A template fragment representing a listing megamenu. */ // eslint-disable-next-line protected _renderMegaMenuListing(menu: L0Megamenu, _parentKey) { @@ -355,7 +347,7 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { * Render a Megapanel link group. * * @param group megamenu link group - * @returns TemplateResult + * @returns {TemplateResult} A template fragment representing a megapanel link group. */ // eslint-disable-next-line class-methods-use-this protected _renderMegapanelLinkGroup( @@ -406,7 +398,6 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { * Renders the left nav menus sections * * @param object heading heading of menu section - * @param object.ctas cta items * @param object.menuItems menu items * @param object.heading heading heading of menu section * @param object.isSubmenu determines whether menu section is a submenu section @@ -414,10 +405,11 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { * @param object.sectionTitle title of menu section * @param object.sectionUrl section title url of menu section * @param object.sectionId id of menu section + * @returns {TemplateResult} A template fragment representing the left nav menu + * sections. */ // eslint-disable-next-line class-methods-use-this protected _renderLeftNavMenuSections({ - ctas, menuItems, heading, isSubmenu = false, @@ -426,7 +418,7 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { sectionUrl = '', sectionId = '', }) { - const items = menuItems.map((elem) => { + const items = menuItems?.map((elem) => { if (elem.menu) { return html` { - items.push(html` - - ${cta.title} - - `); - }); - } - return html` { + const menuItems = this._getl0Data(); + const autoid = `${c4dPrefix}--masthead__l0`; + const level0Items = menuItems?.map((elem: L0MenuItem, i) => { // Instantiate bucket for first level submenus. const level1Items: { title: string; @@ -590,7 +575,6 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { if (level1Items.length !== 0) { menu.push( this._renderLeftNavMenuSections({ - ctas: undefined, menuItems: level1Items, isSubmenu: true, showBackButton: true, @@ -690,7 +674,6 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { if (level2Items.length !== 0) { menu.push( this._renderLeftNavMenuSections({ - ctas: undefined, menuItems: level2Items, isSubmenu: true, showBackButton: true, @@ -769,7 +752,6 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { menu.push( this._renderLeftNavMenuSections({ - ctas: undefined, menuItems: level1Items, isSubmenu: true, showBackButton: true, @@ -794,13 +776,42 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { }); return html` - ${this._renderLeftNavMenuSections({ - ctas: ctaButtons, - menuItems: level0Items, - sectionId: '-1, -1', - heading: false, - })} - ${menu} + + + ${!platform + ? undefined + : html` + + ${platform} + + `} + ${this._renderLeftNavMenuSections({ + menuItems: level0Items, + sectionId: '-1, -1', + heading: false, + })} + ${menu} + + `; + } + + /** + * Renders the mobile menu button. + * + * @returns {TemplateResult} A template fragment representing the menu button. + */ + protected _renderMenuButton() { + const { + activateSearch, + menuButtonAssistiveTextActive, + menuButtonAssistiveTextInactive, + } = this; + return html` + + `; } @@ -868,37 +879,24 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { } /** - * @param options The options. - * @param [options.selectedMenuItem] The selected nav item. - * @param options.target The target of rendering navigation items. - * @param options.hasL1 If an L1 menu is present - * @returns The nav items. + * Renders the top navigation bar. + * + * @returns {TemplateResult} A template fragment representing the top nav. */ - protected _renderNavItems({ - target, - hasL1, - }: { - target: NAV_ITEMS_RENDER_TARGET; - hasL1: boolean; - }) { - const { navLinks, customNavLinks, l1Data } = this; - let menu: L0MenuItem[] | L1MenuItem[] | undefined = - customNavLinks || navLinks; - const autoid = `${c4dPrefix}--masthead__${l1Data?.menuItems ? 'l1' : 'l0'}`; - - if (hasL1) { - menu = l1Data?.menuItems; - } - - if (target === NAV_ITEMS_RENDER_TARGET.TOP_NAV) { - return !navLinks - ? undefined - : menu?.map((link, i) => { - return this._renderNavItem(link, i, autoid); - }); - } - - return !navLinks ? undefined : this._renderLeftNav(navLinks, autoid); + protected _renderTopNav() { + const { selectedMenuItem, menuBarAssistiveText, activateSearch } = this; + return !this._getl0Data() + ? undefined + : html` + + ${this._getl0Data().map((link, i) => { + return this._renderNavItem(link, i, `${c4dPrefix}--masthead__l0`); + })} + + `; } /** @@ -907,7 +905,7 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { * @param item The item to render * @param i The index of the item in a series * @param autoid The unique id to assign to the item - * @returns A template fragment representing a nav item. + * @returns {TemplateResult} A template fragment representing a nav item. */ protected _renderNavItem(item: L0MenuItem, i, autoid): TemplateResult { const { selectedMenuItem, currentUrlPath, _activeMegamenuIndex } = this; @@ -992,6 +990,9 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { // any previously opened megamenu. if (active && menuIndex !== undefined) { this._activeMegamenuIndex = menuIndex; + + // Close the Contact Module upon opening megamenu. + this.contactModuleApp?.minimize(); } // If clicking the same nav item to close megamenu, reset state to prune its @@ -1008,6 +1009,14 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { resolveFn(); }; + @HostListener(C4DMastheadL1.dropDownToggleEvent) + protected _handleL1DropdownToggle({ detail }: CustomEvent) { + const { isOpen } = detail; + if (isOpen) { + this.contactModuleApp?.minimize(); + } + } + /** * Sets the active megamenu tabpanel upon user interaction. * @@ -1032,6 +1041,151 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { contactModuleApp?: CMApp; + /** + * Gets localized platform URL. + * + * @returns {string} A URL. + */ + private _getPlatformUrl(): string { + const { language, platformUrl } = this; + const formattedLang = language + ?.toLowerCase() + .replace(/-(.*)/, (m) => m.toUpperCase()); + let url = platformUrl; + if (platformUrl && formattedLang) { + if ( + typeof platformUrl === 'object' && + Object.prototype.hasOwnProperty.call(platformUrl, formattedLang) + ) { + url = platformUrl[formattedLang].url || platformUrl; + } + } + return url; + } + + /** + * Renders the platform title. + * + * @returns {TemplateResult} A template fragment representing the platform title. + */ + protected _renderPlatformTitle() { + const { l1Data, platform } = this; + return !platform || l1Data + ? undefined + : html` + + ${platform} + + `; + } + + /** + * Renders the masthead search. + * + * @returns {TemplateResult} A template fragment representing the search bar. + */ + protected _renderSearch() { + const { + activateSearch, + currentSearchResults, + customTypeaheadAPI, + hasSearch, + inputTimeout, + language, + openSearchDropdown, + scopeParameters, + searchPlaceholder, + } = this; + return hasSearch === 'false' + ? '' + : html` + + `; + } + + /** + * Renders the contact button. + * + * @returns {TemplateResult} A template fragment representing the contact button. + */ + protected _renderContact() { + const { contactUsButton, hasContact } = this; + return hasContact === 'false' + ? undefined + : html` + + `; + } + + /** + * Gets the appropriate profile items for the current masthead state. + * + * @returns An array of profile items or undefined. + */ + protected _getProfileItems(): MastheadProfileItem[] | undefined { + const { + customProfileLogin, + userIsAuthenticated, + authenticatedProfileItems, + unauthenticatedProfileItems, + } = this; + + let profileItems; + if ( + C4D_CUSTOM_PROFILE_LOGIN && + customProfileLogin && + !userIsAuthenticated + ) { + profileItems = unauthenticatedProfileItems?.map((item) => { + if (item?.id === 'signin') { + return { ...item, url: customProfileLogin }; + } + return item; + }); + } else { + profileItems = userIsAuthenticated + ? authenticatedProfileItems + : unauthenticatedProfileItems; + } + return profileItems; + } + + /** + * Renders the profile menu. + * + * @returns {TemplateResult} A template fragment representing the profile menu. + */ + protected _renderProfileMenu() { + const { hasProfile, userIsAuthenticated } = this; + return hasProfile === 'false' + ? '' + : html` + + ${this._getProfileItems()?.map( + ({ title, url }) => + html` + + ${title} + + ` + )} + + `; + } + /** * Whether or not a nav item has automatically been designated as "selected". * @@ -1120,12 +1274,6 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { @property({ attribute: false }) authenticatedProfileItems?: MastheadProfileItem[]; - /** - * The cta buttons for authenticated state. - */ - @property({ attribute: false }) - authenticatedCtaButtons?: MastheadProfileItem[]; - /** * Text for Contact us button */ @@ -1225,12 +1373,6 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { @property({ attribute: false }) unauthenticatedProfileItems?: MastheadProfileItem[]; - /** - * The cta buttons for authenticated state. - */ - @property({ attribute: false }) - unauthenticatedCtaButtons?: MastheadProfileItem[]; - /** * Specify translation endpoint if not using default c4d endpoint. */ @@ -1249,17 +1391,38 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { @property() language?: string; + /** + * Logo data + */ + @property({ attribute: false }) + logoData?: MastheadLogoData; + /** * The navigation links. + * + * @deprecated This property name is ambiguous. Use the l0Data prop instead. */ @property({ attribute: false }) navLinks?: L0MenuItem[]; /** - * Logo data + * Data for l0. */ @property({ attribute: false }) - logoData?: MastheadLogoData; + l0Data?: L0MenuItem[]; + + /** + * Temporary getter to fetch data until navLinks prop is phased out. + */ + private _getl0Data() { + const { l0Data, navLinks } = this; + if (navLinks) { + console.warn( + `Warning: ${c4dPrefix}-masthead's "navLinks" property is deprecated. Use "l0Data" property instead.` + ); + } + return (l0Data || navLinks) as L0MenuItem[]; + } /** * Data for l1. @@ -1291,12 +1454,6 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { @property({ attribute: 'auth-method' }) authMethod = MASTHEAD_AUTH_METHOD.DEFAULT; - /** - * Custom navigation links - */ - @property() - customNavLinks?: L0MenuItem[]; - /** * The user authentication status. */ @@ -1314,15 +1471,46 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { ); } - get ctaButtons(): MastheadProfileItem[] | undefined { - const { - userIsAuthenticated, - authenticatedCtaButtons, - unauthenticatedCtaButtons, - } = this; - return userIsAuthenticated - ? authenticatedCtaButtons - : unauthenticatedCtaButtons; + /** + * A reference to the c4d-masthead element. + */ + @query(`${c4dPrefix}-masthead`) + mastheadRef; + + /** + * Resize observer to trigger container height recalculations. + * + * @private + */ + private _heightResizeObserver = new ResizeObserver( + this._resizeObserverCallback.bind(this) + ); + + /** + * Prevents resize observer from blocking main thread. + */ + private _resizeObserverThrottle?: NodeJS.Timeout; + + /** + * Throttled callback for _heightResizeObserver. + */ + protected _resizeObserverCallback() { + clearTimeout(this._resizeObserverThrottle); + this._resizeObserverThrottle = setTimeout( + this._setContainerHeight.bind(this), + 100 + ); + } + + /** + * Sets root element's height equal to the height of the fixed masthead elements. + */ + protected _setContainerHeight() { + const { mastheadRef } = this; + if (mastheadRef) { + this.style.display = 'block'; + this.style.height = `${mastheadRef.getBoundingClientRect().height}px`; + } } firstUpdated() { @@ -1344,6 +1532,9 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { this._isMobileVersion = layoutBreakpoint.matches; this.requestUpdate(); }); + + // Keep render root's height in sync with c4d-masthead. + this._heightResizeObserver.observe(this.mastheadRef); } updated(changedProperties) { @@ -1359,180 +1550,35 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) { } } + disconnectedCallback() { + super.disconnectedCallback(); + this._heightResizeObserver.disconnect(); + } + render() { const { _isMobileVersion: isMobileVersion, activateSearch, - authenticatedProfileItems, - ctaButtons, - contactUsButton, - currentSearchResults, - customTypeaheadAPI, - customProfileLogin, - platform, - platformUrl, - hasProfile, - inputTimeout, - userIsAuthenticated, mastheadAssistiveText, - menuBarAssistiveText, - menuButtonAssistiveTextActive, - menuButtonAssistiveTextInactive, - navLinks, - customNavLinks, - language, - openSearchDropdown, - hasSearch, - scopeParameters, - searchPlaceholder, - selectedMenuItem, skipToContentText, skipToContentHref, - unauthenticatedProfileItems, - l1Data, - hasContact, } = this; - let profileItems; - if ( - C4D_CUSTOM_PROFILE_LOGIN && - customProfileLogin && - !userIsAuthenticated - ) { - profileItems = unauthenticatedProfileItems?.map((item) => { - if (item?.id === 'signin') { - return { ...item, url: customProfileLogin }; - } - return item; - }); - } else { - profileItems = userIsAuthenticated - ? authenticatedProfileItems - : unauthenticatedProfileItems; - } - const formattedLang = language - ?.toLowerCase() - .replace(/-(.*)/, (m) => m.toUpperCase()); - let platformAltUrl = platformUrl; - if (platformUrl && formattedLang) { - if ( - typeof platformUrl === 'object' && - Object.prototype.hasOwnProperty.call(platformUrl, formattedLang) - ) { - platformAltUrl = platformUrl[formattedLang].url || platformUrl; - } - } - return html` - ${isMobileVersion - ? html` - - - ${!platform - ? undefined - : html` - ${platform} - `} - ${this._renderNavItems({ - target: NAV_ITEMS_RENDER_TARGET.LEFT_NAV, - hasL1: !!l1Data, - })} - - ` - : ''} + ${isMobileVersion ? this._renderLeftNav() : ''} - - ${isMobileVersion - ? html` - - - ` - : ''} - ${this._renderLogo()} - ${!platform || l1Data - ? undefined - : html` - ${platform} - `} - ${(navLinks || customNavLinks) && !isMobileVersion - ? html` - - ${this._renderNavItems({ - target: NAV_ITEMS_RENDER_TARGET.TOP_NAV, - hasL1: false, - })} - - ` - : ''} - ${hasSearch === 'false' - ? '' - : html` - - `} + ${isMobileVersion ? this._renderMenuButton() : ''} ${this._renderLogo()} + ${this._renderPlatformTitle()} + ${!isMobileVersion ? this._renderTopNav() : ''} ${this._renderSearch()} - ${hasContact === 'false' - ? '' - : html` - - `} - ${hasProfile === 'false' - ? '' - : html` - - ${profileItems?.map( - ({ title, url }) => - html` - ${title} - ` - )} - - `} - ${ctaButtons?.map( - ({ title, url }) => - html` - - ${title} - - ` - )} + ${this._renderContact()} ${this._renderProfileMenu()} - ${!l1Data ? undefined : this._renderL1()} + ${this._renderL1()} `; diff --git a/packages/web-components/src/components/masthead/masthead-contact.ts b/packages/web-components/src/components/masthead/masthead-contact.ts index d8073d81aa9..228ff5e7756 100644 --- a/packages/web-components/src/components/masthead/masthead-contact.ts +++ b/packages/web-components/src/components/masthead/masthead-contact.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2022, 2023 + * Copyright IBM Corp. 2022, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -12,10 +12,9 @@ import { property } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import Chat20 from '../../internal/vendor/@carbon/web-components/icons/chat/20.js'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; +import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js'; import styles from './masthead.scss'; import C4DMastheadProfile from './masthead-profile'; -import C4DMastheadContainer from './masthead-container'; -import { CMApp } from './masthead-composite'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; const { prefix, stablePrefix: c4dPrefix } = settings; @@ -33,6 +32,28 @@ class C4DMastheadContact extends C4DMastheadProfile { @property({ attribute: 'trigger-label' }) triggerLabel = 'Contact'; + /** + * Handles cm-app-pane-displayed event fired by CM_APP. + * + * @see DOCUMENT_EVENTS live-advisor/cm-app/js/helpers/otherConstants.js + * - https://github.ibm.com/live-advisor/cm-app/blob/master/js/helpers/otherConstants.js + */ + @HostListener('document:cm-app-pane-displayed') + protected _handleCMAppDisplayed = (_event: CustomEvent) => { + this.triggerLabel = 'Close contact window'; + }; + + /** + * Handles cm-app-pane-hidden event fired by CM_APP. + * + * @see DOCUMENT_EVENTS live-advisor/cm-app/js/helpers/otherConstants.js + * - https://github.ibm.com/live-advisor/cm-app/blob/master/js/helpers/otherConstants.js + */ + @HostListener('document:cm-app-pane-hidden') + protected _handleCMAppHidden = (_event: CustomEvent) => { + this.triggerLabel = 'Show contact window'; + }; + render() { const { triggerLabel, _handleClick: handleClick } = this; return html` @@ -46,25 +67,6 @@ class C4DMastheadContact extends C4DMastheadProfile { `; } - updated(changedProperties) { - if (changedProperties.has('expanded')) { - if (!this.expanded) { - const mastheadContainer = this.closest( - `${c4dPrefix}-masthead-container` - ) as C4DMastheadContainer; - - /** - * This is a workaround to minimize the chat module. Currently no minimize methods exist. - * - * @see https://github.ibm.com/live-advisor/cm-app - */ - if (mastheadContainer?.contactModuleApp) { - (mastheadContainer.contactModuleApp as CMApp).init(); - } - } - } - } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } diff --git a/packages/web-components/src/components/masthead/masthead-container.ts b/packages/web-components/src/components/masthead/masthead-container.ts index 31857ae7a63..dccf53e6edd 100644 --- a/packages/web-components/src/components/masthead/masthead-container.ts +++ b/packages/web-components/src/components/masthead/masthead-container.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -63,9 +63,9 @@ export interface MastheadContainerState { */ export interface MastheadContainerStateProps { /** - * The nav links. + * The L0 data. */ - navLinks?: L0MenuItem[]; + l0Data?: L0MenuItem[]; /** * The user authentication status. @@ -93,23 +93,42 @@ export function mapStateToProps( const { language } = localeAPI ?? {}; const { translations } = translateAPI ?? {}; const { request } = profileAPI ?? {}; + + // Attempt to collect data from current/new and deprecated locations. + let l0Data; + let profileItems; + if (language) { + l0Data = { + current: translations?.[language]?.masthead?.nav, + deprecated: translations?.[language]?.mastheadNav?.links, + }; + + profileItems = { + authenticated: { + current: translations?.[language]?.masthead?.profileMenu?.authenticated, + deprecated: translations?.[language]?.profileMenu?.signedin, + }, + unauthenticated: { + current: + translations?.[language]?.masthead?.profileMenu?.unauthenticated, + deprecated: translations?.[language]?.profileMenu?.signedout, + }, + }; + } + return pickBy( { - navLinks: !language - ? undefined - : translations?.[language]?.mastheadNav?.links, + // Progressively enhance to new L0 data shape. + l0Data: !language ? undefined : l0Data.current || l0Data.deprecated, + // Progressively enhance to new profile items shape. authenticatedProfileItems: !language ? undefined - : translations?.[language]?.profileMenu.signedin, + : profileItems.authenticated.current || + profileItems.authenticated.deprecated, unauthenticatedProfileItems: !language ? undefined - : translations?.[language]?.profileMenu.signedout, - authenticatedCtaButtons: !language - ? undefined - : translations?.[language]?.masthead?.profileMenu.signedin.ctaButtons, - unauthenticatedCtaButtons: !language - ? undefined - : translations?.[language]?.masthead?.profileMenu.signedout.ctaButtons, + : profileItems.unauthenticated.current || + profileItems.unauthenticated.deprecated, contactUsButton: !language ? undefined : translations?.[language]?.masthead?.contact, diff --git a/packages/web-components/src/components/masthead/masthead-l1.ts b/packages/web-components/src/components/masthead/masthead-l1.ts index 9f5a1baf155..1ee8acd7040 100644 --- a/packages/web-components/src/components/masthead/masthead-l1.ts +++ b/packages/web-components/src/components/masthead/masthead-l1.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -447,6 +447,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) { ${title}${ChevronDown16()}
${announcement ? html`
@@ -551,7 +552,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) { -