diff --git a/.github/workflows/automerge-cwc-v2.yml b/.github/workflows/automerge-cwc-v2.yml deleted file mode 100644 index 51bc17df752..00000000000 --- a/.github/workflows/automerge-cwc-v2.yml +++ /dev/null @@ -1,29 +0,0 @@ -name: automerge-cwc-v2 -on: - push: - branches: - - 'main' - -concurrency: - group: automerge-cwc-v2-${{ github.ref }} - cancel-in-progress: true - -jobs: - automerge-mastheadv2: - if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom' - runs-on: ubuntu-20.04 - env: - SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} - steps: - - uses: actions/checkout@v3 - - name: Merge to feat/cwc-v2 - uses: devmasx/merge-branch@1.4.0 - with: - type: now - target_branch: 'feat/cwc-v2' - env: - GITHUB_TOKEN: ${{secrets.MERGE_ACTION}} - - uses: act10ns/slack@v2 - with: - status: ${{ job.status }} - if: failure() diff --git a/.github/workflows/e2e-integration.yml b/.github/workflows/e2e-integration.yml index c484c2409b2..e5a5640991d 100644 --- a/.github/workflows/e2e-integration.yml +++ b/.github/workflows/e2e-integration.yml @@ -2,7 +2,7 @@ name: e2e-integration on: push: - branches: [ main, release/* ] + branches: [ main, release/*, feat/masthead-v2, feat/masthead-v2-dev ] schedule: - cron: '0 20 * * 1-5' diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml index 0dfe242dcd4..fd4cbf13504 100644 --- a/.github/workflows/e2e-tests.yml +++ b/.github/workflows/e2e-tests.yml @@ -43,4 +43,4 @@ jobs: - name: Run e2e tests (chromium) if: matrix.browser == 'chromium' working-directory: packages/web-components - run: yarn test:e2e-storybook:test:no-percy \ No newline at end of file + run: yarn test:e2e-storybook:test:no-percy diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md index 05d194c799a..db80855f61b 100644 --- a/docs/dotcom-v2-migration.md +++ b/docs/dotcom-v2-migration.md @@ -38,6 +38,7 @@ For Carbon v11 migration guidance, see their | content-group-cards | This component is deprecated in v2 in favor for content-section/block & card-group components | | content-group-pictograms | This component is deprecated in v2 in favor for content-section/block content-item (pictogram variant) components | | content-group-simple | This component is deprecated in v2 in favor for content-group, image, & content-item components | +| content-item-horizontal | View changes [here](#content-item-horizontal) | | cta | View changes [here](#cta) | | cta-block | This component is deprecated in v2 in favor for content-section/block & content-item components | | cta-section | This component is deprecated in v2 in favor for content-section/block & content-item components | @@ -49,6 +50,7 @@ For Carbon v11 migration guidance, see their | image | View changes [here](#image) | | image-with-caption | This component is deprecated in v1 and has been removed in v2 in favor of the image component | | leadspace | View changes [here](#leadspace) | +| leadspace-with-search | View changes [here](#leadspace-with-search) | | link-list-section | This component is deprecated in v2 in favor for content-section/block & link-list end of section variant components | | link-with-icon | No API changes. | | logo-grid | This component is deprecated in v2 in favor for content-section/block & image-group components | @@ -73,13 +75,18 @@ For Carbon v11 migration guidance, see their ### Card -- `` has `icon-placement` property has been removed +- ``'s `icon-placement` property has been removed - Removed `border` property, clickable cards inherit the Carbon v11 experimental tile border style - New `aspect-ratio` property with '1:1', '2:1', '3:2', '4:3', and '16:9' as options - New `link` property which takes the place of the deprecated `card-link` +### Content item horizontal + +- `content-item-horizontal` changed names to `content-item-row` +- All components with `content-item-horizontal-*` also changed to `content-item-row-*` + ### CTA In Carbon for IBM.com v2, the CTA component (and all of its subcomponents) have @@ -110,6 +117,15 @@ information. - New `highlight` and `type-style` attributes for `leadspace-heading` +### Leadspace with Search + +- `` has been replaced with `` +- `` has been replaced with `` +- New highlight attribute in `dds-leadspace-heading` +- Deprecated background-media image variant +- Removed ``, ``, +``, `` + ### Universal banner -- `universal-banner` changed names to `global-banner` \ No newline at end of file +- `universal-banner` changed names to `global-banner` diff --git a/packages/carbon-web-components/src/components/modal/modal-story.scss b/packages/carbon-web-components/src/components/modal/modal-story.scss new file mode 100644 index 00000000000..aecea572ab1 --- /dev/null +++ b/packages/carbon-web-components/src/components/modal/modal-story.scss @@ -0,0 +1,15 @@ +// +// 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. +// + +/* stylelint-disable selector-type-no-unknown */ +bx-modal[open] { + // `@extend` usage in the corresponding rule in `modal.scss` causes the ruleset defined after `:host(bx-modal)`, + // which itself is OK, but it causes an adverse effect in Playwright WebKit environment + // TODO: Upgrade Playwright soon + opacity: 1; + visibility: inherit; +} diff --git a/packages/carbon-web-components/src/components/tabs/tabs.ts b/packages/carbon-web-components/src/components/tabs/tabs.ts index 1c9b55bfcc1..c8a58bbf020 100644 --- a/packages/carbon-web-components/src/components/tabs/tabs.ts +++ b/packages/carbon-web-components/src/components/tabs/tabs.ts @@ -9,7 +9,6 @@ import { html } from 'lit'; import { property, state, query } from 'lit/decorators.js'; -import { classMap } from 'lit/directives/class-map.js'; import { prefix } from '../../globals/settings'; import HostListenerMixin from '../../globals/mixins/host-listener'; import HostListener from '../../globals/decorators/host-listener'; @@ -310,7 +309,7 @@ export default class CDSTabs extends HostListenerMixin(CDSContentSwitcher) { }; /** - * Cleans-up and creats the intersection observer for the scrolling container. + * Cleans-up and creates the intersection observer for the scrolling container. * * @param [options] The options. * @param [options.create] `true` to create the new intersection observer. @@ -411,42 +410,64 @@ export default class CDSTabs extends HostListenerMixin(CDSContentSwitcher) { } } - render() { + /** + * Render the previous button if tablist is wider than container. + */ + protected renderPreviousButton() { const { _isIntersectionLeftTrackerInContent: isIntersectionLeftTrackerInContent, + } = this; + + return isIntersectionLeftTrackerInContent + ? html` + + ` + : null; + } + + /** + * Render the next button if tablist is wider than container. + */ + protected renderNextButton() { + const { _isIntersectionRightTrackerInContent: isIntersectionRightTrackerInContent, + } = this; + + return isIntersectionRightTrackerInContent + ? html` + + ` + : null; + } + + render() { + const { _assistiveStatusText: assistiveStatusText, _handleSlotchange: handleSlotchange, } = this; - const previousButtonClasses = classMap({ - [`${prefix}--tab--overflow-nav-button`]: true, - [`${prefix}--tabs__nav-caret-left`]: true, - [`${prefix}--tab--overflow-nav-button--previous`]: true, - [`${prefix}--tab--overflow-nav-button--hidden`]: - isIntersectionLeftTrackerInContent, - }); - const nextButtonClasses = classMap({ - [`${prefix}--tab--overflow-nav-button`]: true, - [`${prefix}--tabs__nav-caret-right`]: true, - [`${prefix}--tab--overflow-nav-button--next`]: true, - [`${prefix}--tab--overflow-nav-button--hidden`]: - isIntersectionRightTrackerInContent, - }); - return html` - - + ${this.renderPreviousButton()}
@@ -458,18 +479,7 @@ export default class CDSTabs extends HostListenerMixin(CDSContentSwitcher) {
- - + ${this.renderNextButton()}
CNAME +touch .nojekyll + +git init +git config user.name "carbon-bot" +git config user.email "carbon@us.ibm.com" +git fetch "https://git:${GH_TOKEN}@github.com/carbon-design-system/carbon-web-components.git" gh-pages + +set +e + +git add . +git commit -m "Deploy to GitHub Pages" + +if [ $? -eq 0 ]; then + git push --force "https://git:${GH_TOKEN}@github.com/carbon-design-system/carbon-web-components.git" main:gh-pages > /dev/null 2>&1 +fi diff --git a/packages/services-store/src/actions/__tests__/profileAPI.test.ts b/packages/services-store/src/actions/__tests__/profileAPI.test.ts index 1d04de16fc4..8d392e5a819 100644 --- a/packages/services-store/src/actions/__tests__/profileAPI.test.ts +++ b/packages/services-store/src/actions/__tests__/profileAPI.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. @@ -15,6 +15,7 @@ import { UNAUTHENTICATED_STATUS, PROFILE_API_ACTION, ProfileAPIState, + MASTHEAD_AUTH_METHOD, } from '../../types/profileAPI'; import convertValue from '../../../tests/utils/convert-value'; import { loadUserStatus, setUserStatus } from '../profileAPI'; @@ -43,7 +44,7 @@ describe('Redux actions for `ProfileAPI`', () => { user: UNAUTHENTICATED_STATUS, }); const store = mockStore(); - await store.dispatch(loadUserStatus()); + await store.dispatch(loadUserStatus(MASTHEAD_AUTH_METHOD.DEFAULT)); expect(convertValue(store.getActions())).toEqual([ { type: PROFILE_API_ACTION.SET_REQUEST_USER_STATUS_IN_PROGRESS, @@ -63,7 +64,7 @@ describe('Redux actions for `ProfileAPI`', () => { const store = mockStore(); let caught; try { - await store.dispatch(loadUserStatus()); + await store.dispatch(loadUserStatus(MASTHEAD_AUTH_METHOD.DEFAULT)); } catch (error) { caught = error; } diff --git a/packages/services-store/src/actions/__tests__/translateAPI.test.ts b/packages/services-store/src/actions/__tests__/translateAPI.test.ts index 06bb81ceacd..bd875da1eff 100644 --- a/packages/services-store/src/actions/__tests__/translateAPI.test.ts +++ b/packages/services-store/src/actions/__tests__/translateAPI.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. @@ -53,15 +53,21 @@ const mockTranslation: Partial = { }, }; +const endpoint = + '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2'; + describe('Redux actions for `TranslateAPI`', () => { it('dispatches the action to set translation data', () => { const store = mockStore(); - store.dispatch(setTranslation('lang-foo', mockTranslation as Translation)); + store.dispatch( + setTranslation('lang-foo', mockTranslation as Translation, endpoint) + ); expect(store.getActions()).toEqual([ { type: TRANSLATE_API_ACTION.SET_TRANSLATION, language: 'lang-foo', translation: mockTranslation, + endpoint, }, ]); }); diff --git a/packages/services-store/src/actions/cloudAccountAuthAPI.ts b/packages/services-store/src/actions/cloudAccountAuthAPI.ts index 61a77332bba..ab3c91ceb91 100644 --- a/packages/services-store/src/actions/cloudAccountAuthAPI.ts +++ b/packages/services-store/src/actions/cloudAccountAuthAPI.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2021, 2022 + * 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. diff --git a/packages/services-store/src/actions/profileAPI.ts b/packages/services-store/src/actions/profileAPI.ts index e1f8d2c9974..f3220f9c15a 100644 --- a/packages/services-store/src/actions/profileAPI.ts +++ b/packages/services-store/src/actions/profileAPI.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. @@ -13,6 +13,7 @@ import { UserStatus, PROFILE_API_ACTION, ProfileAPIState, + MASTHEAD_AUTH_METHOD, } from '../types/profileAPI'; /** @@ -58,14 +59,27 @@ export type ProfileAPIActions = /** * @returns A Redux action that sends a REST call for user authentication status. */ -export function loadUserStatus(): ThunkAction< +export function loadUserStatus( + authMethod: MASTHEAD_AUTH_METHOD +): ThunkAction< Promise, { profileAPI: ProfileAPIState }, void, ProfileAPIActions > { return async (dispatch) => { - const promiseStatus: Promise = ProfileAPI.getUserStatus(); + let promiseStatus: Promise; + switch (authMethod) { + case MASTHEAD_AUTH_METHOD.COOKIE: + promiseStatus = ProfileAPI.checkCloudCookie(); + break; + case MASTHEAD_AUTH_METHOD.DOCS_API: + promiseStatus = ProfileAPI.checkCloudDocsAPI(); + break; + default: + promiseStatus = ProfileAPI.getUserStatus(); + } + dispatch(setRequestUserStatusInProgress(promiseStatus)); try { dispatch(setUserStatus(await promiseStatus)); diff --git a/packages/services-store/src/actions/translateAPI.ts b/packages/services-store/src/actions/translateAPI.ts index 15d341dc4c7..16c1f7641a8 100644 --- a/packages/services-store/src/actions/translateAPI.ts +++ b/packages/services-store/src/actions/translateAPI.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. @@ -24,12 +24,14 @@ import { */ export function setRequestTranslationInProgress( language: string, - request: Promise + request: Promise, + endpoint ) { return { type: TRANSLATE_API_ACTION.SET_REQUEST_TRANSLATION_IN_PROGRESS, language, request, + endpoint, }; } @@ -52,11 +54,16 @@ export function setErrorRequestTranslation(language: string, error: Error) { * @param translation The translation data from the REST call. * @returns A Redux action to set the given translation data. */ -export function setTranslation(language: string, translation: Translation) { +export function setTranslation( + language: string, + translation: Translation, + endpoint +) { return { type: TRANSLATE_API_ACTION.SET_TRANSLATION, language, translation, + endpoint, }; } @@ -87,9 +94,11 @@ export function loadTranslation( const effectiveLanguage: string = language ?? (await dispatch(loadLanguage() as any)); const { requestsTranslation = {} } = getState().translateAPI ?? {}; - const { [effectiveLanguage]: requestTranslation } = requestsTranslation; - if (requestTranslation) { - return requestTranslation; + if (requestsTranslation?.[effectiveLanguage]) { + const requestTranslation = requestsTranslation?.[effectiveLanguage]; + if (requestTranslation && requestTranslation.endpoint === dataEndpoint) { + return requestTranslation; + } } const [primary, country] = effectiveLanguage.split('-'); const promiseTranslation: Promise = @@ -101,10 +110,20 @@ export function loadTranslation( dataEndpoint ); dispatch( - setRequestTranslationInProgress(effectiveLanguage, promiseTranslation) + setRequestTranslationInProgress( + effectiveLanguage, + promiseTranslation, + dataEndpoint + ) ); try { - dispatch(setTranslation(effectiveLanguage, await promiseTranslation)); + dispatch( + setTranslation( + effectiveLanguage, + await promiseTranslation, + dataEndpoint + ) + ); } catch (error) { dispatch(setErrorRequestTranslation(effectiveLanguage, error as Error)); } diff --git a/packages/services-store/src/reducers/__tests__/translateAPI.test.ts b/packages/services-store/src/reducers/__tests__/translateAPI.test.ts index e97c789802e..af002cd8dad 100644 --- a/packages/services-store/src/reducers/__tests__/translateAPI.test.ts +++ b/packages/services-store/src/reducers/__tests__/translateAPI.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. @@ -40,6 +40,9 @@ const mockTranslation: Partial = { }, }; +const endpoint = + '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2'; + describe('Redux reducers for `LocaleAPI`', () => { it('should return the state unmodified for unknown action', () => { const state = { @@ -58,6 +61,7 @@ describe('Redux reducers for `LocaleAPI`', () => { type: TRANSLATE_API_ACTION.SET_REQUEST_TRANSLATION_IN_PROGRESS, language: 'lang-foo', request, + endpoint, }) ) ).toEqual({ @@ -66,6 +70,7 @@ describe('Redux reducers for `LocaleAPI`', () => { }, requestsTranslation: { 'lang-foo': 'PROMISE', + endpoint, }, }); }); @@ -96,6 +101,7 @@ describe('Redux reducers for `LocaleAPI`', () => { type: TRANSLATE_API_ACTION.SET_TRANSLATION, language: 'lang-foo', translation: mockTranslation as Translation, + endpoint, }) ) ).toEqual({ @@ -104,6 +110,7 @@ describe('Redux reducers for `LocaleAPI`', () => { }, requestsTranslation: { 'lang-foo': 'PROMISE', + endpoint, }, translations: { 'lang-foo': mockTranslation, diff --git a/packages/services-store/src/reducers/translateAPI.ts b/packages/services-store/src/reducers/translateAPI.ts index c45509711cf..a5a3227979b 100644 --- a/packages/services-store/src/reducers/translateAPI.ts +++ b/packages/services-store/src/reducers/translateAPI.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. @@ -26,7 +26,7 @@ export default function reducer( ): TranslateAPIState { switch (action.type) { case TRANSLATE_API_ACTION.SET_REQUEST_TRANSLATION_IN_PROGRESS: { - const { language, request } = action as ReturnType< + const { language, request, endpoint } = action as ReturnType< typeof setRequestTranslationInProgress >; return { @@ -38,6 +38,7 @@ export default function reducer( requestsTranslation: { ...(state.requestsTranslation || {}), [language]: request, + endpoint, }, }; } @@ -58,7 +59,7 @@ export default function reducer( }; } case TRANSLATE_API_ACTION.SET_TRANSLATION: { - const { language, translation } = action as ReturnType< + const { language, translation, endpoint } = action as ReturnType< typeof setTranslation >; return { @@ -71,6 +72,7 @@ export default function reducer( requestsTranslation: { ...(state.requestsTranslation || {}), [language]: Promise.resolve(translation), + endpoint, }, translations: { ...(state.translations || {}), diff --git a/packages/services-store/src/types/profileAPI.ts b/packages/services-store/src/types/profileAPI.ts index 501d00ff1b6..fc44f34113e 100644 --- a/packages/services-store/src/types/profileAPI.ts +++ b/packages/services-store/src/types/profileAPI.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2021 + * Copyright IBM Corp. 2020, 2022 * * 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,6 +22,11 @@ export interface UserStatus { */ export const UNAUTHENTICATED_STATUS = 'Unauthenticated'; +/** + * Cloud Unauthenticated user status + */ +export const CLOUD_UNAUTHENTICATED_STATUS = 'anonymous'; + /** * The Redux action ID for `ProfileAPI`. */ @@ -41,6 +46,15 @@ export enum PROFILE_API_ACTION { SET_USER_STATUS = 'SET_USER_STATUS', } +/** + * Authentication status types. + */ +export enum MASTHEAD_AUTH_METHOD { + DEFAULT = 'profile-api', + COOKIE = 'cookie', + DOCS_API = 'docs-api', +} + /** * A Redux substate for `ProfileAPI`. */ diff --git a/packages/services-store/src/types/translateAPI.ts b/packages/services-store/src/types/translateAPI.ts index 7a24f628efd..b9884009b36 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, 2022 + * 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. @@ -17,6 +17,7 @@ export interface BasicLink { highlightedLink?: boolean; url?: string; description?: string; + target?: string; } /** @@ -78,18 +79,61 @@ export interface MastheadLink { url?: string; hasMenu?: boolean; hasMegapanel?: boolean; + megamenuLayout?: 'tab' | 'list'; menuSections?: MastheadMenuSection[]; } /** * A menu section for masthead + * + * @deprecated */ -export interface MastheadL1 { +export interface LegacyMastheadL1 { title: string; url?: string; menuItems?: MastheadLink[]; } +/** + * A menu section for masthead + */ +export interface MastheadL1 { + title: string; + url?: string; + menuItems: L1MenuItem[]; + actions?: { + cta?: BasicLink; + login?: BasicLink; + }; +} + +export interface L1MenuItem extends BasicLink { + submenu?: L1Submenu; +} + +export interface L1Submenu { + announcement?: string; // From AEM rich text editor + menuSections: L1SubmenuSection[]; // maximum of 3 in outer array + columns?: 1 | 2 | 3; // Should default to 1 if unspecified + footer?: { + title: string; + url: string; + }; +} + +export interface L1SubmenuSection { + span: 1 | 2; // Only used if containing L1Submenu.columns === 3. + heading?: L1SubmenuSectionHeading; + items?: BasicLink[]; +} + +export interface L1SubmenuSectionHeading { + headingLevel?: 2 | 3 | 4 | 5 | 6; + title: string; + url?: string; + description?: string; +} + /** * An profile item in masthead. */ @@ -237,7 +281,10 @@ export interface TranslateAPIState { /** * The requests for the translation data, keyed by the language. */ - requestsTranslation?: { [language: string]: Promise }; + requestsTranslation?: { + [language: string]: Promise | string; + endpoint: string; + }; /** * The status of whether requests for the translation data are in progress, keyed by the language. @@ -249,3 +296,29 @@ 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/scripts/rollup.config.js b/packages/services/scripts/rollup.config.js index 53a1b197ce7..31435c65bad 100644 --- a/packages/services/scripts/rollup.config.js +++ b/packages/services/scripts/rollup.config.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/services/src/services/Analytics/Analytics.js b/packages/services/src/services/Analytics/Analytics.js index 3767a617aa7..177692a7006 100644 --- a/packages/services/src/services/Analytics/Analytics.js +++ b/packages/services/src/services/Analytics/Analytics.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/services/src/services/CloudAccountAuth/CloudAccountAuth.js b/packages/services/src/services/CloudAccountAuth/CloudAccountAuth.js index 80a7cb3c816..a1ee51f52a5 100644 --- a/packages/services/src/services/CloudAccountAuth/CloudAccountAuth.js +++ b/packages/services/src/services/CloudAccountAuth/CloudAccountAuth.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2021, 2022 + * 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. diff --git a/packages/services/src/services/DDO/DDO.js b/packages/services/src/services/DDO/DDO.js index 6b853eb8fa7..bf6a6bb7ea2 100644 --- a/packages/services/src/services/DDO/DDO.js +++ b/packages/services/src/services/DDO/DDO.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/services/src/services/DDO/__tests__/DDO.test.js b/packages/services/src/services/DDO/__tests__/DDO.test.js index b47e00c4aa0..d75d3447713 100644 --- a/packages/services/src/services/DDO/__tests__/DDO.test.js +++ b/packages/services/src/services/DDO/__tests__/DDO.test.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/services/src/services/Locale/Locale.js b/packages/services/src/services/Locale/Locale.js index 76172a9e829..4b054d9b3d9 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, 2022 + * 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. diff --git a/packages/services/src/services/Locale/__tests__/Locale.test.js b/packages/services/src/services/Locale/__tests__/Locale.test.js index 2a66862c139..ec4feef65a1 100644 --- a/packages/services/src/services/Locale/__tests__/Locale.test.js +++ b/packages/services/src/services/Locale/__tests__/Locale.test.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/services/src/services/Profile/Profile.js b/packages/services/src/services/Profile/Profile.js index 4908d5e2d30..e870d5e70b2 100644 --- a/packages/services/src/services/Profile/Profile.js +++ b/packages/services/src/services/Profile/Profile.js @@ -1,10 +1,11 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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 axios from 'axios'; +import Cookies from 'js-cookie'; /** * @constant {string | string} Host for the profile status API call @@ -29,6 +30,14 @@ const _version = (process && process.env.PROFILE_VERSION) || 'v1'; */ const _endpoint = `${_host}/${_version}/mgmt/idaas/user/status/`; +/** + * The cookie name for determining user login status for cloud.ibm.com. + * + * @type {string} + * @private + */ +const _cookieName = 'com.ibm.cloud.iam.LoggedIn.prod'; + /** * Profile API class with methods for checking user authentication for ibm.com */ @@ -59,6 +68,42 @@ class ProfileAPI { return { user: 'Unauthenticated' }; }); } + + /** + * retrieve the cloud login status via cookie + * + * + * @returns {string} string determining login status + */ + static checkCloudCookie() { + const cloudLogin = Cookies.get(_cookieName); + + return { user: cloudLogin === '1' ? 'authenticated' : 'anonymous' }; + } + + /** + * retrieve the cloud login status via api + * + * + * @returns {string} string determining login status + */ + static async checkCloudDocsAPI() { + const cloudLogin = await axios + .get('/api/v6/selected-account?profile=true', { + headers: { + Accept: 'application/json', + }, + }) + .then((response) => { + return response.status === 200 ? 'authenticated' : 'anonymous'; + }) + .catch((error) => { + console.error(error); + return 'anonymous'; + }); + + return { user: cloudLogin }; + } } export default ProfileAPI; diff --git a/packages/services/src/services/SearchTypeahead/SearchTypeahead.js b/packages/services/src/services/SearchTypeahead/SearchTypeahead.js index b73520e3b1c..6ec2902a14a 100644 --- a/packages/services/src/services/SearchTypeahead/SearchTypeahead.js +++ b/packages/services/src/services/SearchTypeahead/SearchTypeahead.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/services/src/services/Translation/Translation.js b/packages/services/src/services/Translation/Translation.js index e2fca2c359c..0a8dd115844 100644 --- a/packages/services/src/services/Translation/Translation.js +++ b/packages/services/src/services/Translation/Translation.js @@ -25,7 +25,7 @@ const _host = * @private */ const _c4dEndpointDefault = - '/common/carbon-for-ibm-dotcom/translations/masthead-footer'; + '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2.1'; /** * Translation API endpoint diff --git a/packages/services/src/services/VideoPlayer/VideoPlayer.js b/packages/services/src/services/VideoPlayer/VideoPlayer.js index c46de13db38..4577e3bd770 100644 --- a/packages/services/src/services/VideoPlayer/VideoPlayer.js +++ b/packages/services/src/services/VideoPlayer/VideoPlayer.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/services/src/services/global/global.js b/packages/services/src/services/global/global.js index 262fea969bb..3c747c557ab 100644 --- a/packages/services/src/services/global/global.js +++ b/packages/services/src/services/global/global.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/stylelint-config-ibmdotcom/rules/possible-errors.js b/packages/stylelint-config-ibmdotcom/rules/possible-errors.js index 8158516aaee..c6802e5735f 100644 --- a/packages/stylelint-config-ibmdotcom/rules/possible-errors.js +++ b/packages/stylelint-config-ibmdotcom/rules/possible-errors.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2018, 2018 + * Copyright IBM Corp. 2018, 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. @@ -42,8 +42,18 @@ module.exports = { 'block-no-empty': true, // Selector - 'selector-pseudo-class-no-unknown': true, - 'selector-pseudo-element-no-unknown': true, + 'selector-pseudo-class-no-unknown': [ + true, + { + ignorePseudoClasses: ['part', 'is', 'where'], + }, + ], + 'selector-pseudo-element-no-unknown': [ + true, + { + ignorePseudoElements: ['part'], + }, + ], 'selector-type-no-unknown': true, // Media feature diff --git a/packages/styles/carbon.yml b/packages/styles/carbon.yml index a46c9f1e841..a31c8dc2955 100644 --- a/packages/styles/carbon.yml +++ b/packages/styles/carbon.yml @@ -371,17 +371,17 @@ assets: thumbnailPath: ../../thumbnails/content-item.svg tags: - content-element - content-item-horizontal: - name: Content item horizontal + content-item-row: + name: Content item row description: - Content item horizontal component displays information in a horizontal + Content item row component displays information in a horizontal orientation. - externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-horizontal + externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-row status: stable type: component platform: web noIndex: true - thumbnailPath: ../../thumbnails/content-item-horizontal.svg + thumbnailPath: ../../thumbnails/content-item-row.svg tags: - content-block - content-element diff --git a/packages/styles/gulp/tasks/watch.js b/packages/styles/gulp/tasks/watch.js index c20a26eee37..3c892410c25 100644 --- a/packages/styles/gulp/tasks/watch.js +++ b/packages/styles/gulp/tasks/watch.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020 + * 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. diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss index 0e7d16b7512..ce132fc975b 100644 --- a/packages/styles/scss/components/card/_card.scss +++ b/packages/styles/scss/components/card/_card.scss @@ -23,6 +23,7 @@ @mixin card { .#{$prefix}--card, :host(#{$c4d-prefix}-card), + :host(#{$c4d-prefix}-region-item) .#{$prefix}--link, :host(#{$c4d-prefix}-card-cta), :host(#{$c4d-prefix}-card-in-card), :host(#{$c4d-prefix}-card-group-item), @@ -34,6 +35,7 @@ .#{$prefix}--card, :host(#{$c4d-prefix}-card), + :host(#{$c4d-prefix}-region-item) .#{$prefix}--link, :host(#{$c4d-prefix}-link-list-item-card), :host(#{$c4d-prefix}-card-group-item), :host(#{$c4d-prefix}-card-group-item) .#{$prefix}--card, @@ -760,7 +762,8 @@ } } - :host(#{$c4d-prefix}-card[disabled]) { + :host(#{$c4d-prefix}-card[disabled]), + :host(#{$c4d-prefix}-region-item[disabled]) { .#{$prefix}--card { cursor: not-allowed; } diff --git a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss index 4a2ac664dd3..941f7f423e1 100644 --- a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss +++ b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss @@ -9,7 +9,7 @@ @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/spacing' as *; @use '../../internal/content-block'; -@use '../content-item-horizontal'; +@use '../content-item-row'; @use '../../globals/vars' as *; @mixin content-block-horizontal { @@ -44,9 +44,7 @@ margin-bottom: $spacing-07; } - :host(#{$c4d-prefix}-content-item-horizontal):last-child, - .#{$prefix}--content-block-horizontal - .#{$prefix}--content-item-horizontal__item:last-child { + :host(#{$c4d-prefix}-content-item-row):last-child { @include breakpoint(max) { padding-bottom: $spacing-13; } diff --git a/packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss similarity index 61% rename from packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss rename to packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss index 2efd3d00ee4..73f68f4dc57 100644 --- a/packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss +++ b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2022 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -10,12 +10,13 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities' as *; @use '../../globals/vars' as *; @use '../link-list'; -@mixin content-item-horizontal-media { - :host(#{$c4d-prefix}-content-item-horizontal-media) { - padding: $spacing-07 $spacing-05 $spacing-10; +@mixin content-item-row-media { + :host(#{$c4d-prefix}-content-item-row-media) { + padding: $spacing-07 0 $spacing-10; display: block; @include breakpoint(md) { @@ -26,61 +27,61 @@ padding-top: $spacing-07; padding-bottom: $spacing-10; } + + ::slotted([slot='media']) { + margin-top: $spacing-07; + + @include breakpoint(md) { + margin-top: $spacing-09; + } + + @include breakpoint(lg) { + margin-top: 0; + } + } } - :host(#{$c4d-prefix}-content-item-horizontal-media), - :host(#{$c4d-prefix}-content-item-horizontal-media-featured) + :host(#{$c4d-prefix}-content-item-row-media), + :host(#{$c4d-prefix}-content-item-row-media-featured) ::slotted([slot='heading']), - :host(#{$c4d-prefix}-content-item-horizontal-media-copy) - ::slotted(:not([slot])), - :host(#{$c4d-prefix}-content-item-horizontal-eyebrow), - .#{$prefix}--content-item-horizontal__item--eyebrow, - .#{$prefix}--content-item-horizontal__item--heading, - .#{$prefix}--content-item-horizontal__item--copy { + :host(#{$c4d-prefix}-content-item-row-media-copy) ::slotted(:not([slot])), + :host(#{$c4d-prefix}-content-item-row-eyebrow) { width: 100%; max-width: 100%; min-width: 0; } - :host(#{$c4d-prefix}-content-item-horizontal-eyebrow), - .#{$prefix}--content-item-horizontal__item--eyebrow { + :host(#{$c4d-prefix}-content-item-row-eyebrow) { color: $text-helper; padding-bottom: $spacing-03; @include type-style('label-01'); } - :host(#{$c4d-prefix}-content-item-horizontal-media) - ::slotted([slot='heading']), - :host(#{$c4d-prefix}-content-item-horizontal-media-featured) - ::slotted([slot='heading']), - .#{$prefix}--content-item-horizontal__item--heading { + :host(#{$c4d-prefix}-content-item-row-media) ::slotted([slot='heading']), + :host(#{$c4d-prefix}-content-item-row-media-featured) + ::slotted([slot='heading']) { display: block; color: $text-primary; margin-bottom: $spacing-07; @include type-style('fluid-heading-03', true); } - :host(#{$c4d-prefix}-content-item-horizontal-media-copy) - ::slotted(:not([slot])) { - margin-bottom: $spacing-07; + :host(#{$c4d-prefix}-content-item-row-media-copy) ::slotted(:not([slot])) { max-width: rem(640px); p { color: $text-primary; } } - :host(#{$c4d-prefix}-content-item-horizontal-media-video) { + :host(#{$c4d-prefix}-content-item-row-media-video) { position: relative; text-align: left; } - :host(#{$c4d-prefix}-content-item-horizontal-media) - .#{$prefix}--content-item__cta, - :host(#{$c4d-prefix}-content-item-horizontal-media-featured) - .#{$prefix}--content-item__cta, - .#{$prefix}--content-item-horizontal__item--cta { + :host(#{$c4d-prefix}-content-item-row-media) .#{$prefix}--content-item__cta, + :host(#{$c4d-prefix}-content-item-row-media-featured) + .#{$prefix}--content-item__cta { margin-top: auto; - margin-bottom: $spacing-07; .#{$prefix}--link-list { padding: 0; @@ -96,7 +97,7 @@ } } - .#{$prefix}--content-item-horizontal__row { + .#{$prefix}--content-item-row__row { width: 100%; display: grid; grid-auto-flow: dense; @@ -107,7 +108,7 @@ grid-template-columns: repeat(12, 1fr); } - .#{$prefix}--content-item-horizontal__col { + .#{$prefix}--content-item-row__col { text-align: left; grid-column: 1 / span 4; @@ -123,8 +124,8 @@ } } - &.#{$prefix}--content-item-horizontal-media__align-left { - .#{$prefix}--content-item-horizontal__col { + &.#{$prefix}--content-item-row-media__align-left { + .#{$prefix}--content-item-row__col { &:first-of-type { @include breakpoint(lg) { margin-inline-end: 0; @@ -142,7 +143,7 @@ } } - :host(#{$c4d-prefix}-content-item-horizontal-media-featured) { + :host(#{$c4d-prefix}-content-item-row-media-featured) { display: block; position: relative; padding-block-start: $spacing-07; @@ -158,8 +159,8 @@ background-color: $layer-accent-01; } - .#{$prefix}--content-item-horizontal__row { - .#{$prefix}--content-item-horizontal__col { + .#{$prefix}--content-item-row__row { + .#{$prefix}--content-item-row__col { &:last-of-type { @include breakpoint-down(md) { margin-block-start: 0; @@ -170,10 +171,17 @@ ::slotted([slot='media']) { grid-column: 1 / span 4; + margin-top: $spacing-07; + + @include breakpoint(md) { + margin-top: $spacing-09; + } + @include breakpoint(lg) { grid-column: 1 / span 12; } } + ::slotted(#{$c4d-prefix}-image) { max-width: none; margin-top: 0; diff --git a/packages/styles/scss/components/content-item-horizontal/_index.scss b/packages/styles/scss/components/content-item-row-media/_index.scss similarity index 58% rename from packages/styles/scss/components/content-item-horizontal/_index.scss rename to packages/styles/scss/components/content-item-row-media/_index.scss index c7f9d4f0794..7398bdaa295 100644 --- a/packages/styles/scss/components/content-item-horizontal/_index.scss +++ b/packages/styles/scss/components/content-item-row-media/_index.scss @@ -5,7 +5,7 @@ // LICENSE file in the root directory of this source tree. // -@forward 'content-item-horizontal'; -@use 'content-item-horizontal'; +@forward 'content-item-row-media'; +@use 'content-item-row-media'; -@include content-item-horizontal.content-item-horizontal; +@include content-item-row-media.content-item-row-media; diff --git a/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss b/packages/styles/scss/components/content-item-row/_content-item-row.scss similarity index 54% rename from packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss rename to packages/styles/scss/components/content-item-row/_content-item-row.scss index 7a19e83ff29..63613781593 100644 --- a/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss +++ b/packages/styles/scss/components/content-item-row/_content-item-row.scss @@ -10,20 +10,17 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities' as *; @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; @use '../link-list'; -@mixin content-item-horizontal { - // Web component - :host(#{$c4d-prefix}-content-item-horizontal), - // React - .#{$prefix}--content-item-horizontal__item { +@mixin content-item-row { + :host(#{$c4d-prefix}-content-item-row) { @include make-row; border-top: 1px solid $layer-accent-01; - padding-left: $spacing-05; - padding-right: $spacing-05; + margin: 0; @include breakpoint(sm) { padding-top: $spacing-07; @@ -34,27 +31,9 @@ padding-top: $spacing-07; padding-bottom: $spacing-10; } - - &[thumbnail] { - @include breakpoint(md) { - min-height: rem(306px); - } - - @include breakpoint(lg) { - min-height: rem(272px); - } - - @include breakpoint(xlg) { - min-height: rem(252px); - } - } } - :host(#{$c4d-prefix}-content-item-horizontal) { - margin: 0; - } - - .#{$prefix}--content-item-horizontal__row { + .#{$prefix}--content-item-row__row { min-height: $spacing-13; width: 100%; display: flex; @@ -63,16 +42,13 @@ flex-direction: row; } - :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] & { + :host(#{$c4d-prefix}-content-item-row)[thumbnail] & { justify-content: space-between; min-height: auto; } } - .#{$prefix}--content-item-horizontal__col { - // React styles - only accounting for the default variation - @include make-col-ready; - + .#{$prefix}--content-item-row__col { // Web component layout styles - accommodating the thumbnail variation &--1, &--2 { @@ -90,7 +66,7 @@ width: auto; } - :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] & { + :host(#{$c4d-prefix}-content-item-row)[thumbnail] & { @include breakpoint(md) { @include make-col(4, 8); } @@ -115,7 +91,7 @@ grid-column: 9 / span 4; grid-row: 1 / span 1; } - :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] & { + :host(#{$c4d-prefix}-content-item-row)[thumbnail] & { @include breakpoint(md) { @include make-col(3, 8); } @@ -127,13 +103,9 @@ } } - // Web component - .#{$prefix}--content-item-horizontal__heading-wrapper, - .#{$prefix}--content-item-horizontal__content-wrapper, - // React - .#{$prefix}--content-item-horizontal__col:first-of-type, - .#{$prefix}--content-item-horizontal__col:last-of-type { - :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] & { + .#{$prefix}--content-item-row__heading-wrapper, + .#{$prefix}--content-item-row__content-wrapper { + :host(#{$c4d-prefix}-content-item-row)[thumbnail] & { @include make-col(4, 4); @include breakpoint(lg) { @@ -142,10 +114,11 @@ } } - // Web component - .#{$prefix}--content-item-horizontal__heading-wrapper, - // React - .#{$prefix}--content-item-horizontal__col:first-of-type { + .#{$prefix}--content-item-row__heading-wrapper { + grid-column: 1 / span 4; + padding-left: 0; + padding-right: 0; + @include breakpoint(md) { @include make-col(6, 12); } @@ -154,30 +127,23 @@ } } - // Web component - .#{$prefix}--content-item-horizontal__content-wrapper, - // React - .#{$prefix}--content-item-horizontal__col:last-of-type { + .#{$prefix}--content-item-row__content-wrapper { + box-sizing: border-box; display: flex; flex-direction: column; width: 100%; + grid-column: 1 / span 4; @include breakpoint(lg) { @include make-col(8, 12); display: flex; - } - } - - .#{$prefix}--content-item-horizontal__content-wrapper { - grid-column: 1 / span 4; - @include breakpoint(lg) { grid-column: 5 / span 4; padding-left: $spacing-04; } } - .#{$prefix}--content-item-horizontal__content-wrapper_with-media { + .#{$prefix}--content-item-row__content-wrapper_with-media { width: 100%; @include breakpoint(lg) { @include make-col(8, 12); @@ -186,35 +152,26 @@ } } - :host(#{$c4d-prefix}-content-item-horizontal) ::slotted([slot='media']) { + :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='media']) { display: block; padding-top: $spacing-07; - } - - :host(#{$c4d-prefix}-content-item-horizontal) ::slotted([slot='heading']), - :host(#{$c4d-prefix}-content-item-horizontal-copy) ::slotted(:not([slot])), - :host(#{$c4d-prefix}-content-item-horizontal-eyebrow), - .#{$prefix}--content-item-horizontal__item--eyebrow, - .#{$prefix}--content-item-horizontal__item--heading, - .#{$prefix}--content-item-horizontal__item--copy { @include breakpoint(md) { - max-width: 90%; + padding-top: $spacing-09; } } - :host(#{$c4d-prefix}-content-item-horizontal-copy) ::slotted(:not([slot])) { + :host(#{$c4d-prefix}-content-item-row-copy) ::slotted(:not([slot])) { max-width: rem(640px); } - :host(#{$c4d-prefix}-content-item-horizontal-eyebrow), - .#{$prefix}--content-item-horizontal__item--eyebrow { + :host(#{$c4d-prefix}-content-item-row-eyebrow) { + display: block; color: $text-helper; padding-bottom: $spacing-03; @include type-style('label-02'); } - :host(#{$c4d-prefix}-content-item-horizontal) ::slotted([slot='heading']), - .#{$prefix}--content-item-horizontal__item--heading { + :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='heading']) { display: block; color: $text-primary; margin-bottom: $spacing-07; @@ -230,27 +187,34 @@ } } - :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] { + :host(#{$c4d-prefix}-content-item-row)[thumbnail] { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; @include breakpoint(md) { + min-height: rem(306px); grid-template-columns: repeat(8, 1fr); column-gap: $spacing-07; } + @include breakpoint(lg) { + min-height: rem(272px); grid-template-columns: repeat(12, 1fr); } + + @include breakpoint(xlg) { + min-height: rem(252px); + } } - :host(#{$c4d-prefix}-content-item-horizontal[thumbnail]) - .#{$prefix}--content-item-horizontal__heading-wrapper { + :host(#{$c4d-prefix}-content-item-row[thumbnail]) + .#{$prefix}--content-item-row__heading-wrapper { max-width: 100%; } - :host(#{$c4d-prefix}-content-item-horizontal[thumbnail]) - .#{$prefix}--content-item-horizontal__content-wrapper { + :host(#{$c4d-prefix}-content-item-row[thumbnail]) + .#{$prefix}--content-item-row__content-wrapper { @include breakpoint-down(md) { margin-bottom: $spacing-07; } @@ -259,8 +223,8 @@ padding-left: 0; } - :host(#{$c4d-prefix}-content-item-horizontal[thumbnail]) { - .#{$prefix}--content-item-horizontal__body-wrapper { + :host(#{$c4d-prefix}-content-item-row[thumbnail]) { + .#{$prefix}--content-item-row__body-wrapper { grid-column: 1 / span 4; max-width: 100%; @@ -269,7 +233,7 @@ display: contents; } } - .#{$prefix}--content-item-horizontal__col--2 { + .#{$prefix}--content-item-row__col--2 { max-width: 100%; grid-column: 1 / span 4; @include breakpoint(md) { @@ -281,24 +245,7 @@ } } - .#{$prefix}--content-item-horizontal__heading-wrapper { - grid-column: 1 / span 4; - padding-left: 0; - padding-right: 0; - } - - :host(#{$c4d-prefix}-content-item-horizontal-copy) ::slotted(:not([slot])), - .#{$prefix}--content-item-horizontal__item--copy { - margin-bottom: $spacing-07; - } - - :host(#{$c4d-prefix}-content-item-horizontal-thumbnail-copy) - ::slotted(#{$c4d-prefix}-content-item-paragraph) { - margin-bottom: $spacing-07; - } - - :host(#{$c4d-prefix}-content-item-horizontal) .#{$prefix}--content-item__cta, - .#{$prefix}--content-item-horizontal__item--cta { + :host(#{$c4d-prefix}-content-item-row) .#{$prefix}--content-item__cta { .#{$prefix}--link-list { padding: 0; @@ -312,7 +259,7 @@ } } - :host(#{$c4d-prefix}-content-item-horizontal) ::slotted([slot='thumbnail']) { + :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='thumbnail']) { @include breakpoint(md) { @include make-col(3, 3); diff --git a/packages/styles/scss/components/content-item-horizontal-media/_index.scss b/packages/styles/scss/components/content-item-row/_index.scss similarity index 54% rename from packages/styles/scss/components/content-item-horizontal-media/_index.scss rename to packages/styles/scss/components/content-item-row/_index.scss index 78cf2edae1d..1cb41ca9bdc 100644 --- a/packages/styles/scss/components/content-item-horizontal-media/_index.scss +++ b/packages/styles/scss/components/content-item-row/_index.scss @@ -5,7 +5,7 @@ // LICENSE file in the root directory of this source tree. // -@forward 'content-item-horizontal-media'; -@use 'content-item-horizontal-media'; +@forward 'content-item-row'; +@use 'content-item-row'; -@include content-item-horizontal-media.content-item-horizontal-media; +@include content-item-row.content-item-row; diff --git a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss index 9f8c8edef03..ec662e53e4c 100644 --- a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss +++ b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2022 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. diff --git a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss b/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss index c301a1a9df5..6eb61801e0e 100644 --- a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss +++ b/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2022 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -17,145 +17,13 @@ @use '../leadspace-block'; @mixin leadspace-with-search { - .#{$prefix}--leadspace-with-search { - padding-top: $spacing-09; - padding-bottom: $spacing-09; - border-bottom: 1px solid $layer-accent-01; - @include make-container; - @include breakpoint(lg) { - padding-top: $spacing-10; - padding-bottom: $spacing-10; - } - &__row { - @include make-row; - } - &__content { - @include make-col(4, 4); - @include make-col-ready; - @include breakpoint(lg) { - @include make-col(12, 16); - @include make-col-offset(4, 16); - } - } - &__heading { - color: $text-primary; - @include type-style('fluid-heading-06', true); - } - &__copy { - color: $text-primary; - @include type-style('fluid-heading-05', true); - @include breakpoint(md) { - @include make-col(6, 8); - } - @include breakpoint(lg) { - @include make-col(8, 16); - } - } - &__search { - margin-top: $spacing-07; - svg.bx--search-magnifier { - height: $spacing-06; - width: $spacing-06; - @include breakpoint(lg) { - height: $spacing-07; - width: $spacing-07; - } - } - button.bx--search-close { - height: 100%; - width: $spacing-09; - @include breakpoint(md) { - width: $spacing-10; - svg { - height: $spacing-06; - width: $spacing-06; - } - } - } - @include breakpoint(md) { - @include make-col(6, 8); - } - - @include breakpoint(lg) { - height: $spacing-10; - margin-top: $spacing-10; - @include make-col(8, 10); - - input.bx--search-input { - height: 100%; - color: $text-primary; - padding-left: carbon--mini-units(8); - - // @include type-style('fluid-heading-03'); - - &::placeholder { - color: $text-helper; - // @include type-style('fluid-heading-03'); - } - &:focus::placeholder { - color: transparent; - } - } - } - } - } - :host(#{$c4d-prefix}-leadspace-with-search) { display: block; position: relative; - &[has-image] { - @include breakpoint-down(lg) { - ::slotted([slot='hr']) { - display: none; - } - } - - .#{$prefix}--content-layout { - @include breakpoint-down(md) { - padding-bottom: 0; - } - } - } - - #{$c4d-prefix}-background-media { - display: block; - height: auto; - - @include breakpoint(md) { - display: none; - } - } - - ::slotted([slot='image']) { - display: none; - @include breakpoint(md) { - position: absolute; - display: block; - height: 100%; - margin: 0 calc(50% - 50vw); - width: 100vw; - top: 0; - // Puts background underneath all static elements - z-index: -1; - } - } - - ::slotted(#{$c4d-prefix}-leadspace-block-heading) { - @include breakpoint(md) { - width: calc(75% - $spacing-07); - max-width: rem(640px); - } - - @include breakpoint(lg) { - width: calc(100% - $spacing-07); - max-width: rem(640px); - } - } - .#{$prefix}--content-layout { position: relative; - padding: $spacing-05 0 $spacing-07; + padding: $spacing-07 0 $spacing-07; &::before { right: calc(50% - 50vw); @@ -205,7 +73,7 @@ padding-bottom: $spacing-12; } - &-adjacent-theme { + &-dual-theme { padding: $spacing-07 0; @include breakpoint(md) { @@ -213,18 +81,6 @@ } } - &-g10 { - @include theme($g10, true); - } - - &-g90 { - @include theme($g90, true); - } - - &-g100 { - @include theme($g100, true); - } - .#{$prefix}--sticky-header { @include type-style('heading-01'); @@ -244,13 +100,30 @@ } } + ::slotted(#{$c4d-prefix}-leadspace-heading) { + margin-bottom: 0px; + padding-left: 0px; + color: $text-primary; + + max-width: rem(640px); + + @include breakpoint(md) { + width: calc(75% - $spacing-07); + } + + @include breakpoint(lg) { + width: calc(100% - $spacing-07); + } + } + ::slotted(#{$c4d-prefix}-search-with-typeahead) { @include breakpoint(md) { - width: 75%; + margin-left: $spacing-05; + width: calc(75% - $spacing-07); } @include breakpoint(lg) { - width: 125%; + width: calc(100% - $spacing-07); } } @@ -259,122 +132,95 @@ position: relative; background: $layer-accent-01; } + } - &[adjacent-theme='white-and-g10'] { - .#{$prefix}--search-container { - @include theme($g10, true); - } + :host(#{$c4d-prefix}-leadspace-with-search[dual-theme='white-and-g10']) { + .#{$prefix}--search-layout { + @include theme($white, true); } - &[adjacent-theme='g10-and-white'] { - ::slotted(#{$c4d-prefix}-background-media), - .#{$prefix}--content-layout { - @include theme($g10, true); - } + .#{$prefix}--search-container { + @include theme($g10, true); } + } - &[adjacent-theme='g90-and-g100'] { - ::slotted(#{$c4d-prefix}-background-media), - .#{$prefix}--content-layout { - @include theme($g90, true); - } - - .#{$prefix}--search-container { - @include theme($g100, true); - } + :host(#{$c4d-prefix}-leadspace-with-search[dual-theme='g10-and-white']) { + .#{$prefix}--content-layout { + @include theme($g10, true); } - &[adjacent-theme='g100-and-g90'] { - ::slotted(#{$c4d-prefix}-background-media), - .#{$prefix}--content-layout { - @include theme($g100, true); - } + .#{$prefix}--search-container { + @include theme($white, true); + } + } - .#{$prefix}--search-container { - @include theme($g90, true); - } + :host(#{$c4d-prefix}-leadspace-with-search[dual-theme='g90-and-g100']) { + .#{$prefix}--content-layout { + @include theme($g90, true); } - &[sticky-search] { - .#{$prefix}--search-container { - position: fixed; - width: 100%; - top: 0; - left: 0; - padding: $spacing-05 0; - margin: 0; - transform: translateY(-100%); - } + .#{$prefix}--search-container { + @include theme($g100, true); + } + } - .#{$prefix}--search-container-inner { - @include make-container; - @include make-row; + :host(#{$c4d-prefix}-leadspace-with-search[dual-theme='g100-and-g90']) { + .#{$prefix}--content-layout { + @include theme($g100, true); + } - margin-left: auto; - margin-right: auto; - } + .#{$prefix}--search-container { + @include theme($g90, true); + } + } - .#{$prefix}--sticky-header { - @include breakpoint(lg) { - @include make-col(4, 16); - } - } + :host(#{$c4d-prefix}-leadspace-with-search[sticky-search]) { + .#{$prefix}--search-container { + position: fixed; + width: 100%; + top: 0; + left: 0; + padding: $spacing-05 0; + margin: 0; + transform: translateY(-100%); + } - ::slotted(#{$c4d-prefix}-search-with-typeahead) { - @include make-col(4, 4); + .#{$prefix}--search-container-inner { + @include make-container; + @include make-row; - @include breakpoint(lg) { - @include make-col(10, 16); - } - } + margin-left: auto; + margin-right: auto; + } - &[scroll-behavior]:not([adjacent-theme]) { - .#{$prefix}--search-container { - &::before { - border-bottom: 1px solid $layer-accent-01; - } - } + .#{$prefix}--sticky-header { + @include breakpoint(lg) { + @include make-col(4, 16); } } - } - :host(#{$c4d-prefix}-leadspace-with-search-heading), - :host(#{$c4d-prefix}-leadspace-with-search-content) { - display: block; - padding: 0; + ::slotted(#{$c4d-prefix}-search-with-typeahead) { + @include make-col(4, 4); - /* stylelint-disable declaration-no-important */ - ::slotted(h1) { - all: unset !important; /* stylelint-disable-line declaration-property-value-disallowed-list */ + @include breakpoint(lg) { + @include make-col(10, 16); + } } - /* stylelint-enable declaration-no-important */ } - :host(#{$c4d-prefix}-leadspace-with-search-content-heading) { - @extend :host(#{$c4d-prefix}-content-block-heading); - - @include breakpoint-down(lg) { - display: block; - width: calc(75% - #{$spacing-07}); - margin-bottom: 0; - } - - @include breakpoint(xlg) { - display: block; - width: calc(100% - #{$spacing-07}); - margin-bottom: 0; - } - - // !important required to override slotted styling from block-content component - @include breakpoint-down(md) { - /* stylelint-disable declaration-no-important */ - margin-left: 0 !important; - /* stylelint-enable declaration-no-important */ - width: 100%; + :host( + #{$c4d-prefix}-leadspace-with-search[sticky-search][scroll-behavior]:not( + [dual-theme] + ) + ) { + .#{$prefix}--search-container { + &::before { + border-bottom: 1px solid $layer-accent-01; + } } } - :host(#{$c4d-prefix}-leadspace-with-search-content-copy) { + :host(#{$c4d-prefix}-leadspace-with-search-copy) { @extend :host(#{$c4d-prefix}-content-block-paragraph); @include type-style('fluid-heading-03', true); @@ -385,19 +231,17 @@ @include breakpoint(md) { width: calc(75% - #{$spacing-07}); + padding-right: $spacing-05; } @include breakpoint(lg) { width: calc(100% - #{$spacing-07}); + padding-right: $spacing-05; } // !important required to override slotted styling from block-content component @include breakpoint-down(md) { - /* stylelint-disable declaration-no-important */ - margin-left: 0 !important; - /* stylelint-enable declaration-no-important */ padding-top: $spacing-06; - width: 100%; } } } diff --git a/packages/styles/scss/components/locale-modal/_locale-modal.scss b/packages/styles/scss/components/locale-modal/_locale-modal.scss index de2e78cbd18..b8a8403719e 100644 --- a/packages/styles/scss/components/locale-modal/_locale-modal.scss +++ b/packages/styles/scss/components/locale-modal/_locale-modal.scss @@ -4,6 +4,7 @@ * 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 'sass:map'; @use '@carbon/styles/scss/breakpoint' as *; @use '@carbon/styles/scss/config' as *; @@ -12,18 +13,22 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/layout/scss/convert' as *; @use '../../globals/vars' as *; -@use '../card'; +@use '../../globals/utils/flex-grid' as *; + +@use '../card' as *; @use '@carbon/styles/scss/components/search' as *; -@use '@carbon/styles/scss/components/modal' as *; +@use '../../../../carbon-web-components/src/components/modal/modal' as *; /// Locale modal /// @access private /// @group locale-modal @mixin locale-modal { - :host(#{$c4d-prefix}-locale-modal), - .#{$c4d-prefix}--locale-modal-container { + :host(#{$c4d-prefix}-locale-modal) { + @extend .#{$prefix}--modal; + @include theme( $white, feature-flag-enabled('enable-css-custom-properties') @@ -31,8 +36,20 @@ .#{$prefix}--modal-container { background-color: $background; - height: 100%; + height: calc(100% - $spacing-07); min-height: 80%; + padding: $spacing-05; + + @include breakpoint-down('md') { + width: fit-content; + } + + .#{$prefix}--modal-content { + padding: 0; + margin: 0; + display: grid; + grid-template-rows: auto 1fr auto; + } @media (max-height: rem(450px)) { .#{$c4d-prefix}--locale-modal__filtering { @@ -53,12 +70,17 @@ .#{$c4d-prefix}--locale-modal { padding-left: $spacing-05; - margin-bottom: $spacing-05; + margin-bottom: 0; margin-top: $spacing-07; display: flex; &.#{$prefix}--modal-content { - padding-right: $spacing-05; + padding-top: $spacing-03; + margin-top: $spacing-07; + + @include breakpoint('lg', $grid-breakpoints) { + margin-top: auto; + } } @include type-style(body-compact-02, true); @@ -127,6 +149,7 @@ .#{$prefix}--modal-header__heading { @include type-style('fluid-heading-04', true); + padding: 0; margin-top: $spacing-04; &:focus { @@ -134,148 +157,210 @@ } } - // FIXME: CardLink is being used as Card in React, need to separate this - .#{$prefix}--card__CTA.#{$prefix}--card-link .#{$prefix}--card__heading { - @include type-style('fluid-heading-03', true); + #{$c4d-prefix}-expressive-modal-header { + padding: 3px 20% 0 $spacing-05; + margin-bottom: $spacing-03; } } - :host(#{$c4d-prefix}-locale-modal) { - @extend .#{$prefix}--modal; + :host(#{$c4d-prefix}-locale-modal[open]) { + @extend :host(#{$prefix}-modal[open]); + + .#{$prefix}--modal-container { + transform: translate3d(0, 0, 0); + transition: transform $duration-moderate-02 motion(entrance, expressive); + } } -} -:host(#{$prefix}-search) .#{$prefix}--search-input, -.#{$prefix}--search--xl .#{$prefix}--search-input { - &::placeholder { - color: $text-secondary; + .#{$c4d-prefix}--locale-modal-container + .#{$c4d-prefix}--locale-modal__regions { + width: 100%; + margin-top: auto; + > .#{$prefix}--row { + margin-left: 0; + margin-right: 0; + } } -} -.#{$c4d-prefix}--locale-modal-container .#{$c4d-prefix}--locale-modal__regions { - width: 100%; - margin-top: auto; - > .#{$prefix}--row { - margin-left: 0; - margin-right: 0; + :host(#{$c4d-prefix}-region-item) .#{$prefix}--link { + outline: 1px solid $layer-02; + outline-offset: -1px; + min-height: rem(184px); + max-width: none; + width: 100%; + height: 100%; + display: flex; + align-items: stretch; + text-align: inherit; + + &:hover.#{$prefix}--link--disabled { + display: flex; + } + + &:focus-within { + outline-width: $spacing-01; + outline-offset: -#{$spacing-01}; + outline-color: $background-brand; + } + + @include breakpoint-down(lg) { + min-height: $spacing-12; + } } -} -:host(#{$c4d-prefix}-region-item) .#{$prefix}--link, -.#{$c4d-prefix}--locale-modal-container - .#{$c4d-prefix}--locale-modal__regions - .#{$c4d-prefix}--card { - min-height: rem(184px); - outline: 1px solid $layer-02; - outline-offset: -1px; - max-width: none; - width: 100%; - height: 100%; - display: flex; - - &:focus-within { - outline-width: $spacing-01; - outline-offset: -#{$spacing-01}; - outline-color: $background-brand; + :host(#{$c4d-prefix}-region-item) .#{$prefix}--card.#{$prefix}--tile { + border-bottom: transparent; } - @include breakpoint-down(lg) { - min-height: $spacing-12; + :host(#{$c4d-prefix}-region-item:last-of-type) + .#{$prefix}--card.#{$prefix}--tile { + border-bottom: 1px solid $border-tile; } -} -:host(#{$c4d-prefix}-region-item), -.#{$prefix}--modal-container { - svg.#{$prefix}--card__cta { - color: $border-inverse; + @include breakpoint(lg) { + :host(#{$c4d-prefix}-region-item) .#{$prefix}--card.#{$prefix}--tile { + border-bottom: 1px solid $border-tile; + } + + :host(#{$c4d-prefix}-region-item:first-of-type) + .#{$prefix}--card.#{$prefix}--tile { + border-right: transparent; + } + + :host(#{$c4d-prefix}-region-item:nth-of-type(3)) + .#{$prefix}--card.#{$prefix}--tile { + border-top: transparent; + border-right: transparent; + } + + :host(#{$c4d-prefix}-region-item:last-of-type) + .#{$prefix}--card.#{$prefix}--tile { + border-top: transparent; + } } -} -:host(#{$c4d-prefix}-locale-item) a.#{$prefix}--link, -.#{$c4d-prefix}--locale-modal-container .#{$c4d-prefix}--locale-modal__locales { - text-decoration: none; - border: $spacing-01 solid transparent; - display: flex; - min-height: $spacing-09; - border-bottom: 1px solid $layer-accent-01; - transition: background-color $duration-fast-02 motion(standard, expressive), - border $duration-fast-02 motion(standard, expressive); - - &:hover { - background-color: $background-hover; + :host(#{$c4d-prefix}-region-item), + .#{$prefix}--modal-container { + svg.#{$prefix}--card__cta { + color: $border-inverse; + } } - &:active, - &:focus { - border: $spacing-01 solid $focus; - outline: none; + :host(#{$c4d-prefix}-regions) { + display: flex; + flex-wrap: wrap; } -} -:host(#{$c4d-prefix}-locale-item), -.#{$c4d-prefix}--locale-modal-container { - .#{$c4d-prefix}--locale-modal__locales__name { - width: 50%; - color: $text-helper; - padding: $spacing-04 $spacing-05; - @include type-style('body-compact-02'); + :host(#{$c4d-prefix}-locale-item) a.#{$prefix}--link { + text-decoration: none; + border: $spacing-01 solid transparent; + display: flex; + min-height: $spacing-09; + border-bottom: 1px solid $layer-accent-01; + transition: background-color $duration-fast-02 motion(standard, expressive), + border $duration-fast-02 motion(standard, expressive); - &:first-of-type { - color: $text-primary; + &:hover { + background-color: $background-hover; + } + + &:active, + &:focus { + border: $spacing-01 solid $focus; + outline: none; + } + } + + :host(#{$c4d-prefix}-locale-item) { + .#{$c4d-prefix}--locale-modal__locales__name { + width: 50%; + color: $text-helper; + padding: $spacing-04 $spacing-05; + @include type-style('body-compact-02'); + + &:first-of-type { + color: $text-primary; + } } } -} -:host(#{$c4d-prefix}-locale-search), -.#{$c4d-prefix}--locale-modal-container - .#{$c4d-prefix}--locale-modal__filtering { - display: flex; - flex-direction: column; - margin-top: $spacing-07; - overflow: hidden; - - .#{$c4d-prefix}--locale-modal__filter { - opacity: 1; - z-index: 1; - transform: translate3d(0, 0, 0); - transition: 240ms cubic-bezier(0, 0, 0.3, 1); + :host(#{$c4d-prefix}-locale-search) { + padding-top: $spacing-03; display: flex; flex-direction: column; - flex: 1; + margin-top: $spacing-07; overflow: hidden; + + #{$prefix}-search::part(input)::placeholder { + color: $text-secondary; + } + + .#{$c4d-prefix}--locale-modal__filter { + opacity: 1; + z-index: 1; + transform: translate3d(0, 0, 0); + transition: 240ms cubic-bezier(0, 0, 0.3, 1); + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + } + + .#{$c4d-prefix}--locale-modal__regions { + visibility: hidden; + z-index: -1; + opacity: 0; + display: none; + transition: 240ms cubic-bezier(0, 0, 0.3, 1); + } + + .#{$c4d-prefix}--locale-modal__search { + position: sticky; + top: 0; + background-color: $background; + border-bottom: 1px solid $layer-accent-01; + } + + .#{$c4d-prefix}--locale-modal__search-text { + padding: $spacing-07 $spacing-05 $spacing-05; + margin: 0; + + @include type-style('label-02'); + } + + .#{$c4d-prefix}--locale-modal__list { + flex: 1; + overflow-y: auto; + } } - .#{$c4d-prefix}--locale-modal__regions { - visibility: hidden; - z-index: -1; - opacity: 0; - display: none; - transition: 240ms cubic-bezier(0, 0, 0.3, 1); + :host(#{$c4d-prefix}-locale-modal) #{$c4d-prefix}-expressive-modal-heading { + width: fit-content; } -} -:host(#{$c4d-prefix}-locale-search), -.#{$c4d-prefix}--locale-modal-container { - .#{$c4d-prefix}--locale-modal__search { - position: sticky; - top: 0; - background-color: $background; - border-bottom: rem(1px) solid $layer-accent-01; + :host(#{$c4d-prefix}-region-item) { + @include make-col(4, 4); - .#{$prefix}--search-input { - background-color: $field-01; + @include breakpoint('lg') { + @include make-col(8, 16); } - } - .#{$c4d-prefix}--locale-modal__search-text { - padding: $spacing-07 $spacing-05 $spacing-05; - min-height: $spacing-09; + .#{$prefix}--card__wrapper { + height: 100%; + } - @include type-style('label-02'); - } + ::slotted(div.#{$c4d-prefix}--region-item-footer) { + /* stylelint-disable declaration-no-important */ + // need the !important to prevent CSS reset styles from overwritting margin + margin-top: auto !important; + width: 100%; + display: flex; + justify-content: flex-end; + color: $border-inverse; + } - .#{$c4d-prefix}--locale-modal__list { - flex: 1; - overflow-y: auto; + ::slotted(div.#{$c4d-prefix}--region-item-footer[disabled]) { + color: $icon-disabled; + } } } diff --git a/packages/styles/scss/components/masthead/_masthead-l1.scss b/packages/styles/scss/components/masthead/_masthead-l1.scss index ef067ba7f7f..92a2470cf16 100644 --- a/packages/styles/scss/components/masthead/_masthead-l1.scss +++ b/packages/styles/scss/components/masthead/_masthead-l1.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2021 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -7,165 +7,875 @@ @use '@carbon/styles/scss/breakpoint' as *; @use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/motion' as *; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/components/button/tokens' as *; @use '../../globals/vars' as *; @use 'vars' as *; /// @access private /// @group dotcom ui-shell Masthead L1 +$search-transition: cubic-bezier(0.2, 0, 0.38, 0.9); +$search-transition-timing: 95ms; + +@mixin mobile-button-base { + border: none; + border-bottom: 1px solid $layer-accent-01; + text-decoration: none; + display: flex; + justify-content: space-between; + padding: $spacing-05; + width: 100%; + min-height: $spacing-07; + gap: $spacing-06; + + &:focus-visible { + outline: $spacing-01 solid $focus; + outline-offset: calc(-1 * #{$spacing-01}); + } +} + +@mixin desktop-button-base { + appearance: none; + background: transparent; + border: none; + text-decoration: none; + height: 100%; + column-gap: $spacing-03; + padding: $spacing-05; +} + @mixin masthead-l1 { + // Set up variables to store column-widths without using flexbox + .#{$prefix}--masthead__l1, :host(#{$c4d-prefix}-masthead-l1) { + /* stylelint-disable-next-line length-zero-no-unit */ + --page-width: calc(100vw - var(--scrollbar-width, 0px)); + --grid-width: var(--page-width); + --column-width: var(--page-width); + --gutter-width: 1rem; + + @include breakpoint-up(sm) { + --column-width: calc(var(--grid-width) / 4); + } + + @include breakpoint-up(md) { + --grid-width: calc(var(--page-width) - 2rem); + --column-width: calc(var(--grid-width) / 8); + } + + @include breakpoint-up(lg) { + --column-width: calc(var(--grid-width) / 16); + } + + @include breakpoint-up(max) { + --grid-width: calc(99rem - 3rem); + } + @include theme($white, true); - display: flex; position: relative; - max-width: 98rem; - margin-left: auto; - margin-right: auto; - height: $spacing-09; background-color: $layer-02; transition-timing-function: $search-transition; overflow: visible; + } - &::after { - content: ''; - position: absolute; - height: rem(1px); - bottom: rem(-1px); - left: calc(-50vw + 50%); - right: calc(-50vw + 50%); - background-color: $layer-accent-01; + // L1 Mobile Styles + @media screen and (max-width: 799px) { + .#{$prefix}--masthead__l1-inner-container { + width: 100%; } - } - .#{$prefix}--masthead__l1-inner-container { - width: 100%; - display: flex; + .#{$prefix}--masthead__l1-title { + @include type-style(productive-heading-01); - &::before { - content: ''; - position: absolute; - background-color: $background; - height: $spacing-09; - left: calc(-50vw + 50%); - right: 100%; - z-index: 1; + background-color: transparent; + border: none; + border-bottom: 1px solid $layer-accent-01; + color: $text-primary; + display: flex; + justify-content: space-between; + padding: $spacing-05; + width: 100%; + gap: $spacing-06; + + &:hover { + background-color: $background-hover; + } + + &:active { + background-color: $background-active; + } + + &:active, + &:focus-visible { + outline: $spacing-01 solid $focus; + outline-offset: calc(-1 * #{$spacing-01}); + } + + &:disabled { + color: $text-disabled; + border-bottom-color: $border-disabled; + } + + &[active] { + border-bottom: 3px solid $focus; + } + + &.is-open { + svg { + transform: rotateX(180deg); + } + } + + svg { + color: $icon-primary; + } } - &::after { - content: ''; - position: absolute; - background-color: $background; - height: $spacing-09; - left: 100%; - right: calc(-50vw + 50%); + .#{$prefix}--masthead__l1-dropdown { + &:not(.is-open) { + display: none; + } + + // Height of viewport, minus the L0/L1 combo, minus additional space to match L0 megapanels + max-height: calc(100vh - 98px - #{$spacing-10} - #{$spacing-09}); + overflow-y: auto; } - } - .#{$prefix}--masthead__l1-name, - :host(#{$c4d-prefix}-masthead-l1-name) { - display: flex; - height: 100%; - z-index: 1; - background-color: $layer-02; - color: $text-on-color; - padding: 0 0 0 $spacing-04; - align-items: stretch; - white-space: nowrap; + .#{$prefix}--masthead__l1-dropdown-item { + @include type-style(body-short-01); + @include mobile-button-base; + + background-color: transparent; + color: $text-secondary; + + &:hover { + background-color: $background-hover; + color: $text-primary; + } - @include breakpoint-down(lg) { - padding-left: 0; + &:active { + background-color: $background-active; + color: $text-primary; + } + + &:active, + &:focus-visible { + outline: $spacing-01 solid $focus; + outline-offset: calc(-1 * #{$spacing-01}); + } + + &:disabled { + color: $text-disabled; + border-bottom-color: $border-disabled; + } + + &[active] { + position: relative; + + &::after { + content: ''; + display: block; + position: absolute; + inset-inline-start: 0; + inset-block: 0; + width: 3px; + background-color: $focus; + } + } + + &.is-open { + background-color: $background-selected; + color: $text-primary; + + svg { + transform: rotateX(180deg); + color: $icon-primary; + } + } + + svg { + color: $icon-secondary; + } } - &[aria-selected='true'] span::after { - content: ''; - display: block; - position: absolute; - box-sizing: border-box; - bottom: 0; - left: 0; - right: 0; - height: rem(3px); - background-color: $link-primary; + .#{$prefix}--masthead__l1-dropdown-subsection { + &:not(.is-open) { + display: none; + } + + padding-bottom: $spacing-07; + border-bottom: 1px solid $layer-accent-01; + + .#{$prefix}--masthead__l1-dropdown-item { + padding-block: $spacing-04; + padding-inline-start: $spacing-05; + padding-inline-end: $spacing-08; + border-bottom: none; + color: $text-secondary; + + &:hover, + &:active { + color: $text-primary; + } + } + + .#{$prefix}--masthead__l1-dropdown-viewall { + margin-top: $spacing-07; + } } - } - .#{$prefix}--masthead__l1-name-title { - display: flex; - align-items: stretch; - min-width: rem(67px); - white-space: nowrap; - position: relative; + .#{$prefix}--masthead__l1-dropdown-announcement { + @include type-style(body-short-01); - a { - @include type-style('heading-compact-02'); + margin: 0 $spacing-05 $spacing-05; + padding: $spacing-05 0; + border-bottom: 1px solid $layer-accent-01; + } + + .#{$prefix}--masthead__l1-dropdown-heading { + @include type-style(productive-heading-01); - display: flex; - align-items: center; color: $text-primary; - position: relative; + + // Headings that are not links. + &.#{$prefix}--masthead__l1-dropdown-heading--no-link { + padding-block: $spacing-04; + padding-inline-start: $spacing-05; + padding-inline-end: $spacing-08; + width: 100%; + min-height: $spacing-07; + } + + .#{$prefix}--masthead__l1-dropdown-item { + @include type-style(productive-heading-01); + + color: inherit; + justify-content: flex-start; + padding-block: $spacing-04; + padding-inline-start: $spacing-05; + padding-inline-end: $spacing-08; + width: 100%; + min-height: $spacing-07; + gap: $spacing-03; + + svg { + fill: $icon-primary; + } + } + + &:not(:nth-of-type(1)) { + margin-top: $spacing-07; + } + } + + .#{$prefix}--masthead__l1-dropdown-viewall { + @include type-style(body-short-01); + + background-color: transparent; text-decoration: none; - padding: 0 $spacing-05; + display: flex; + justify-content: flex-start; + padding: $spacing-05; + width: 100%; + min-height: $spacing-07; + gap: $spacing-03; - &:active, &:focus { - outline: $spacing-01 solid $background-brand; - outline-offset: -#{$spacing-01}; + text-decoration: underline; + } + + &:hover { + background-color: $background-hover; + text-decoration: underline; + } + + &:active { + background-color: $background-active; + text-decoration: underline; + } + + &:active, + &:focus-visible { + outline: $spacing-01 solid $focus; + outline-offset: calc(-1 * #{$spacing-01}); } } - &:hover { - background-color: $background-hover; + .#{$prefix}--masthead__l1-dropdown-login { + @include mobile-button-base; + @include type-style(body-short-01); + + color: $button-primary; + + svg { + color: inherit; + } + + &:hover { + color: $link-primary-hover; + background-color: $background-hover; + } + + &:focus-visible { + color: $button-primary; + } + + &:active { + color: $button-primary-active; + background-color: $background-active; + } + } + + .#{$prefix}--masthead__l1-dropdown-cta { + @include mobile-button-base; + @include type-style(body-short-01); + + background-color: $background-brand; + color: $layer-02; + + svg { + color: inherit; + } + + &:hover { + background-color: $button-primary-hover; + } + + &:focus-visible { + outline-color: $layer-02; + outline-offset: calc(-1 * #{$spacing-02}); + } + + &:active { + color: $layer-02; + background-color: $button-primary-active; + } + + &:disabled { + background-color: $text-disabled; + } } } - .#{$prefix}--masthead__l1-nav { - padding-left: 0; + // L1 Desktop Styles + @media screen and (min-width: 800px) { + .#{$prefix}--masthead__l1, + :host(#{$c4d-prefix}-masthead-l1) { + display: block; + border-bottom: 1px solid $layer-accent-01; + } + + .#{$prefix}--masthead__l1-inner-container { + width: 100%; + max-width: 98rem; + margin: 0 auto; + height: $spacing-10; + display: grid; + grid-template-areas: 'padding platform menu spacer login cta'; + grid-template-columns: $spacing-05 auto minmax(1px, 1fr) $spacing-08 auto auto; + position: relative; + z-index: 1; - li:not([role='none']) { - > a { - align-items: flex-end; + > * { + position: relative; + z-index: 1; + } + + > .#{$prefix}--masthead__l1-menu-container-mask { + content: ''; + position: absolute; + display: block; + background-color: $background; + z-index: 2; + inset-block: 0; + + &--start { + inset-inline-start: -50vw; + inset-inline-end: 100%; + } + + &--end { + inset-inline-start: 100%; + inset-inline-end: -50vw; + } + } + + &::before, + &::after { + content: ''; + display: block; + position: relative; + z-index: 1; + background-color: $background; + } + + &::before { + grid-area: padding; + } + + &::after { + grid-area: spacer; } } - a.#{$prefix}--header__menu-item { + .#{$prefix}--masthead__background-wrapper { + background-color: $background; + } + + .#{$prefix}--masthead__l1-title { + @include type-style(productive-heading-01); + @include desktop-button-base; + + display: inline-flex; + grid-area: platform; + height: 100%; + color: $text-primary; + border-bottom: 3px solid transparent; + padding-bottom: calc(#{$spacing-05} - #{$spacing-01}); + align-items: flex-end; + background-color: $background; + + &[active] { + border-bottom-color: $focus; + } + &:hover { background-color: $background-hover; } - &:focus { - border-color: $background-brand; + &:active { + background-color: $background-active; } - svg { + &:active, + &:focus-visible { + outline: $spacing-01 solid $focus; + outline-offset: calc(-1 * #{$spacing-01}); + } + } + + .#{$prefix}--masthead__l1-menu-container-outer { + grid-area: menu; + display: flex; + z-index: 0; + } + + .#{$prefix}--masthead__l1-menu-container-scroller { + @include desktop-button-base; + + padding: 0; + background-color: $background; + z-index: 1; + } + + .#{$prefix}--masthead__l1-menu-container-scroller-inner { + display: inline-flex; + background-color: $background; + flex-shrink: 0; + padding: $spacing-05 $spacing-03; + align-items: flex-end; + height: 100%; + width: 100%; + + &:hover { + color: $text-primary; + background-color: $background-hover; + } + + &:active { + color: $text-primary; + background-color: $background-active; + } + + &:active, + &:focus-visible { + outline: $spacing-01 solid $focus; + outline-offset: calc(-1 * #{$spacing-01}); + } + + &[hidden] { + /* stylelint-disable-next-line declaration-no-important */ + display: none !important; + } + } + + .#{$prefix}--masthead__l1-menu-container-inner { + height: 100%; + flex-shrink: 1; + flex-grow: 1; + z-index: 0; + } + + .#{$prefix}--masthead__l1-menu { + position: absolute; + display: flex; + height: 100%; + transition: translate $search-transition-timing $search-transition; + + > li { position: relative; - top: -#{$spacing-01}; - fill: $text-primary; } } - a.#{$prefix}--header__menu-title[aria-expanded='true'] { - background-color: $layer-accent-01; - + .#{$prefix}--header__menu { - li { - background-color: $background; + .#{$prefix}--masthead__l1-item { + @include type-style(body-short-01); + @include desktop-button-base; - &:hover { - background-color: $background-hover; - } + display: inline-flex; + background-color: $background; + color: $text-secondary; + border: 1px solid transparent; + border-top: none; + align-items: flex-end; + white-space: nowrap; + + &[active]::after { + content: ''; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 3px; + background-color: $focus; + } + + &:hover { + color: $text-primary; + background-color: $background-hover; + } + + &:active { + color: $text-primary; + background-color: $background-active; + } + + &:active, + &:focus-visible { + outline: $spacing-01 solid $focus; + outline-offset: calc(-1 * #{$spacing-01}); + } + + &:is([disabled], .is-disabled) { + color: $text-disabled; + } + + &.is-open { + height: calc(100% + 3px); + padding-bottom: calc(#{$spacing-05} + 3px); + border-color: #c6c6c6; + box-shadow: 0 0 6px #c6c6c6; + clip-path: polygon( + calc(0% - 6px) calc(0% - 6px), + calc(100% + 6px) calc(0% - 6px), + calc(100% + 6px) 100%, + calc(0% - 6px) 100% + ); - a.#{$prefix}--header__menu-item { - &:hover { - color: $text-primary; - background-color: $background-hover; - } + svg { + rotate: 180deg; + } + } + + svg { + color: inherit; + } + } + + .#{$prefix}--masthead__l1-dropdown { + position: absolute; + inset-block-start: calc(100% + 1px); + inset-inline-start: 0; + width: 320; + background-color: $background; + border: 1px solid #c6c6c6; + border-top: none; + box-shadow: 0 0 6px #c6c6c6; + clip-path: polygon( + calc(0% - 6px) 0%, + calc(100% + 6px) 0%, + calc(100% + 6px) calc(100% + 6px), + calc(0% - 6px) calc(100% + 6px) + ); + padding: $spacing-05 0 0; + max-width: calc(100vw - (2 * #{$spacing-05})); + visibility: hidden; + overflow-y: auto; + + &.is-open { + visibility: visible; + } + + &.#{$prefix}--masthead__l1-dropdown__1-col { + width: calc(2 * var(--column-width)); + } + + &.#{$prefix}--masthead__l1-dropdown__2-col { + width: calc(4 * var(--column-width)); + } + + &.#{$prefix}--masthead__l1-dropdown__3-col { + width: calc(6 * var(--column-width)); + } + + @media screen and (min-width: 66rem) { + &.#{$prefix}--masthead__l1-dropdown__1-col { + width: calc(4 * var(--column-width)); + } + + &.#{$prefix}--masthead__l1-dropdown__2-col { + width: calc(8 * var(--column-width)); + } + + &.#{$prefix}--masthead__l1-dropdown__3-col { + width: calc(12 * var(--column-width)); + } + } + } + + .#{$prefix}--masthead__l1-dropdown-links { + column-rule: 1px solid $layer-accent-01; + padding-bottom: $spacing-08; + + .#{$prefix}--masthead__l1-dropdown__2-col & { + column-count: 2; + column-gap: 0; + } + + .#{$prefix}--masthead__l1-dropdown__3-col & { + column-count: 3; + column-gap: 0; + } + + > * { + break-inside: avoid; + } + + // Contains a wide col child. + &.#{$prefix}--masthead__l1-dropdown--has-column-wide { + display: grid; + grid-template-columns: repeat(3, 1fr); + + .#{$prefix}--masthead__l1-dropdown-column-wide { + grid-column: span 2; + + .#{$prefix}--masthead__l1-dropdown-menu-items { + columns: 2; + column-gap: 0; } } + + > *:nth-child(2) { + border-inline-start: 1px solid $layer-accent-01; + } + } + } + + .#{$prefix}--masthead__l1-dropdown-announcement { + @include type-style(body-short-01); + + margin: 0 $spacing-05 $spacing-05; + padding-bottom: $spacing-05; + border-bottom: 1px solid $layer-accent-01; + + :is(h1, h2, h3, h4, h5, h6, strong, b) { + @include type-style(productive-heading-01); + } + + :focus { + outline: $spacing-01 solid $focus; + outline-offset: calc(-1 * #{$spacing-01}); + } + } + + .#{$prefix}--masthead__l1-dropdown-menu-items { + padding-bottom: $spacing-06; + } + + .#{$prefix}--masthead__l1-dropdown-heading { + @include type-style(productive-heading-03); + + color: $text-primary; + + .#{$prefix}--masthead__l1-dropdown-item { + @include type-style(productive-heading-03); + @include desktop-button-base; + + color: inherit; + padding: $spacing-03 $spacing-05; + margin-bottom: $spacing-03; + + svg { + vertical-align: middle; + position: relative; + bottom: rem(2px); + margin-inline-start: $spacing-03; + } + } + + // Headings that do not contain links. + &.#{$prefix}--masthead__l1-dropdown-heading--no-link { + padding: $spacing-03 $spacing-05; + margin-bottom: $spacing-03; + } + } + + .#{$prefix}--masthead__l1-dropdown-heading-desc { + @include type-style(body-short-01); + + display: block; + color: $text-secondary; + padding: 0 $spacing-05; + margin: calc(-1 * #{$spacing-03}) 0 $spacing-03; + } + + .#{$prefix}--masthead__l1-dropdown-item { + @include type-style(body-short-01); + @include desktop-button-base; + + display: inline-block; + padding: $spacing-03 $spacing-05; + color: $text-secondary; + width: 100%; + + &:hover { + color: $text-primary; + background-color: $background-hover; + } + + &:active { + color: $text-secondary; + } + + &:active, + &:focus-visible { + outline: $spacing-01 solid $focus; + outline-offset: calc(-1 * #{$spacing-01}); + } + svg { + color: inherit; + } + + .#{$prefix}--masthead__l1-dropdown-item-title { + @include type-style(productive-heading-01); + + display: block; + } + + .#{$prefix}--masthead__l1-dropdown-item-description { + display: block; + white-space: break-spaces; + color: $text-secondary; + } + } + + .#{$prefix}--masthead__l1-dropdown-viewall { + @include type-style(body-short-01); + + display: flex; + gap: $spacing-03; + align-content: center; + padding: $spacing-05; + text-decoration: none; + color: $link-primary; + border-top: 1px solid $layer-accent-01; + + &:hover { + color: $link-primary-hover; + text-decoration: underline; + } + + &:active, + &:active:visited, + &:active:visited:hover { + color: $text-primary; + text-decoration: underline; + } + + &:focus { + outline: $spacing-01 solid $focus; + outline-offset: calc(-1 * #{$spacing-01}); + } + + &:visited { + color: $link-primary; + } + + &:visited:hover { + color: $link-primary-hover; + } + } + + .#{$prefix}--masthead__l1-cta { + @include desktop-button-base; + @include type-style(body-short-01); + + display: inline-flex; + grid-area: cta; + background-color: $background-brand; + color: $layer-02; + align-items: flex-end; + + svg { + color: inherit; + } + + &:hover { + background-color: $button-primary-hover; + } + + &:focus-visible { + outline: $spacing-01 solid $layer-02; + outline-offset: calc(-1 * #{$spacing-01}); + } + + &:active { + color: $layer-02; + background-color: $button-primary-active; + } + + &:disabled { + background-color: $text-disabled; + } + } + + .#{$prefix}--masthead__l1-login { + @include desktop-button-base; + @include type-style(body-short-01); + + display: inline-flex; + grid-area: login; + color: $button-primary; + background-color: $background; + align-items: flex-end; + + svg { + color: inherit; + } + + &:hover { + color: $link-primary-hover; + background-color: $background-hover; + } + + &:focus-visible { + color: $button-primary; + outline: $spacing-01 solid $focus; + outline-offset: calc(-1 * #{$spacing-01}); + } + + &:active { + color: $button-primary-active; + background-color: $background-active; + outline: $spacing-01 solid $focus; + outline-offset: calc(-1 * #{$spacing-01}); } } } diff --git a/packages/styles/scss/components/masthead/_masthead-leftnav.scss b/packages/styles/scss/components/masthead/_masthead-leftnav.scss index c10ef2face4..0701b25acbe 100644 --- a/packages/styles/scss/components/masthead/_masthead-leftnav.scss +++ b/packages/styles/scss/components/masthead/_masthead-leftnav.scss @@ -1,10 +1,11 @@ /** - * Copyright IBM Corp. 2016, 2022 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ +@use '@carbon/styles/scss/components/button/tokens' as *; @use '@carbon/styles/scss/breakpoint' as *; @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/motion' as *; @@ -26,7 +27,7 @@ } .#{$prefix}--masthead .#{$prefix}--side-nav__navigation { - height: calc(100% - #{mini-units(6)}); + height: calc(100% - #{$spacing-09}); > nav { height: 100%; @@ -187,7 +188,7 @@ @include type-style(body-compact-02); padding-left: $spacing-05; - height: carbon--mini-units(6); + height: $spacing-09; &:hover { text-decoration: none; @@ -243,19 +244,18 @@ a, button { &.#{$prefix}--side-nav__link { - height: carbon--mini-units(6); - @include type-style(body-compact-02); + height: $spacing-09; + @include type-style(body-short-01); > { .#{$prefix}--side-nav__link-text { - @include type-style(body-compact-02); + @include type-style(body-short-01); display: flex; align-items: center; color: $text-secondary; width: 100%; height: 100%; - border-bottom: 1px solid $layer-accent-01; text-overflow: ellipsis; } } @@ -285,6 +285,7 @@ top: 0; background-color: $background; z-index: 1; + button { width: 100%; border: none; @@ -298,13 +299,25 @@ padding: 0 $spacing-05; background-color: $background; + &:hover { + background-color: $background-hover; + + > .#{$prefix}--side-nav__link-text { + color: $link-primary-hover; + } + } + &:focus { - outline: $spacing-01 solid $focus; - outline-offset: -#{$spacing-01}; + outline: 2px solid $focus; + outline-offset: -2px; + + > .#{$prefix}--side-nav__link-text { + color: $link-primary; + } } > .#{$prefix}--side-nav__link-text { - @include type-style(body-compact-02); + @include type-style(body-short-01); color: $link-primary; display: flex; @@ -325,12 +338,6 @@ } } - .#{$prefix}--masthead__side-nav--submemu-back - button:focus - > .#{$prefix}--side-nav__link-text { - color: $link-primary; - } - :host(#{$c4d-prefix}-left-nav-menu-section)[expanded], .#{$prefix}--side-nav__menu-section--expanded { z-index: 1; @@ -368,11 +375,10 @@ height: auto; min-height: $spacing-09; display: flex; - border-bottom: 1px solid $layer-accent-01; } .#{$prefix}--side-nav__submenu-title { - @include type-style(body-compact-02); + @include type-style(body-short-01); color: $text-secondary; align-self: center; @@ -409,17 +415,135 @@ .#{$prefix}--masthead__side-nav--submemu-heading, :host(#{$c4d-prefix}-left-nav-menu-category-heading) { - @include type-style('body-01'); + @include type-style('body-short-01'); - font-size: $spacing-05; - line-height: $spacing-06; - letter-spacing: normal; display: block; color: $text-secondary; - padding: $spacing-02 0; - margin: 0 $spacing-05; + + &:is(.#{$prefix}--left-nav-menu-category__heading-large) { + margin: $spacing-03 0 $spacing-06; + + .#{$prefix}--side-nav__heading { + padding: 0; + } + } + + .#{$prefix}--side-nav__heading { + height: auto; + padding: $spacing-05 0; + } + + .#{$prefix}--side-nav__heading-title { + display: block; + padding: 0 $spacing-05; + + &:where(a) { + color: inherit; + display: inline-flex; + gap: $spacing-03; + align-items: center; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + + &:focus { + outline: 2px solid $focus; + outline-offset: -2px; + color: $text-primary; + } + } + } + + .#{$prefix}--side-nav__heading-description { + padding: 0 $spacing-05; + } + + ::slotted(:first-child) { + padding-top: $spacing-03; + } + + h2 { + @include type-style(productive-heading-01); + + color: $text-primary; + } + + h2.#{$prefix}--side-nav__menu-section-title { + @include type-style(productive-heading-03); + + + .#{$prefix}--side-nav__heading-description { + margin-block-start: $spacing-03; + } + } + } + + /* stylelint-disable selector-pseudo-class-parentheses-space-inside */ + :host(#{$c4d-prefix}-left-nav-menu-category-heading):not( + .#{$prefix}--left-nav-menu-category__heading-large + ), + :host(#{$c4d-prefix}-left-nav-menu), + :host(#{$c4d-prefix}-left-nav-menu-item) { + display: block; border-bottom: 1px solid $layer-accent-01; } + /* stylelint-enable selector-pseudo-class-parentheses-space-inside */ + + :host(#{$c4d-prefix}-left-nav-menu-item) { + .#{$prefix}--side-nav__link { + display: flex; + align-items: center; + padding-left: $spacing-05; + height: auto; + min-height: $spacing-09; + width: 100%; + + &:not(:is(a)):hover { + background-color: transparent; + } + } + + &.#{$prefix}--side-nav__group-header { + &:not(:first-of-type) { + margin-top: $spacing-07; + } + + .#{$prefix}--side-nav__link-text { + @include type-style(productive-heading-01); + + color: $text-primary; + display: inline-flex; + align-items: center; + justify-content: space-between; + gap: $spacing-03; + + svg { + color: $icon-primary; + } + } + } + + &.#{$prefix}--side-nav__group-view-all { + &:hover { + .#{$prefix}--side-nav__link-text { + color: $link-primary-hover; + } + } + + .#{$prefix}--side-nav__link-text { + color: $button-primary; + display: inline-flex; + align-items: center; + justify-content: space-between; + gap: $spacing-03; + + svg { + color: $button-primary; + } + } + } + } .#{$prefix}--masthead__side-nav--submemu--selected { border-inline-start: 3px solid $background-brand; @@ -434,7 +558,7 @@ .#{$prefix}--side-nav__submenu[aria-expanded='true'] .#{$prefix}--side-nav__submenu-chevron { > svg { - transform: rotate(-90deg) scale(1.25); + transform: rotate(-90deg); fill: $text-primary; :host([dir='rtl']) & { @@ -449,37 +573,14 @@ :host(#{$c4d-prefix}-left-nav-item-highlighted) a.#{$prefix}--side-nav__link, :host(#{$c4d-prefix}-left-nav-menu-item-highlighted) a.#{$prefix}--side-nav__link, - :host(#{$c4d-prefix}-left-nav-item) a.#{$prefix}--side-nav__link, - :host(#{$c4d-prefix}-left-nav-menu-item) a.#{$prefix}--side-nav__link { + :host(#{$c4d-prefix}-left-nav-item) a.#{$prefix}--side-nav__link { display: flex; padding-left: $spacing-05; height: auto; - min-height: carbon--mini-units(6); + min-height: $spacing-09; width: 100%; } - .#{$prefix}--masthead__side-nav__last-highlighted, - :host(#{$c4d-prefix}-left-nav-menu-item[last-highlighted]), - :host(#{$c4d-prefix}-left-nav-menu[last-highlighted]) { - border-bottom: 1px solid $toggle-off; - } - - :host(#{$c4d-prefix}-left-nav-menu[last-highlighted]) - .#{$prefix}--side-nav__submenu - .#{$prefix}--side-nav__submenu-content, - .#{$prefix}--masthead__side-nav__last-highlighted - .#{$prefix}--side-nav__submenu-content, - .#{$prefix}--side-nav__menu-item.#{$prefix}--masthead__side-nav__last-highlighted - .#{$prefix}--side-nav__link, - :host(cds-left-nav-menu-section) - .#{$prefix}--masthead__side-nav--submemu-back - .#{$prefix}--side-nav__link - .#{$prefix}--side-nav__link-text, - :host(#{$c4d-prefix}-left-nav-menu-item[last-highlighted]) - .#{$prefix}--side-nav__link { - border-bottom: none; - } - .#{$prefix}--side-nav__submenu-platform { flex-direction: row; diff --git a/packages/styles/scss/components/masthead/_masthead-megamenu.scss b/packages/styles/scss/components/masthead/_masthead-megamenu.scss index 037e731da28..ab8176d06ce 100644 --- a/packages/styles/scss/components/masthead/_masthead-megamenu.scss +++ b/packages/styles/scss/components/masthead/_masthead-megamenu.scss @@ -15,6 +15,11 @@ @use '../../globals/utils/flex-grid' as *; @use '../../globals/vars' as *; +@mixin masthead-megamenu-limit-height { + max-height: var(--#{$c4d-prefix}-masthead-max-height); + overflow: var(--#{$c4d-prefix}-masthead-overflow); +} + @mixin masthead-megamenu { $l0-nav-height: $spacing-09; $l1-nav-height: rem(98px); @@ -91,7 +96,7 @@ // `100vw` in Shadow DOM causes delayed rendering bug in Safari // https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4493 width: var(--#{$c4d-prefix}-ce--viewport-width, 100vw); - min-height: carbon--mini-units(40); + min-height: 320px; ::slotted(#{$c4d-prefix}-megamenu), ::slotted(#{$c4d-prefix}-cloud-megamenu), @@ -118,6 +123,12 @@ :host(#{$c4d-prefix}-megamenu), :host(#{$c4d-prefix}-cloud-megamenu), .#{$prefix}--masthead__megamenu { + @include box-shadow; + --#{$c4d-prefix}-masthead-max-height: calc( + 100vh - var(--cds-spacing-09, 3rem) - var(--cds-layout-05, 4rem) + ); + --#{$c4d-prefix}-masthead-overflow: overlay; + display: block; overflow-y: overlay; overflow-x: hidden; @@ -127,68 +138,322 @@ outline: none; } - @include box-shadow; - .#{$prefix}--masthead__megamenu__container { - width: 100vw; @include make-container; - .#{$prefix}--masthead__megamenu__container--row { + width: 100vw; + } + + .#{$prefix}--masthead__megamenu__container--row { + background-color: $layer-accent-01; + + /** + * Faceted (tab) and Simple (list) megamenus have different layouts between + * 'md' and 'lg' breakpoints. This requires us to apply identical styles at + * different breakpoints, and we must also leverage custom properties to assign + * values across shadow roots. The concept is that these upper shadow roots have + * the stateful information needed to dictate how elements in the lower shadow + * roots should appear, and we can pass that information down via custom props. + */ + &.#{$prefix}--masthead__megamenu__container--row--tab { @include make-row; flex-wrap: nowrap; + gap: 1px; + + ::slotted(#{$c4d-prefix}-megamenu-right-navigation) { + --#{$c4d-prefix}-right-nav-padding: #{$spacing-05}; + } + } + + &.#{$prefix}--masthead__megamenu__container--row--list { + @include breakpoint-down(lg) { + @include masthead-megamenu-limit-height; + --#{$c4d-prefix}-view-all-inset: calc(#{$spacing-05} * -1); + --#{$c4d-prefix}-view-all-container-position: initial; + --#{$c4d-prefix}-view-all-container-transform: initial; + + // Set containing block for fixed position view all CTA. + transform: rotate(0deg); + position: relative; + z-index: 1; + + margin-inline: calc(#{$spacing-09} * -1); + } + + @include breakpoint-up(lg) { + @include make-row; + + flex-wrap: nowrap; + gap: 1px; + } + + ::slotted(#{$c4d-prefix}-megamenu-left-navigation), + ::slotted(#{$c4d-prefix}-megamenu-right-navigation) { + @include breakpoint-down(lg) { + --#{$c4d-prefix}-view-all-padding: #{$spacing-05}; + --#{$c4d-prefix}-masthead-max-height: initial; + --#{$c4d-prefix}-masthead-overflow: initial; + + width: 100%; + max-width: initial; + margin-inline: initial; + padding-inline: $spacing-07; + border-bottom: rem(1px) solid $layer-accent-01; + overflow: initial; + max-height: initial; + + .#{$prefix}--masthead__megamenu-container { + max-height: initial; + overflow: initial; + } + } + } + + ::slotted(#{$c4d-prefix}-megamenu-left-navigation) { + --#{$c4d-prefix}-left-nav-columns: 2; + + @include breakpoint-up(lg) { + --#{$c4d-prefix}-left-nav-columns: initial; + } + } + + ::slotted(#{$c4d-prefix}-megamenu-right-navigation) { + --#{$c4d-prefix}-right-nav-padding: 0; + + @include breakpoint-down(lg) { + --#{$c4d-prefix}-view-all-display: none; + + border-bottom: none; + } + + @include breakpoint-up(lg) { + --#{$c4d-prefix}-right-nav-padding: #{$spacing-05}; + } + } + + ::slotted([part*='view-all']) { + --#{$c4d-prefix}-view-all-padding: #{$spacing-09}; + + position: sticky; + z-index: 1; + inset-block-end: 0; + background-color: $background; + border-top: rem(1px) solid $layer-accent-01; + + @include breakpoint-up(lg) { + display: none; + } + } } } + + ::slotted([role='tabpanel']) { + width: 100%; + } } + :host(#{$c4d-prefix}-megamenu-left-navigation), + .#{$prefix}--masthead__megamenu__highlight-section, :host(#{$c4d-prefix}-megamenu-right-navigation), .#{$prefix}--masthead__megamenu__categories-section { - display: flex; - flex-direction: column; - padding-top: rem(18px); + background-color: $background; + padding-block-start: $spacing-06; + display: block; + position: relative; + + .#{$prefix}--masthead__megamenu-container { + @include masthead-megamenu-limit-height; + + position: var(--#{$c4d-prefix}-view-all-container-position, relative); + height: 100%; + z-index: 1; + + // Set containing block for fixed position view all CTA. + transform: var( + --#{$c4d-prefix}-view-all-container-transform, + rotate(0deg) + ); + + &.#{$prefix}--masthead__megamenu-container--has-view-all-link { + display: flex; + flex-direction: column; + justify-content: space-between; + + .#{$prefix}--masthead__megamenu-container-inner { + max-height: 100%; + overflow: overlay; + } + + .#{$prefix}--masthead__megamenu__view-all { + display: var(--#{$c4d-prefix}-view-all-display, inherit); + position: relative; + background-color: $background; + } + + .#{$prefix}--masthead__megamenu__view-all__border { + position: absolute; + top: 0; + height: rem(1px); + background: $layer-accent-01; + } + } + } + } + + :host(#{$c4d-prefix}-megamenu-left-navigation), + .#{$prefix}--masthead__megamenu__highlight-section { + @include make-col(4, 16); + + min-height: 100%; + + // Shift border left without breaking Carbon grid alignment. + padding-inline-start: $spacing-05; + margin-inline-start: calc(#{$spacing-05} * -1); + + .#{$prefix}--masthead__megamenu__categories { + columns: var(--#{$c4d-prefix}-left-nav-columns, 'initial'); + gap: 0; + } + + .#{$prefix}--masthead__megamenu__view-all__border { + inset-inline: 0; + } + } + + :host(#{$c4d-prefix}-megamenu-right-navigation), + .#{$prefix}--masthead__megamenu__categories-section { + display: block; width: 100%; + &.#{$c4d-prefix}--masthead__tabpanel-child { + height: 100%; + } + + &[style-scheme='has-sidebar'] { + .#{$prefix}--masthead__megamenu__heading, + .#{$prefix}--masthead__megamenu__categories { + padding-inline-start: var( + --#{$c4d-prefix}-right-nav-padding, + $spacing-05 + ); + } + } + + ::slotted(#{$c4d-prefix}-megamenu-heading) { + --heading-description-column-count: 2; + --heading-description-column-count-lg: 4; + } + + .#{$prefix}--masthead__megamenu--has-view-all-link { + .#{$prefix}--masthead__megamenu__categories { + padding-block-end: 0; + } + } + + .#{$prefix}--masthead__megamenu-container--has-sidebar { + ::slotted(#{$c4d-prefix}-megamenu-heading) { + --heading-description-column-count: 2; + --heading-description-column-count-lg: 3; + } + + .#{$prefix}--masthead__megamenu__categories { + @include breakpoint-up('lg') { + column-count: 3; + } + } + } + .#{$prefix}--masthead__megamenu__categories { - padding: 0 0 $spacing-07 0; - column-count: 4; + padding-block-end: $spacing-07; + column-count: 2; column-gap: 0; + + @include breakpoint-up('lg') { + column-count: 4; + } + } + + .#{$prefix}--masthead__megamenu__view-all__border { + inset-inline: 0; } - .#{$prefix}--masthead__megamenu--hasViewAllLink { - padding-bottom: 0; + // Disable columns here so child element can reapply them. + &[data-child-count='1'] { + .#{$prefix}--masthead__megamenu__categories { + column-count: initial; + + @include breakpoint-up('lg') { + column-count: initial; + } + } } + } + + .#{$prefix}--masthead__megamenu__heading, + :host(#{$c4d-prefix}-megamenu-heading) { + span { + display: block; + max-width: calc((1 / var(--heading-description-column-count, 2)) * 100%); - .#{$prefix}--masthead__megamenu--hasHighlights { - column-count: 3; + @include breakpoint-up('lg') { + max-width: calc( + (1 / var(--heading-description-column-count-lg, 4)) * 100% + ); + } } } .#{$prefix}--masthead__megamenu__copy, :host(#{$c4d-prefix}-megamenu-category-group-copy) { - display: block; - @include type-style('body-01'); + @include type-style('body-short-01'); + display: block; color: $text-secondary; - padding: rem(6px) $spacing-05 rem(10px); + margin: rem(6px) $spacing-05 rem(10px); + max-width: rem(272px); } :host(#{$c4d-prefix}-megamenu-category-group), .#{$prefix}--masthead__megamenu__category-group { display: block; - .#{$prefix}--masthead__megamenu__category-group-content { + &.only-child { + .#{$prefix}--masthead__megamenu__category-group-heading { + @include make-col(1, 2); + + @include breakpoint-up('lg') { + @include make-col(1, 3); + } + } + + .#{$prefix}--masthead__megamenu__category-group-content { + column-count: 2; + column-gap: 0; + + @include breakpoint-up('lg') { + column-count: 3; + } + } + + ::slotted(#{$c4d-prefix}-megamenu-category-link) { + display: block; + break-inside: avoid; + } + } + + .#{$prefix}--masthead__megamenu__category-group-content-wrapper { width: 100%; display: inline-block; - padding-bottom: $spacing-07; + padding-block-end: $spacing-06; } .#{$prefix}--masthead__megamenu__copy, ::slotted(#{$c4d-prefix}-megamenu-category-group-copy) { - @include type-style('body-01'); + @include type-style('body-short-01'); - color: $text-primary; - margin-top: rem(-6px); - padding: 0 $spacing-05 $spacing-03 $spacing-05; + color: $text-secondary; + margin: rem(-6px) $spacing-05 $spacing-06; } } @@ -208,49 +473,61 @@ :host( #{$c4d-prefix}-megamenu-link-with-icon - )[style-scheme='category-headline'], - .#{$prefix}--masthead__megamenu__category-headline { + )[style-scheme='category-headline'] { width: 100%; p, a, .#{$prefix}--link-with-icon { - padding: 6px $spacing-05; - text-decoration: none; width: 100%; - - @include type-style('heading-01'); + padding: rem(6px) $spacing-05; + margin-block-end: $spacing-06; } + p, + a, + .#{$prefix}--link-with-icon, ::slotted(span), span { - color: $text-primary; + @include type-style(heading-03, true); + color: $text-secondary; + text-decoration: none; + } + + ::slotted(span), + span { flex: inherit; } + ::slotted(svg), svg { - color: $link-primary; + fill: $text-secondary; min-width: $spacing-05; } &:visited, &:hover { - color: $text-primary; + color: $text-secondary; } } :host(#{$c4d-prefix}-megamenu-category-link) a, .#{$prefix}--masthead__megamenu__category-sublink { - @include type-style('body-01'); + @include type-style('body-short-01'); color: $text-secondary; text-decoration: none; - padding: 6px $spacing-05; + padding: rem(6px) $spacing-05; display: block; + &:visited { + color: $text-secondary; + } + &:hover, - &:active { + &:active, + &:hover:visited { color: $text-primary; } } @@ -263,40 +540,36 @@ width: 100%; + a { + width: 100%; + padding: rem(7px) $spacing-05; + } + span { flex: inherit; } } - .#{$prefix}--masthead__megamenu__category-sublink--highlighted, - :host(#{$c4d-prefix}-megamenu-link-with-icon)[style-scheme='category-sublink'] - a { - width: 100%; - padding: 7px $spacing-05; - } - - :host(#{$c4d-prefix}-megamenu-link-with-icon)[style-scheme='view-all'], + :host(#{$c4d-prefix}-megamenu-link-with-icon)[part*='view-all'], .#{$prefix}--masthead__megamenu__view-all-cta { - margin-top: auto; + width: 100%; display: flex; - z-index: 1; - a, - .#{$prefix}--link-with-icon { + &[part*='view-all-left'] { + [part='link'] { + padding-inline-start: $spacing-05; + } + } + + [part='link'] { text-decoration: none; width: 100%; - margin: 0 $spacing-05; - border-top: rem(1px) solid $layer-accent-01; + padding-inline: var(--#{$c4d-prefix}-view-all-padding, #{$spacing-07}) + $spacing-05; height: $spacing-09; - &:hover, - &:focus { - margin: 0; - padding: 0 $spacing-05; - } - &:hover { - border-top: rem(1px) solid transparent; + // color: $hover-primary-text; color: $link-primary-hover; } } @@ -315,8 +588,6 @@ :host(#{$c4d-prefix}-megamenu-category-link) a, :host(#{$c4d-prefix}-megamenu-link-with-icon) a, - .#{$prefix}--masthead__megamenu__category-headline - .#{$prefix}--link-with-icon, .#{$prefix}--masthead__megamenu__category-sublink--highlighted, .#{$prefix}--masthead__megamenu__view-all-cta .#{$prefix}--link-with-icon, .#{$prefix}--masthead__megamenu__category-sublink { @@ -342,34 +613,4 @@ */ } } - - :host(#{$c4d-prefix}-megamenu-left-navigation), - .#{$prefix}--masthead__megamenu__highlight-section { - min-height: 100%; - padding-top: rem(18px); - border-right: rem(1px) solid $layer-accent-01; - @include make-col(4, 16); - } - - @include breakpoint-between(800px, 1055px) { - .#{$prefix}--masthead__megamenu__container--row { - flex-direction: column; - } - - :host(#{$c4d-prefix}-megamenu-left-navigation), - .#{$prefix}--masthead__megamenu__highlight-section { - border-right: none; - border-bottom: rem(1px) solid $layer-accent-01; - column-count: 2; - column-gap: 0; - @include make-col(8, 8); - } - - :host(#{$c4d-prefix}-megamenu-right-navigation), - .#{$prefix}--masthead__megamenu__categories-section { - .#{$prefix}--masthead__megamenu__categories { - column-count: 2; - } - } - } } diff --git a/packages/styles/scss/components/masthead/_masthead-search.scss b/packages/styles/scss/components/masthead/_masthead-search.scss index 71614a2d05c..54ddc13c5c7 100755 --- a/packages/styles/scss/components/masthead/_masthead-search.scss +++ b/packages/styles/scss/components/masthead/_masthead-search.scss @@ -195,7 +195,7 @@ outline: $spacing-01 solid transparent; outline-offset: -#{$spacing-01}; background-color: $layer-01; - height: carbon--mini-units(6); + height: $spacing-09; z-index: 10000; &::placeholder { diff --git a/packages/styles/scss/components/masthead/_masthead.scss b/packages/styles/scss/components/masthead/_masthead.scss index 28b48363c8d..2150462ad07 100755 --- a/packages/styles/scss/components/masthead/_masthead.scss +++ b/packages/styles/scss/components/masthead/_masthead.scss @@ -10,12 +10,14 @@ @use '@carbon/styles/scss/components/tooltip'; @use '@carbon/styles/scss/components/ui-shell/side-nav'; @use '@carbon/styles/scss/components/ui-shell/ui-shell'; +@use '@carbon/styles/scss/components/button/tokens' as *; @use '@carbon/styles/scss/config' as *; @use '@carbon/styles/scss/motion' as *; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities' as *; @use '../../globals/vars' as *; @use '../link-with-icon'; @use 'vars' as *; @@ -154,29 +156,45 @@ color: $text-secondary; white-space: nowrap; + > svg { + fill: $icon-secondary; + } + &:hover { background-color: $background-hover; cursor: pointer; - color: $text-primary; + } + + &:active { + background-color: $background-selected; + } + + &:active, + &:hover { + color: $icon-primary; + > svg { - fill: currentColor; + fill: $icon-primary; } } &:active, &:focus { - outline: $spacing-01 solid $background-brand; - outline-offset: -#{$spacing-01}; - > svg { - fill: $text-primary; - } + outline: 2px solid $button-primary; + outline-offset: -2px; } } /// @access private @mixin masthead { + * { + box-sizing: border-box; + } + :host(#{$c4d-prefix}-masthead-composite), + :host(#{$c4d-prefix}-masthead-container), :host(#{$c4d-prefix}-cloud-masthead-container) { + position: relative; z-index: 900; padding-top: $spacing-09; } @@ -184,6 +202,7 @@ .#{$prefix}--masthead, :host(#{$c4d-prefix}-masthead) { @include theme($white, true); + @include font-family('sans'); position: fixed; top: 0; @@ -198,6 +217,14 @@ &[with-banner] { top: $spacing-13; } + + &[has-l1] { + --c4d-active-l0-border-color: #{$layer-accent-01}; + } + + ::slotted([slot='profile']) { + background-color: $background; + } } :host(#{$c4d-prefix}-megamenu-overlay), @@ -224,10 +251,6 @@ height: 100vh; } - :host(#{$c4d-prefix}-megamenu-link-with-icon) { - @extend .#{$prefix}--link-with-icon; - } - .#{$prefix}--masthead--sticky.#{$prefix}--masthead--sticky__l1 { top: -98px; @@ -355,6 +378,10 @@ &[data-selected='true'] { border-bottom-color: transparent; } + + &::after { + background-color: $focus; + } } } @@ -363,6 +390,10 @@ &:active { &[data-selected='true'][aria-expanded='false'] { border-bottom-color: transparent; + + &::after { + background-color: $focus; + } } } } @@ -381,7 +412,7 @@ left: 0; right: 0; height: rem(3px); - background-color: $link-primary; + background-color: var(--c4d-active-l0-border-color, $link-primary); } } @@ -403,9 +434,11 @@ box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3); bottom: -1px; width: rem(256px); + li { @include masthead-top-nav-menu-item; } + .#{$prefix}--header__menu-item { border: none; position: relative; @@ -453,19 +486,12 @@ display: inline-flex; justify-content: center; align-items: center; - > { - svg { - position: relative; - fill: $icon-secondary; - } - } &:hover { background-color: $background-hover; transition-duration: $search-transition-timing; - > { - svg { - fill: $icon-primary; - } + + > svg { + fill: $icon-primary; } } @@ -475,6 +501,11 @@ background-color: $background-hover; } + > svg { + position: relative; + fill: $icon-secondary; + } + .#{$prefix}--overflow-menu { width: 100%; height: 100%; diff --git a/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss b/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss index 2231d08d3a3..2b3eeb48bae 100644 --- a/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss +++ b/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss @@ -3,7 +3,7 @@ * * 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 *; @@ -142,6 +142,7 @@ top: 0; right: 0; display: flex; + background-color: $background; .#{$prefix}--header__search--search, .#{$prefix}--header__search--close { diff --git a/packages/styles/scss/ibm-dotcom-styles.scss b/packages/styles/scss/ibm-dotcom-styles.scss index b154395c8c7..756e579f7db 100644 --- a/packages/styles/scss/ibm-dotcom-styles.scss +++ b/packages/styles/scss/ibm-dotcom-styles.scss @@ -30,7 +30,7 @@ @use 'components/content-group-cards'; @use 'components/content-group-pictograms'; @use 'components/content-group-simple'; -@use 'components/content-item-horizontal'; +@use 'components/content-item-row'; @use 'components/cta-section'; @use 'components/dotcom-shell'; @use 'components/expressive-modal'; diff --git a/packages/styles/scss/internal/content-block/_content-block.scss b/packages/styles/scss/internal/content-block/_content-block.scss index 5a032b1433f..8aa4542e5a1 100644 --- a/packages/styles/scss/internal/content-block/_content-block.scss +++ b/packages/styles/scss/internal/content-block/_content-block.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2022 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. diff --git a/packages/styles/scss/patterns/sub-patterns/button-group/_button-group.scss b/packages/styles/scss/patterns/sub-patterns/button-group/_button-group.scss deleted file mode 100644 index d01c0a726c4..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/button-group/_button-group.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/button-group/button-group" - -@warn 'Deprecated scss import for `buttongroup`, remap to `@carbon/ibmdotcom-styles/scss/components/button-group/button-group`'; -@use '../../../components/button-group'; diff --git a/packages/styles/scss/patterns/sub-patterns/callout/_callout.scss b/packages/styles/scss/patterns/sub-patterns/callout/_callout.scss deleted file mode 100644 index a7be8865100..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/callout/_callout.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/callout/callout" - -@warn 'Deprecated scss import for `callout`, remap to `@carbon/ibmdotcom-styles/scss/components/callout/callout`'; -@use '../../../components/callout'; diff --git a/packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss b/packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss deleted file mode 100644 index 9422df15856..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/card-group/card-group" - -@warn 'Deprecated scss import for `card-group`, remap to `@carbon/ibmdotcom-styles/scss/components/card-group/card-group`'; -@use '../../../components/card-group'; diff --git a/packages/styles/scss/patterns/sub-patterns/card/index.css b/packages/styles/scss/patterns/sub-patterns/card/index.css deleted file mode 100644 index a95c660e10c..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/card/index.css +++ /dev/null @@ -1,17 +0,0 @@ -/* Error: @use rules must be written before any other rules. - * , - * 11 | @use '../../../components/card'; - * | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - * ' - * scss/patterns/sub-patterns/card/index.scss 11:1 root stylesheet */ - -body::before { - font-family: 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', - 'Droid Sans Mono', monospace; - white-space: pre; - display: block; - padding: 1em; - margin-bottom: 1em; - border-bottom: 2px solid #000000; - content: "Error: @use rules must be written before any other rules.\a \2577 \a 11 \2502 @use '../../../components/card';\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a scss/patterns/sub-patterns/card/index.scss 11:1 root stylesheet"; -} diff --git a/packages/styles/scss/patterns/sub-patterns/card/index.scss b/packages/styles/scss/patterns/sub-patterns/card/index.scss deleted file mode 100644 index 7c3ea95c16d..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/card/index.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/card/index" - -@warn 'Deprecated scss import for `card`, remap to `@carbon/ibmdotcom-styles/scss/components/card/index`'; -@use '../../../components/card'; diff --git a/packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss b/packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss deleted file mode 100644 index 183a523bc7e..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-item-horizontal/content-item-horizontal" - -@warn 'Deprecated scss import for `content-item-horizontal`, remap to `@carbon/ibmdotcom-styles/scss/components/content-item-horizontal/content-item-horizontal`'; -@use '../../../components/content-item-horizontal'; diff --git a/packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss b/packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss deleted file mode 100644 index f512c3978a8..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card" - -@warn 'Deprecated scss import for `feature-card`, remap to `@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card`'; -@use '../../../components/feature-card'; diff --git a/packages/styles/scss/patterns/sub-patterns/layout/_layout.scss b/packages/styles/scss/patterns/sub-patterns/layout/_layout.scss deleted file mode 100644 index 571e7e1be99..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/layout/_layout.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/layout/layout" - -@warn 'Deprecated scss import for `layout`, remap to `@carbon/ibmdotcom-styles/scss/components/layout/layout`'; -@use '../../../components/layout'; diff --git a/packages/styles/scss/patterns/sub-patterns/link-list/_index.scss b/packages/styles/scss/patterns/sub-patterns/link-list/_index.scss deleted file mode 100644 index b9aa902c4ee..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/link-list/_index.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/link-list/index" - -@warn 'Deprecated scss import for `link-list`, remap to `@carbon/ibmdotcom-styles/scss/components/link-list/index`'; -@use '../../../components/link-list'; diff --git a/packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss b/packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss deleted file mode 100644 index 79b1019ecf9..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/link-list/link-list" - -@warn 'Deprecated scss import for `link-list`, remap to `@carbon/ibmdotcom-styles/scss/components/link-list/link-list`'; -@use '../../../components/link-list'; diff --git a/packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss b/packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss deleted file mode 100644 index b0b03f3040a..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/pictogram-item/pictogram-item" - -@warn 'Deprecated scss import for `pictogram-item`, remap to `@carbon/ibmdotcom-styles/scss/components/pictogram-item/pictogram-item`'; -@use '../../../components/pictogram-item'; diff --git a/packages/styles/scss/patterns/sub-patterns/quote/_quote.scss b/packages/styles/scss/patterns/sub-patterns/quote/_quote.scss deleted file mode 100644 index 88a45096c3b..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/quote/_quote.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/quote/quote" - -@warn 'Deprecated scss import for `quote`, remap to `@carbon/ibmdotcom-styles/scss/components/quote/quote`'; -@use '../../../components/quote'; diff --git a/packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss b/packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss deleted file mode 100644 index 55e7f29d699..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents" - -@warn 'Deprecated scss import for `tableofcontents`, remap to `@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents`'; -@use '../../../components/tableofcontents'; diff --git a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.css b/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.css deleted file mode 100644 index 22e6e4b8490..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.css +++ /dev/null @@ -1,17 +0,0 @@ -/* Error: @use rules must be written before any other rules. - * , - * 11 | @use '../../../components/tableofcontents'; - * | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - * ' - * scss/patterns/sub-patterns/tableofcontents/index.scss 11:1 root stylesheet */ - -body::before { - font-family: 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', - 'Droid Sans Mono', monospace; - white-space: pre; - display: block; - padding: 1em; - margin-bottom: 1em; - border-bottom: 2px solid #000000; - content: "Error: @use rules must be written before any other rules.\a \2577 \a 11 \2502 @use '../../../components/tableofcontents';\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a scss/patterns/sub-patterns/tableofcontents/index.scss 11:1 root stylesheet"; -} diff --git a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss b/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss deleted file mode 100644 index 9466d096c1a..00000000000 --- a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2020 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/tableofcontents/index" - -@warn 'Deprecated scss import for `tableofcontents`, remap to `@carbon/ibmdotcom-styles/scss/components/tableofcontents/index`'; -@use '../../../components/tableofcontents'; diff --git a/packages/utilities/scripts/rollup.config.js b/packages/utilities/scripts/rollup.config.js index c33a2539b10..5ae39e54299 100644 --- a/packages/utilities/scripts/rollup.config.js +++ b/packages/utilities/scripts/rollup.config.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/utilities/src/utilities/index.js b/packages/utilities/src/utilities/index.js index 78043709c76..3442ab719f3 100644 --- a/packages/utilities/src/utilities/index.js +++ b/packages/utilities/src/utilities/index.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2021 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. diff --git a/packages/utilities/src/utilities/ipcinfoCookie/__tests__/ipcinfoCookie.test.js b/packages/utilities/src/utilities/ipcinfoCookie/__tests__/ipcinfoCookie.test.js index 6a38a86c91f..4157749a13d 100644 --- a/packages/utilities/src/utilities/ipcinfoCookie/__tests__/ipcinfoCookie.test.js +++ b/packages/utilities/src/utilities/ipcinfoCookie/__tests__/ipcinfoCookie.test.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020 + * 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. diff --git a/packages/utilities/src/utilities/ipcinfoCookie/ipcinfoCookie.js b/packages/utilities/src/utilities/ipcinfoCookie/ipcinfoCookie.js index c659eebba1c..38057392ed0 100644 --- a/packages/utilities/src/utilities/ipcinfoCookie/ipcinfoCookie.js +++ b/packages/utilities/src/utilities/ipcinfoCookie/ipcinfoCookie.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js b/packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js index 46af9c4106b..dc80e6ea080 100644 --- a/packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js +++ b/packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/utilities/src/utilities/parseAspectRatio/parseAspectRatio.js b/packages/utilities/src/utilities/parseAspectRatio/parseAspectRatio.js index b38dc3d5a67..12091ff18ab 100644 --- a/packages/utilities/src/utilities/parseAspectRatio/parseAspectRatio.js +++ b/packages/utilities/src/utilities/parseAspectRatio/parseAspectRatio.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2022 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. diff --git a/packages/utilities/src/utilities/removeHtmlTagEntities/removeHtmlTagEntities.js b/packages/utilities/src/utilities/removeHtmlTagEntities/removeHtmlTagEntities.js index ce2c9d8e8c2..d2752d990ea 100644 --- a/packages/utilities/src/utilities/removeHtmlTagEntities/removeHtmlTagEntities.js +++ b/packages/utilities/src/utilities/removeHtmlTagEntities/removeHtmlTagEntities.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/web-components/.eslintrc.js b/packages/web-components/.eslintrc.js index 4997db2dd2c..75ad5442f6b 100644 --- a/packages/web-components/.eslintrc.js +++ b/packages/web-components/.eslintrc.js @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/web-components/.storybook/addon-knobs-args/decorators.ts b/packages/web-components/.storybook/addon-knobs-args/decorators.ts index 640d6f5722b..58ca87650fb 100644 --- a/packages/web-components/.storybook/addon-knobs-args/decorators.ts +++ b/packages/web-components/.storybook/addon-knobs-args/decorators.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/web-components/.storybook/manager.js b/packages/web-components/.storybook/manager.js index 7f91f4302e2..b97f3af7aaf 100644 --- a/packages/web-components/.storybook/manager.js +++ b/packages/web-components/.storybook/manager.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/web-components/carbon.yml b/packages/web-components/carbon.yml index 038a73f7b00..dccec94392b 100644 --- a/packages/web-components/carbon.yml +++ b/packages/web-components/carbon.yml @@ -231,15 +231,15 @@ assets: name: Storybook action: link url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-item - content-item-horizontal: - externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-horizontal + content-item-row: + externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-row status: stable framework: web-component demoLinks: - type: storybook name: Storybook action: link - url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-item-horizontal + url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-item-row content-section: externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-section status: stable diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js index 5ce319fb9c9..cf7379a9f70 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js @@ -12,9 +12,9 @@ import { render } from 'react-dom'; import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal'; import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; -import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal'; -import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow'; -import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy'; +import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row'; +import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow'; +import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; @@ -24,10 +24,10 @@ import './index.css'; const App = () => ( Lorem ipsum dolor sit amet - - Lorem ipsum + + Lorem ipsum Aliquam condimentum - Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet Link text @@ -36,7 +36,7 @@ const App = () => ( External link text - + ); diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-cards/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-group-cards/src/index.js index d73a8f4979d..4e87f30e55f 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-group-cards/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/content-group-cards/src/index.js @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js index 1c110de0231..d8b127bdc8a 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/.gitignore b/packages/web-components/examples/codesandbox/components-react/content-item-row/.gitignore similarity index 100% rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/.gitignore rename to packages/web-components/examples/codesandbox/components-react/content-item-row/.gitignore diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/index.html b/packages/web-components/examples/codesandbox/components-react/content-item-row/index.html similarity index 100% rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/index.html rename to packages/web-components/examples/codesandbox/components-react/content-item-row/index.html diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/package.json b/packages/web-components/examples/codesandbox/components-react/content-item-row/package.json similarity index 92% rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/package.json rename to packages/web-components/examples/codesandbox/components-react/content-item-row/package.json index 6bc3a4895c9..2aad58bdf43 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/package.json +++ b/packages/web-components/examples/codesandbox/components-react/content-item-row/package.json @@ -1,5 +1,5 @@ { - "name": "ibmdotcom-web-components-react-content-item-horizontal-example", + "name": "ibmdotcom-web-components-react-content-item-row-example", "version": "0.1.0", "private": true, "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.", diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-item-row/sandbox.config.json similarity index 100% rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/sandbox.config.json rename to packages/web-components/examples/codesandbox/components-react/content-item-row/sandbox.config.json diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.css b/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.css similarity index 100% rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.css rename to packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.css diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js similarity index 68% rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.js rename to packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js index 203532008d4..8804b9ac8d5 100644 --- a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js @@ -10,11 +10,11 @@ import React from 'react'; import { render } from 'react-dom'; // eslint-disable-next-line max-len -import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal'; +import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row'; // eslint-disable-next-line max-len -import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy'; +import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy'; // eslint-disable-next-line max-len -import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow'; +import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; @@ -22,13 +22,13 @@ import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-r import './index.css'; const App = () => ( - - Lorem ipsum + + Lorem ipsum Aliquam condimentum - + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + Learn more @@ -37,7 +37,7 @@ const App = () => ( Microservices and containers - + ); render(, document.getElementById('root')); diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/webpack.config.js b/packages/web-components/examples/codesandbox/components-react/content-item-row/webpack.config.js similarity index 100% rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/webpack.config.js rename to packages/web-components/examples/codesandbox/components-react/content-item-row/webpack.config.js diff --git a/packages/web-components/examples/codesandbox/components-react/cta-block/package.json b/packages/web-components/examples/codesandbox/components-react/cta-block/package.json index 01152b535ae..2333c035797 100644 --- a/packages/web-components/examples/codesandbox/components-react/cta-block/package.json +++ b/packages/web-components/examples/codesandbox/components-react/cta-block/package.json @@ -5,7 +5,8 @@ "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.", "license": "Apache-2", "scripts": { - "start": "webpack serve" + "start": "webpack serve", + "build": "webpack" }, "dependencies": { "@carbon/ibmdotcom-web-components": "latest", diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace/src/index.js b/packages/web-components/examples/codesandbox/components-react/leadspace/src/index.js index 28b2ba31693..1d87ec33a2e 100644 --- a/packages/web-components/examples/codesandbox/components-react/leadspace/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/leadspace/src/index.js @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2021 + * 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. diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js b/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js index e7a677e1b2b..786f14d209b 100644 --- a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js @@ -14,9 +14,9 @@ import C4DTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-ex /* eslint-disable max-len */ import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading'; /* eslint-disable max-len */ -import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media'; +import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media'; /* eslint-disable max-len */ -import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy'; +import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; @@ -28,16 +28,16 @@ const App = () => ( Section heading - + Aliquam condimentum - + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + Learn more @@ -46,19 +46,19 @@ const App = () => ( Microservices and containers - + - + Aliquam condimentum - + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + Learn more @@ -67,19 +67,19 @@ const App = () => ( Microservices and containers - + - + Aliquam condimentum - + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + Learn more @@ -88,19 +88,19 @@ const App = () => ( Microservices and containers - + - + Aliquam condimentum - + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + Learn more @@ -109,7 +109,7 @@ const App = () => ( Microservices and containers - + ); diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.babelrc b/packages/web-components/examples/codesandbox/components/content-item-row/.babelrc similarity index 100% rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/.babelrc rename to packages/web-components/examples/codesandbox/components/content-item-row/.babelrc diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.gitignore b/packages/web-components/examples/codesandbox/components/content-item-row/.gitignore similarity index 100% rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/.gitignore rename to packages/web-components/examples/codesandbox/components/content-item-row/.gitignore diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.sassrc b/packages/web-components/examples/codesandbox/components/content-item-row/.sassrc similarity index 100% rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/.sassrc rename to packages/web-components/examples/codesandbox/components/content-item-row/.sassrc diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/cdn.html b/packages/web-components/examples/codesandbox/components/content-item-row/cdn.html similarity index 53% rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/cdn.html rename to packages/web-components/examples/codesandbox/components/content-item-row/cdn.html index 8d26f947b36..7d8b099ea65 100644 --- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/cdn.html +++ b/packages/web-components/examples/codesandbox/components/content-item-row/cdn.html @@ -13,61 +13,61 @@ - +
- - Lorem ipsum - Aliquam condimentum - - + Lorem ipsum + Aliquam condimentum + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget - dolor nec hendrerit. Phasellus at elit sollicitudin. - - - + + + Link text - - + + External link text - - - + + +
- - Lorem ipsum - Aliquam condimentum - - + + Lorem ipsum + Aliquam condimentum + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - - - - + + + + Link text - - + + External link text - - - + + - - + +
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html b/packages/web-components/examples/codesandbox/components/content-item-row/index.html similarity index 54% rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html rename to packages/web-components/examples/codesandbox/components/content-item-row/index.html index 745cf96a184..80ae8630bdf 100644 --- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html +++ b/packages/web-components/examples/codesandbox/components/content-item-row/index.html @@ -14,7 +14,7 @@ @@ -25,50 +25,50 @@
- - Lorem ipsum - Aliquam condimentum - - + Lorem ipsum + Aliquam condimentum + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget - dolor nec hendrerit. Phasellus at elit sollicitudin. - - - + + + Link text - - + + External link text - - - + + +
- - Lorem ipsum - Aliquam condimentum - - + + Lorem ipsum + Aliquam condimentum + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - - - - + + + + Link text - - + + External link text - - - + + - - + +
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/package.json b/packages/web-components/examples/codesandbox/components/content-item-row/package.json similarity index 90% rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/package.json rename to packages/web-components/examples/codesandbox/components/content-item-row/package.json index 2fe46f91812..2b8d3dc18a8 100644 --- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/package.json +++ b/packages/web-components/examples/codesandbox/components/content-item-row/package.json @@ -1,5 +1,5 @@ { - "name": "ibmdotcom-web-components-content-item-horizontal-example", + "name": "ibmdotcom-web-components-content-item-row-example", "version": "0.1.0", "private": true, "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.", diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-item-row/sandbox.config.json similarity index 100% rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/sandbox.config.json rename to packages/web-components/examples/codesandbox/components/content-item-row/sandbox.config.json diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components/content-item-row/src/index.js similarity index 91% rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.js rename to packages/web-components/examples/codesandbox/components/content-item-row/src/index.js index cba9c470fd0..a7ed26d4367 100644 --- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.js +++ b/packages/web-components/examples/codesandbox/components/content-item-row/src/index.js @@ -7,5 +7,5 @@ * LICENSE file in the root directory of this source tree. */ -import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js'; +import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js'; import './index.scss'; diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.scss b/packages/web-components/examples/codesandbox/components/content-item-row/src/index.scss similarity index 100% rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.scss rename to packages/web-components/examples/codesandbox/components/content-item-row/src/index.scss diff --git a/packages/web-components/examples/codesandbox/components/content-item/cdn.html b/packages/web-components/examples/codesandbox/components/content-item/cdn.html index 1ab27adf701..d8bd3f9a2a4 100644 --- a/packages/web-components/examples/codesandbox/components/content-item/cdn.html +++ b/packages/web-components/examples/codesandbox/components/content-item/cdn.html @@ -13,7 +13,7 @@ @@ -24,11 +24,11 @@
- - Heading - Copy - CTA text - + + Heading + Copy + CTA text +
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/cdn.html b/packages/web-components/examples/codesandbox/components/leadspace-with-search/cdn.html index 8ce77f938b3..61a950130f0 100644 --- a/packages/web-components/examples/codesandbox/components/leadspace-with-search/cdn.html +++ b/packages/web-components/examples/codesandbox/components/leadspace-with-search/cdn.html @@ -27,19 +27,16 @@

Hello World! 👋

- - Find a product - - Innovate like a startup, scale for the enterprise - Automate your software release process with continuous - delivery (CD)—the most critical part of adopting DevOps. - Build, test, and deploy code changes quickly, ensuring - software is always ready for deployment. - - - - + + Find a product + Automate your software release process with continuous + delivery (CD)—the most critical part of adopting DevOps. + Build, test, and deploy code changes quickly, ensuring + software is always ready for deployment. + + +
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/index.html b/packages/web-components/examples/codesandbox/components/leadspace-with-search/index.html index 56be518dbd5..0e11c5f5893 100644 --- a/packages/web-components/examples/codesandbox/components/leadspace-with-search/index.html +++ b/packages/web-components/examples/codesandbox/components/leadspace-with-search/index.html @@ -18,19 +18,16 @@
- - Find a product - - Innovate like a startup, scale for the enterprise - Automate your software release process with continuous - delivery (CD)—the most critical part of adopting DevOps. - Build, test, and deploy code changes quickly, ensuring - software is always ready for deployment. - - - - + + Find a product + Automate your software release process with continuous + delivery (CD)—the most critical part of adopting DevOps. + Build, test, and deploy code changes quickly, ensuring + software is always ready for deployment. + + +
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/src/index.js b/packages/web-components/examples/codesandbox/components/leadspace/src/index.js index 113aa755f43..727564f2548 100644 --- a/packages/web-components/examples/codesandbox/components/leadspace/src/index.js +++ b/packages/web-components/examples/codesandbox/components/leadspace/src/index.js @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2021, 2023 + * 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. diff --git a/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html b/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html index fdd1a2e77f4..f0d04f50034 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html +++ b/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html @@ -19,8 +19,15 @@ display: none; } - + + + + + + + + @@ -29,7 +36,7 @@

- Purpose and function + L0/Masthead V2 using V2 Translations (RTL)

The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework @@ -67,7 +74,6 @@

-
- + diff --git a/packages/web-components/examples/codesandbox/components/masthead/cdn.html b/packages/web-components/examples/codesandbox/components/masthead/cdn.html index 6de685e61f0..bf4bfcda4f4 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/cdn.html +++ b/packages/web-components/examples/codesandbox/components/masthead/cdn.html @@ -19,8 +19,15 @@ display: none; } - + + + + + + + + @@ -29,7 +36,7 @@

- Purpose and function + L0/Masthead V2 using V2 Translations (CDN)

The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework @@ -67,7 +74,6 @@

-
- + diff --git a/packages/web-components/examples/codesandbox/components/masthead/index.html b/packages/web-components/examples/codesandbox/components/masthead/index.html index dc7684dec02..803b3692f0c 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/index.html +++ b/packages/web-components/examples/codesandbox/components/masthead/index.html @@ -19,15 +19,26 @@ } + + + + + + - +

- Purpose and function + L0/Masthead V2 using V2 Translations

The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework diff --git a/packages/web-components/examples/codesandbox/components/masthead/package.json b/packages/web-components/examples/codesandbox/components/masthead/package.json index cf8bb1caaa9..5ccb1e22b49 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/package.json +++ b/packages/web-components/examples/codesandbox/components/masthead/package.json @@ -11,7 +11,7 @@ "build": "parcel build *.html --no-minify --public-url ./" }, "dependencies": { - "@carbon/ibmdotcom-web-components": "latest" + "@carbon/ibmdotcom-web-components": "alpha" }, "devDependencies": { "@babel/core": "^7.0.0-0", diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/ddo.js b/packages/web-components/examples/codesandbox/components/masthead/src/ddo.js new file mode 100644 index 00000000000..5defe6e894e --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/masthead/src/ddo.js @@ -0,0 +1,50 @@ +/** + * @license + * + * Copyright IBM Corp. 2022 + * + * 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 './index.scss'; + +window.digitalData = { + page: { + category: { + primaryCategory: '', + }, + pageInfo: { + effectiveDate: '06-14-2022', + expiryDate: '06-14-2026', + language: 'en-au', + publishDate: '06-14-2022', + publisher: 'IBM Corporation', + version: 'Carbon for IBM.com', + ibm: { + contentDelivery: 'HTML', + contentProducer: 'IBM Experience Engine-Digital', + country: 'au', + industry: 'zz', + owner: 'Corporate Webmaster/New York/IBM', + siteID: 'GLOBAL', + subject: 'IBM Experience Engine-Digital', + type: 'zz', + messaging: { + routing: { + focusArea: 'Miscellaneous - Cross IBM - ISV', + languageCode: 'en', + regionCode: 'AU', + }, + translation: { + languageCode: 'en', + regionCode: 'AU', + }, + }, + }, + hotjar: { + enable: false, + }, + }, + }, +}; diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js b/packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js index 826b86921aa..9a5746b81d1 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js +++ b/packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js @@ -1,23 +1,10 @@ /** * @license * - * Copyright IBM Corp. 2020, 2021 + * Copyright IBM Corp. 2022 * * 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 './index.scss'; - -window.digitalData = { - page: { - pageInfo: { - language: 'en-US', - ibm: { - country: 'US', - siteID: 'IBMTESTWWW', - }, - }, - isDataLayerReady: true, - }, -}; diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/index.js b/packages/web-components/examples/codesandbox/components/masthead/src/index.js index 173fbed596a..fd05b3c7567 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/src/index.js +++ b/packages/web-components/examples/codesandbox/components/masthead/src/index.js @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2021 + * Copyright IBM Corp. 2020, 2022 * * 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,16 +16,3 @@ import './index.scss'; * * https://github.com/codesandbox/codesandbox-client/issues/4456 */ - -window.digitalData = { - page: { - pageInfo: { - language: 'en-US', - ibm: { - country: 'US', - siteID: 'IBMTESTWWW', - }, - }, - isDataLayerReady: true, - }, -}; diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/index.scss b/packages/web-components/examples/codesandbox/components/masthead/src/index.scss index 5b53f554efe..2daeabaec27 100644 --- a/packages/web-components/examples/codesandbox/components/masthead/src/index.scss +++ b/packages/web-components/examples/codesandbox/components/masthead/src/index.scss @@ -1,7 +1,7 @@ // // @license // -// Copyright IBM Corp. 2020 +// Copyright IBM Corp. 2020, 2022 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. @@ -20,13 +20,12 @@ 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.dds-ce-demo--ui-shell-content { + @media (min-width: 66rem) { + .cds--offset-lg-3 { + margin-left: 0; + } } -} - -.cds--content.cds-ce-demo--ui-shell-content { h2 { margin: 30px 0; diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html b/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html index 2297df78d37..6ec6433a6c1 100644 --- a/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html +++ b/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html @@ -13,7 +13,7 @@ @@ -24,72 +24,72 @@

- - Section heading - - - + Section heading + + + - - Aliquam condimentum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget + + Aliquam condimentum + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - - - + + + Link text - - + + External link text - - - - - - - + + + + + + - - Aliquam condimentum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget + + Aliquam condimentum + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - - - + + + Link text - - + + External link text - - - - - - - + + + + + + - - Aliquam condimentum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget + + Aliquam condimentum + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - - - + + + Link text - - + + External link text - - - - - + + + + +
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html b/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html index d8cd76c7014..e291908f59b 100644 --- a/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html +++ b/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html @@ -12,7 +12,7 @@ @@ -23,124 +23,124 @@
- - Section heading - - - + Section heading + + + - - Aliquam condimentum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget + + Aliquam condimentum + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - - - + + + Link text - - + + External link text - - - - - - - + + + + + + - - Aliquam condimentum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget + + Aliquam condimentum + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - - - + + + Link text - - + + External link text - - - - - - - + + + + + + - - Aliquam condimentum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget + + Aliquam condimentum + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - - - + + + Link text - - + + External link text - - - - - - - + + + + + + - - Aliquam condimentum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget + + Aliquam condimentum + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - - - + + + Link text - - + + External link text - - - - - - - + + + + + + - Aliquam condimentum + Aliquam condimentum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - - - + + Link text - - + External link text - - - - - + + + + +
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js b/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js index 09cf443aff8..c3fc8563ea9 100644 --- a/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js +++ b/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js @@ -8,6 +8,6 @@ */ import '@carbon/ibmdotcom-web-components/es/components/tabs-extended-media/index.js'; -import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js'; +import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js'; import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js'; import './index.scss'; diff --git a/packages/web-components/gulp-tasks/test.js b/packages/web-components/gulp-tasks/test.js index 56746cd295c..86747381adc 100644 --- a/packages/web-components/gulp-tasks/test.js +++ b/packages/web-components/gulp-tasks/test.js @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/web-components/src/component-mixins/parent-visibility/parent-visibility.ts b/packages/web-components/src/component-mixins/parent-visibility/parent-visibility.ts index f6eadb417ba..c4c363c3826 100644 --- a/packages/web-components/src/component-mixins/parent-visibility/parent-visibility.ts +++ b/packages/web-components/src/component-mixins/parent-visibility/parent-visibility.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2022 + * 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. diff --git a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx index dc08c622ecc..a2c7ecc96e2 100644 --- a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx +++ b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx @@ -2,7 +2,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts index 2770d9abe56..f175652cbf8 100644 --- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts +++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts @@ -112,7 +112,7 @@ const cardsDiffLengthPhrase = ( Topic ${tagGroup ? tagGroupContent : ''} - + `; diff --git a/packages/web-components/src/components/card-link/card-link.scss b/packages/web-components/src/components/card-link/card-link.scss index c70c5a7975f..7b3f892404c 100644 --- a/packages/web-components/src/components/card-link/card-link.scss +++ b/packages/web-components/src/components/card-link/card-link.scss @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2021 + * 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. diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx index b9094f711b7..115d911fdbd 100644 --- a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx @@ -6,7 +6,7 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; # `` > The Content Block - Horizontal block pattern contains a collection of -> `` content items. +> `` content items. > 💡 Check our > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-horizontal) @@ -37,15 +37,15 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-horizontal/ Curabitur malesuada varius mi eu posuere - - Lorem ipsum + Lorem ipsum Aliquam condimentum - Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit - sollicitudin. - + ``` @@ -81,7 +81,7 @@ to see how Web Components selector and `data-autoid` should be used. | ------------------------------------ | ------------------------------------------------- | ----------- | | `` | `data-autoid="cds--content-block-simple"` | Component | | `` | `data-autoid="cds--content-block__heading"` | Component | -| `` | `data-autoid="cds--content-item-horizontal"` | Component | -| `` | `data-autoid="cds--content-item-horizontal-copy"` | Component | +| `` | `data-autoid="cds--content-item-row"` | Component | +| `` | `data-autoid="cds--content-item-row-copy"` | Component | diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx index 81ca31960ef..8b958115da5 100644 --- a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx @@ -25,9 +25,9 @@ Here's a quick example to get you started. import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal'; import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; -import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal'; -import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow'; -import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy'; +import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row'; +import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow'; +import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; @@ -38,12 +38,12 @@ function App() { Lorem ipsum dolor sit amet - - + + Lorem ipsum - + Aliquam condimentum - {copy} + {copy} - + ); } @@ -78,7 +78,7 @@ to see how Web Components selector and `data-autoid` should be used. | ------------------------------------ | ------------------------------------------------- | ----------- | | `` | `data-autoid="cds--content-block-simple"` | Component | | `` | `data-autoid="cds--content-block__heading"` | Component | -| `` | `data-autoid="cds--content-item-horizontal"` | Component | -| `` | `data-autoid="cds--content-item-horizontal-copy"` | Component | +| `` | `data-autoid="cds--content-item-row"` | Component | +| `` | `data-autoid="cds--content-item-row-copy"` | Component | diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx index 048a95e6d65..18fe807110b 100644 --- a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx +++ b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx @@ -16,9 +16,9 @@ import React from 'react'; import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal'; import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; -import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal'; -import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow'; -import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy'; +import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row'; +import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow'; +import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; @@ -32,12 +32,12 @@ const copy = 'Phasellus at elit sollicitudin.'; const linkListItem = ( - - + + Lorem ipsum - + Aliquam condimentum - {copy} + {copy} - + ); export const Default = (args) => { diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts index d12fe89c6ff..776b615a804 100644 --- a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts +++ b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts @@ -19,12 +19,10 @@ const copy = 'Phasellus at elit sollicitudin.'; const linkListItem = html` - - Lorem ipsum + + Lorem ipsum Aliquam condimentum - ${copy} + ${copy} - + `; export const Default = (args) => { diff --git a/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts b/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts index 18b379c3b2c..53a6e189308 100644 --- a/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts +++ b/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts @@ -8,9 +8,9 @@ */ import { html, render } from 'lit/html.js'; -import '../../content-item-horizontal/content-item-horizontal'; -import '../../content-item-horizontal/content-item-horizontal-copy'; -import '../../content-item-horizontal/content-item-horizontal-eyebrow'; +import '../../content-item-row/content-item-row'; +import '../../content-item-row/content-item-row-copy'; +import '../../content-item-row/content-item-row-eyebrow'; import '../content-block-horizontal'; import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon'; import { CTA_TYPE } from '../../cta/defs'; @@ -36,10 +36,10 @@ describe('c4d-content-block-horizontal', function () { render( template({ children: html` - - eyebrow-foo + + eyebrow-foo heading-foo - copy-foo + copy-foo - + `, }), document.body diff --git a/packages/web-components/src/components/content-block-horizontal/index.ts b/packages/web-components/src/components/content-block-horizontal/index.ts index 19573b3c64c..e7a8801faeb 100644 --- a/packages/web-components/src/components/content-block-horizontal/index.ts +++ b/packages/web-components/src/components/content-block-horizontal/index.ts @@ -10,4 +10,4 @@ import './content-block-horizontal'; import '../content-block/content-block-heading'; import '../content-block/content-block-complementary'; -import '../content-item-horizontal/index'; +import '../content-item-row/index'; diff --git a/packages/web-components/src/components/content-block/content-block.scss b/packages/web-components/src/components/content-block/content-block.scss index 1cafd8d5e79..51a38599648 100644 --- a/packages/web-components/src/components/content-block/content-block.scss +++ b/packages/web-components/src/components/content-block/content-block.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2020, 2022 +// 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. diff --git a/packages/web-components/src/components/content-group-simple/content-group-simple.scss b/packages/web-components/src/components/content-group-simple/content-group-simple.scss index cb85cf98279..2a3e663b356 100644 --- a/packages/web-components/src/components/content-group-simple/content-group-simple.scss +++ b/packages/web-components/src/components/content-group-simple/content-group-simple.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2020, 2021 +// 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. diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss deleted file mode 100644 index e2b3a668153..00000000000 --- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss +++ /dev/null @@ -1,13 +0,0 @@ -// -// 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. -// - -@use '@carbon/ibmdotcom-styles/scss/components/content-item-horizontal'; -@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; - -:host(#{$c4d-prefix}-content-item-horizontal-eyebrow) { - display: block; -} diff --git a/packages/web-components/src/components/content-item-horizontal/index.ts b/packages/web-components/src/components/content-item-horizontal/index.ts deleted file mode 100644 index 8a29626cac0..00000000000 --- a/packages/web-components/src/components/content-item-horizontal/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 2022 - * - * 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 './content-item-horizontal'; -import './content-item-horizontal-copy'; -import './content-item-horizontal-eyebrow'; -import './content-item-horizontal-media'; -import './content-item-horizontal-media-copy'; -import './content-item-horizontal-media-video'; -import './content-item-horizontal-thumbnail-copy'; -import './content-item-horizontal-media-featured'; -import '../content-item/content-item-heading'; -import '../cta/index'; -import '../link-list/link-list'; diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx b/packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx similarity index 73% rename from packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx rename to packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx index ef15dff2e12..66fe0b1d98f 100644 --- a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx @@ -3,13 +3,13 @@ import markdownContents from '../../../../docs/markdown-contents.md'; import contributing from '../../../../../../docs/contributing-license.md'; import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; -# `` +# `` > 💡 Check our -> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-horizontal) +> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-row) > example implementation. -[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-horizontal) +[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-row) ## Getting started @@ -18,11 +18,11 @@ Here's a quick example to get you started. ### JS (via import) ```javascript -import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js'; +import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js'; ``` @@ -30,15 +30,15 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/i ### HTML ```html - - Lorem ipsum + Lorem ipsum Aliquam condimentum - Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit - sollicitudin. - + ``` ### HTML (with thumbnail) ```html - + Aliquam condimentum - + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + - + ``` ## With Media (image) @@ -93,7 +93,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/i ### JS (via import) ```javascript -import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js'; +import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js'; // with Image import '@carbon/ibmdotcom-web-components/es/components/image/image'; @@ -102,11 +102,11 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image'; ### HTML ```html - + Lorem Ipsum - Lorem IpsumLorem Ipsum - + ``` ## With Media (video) @@ -130,21 +130,21 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image'; ### JS (via import) ```javascript -import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js'; +import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js'; // with Video -import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/content-item-horizontal-media-video'; +import '@carbon/ibmdotcom-web-components/es/components/content-item-row/content-item-row-media-video'; ``` ### HTML ```html - - + + Lorem Ipsum - Lorem IpsumLorem Ipsum - + ``` ## With Featured Media (image) @@ -168,7 +168,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/c ### JS (via import) ```javascript -import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js'; +import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js'; // with Image import '@carbon/ibmdotcom-web-components/es/components/image/image'; @@ -177,16 +177,16 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image'; ### HTML ```html - - Lorem ipsum + Lorem ipsum Aliquam condimentum - + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + - + ``` ## With Featured Media (video) @@ -210,25 +210,25 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image'; ### JS (via import) ```javascript -import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js'; +import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js'; // with Video -import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/content-item-horizontal-media-video'; +import '@carbon/ibmdotcom-web-components/es/components/content-item-row/content-item-row-media-video'; ``` ### HTML ```html - - Lorem ipsum + Lorem ipsum Aliquam condimentum - + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + - - + + ``` ## Props - + ## Stable selectors @@ -261,10 +261,10 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | ------------------------------------- | -------------------------------------------------- | ----------- | -| `` | `data-autoid="cds--content-item-horizontal"` | Component | -| `` | `data-autoid="cds--content-item-horizontal-media"` | Component | +| `` | `data-autoid="cds--content-item-row"` | Component | +| `` | `data-autoid="cds--content-item-row-media"` | Component | | `` | `data-autoid="cds--content-item-heading"` | Component | -| `` | `data-autoid="cds--content-item-horizontal-copy"` | Component | +| `` | `data-autoid="cds--content-item-row-copy"` | Component | | `` | `data-autoid="cds--link-list"` | Component | | `` | `data-autoid="cds--link-list-item-cta"` | Component | diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx similarity index 60% rename from packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.react.mdx rename to packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx index 4d07ae92201..33560804674 100644 --- a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx @@ -5,15 +5,15 @@ import { Story, } from '@storybook/addon-docs/blocks'; import contributing from '../../../../../../docs/contributing-license.md'; -import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal'; +import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row'; -# Content Item Horizontal +# Content Item Row > 💡 Check our -> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-horizontal) +> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-row) > example implementation. -[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-horizontal) +[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-row) ## Getting started @@ -22,25 +22,25 @@ Here's a quick example to get you started. ### JS ```javascript -import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal'; -import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy'; -import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow'; +import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row'; +import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy'; +import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; function App() { return ( - - + + Lorem ipsum - + Aliquam condimentum - + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + - + ); } ``` @@ -63,8 +63,8 @@ function App() { ### JS (with thumbnail) ```javascript -import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal'; -import C4DContentItemHorizontalThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-thumbnail-copy'; +import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row'; +import C4DContentItemRowThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-thumbnail-copy'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; @@ -72,13 +72,13 @@ import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image function App() { return ( - + Aliquam condimentum - + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + - + ); } ``` @@ -106,8 +106,8 @@ function App() { ### JS (with media - image) ```javascript -import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media'; -import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy'; +import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media'; +import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; @@ -115,16 +115,16 @@ import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image function App() { return ( - + Aliquam condimentum - + Lorem Ipsum - + - + ); } ``` @@ -147,21 +147,21 @@ function App() { ### JS (with media - video) ```javascript -import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media'; -import C4DContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video'; -import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy'; +import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media'; +import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video'; +import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; function App() { return ( - - + + Aliquam condimentum - + Lorem Ipsum - + - + ); } ``` @@ -184,9 +184,9 @@ function App() { ### JS (with featured media - image) ```javascript -import C4DContentItemHorizontalMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-featured'; -import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy'; -import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow'; +import C4DContentItemRowMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-featured'; +import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy'; +import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; @@ -194,12 +194,12 @@ import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image function App() { return ( - - Lorem ipsum + + Lorem ipsum Aliquam condimentum - + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + Learn more @@ -209,7 +209,7 @@ function App() { - + ); } ``` @@ -217,22 +217,22 @@ function App() { ### JS (with featured media - video) ```javascript -import C4DContentItemHorizontalMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-featured'; -import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy'; -import C4DContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video'; -import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow'; +import C4DContentItemRowMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-featured'; +import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy'; +import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video'; +import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; function App() { return ( - - Lorem ipsum + + Lorem ipsum Aliquam condimentum - + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + Learn more @@ -241,8 +241,8 @@ function App() { Microservices and containers - - + + ); } ``` @@ -259,13 +259,13 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | ---------------------------------------------- | ----------------------------------------------------------- | ----------- | -| `` | `data-autoid="cds--content-item-horizontal"` | Component | -| `` | `data-autoid="cds--content-item-horizontal-copy"` | Component | -| `` | `data-autoid="cds--content-item-horizontal-eyebrow"` | Component | -| `` | `data-autoid="cds--content-item-horizontal-media"` | Component | -| `` | `data-autoid="cds--content-item-horizontal-media-copy"` | Component | -| `` | `data-autoid="cds--content-item-horizontal-media-video"` | Component | -| `` | `data-autoid="cds--content-item-horizontal-media-featured"` | Component | -| `` | `data-autoid="cds--content-item-horizontal-thumbnail-copy"` | Component | +| `` | `data-autoid="cds--content-item-row"` | Component | +| `` | `data-autoid="cds--content-item-row-copy"` | Component | +| `` | `data-autoid="cds--content-item-row-eyebrow"` | Component | +| `` | `data-autoid="cds--content-item-row-media"` | Component | +| `` | `data-autoid="cds--content-item-row-media-copy"` | Component | +| `` | `data-autoid="cds--content-item-row-media-video"` | Component | +| `` | `data-autoid="cds--content-item-row-media-featured"` | Component | +| `` | `data-autoid="cds--content-item-row-thumbnail-copy"` | Component | diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.react.tsx similarity index 68% rename from packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx rename to packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.react.tsx index adf6d36bd05..a24bf2efd7b 100644 --- a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx +++ b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.react.tsx @@ -12,28 +12,28 @@ import { select } from '@storybook/addon-knobs'; // 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 C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal'; +import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row'; /* eslint-disable max-len */ // @ts-ignore -import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy'; +import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy'; /* eslint-disable max-len */ // @ts-ignore -import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow'; +import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow'; /* eslint-disable max-len */ // @ts-ignore -import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media'; +import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media'; /* eslint-disable max-len */ // @ts-ignore -import C4DContentItemHorizontalMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-featured'; +import C4DContentItemRowMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-featured'; /* eslint-disable max-len */ // @ts-ignore -import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy'; +import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy'; /* eslint-disable max-len */ // @ts-ignore -import C4DContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video'; +import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video'; /* eslint-disable max-len */ // @ts-ignore -import C4DContentItemHorizontalThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-thumbnail-copy'; +import C4DContentItemRowThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-thumbnail-copy'; // @ts-ignore import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; // @ts-ignore @@ -76,15 +76,15 @@ id est laborum.`; export const Default = (args) => { const { eyebrow, heading, copy, withMedia } = - args?.ContentItemHorizontal ?? {}; + args?.ContentItemRow ?? {}; return ( - - + + {eyebrow} - + {heading} - {copy} + {copy} Learn more @@ -97,19 +97,19 @@ export const Default = (args) => { '' )} {withMedia === MEDIA_TYPE.VIDEO ? ( - + ) : ( '' )} - + ); }; Default.story = { parameters: { - gridContentClasses: 'cds--col-lg-12 cds--no-gutter', + gridContentClasses: 'cds--col-lg-12', knobs: { - ContentItemHorizontal: () => ({ + ContentItemRow: () => ({ eyebrow: textNullable('Eyebrow (eyebrow):', 'Lorem ipsum'), heading: textNullable('Heading (heading):', 'Aliquam condimentum'), withMedia: select('Media type', { ...mediaType, None: null }, null), @@ -120,13 +120,13 @@ Default.story = { }; export const withThumbnail = (args) => { - const { alt, heading, copy } = args?.ContentItemHorizontal ?? {}; + const { alt, heading, copy } = args?.ContentItemRow ?? {}; return ( - + {heading} - + {copy} - + Learn more @@ -134,16 +134,16 @@ export const withThumbnail = (args) => { slot="thumbnail" alt={alt || undefined} default-src={imgMd4x3}> - + ); }; withThumbnail.story = { name: 'With thumbnail', parameters: { - gridContentClasses: 'cds--col-lg-12 cds--no-gutter', + gridContentClasses: 'cds--col-lg-12', knobs: { - ContentItemHorizontal: () => ({ + ContentItemRow: () => ({ heading: textNullable('Heading (heading):', 'Aliquam condimentum'), copy: shortBodyCopy, alt: textNullable('Image alt text', 'Image alt text'), @@ -154,9 +154,9 @@ withThumbnail.story = { export const withMedia = (args) => { const { align, type, alt, heading, eyebrow, copy } = - args?.ContentItemHorizontal ?? {}; + args?.ContentItemRow ?? {}; return ( - + {type === MEDIA_TYPE.IMAGE ? ( { '' )} {type === MEDIA_TYPE.VIDEO ? ( - + ) : ( '' )} - + {eyebrow} - + {heading} - + {copy} - + Learn more - + ); }; withMedia.story = { name: 'With media', parameters: { - gridContentClasses: 'cds--col-lg-12 cds--no-gutter', + gridContentClasses: 'cds--col-lg-12', knobs: { - ContentItemHorizontal: () => ({ + ContentItemRow: () => ({ align: select('Alignment', mediaAlign, MEDIA_ALIGN.RIGHT), type: select('Media type', mediaType, MEDIA_TYPE.IMAGE), alt: textNullable('Image alt text', 'Image alt text'), @@ -202,9 +202,9 @@ withMedia.story = { }; export const withFeaturedMedia = (args) => { - const { type, heading, eyebrow, copy } = args?.ContentItemHorizontal ?? {}; + const { type, heading, eyebrow, copy } = args?.ContentItemRow ?? {}; return ( - + {type === MEDIA_TYPE.IMAGE ? ( { '' )} {type === MEDIA_TYPE.VIDEO ? ( - + ) : ( '' )} - + {eyebrow} - + {heading} - + {copy} - + Learn more - + ); }; @@ -238,7 +238,7 @@ withFeaturedMedia.story = { parameters: { gridContentClasses: 'cds--col-lg-12', knobs: { - ContentItemHorizontal: () => ({ + ContentItemRow: () => ({ type: select('Media type', mediaType, MEDIA_TYPE.IMAGE), eyebrow: textNullable('Eyebrow:', 'Lorem Ipsum'), heading: textNullable('Heading:', 'Aliquam condimentum'), @@ -249,7 +249,7 @@ withFeaturedMedia.story = { }; export default { - title: 'Components/Content item horizontal', + title: 'Components/Content item row', decorators: [ (story, { parameters }) => { return ( diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.ts b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.ts similarity index 74% rename from packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.ts rename to packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.ts index cb29f01d538..46c5aa88341 100644 --- a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.ts +++ b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.ts @@ -13,7 +13,7 @@ import { select } from '@storybook/addon-knobs'; import readme from './README.stories.mdx'; import textNullable from '../../../../.storybook/knob-text-nullable'; import '../index'; -import '../content-item-horizontal-media-video'; +import '../content-item-row-media-video'; import '../../image/image'; import { MEDIA_ALIGN, MEDIA_TYPE } from '../defs'; import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--001.jpg'; @@ -47,17 +47,12 @@ dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, id est laborum.`; export const Default = (args) => { - const { eyebrow, heading, copy, withMedia } = - args?.ContentItemHorizontal ?? {}; + const { eyebrow, heading, copy, withMedia } = args?.ContentItemRow ?? {}; return html` - - ${eyebrow} + + ${eyebrow} ${heading} - ${copy} + ${copy} Learn more @@ -72,21 +67,21 @@ export const Default = (args) => { : null} ${withMedia === MEDIA_TYPE.VIDEO ? html` - + ` : null} - + `; }; export const WithThumbnail = (args) => { - const { alt, heading, copy } = args?.ContentItemHorizontal ?? {}; + const { alt, heading, copy } = args?.ContentItemRow ?? {}; return html` - + ${heading} - ${copy}${copy} Learn more { slot="thumbnail" alt="${ifDefined(alt)}" default-src="${imgMd4x3}"> - + `; }; export const WithMedia = (args) => { const { align, type, alt, heading, eyebrow, copy } = - args?.ContentItemHorizontal ?? {}; + args?.ContentItemRow ?? {}; return html` - + ${type === MEDIA_TYPE.IMAGE ? html` { : null} ${type === MEDIA_TYPE.VIDEO ? html` - + ` : null} - ${eyebrow} + ${eyebrow} ${heading} - ${copy} + ${copy} Learn more - + `; }; export const WithMediaFeatured = (args) => { - const { type, heading, eyebrow, copy } = args?.ContentItemHorizontal ?? {}; + const { type, heading, eyebrow, copy } = args?.ContentItemRow ?? {}; return html` - + ${type === MEDIA_TYPE.IMAGE ? html` { : null} ${type === MEDIA_TYPE.VIDEO ? html` - + ` : null} - ${eyebrow} + ${eyebrow} ${heading} - ${copy} + ${copy} Learn more - + `; }; Default.story = { parameters: { - gridContentClasses: 'cds--col-lg-12 cds--no-gutter', + gridContentClasses: 'cds--col-lg-12', }, }; WithThumbnail.story = { name: 'With thumbnail', parameters: { - gridContentClasses: 'cds--col-lg-12 cds--no-gutter', + gridContentClasses: 'cds--col-lg-12', knobs: { - ContentItemHorizontal: () => ({ + ContentItemRow: () => ({ heading: textNullable('Heading (heading):', 'Aliquam condimentum'), copy: shortBodyCopy, }), }, propsSet: { default: { - ContentItemHorizontal: { + ContentItemRow: { heading: 'Aliquam condimentum', copy: shortBodyCopy, }, @@ -196,9 +183,9 @@ WithThumbnail.story = { WithMedia.story = { name: 'With media', parameters: { - gridContentClasses: 'cds--col-lg-12 cds--no-gutter', + gridContentClasses: 'cds--col-lg-12', knobs: { - ContentItemHorizontal: () => ({ + ContentItemRow: () => ({ align: select('Alignment', mediaAlign, MEDIA_ALIGN.RIGHT), type: select('Media type', mediaType, MEDIA_TYPE.IMAGE), heading: textNullable('Heading (heading):', 'Aliquam condimentum'), @@ -208,7 +195,7 @@ WithMedia.story = { }, propsSet: { default: { - ContentItemHorizontal: { + ContentItemRow: { align: 'right', type: 'image', alt: 'Image alt text', @@ -226,7 +213,7 @@ WithMediaFeatured.story = { parameters: { gridContentClasses: 'cds--col-lg-12', knobs: { - ContentItemHorizontal: () => ({ + ContentItemRow: () => ({ type: select('Media type', mediaType, MEDIA_TYPE.IMAGE), eyebrow: textNullable('Eyebrow:', 'Lorem Ipsum'), heading: textNullable('Heading:', 'Aliquam condimentum'), @@ -235,7 +222,7 @@ WithMediaFeatured.story = { }, propsSet: { default: { - ContentItemHorizontal: { + ContentItemRow: { type: 'image', alt: 'Image alt text', heading: 'Aliquam condimentum', @@ -248,7 +235,7 @@ WithMediaFeatured.story = { }; export default { - title: 'Components/Content item horizontal', + title: 'Components/Content item row', decorators: [ (story, { parameters }) => html`
@@ -262,7 +249,7 @@ export default { ...readme.parameters, hasStoryPadding: true, knobs: { - ContentItemHorizontal: () => ({ + ContentItemRow: () => ({ eyebrow: textNullable('Eyebrow (eyebrow):', 'Lorem ipsum'), heading: textNullable('Heading (heading):', 'Aliquam condimentum'), withMedia: select('Media type', { ...mediaType, None: null }, null), @@ -271,7 +258,7 @@ export default { }, propsSet: { default: { - ContentItemHorizontal: { + ContentItemRow: { eyebrow: 'Lorem ipsum', heading: 'Aliquam condimentum', copy: bodyCopy, diff --git a/packages/web-components/src/components/content-item-horizontal/__tests__/content-item-horizontal.test.ts b/packages/web-components/src/components/content-item-row/__tests__/content-item-horizontal.test.ts similarity index 73% rename from packages/web-components/src/components/content-item-horizontal/__tests__/content-item-horizontal.test.ts rename to packages/web-components/src/components/content-item-row/__tests__/content-item-horizontal.test.ts index 2141601fc31..b291793cf7b 100644 --- a/packages/web-components/src/components/content-item-horizontal/__tests__/content-item-horizontal.test.ts +++ b/packages/web-components/src/components/content-item-row/__tests__/content-item-horizontal.test.ts @@ -11,54 +11,48 @@ import { html, render } from 'lit/html.js'; import '../../content-item/content-item-heading'; import '../../link-list/link-list'; import '../../cta/link-list-item-cta'; -import '../content-item-horizontal'; -import '../content-item-horizontal-copy'; -import '../content-item-horizontal-eyebrow'; -import '../content-item-horizontal-thumbnail-copy'; +import '../content-item-row'; +import '../content-item-row-copy'; +import '../content-item-row-eyebrow'; +import '../content-item-row-thumbnail-copy'; import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon'; import { CTA_TYPE } from '../../cta/defs'; const DefaultTemplate = (props?) => { const { children } = props ?? {}; - return html` - ${children} - `; + return html` ${children} `; }; const WithMediaTemplate = (props?) => { const { children } = props ?? {}; return html` - - ${children} - + ${children} `; }; const WithFeaturedMediaTemplate = (props?) => { const { children } = props ?? {}; return html` - + ${children} - + `; }; const WithThumbnailTemplate = (props?) => { const { children } = props ?? {}; return html` - - ${children} - + ${children} `; }; -describe('c4d-content-item-horizontal', function () { +describe('c4d-content-item-row', function () { describe('Misc attributes - Default', function () { it('should render with minimum attributes', async function () { render(DefaultTemplate(), document.body); await Promise.resolve(); expect( - document.body.querySelector('c4d-content-item-horizontal') + document.body.querySelector('c4d-content-item-row') ).toMatchSnapshot({ mode: 'shadow' }); }); @@ -67,13 +61,11 @@ describe('c4d-content-item-horizontal', function () { DefaultTemplate({ copy: 'copy-foo', children: html` - eyebrow-fooeyebrow-foo heading-foo - copy-foo + copy-foo heading-foo - copy-foocopy-foo eyebrow-fooeyebrow-foo heading-foo - copy-foocopy-foo heading-foo - copy-foocopy-foo `; } static get stableSelector() { - return `${c4dPrefix}--content-item-horizontal-thumbnail-copy`; + return `${c4dPrefix}--content-item-row-copy`; } static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DContentItemHorizontalThumbnailCopy; +export default C4DContentItemRowCopy; diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-eyebrow.ts b/packages/web-components/src/components/content-item-row/content-item-row-eyebrow.ts similarity index 71% rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-eyebrow.ts rename to packages/web-components/src/components/content-item-row/content-item-row-eyebrow.ts index 937d912825a..28afc47219d 100644 --- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-eyebrow.ts +++ b/packages/web-components/src/components/content-item-row/content-item-row-eyebrow.ts @@ -9,19 +9,19 @@ import { LitElement, html } from 'lit'; import { property } from 'lit/decorators.js'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; -import styles from './content-item-horizontal.scss'; +import styles from './content-item-row.scss'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; const { stablePrefix: c4dPrefix } = settings; /** - * The eyebrow content of content item horizontal. + * The eyebrow content of content item row. * - * @element c4d-content-item-horizontal-eyebrow + * @element c4d-content-item-row-eyebrow */ -@customElement(`${c4dPrefix}-content-item-horizontal-eyebrow`) -class C4DContentItemHorizontalEyebrow extends StableSelectorMixin(LitElement) { +@customElement(`${c4dPrefix}-content-item-row-eyebrow`) +class C4DContentItemRowEyebrow extends StableSelectorMixin(LitElement) { /** * The shadow slot this eyebrow content should be in. */ @@ -33,7 +33,7 @@ class C4DContentItemHorizontalEyebrow extends StableSelectorMixin(LitElement) { } static get stableSelector() { - return `${c4dPrefix}--content-item-horizontal-eyebrow`; + return `${c4dPrefix}--content-item-row-eyebrow`; } // `styles` here is a `CSSResult` generated by custom WebPack loader @@ -41,4 +41,4 @@ class C4DContentItemHorizontalEyebrow extends StableSelectorMixin(LitElement) { } /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DContentItemHorizontalEyebrow; +export default C4DContentItemRowEyebrow; diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-copy.ts b/packages/web-components/src/components/content-item-row/content-item-row-media-copy.ts similarity index 70% rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-copy.ts rename to packages/web-components/src/components/content-item-row/content-item-row-media-copy.ts index 7ed0b63294e..3b334dbeff7 100644 --- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-copy.ts +++ b/packages/web-components/src/components/content-item-row/content-item-row-media-copy.ts @@ -11,18 +11,18 @@ import { html } from 'lit'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import C4DContentItemCopy from '../content-item/content-item-copy'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; -import styles from './content-item-horizontal.scss'; +import styles from './content-item-row-media.scss'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; const { stablePrefix: c4dPrefix } = settings; /** - * The copy content of content item horizontal. + * The copy content of content item row with media. * - * @element c4d-content-item-horizontal-copy + * @element c4d-content-item-row-media-copy */ -@customElement(`${c4dPrefix}-content-item-horizontal-copy`) -class C4DContentItemHorizontalCopy extends StableSelectorMixin( +@customElement(`${c4dPrefix}-content-item-row-media-copy`) +class C4DContentItemRowMediaCopy extends StableSelectorMixin( C4DContentItemCopy ) { render() { @@ -30,11 +30,11 @@ class C4DContentItemHorizontalCopy extends StableSelectorMixin( } static get stableSelector() { - return `${c4dPrefix}--content-item-horizontal-copy`; + return `${c4dPrefix}--content-item-row-media-copy`; } static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DContentItemHorizontalCopy; +export default C4DContentItemRowMediaCopy; diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-featured.ts b/packages/web-components/src/components/content-item-row/content-item-row-media-featured.ts similarity index 60% rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-featured.ts rename to packages/web-components/src/components/content-item-row/content-item-row-media-featured.ts index 36fbe3fbe7a..ed343121bd1 100644 --- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-featured.ts +++ b/packages/web-components/src/components/content-item-row/content-item-row-media-featured.ts @@ -10,42 +10,42 @@ import { html } from 'lit'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import C4DContentItem from '../content-item/content-item'; -import styles from './content-item-horizontal-media.scss'; +import styles from './content-item-row-media.scss'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; const { prefix, stablePrefix: c4dPrefix } = settings; /** - * A component to present content in a horizontal orientation with featured + * A component to present content in a row orientation with featured * media beneath. * - * @element c4d-content-item-horizontal-media-featured + * @element c4d-content-item-row-media-featured */ -@customElement(`${c4dPrefix}-content-item-horizontal-media-featured`) -class C4DContentItemHorizontalMediaFeatured extends C4DContentItem { +@customElement(`${c4dPrefix}-content-item-row-media-featured`) +class C4DContentItemRowMediaFeatured extends C4DContentItem { render() { return html` -
-
+
+
-
+
${this._renderBody()} ${this._renderFooter()}
-
+
`; } static get stableSelector() { - return `${c4dPrefix}-content-item-horizontal-media-featured`; + return `${c4dPrefix}-content-item-row-media-featured`; } static styles = styles; } /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DContentItemHorizontalMediaFeatured; +export default C4DContentItemRowMediaFeatured; diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-video.ts b/packages/web-components/src/components/content-item-row/content-item-row-media-video.ts similarity index 69% rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-video.ts rename to packages/web-components/src/components/content-item-row/content-item-row-media-video.ts index 126255080ad..a150f1a9a01 100644 --- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-video.ts +++ b/packages/web-components/src/components/content-item-row/content-item-row-media-video.ts @@ -12,17 +12,17 @@ import { property } from 'lit/decorators.js'; 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 C4DVideoPlayerContainer from '../video-player/video-player-container'; -import styles from './content-item-horizontal-media.scss'; +import styles from './content-item-row-media.scss'; const { stablePrefix: c4dPrefix } = settings; /** - * The video content in horizontal content item with media. + * The video content in row content item with media. * - * @element c4d-content-item-horizontal-media-video + * @element c4d-content-item-row-media-video */ -@customElement(`${c4dPrefix}-content-item-horizontal-media-video`) -class C4DContentItemHorizontalMediaVideo extends C4DVideoPlayerContainer { +@customElement(`${c4dPrefix}-content-item-row-media-video`) +class C4DContentItemRowMediaVideo extends C4DVideoPlayerContainer { /** * The shadow slot this video should be in. */ @@ -34,11 +34,11 @@ class C4DContentItemHorizontalMediaVideo extends C4DVideoPlayerContainer { } static get stableSelector() { - return `${c4dPrefix}--content-item-horizontal-media-video`; + return `${c4dPrefix}--content-item-row-media-video`; } static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DContentItemHorizontalMediaVideo; +export default C4DContentItemRowMediaVideo; diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.scss b/packages/web-components/src/components/content-item-row/content-item-row-media.scss similarity index 69% rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.scss rename to packages/web-components/src/components/content-item-row/content-item-row-media.scss index ba32bc3fd24..cbf48f7c148 100644 --- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.scss +++ b/packages/web-components/src/components/content-item-row/content-item-row-media.scss @@ -5,4 +5,4 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/ibmdotcom-styles/scss/components/content-item-horizontal-media'; +@use '@carbon/ibmdotcom-styles/scss/components/content-item-row-media'; diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts b/packages/web-components/src/components/content-item-row/content-item-row-media.ts similarity index 77% rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts rename to packages/web-components/src/components/content-item-row/content-item-row-media.ts index 3a7f2a38fc3..394987bb517 100644 --- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts +++ b/packages/web-components/src/components/content-item-row/content-item-row-media.ts @@ -12,9 +12,9 @@ import { property, state } from 'lit/decorators.js'; import { baseFontSize, breakpoints } from '@carbon/layout'; import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js'; import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js'; -import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; +import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js'; import C4DContentItem from '../content-item/content-item'; -import styles from './content-item-horizontal-media.scss'; +import styles from './content-item-row-media.scss'; import { MEDIA_ALIGN } from './defs'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; @@ -24,12 +24,12 @@ const { prefix, stablePrefix: c4dPrefix } = settings; const breakpoint = parseFloat(breakpoints.lg.width) * baseFontSize; /** - * A component to present content in a horizontal orientation with media. + * A component to present content in a row orientation with media. * - * @element c4d-content-item-horizontal-media + * @element c4d-content-item-row-media */ -@customElement(`${c4dPrefix}-content-item-horizontal-media`) -class C4DContentItemHorizontalMedia extends HostListenerMixin(C4DContentItem) { +@customElement(`${c4dPrefix}-content-item-row-media`) +class C4DContentItemRowMedia extends HostListenerMixin(C4DContentItem) { /** * Defines the alignment of the media: `left` or `right` */ @@ -53,7 +53,7 @@ class C4DContentItemHorizontalMedia extends HostListenerMixin(C4DContentItem) { */ protected _renderTextCol(): TemplateResult | string | void { return html` -
+
${this._renderBody()} ${this._renderFooter()} @@ -70,12 +70,12 @@ class C4DContentItemHorizontalMedia extends HostListenerMixin(C4DContentItem) { return alignedRight ? html` ${this._renderTextCol()} -
+
` : html` -
+
${this._renderTextCol()} @@ -85,7 +85,7 @@ class C4DContentItemHorizontalMedia extends HostListenerMixin(C4DContentItem) { render() { return html`
${this._renderContent()}
@@ -93,11 +93,11 @@ class C4DContentItemHorizontalMedia extends HostListenerMixin(C4DContentItem) { } static get stableSelector() { - return `${c4dPrefix}--content-item-horizontal-media`; + return `${c4dPrefix}--content-item-row-media`; } static styles = styles; } /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DContentItemHorizontalMedia; +export default C4DContentItemRowMedia; diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-copy.ts b/packages/web-components/src/components/content-item-row/content-item-row-thumbnail-copy.ts similarity index 68% rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-copy.ts rename to packages/web-components/src/components/content-item-row/content-item-row-thumbnail-copy.ts index 4944c272b8f..7b3570f61b5 100644 --- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-copy.ts +++ b/packages/web-components/src/components/content-item-row/content-item-row-thumbnail-copy.ts @@ -11,18 +11,18 @@ import { html } from 'lit'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import C4DContentItemCopy from '../content-item/content-item-copy'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; -import styles from './content-item-horizontal-media.scss'; +import styles from './content-item-row.scss'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; const { stablePrefix: c4dPrefix } = settings; /** - * The copy content of content item horizontal with media. + * The copy content of content item row with thumbnail. * - * @element c4d-content-item-horizontal-media-copy + * @element c4d-content-item-row-thumbnail-copy */ -@customElement(`${c4dPrefix}-content-item-horizontal-media-copy`) -class C4DContentItemHorizontalMediaCopy extends StableSelectorMixin( +@customElement(`${c4dPrefix}-content-item-row-thumbnail-copy`) +class C4DContentItemRowThumbnailCopy extends StableSelectorMixin( C4DContentItemCopy ) { render() { @@ -30,11 +30,11 @@ class C4DContentItemHorizontalMediaCopy extends StableSelectorMixin( } static get stableSelector() { - return `${c4dPrefix}--content-item-horizontal-media-copy`; + return `${c4dPrefix}--content-item-row-thumbnail-copy`; } static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DContentItemHorizontalMediaCopy; +export default C4DContentItemRowThumbnailCopy; diff --git a/packages/web-components/src/components/content-item-row/content-item-row.scss b/packages/web-components/src/components/content-item-row/content-item-row.scss new file mode 100644 index 00000000000..0d8aa302f01 --- /dev/null +++ b/packages/web-components/src/components/content-item-row/content-item-row.scss @@ -0,0 +1,8 @@ +// +// 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. +// + +@use '@carbon/ibmdotcom-styles/scss/components/content-item-row'; diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.ts b/packages/web-components/src/components/content-item-row/content-item-row.ts similarity index 68% rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal.ts rename to packages/web-components/src/components/content-item-row/content-item-row.ts index 25b6080a0e0..183bc2407ed 100644 --- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.ts +++ b/packages/web-components/src/components/content-item-row/content-item-row.ts @@ -11,18 +11,18 @@ import { TemplateResult, html } from 'lit'; import { property } from 'lit/decorators.js'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import C4DContentItem from '../content-item/content-item'; -import styles from './content-item-horizontal.scss'; +import styles from './content-item-row.scss'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; const { prefix, stablePrefix: c4dPrefix } = settings; /** - * A component to present a content in a horizontal orientation. + * A component to present a content in a row orientation. * - * @element c4d-content-item-horizontal + * @element c4d-content-item-row */ -@customElement(`${c4dPrefix}-content-item-horizontal`) -class C4DContentItemHorizontal extends C4DContentItem { +@customElement(`${c4dPrefix}-content-item-row`) +class C4DContentItemRow extends C4DContentItem { /** * Determines whether to render the thumbnail variant */ @@ -41,26 +41,26 @@ class C4DContentItemHorizontal extends C4DContentItem { return html` ${!this.thumbnail ? html` -
+
-
+
${this._renderBody()}${this._renderFooter()}${this._renderMedia()}
` : html` -
-
+
+
-
+
${this._renderBody()}${this._renderFooter()}
-
+
@@ -69,11 +69,11 @@ class C4DContentItemHorizontal extends C4DContentItem { } static get stableSelector() { - return `${c4dPrefix}--content-item-horizontal`; + return `${c4dPrefix}--content-item-row`; } static styles = styles; } /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DContentItemHorizontal; +export default C4DContentItemRow; diff --git a/packages/web-components/src/components/content-item-horizontal/defs.ts b/packages/web-components/src/components/content-item-row/defs.ts similarity index 69% rename from packages/web-components/src/components/content-item-horizontal/defs.ts rename to packages/web-components/src/components/content-item-row/defs.ts index 08ef39566c5..3aee6c7ec1d 100644 --- a/packages/web-components/src/components/content-item-horizontal/defs.ts +++ b/packages/web-components/src/components/content-item-row/defs.ts @@ -12,12 +12,12 @@ */ export enum MEDIA_ALIGN { /** - * Content item horizontal media align left + * Content item row media align left */ LEFT = 'left', /** - * Content item horizontal media align right + * Content item row media align right */ RIGHT = 'right', } @@ -27,12 +27,12 @@ export enum MEDIA_ALIGN { */ export enum MEDIA_TYPE { /** - * Content item horizontal media type image + * Content item row media type image */ IMAGE = 'image', /** - * Content item horizontal media type video + * Content item row media type video */ VIDEO = 'video', } diff --git a/packages/web-components/src/components/content-item-row/index.ts b/packages/web-components/src/components/content-item-row/index.ts new file mode 100644 index 00000000000..9b88e3270fd --- /dev/null +++ b/packages/web-components/src/components/content-item-row/index.ts @@ -0,0 +1,20 @@ +/** + * @license + * + * Copyright IBM Corp. 2020, 2022 + * + * 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 './content-item-row'; +import './content-item-row-copy'; +import './content-item-row-eyebrow'; +import './content-item-row-media'; +import './content-item-row-media-copy'; +import './content-item-row-media-video'; +import './content-item-row-thumbnail-copy'; +import './content-item-row-media-featured'; +import '../content-item/content-item-heading'; +import '../cta/index'; +import '../link-list/link-list'; diff --git a/packages/web-components/src/components/content-item/content-item.scss b/packages/web-components/src/components/content-item/content-item.scss index cd69b46bc7f..5400c0570c2 100644 --- a/packages/web-components/src/components/content-item/content-item.scss +++ b/packages/web-components/src/components/content-item/content-item.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2020, 2022 +// 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. diff --git a/packages/web-components/src/components/content-section/__stories__/README.stories.mdx b/packages/web-components/src/components/content-section/__stories__/README.stories.mdx index 6243145a75f..d50104d36a2 100644 --- a/packages/web-components/src/components/content-section/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-section/__stories__/README.stories.mdx @@ -276,6 +276,196 @@ component to render correctly within the grid. ``` +As part of the ongoing upgrade to Carbon for IBM.com v2, we have consolidated some of the other `Content section` variants under a single one. +Some of the components that are compatible with the `Content section` component are: `Card group`, `Carousel`, `Link list`. + +### Card group + +```html + + + Heading + Copy + CTA text + + + Nunc convallis lobortis +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. + Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. +

+ + + + + +``` + +### Carousel + +```html + + + Heading + Copy + CTA text + Lorem ipsum dolor sit amet + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. + + + + Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. + + + + + + Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. + + + + + + Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. + + + + + + Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. + + + + + + Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. + + + + + + Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. + + + + + + +``` + +### Link list + +```html + + Heading + Copy + CTA text + Lorem ipsum dolor sit amet + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. + + + + Learn more about Kubernetes and automating deployment ${ArrowRight20({ slot: 'icon' })} + + + Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })} + + + Microservices and containers ${ArrowRight20({ slot: 'icon' })} + + + Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })} + + + Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })} + + + Microservices and containers ${ArrowRight20({ slot: 'icon' })} + + + +``` + ## Props diff --git a/packages/web-components/src/components/cta/__stories__/cta.stories.react.tsx b/packages/web-components/src/components/cta/__stories__/cta.stories.react.tsx index e321c8e970b..0a69787d36b 100644 --- a/packages/web-components/src/components/cta/__stories__/cta.stories.react.tsx +++ b/packages/web-components/src/components/cta/__stories__/cta.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/web-components/src/components/cta/__stories__/ctaTypeConfig.js b/packages/web-components/src/components/cta/__stories__/ctaTypeConfig.js index 975fa3cc1ff..9ced19197f5 100644 --- a/packages/web-components/src/components/cta/__stories__/ctaTypeConfig.js +++ b/packages/web-components/src/components/cta/__stories__/ctaTypeConfig.js @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/web-components/src/components/cta/defs.ts b/packages/web-components/src/components/cta/defs.ts index 2c83c678e81..622d228db27 100644 --- a/packages/web-components/src/components/cta/defs.ts +++ b/packages/web-components/src/components/cta/defs.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx index 3d461d292f2..113a730dfb3 100644 --- a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx +++ b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx @@ -1,6 +1,6 @@ /* eslint-disable max-len */ /** - * Copyright IBM Corp. 2016, 2022 + * Copyright IBM Corp. 2016, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -15,10 +15,10 @@ import C4DContentBlockSegmentedItem from '@carbon/ibmdotcom-web-components/es/co import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading'; import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy'; import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta'; -import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal'; -import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow'; +import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row'; +import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow'; import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading'; -import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy'; +import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy'; import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list'; import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta'; import C4DGlobalBanner from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner'; @@ -35,10 +35,7 @@ import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components- import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group'; import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item'; import C4DLeadspaceWithSearch from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search'; -import C4DLeadspaceWithSearchHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-heading'; -import C4DLeadspaceWithSearchContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content'; -import C4DLeadspaceWithSearchContentHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-heading'; -import C4DLeadspaceWithSearchContentCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-copy'; +import C4DLeadspaceWithSearchCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-copy'; import C4DSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead'; import C4DLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block'; import C4DLeadspaceBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-heading'; @@ -146,16 +143,16 @@ export const contentBlockSegmentedItemsWithImage = ( ); export const contentItemHorizontal = ( - - + + Lorem ipsum - + Aliquam condimentum - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. - + - + ); export const globalBanner = (srcImage) => ( @@ -228,19 +225,14 @@ export const contentLeadspace = ( export const contentLeadspaceSearch = ( - - Find a product - - - - Innovate like a startup, scale for the enterprise - - - Automate your software release process with continuous delivery (CD)—the - most critical part of adopting DevOps. Build, test, and deploy code - changes quickly, ensuring software is always ready for deployment. - - + + Find a product - Innovate like a startup, scale for the enterprise + + + Automate your software release process with continuous delivery (CD)—the + most critical part of adopting DevOps. Build, test, and deploy code + changes quickly, ensuring software is always ready for deployment. + - Lorem ipsum + + Lorem ipsum Aliquam condimentum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit - sollicitudin. - + `; export const globalBanner = (srcImage) => html` @@ -188,20 +186,15 @@ export const contentLeadspaceSearch = html` adjacent-theme="white-and-g10" sticky-search scroll-behavior> - Find a productFind a product - Innovate like a startup, scale for the + enterprise - - Innovate like a startup, scale for the - enterprise - - Automate your software release process with continuous delivery (CD)—the - most critical part of adopting DevOps. Build, test, and deploy code - changes quickly, ensuring software is always ready for deployment. - - + + Automate your software release process with continuous delivery (CD)—the + most critical part of adopting DevOps. Build, test, and deploy code + changes quickly, ensuring software is always ready for deployment. + { .legalLinks="${ifDefined(legalLinks)}" .localeList="${ifDefined(localeList)}" .footerLinks="${ifDefined(footerLinks)}" - .navLinks="${navLinks}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" ?disable-locale-button="${disableLocaleButton}"> @@ -216,7 +218,6 @@ export const DefaultFooterLanguageOnly = (args) => { .legalLinks="${ifDefined(legalLinks)}" .localeList="${ifDefined(localeList)}" .footerLinks="${ifDefined(footerLinks)}" - .navLinks="${navLinks}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" ?disable-locale-button="${disableLocaleButton}"> @@ -311,7 +312,6 @@ export const searchOpenOnload = (args) => { .legalLinks="${ifDefined(legalLinks)}" .localeList="${ifDefined(localeList)}" .footerLinks="${ifDefined(footerLinks)}" - .navLinks="${navLinks}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" ?disable-locale-button="${disableLocaleButton}"> @@ -381,7 +381,6 @@ export const withPlatform = (args) => { .legalLinks="${ifDefined(legalLinks)}" .localeList="${ifDefined(localeList)}" .footerLinks="${ifDefined(footerLinks)}" - .navLinks="${navLinks}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" ?disable-locale-button="${disableLocaleButton}"> @@ -486,7 +485,6 @@ export const withShortFooter = (args) => { .legalLinks="${ifDefined(legalLinks)}" .localeList="${ifDefined(localeList)}" .footerLinks="${ifDefined(footerLinks)}" - .navLinks="${navLinks}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" ?disable-locale-button="${disableLocaleButton}"> @@ -569,7 +567,6 @@ export const withShortFooterLanguageOnly = (args) => { .legalLinks="${ifDefined(legalLinks)}" .localeList="${ifDefined(localeList)}" .footerLinks="${ifDefined(footerLinks)}" - .navLinks="${navLinks}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" ?disable-locale-button="${disableLocaleButton}"> @@ -660,7 +657,6 @@ export const withMicroFooter = (args) => { .legalLinks="${ifDefined(legalLinks)}" .localeList="${ifDefined(localeList)}" .footerLinks="${ifDefined(footerLinks)}" - .navLinks="${navLinks}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" ?disable-locale-button="${disableLocaleButton}"> @@ -740,7 +736,6 @@ export const withMicroFooterLanguageOnly = (args) => { .legalLinks="${ifDefined(legalLinks)}" .localeList="${ifDefined(localeList)}" .footerLinks="${ifDefined(footerLinks)}" - .navLinks="${navLinks}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" ?disable-locale-button="${disableLocaleButton}"> @@ -832,7 +827,6 @@ export const withL1 = (args) => { .localeList="${ifDefined(localeList)}" .footerLinks="${ifDefined(footerLinks)}" .l1Data="${l1Data}" - .navLinks="${navLinks}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" ?disable-locale-button="${disableLocaleButton}"> @@ -946,7 +940,6 @@ export const WithHorizontalTOC = (args) => { .legalLinks="${ifDefined(legalLinks)}" .localeList="${ifDefined(localeList)}" .footerLinks="${ifDefined(footerLinks)}" - .navLinks="${navLinks}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" ?disable-locale-button="${disableLocaleButton}"> @@ -1023,7 +1016,6 @@ export const WithLeadspaceSearch = (args) => { .legalLinks="${ifDefined(legalLinks)}" .localeList="${ifDefined(localeList)}" .footerLinks="${ifDefined(footerLinks)}" - .navLinks="${navLinks}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" ?disable-locale-button="${disableLocaleButton}"> @@ -1133,7 +1125,6 @@ export const WithGlobalBanner = (args) => { .legalLinks="${ifDefined(legalLinks)}" .localeList="${ifDefined(localeList)}" .footerLinks="${ifDefined(footerLinks)}" - .navLinks="${navLinks}" ?has-profile="${hasProfile}" ?has-search="${hasSearch}" ?disable-locale-button="${disableLocaleButton}"> @@ -1284,7 +1275,25 @@ export default { } }); } - return story(); + return html` + ${story()} + + + `; }, ], parameters: { @@ -1330,7 +1339,7 @@ export default { inPercy() || new URLSearchParams(window.location.search).has('mock'); return { DotcomShell: { - navLinks: !useMock ? undefined : mastheadLinks, + navLinks: !useMock ? undefined : l0Data, langDisplay: !useMock ? undefined : 'United States - English', legalLinks: !useMock ? undefined : mockLegalLinks, links: !useMock ? undefined : mockFooterLinks, diff --git a/packages/web-components/src/components/dotcom-shell/dotcom-shell-composite.ts b/packages/web-components/src/components/dotcom-shell/dotcom-shell-composite.ts index 4204233ee3c..398abaeee87 100644 --- a/packages/web-components/src/components/dotcom-shell/dotcom-shell-composite.ts +++ b/packages/web-components/src/components/dotcom-shell/dotcom-shell-composite.ts @@ -17,7 +17,7 @@ import { BasicLink, BasicLinkSet, MastheadL1, - MastheadLink, + L0MenuItem, MastheadProfileItem, Translation, } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/translateAPI.d'; @@ -327,7 +327,7 @@ class C4DDotcomShellComposite extends LitElement { * but if you need an alternate way of integration (e.g. rendering Web Components tags in server-side) this property helps. */ @property({ attribute: false }) - navLinks?: MastheadLink[]; + navLinks?: L0MenuItem[]; /** * The parameters passed to the search-with-typeahead for search scope diff --git a/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts b/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts index 7d53f81efba..e46126b677f 100644 --- a/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts +++ b/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts @@ -182,6 +182,11 @@ class C4DFilterPanelInputSelect extends FocusMixin( ?.querySelector(`.${prefix}--input-container__heading`) ?.setAttribute('aria-expanded', String(Boolean(this.isOpen))); } + if (this._items.length) { + this.shadowRoot + ?.querySelector(`.${prefix}--input-container__heading`) + ?.setAttribute('aria-expanded', String(Boolean(this.isOpen))); + } } render() { diff --git a/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.mdx b/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.mdx index 4eaea64d23e..243594a370c 100644 --- a/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.mdx @@ -33,16 +33,13 @@ import '@carbon/ibmdotcom-web-components/es/components/leadspace-with-search/ind ```html - Find a product - - Innovate like a startup, scale for the enterprise - Find a product + Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build, test, and deploy code changes quickly, ensuring software is always ready for deployment. - - + @@ -52,22 +49,13 @@ import '@carbon/ibmdotcom-web-components/es/components/leadspace-with-search/ind ```html - - - Find a product - - Innovate like a startup, scale for the enterprise - Find a product + Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build, test, and deploy code changes quickly, ensuring software is always ready for deployment. - - + @@ -75,17 +63,21 @@ import '@carbon/ibmdotcom-web-components/es/components/leadspace-with-search/ind ## Adjacent Themes -This component has four adjacent theme combinations which can be used to display -different theming between the two parts of the component, the "top" and the -"bottom" of the component. In other words, this component can be "divided" into -two halves, the "top" contains the heading, subheading, and paragraph elements -to display information, whereas the "bottom" part contains the Search With -Typeahead component. +This component offers two options of adjacent themes, it can either be: -By applying these different themes, you may have the "top" part have the default -"White" theme, while the bottom has the "Gray 10" theme, for example. Feel free -to play around with the knobs to choose which option would work best for your -page. +* Monotheme +* Dual theme + +The "dual-theme" attribute can be used to display different theming between the two +parts of the component, the "top" and the "bottom" of the component. + +In other words, this component can be "divided" into two halves, the "top" contains +the heading and paragraph elements to display information, whereas the "bottom" part +contains the Search With Typeahead component. + +The coloring would change depending on the current set theme of either the page or the inline +theme of the container. The top half would be the current theme, while the bottom half would +be other theme of the current contrast. There are four adjacent theme combinations that are available in this component are the following: @@ -98,23 +90,14 @@ are the following: ### HTML Example ```html - - - - Find a product - - Innovate like a startup, scale for the enterprise - + Find a product + Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build, test, and deploy code changes quickly, ensuring software is always ready for deployment. - - + @@ -130,8 +113,8 @@ In other words, the horizontal rule should only be included as a slotted element if, for example, the page content has the `g100` theme _and_ the `Leadspace with search` **also** uses `g100`. -When using adjacent themes, the theme applied **must** be `g90-and-g100`, as the -latter theme must match the page content theme. +When using adjacent themes, the theme applied **must** be `g90`, as the +bottom theme must match the page content theme. Using the horizontal rule for other cases in which the themes are not matching is not advisable. @@ -142,23 +125,20 @@ When including the `Leadspace with search` component within the `Dotcom Shell` component, an optional scroll behavior option is available. If enabled, the search container will remain fixed on top of the page as the user scrolls. -To enable, add the `scroll-behavior` attribute to `Leadspace with search` +To enable, add the `scroll-behavior` and `sticky-search` attributes to `Leadspace with search` ### HTML Example ```html - - Find a product - - Innovate like a startup, scale for the enterprise - + Find a product + Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build, test, and deploy code changes quickly, ensuring software is always ready for deployment. - - + diff --git a/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.react.mdx b/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.react.mdx index 0a9a6e07c60..6f9ebb27c34 100644 --- a/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.react.mdx @@ -23,29 +23,23 @@ Here's a quick example to get you started. ```javascript import C4DLeadspaceWithSearch from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search.js'; -import C4DLeadspaceWithSearchHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-heading'; -import C4DLeadspaceWithSearchContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content'; -import C4DLeadspaceWithSearchContentHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-heading'; -import C4DLeadspaceWithSearchContentCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-copy'; +import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading'; +import C4DLeadspaceWithSearchCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-copy'; import C4DHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule'; import C4DSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead'; function App() { return ( - + Find a product - - - - Innovate like a startup, scale for the enterprise - - + + Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build, test, and deploy code changes quickly, ensuring software is always ready for deployment. - + { currentTheme = htmlElement.getAttribute( mutation.attributeName! ) as string; + + let dualTheme; + + for (const key in DUAL_THEMES) { + if (DUAL_THEMES[key].startsWith(currentTheme)) { + dualTheme = DUAL_THEMES[key]; + break; + } + } + const leadspace = document.querySelector('c4d-leadspace-with-search'); + leadspace?.setAttribute('dual-theme', dualTheme as string); } }); }); observer.observe(htmlElement, { attributes: true }); export const Default = (args) => { - const { theme } = args?.LeadspaceWithSearch ?? {}; - const secondTheme = theme.split('-')[2]; - return ( + const { theme, heading, highlight, subheading } = + args?.LeadspaceWithSearch ?? {}; + const secondTheme = document.querySelector('c4d-leadspace-with-search')?.getAttribute('dual-theme')!.split('-')[2]; + return ( - - Find a product - - - - Innovate like a startup, scale for the enterprise - - - Automate your software release process with continuous delivery - (CD)—the most critical part of adopting DevOps. Build, test, and - deploy code changes quickly, ensuring software is always ready for - deployment. - - - - - - ); -}; + + {heading} + -export const WithImage = (args) => { - const { theme } = args?.LeadspaceWithSearch ?? {}; - const secondTheme = theme.split('-')[2]; - return ( - - - - Find a product - - - - Innovate like a startup, scale for the enterprise - - - Automate your software release process with continuous delivery - (CD)—the most critical part of adopting DevOps. Build, test, and - deploy code changes quickly, ensuring software is always ready for - deployment. - - + + {subheading} + @@ -123,11 +91,10 @@ export default { hasStoryPadding: true, knobs: { LeadspaceWithSearch: () => ({ - theme: select( - `Adjacent theme`, - adjacentThemes, - adjacentThemes.Monotheme - ), + heading: text('Heading:', 'Find a product - Innovate like a startup, scale for the enterprise'), + highlight: text('Highlight:', 'Find a product -'), + subheading: text('Subheading:', subheading), + theme: select(`Adjacent theme`, adjacentThemes, adjacentThemes.Monotheme), }), }, }, diff --git a/packages/web-components/src/components/leadspace-with-search/__stories__/leadspace-with-search.stories.ts b/packages/web-components/src/components/leadspace-with-search/__stories__/leadspace-with-search.stories.ts index e67f94d16c2..fc768fa0312 100644 --- a/packages/web-components/src/components/leadspace-with-search/__stories__/leadspace-with-search.stories.ts +++ b/packages/web-components/src/components/leadspace-with-search/__stories__/leadspace-with-search.stories.ts @@ -10,19 +10,21 @@ import { select, text } from '@storybook/addon-knobs'; import { html } from 'lit'; import readme from './README.stories.mdx'; -import { ADJACENT_THEMES } from '../defs'; +import { ADJACENT_THEMES, DUAL_THEMES } from '../defs'; import '../index'; -import image from '../../../../../storybook-images/assets/card-section-offset/background-media.jpg'; const adjacentThemes = { - 'White/Gray 10': ADJACENT_THEMES.WHITE_AND_G10, - 'Gray 10/White': ADJACENT_THEMES.G10_AND_WHITE, - 'Gray 90/Gray 100': ADJACENT_THEMES.G90_AND_G100, - 'Gray 100/Gray 90': ADJACENT_THEMES.G100_AND_G90, - Monotheme: '', + 'Dual theme': ADJACENT_THEMES.DUAL_THEME, + Monotheme: ADJACENT_THEMES.MONOTHEME, }; +const subheading = `Innovate faster, reduce operational cost and transform +IT operations (ITOps) across a changing landscape with an AIOps platform that +delivers visibility into performance data and dependencies across environments.`; + // observing the Storybook theme attribute change +// Normally it would work without this, but the component won't +// re-render unless we do this. const htmlElement = document.documentElement; let currentTheme = ''; // eslint-disable-next-line func-names @@ -32,78 +34,40 @@ const observer = new MutationObserver((mutations) => { currentTheme = htmlElement.getAttribute( mutation.attributeName! ) as string; + + let dualTheme; + + for (const key in DUAL_THEMES) { + if (DUAL_THEMES[key].startsWith(currentTheme)) { + dualTheme = DUAL_THEMES[key]; + break; + } + } + const leadspace = document.querySelector('c4d-leadspace-with-search'); + leadspace?.setAttribute('dual-theme', dualTheme as string); } }); }); observer.observe(htmlElement, { attributes: true }); export const Default = (args) => { - const { theme, heading, subheading, paragraph } = - args?.LeadspaceWithSearch ?? {}; - const secondTheme = theme.split('-')[2]; - const subheadingComponent = document.querySelector( - 'c4d-leadspace-with-search-content-heading' - ); - - if (subheadingComponent) { - subheadingComponent!.shadowRoot!.innerHTML = subheading; - } - return html` - - ${heading} - - ${subheading} - ${paragraph} - - - - - - `; -}; - -export const WithImage = (args) => { - const { theme, heading, subheading, paragraph } = + const { theme, heading, highlight, subheading } = args?.LeadspaceWithSearch ?? {}; - const secondTheme = theme.split('-')[2]; - - const subheadingComponent = document.querySelector( - 'c4d-leadspace-with-search-content-heading' - ); - if (subheadingComponent) { - subheadingComponent!.shadowRoot!.innerHTML = subheading; - } + const secondTheme = document + .querySelector('c4d-leadspace-with-search') + ?.getAttribute('dual-theme')! + .split('-')[2]; return html` - - - ${heading}${heading} - - ${subheading} - ${paragraph} - - + ${subheading} + @@ -114,29 +78,13 @@ export const WithImage = (args) => { `; }; -WithImage.story = { - name: 'With image', - parameters: { - propsSet: { - default: { - LeadspaceWithSearch: { - heading: 'Find a product', - subheading: 'Innovate like a startup, scale for the enterprise', - paragraph: '', - theme: adjacentThemes.Monotheme, - }, - }, - }, - }, -}; - export default { title: 'Components/Lead space search', decorators: [ (story) => html`
-
+
${story()}
@@ -148,15 +96,17 @@ export default { hasStoryPadding: true, knobs: { LeadspaceWithSearch: () => ({ - heading: text('Heading:', 'Find a product'), - subheading: text( - 'Subheading', - 'Innovate like a startup, scale for the enterprise' + heading: text( + 'Heading:', + 'Find a product - Innovate like a startup, scale for the enterprise' + ), + highlight: text('Highlight:', 'Find a product -'), + subheading: text('Subheading:', subheading), + theme: select( + `Adjacent theme`, + adjacentThemes, + adjacentThemes.Monotheme ), - paragraph: text('Paragraph:', ''), - theme: - select(`Adjacent theme`, adjacentThemes, adjacentThemes.Monotheme) ?? - 0, }), }, propsSet: { diff --git a/packages/web-components/src/components/leadspace-with-search/defs.ts b/packages/web-components/src/components/leadspace-with-search/defs.ts index 3fc6198fc01..512f8b8cc93 100644 --- a/packages/web-components/src/components/leadspace-with-search/defs.ts +++ b/packages/web-components/src/components/leadspace-with-search/defs.ts @@ -8,9 +8,9 @@ */ /** - * Gradient Direction + * Dual themes */ -export enum ADJACENT_THEMES { +export enum DUAL_THEMES { /** * White and Gray 10 */ @@ -36,3 +36,18 @@ export enum ADJACENT_THEMES { */ MONOTHEME = '', } + +/** + * Adjacent themes + */ +export enum ADJACENT_THEMES { + /** + * Default theme + */ + MONOTHEME = '', + + /** + * Dual theme + */ + DUAL_THEME = 'dual-theme', +} diff --git a/packages/web-components/src/components/leadspace-with-search/index.ts b/packages/web-components/src/components/leadspace-with-search/index.ts index 6490f48a246..debd17092c6 100644 --- a/packages/web-components/src/components/leadspace-with-search/index.ts +++ b/packages/web-components/src/components/leadspace-with-search/index.ts @@ -9,9 +9,6 @@ import '../background-media/index'; import './leadspace-with-search'; -import './leadspace-with-search-heading'; -import './leadspace-with-search-content'; -import './leadspace-with-search-content-heading'; -import './leadspace-with-search-content-copy'; +import './leadspace-with-search-copy'; import '../search-with-typeahead/index'; import '../horizontal-rule/index'; diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content-heading.ts b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content-heading.ts deleted file mode 100644 index 228d5fbc2c9..00000000000 --- a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content-heading.ts +++ /dev/null @@ -1,35 +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 settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; -import StableSelectorMixin from '../../globals/mixins/stable-selector'; -import styles from './leadspace-with-search.scss'; -import C4DContentBlockHeading from '../content-block/content-block-heading'; -import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Heading in the content section of Leadspace with search - * - * @element c4d-leadspace-with-search-content-heading - */ -@customElement(`${c4dPrefix}-leadspace-with-search-content-heading`) -class C4DLeadspaceWithSearchContentHeading extends StableSelectorMixin( - C4DContentBlockHeading -) { - static get stableSelector() { - return `${c4dPrefix}--leadspace-with-search-content-heading`; - } - - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DLeadspaceWithSearchContentHeading; diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content.ts b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content.ts deleted file mode 100644 index 3e43cc2af02..00000000000 --- a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content.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 { property } from 'lit/decorators.js'; -import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; -import StableSelectorMixin from '../../globals/mixins/stable-selector'; -import C4DLeadspaceBlockContent from '../leadspace-block/leadspace-block-content'; -import styles from './leadspace-with-search.scss'; -import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Content in Leadspace with search. - * - * @element c4d-leadspace-block-content - */ -@customElement(`${c4dPrefix}-leadspace-with-search-content`) -class C4DLeadspaceWithSearchContent extends StableSelectorMixin( - C4DLeadspaceBlockContent -) { - /** - * The shadow slot the content should be in. - */ - @property({ reflect: true }) - slot = 'content'; - - static get stableSelector() { - return `${c4dPrefix}--leadspace-with-search__content`; - } - - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DLeadspaceWithSearchContent; diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content-copy.ts b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-copy.ts similarity index 84% rename from packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content-copy.ts rename to packages/web-components/src/components/leadspace-with-search/leadspace-with-search-copy.ts index 10886cc5f5c..e33576fd6ba 100644 --- a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content-copy.ts +++ b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-copy.ts @@ -20,10 +20,10 @@ const { stablePrefix: c4dPrefix } = settings; /** * Copy in the content section of Leadspace with search * - * @element c4d-leadspace-with-search-content-copy + * @element c4d-leadspace-with-search-copy */ -@customElement(`${c4dPrefix}-leadspace-with-search-content-copy`) -class C4DLeadspaceWithSearchContentCopy extends StableSelectorMixin( +@customElement(`${c4dPrefix}-leadspace-with-search-copy`) +class C4DLeadspaceWithSearchCopy extends StableSelectorMixin( C4DContentBlockParagraph ) { /** @@ -45,4 +45,4 @@ class C4DLeadspaceWithSearchContentCopy extends StableSelectorMixin( } /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DLeadspaceWithSearchContentCopy; +export default C4DLeadspaceWithSearchCopy; diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-heading.ts b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-heading.ts deleted file mode 100644 index 35cecf231da..00000000000 --- a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-heading.ts +++ /dev/null @@ -1,35 +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 settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; -import StableSelectorMixin from '../../globals/mixins/stable-selector'; -import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; -import C4DLeadspaceBlockHeading from '../leadspace-block/leadspace-block-heading'; -import styles from './leadspace-with-search.scss'; - -const { stablePrefix: c4dPrefix } = settings; - -/** - * Heading in Leadspace with search. - * - * @element c4d-leadspace-with-search-heading - */ -@customElement(`${c4dPrefix}-leadspace-with-search-heading`) -class C4DLeadspaceWithSearchHeading extends StableSelectorMixin( - C4DLeadspaceBlockHeading -) { - static get stableSelector() { - return `${c4dPrefix}--leadspace-with-search__heading`; - } - - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader -} - -/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */ -export default C4DLeadspaceWithSearchHeading; diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.ts b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.ts index 61265e92b9c..acec4d064a9 100644 --- a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.ts +++ b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.ts @@ -10,15 +10,14 @@ import { LitElement, html } from 'lit'; import { property } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; -import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import '../horizontal-rule/horizontal-rule'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import styles from './leadspace-with-search.scss'; -import { ADJACENT_THEMES } from './defs'; +import { ADJACENT_THEMES, DUAL_THEMES } from './defs'; import StickyHeader from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/StickyHeader/StickyHeader'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; - +import { themes } from '@carbon/themes'; const { prefix, stablePrefix: c4dPrefix } = settings; /** @@ -28,18 +27,6 @@ const { prefix, stablePrefix: c4dPrefix } = settings; */ @customElement(`${c4dPrefix}-leadspace-with-search`) class C4DLeadspaceWithSearch extends StableSelectorMixin(LitElement) { - /** - * - */ - @property() - _contents: any[] = []; - - /** - * `true` if there is an image. - */ - @property({ attribute: 'has-image', reflect: true, type: Boolean }) - protected _hasImage = false; - /** * sets the heading for sticky search */ @@ -52,6 +39,17 @@ class C4DLeadspaceWithSearch extends StableSelectorMixin(LitElement) { @property({ attribute: 'scroll-behavior', reflect: true, type: Boolean }) protected _scrollBehavior = false; + /** + * The adjacent theme. + * + * Options are: + * "monotheme", + * "dual-theme" + * + */ + @property({ attribute: 'adjacent-theme', reflect: true }) + adjacentTheme = ADJACENT_THEMES.MONOTHEME; + /** * The adjacent theme. * @@ -61,8 +59,8 @@ class C4DLeadspaceWithSearch extends StableSelectorMixin(LitElement) { * "g90-and-g100", * "g100-and-g90" */ - @property({ attribute: 'adjacent-theme', reflect: true }) - theme = ADJACENT_THEMES.MONOTHEME; + @property({ attribute: 'dual-theme', reflect: true }) + dualTheme = DUAL_THEMES.MONOTHEME; /** * Handles `slotchange` event. @@ -72,26 +70,7 @@ class C4DLeadspaceWithSearch extends StableSelectorMixin(LitElement) { protected _handleHeadingSlotChange({ target }: Event) { this._heading = ( (target as HTMLSlotElement).assignedNodes()[0] as HTMLElement - ).innerText; - } - - /** - * Handles `slotchange` event. - * - * @param event The event. - */ - protected _handleImageSlotChange({ target }: Event) { - this._hasImage = (target as HTMLSlotElement) - .assignedNodes() - .some( - (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim() - ); - - this._contents = (target as HTMLSlotElement) - .assignedNodes() - .filter( - (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim() - ); + ).querySelector('h1')?.innerText!; } /** @@ -100,13 +79,38 @@ class C4DLeadspaceWithSearch extends StableSelectorMixin(LitElement) { protected _getSearchClass() { return classMap({ [`${prefix}--search-container`]: true, - [`${prefix}--search-container-adjacent-theme`]: - this.theme !== ADJACENT_THEMES.MONOTHEME || this._hasImage, + [`${prefix}--search-container-dual-theme`]: + this.adjacentTheme === ADJACENT_THEMES.DUAL_THEME, }); } protected firstUpdated() { StickyHeader.global.leadspaceWithSearch = this; + + this.querySelector(`${c4dPrefix}-leadspace-heading`)?.setAttribute( + 'type-style', + 'fluid-heading-05' + ); + } + + updated() { + const currentBackground = window + .getComputedStyle(this) + .getPropertyValue('--cds-background'); + const currentTheme = Object.keys(themes).find( + (colorName) => themes[colorName].background === currentBackground + ); + + if (this.adjacentTheme === ADJACENT_THEMES.DUAL_THEME) { + for (const key in DUAL_THEMES) { + if (DUAL_THEMES[key].startsWith(currentTheme)) { + this.dualTheme = DUAL_THEMES[key]; + break; + } + } + } else { + this.dualTheme = '' as any; + } } render() { @@ -116,8 +120,7 @@ class C4DLeadspaceWithSearch extends StableSelectorMixin(LitElement) { name="heading" @slotchange=${this._handleHeadingSlotChange}>
- - +
@@ -127,9 +130,6 @@ class C4DLeadspaceWithSearch extends StableSelectorMixin(LitElement) {
- ${this._contents.map((e) => { - return html` ${unsafeHTML((e as HTMLElement).outerHTML)} `; - })} `; } diff --git a/packages/web-components/src/components/locale-modal/locale-item.ts b/packages/web-components/src/components/locale-modal/locale-item.ts index 5f4da13f1c0..97909b0f685 100644 --- a/packages/web-components/src/components/locale-modal/locale-item.ts +++ b/packages/web-components/src/components/locale-modal/locale-item.ts @@ -15,7 +15,7 @@ import ipcinfoCookie from '../../internal/vendor/@carbon/ibmdotcom-utilities/uti import styles from './locale-modal.scss'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; -const { prefix, stablePrefix: c4dPrefix } = settings; +const { stablePrefix: c4dPrefix } = settings; /** * Locale item. @@ -75,8 +75,8 @@ class C4DLocaleItem extends CDSLink { _renderInner() { const { country, language } = this; return html` -
${country}
-
${language}
+
${country}
+
${language}
`; } diff --git a/packages/web-components/src/components/locale-modal/locale-modal-composite.ts b/packages/web-components/src/components/locale-modal/locale-modal-composite.ts index a4e60e810d2..1daa0623be5 100644 --- a/packages/web-components/src/components/locale-modal/locale-modal-composite.ts +++ b/packages/web-components/src/components/locale-modal/locale-modal-composite.ts @@ -11,6 +11,8 @@ import { LitElement, html } from 'lit'; import { property } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import LocaleAPI from '@carbon/ibmdotcom-services/es/services/Locale/Locale.js'; +import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js'; +import Error20 from '../../internal/vendor/@carbon/web-components/icons/error/20.js'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import altlangs from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/altlangs/altlangs.js'; import HybridRenderMixin from '../../globals/mixins/hybrid-render'; @@ -23,6 +25,8 @@ import './regions'; import './region-item'; import './locale-search'; import './locale-item'; +import '../card/card-heading'; +import '../card/card-footer'; import styles from './locale-modal-composite.scss'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; @@ -177,12 +181,28 @@ class C4DLocaleModalComposite extends HybridRenderMixin(LitElement) { ?open="${open}"> ${regionList?.map(({ countryList, name }) => { + const isDisabled = + countryList.length === 0 || + massagedCountryList?.find(({ region }) => region === name) === + undefined; return html` - + + ${name} +
+ ${isDisabled + ? Error20({ + slot: 'icon', + class: `${c4dPrefix}--card__cta`, + }) + : ArrowRight20({ + slot: 'icon', + class: `${c4dPrefix}--card__cta`, + })} +
+ `; })} diff --git a/packages/web-components/src/components/locale-modal/locale-modal.scss b/packages/web-components/src/components/locale-modal/locale-modal.scss index 71bb446dbc7..ea5317fa1f9 100644 --- a/packages/web-components/src/components/locale-modal/locale-modal.scss +++ b/packages/web-components/src/components/locale-modal/locale-modal.scss @@ -1,94 +1,8 @@ // -// Copyright IBM Corp. 2020, 2022 +// Copyright IBM Corp. 2020, 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. // -@use 'sass:map'; - -@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/ibmdotcom-styles/scss/components/card-link'; @use '@carbon/ibmdotcom-styles/scss/components/locale-modal'; -@use '../expressive-modal/expressive-modal'; -@use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *; -@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; - -// :host(#{$c4d-prefix}-locale-modal) { -// @extend :host(#{$c4d-prefix}-expressive-modal); - -// #{$c4d-prefix}-expressive-modal-header { -// padding: 0 20% 0 $spacing-05; -// margin-bottom: $spacing-03; -// } - -// .#{$prefix}--modal-container { -// padding: $spacing-05; -// } - -// .#{$prefix}--modal-content { -// padding-right: 0; -// } - -// .#{$prefix}--locale-modal { -// margin-bottom: 0; -// &.#{$prefix}--modal-content { -// padding-top: $spacing-03; -// margin-top: $spacing-07; - -// @include breakpoint('lg', $grid-breakpoints) { -// margin-top: auto; -// } -// } -// } -// } - -// :host(#{$c4d-prefix}-locale-modal) #{$c4d-prefix}-expressive-modal-heading { -// width: fit-content; -// } - -// :host(#{$c4d-prefix}-locale-search) { -// padding-top: $spacing-03; -// } - -// :host(#{$c4d-prefix}-region-item) { -// @include breakpoint('sm', $grid-breakpoints) { -// @include make-col(4, map.get(map.get($grid-breakpoints, 'sm'), 'columns')); -// } - -// @include breakpoint('md', $grid-breakpoints) { -// @include make-col(8, map.get(map.get($grid-breakpoints, 'md'), 'columns')); -// } - -// @include breakpoint('lg', $grid-breakpoints) { -// @include make-col(8, map.get(map.get($grid-breakpoints, 'lg'), 'columns')); -// } - -// @include breakpoint('xlg', $grid-breakpoints) { -// @include make-col(8, map.get(map.get($grid-breakpoints, 'xlg'), 'columns')); -// } - -// .#{$prefix}--link { -// @extend .#{$prefix}--tile; -// @extend .#{$prefix}--tile--clickable; -// @extend .#{$prefix}--card; - -// align-items: stretch; -// text-align: inherit; - -// &:hover.#{$prefix}--link--disabled { -// display: flex; -// } - -// .#{$prefix}--card__wrapper .cds-card__footer svg { -// color: $layer-selected-inverse; -// } -// } - -// &[disabled] .#{$prefix}--link { -// @extend .#{$prefix}--card__CTA--disabled; -// } -// } diff --git a/packages/web-components/src/components/locale-modal/locale-modal.ts b/packages/web-components/src/components/locale-modal/locale-modal.ts index 37819aee4e9..059391de460 100644 --- a/packages/web-components/src/components/locale-modal/locale-modal.ts +++ b/packages/web-components/src/components/locale-modal/locale-modal.ts @@ -58,8 +58,8 @@ class C4DLocaleModal extends C4DExpressiveModal { * @param event The event. */ private _handleClickRegionSelector(event: MouseEvent) { - const { invalid, name } = event.target as C4DRegionItem; - if (!invalid) { + const { disabled, name } = event.target as C4DRegionItem; + if (!disabled) { this._currentRegion = name; } } @@ -80,7 +80,7 @@ class C4DLocaleModal extends C4DExpressiveModal { html`

${langDisplay}${EarthFilled16({ - class: `${prefix}--locale-modal__label-globe`, + class: `${c4dPrefix}--locale-modal__label-globe`, })}

`} @@ -108,7 +108,7 @@ class C4DLocaleModal extends C4DExpressiveModal { @click="${handleClickBackButton}"> ${headerTitle}${ArrowLeft20({ slot: 'icon', - class: `${prefix}--locale-modal__label-arrow`, + class: `${c4dPrefix}--locale-modal__label-arrow`, })}

@@ -134,7 +134,7 @@ class C4DLocaleModal extends C4DExpressiveModal { const { _handleClickRegionSelector: handleClickRegionSelector } = this; return html`

@@ -152,7 +152,7 @@ class C4DLocaleModal extends C4DExpressiveModal { protected _renderHeader() { const { closeButtonAssistiveText } = this; return html` -
+
@@ -250,7 +250,7 @@ class C4DLocaleModal extends C4DExpressiveModal { ${c4dPrefix}-expressive-modal, ${c4dPrefix}-expressive-modal-close-button, ${c4dPrefix}-region-item, - ${c4dPrefix}-search, + ${prefix}-search, ${c4dPrefix}-locale-item `; } diff --git a/packages/web-components/src/components/locale-modal/locale-search.ts b/packages/web-components/src/components/locale-modal/locale-search.ts index f56980e6cbf..b465189c022 100644 --- a/packages/web-components/src/components/locale-modal/locale-search.ts +++ b/packages/web-components/src/components/locale-modal/locale-search.ts @@ -13,7 +13,8 @@ import { INPUT_SIZE } from '../../internal/vendor/@carbon/web-components/compone import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import ThrottedInputMixin from '../../globals/mixins/throttled-input'; import { forEach } from '../../globals/internal/collection-helpers'; -import C4DSearch from '../search/search'; +import CDSSearch from '../../internal/vendor/@carbon/web-components/components/search/search.js'; +import '../../internal/vendor/@carbon/web-components/components/search/search.js'; import C4DLocaleItem from './locale-item'; import styles from './locale-modal.scss'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; @@ -48,7 +49,7 @@ class C4DLocaleSearch extends ThrottedInputMixin( /** * The container for the locale list. */ - @query(`.${prefix}--locale-modal__list`) + @query(`.${c4dPrefix}--locale-modal__list`) private _listNode?: HTMLElement; /** @@ -60,8 +61,8 @@ class C4DLocaleSearch extends ThrottedInputMixin( /** * The search box. */ - @query(`${c4dPrefix}-search`) - private _searchNode?: C4DSearch; + @query(`${prefix}-search`) + private _searchNode?: CDSSearch; @query('[aria-live]') private _liveRegion?: HTMLDivElement; @@ -207,24 +208,24 @@ class C4DLocaleSearch extends ThrottedInputMixin( _hasAvailableItem: hasAvailableItem, } = this; return html` -
-
- +
+ - +
-

+

${hasAvailableItem ? availabilityLabelText : unavailabilityLabelText}

-
+
@@ -239,7 +240,7 @@ class C4DLocaleSearch extends ThrottedInputMixin( * A selector selecting the locale item, */ static get selectorTabable() { - return `${c4dPrefix}-search`; + return `${prefix}-search`; } /** @@ -253,7 +254,7 @@ class C4DLocaleSearch extends ThrottedInputMixin( * The event that represents the user input gesture. */ static get eventInput() { - return `${c4dPrefix}-search-input`; + return `${prefix}-search-input`; } static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader diff --git a/packages/web-components/src/components/locale-modal/region-item.ts b/packages/web-components/src/components/locale-modal/region-item.ts index 58ec73ab28d..4b7e83eadda 100644 --- a/packages/web-components/src/components/locale-modal/region-item.ts +++ b/packages/web-components/src/components/locale-modal/region-item.ts @@ -7,11 +7,10 @@ * LICENSE file in the root directory of this source tree. */ -import { html } from 'lit'; +import { html, css } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; import { property } from 'lit/decorators.js'; -import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js'; -import CDSLink from '../../internal/vendor/@carbon/web-components/components/link/link.js'; -import Error20 from '../../internal/vendor/@carbon/web-components/icons/error/20.js'; +import C4DCard from '../card/card'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import styles from './locale-modal.scss'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; @@ -24,12 +23,12 @@ const { prefix, stablePrefix: c4dPrefix } = settings; * @element c4d-region-item */ @customElement(`${c4dPrefix}-region-item`) -class C4DRegionItem extends CDSLink { +class C4DRegionItem extends C4DCard { /** * `true` if this region has no countries. */ @property({ type: Boolean }) - invalid = false; + disabled = false; /** * The region name. @@ -37,56 +36,34 @@ class C4DRegionItem extends CDSLink { @property({ reflect: true }) name = ''; + protected _cardClasses = classMap({ + [`${prefix}--tile`]: true, + [`${prefix}--card`]: true, + [`${prefix}--tile--clickable`]: true, + [`${prefix}--card--link`]: true, + }); + /** * @returns The disabled link content. */ protected _renderDisabledLink() { - const { _classes: classes } = this; + const { _classes: classes, _cardClasses: cardClasses } = this; return html` `; } - /** - * @returns The link content. - */ - protected _renderLink() { - const { _classes: classes } = this; - return html` - - `; - } - - /** - * @returns The inner content. - */ - _renderInner() { - const { invalid, name } = this; - return html` -
-
-

- ${name} -

-
- ${(invalid ? Error20 : ArrowRight20)({ - class: `${prefix}--card__cta`, - })} -
-
-
- `; - } - - shouldUpdate(changedProperties) { - if (changedProperties.has('invalid')) { - this.disabled = this.invalid; - } - return true; + render() { + const { _classes: classes, disabled, _cardClasses: cardClasses } = this; + return disabled + ? this._renderDisabledLink() + : html` + + `; } updated(changedProperties) { @@ -96,7 +73,11 @@ class C4DRegionItem extends CDSLink { } } - static styles = styles; + static get styles() { + return css` + ${super.styles}${styles} + `; + } } export default C4DRegionItem; diff --git a/packages/web-components/src/components/locale-modal/regions.ts b/packages/web-components/src/components/locale-modal/regions.ts index 70b76e95551..2c6d28b2f3b 100644 --- a/packages/web-components/src/components/locale-modal/regions.ts +++ b/packages/web-components/src/components/locale-modal/regions.ts @@ -15,7 +15,7 @@ import styles from './locale-modal.scss'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; -const { prefix, stablePrefix: c4dPrefix } = settings; +const { stablePrefix: c4dPrefix } = settings; /** * The regions selector in locale modal. @@ -31,11 +31,7 @@ class C4DRegions extends StableSelectorMixin(LitElement) { slot = 'regions-selector'; render() { - return html` -
- -
- `; + return html` `; } static get stableSelector() { 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 ef3fc2332b8..fd92307dc1a 100644 --- a/packages/web-components/src/components/masthead/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/masthead/__stories__/README.stories.mdx @@ -31,18 +31,54 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; ### JS (via import) -```javascript +````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) + +``` + +###### Markup: + +```html + ``` #### Setting Platform @@ -105,8 +141,9 @@ document.getElementById('masthead-container').navLinks = links; #### Using L1 nav -To use L1 nav, set `l1Data` prop. `l1Data` prop should be an object that -contains the navigation data of 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: ```javascipt const l1Data = { @@ -114,7 +151,8 @@ const l1Data = { name: 'Stock Charts', url: 'https://example.com/', }, - menuItems: (The nav links), + menuItems: [...], + actions: {...}, } ``` @@ -150,6 +188,14 @@ 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. +### Understanding the different authentication method types + +The `` and `` components both expose the `auth-method` property which allows the adopters to define the authentication method based on their content ecosystems and renders the ultity menu items (located on the top right-hand area) based on the defined auth method. See below for more context on each available value. + +- `auth-method="profile-api"` - The default authentication method used on the global masthead to display links to the MyIBM profile. +- `auth-method="cookie"` - This authentication method checks for the cookie name value return from the `cloud.ibm.com` console application (eg. `com.ibm.cloud.iam.LoggedIn.prod`) and see if it returns `1` or `0`. This method is designed and intended for "Cloud" web segment usage only. +- `auth-method="docs-api"` - This authentication method checks against the 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 Using a search API other than the default provided from IBM Search is supported. @@ -353,7 +399,7 @@ to see how Web Components selector and `data-autoid` should be used. | `` and `` | `data-autoid="cds--masthead__l0-nav--nav${item}"` | Interactive | | `` | `data-autoid="cds--masthead__l0-nav--subnav-col${item}-item${item}"` | Interactive | | `` | `data-autoid="cds--masthead__l0-sidenav"` | Component | -| `` and `` | `data-autoid="cds--masthead__l0-sidenav--nav${item}"` | Interactive | +| `` | `data-autoid="cds--masthead__l0-sidenav--nav${item}"` | Interactive | | `` | `data-autoid="cds--masthead__l0-sidenav--subnav-col${item}-item${item}"` | Interactive | 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 ce2d0e6efda..ffd1649cb77 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 @@ -366,7 +366,7 @@ to see how Web Components selector and `data-autoid` should be used. | `` and `` | `data-autoid="cds--masthead__l0-nav--nav${item}"` | Interactive | | `` | `data-autoid="cds--masthead__l0-nav--subnav-col${item}-item${item}"` | Interactive | | `` | `data-autoid="cds--masthead__l0-sidenav"` | Component | -| `` and `` | `data-autoid="cds--masthead__l0-sidenav--nav${item}"` | Interactive | +| `` | `data-autoid="cds--masthead__l0-sidenav--nav${item}"` | Interactive | | `` | `data-autoid="cds--masthead__l0-sidenav--subnav-col${item}-item${item}"` | Interactive | diff --git a/packages/web-components/src/components/masthead/__stories__/links.ts b/packages/web-components/src/components/masthead/__stories__/links.ts index 0cfdae0da15..45716770aa3 100644 --- a/packages/web-components/src/components/masthead/__stories__/links.ts +++ b/packages/web-components/src/components/masthead/__stories__/links.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. @@ -11,6 +11,7 @@ import { MastheadLink, MastheadL1, MastheadLogoData, + L0MenuItem, } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/translateAPI.d'; /* eslint-disable max-len */ @@ -19,22 +20,22 @@ import { * Alternate logo */ const logoData: MastheadLogoData = { - svg: ` + svg: ` Artboard - + - - - - + + + + - - - - - - + + + + + + `, @@ -43,417 +44,428 @@ const logoData: MastheadLogoData = { allowlist: [], end: 'May 5, 2021 0:00:01', path: '/', - href: 'https://www.example.com/not-default-href', + href: 'https://www.example.com/custom-href', }; /** - * Dotcom shell MastheadL1 Data + * MastheadL1 Data */ -const l1Data: MastheadL1 = { - title: 'Stock Charts', - url: 'https://example.com', +const mastheadL1Data: MastheadL1 = { + title: 'L1 section name', + url: 'https://www.ibm.com/analytics', menuItems: [ { - title: 'Lorem ipsum dolor sit amet', - titleEnglish: 'Lorem ipsum dolor sit amet', - url: '', - hasMenu: true, - hasMegapanel: false, - 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: 'Single Column', + titleEnglish: 'Single Column', + submenu: { + columns: 1, + menuSections: [ + { + span: 1, + items: [ + { + title: 'Link item (A1)', + url: 'https://example.com', }, + { + title: 'Link item (A2)', + url: 'https://example.com', + }, + { + title: 'Link item (A3)', + url: 'https://example.com', + }, + { + title: 'Link item (A4)', + url: 'https://example.com', + }, + ], + }, + ], + }, + }, + { + title: 'Two Column', + submenu: { + columns: 2, + announcement: + 'Lorem ipsum: Full announcement may be linked or only a portion as an inline link', + footer: { + title: 'View all lorem ipsum (B)', + url: 'https://example.com', + }, + menuSections: [ + { + span: 1, + heading: { + headingLevel: 2, + title: 'Heading level 2 (B1)', + url: 'https://example.com', }, - { - title: 'Menu dropdown item with extra long text', - url: '', + items: [ + { + title: 'Link item (B1)', + url: 'https://example.com', + }, + { + title: 'Link item (B2)', + url: 'https://example.com', + }, + { + title: 'Link item (B3)', + url: 'https://example.com', + }, + ], + }, + { + span: 1, + heading: { + headingLevel: 2, + title: 'Heading level 2 (B2)', }, - ], - }, - ], + items: [ + { + title: 'Link item (B4)', + url: 'https://example.com', + }, + { + title: 'Link item (B5)', + url: 'https://example.com', + }, + { + title: 'Link item (B6)', + url: 'https://example.com', + }, + ], + }, + ], + }, }, { - title: 'Consectetur adipiscing elit', - titleEnglish: 'Consectetur adipiscing elit', - url: '', - hasMenu: true, - menuSections: [ - { - heading: '', - menuItems: [ - { - title: 'Link 2', - url: '', - megapanelContent: { - headingTitle: 'Services', - headingUrl: - 'https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn', - description: - 'Reimagine your business, designing and building the platforms necessary for growth', - quickLinks: { - title: 'Quicklinks', - links: [ - { - title: 'Subnav 1', - url: '', - }, - { - title: 'Subnav 2', - url: '', - }, - { - title: 'Subnav 3', - url: '', - }, - { - title: 'Subnav 4', - url: '', - }, - ], - }, - feature: { - heading: 'IBM Services, your Digital Reinvention â„¢ partner', - imageUrl: - 'https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg', - linkTitle: - 'Explore all our business consulting and technology services', - linkUrl: - 'https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn', - }, + title: 'Three Column', + submenu: { + columns: 3, + announcement: + 'Lorem ipsum: Full announcement may be linked or only a portion as an inline link', + menuSections: [ + { + span: 1, + heading: { + headingLevel: 2, + title: 'Heading level 2', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + items: [ + { + title: 'Link item (C1)', + url: 'https://example.com', }, + { + title: 'Link item (C2)', + url: 'https://example.com', + }, + ], + }, + { + span: 1, + heading: { + headingLevel: 2, + title: 'Heading level 2', }, - { - 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', - }, + items: [ + { + title: 'Link item (C3)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (C4)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', }, + { + title: 'Link item (C5)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (C6)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + ], + }, + { + span: 1, + heading: { + headingLevel: 2, + title: 'Heading level 2', }, - ], - }, - ], - }, - { - 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: [], + items: [ + { + title: 'Link item (C7)', + url: 'https://example.com', + }, + { + title: 'Link item (C8)', + url: 'https://example.com', + }, + { + title: 'Link item (C9)', + url: 'https://example.com', + }, + { + title: 'Link item (C10)', + url: 'https://example.com', + }, + { + title: 'Link item (C11)', + url: 'https://example.com', + }, + ], + }, + ], + }, }, { - title: 'Fusce nec tellus sed augue semper porta', - titleEnglish: 'Fusce nec tellus sed augue semper porta', - url: '', - hasMenu: true, - hasMegapanel: false, - 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: 'Three Column', + submenu: { + columns: 3, + announcement: + 'Lorem ipsum: Full announcement may be linked or only a portion as an inline link', + menuSections: [ + { + span: 1, + heading: { + headingLevel: 2, + title: 'Narrow 1', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', }, - { - 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', - }, + items: [ + { + title: 'Link item (D1)', + url: 'https://example.com', }, + { + title: 'Link item (D2)', + url: 'https://example.com', + }, + ], + }, + { + span: 2, + heading: { + headingLevel: 2, + title: 'Wide 1', }, - { - 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', - }, + items: [ + { + title: 'Link item (D3)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D4)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D5)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D6)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D7)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D8)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D9)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D10)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', }, + ], + }, + { + span: 1, + heading: { + headingLevel: 2, + title: 'Narrow 2', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', }, - { - 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', - }, + items: [ + { + title: 'Link item (D11)', + url: 'https://example.com', + }, + { + title: 'Link item (D12)', + url: 'https://example.com', }, + ], + }, + { + span: 2, + heading: { + headingLevel: 2, + title: 'Wide 2', }, - ], - }, - ], - }, - { - 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: [], - }, - ], -}; - -/** - * MastheadL1 Data - */ -const mastheadL1Data: MastheadL1 = { - title: 'Analytics', - url: 'https://www.ibm.com/analytics', - menuItems: [ - { - title: 'Products', - titleEnglish: 'Products', - url: 'https://www.ibm.com/analytics/products', - }, - { - title: 'Solutions', - titleEnglish: 'Solutions', - url: 'https://www.ibm.com/analytics/solutions', + items: [ + { + title: 'Link item (D13)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D14)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D15)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D16)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D17)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D18)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D19)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Link item (D20)', + url: 'https://example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + ], + }, + ], + }, }, { - title: 'Services', - titleEnglish: 'Services', - url: 'https://www.ibm.com/industries?lnk=min', + title: 'Plain Link', + url: 'https://example.com', }, { - title: 'Learn', - titleEnglish: 'Learn', - menuSections: [ - { - menuItems: [ - { - title: 'Blogs', - url: 'https://www.ibm.com/blogs/journey-to-ai/', - }, - { - title: 'Client stories', - url: 'https://www.ibm.com/analytics/client-stories', - }, - { - title: 'Communities', - url: 'https://www.ibm.com/analytics/communities', - }, - ], + title: 'Two Column', + submenu: { + columns: 2, + announcement: + 'Lorem ipsum: Full announcement may be linked or only a portion as an inline link', + footer: { + title: 'View all lorem ipsum (E)', + url: 'https://example.com', }, - ], - }, - { - title: 'Explore more', - titleEnglish: 'Explore more', - menuSections: [ - { - menuItems: [ - { - title: 'Product support', - url: 'https://www.ibm.com/analytics/support', + menuSections: [ + { + span: 1, + heading: { + headingLevel: 2, + title: 'Heading level 2 (E1)', + url: 'https://example.com', }, - { - title: 'Expert gallery', - url: 'https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn', + items: [ + { + title: 'Link item (E1)', + url: 'https://example.com', + }, + { + title: 'Link item (E2)', + url: 'https://example.com', + }, + { + title: 'Link item (E3)', + url: 'https://example.com', + }, + ], + }, + { + span: 1, + heading: { + headingLevel: 2, + title: 'Heading level 2', }, - ], - }, - ], + items: [ + { + title: 'Link item (E4)', + url: 'https://example.com', + }, + { + title: 'Link item (E5)', + url: 'https://example.com', + }, + { + title: 'Link item (E6)', + url: 'https://example.com', + }, + ], + }, + ], + }, }, ], + actions: { + login: { + title: 'Log in', + url: 'https://example.com', + }, + cta: { + title: 'Optional CTA', + url: 'https://example.com', + }, + }, }; /** @@ -461,1486 +473,4986 @@ const mastheadL1Data: MastheadL1 = { */ const mastheadLinks: MastheadLink[] = [ { - title: 'Products & Solutions', - titleEnglish: 'Products & Solutions', + title: 'Products', + titleEnglish: 'Products', url: '', hasMenu: true, hasMegapanel: true, + megamenuLayout: 'tab', menuSections: [ { heading: '', menuItems: [ { - title: 'Top products & platforms', - titleEnglish: 'Top products & platforms', - url: 'https://www.ibm.com/products?lnk=hpmps_bupr&lnk2=link', + title: 'Featured', + titleEnglish: 'Featured', + url: 'https://www.ibm.com/placeholder', highlighted: true, megapanelContent: { - headingTitle: 'Top products & platforms', - headingUrl: 'https://www.ibm.com/products?lnk=hpmps_bupr', - description: '', + headingTitle: 'Featured', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ', quickLinks: { title: '', links: [ { - title: 'Db2', - titleEnglish: 'Db2', - url: 'https://www.ibm.com/analytics/db2?lnk=hpmps_bupr&lnk2=learn', - }, - { - title: 'Hybrid Cloud', - titleEnglish: 'Hybrid Cloud', - url: 'https://www.ibm.com/cloud/hybrid?lnk=hpmps_bupr&lnk2=learn', - }, - { - title: 'IBM Cloud', - titleEnglish: 'IBM Cloud', - url: 'https://www.ibm.com/cloud?lnk=hpmps_bupr&lnk2=learn', - }, - { - title: 'IBM Security', - titleEnglish: 'IBM Security', - url: 'https://www.ibm.com/security?lnk=hpmps_bupr&lnk2=learn', - }, - { - title: 'IBM Sterling', - titleEnglish: 'IBM Sterling', - url: 'https://www.ibm.com/supply-chain/sterling?lnk=hpmps_bupr&lnk2=learn', + 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 Z', - titleEnglish: 'IBM Z', - url: 'https://www.ibm.com/it-infrastructure/z?lnk=hpmps_bupr&lnk2=learn', + 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: 'Red Hat', - titleEnglish: 'Red Hat', - url: 'https://www.ibm.com/cloud/redhat?lnk=hpmps_bupr&lnk2=learn', + 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: 'SPSS Statistics', - titleEnglish: 'SPSS Statistics', - url: 'https://www.ibm.com/products/spss-statistics?lnk=hpmps_bupr&lnk2=learn', + 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: 'The Weather Company', - titleEnglish: 'The Weather Company', - url: 'https://www.ibm.com/weather?lnk=hpmps_bupr&lnk2=learn', + 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: 'Watson', - titleEnglish: 'Watson', - url: 'https://www.ibm.com/watson?lnk=hpmps_bupr&lnk2=learn', + 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: 'WebSphere', - titleEnglish: 'WebSphere', - url: 'https://www.ibm.com/cloud/websphere-application-platform/?lnk=hpmps_bupr&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/7b8ce832a78108d5/original/megamenu-pictogram-top-products-and-services.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Industries', - titleEnglish: 'Industries', - url: 'https://www.ibm.com/industries?lnk=hpmps_buin&lnk2=link', + title: 'Analytics', + titleEnglish: 'Analytics', + url: 'https://www.ibm.com/placeholder', highlighted: true, megapanelContent: { - headingTitle: 'Industries', - headingUrl: 'https://www.ibm.com/industries?lnk=hpmps_buin', - description: '', + headingTitle: 'Analytics', + headingUrl: 'https://www.ibm.com/placeholder', + description: 'Aggregate and analyze large datasets', quickLinks: { title: '', links: [ { - title: 'Banking & financial markets', - titleEnglish: 'Banking & financial markets', - url: 'https://www.ibm.com/industries/banking-financial-markets?lnk=hpmps_buin&lnk2=learn', - }, - { - title: 'Energy & utilities', - titleEnglish: 'Energy & utilities', - url: 'https://www.ibm.com/industries/energy?lnk=hpmps_buin&lnk2=learn', + 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: 'Government - US Federal', - titleEnglish: 'Government - US Federal', - url: 'https://www.ibm.com/industries/federal?lnk=hpmps_buin&lnk2=learn', + 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: 'Healthcare', - titleEnglish: 'Healthcare', - url: 'https://www.ibm.com/industries/healthcare?lnk=hpmps_buin&lnk2=learn', + title: 'Cognos', + titleEnglish: 'Cognos', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Insurance', - titleEnglish: 'Insurance', - url: 'https://www.ibm.com/industries/insurance?lnk=hpmps_buin&lnk2=learn', + title: 'SPSS', + titleEnglish: 'SPSS', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Manufacturing', - titleEnglish: 'Manufacturing', - url: 'https://www.ibm.com/industries/manufacturing?lnk=hpmps_buin&lnk2=learn', + title: 'cplex', + titleEnglish: 'cplex', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Retail & consumer products', - titleEnglish: 'Retail & consumer products', - url: 'https://www.ibm.com/industries/retail-consumer-products?lnk=hpmps_buin&lnk2=learn', + title: 'Netezza', + titleEnglish: 'Netezza', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Telco, media & entertainment', - titleEnglish: 'Telco, media & entertainment', - url: 'https://www.ibm.com/industries/telecom-media-entertainment?lnk=hpmps_buin&lnk2=learn', + title: 'Watson Studio', + titleEnglish: 'Watson Studio', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: 'IDE to build, run and manage AI models', }, { - title: 'Travel & transportation', - titleEnglish: 'Travel & transportation', - url: 'https://www.ibm.com/industries/travel-transportation?lnk=hpmps_buin&lnk2=learn', + 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: 'View all Industries', - titleEnglish: 'View all Industries', - url: 'https://www.ibm.com/industries?lnk=hpmps_buin&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/6cad5af285e48a89/original/megamenu-pictogram-industries.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Artificial intelligence', - titleEnglish: 'Artificial intelligence', - url: 'https://www.ibm.com/artificial-intelligence?lnk=hpmps_buai&lnk2=link', + title: 'Business Automation', + titleEnglish: 'Business Automation', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Artificial intelligence', - headingUrl: - 'https://www.ibm.com/artificial-intelligence?lnk=hpmps_buai', - description: '', + 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: 'Customer service', - titleEnglish: 'Customer service', - url: 'https://www.ibm.com/watson/ai-customer-service?lnk=hpmps_buai&lnk2=learn', + 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: 'Deep learning', - titleEnglish: 'Deep learning', - url: 'https://www.ibm.com/cloud/deep-learning?lnk=hpmps_buai&lnk2=learn', + 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: 'Image recognition', - titleEnglish: 'Image recognition', - url: 'https://www.ibm.com/cloud/watson-visual-recognition?lnk=hpmps_buai&lnk2=learn', + 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: 'Platforms & APIs', - titleEnglish: 'Platforms & APIs', - url: 'https://www.ibm.com/watson/products-services?lnk=hpmps_buai&lnk2=learn', + 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: 'View all AI products', - titleEnglish: 'View all AI products', - url: 'https://www.ibm.com/us-en/products/category/technology/cognitive-computing-and-AI?lnk=hpmps_buai&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/3ed6517e90739279/original/megamenu-pictogram-artificial-intelligence.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Automation', - titleEnglish: 'Automation', - url: 'https://www.ibm.com/automation?lnk=hpmps_buau&lnk2=link', + title: 'AI & ML', + titleEnglish: 'AI & ML', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Automation', - headingUrl: 'https://www.ibm.com/automation?lnk=hpmps_buau', - description: '', + 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: 'Business process automation', - titleEnglish: 'Business process automation', - url: 'https://www.ibm.com/automation/services?lnk=hpmps_buau&lnk2=learn', + 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: 'Business process mapping', - titleEnglish: 'Business process mapping', - url: 'https://www.ibm.com/automation/process-mapping?lnk=hpmps_buau&lnk2=learn', + 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: 'Business rules management', - titleEnglish: 'Business rules management', - url: 'https://www.ibm.com/automation/enterprise-content-management?lnk=hpmps_buau&lnk2=learn', + title: 'Watson Studio', + titleEnglish: 'Watson Studio', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: 'IDE to build, run and manage AI models', }, { - title: 'Data capture', - titleEnglish: 'Data capture', - url: 'https://www.ibm.com/automation/data-capture?lnk=hpmps_buau&lnk2=learn', + 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: 'View all Automation products', - titleEnglish: 'View all Automation products', - url: 'https://www.ibm.com/automation/platform?lnk=hpmps_buau&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/15598df3a3519f7f/original/megamenu-pictogram-business-automation.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Blockchain', - titleEnglish: 'Blockchain', - url: 'https://www.ibm.com/blockchain?lnk=hpmps_bubc&lnk2=link', + title: 'Compute & Servers', + titleEnglish: 'Compute & Servers', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Blockchain', - headingUrl: 'https://www.ibm.com/blockchain?lnk=hpmps_bubc', - description: '', + headingTitle: 'Compute & Servers', + headingUrl: 'https://www.ibm.com/placeholder', + description: 'Run workloads on cloud infrastrcture', quickLinks: { title: '', links: [ { - title: 'Blockchain platform', - titleEnglish: 'Blockchain platform', - url: 'https://www.ibm.com/blockchain/platform?lnk=hpmps_bubc&lnk2=learn', - }, - { - title: 'Transparent supply', - titleEnglish: 'Transparent supply', - url: 'https://www.ibm.com/blockchain/solutions/transparent-supply?lnk=hpmps_bubc&lnk2=learn', + 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: 'Blockchain for supplier management', - titleEnglish: 'Blockchain for supplier management', - url: 'https://www.ibm.com/blockchain/solutions/trust-your-supplier?lnk=hpmps_bubc&lnk2=learn', + title: 'Power', + titleEnglish: 'Power', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Blockchain for trade finance', - titleEnglish: 'Blockchain for trade finance', - url: 'https://www.ibm.com/blockchain/solutions/trade-finance?lnk=hpmps_bubc&lnk2=learn', + 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: 'Blockchain for supply chain', - titleEnglish: 'Blockchain for supply chain', - url: 'https://www.ibm.com/blockchain/industries/supply-chain?lnk=hpmps_bubc&lnk2=learn', + 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: 'Blockchain for food', - titleEnglish: 'Blockchain for food', - url: 'https://www.ibm.com/blockchain/solutions/food-trust?lnk=hpmps_bubc&lnk2=learn', + 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: 'View all Blockchain products', - titleEnglish: 'View all Blockchain products', - url: 'https://www.ibm.com/us-en/products/category/technology/blockchain?lnk=hpmps_bubc&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/75dc99f23dced53/original/megamenu-pictogram-blockchain.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Business operations', - titleEnglish: 'Business operations', - url: 'https://www.ibm.com/business-operations?lnk=hpmps_buop&lnk2=link', + title: 'Database', + titleEnglish: 'Database', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Business operations', - headingUrl: - 'https://www.ibm.com/business-operations?lnk=hpmps_buop', - description: '', + headingTitle: 'Database', + headingUrl: 'https://www.ibm.com/placeholder', + description: 'Store, query and analyze structured data', quickLinks: { title: '', links: [ { - title: 'Enterprise asset management', - titleEnglish: 'Enterprise asset management', - url: 'https://www.ibm.com/business-operations/enterprise-asset-management?lnk=hpmps_buop&lnk2=learn', + 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: 'Facilities management', - titleEnglish: 'Facilities management', - url: 'https://www.ibm.com/business-operations/facilities-management/integrated-workplace-management-system?lnk=hpmps_buop&lnk2=learn', + title: 'IBM Cloudant', + titleEnglish: 'IBM Cloudant', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Managed PCI-compliant JSON document store on CouchDB', }, { - title: 'Systems engineering', - titleEnglish: 'Systems engineering', - url: 'https://www.ibm.com/business-operations/systems-engineering?lnk=hpmps_buop&lnk2=learn', + 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: 'Weather Business Solutions', - titleEnglish: 'Weather Business Solutions', - url: 'https://www.ibm.com/weather/industries?lnk=hpmps_buop&lnk2=learn', + 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: 'View all Business operations products', - titleEnglish: 'View all Business operations products', - url: 'https://www.ibm.com/us-en/products/category/business/business-operations?lnk=hpmps_buop&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/5e600deb01c4ebd3/original/megamenu-pictogram-business-operations.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Cloud computing', - titleEnglish: 'Cloud computing', - url: 'https://www.ibm.com/cloud?lnk=hpmps_bucl&lnk2=link', + title: 'DevOps', + titleEnglish: 'DevOps', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Cloud computing', - headingUrl: 'https://www.ibm.com/cloud?lnk=hpmps_bucl', - description: '', + headingTitle: 'DevOps', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Manage infrastructure, environments and deployments', quickLinks: { title: '', links: [ { - title: 'Containers', - titleEnglish: 'Containers', - url: 'https://www.ibm.com/cloud/container-service/?lnk=hpmps_bucl&lnk2=learn', - }, - { - title: 'Databases', - titleEnglish: 'Databases', - url: 'https://www.ibm.com/cloud/databases?lnk=hpmps_bucl&lnk2=learn', + 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: 'DevOps', - titleEnglish: 'DevOps', - url: 'https://www.ibm.com/cloud/devops?lnk=hpmps_bucl&lnk2=learn', + 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: 'Hybrid Cloud', - titleEnglish: 'Hybrid Cloud', - url: 'https://www.ibm.com/cloud/hybrid?lnk=hpmps_bucl&lnk2=learn', + 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: 'View all Cloud computing products', - titleEnglish: 'View all Cloud computing products', - url: 'https://www.ibm.com/us-en/products/category/technology/cloud-computing?lnk=hpmps_bucl&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/1f27aeccb7d68054/original/megamenu-pictogram-cloud-computing.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Data & Analytics', - titleEnglish: 'Data & Analytics', - url: 'https://www.ibm.com/analytics?lnk=hpmps_buda&lnk2=link', + title: 'IT Automation', + titleEnglish: 'IT Automation', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Data & Analytics', - headingUrl: 'https://www.ibm.com/analytics?lnk=hpmps_buda', - description: '', + 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: 'Data Management', - titleEnglish: 'Data Management', - url: 'https://www.ibm.com/analytics/data-management?lnk=hpmps_buda&lnk2=learn', - }, - { - title: 'Business intelligence', - titleEnglish: 'Business intelligence', - url: 'https://www.ibm.com/analytics/business-intelligence?lnk=hpmps_buda&lnk2=learn', - }, - { - title: 'Data governance', - titleEnglish: 'Data governance', - url: 'https://www.ibm.com/analytics/data-governance?lnk=hpmps_buda&lnk2=learn', + 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: 'Data science', - titleEnglish: 'Data science', - url: 'https://www.ibm.com/analytics/data-science-business-analytics?lnk=hpmps_buda&lnk2=learn', + 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: 'View all Data & Analytics products', - titleEnglish: 'View all Data & Analytics products', - url: 'https://www.ibm.com/us-en/products/category/technology/analytics?lnk=hpmps_buda&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/6d9bf0fd66e54f9a/original/megamenu-pictogram-data-analytics.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'IT infrastructure', - titleEnglish: 'IT infrastructure', - url: 'https://www.ibm.com/it-infrastructure?lnk=hpmps_buit&lnk2=link', + title: 'Middleware', + titleEnglish: 'Middleware', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'IT infrastructure', - headingUrl: - 'https://www.ibm.com/it-infrastructure?lnk=hpmps_buit', - description: '', + headingTitle: 'Middleware', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', quickLinks: { title: '', links: [ { - title: 'Data storage', - titleEnglish: 'Data storage', - url: 'https://www.ibm.com/it-infrastructure/storage?lnk=hpmps_buit&lnk2=learn', + 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: 'Enterprise servers', - titleEnglish: 'Enterprise servers', - url: 'https://www.ibm.com/it-infrastructure/servers?lnk=hpmps_buit&lnk2=learn', + title: 'MQ', + titleEnglish: 'MQ', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: 'Managed message broker', }, { - title: 'Hybrid cloud infrastructure', - titleEnglish: 'Hybrid cloud infrastructure', - url: 'https://www.ibm.com/it-infrastructure/solutions/hybrid-cloud?lnk=hpmps_buit&lnk2=learn', + 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: 'Secure infrastructure', - titleEnglish: 'Secure infrastructure', - url: 'https://www.ibm.com/it-infrastructure/solutions/security?lnk=hpmps_buit&lnk2=learn', + 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: 'Mainframes', - titleEnglish: 'Mainframes', - url: 'https://www.ibm.com/it-infrastructure/servers/mainframes?lnk=hpmps_buit&lnk2=learn', + 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: 'View all IT infrastructure products', - titleEnglish: 'View all IT infrastructure products', - url: 'https://www.ibm.com/us-en/products/category/technology/IT-infrastructure?lnk=hpmps_buit&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/18758c6b890d488e/original/megamenu-pictogram-IT-infrastructure.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Security', - titleEnglish: 'Security', - url: 'https://www.ibm.com/security?lnk=hpmps_buse&lnk2=link', + title: 'Networking', + titleEnglish: 'Networking', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Security', - headingUrl: 'https://www.ibm.com/security?lnk=hpmps_buse', - description: '', + headingTitle: 'Networking', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', quickLinks: { title: '', links: [ { - title: 'Data security', - titleEnglish: 'Data security', - url: 'https://www.ibm.com/security/data-security?lnk=hpmps_buse&lnk2=learn', + 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: 'Identity & access management', - titleEnglish: 'Identity & access management', - url: 'https://www.ibm.com/security/identity-access-management?lnk=hpmps_buse&lnk2=learn', + 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: 'Security information & event management', - titleEnglish: 'Security information & event management', - url: 'https://www.ibm.com/security/security-intelligence?lnk=hpmps_buse&lnk2=learn', + 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: 'Security orchestration, automation & response', - titleEnglish: - 'Security orchestration, automation & response', - url: 'https://www.ibm.com/security/intelligent-orchestration?lnk=hpmps_buse', + 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: 'View all Security products', - titleEnglish: 'View all Security products', - url: 'https://www.ibm.com/us-en/products/category/technology/security?lnk=hpmps_buse&lnk2=learn?lnk=hpmps_buse&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/335f1d6485cede0/original/megamenu-pictogram-security.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Supply chain', - titleEnglish: 'Supply chain', - url: 'https://www.ibm.com/supply-chain?lnk=hpmps_busc&lnk2=link', + title: 'Operations', + titleEnglish: 'Operations', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Supply chain', - headingUrl: 'https://www.ibm.com/supply-chain?lnk=hpmps_busc', - description: '', + headingTitle: 'Operations', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', quickLinks: { title: '', links: [ { - title: 'Supply chain visibility', - titleEnglish: 'Supply chain visibility', - url: 'https://www.ibm.com/supply-chain/visibility?lnk=hpmps_busc&lnk2=learn', + 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: 'Supplier collaboration', - titleEnglish: 'Supplier collaboration', - url: 'https://www.ibm.com/supply-chain/supplier-collaboration-solutions?lnk=hpmps_busc&lnk2=learn', + 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: 'Business process improvement', - titleEnglish: 'Business process improvement', - url: 'https://www.ibm.com/supply-chain/process-improvement-solutions?lnk=hpmps_busc&lnk2=learn', + 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: 'Order management and fulfillment', - titleEnglish: 'Order management and fulfillment', - url: 'https://www.ibm.com/supply-chain/order-management-software?lnk=hpmps_busc&lnk2=learn', + 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: 'View all Supply Chain products', - titleEnglish: 'View all Supply Chain products', - url: 'https://www.ibm.com/supply-chain/products?lnk=hpmps_busc&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/53c30e47cbfc167/original/megamenu-pictogram-supply-chain.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Payment plans for Products & Solutions', - titleEnglish: 'Payment plans for Products & Solutions', - url: 'https://www.ibm.com/financing?lnk=hpmps_bufi&lnk2=link', + 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: 'View all products', - titleEnglish: 'View all products', - url: 'https://www.ibm.com/products?lnk=hpmps_buall&lnk2=link', - megaPanelViewAll: true, - }, - ], - }, - ], - }, - { - title: 'Consulting & Services', - titleEnglish: 'Consulting & Services', - url: '', - hasMenu: true, - hasMegapanel: true, - menuSections: [ - { - heading: '', - menuItems: [ - { - title: 'Business process services', - titleEnglish: 'Business process services', - url: 'https://www.ibm.com/services/process?lnk=hpmsc_bups&lnk2=link', + title: 'Storage', + titleEnglish: 'Storage', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Business process services', - headingUrl: 'https://www.ibm.com/services/process?lnk=hpmsc_bups', - description: '', + headingTitle: 'Storage', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', quickLinks: { title: '', links: [ { - title: 'Artificial intelligence services', - titleEnglish: 'Artificial intelligence services', - url: 'https://www.ibm.com/services/artificial-intelligence?lnk=hpmsc_bups&lnk2=learn', + title: 'Spectrum', + titleEnglish: 'Spectrum', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Software for backup & recovery, SDS and analytics.', }, { - title: 'Automation', - titleEnglish: 'Automation', - url: 'https://www.ibm.com/automation/services?lnk=hpmsc_bups&lnk2=learn', + title: 'FlashSystem', + titleEnglish: 'FlashSystem', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Hybrid and all flash arrays for Block (SAN) storage', }, { - title: 'Big data & data platform', - titleEnglish: 'Big data & data platform', - url: 'https://www.ibm.com/services/big-data-services?lnk=hpmsc_bups&lnk2=learn', + title: 'DS8900F', + titleEnglish: 'DS8900F', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: 'Storage for IBM Z and IBM Power Systems', }, { - title: 'Business process outsourcing', - titleEnglish: 'Business process outsourcing', - url: 'https://www.ibm.com/services/process/outsourcing?lnk=hpmsc_bups&lnk2=learn', + 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: 'Edge consulting', - titleEnglish: 'Edge consulting', - url: 'https://www.ibm.com/services/process/edge-services?lnk=hpmsc_bups&lnk2=learn', + 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: 'Finance transformation', - titleEnglish: 'Finance transformation', - url: 'https://www.ibm.com/services/process/finance?lnk=hpmsc_bups&lnk2=learn', + title: 'SAN Volume Controller', + titleEnglish: 'SAN Volume Controller', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Storage virtualization for large scale workloads', }, { - title: 'IoT consulting', - titleEnglish: 'IoT consulting', - url: 'https://www.ibm.com/services/process/iot-consulting?lnk=hpmsc_bups&lnk2=learn', + 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: 'Procurement & strategic sourcing', - titleEnglish: 'Procurement & strategic sourcing', - url: 'https://www.ibm.com/services/process/procurement?lnk=hpmsc_bups&lnk2=learn', + 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: 'Risk consulting & fraud management', - titleEnglish: 'Risk consulting & fraud management', - url: 'https://www.ibm.com/services/process/risk?lnk=hpmsc_bups&lnk2=learn', + title: 'Tape System', + titleEnglish: 'Tape System', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: 'Tape libraries, cartridges and media', }, { - title: 'Supply chain', - titleEnglish: 'Supply chain', - url: 'https://www.ibm.com/services/process/supply-chain?lnk=hpmsc_bups&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Design & business strategy', - titleEnglish: 'Design & business strategy', - url: 'https://www.ibm.com/services/ibmix/?lnk=hpmsc_budbs&lnk2=link', + title: 'Security & Identity', + titleEnglish: 'Security & Identity', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Design & business strategy', - headingUrl: 'https://www.ibm.com/services/ibmix/?lnk=hpmsc_bubs', - description: '', + headingTitle: 'Security & Identity', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', quickLinks: { title: '', links: [ { - title: 'Digital strategy', - titleEnglish: 'Digital strategy', - url: 'https://www.ibm.com/services/business/digital?lnk=hpmsc_bubs&lnk2=learn', + title: 'Trusteer', + titleEnglish: 'Trusteer', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Experience strategy', - titleEnglish: 'Experience strategy', - url: 'https://www.ibm.com/services/ibmix/experience-strategy?lnk=hpmsc_bubs&lnk2=learn', + 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: 'Marketing platforms', - titleEnglish: 'Marketing platforms', - url: 'https://www.ibm.com/services/ibmix/marketing-platforms?lnk=hpmsc_bubs&lnk2=learn', + title: 'Verify', + titleEnglish: 'Verify', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Salesforce consulting', - titleEnglish: 'Salesforce consulting', - url: 'https://www.ibm.com/services/salesforce?lnk=hpmsc_bubs&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/1b7522c50ea39ca/original/megamenu-pictogram-design-business-strategy.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Hybrid multicloud services', - titleEnglish: 'Hybrid multicloud services', - url: 'https://www.ibm.com/services/cloud?lnk=hpmsc_buhs?lnk=hpmsc_buhs', + 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: 'Hybrid multicloud services', - headingUrl: 'https://www.ibm.com/services/cloud?lnk=hpmsc_buhs', - description: '', + headingTitle: 'Automation', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', quickLinks: { title: '', links: [ { - title: 'Business continuity & resiliency', - titleEnglish: 'Business continuity & resiliency', - url: 'https://www.ibm.com/services/business-continuity?lnk=hpmsc_buhs&lnk2=learn', + title: 'Workflow', + titleEnglish: 'Workflow', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Cloud services', - titleEnglish: 'Cloud services', - url: 'https://www.ibm.com/services/cloud?lnk=hpmsc_buhs&lnk2=learn', + 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: 'Network', - titleEnglish: 'Network', - url: 'https://www.ibm.com/services/network?lnk=hpmsc_buhs&lnk2=learn', + title: 'Decision Management', + titleEnglish: 'Decision Management', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Tools for data analysis, organization and management', }, { - title: 'Workplace services', - titleEnglish: 'Workplace services', - url: 'https://www.ibm.com/services/digital-workplace?lnk=hpmsc_buhs&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/5daa9dce872913ea/original/megamenu-pictogram-hybrid-multi-cloud-services.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Talent & transformation', - titleEnglish: 'Talent & transformation', - url: 'https://www.ibm.com/talent-management?lnk=hpmsc_buta&lnk2=link', + title: 'Data & AI', + titleEnglish: 'Data & AI', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Talent & transformation', - headingUrl: - 'https://www.ibm.com/talent-management?lnk=hpmsc_buta', - description: '', + headingTitle: 'Data & AI', + headingUrl: 'https://www.ibm.com/placeholder', + description: 'Aggregate and analyze large datasets', quickLinks: { title: '', links: [ { - title: 'HR transformation', - titleEnglish: 'HR transformation', - url: 'https://www.ibm.com/services/process/talent/human-resources?lnk=hpmsc_buta&lnk2=learn', + 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: 'Talent acquisition', - titleEnglish: 'Talent acquisition', - url: 'https://www.ibm.com/talent-management/talent-acquisition?lnk=hpmsc_buta&lnk2=learn', + 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: 'Talent development', - titleEnglish: 'Talent development', - url: 'https://www.ibm.com/services/process/talent/development?lnk=hpmsc_buta&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/69e350b141e12bd5/original/megamenu-pictogram-talent-and-transformation.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Application services', - titleEnglish: 'Application services', - url: 'https://www.ibm.com/services/applications?lnk=hpmsc_buas&lnk2=link', + title: 'Hybrid Cloud', + titleEnglish: 'Hybrid Cloud', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Application services', - headingUrl: - 'https://www.ibm.com/services/applications?lnk=hpmsc_buas', - description: '', + headingTitle: 'Hybrid Cloud', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', quickLinks: { title: '', links: [ { - title: 'Application development', - titleEnglish: 'Application development', - url: 'https://www.ibm.com/services/applications/development?lnk=hpmsc_buas&lnk2=learn', + 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: 'Application Modernization', - titleEnglish: 'Application Modernization', - url: 'https://www.ibm.com/services/cloud/modernize-applications?lnk=hpmsc_buas&lnk2=learn', + 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: 'Enterprise application management', - titleEnglish: 'Enterprise application management', - url: 'https://www.ibm.com/services/cloud/enterprise-application-management?lnk=hpmsc_buas&lnk2=learn', + 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: 'Enterprise applications strategy', - titleEnglish: 'Enterprise applications strategy', - url: 'https://www.ibm.com/services/applications/enterprise?lnk=hpmsc_buas&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/2b7c180c68557dcb/original/megamenu-pictogram-application-services.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Security services', - titleEnglish: 'Security services', - url: 'https://www.ibm.com/security/services?lnk=hpmsc_buse&lnk2=link', + title: 'Infrastructure', + titleEnglish: 'Infrastructure', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Security services', - headingUrl: - 'https://www.ibm.com/security/services?lnk=hpmsc_buse', - description: '', + headingTitle: 'Infrastructure', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', quickLinks: { title: '', links: [ { - title: 'Application security', - titleEnglish: 'Application security', - url: 'https://www.ibm.com/security/services/application-security-services?lnk=hpmsc_buse&lnk2=learn', + 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 security', - titleEnglish: 'Cloud security', - url: 'https://www.ibm.com/security/services/cloud-security-services?lnk=hpmsc_buse&lnk2=learn', + 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: 'Data security', - titleEnglish: 'Data security', - url: 'https://www.ibm.com/security/services/data-security?lnk=hpmsc_buse&lnk2=learn', + title: 'IT Modernization', + titleEnglish: 'IT Modernization', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Tools for data analysis, organization and management', }, { - title: 'Identity & access management', - titleEnglish: 'Identity & access management', - url: 'https://www.ibm.com/security/services/identity-access-management?lnk=hpmsc_buse&lnk2=learn', + title: 'Data protection', + titleEnglish: 'Data protection', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Security auditing, reporting, analysis and governance', }, { - title: 'Managed security', - titleEnglish: 'Managed security', - url: 'https://www.ibm.com/security/services/managed-security-services?lnk=hpmsc_buse&lnk2=learn', + title: 'Confidential Computing', + titleEnglish: 'Confidential Computing', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Managed PostgreSQL and MongoDB for sensitive data', }, { - title: 'Security governance', - titleEnglish: 'Security governance', - url: 'https://www.ibm.com/security/services/security-governance?lnk=hpmsc_buse&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/6ecec25a8489cf82/original/megamenu-pictogram-security-services.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Services for tech support', - titleEnglish: 'Services for tech support', - url: 'https://www.ibm.com/services/technology-support?lnk=hpmsc_busv&lnk2=link', + title: 'Industry', + titleEnglish: 'Industry', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Services for tech support', - headingUrl: - 'https://www.ibm.com/services/technology-support?lnk=hpmsc_busv', - description: '', + headingTitle: 'Industry', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', quickLinks: { title: '', links: [ { - title: 'Open source', - titleEnglish: 'Open source', - url: 'https://www.ibm.com/services/technology-support/open-source?lnk=hpmsc_busv&lnk2=learn', + title: 'Aerospace', + titleEnglish: 'Aerospace', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Third party & multivendor', - titleEnglish: 'Third party & multivendor', - url: 'https://www.ibm.com/services/technology-support/multivendor-it?lnk=hpmsc_busv&lnk2=learn', + 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: 'IBM warranties and maintenance', - titleEnglish: 'IBM warranties and maintenance', - url: 'https://www.ibm.com/services/technology-support/hardware-software?lnk=hpmsc_busv&lnk2=learn', + title: 'Automotive', + titleEnglish: 'Automotive', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, - ], - }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/7056e2b83b04133e/original/megamenu-pictogram-services-for-tech-support.png', - linkTitle: '', - linkUrl: '', - }, - }, - }, - { - title: 'Payment plans for Services & Consulting', - titleEnglish: 'Payment plans for Services & Consulting', - url: 'https://www.ibm.com/financing/solutions/it-services-financing?lnk=hpmsc_bufi&lnk2=link', - }, - { - title: 'View all services', - titleEnglish: 'View all services', - url: 'https://www.ibm.com/services?lnk=hpmsc_buall&lnk2=link', - megaPanelViewAll: true, - }, - ], - }, - ], - }, - { - title: 'Learn & Support', - titleEnglish: 'Learn & Support', - url: '', - hasMenu: true, - hasMegapanel: true, - menuSections: [ - { - heading: '', - menuItems: [ - { - title: 'Support', - titleEnglish: 'Support', - url: 'https://www.ibm.com/support?lnk=hpmls_busu&lnk2=link', - megapanelContent: { - headingTitle: 'Support', - headingUrl: 'https://www.ibm.com/support?lnk=hpmls_busu', - description: '', - quickLinks: { - title: '', - links: [ { - title: 'IBM Support', - titleEnglish: 'IBM Support', - url: 'https://www.ibm.com/support?lnk=hpmls_busu&lnk2=learn', + 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: 'IBM Cloud Support', - titleEnglish: 'IBM Cloud Support', - url: 'https://www.ibm.com/cloud/support?lnk=hpmls_busu&lnk2=learn', + 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: 'IBM Developer', - titleEnglish: 'IBM Developer', - url: 'https://developer.ibm.com/?lnk=hpmls_busu&lnk2=learn', + 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: 'IBM Community', - titleEnglish: 'IBM Community', - url: 'https://community.ibm.com/community/user/home?lnk=hpmls_busu&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/5b1abed637b01b55/original/megamenu-pictogram-support.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Documentation', - titleEnglish: 'Documentation', - url: 'https://www.ibm.com/support/knowledgecenter/?lnk=hpmls_budc&lnk2=link', + title: 'Partners & Applications', + titleEnglish: 'Partners & Applications', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Documentation', - headingUrl: - 'https://www.ibm.com/support/knowledgecenter/?lnk=hpmls_budc', - description: '', + headingTitle: 'Partners & Applications', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', quickLinks: { title: '', links: [ { - title: 'All product documentation', - titleEnglish: 'All product documentation', - url: 'https://www.ibm.com/support/knowledgecenter?lnk=hpmls_budc&lnk2=learn', + title: 'SAP', + titleEnglish: 'SAP', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'For products on IBM Cloud', - titleEnglish: 'For products on IBM Cloud', - url: 'https://cloud.ibm.com/docs?lnk=hpmls_budc&lnk2=learn', + 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: 'For use cases (IBM Redbooks)', - titleEnglish: 'For use cases (IBM Redbooks)', - url: 'http://www.redbooks.ibm.com/?lnk=hpmls_budc&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/49d529fab45bb565/original/megamenu-pictogram-documentation.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Developer education', - titleEnglish: 'Developer education', - url: 'https://developer.ibm.com/?lnk=hpmls_bude&lnk2=link', + title: 'Security', + titleEnglish: 'Security', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Developer education', - headingUrl: 'https://developer.ibm.com/?lnk=hpmls_bude', - description: '', + headingTitle: 'Security', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', quickLinks: { title: '', links: [ { - title: 'Code patterns', - titleEnglish: 'Code patterns', - url: 'https://developer.ibm.com/patterns/?lnk=hpmls_bude&lnk2=learn', + 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: 'Developer community', - titleEnglish: 'Developer community', - url: 'https://developer.ibm.com/community/?lnk=hpmls_bude&lnk2=learn', + title: 'Data Security', + titleEnglish: 'Data Security', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Security auditing, reporting, analysis and governance', }, { - title: 'Developer events', - titleEnglish: 'Developer events', - url: 'https://developer.ibm.com/events/?lnk=hpmls_bude&lnk2=learn', + title: 'XDR', + titleEnglish: 'XDR', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Open Source @ IBM', - titleEnglish: 'Open Source @ IBM', - url: 'https://ibm.com/opensource?lnk=hpmls_bude&lnk2=learn', + title: 'Data Security', + titleEnglish: 'Data Security', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Security auditing, reporting, analysis and governance', }, { - title: 'Technical articles', - titleEnglish: 'Technical articles', - url: 'https://developer.ibm.com/articles?lnk=hpmls_bude&lnk2=learn', + title: 'Cloud Security', + titleEnglish: 'Cloud Security', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Managed PostgreSQL and MongoDB for sensitive data', }, { - title: 'Tutorials', - titleEnglish: 'Tutorials', - url: 'https://developer.ibm.com/tutorials/?lnk=hpmls_bude&lnk2=learn', + 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: 'Videos', - titleEnglish: 'Videos', - url: 'https://developer.ibm.com/videos?lnk=hpmls_bude&lnk2=learn', + title: 'Ransomware', + titleEnglish: 'Ransomware', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Operations management software with AI insights', }, { - title: 'View more Developer education', - titleEnglish: 'View more Developer education', - url: 'https://developer.ibm.com/?lnk=hpmls_bude&lnk2=learn', + title: 'Insider Threat', + titleEnglish: 'Insider Threat', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Management software for telco network operations', }, ], }, feature: { heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/1e651d0f7b539774/original/megamenu-pictogram-developer-education.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Training', - titleEnglish: 'Training', - url: 'https://www.ibm.com/training/?lnk=hpmls_butr&lnk2=link', + title: 'Supply Chain', + titleEnglish: 'Supply Chain', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Training', - headingUrl: 'https://www.ibm.com/training/?lnk=hpmls_butr', - description: '', + headingTitle: 'Supply Chain', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', quickLinks: { title: '', links: [ { - title: 'Courses', - titleEnglish: 'Courses', - url: 'https://www.ibm.com/training/search?q=course&lnk=hpmls_butr&lnk2=learn', + title: 'Visibility', + titleEnglish: 'Visibility', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Learning journeys', - titleEnglish: 'Learning journeys', - url: 'https://www.ibm.com/training/journeys?lnk=hpmls_butr&lnk2=learn', + title: 'EDI', + titleEnglish: 'EDI', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Professional certifications', - titleEnglish: 'Professional certifications', - url: 'https://www.ibm.com/certify?lnk=hpmls_butr&lnk2=learn', + title: 'Blockchain', + titleEnglish: 'Blockchain', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Digital learning subscriptions', - titleEnglish: 'Digital learning subscriptions', - url: 'https://www.ibm.com/training/subscriptions?lnk=hpmls_butr&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/5540e5627aeb2568/original/megamenu-pictogram-training.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, { - title: 'Resources', - titleEnglish: 'Resources', - url: 'https://www.ibm.com/blogs/?lnk=hpmls_bure&lnk2=link', + title: 'Sustainability', + titleEnglish: 'Sustainability', + url: 'https://www.ibm.com/placeholder', + highlighted: true, megapanelContent: { - headingTitle: 'Resources', - headingUrl: 'https://www.ibm.com/blogs/?lnk=hpmls_bure', - description: '', + headingTitle: 'Sustainability', + headingUrl: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', quickLinks: { title: '', links: [ { - title: 'Blogs', - titleEnglish: 'Blogs', - url: 'https://www.ibm.com/blogs/?lnk=hpmls_bure&lnk2=learn', + title: 'Asset Management', + titleEnglish: 'Asset Management', + highlightedLink: false, + url: 'https://www.ibm.com/placeholder', + description: + 'Operations management software with AI insights', }, { - title: 'Case studies', - titleEnglish: 'Case studies', - url: 'https://www.ibm.com/case-studies?lnk=hpmls_bure&lnk2=learn', + 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: 'Events', - titleEnglish: 'Events', - url: 'http://www.ibm.com/events?lnk=hpmls_bure&lnk2=learn', + 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: 'IBM Institute for Business Value', - titleEnglish: 'IBM Institute for Business Value', - url: 'https://www.ibm.com/thought-leadership/institute-business-value?lnk=hpmls_bure&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/164ef3660bad78a8/original/megamenu-pictogram-resources.png', + imageUrl: '', linkTitle: '', linkUrl: '', }, }, }, + ], + }, + ], + }, + { + title: 'Consulting', + titleEnglish: 'Consulting', + url: '', + hasMenu: true, + hasMegapanel: true, + megamenuLayout: 'tab', + menuSections: [ + { + heading: '', + menuItems: [ { - title: 'What is...', - titleEnglish: 'What is...', - url: 'https://www.ibm.com/cloud/learn?lnk=hpmls_buwi&lnk2=link', + title: 'Overview', + titleEnglish: 'Overview', + url: 'https://www.ibm.com/consulting?lnk=hpmco&lnk2=link', megapanelContent: { - headingTitle: 'What is...', - headingUrl: 'https://www.ibm.com/cloud/learn?lnk=hpmls_buwi', - description: '', + 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: 'Artificial intelligence', - titleEnglish: 'Artificial intelligence', - url: 'https://www.ibm.com/cloud/learn/artificial-intelligence?lnk=hpmls_buwi&lnk2=learn', + title: 'IBM iX', + titleEnglish: 'IBM iX', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Automation', - titleEnglish: 'Automation', - url: 'https://www.ibm.com/topics/automation?lnk=hpmls_buwi&lnk2=learn', + title: 'Garage', + titleEnglish: 'Garage', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Blockchain', - titleEnglish: 'Blockchain', - url: 'https://www.ibm.com/blockchain/what-is-blockchain?lnk=hpmls_buwi&lnk2=learn', + title: 'X-Force', + titleEnglish: 'X-Force', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Business intelligence', - titleEnglish: 'Business intelligence', - url: 'https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi&lnk2=learn', + title: 'TSS', + titleEnglish: 'TSS', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Cloud computing', - titleEnglish: 'Cloud computing', - url: 'https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi&lnk2=learn', + title: 'Lab Services', + titleEnglish: 'Lab Services', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Cybersecurity', - titleEnglish: 'Cybersecurity', - url: 'https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi&lnk2=learn', + title: 'Investments', + titleEnglish: 'Investments', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'DevOps', - titleEnglish: 'DevOps', - url: 'https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi&lnk2=learn', + 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/cloud/learn/hybrid-cloud?lnk=hpmls_buwi', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Kubernetes', - titleEnglish: 'Kubernetes', - url: 'https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi&lnk2=learn', + title: 'Cloud Migration', + titleEnglish: 'Cloud Migration', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', }, { - title: 'Quantum computing', - titleEnglish: 'Quantum computing', - url: 'https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing/?lnk=hpmls_buwi&lnk2=learn', + title: 'Multicloud', + titleEnglish: 'Multicloud', + 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/topics/supply-chain-management?lnk=hpmls_buwi&lnk2=learn', + 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: - 'https://1.dam.s81c.com/m/581adf40f2b008ec/original/megamenu-pictogram-what-is-_.png', + 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[] = [ + { + title: 'Faceted Megamenu', + titleEnglish: 'Faceted Megamenu', + url: '', + submenu: { + sections: [ + { + heading: { + title: 'All Descriptions', + titleEnglish: 'All Descriptions', + url: 'https://www.ibm.com/placeholder', + description: 'Descriptions for each heading and link.', + }, + groups: [ + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + links: [ + { + title: 'IBM Cloud Pak for Data', + titleEnglish: 'IBM Cloud Pak for Data', + 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', + 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', + url: 'https://www.ibm.com/placeholder', + description: + 'Operations management software with AI insights', + }, + ], + }, + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + links: [ + { + title: 'IBM Cloud Pak for Integration', + titleEnglish: 'IBM Cloud Pak for Integration', + 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', + url: 'https://www.ibm.com/placeholder', + description: + 'Management software for telco network operations', + }, + { + title: 'IBM Cloud', + titleEnglish: 'IBM Cloud', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', + }, + { + title: 'IBM Z', + titleEnglish: 'IBM Z', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', + }, + ], + }, + ], + viewAll: { + title: 'Demo Tab View All', + titleEnglish: 'Demo Tab View All', + url: 'https://www.example.com', + }, + }, + { + heading: { + title: 'No Heading 1 Description', + titleEnglish: 'No Heading 1 Description', + url: 'https://www.ibm.com/placeholder', + }, + groups: [ + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + links: [ + { + title: 'IBM Cloud Pak for Data', + titleEnglish: 'IBM Cloud Pak for Data', + url: 'https://www.ibm.com/placeholder', + description: + 'Tools for data analysis, organization and management', + }, + { + title: 'Watson Discovery', + titleEnglish: 'Watson Discovery', + url: 'https://www.ibm.com/placeholder', + description: + 'Search and analytics engine that adapts to custom domains', + }, + { + title: 'Spech to Text', + titleEnglish: 'Spech to Text', + url: 'https://www.ibm.com/placeholder', + description: + 'API for real-time speech recognition and transcription', + }, + { + title: 'Text to Speech', + titleEnglish: 'Text to Speech', + 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', + 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', + 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', + url: 'https://www.ibm.com/placeholder', + description: 'API for text analysis and metadata extraction', + }, + { + title: 'Watson Studio', + titleEnglish: 'Watson Studio', + 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', + url: 'https://www.ibm.com/placeholder', + description: 'SaaS for AI data management', + }, + { + title: 'Watson Assistant', + titleEnglish: 'Watson Assistant', + url: 'https://www.ibm.com/placeholder', + description: + 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', + }, + ], + }, + ], + }, + { + heading: { + title: 'No Heading 2 Descriptions', + titleEnglish: 'No Heading 2 Descriptions', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + groups: [ + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + }, + links: [ + { + title: 'IBM Cloud Pak for Data', + titleEnglish: 'IBM Cloud Pak for Data', + url: 'https://www.ibm.com/placeholder', + description: + 'Tools for data analysis, organization and management', + }, + { + title: 'Business Analytics Enterprise', + titleEnglish: 'Business Analytics Enterprise', + url: 'https://www.ibm.com/placeholder', + description: + 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', + }, + { + title: 'Cognos', + titleEnglish: 'Cognos', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', + }, + { + title: 'SPSS', + titleEnglish: 'SPSS', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', + }, + { + title: 'cplex', + titleEnglish: 'cplex', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', + }, + { + title: 'Netezza', + titleEnglish: 'Netezza', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', + }, + { + title: 'Watson Studio', + titleEnglish: 'Watson Studio', + url: 'https://www.ibm.com/placeholder', + description: 'IDE to build, run and manage AI models', + }, + { + title: 'Planning Analytics', + titleEnglish: 'Planning Analytics', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', + }, + { + title: 'Watson Discovery', + titleEnglish: 'Watson Discovery', + url: 'https://www.ibm.com/placeholder', + description: + 'Search and analytics engine that adapts to custom domains', + }, + ], + }, + ], + }, + { + heading: { + title: 'No Heading Descriptions', + titleEnglish: 'No Heading Descriptions', + url: 'https://www.ibm.com/placeholder', + }, + groups: [ + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + }, + links: [ + { + title: 'IBM Cloud Pak for Data', + titleEnglish: 'IBM Cloud Pak for Data', + url: 'https://www.ibm.com/placeholder', + description: + 'Tools for data analysis, organization and management', + }, + { + title: 'IBM Informix on Cloud', + titleEnglish: 'IBM Informix on Cloud', + url: 'https://www.ibm.com/placeholder', + description: + 'Managed DB for time series, spatial, NoSQL and SQL data', + }, + { + title: 'IBM Cloudant', + titleEnglish: 'IBM Cloudant', + url: 'https://www.ibm.com/placeholder', + description: + 'Managed PCI-compliant JSON document store on CouchDB', + }, + { + title: 'IBM Cloud Database', + titleEnglish: 'IBM Cloud Database', + 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', + url: 'https://www.ibm.com/placeholder', + description: + 'Managed PostgreSQL and MongoDB for sensitive data', + }, + { + title: 'IMS', + titleEnglish: 'IMS', + url: 'https://www.ibm.com/placeholder', + description: + 'Tools for data analysis, organization and management', + }, + { + title: 'Db2', + titleEnglish: 'Db2', + url: 'https://www.ibm.com/placeholder', + description: + 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac', + }, + ], + }, + ], + }, + { + heading: { + title: 'No Link Descriptions', + titleEnglish: 'Compute & Servers', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + groups: [ + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + links: [ + { + title: 'IBM Z', + titleEnglish: 'IBM Z', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Power', + titleEnglish: 'Power', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Spectrum Computing', + titleEnglish: 'Spectrum Computing', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'LinuxONE', + titleEnglish: 'LinuxONE', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Cloud Bare Metal Servers', + titleEnglish: 'IBM Cloud Bare Metal Servers', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Cloud Virtual Servers', + titleEnglish: 'IBM Cloud Virtual Servers', + url: 'https://www.ibm.com/placeholder', + }, + ], + }, + ], + }, + { + heading: { + title: 'Only Heading 1 Description', + titleEnglish: 'Only Heading 1 Description', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + groups: [ + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + }, + links: [ + { + title: 'IBM Cloud Pak for AIOps', + titleEnglish: 'IBM Cloud Pak for AIOps', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Cloud Continuous Delivery', + titleEnglish: 'IBM Cloud Continuous Delivery', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Cloud Schematics', + titleEnglish: 'IBM Cloud Schematics', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'UrbanCode', + titleEnglish: 'UrbanCode', + url: 'https://www.ibm.com/placeholder', + }, + ], + }, + ], + }, + { + heading: { + title: 'Only Heading 2 Descriptions', + titleEnglish: 'Only Heading 2 Descriptions', + url: 'https://www.ibm.com/placeholder', + }, + groups: [ + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + links: [ + { + title: 'IBM Cloud Pak for AIOps', + titleEnglish: 'IBM Cloud Pak for AIOps', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Turbonomic', + titleEnglish: 'IBM Turbonomic', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Instana', + titleEnglish: 'IBM Instana', + url: 'https://www.ibm.com/placeholder', + }, + ], + }, + ], + }, + { + heading: { + title: 'No Descriptions', + titleEnglish: 'No Descriptions', + url: 'https://www.ibm.com/placeholder', + }, + groups: [ + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + }, + links: [ + { + title: 'IBM Cloud Pak for Business Automation', + titleEnglish: 'IBM Cloud Pak for Business Automation', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Watson Orchestrate', + titleEnglish: 'Watson Orchestrate', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM RPA', + titleEnglish: 'IBM RPA', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'BlueWorks Live', + titleEnglish: 'BlueWorks Live', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Operational Decision Manager', + titleEnglish: 'IBM Operational Decision Manager', + url: 'https://www.ibm.com/placeholder', + }, + ], + }, + ], + }, + { + heading: { + title: 'No Heading 2s', + titleEnglish: 'No Heading 2s', + url: 'https://www.ibm.com/placeholder', + description: 'Descriptions for each heading and link.', + }, + groups: [ + { + links: [ + { + title: 'IBM Cloud Pak for Data', + titleEnglish: 'IBM Cloud Pak for Data', + 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', + 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', + url: 'https://www.ibm.com/placeholder', + description: + 'Operations management software with AI insights', + }, + ], + }, + { + links: [ + { + title: 'IBM Cloud Pak for Integration', + titleEnglish: 'IBM Cloud Pak for Integration', + 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', + url: 'https://www.ibm.com/placeholder', + description: + 'Management software for telco network operations', + }, + { + title: 'IBM Cloud', + titleEnglish: 'IBM Cloud', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', + }, + { + title: 'IBM Z', + titleEnglish: 'IBM Z', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', + }, + ], + }, + ], + }, + { + heading: { + title: 'Multiple Groups in Column', + titleEnglish: 'Multiple Groups in Column', + url: 'https://www.ibm.com/placeholder', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + groups: [ + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + }, + links: [ + { + title: 'IBM Cloud Pak for Data', + titleEnglish: 'IBM Cloud Pak for Data', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Cloud Pak for Security', + titleEnglish: 'IBM Cloud Pak for Security', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Cloud Pak for Business Automation', + titleEnglish: 'IBM Cloud Pak for Business Automation', + url: 'https://www.ibm.com/placeholder', + }, + ], + }, + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + }, + links: [ + { + title: 'IBM Cloud Pak for Integration', + titleEnglish: 'IBM Cloud Pak for Integration', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Cloud Pak for Network Automation', + titleEnglish: 'IBM Cloud Pak for Network Automation', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Cloud', + titleEnglish: 'IBM Cloud', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Z', + titleEnglish: 'IBM Z', + url: 'https://www.ibm.com/placeholder', + }, + ], + }, + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + }, + links: [ + { + title: 'IBM Cloud Pak for Data', + titleEnglish: 'IBM Cloud Pak for Data', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Watson Discovery', + titleEnglish: 'Watson Discovery', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Spech to Text', + titleEnglish: 'Spech to Text', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Text to Speech', + titleEnglish: 'Text to Speech', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Cloud Pak for Data', + titleEnglish: 'IBM Cloud Pak for Data', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Cloud Pak for AIOps', + titleEnglish: 'IBM Cloud Pak for AIOps', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Watson Natural Language Understanding', + titleEnglish: 'IBM Watson Natural Language Understanding', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Watson Studio', + titleEnglish: 'Watson Studio', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'IBM Watson Knowledge Catalog', + titleEnglish: 'IBM Watson Knowledge Catalog', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Watson Assistant', + titleEnglish: 'Watson Assistant', + url: 'https://www.ibm.com/placeholder', + }, + ], + }, + { + heading: { + title: 'Heading Level 2', + titleEnglish: 'Heading Level 2', + url: '', + }, + links: [ + { + title: 'IBM Cloud Pak for Data', + titleEnglish: 'IBM Cloud Pak for Data', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Business Analytics Enterprise', + titleEnglish: 'Business Analytics Enterprise', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Cognos', + titleEnglish: 'Cognos', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'SPSS', + titleEnglish: 'SPSS', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'cplex', + titleEnglish: 'cplex', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Netezza', + titleEnglish: 'Netezza', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Watson Studio', + titleEnglish: 'Watson Studio', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Planning Analytics', + titleEnglish: 'Planning Analytics', + url: 'https://www.ibm.com/placeholder', + }, + { + title: 'Watson Discovery', + titleEnglish: 'Watson Discovery', + url: 'https://www.ibm.com/placeholder', + }, + ], + }, + ], + }, + ], + viewAll: { + title: 'View all items', + titleEnglish: 'View all items', + url: 'https://www.ibm.com/products?lnk=hpmps_buall', + }, + }, + }, + { + title: 'Simple Megamenu', + titleEnglish: 'Simple Megamenu', + url: '', + submenu: { + sections: [ + { + groups: [ + { + heading: { + title: 'Partner with us', + titleEnglish: 'Partners', + url: 'https://www.ibm.com/partners?lnk=hpmex_bupa', + }, + 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', + }, + ], + }, + { + heading: { + title: 'IBM Research', + titleEnglish: 'IBM Research', + url: 'https://research.ibm.com?lnk=hpmex_bure', + }, + 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', + }, + ], + }, + { + heading: { + title: 'About IBM', + titleEnglish: 'About IBM', + url: 'https://www.ibm.com/about?lnk=hpmex_buab', + }, + 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', + }, + ], + }, + { + heading: { + title: 'COVID-19', + titleEnglish: 'COVID-19', + url: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco', + }, + 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', + }, + ], + }, + ], + }, + ], + viewAll: { + title: 'View all items', + titleEnglish: 'View all items', + url: 'https://www.ibm.com/products?lnk=hpmps_buall', + }, + }, + }, + { + title: 'Simple Megamenu (Heading 1)', + titleEnglish: 'Simple Megamenu (Heading 1)', + url: '', + submenu: { + sections: [ + { + heading: { + title: 'Heading 1', + titleEnglish: 'Heading 1', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + groups: [ + { + heading: { + title: 'Partner with us', + titleEnglish: 'Partners', + url: 'https://www.ibm.com/partners?lnk=hpmex_bupa', + }, + 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', + }, + ], + }, + { + heading: { + title: 'IBM Research', + titleEnglish: 'IBM Research', + url: 'https://research.ibm.com?lnk=hpmex_bure', + }, + 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', + }, + ], + }, + { + heading: { + title: 'About IBM', + titleEnglish: 'About IBM', + url: 'https://www.ibm.com/about?lnk=hpmex_buab', + }, + 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', + }, + ], + }, + { + heading: { + title: 'COVID-19', + titleEnglish: 'COVID-19', + url: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco', + }, + 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', + }, + ], + }, + ], + }, + ], + }, + }, + { + title: 'Simple Megamenu (Heading Descriptions)', + titleEnglish: 'Simple Megamenu (Heading Descriptions)', + url: '', + submenu: { + sections: [ + { + groups: [ + { + heading: { + title: 'Partner with us', + titleEnglish: 'Partners', + url: 'https://www.ibm.com/partners?lnk=hpmex_bupa', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + 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', + }, + ], + }, + { + heading: { + title: 'IBM Research', + titleEnglish: 'IBM Research', + url: 'https://research.ibm.com?lnk=hpmex_bure', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + 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', + }, + ], + }, + { + heading: { + title: 'About IBM', + titleEnglish: 'About IBM', + url: 'https://www.ibm.com/about?lnk=hpmex_buab', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + 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', + }, + ], + }, + { + heading: { + title: 'COVID-19', + titleEnglish: 'COVID-19', + url: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + 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', + }, + ], + }, + ], + }, + ], + }, + }, + { + title: 'Simple Megamenu (Link Descriptions)', + titleEnglish: 'Simple Megamenu (Link Descriptions)', + url: '', + submenu: { + sections: [ + { + groups: [ + { + heading: { + title: 'Partner with us', + titleEnglish: 'Partners', + url: 'https://www.ibm.com/partners?lnk=hpmex_bupa', + }, + links: [ + { + title: 'PartnerWorld', + titleEnglish: 'Partner with us — PartnerWorld', + url: 'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Our strategic partnerships', + titleEnglish: 'Our strategic partnerships', + url: 'https://www.ibm.com/alliances?lnk=hpmex_bupa', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Flexible payment plans', + titleEnglish: 'Flexible payment plans', + url: 'https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + ], + }, + { + heading: { + title: 'IBM Research', + titleEnglish: 'IBM Research', + url: 'https://research.ibm.com?lnk=hpmex_bure', + }, + links: [ + { + title: 'Blog', + titleEnglish: 'Blog', + url: 'https://research.ibm.com/blog?lnk=hpmex_bure', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Publications', + titleEnglish: 'Publications', + url: 'https://research.ibm.com/publications?lnk=hpmex_bure', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Teams', + titleEnglish: 'Teams', + url: 'https://research.ibm.com/teams?lnk=hpmex_bure', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Collaborate with us', + titleEnglish: 'Collaborate with us', + url: 'https://research.ibm.com/collaborate?lnk=hpmex_bure', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + ], + }, + { + heading: { + title: 'About IBM', + titleEnglish: 'About IBM', + url: 'https://www.ibm.com/about?lnk=hpmex_buab', + }, + links: [ + { + title: 'Annual report', + titleEnglish: 'Annual report', + url: 'https://www.ibm.com/annualreport/?lnk=hpmex_buab', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Career opportunities', + titleEnglish: 'Career opportunities', + url: 'https://www.ibm.com/employment/?lnk=hpmex_buab', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Corporate social responsibility', + titleEnglish: 'Corporate social responsibility', + url: 'https://www.ibm.org?lnk=hpmex_buab', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Diversity & inclusion', + titleEnglish: 'Diversity & inclusion', + url: 'https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Industry analyst reports', + titleEnglish: 'Industry analyst reports', + url: 'https://www.ibm.com/reports/analyst/?lnk=hpmex_buab', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Investor relations', + titleEnglish: 'Investor relations', + url: 'https://www.ibm.com/investor/?lnk=hpmex_buab', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Licensing & compliance', + titleEnglish: 'Licensing & compliance', + url: 'https://www.ibm.com/about/software-licensing/?lnk=hpmex_buab', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'News & announcements', + titleEnglish: 'News & announcements', + url: 'https://newsroom.ibm.com?lnk=hpmex_buab', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + ], + }, + { + heading: { + title: 'COVID-19', + titleEnglish: 'COVID-19', + url: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco', + }, + links: [ + { + title: 'Business solutions', + titleEnglish: 'Business solutions', + url: 'https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + { + title: 'Action guide', + titleEnglish: 'Action guide', + url: 'https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + ], + }, + ], + }, + ], + }, }, { - title: 'Explore more', - titleEnglish: 'Explore more', + title: 'Simple Megamenu (Featured)', + titleEnglish: 'Simple Megamenu (Featured)', url: '', - hasMenu: true, - hasMegapanel: true, - menuSections: [ - { - heading: '', - menuItems: [ - { - title: 'Partners', - titleEnglish: 'Partners', - url: 'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa&lnk2=link', - megapanelContent: { - headingTitle: 'Partners', - headingUrl: - 'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Partner with us (PartnerWorld)', - titleEnglish: 'Partner with us (PartnerWorld)', - url: 'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa&lnk2=learn', - }, - { - title: 'Our strategic partnerships', - titleEnglish: 'Our strategic partnerships', - url: 'https://www.ibm.com/alliances?lnk=hpmex_bupa&lnk2=learn', - }, - { - title: 'Payment plans for IBM Partners', - titleEnglish: 'Payment plans for IBM Partners', - url: 'https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa&lnk2=learn', - }, - ], - }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/4075a8633a1137d/original/megamenu-pictogram-partners.png', - linkTitle: '', - linkUrl: '', - }, + submenu: { + highlights: [ + { + heading: { + title: 'Training', + titleEnglish: 'Training', + url: 'https://www.ibm.com/training/?lnk=hpmls_butr', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + 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', + }, + ], + }, + { + heading: { + title: 'Community', + titleEnglish: 'Community', + url: '', + description: '', + }, + 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', }, + ], + }, + { + heading: { + title: 'Resources', + titleEnglish: 'Resources', + url: 'https://www.ibm.com/blogs/?lnk=hpmls_bure', + description: '', }, - { - title: 'IBM Research', - titleEnglish: 'IBM Research', - url: 'https://www.research.ibm.com/?lnk=hpmex_bure&lnk2=link', - megapanelContent: { - headingTitle: 'IBM Research', - headingUrl: 'https://www.research.ibm.com/?lnk=hpmex_bure', - description: '', - quickLinks: { - title: '', - links: [ - { - title: 'Research areas', - titleEnglish: 'Research areas', - url: 'https://www.research.ibm.com/?lnk=hpmex_bure&lnk2=learn', - }, - { - title: 'Researcher directory', - titleEnglish: 'Researcher directory', - url: 'https://researcher.watson.ibm.com/researcher/people.php?lnk=hpmex_bure&lnk2=learn', - }, - { - title: 'Patents', - titleEnglish: 'Patents', - url: 'https://www.research.ibm.com/patents/?lnk=hpmex_bure&lnk2=learn', - }, - { - title: 'Work with us', - titleEnglish: 'Work with us', - url: 'https://www.research.ibm.com/frontiers/?lnk=hpmex_bure&lnk2=learn', - }, - ], + 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', + }, + ], + }, + ], + sections: [ + { + heading: { + title: 'Heading', + titleEnglish: 'Heading', + url: 'https://www.example.com', + description: + 'Description text lorem ipsum dolor sit amet commondo ligua eaget', + }, + groups: [ + { + heading: { + title: 'What is...', + titleEnglish: 'What is...', + url: 'https://www.ibm.com/cloud/learn?lnk=hpmls_buwi', }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/5e05b0b234bc3846/original/megamenu-pictogram-ibm-research.png', - linkTitle: '', - linkUrl: '', + 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', + }, + ], + }, + { + heading: { + title: 'Developer education', + titleEnglish: 'Developer education', + url: 'https://developer.ibm.com/?lnk=hpmls_bude', + description: '', }, + 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', + }, + ], }, - }, - { - 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&lnk2=learn', - }, - { - title: 'Career opportunities', - titleEnglish: 'Career opportunities', - url: 'https://www.ibm.com/employment/?lnk=hpmex_buab&lnk2=learn', - }, - { - title: 'Corporate social responsibility', - titleEnglish: 'Corporate social responsibility', - url: 'https://www.IBM.org?lnk=hpmex_buab&lnk2=learn', - }, - { - title: 'Diversity & inclusion', - titleEnglish: 'Diversity & inclusion', - url: 'https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab&lnk2=learn', - }, - { - title: 'Investor relations', - titleEnglish: 'Investor relations', - url: 'https://www.ibm.com/investor/?lnk=hpmex_buab&lnk2=learn', - }, - { - title: 'News & announcements', - titleEnglish: 'News & announcements', - url: 'http://newsroom.ibm.com?lnk=hpmex_buab&lnk2=learn', - }, - { - title: 'Thought leadership', - titleEnglish: 'Thought leadership', - url: 'https://www.ibm.com/thought-leadership/?lnk=hpmex_buab&lnk2=learn', - }, - { - title: 'Security, privacy & trust', - titleEnglish: 'Security, privacy & trust', - url: 'https://www.ibm.com/trust?lnk=hpmex_buab&lnk2=learn', - }, - ], + { + heading: { + title: 'Documentation', + titleEnglish: 'Documentation', + url: 'https://www.ibm.com/docs/en?lnk=hpmls_budc', + description: '', }, - feature: { - heading: '', - imageUrl: - 'https://1.dam.s81c.com/m/220eb8ea8345a4d6/original/megamenu-pictogram-about-ibm.png', - linkTitle: '', - linkUrl: '', + 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', + }, + ], + }, + { + heading: { + title: 'Support', + titleEnglish: 'Support', + url: 'https://www.ibm.com/mysupport?lnk=hpmls_busu', + description: '', }, + 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', + }, + ], }, - }, - { - title: 'COVID-19', - titleEnglish: 'COVID-19', - url: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco&lnk2=link', - 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&lnk2=learn', - }, - { - title: 'Action guide', - titleEnglish: 'Action guide', - url: 'https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco&lnk2=learn', - }, - { - title: 'News', - titleEnglish: 'News', - url: 'https://newsroom.ibm.com/COVID-19?lnk=hpmex_buco&lnk2=learn', - }, - ], + { + heading: { + title: 'Cloud platform support', + titleEnglish: 'Cloud platform support', + url: 'https://www.ibm.com/cloud/support?lnk=hpmls_bucl', }, - feature: { - heading: '', - imageUrl: '', - linkTitle: '', - linkUrl: '', + }, + { + heading: { + title: 'Newsletter subscriptions', + titleEnglish: 'Newsletter subscriptions', + url: 'https://www.ibm.com/subscribe/', }, }, - }, - ], + ], + }, + ], + viewAll: { + title: 'View all', + titleEnglish: 'View all', + url: 'https://www.example.com', + }, + }, + }, + { + title: 'Basic Submenu', + titleEnglish: 'Simple Submenu', + url: '', + submenu: [ + { + title: 'Subitem 1', + titleEnglish: 'Subitem 1', + url: 'https://www.example.com', + }, + { + title: 'Subitem 2', + titleEnglish: 'Subitem 2', + url: 'https://www.example.com', }, ], }, + { + title: 'Basic Link', + titleEnglish: 'Demo Simple', + url: 'https://www.example.com', + }, ]; /** @@ -2571,5 +6083,11 @@ const customLinks: MastheadLink[] = [ /* eslint-enable max-len */ -export { mastheadLinks, customLinks, l1Data, logoData, mastheadL1Data }; +export { + mastheadLinks, + customLinks, + logoData, + mastheadL1Data, + mastheadLinksV2, +}; export default mastheadLinks; 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 e35c6a5ff35..90f647f3500 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,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * 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. 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 84f93706601..5fdc08b7c23 100644 --- a/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts +++ b/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts @@ -8,16 +8,19 @@ */ import { html } from 'lit'; -import { select } from '@storybook/addon-knobs'; +import { select, boolean } from '@storybook/addon-knobs'; import on from 'carbon-components/es/globals/js/misc/on.js'; -import inPercy from '@percy-io/in-percy'; +import ifNonEmpty from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-empty.js'; import textNullable from '../../../../.storybook/knob-text-nullable'; import c4dLeftNav from '../left-nav'; import '../masthead-container'; import styles from './masthead.stories.scss'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { mastheadLinks as links, mastheadL1Data, logoData } from './links'; -import { UNAUTHENTICATED_STATUS } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI'; +import { mastheadLinksV2 as links, mastheadL1Data, logoData } from './links'; +import { + UNAUTHENTICATED_STATUS, + MASTHEAD_AUTH_METHOD, +} from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI'; import { authenticatedProfileItems, unauthenticatedProfileItems, @@ -59,6 +62,12 @@ const scopeParameters = [ }, ]; +const dataEndpoints = { + cloud: '/common/carbon-for-ibm-dotcom/translations/cloud-masthead', + v2: '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2', + 'v2.1': '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2.1', +}; + async function customTypeaheadApiFunction(searchVal) { return fetch( `https://ibm.com/docs/api/v1/suggest?query=${searchVal}&lang=undefined&categories=&limit=6` @@ -81,11 +90,13 @@ export const Default = (args) => { customProfileLogin, hasProfile, hasSearch, + hasContact, selectedMenuItem, searchPlaceholder, userStatus, + authMethod, + useMock, } = args?.MastheadComposite ?? {}; - const { useMock } = args?.Other ?? {}; return html` + ${useMock + ? html` + + ` + : html` + `} `; }; export const WithCustomTypeahead = (args) => { - const { useMock } = args?.Other ?? {}; + const { useMock } = args?.MastheadComposite ?? {}; document.documentElement.addEventListener( 'c4d-search-with-typeahead-input', @@ -138,10 +200,18 @@ export const WithCustomTypeahead = (args) => { ${useMock ? html` ` : html` `} `; @@ -168,8 +238,7 @@ WithCustomTypeahead.story = { }; export const searchOpenOnload = (args) => { - const { searchPlaceholder } = args?.MastheadComposite ?? {}; - const { useMock } = args?.Other ?? {}; + const { searchPlaceholder, useMock } = args?.MastheadComposite ?? {}; return html`