diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss index dc652a6ad9e..fb335a2ac42 100644 --- a/packages/styles/scss/components/feature-card/_feature-card.scss +++ b/packages/styles/scss/components/feature-card/_feature-card.scss @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -588,7 +588,7 @@ $feature-flags: ( } &[size='large'] { - .dds-ce--card__footer ::slotted(svg[slot='icon']) { + .#{$c4d-prefix}-ce--card__footer ::slotted(svg[slot='icon']) { @include breakpoint(max) { block-size: $spacing-10; inline-size: $spacing-10; diff --git a/packages/web-components/src/components/back-to-top/__stories__/data/content.ts b/packages/web-components/src/components/back-to-top/__stories__/data/content.ts index d5b696aff46..d4ed6f5d8f6 100644 --- a/packages/web-components/src/components/back-to-top/__stories__/data/content.ts +++ b/packages/web-components/src/components/back-to-top/__stories__/data/content.ts @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -273,9 +273,9 @@ export const StoryContent = () => Linux on IBM mainframes lets you transform your application and data portfolio with data privacy, security, and cyber resiliency. - + ${ArrowRight20({ slot: 'icon' })} - + Linux OS on LinuxONE @@ -284,9 +284,9 @@ export const StoryContent = () => innovative data privacy, security and cyber resiliency capabilities, plus minimal downtime.

- + ${ArrowRight20({ slot: 'icon' })} - + Linux OS on Power Systems @@ -295,9 +295,9 @@ export const StoryContent = () => cost-effectively on an open, scalable infrastructure with built-in acceleration.

- + ${ArrowRight20({ slot: 'icon' })} - + diff --git a/packages/web-components/src/components/button/__stories__/README.stories.react.mdx b/packages/web-components/src/components/button/__stories__/README.stories.react.mdx index ee7adb94004..c34edf2f890 100644 --- a/packages/web-components/src/components/button/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/button/__stories__/README.stories.react.mdx @@ -1,4 +1,9 @@ -import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks'; +import { + Preview, + Props, + Description, + Story, +} from '@storybook/addon-docs/blocks'; import contributing from '../../../../../../docs/contributing-license.md'; import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/button/button'; @@ -20,37 +25,39 @@ Here's a quick example to get you started. import DDSButton from '@carbon/ibmdotcom-web-components/es/components-react/button/index.js'; function App() { - return ( - Example - ); + return Example; } ``` ### CTA features -The `cta-type` attribute allows every type of CTA and icon available in the Carbon for IBM.com library. -The default CTA style is `local`, which provides a basic link and arrow icon. - -In order to use the desired type, modify the `cta-type` attribute to one of the following: - -* local -* jump -* external -* new tab -* download -* video -* pdf -* blog -* email -* schedule -* chat -* call - -Notes: -* When using `video`, you need to pass the video ID as the `href` attribute. -* The Button component will need to be wrapped within a `DDSVideoCTAContainer` components for videos to play. -* Custom icons can replace the built-in ones within `DDSCardFooter`, they only need to be assigned to the `icon` slot. - +The `cta-type` attribute allows every type of CTA and icon available in the +Carbon for IBM.com library. The default CTA style is `local`, which provides a +basic link and arrow icon. + +In order to use the desired type, modify the `cta-type` attribute to one of the +following: + +- local +- jump +- external +- new tab +- download +- video +- pdf +- blog +- email +- schedule +- chat +- call + +Notes: + +- When using `video`, you need to pass the video ID as the `href` attribute. +- The Button component will need to be wrapped within a `DDSVideoCTAContainer` + components for videos to play. +- Custom icons can replace the built-in ones within `DDSCardFooter`, they only + need to be assigned to the `icon` slot. ## Props @@ -58,10 +65,12 @@ Notes: ## Stable selectors -See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used. +See +[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) +to see how Web Components selector and `data-autoid` should be used. -| Web Components selector | Compatibility selector | Description | -| ------------------------- | -------------------------------------- | ----------- | -| `` | `data-autoid="dds--button"` | Component | +| Web Components selector | Compatibility selector | Description | +| ----------------------- | --------------------------- | ----------- | +| `` | `data-autoid="c4d--button"` | Component | diff --git a/packages/web-components/src/components/button/__stories__/button.stories.react.tsx b/packages/web-components/src/components/button/__stories__/button.stories.react.tsx index 101e658ba42..216489e7809 100644 --- a/packages/web-components/src/components/button/__stories__/button.stories.react.tsx +++ b/packages/web-components/src/components/button/__stories__/button.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -27,14 +27,14 @@ import { types, } from '../../cta/__stories__/ctaTypeConfig'; -export const Default = args => { +export const Default = (args) => { const { copy, customVideoTitle, ctaType, disabled, download, href } = args?.Button ?? {}; let videoCopy; if (ctaType === CTA_TYPE.VIDEO) { - const button = document.querySelector('dds-button') as any; + const button = document.querySelector('cds-button') as any; const duration = button?.videoTitle?.match(/\((.*)\)/)?.pop(); if (!customVideoTitle) { @@ -48,7 +48,11 @@ export const Default = args => { return ( - + {videoCopy ?? copy} @@ -97,11 +101,13 @@ Default.story = { export default { title: 'Components/Button', decorators: [ - story => { + (story) => { return (
-
{story()}
+
+ {story()} +
); diff --git a/packages/web-components/src/components/card-group/__stories__/README.stories.mdx b/packages/web-components/src/components/card-group/__stories__/README.stories.mdx index 0b92c32941c..07e70fb720e 100644 --- a/packages/web-components/src/components/card-group/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/card-group/__stories__/README.stories.mdx @@ -42,15 +42,11 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + - + Top level card link - - + ``` @@ -58,12 +54,8 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; ### HTML (with Card pictogram) ```html - - + Aerospace and defence

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut @@ -90,10 +82,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; 18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" /> - + Aerospace and defence

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut @@ -120,10 +109,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; 18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" /> - + Aerospace and defence

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut @@ -149,9 +135,8 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; 0.904,0.736,1.64,1.64,1.64h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36, 18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" /> - + - ``` ### HTML (with Card static) @@ -165,14 +150,11 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + - + Top level card link - - + ``` @@ -188,7 +170,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js'; pattern-background> IBM Developer - Card 01

Learn, code and connect with your community

- + IBM Developer - Card 02

Learn, code and connect with your community

- + IBM Developer - Card 03

Learn, code and connect with your community

- + ``` @@ -288,7 +270,7 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + ``` @@ -297,9 +279,9 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j There are three different options for the `grid-mode` property: -* Default (32px gap) -* Condensed (16px gap) -* Collapsed (no gap) +- Default (32px gap) +- Condensed (16px gap) +- Collapsed (no gap) ## Props 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 6c6ddc2793e..af1cf16d5f9 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 @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -85,7 +85,7 @@ const cardsDiffLengthPhrase = (index, tagGroup, media, cardType, addCta) => { ? addCta ? textCTAContent : '' - : html` `} + : html` `} `; @@ -128,7 +128,7 @@ const longHeadingCardGroupItem = (tagGroup, media, cardType, addCta) => { ? addCta ? textCTAContent : '' - : html` `} + : html` `} `; }; @@ -171,7 +171,7 @@ const cardLink = html` pattern-background> IBM Developer

Learn, code and connect with your community

- + `; @@ -187,7 +187,7 @@ const cardInCardItems = (i, tagGroup, media) => { marine litter ${tagGroup ? tagGroupContent : ''} - + ` : html` @@ -207,7 +207,7 @@ const cardInCardItems = (i, tagGroup, media) => { litter ${tagGroup ? tagGroupContent : ''} - + `; }; @@ -230,7 +230,7 @@ export const Default = (args) => { html` Top level card link - + ` ); @@ -255,7 +255,7 @@ export const Default = (args) => { html` Top level card link - + ` ); diff --git a/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx index ef010165f9f..b9624695c97 100644 --- a/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx @@ -54,7 +54,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-offset/index Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis

- + - + - + - - ${ArrowRight20({ slot: 'icon' })} - + ${ArrowRight20({ slot: 'icon' })} `; diff --git a/packages/web-components/src/components/card-section-offset/__tests__/card-section-offset.test.ts b/packages/web-components/src/components/card-section-offset/__tests__/card-section-offset.test.ts index cbb89864e1f..b5aca4eb505 100644 --- a/packages/web-components/src/components/card-section-offset/__tests__/card-section-offset.test.ts +++ b/packages/web-components/src/components/card-section-offset/__tests__/card-section-offset.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -50,23 +50,23 @@ describe('c4d-card-section-offset', function () { Topic Natural Language Processing. - + ${ArrowRight20({ slot: 'icon' })} - + Topic Natural Language Processing. - + ${ArrowRight20({ slot: 'icon' })} Topic Natural Language Processing. - + ${ArrowRight20({ slot: 'icon' })} - + `, }), diff --git a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx index 3afa50125b1..a0f93df727c 100644 --- a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx @@ -40,7 +40,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-simple/index ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + @@ -59,7 +59,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-simple/index Topic Natural Language Processing. - + diff --git a/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts b/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts index 518a0d9588d..7b753f1fcf8 100644 --- a/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts +++ b/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -34,7 +34,7 @@ const cardGroupItems = (withImages) => { ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + `; }; @@ -59,9 +59,9 @@ export const Default = (args) => { color-scheme="inverse" cta-type="local"> Top level card link - + color-scheme="inverse"> ` : ``} diff --git a/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts b/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts index 6ac2e7b2085..c9bae56b832 100644 --- a/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts +++ b/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -45,9 +45,9 @@ describe('c4d-card-section-simple', function () { Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + ${ArrowRight20({ slot: 'icon' })} - + `, }), diff --git a/packages/web-components/src/components/card/__stories__/README.stories.mdx b/packages/web-components/src/components/card/__stories__/README.stories.mdx index c7c28051e8e..7e576419e14 100644 --- a/packages/web-components/src/components/card/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/card/__stories__/README.stories.mdx @@ -34,7 +34,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card/index.js'; Eyebrow text Lorem ipsum dolor sit amet - + - + ${ArrowRight20({ slot: 'icon' })} - + `, contentItemHeading: 'Lorem ipsum', diff --git a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx index 37aed37138e..f044a7f35df 100644 --- a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx @@ -43,7 +43,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-cards/index ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + - + - + - + `; @@ -45,14 +45,14 @@ const cardGroupItemWithImages = html` Topic Natural Language Processing. - + `; const cardGroupItemWithVideos = html` - - + + `; @@ -70,7 +70,7 @@ export const Default = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - + `; @@ -91,7 +91,7 @@ export const withImages = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - + `; @@ -116,7 +116,7 @@ export const withVideos = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - + `; diff --git a/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts b/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts index e6ce316e3f7..19eead8932a 100644 --- a/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts +++ b/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -53,9 +53,9 @@ describe('c4d-content-block-cards', function () { Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + ${ArrowRight20({ slot: 'icon' })} - + `, }), diff --git a/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts b/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts index 7310fa96929..2b892240561 100644 --- a/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts +++ b/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -128,7 +128,7 @@ export const Default = (args) => { Lorem ipsum dolor sit amet - + @@ -164,7 +164,7 @@ export const Default = (args) => { Lorem ipsum dolor sit amet - + @@ -239,7 +239,7 @@ export const withLinkList = (args) => { Lorem ipsum dolor sit amet - + @@ -275,7 +275,7 @@ export const withLinkList = (args) => { Lorem ipsum dolor sit amet - + diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts index b673a773884..f2944824119 100644 --- a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts +++ b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts @@ -2,7 +2,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -235,7 +235,7 @@ export const Default = (args) => { Lorem ipsum dolor sit amet - + @@ -339,7 +339,7 @@ export const WithLinkList = (args) => { Lorem ipsum dolor sit amet - + diff --git a/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts b/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts index 1ca4bb11ce0..260070282de 100644 --- a/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts +++ b/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -142,7 +142,7 @@ export const Default = (args) => { cta-type=${ctaType} href=${hrefsForType[ctaType]}> Lorem ipsum dolor - + `} @@ -227,7 +227,7 @@ export const withLinkList = (args) => { cta-type=${ctaType} href=${hrefsForType[ctaType]}> Lorem ipsum dolor - + `} diff --git a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts index 5cf80b803eb..afd424b29f0 100644 --- a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts +++ b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -13,9 +13,6 @@ import '../../link-list/index'; import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { select } from '@storybook/addon-knobs'; -import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js'; -import ArrowDown20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--down/20.js'; -import Launch20 from '../../../internal/vendor/@carbon/web-components/icons/launch/20.js'; import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../../content-block/content-block'; import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy'; import { CTA_STYLE, CTA_TYPE } from '../../cta/defs'; @@ -93,11 +90,7 @@ export const Default = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - - ${ctaType === 'local' ? ArrowRight20({ slot: 'icon' }) : ''} - ${ctaType === 'jump' ? ArrowDown20({ slot: 'icon' }) : ''} - ${ctaType === 'external' ? Launch20({ slot: 'icon' }) : ''} - + ` : html` @@ -134,11 +127,7 @@ export const WithImage = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - - ${ctaType === 'local' ? ArrowRight20({ slot: 'icon' }) : ''} - ${ctaType === 'jump' ? ArrowDown20({ slot: 'icon' }) : ''} - ${ctaType === 'external' ? Launch20({ slot: 'icon' }) : ''} - + ` : html` @@ -181,11 +170,7 @@ export const WithVideo = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - - ${ctaType === 'local' ? ArrowRight20({ slot: 'icon' }) : ''} - ${ctaType === 'jump' ? ArrowDown20({ slot: 'icon' }) : ''} - ${ctaType === 'external' ? Launch20({ slot: 'icon' }) : ''} - + ` : html` @@ -244,11 +229,7 @@ export const WithLinkList = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - - ${ctaType === 'local' ? ArrowRight20({ slot: 'icon' }) : ''} - ${ctaType === 'jump' ? ArrowDown20({ slot: 'icon' }) : ''} - ${ctaType === 'external' ? Launch20({ slot: 'icon' }) : ''} - + ` : html` diff --git a/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts b/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts index 4e2fa77064c..fbcada32b9f 100644 --- a/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts +++ b/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -143,7 +143,7 @@ export const Default = (args) => { cta-type="${ifDefined(ctaType)}" href="${ifDefined(href)}"> ${ctaCopy} - + `; 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 667467100b9..5d663419adb 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 @@ -89,7 +89,7 @@ component to render correctly within the grid. ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- + @@ -276,48 +276,56 @@ 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`. +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 + + 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. + 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. - + + 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. - + + + + 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' })} - - + + 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.ts b/packages/web-components/src/components/cta/__stories__/cta.stories.ts index a48d08423bc..21e9a9f4aef 100644 --- a/packages/web-components/src/components/cta/__stories__/cta.stories.ts +++ b/packages/web-components/src/components/cta/__stories__/cta.stories.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. diff --git a/packages/web-components/src/components/cta/__tests__/card-cta-footer.test.ts b/packages/web-components/src/components/cta/__tests__/card-cta-footer.test.ts index 97160e08428..9d9ac79bd9a 100644 --- a/packages/web-components/src/components/cta/__tests__/card-cta-footer.test.ts +++ b/packages/web-components/src/components/cta/__tests__/card-cta-footer.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -21,24 +21,24 @@ const template = (props?) => { children, } = props ?? {}; return html` - ${children} - + `; }; -describe('c4d-card-cta-footer', function () { +describe('c4d-card-footer', function () { describe('Misc attributes', function () { it('should render with minimum attributes', async function () { render(template(), document.body); await Promise.resolve(); - expect( - document.body.querySelector('c4d-card-cta-footer') - ).toMatchSnapshot({ mode: 'shadow' }); + expect(document.body.querySelector('c4d-card-footer')).toMatchSnapshot({ + mode: 'shadow', + }); }); it('should render with various attributes', async function () { @@ -54,9 +54,9 @@ describe('c4d-card-cta-footer', function () { document.body ); await Promise.resolve(); - expect( - document.body.querySelector('c4d-card-cta-footer') - ).toMatchSnapshot({ mode: 'shadow' }); + expect(document.body.querySelector('c4d-card-footer')).toMatchSnapshot({ + mode: 'shadow', + }); }); }); @@ -76,7 +76,7 @@ describe('c4d-card-cta-footer', function () { await Promise.resolve(); // Update cycle for rendering upon `slotchange` event expect( document.body - .querySelector('c4d-card-cta-footer')! + .querySelector('c4d-card-footer')! .shadowRoot!.querySelector('.cds--card__cta__copy')! .textContent!.trim() ).toBe(''); diff --git a/packages/web-components/src/components/cta/__tests__/card-cta.test.ts b/packages/web-components/src/components/cta/__tests__/card-cta.test.ts index ff7fe5b2de2..db2a868b46a 100644 --- a/packages/web-components/src/components/cta/__tests__/card-cta.test.ts +++ b/packages/web-components/src/components/cta/__tests__/card-cta.test.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -73,15 +73,15 @@ xdescribe('c4d-card-cta', function () { // Should yeild to `undefined` in `name` part given card footer doesn't render the video name formatVideoCaption: ({ name, duration }) => `${name}-${duration}`, formatVideoDuration: ({ duration }) => duration, - children: html` `, + children: html` `, }), document.body ); await Promise.resolve(); // Update cycle for `` - await Promise.resolve(); // Update cycle for `` upon property forwarding - expect( - document.body.querySelector('c4d-card-cta-footer') - ).toMatchSnapshot({ mode: 'shadow' }); + await Promise.resolve(); // Update cycle for `` upon property forwarding + expect(document.body.querySelector('c4d-card-footer')).toMatchSnapshot({ + mode: 'shadow', + }); }); }); diff --git a/packages/web-components/src/components/cta/card-cta-footer.ts b/packages/web-components/src/components/cta/card-cta-footer.ts index fa61670086d..e0180431e8a 100644 --- a/packages/web-components/src/components/cta/card-cta-footer.ts +++ b/packages/web-components/src/components/cta/card-cta-footer.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -27,7 +27,7 @@ const { prefix, stablePrefix: c4dPrefix } = settings; /** * Card CTA footer. * - * @element c4d-card-cta-footer + * @element c4d-card-footer */ @customElement(`${c4dPrefix}-card-cta-footer`) class C4DCardCTAFooter extends VideoCTAMixin(CTAMixin(C4DCardFooter)) { diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts index c7929c53031..d9732bc3b77 100644 --- a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts +++ b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts @@ -1,6 +1,6 @@ /* eslint-disable max-len */ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -149,9 +149,7 @@ export const cardGroupItems = html` Topic Natural Language Processing. - - ${ArrowRight20({ slot: 'icon' })} - + ${ArrowRight20({ slot: 'icon' })} `; @@ -270,7 +268,7 @@ export const tocContent = html` ${Array.from([1, 2]).map(() => contentBlockSegmentedItemsWithImage)} Lorem ipsum dolor - + @@ -470,7 +468,7 @@ export const StoryContentNoToC = () => cta-type="local" href="https://example.com"> Lorem ipsum dolor - + diff --git a/packages/web-components/src/components/filter-panel/filter-panel-composite.ts b/packages/web-components/src/components/filter-panel/filter-panel-composite.ts index 95d0c21e85b..726bd6f19dd 100644 --- a/packages/web-components/src/components/filter-panel/filter-panel-composite.ts +++ b/packages/web-components/src/components/filter-panel/filter-panel-composite.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -443,10 +443,10 @@ class C4DFilterPanelComposite extends MediaQueryMixin( render() { // Note that the contents, intended to be - // are never shown as is. The text contents + // are never shown as is. The text contents // are composed, using this._getComposedHeadingFilterCount(), together with // the current filter count, and passed as an attribute to - // and . + // and . return html` { ); }); - cy.get('dds-locale-modal') + cy.get('c4d-locale-modal') .shadow() - .find('dds-expressive-modal-close-button') + .find('c4d-expressive-modal-close-button') .shadow() .find('button') .click(); diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js index 88808f61294..aff19c9b2ed 100644 --- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js +++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2021, 2023 + * Copyright IBM Corp. 2021, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -14,38 +14,38 @@ const _pathDefault = '/iframe.html?id=components-masthead--default&knob-use%20mock%20nav%20data%20(use-mock)=true&knob-The%20user%20authenticated%20status%20(user-status)=test.user@ibm.com'; -describe('dds-masthead | authenticated (desktop)', () => { +describe('c4d-masthead | authenticated (desktop)', () => { beforeEach(() => { cy.viewport(1280, 780).visit(`/${_pathDefault}`); }); it('should open the login menu with 4 items', () => { - cy.get('dds-masthead-profile') + cy.get('c4d-masthead-profile') .shadow() .find('a') .click(); - cy.get('dds-masthead-profile-item').should('have.length', 4); + cy.get('c4d-masthead-profile-item').should('have.length', 4); cy.takeSnapshots(); }); it('should not render profile menu when disabled', () => { - cy.get('dds-masthead-composite').invoke('attr', 'has-profile', 'false'); - cy.get('dds-masthead-profile').should('not.exist'); + cy.get('c4d-masthead-composite').invoke('attr', 'has-profile', 'false'); + cy.get('c4d-masthead-profile').should('not.exist'); cy.takeSnapshots(); }); }); -describe('dds-masthead | default (mobile)', () => { +describe('c4d-masthead | default (mobile)', () => { beforeEach(() => { cy.viewport(320, 780).visit(`/${_pathDefault}`); }); it('should open the login menu with 4 items', () => { - cy.get('dds-masthead-profile') + cy.get('c4d-masthead-profile') .shadow() .find('a') .click(); - cy.get('dds-masthead-profile-item').should('have.length', 4); + cy.get('c4d-masthead-profile-item').should('have.length', 4); cy.takeSnapshots('mobile'); }); }); diff --git a/packages/web-components/tests/snapshots/c4d-card-cta-footer.md b/packages/web-components/tests/snapshots/c4d-card-cta-footer.md index cf57d5f779e..c7273d32fe0 100644 --- a/packages/web-components/tests/snapshots/c4d-card-cta-footer.md +++ b/packages/web-components/tests/snapshots/c4d-card-cta-footer.md @@ -1,4 +1,4 @@ -# `c4d-card-cta-footer` +# `c4d-card-footer` ## `Misc attributes` diff --git a/packages/web-components/tests/snapshots/c4d-card-footer.md b/packages/web-components/tests/snapshots/c4d-card-footer.md new file mode 100644 index 00000000000..9eb4d6d71ed --- /dev/null +++ b/packages/web-components/tests/snapshots/c4d-card-footer.md @@ -0,0 +1,56 @@ +# `c4d-card-footer` + +## `Misc attributes` + +#### `should render with minimum attributes` + +``` + + + + + + + + +``` + +#### `should render with various attributes` + +``` + + + + + - This link plays a video + + + + +``` + diff --git a/packages/web-components/tests/snapshots/c4d-content-block-card-static.md b/packages/web-components/tests/snapshots/c4d-content-block-card-static.md index a34f4602654..5cd164f0327 100644 --- a/packages/web-components/tests/snapshots/c4d-content-block-card-static.md +++ b/packages/web-components/tests/snapshots/c4d-content-block-card-static.md @@ -103,14 +103,15 @@ Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.

- - + diff --git a/packages/web-components/tests/snapshots/c4d-search-with-typeahead.md b/packages/web-components/tests/snapshots/c4d-search-with-typeahead.md index b849a1887eb..b48126ac74a 100644 --- a/packages/web-components/tests/snapshots/c4d-search-with-typeahead.md +++ b/packages/web-components/tests/snapshots/c4d-search-with-typeahead.md @@ -100,13 +100,6 @@ -
-
- - + ``` @@ -30,13 +30,13 @@
- - + ``` diff --git a/packages/web-components/tests/snapshots/dds-locale-modal-composite.md b/packages/web-components/tests/snapshots/dds-locale-modal-composite.md index 80173431c00..01af4ef9144 100644 --- a/packages/web-components/tests/snapshots/dds-locale-modal-composite.md +++ b/packages/web-components/tests/snapshots/dds-locale-modal-composite.md @@ -1,62 +1,62 @@ -# `dds-locale-modal-composite` +# `c4d-locale-modal-composite` ## `Misc attributes` #### `should render minimum attributes` ``` - - - - + - - + + ``` #### `should render various attributes` ``` - - - - - - - - + + + + + - - + + ```