diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md index bbda912993f..a2f49438358 100644 --- a/docs/dotcom-v2-migration.md +++ b/docs/dotcom-v2-migration.md @@ -3,89 +3,95 @@ This document will review in detail the changes in Carbon for IBM.com v1 to v2. ## Global changes -Carbon for IBM.com v2 uses Carbon v11, which utilizes [Dart Sass](https://sass-lang.com/dart-sass) (`sass`), as opposed to + +Carbon for IBM.com v2 uses Carbon v11, which utilizes +[Dart Sass](https://sass-lang.com/dart-sass) (`sass`), as opposed to `node-sass`. This introduces some new Sass features such as -[`@use`](https://sass-lang.com/documentation/at-rules/use) and [`@forward`](https://sass-lang.com/documentation/at-rules/forward) keywords ([`@import`](https://sass-lang.com/documentation/at-rules/import) is no longer used), and +[`@use`](https://sass-lang.com/documentation/at-rules/use) and +[`@forward`](https://sass-lang.com/documentation/at-rules/forward) keywords +([`@import`](https://sass-lang.com/documentation/at-rules/import) is no longer +used), and [namespaces](https://sass-lang.com/documentation/at-rules/use#choosing-a-namespace). For Carbon v11 migration guidance, see their [migration guide](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md). ## Components -| Component | Changes | -| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| back-to-top | No API changes. | -| background-media | No API changes. | -| button-expressive | Deprecated in favor of `button`. | -| button-group | No API changes. | -| callout-with-media | View [changes](#callout-with-media). | -| callout-quote | View [changes](#callout-quote). | -| card | View [changes](#card). | -| card-group-card-link-item | Deprecated in favor of [card](#card) or [content-item](#content-item). | -| card-in-card | No API changes. | -| card-link | Deprecated in favor of [card](#card) (link variant). | -| card-section-carousel | Deprecated in favor of `content-section` or `content-block` combined with `carousel`. | -| card-section-images | Removed - use `card-section`. | -| card-section-simple | Deprecated in favor of `content-section` or `content-block` combined with `card-group`. | -| content-block-cards | Deprecated in favor of `content-section` or `content-block` combined with `card-group`. | -| content-block-horizontal | Deprecated in favor of `content-section` or `content-block` combined with `content-item-horizontal`. | -| content-block-media | Deprecated in favor of `content-section` or `content-block` combined with `video-player`/`image` components. | -| content-block-mixed | Deprecated in favor of `content-section` or `content-block` combined with `video-player`/`image`, `pictogram-items`, and other `content-group` components.| -| content-block-segmented | Deprecated in favor of `content-section` or `content-block`. | -| content-block-simple | Deprecated in favor of `content-section` or `content-block`. | -| content-group-banner | View [changes](#content-group-banner). | -| content-group-horizontal | Removed - use `content-block-horizontal`. | -| content-group-cards | Deprecated in favor of `content-section` or `content-block` combined with `card-group`. | -| content-group-pictograms | Deprecated in favor of `content-section` or `content-block` combined with `content-item` (pictogram variant). | -| content-group-simple | Deprecated in favor of `content-section` or `content-block` combined with `content-item`. | -| content-item | View [changes](#content-item) | -| content-item-horizontal | View [changes](#content-item-horizontal) | -| cta | View [changes](#cta) | -| cta-block | Deprecated in favor of `content-section` or `content-block` combined with `content-item`. | -| cta-section | Deprecated in favor of `content-section` or `content-block` combined with `content-item`. | -| dotcom-shell | No API changes. | -| feature-card-block-large | Removed - use `feature-card`. | -| feature-card-block-medium | Removed - use `feature-card`. | -| feature-section | View [changes](#feature-section). | -| filter-panel | View [changes](#filter-panel). | -| footer | No API changes. | -| horizontal-rule | View [changes](#horizontal-rule). | -| image | View [changes](#image). | -| image-with-caption | Removed - use `image` component. | -| leadspace | View [changes](#leadspace). | -| leadspace-block | View [changes](#leadspace-block). | -| leadspace-with-search | View [changes](#leadspace-with-search). | -| lightbox-media-viewer | No API changes. | -| link-list | View [changes](#link-list). | -| link-with-icon | No API changes. | -| logo-grid | Deprecated in favor of `content-section` or `content-block` combined with `image-group`. | -| pictogram-item | Deprecated in favor of `content-item` (pictogram variation). | -| quote | No API changes. | -| scroll-animations | No API changes. | -| search-with-typeahead | No API changes. | -| table-of-contents | No API changes. | -| tabs-extended-media | Deprecated in favor of `tabs-extended`. | -| tag-group | Deprecated in favor of wrapping Carbon `tag` in a parent container. | -| tag-link | Deprecated in favor of Carbon `tag`. | -| universal-banner | View [changes](#universal-banner) | +| Component | Changes | +| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| back-to-top | No API changes. | +| background-media | No API changes. | +| button-expressive | Deprecated in favor of `button`. | +| button-group | No API changes. | +| callout-with-media | View [changes](#callout-with-media). | +| callout-quote | View [changes](#callout-quote). | +| card | View [changes](#card). | +| card-group-card-link-item | Deprecated in favor of [card](#card) or [content-item](#content-item). | +| card-in-card | No API changes. | +| card-link | Deprecated in favor of [card](#card) (link variant). | +| card-section-carousel | Deprecated in favor of `content-section` or `content-block` combined with `carousel`. | +| card-section-images | Removed - use `card-section`. | +| card-section-simple | Deprecated in favor of `content-section` or `content-block` combined with `card-group`. | +| carousel | No API changes. | +| content-block-cards | Deprecated in favor of `content-section` or `content-block` combined with `card-group`. | +| content-block-horizontal | Deprecated in favor of `content-section` or `content-block` combined with `content-item-horizontal`. | +| content-block-media | Deprecated in favor of `content-section` or `content-block` combined with `video-player`/`image` components. | +| content-block-mixed | Deprecated in favor of `content-section` or `content-block` combined with `video-player`/`image`, `pictogram-items`, and other `content-group` components. | +| content-block-segmented | Deprecated in favor of `content-section` or `content-block`. | +| content-block-simple | Deprecated in favor of `content-section` or `content-block`. | +| content-group-banner | View [changes](#content-group-banner). | +| content-group-horizontal | Removed - use `content-block-horizontal`. | +| content-group-cards | Deprecated in favor of `content-section` or `content-block` combined with `card-group`. | +| content-group-pictograms | Deprecated in favor of `content-section` or `content-block` combined with `content-item` (pictogram variant). | +| content-group-simple | Deprecated in favor of `content-section` or `content-block` combined with `content-item`. | +| content-item | View [changes](#content-item) | +| content-item-horizontal | View [changes](#content-item-horizontal) | +| cta | View [changes](#cta) | +| cta-block | Deprecated in favor of `content-section` or `content-block` combined with `content-item`. | +| cta-section | Deprecated in favor of `content-section` or `content-block` combined with `content-item`. | +| dotcom-shell | No API changes. | +| feature-card-block-large | Removed - use `feature-card`. | +| feature-card-block-medium | Removed - use `feature-card`. | +| feature-section | View [changes](#feature-section). | +| filter-panel | View [changes](#filter-panel). | +| footer | No API changes. | +| horizontal-rule | View [changes](#horizontal-rule). | +| image | View [changes](#image). | +| image-with-caption | Removed - use `image` component. | +| leadspace | View [changes](#leadspace). | +| leadspace-block | View [changes](#leadspace-block). | +| leadspace-with-search | View [changes](#leadspace-with-search). | +| lightbox-media-viewer | No API changes. | +| link-list | View [changes](#link-list). | +| link-with-icon | No API changes. | +| logo-grid | Deprecated in favor of `content-section` or `content-block` combined with `image-group`. | +| pictogram-item | Deprecated in favor of `content-item` (pictogram variation). | +| quote | No API changes. | +| scroll-animations | No API changes. | +| search-with-typeahead | No API changes. | +| table-of-contents | No API changes. | +| tabs-extended-media | Deprecated in favor of `tabs-extended`. | +| tag-group | Deprecated in favor of wrapping Carbon `tag` in a parent container. | +| tag-link | Deprecated in favor of Carbon `tag`. | +| universal-banner | View [changes](#universal-banner) | ### Callout with media -- New options for `color-scheme` property: `regular`, - `inverse` `layer`, `cyan`, `purple` +- New options for `color-scheme` property: `regular`, `inverse` `layer`, `cyan`, + `purple` - New callout style tokens ### Callout quote -- New options for `color-scheme` property: `regular`, - `inverse` `layer`, `cyan`, `purple` +- New options for `color-scheme` property: `regular`, `inverse` `layer`, `cyan`, + `purple` - New callout style tokens ### Card - The `card-footer` `icon-placement` property has been removed -- Removed `border` property - clickable cards inherit the Carbon v11 experimental - tile border style +- 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` @@ -93,14 +99,14 @@ For Carbon v11 migration guidance, see their ### Content group banner - `content-group-banner` renamed to `in-page-banner` -- New options for `color-scheme` property: `regular`, - `inverse` `layer`, `cyan`, `purple` +- New options for `color-scheme` property: `regular`, `inverse` `layer`, `cyan`, + `purple` ### Content item - `content-item` new property `horizontal` -- `content-item` now renders different variations for `statistics`, `pictogram`, `media`, and `logo` - +- `content-item` now renders different variations for `statistics`, `pictogram`, + `media`, and `logo` ### Content item horizontal @@ -109,18 +115,21 @@ For Carbon v11 migration guidance, see their ### CTA -In Carbon for IBM.com v2, `cta` and all subcomponents have -been deprecated in favor of their base components. All CTA-like features -can now be used natively within `button`, `card`, `feature-card`, and `link-with-icon`. +In Carbon for IBM.com v2, `cta` and all subcomponents have been deprecated in +favor of their base components. All CTA-like features can now be used natively +within `button`, `card`, `feature-card`, and `link-with-icon`. -Each new component has a `cta-type` property that can change the icon and behavior of the component. See the components' documentation for more +Each new component has a `cta-type` property that can change the icon and +behavior of the component. See the components' documentation for more information. ### Feature section -- The `feature-section-card-link` has been deprecated in favor of the `card` (link) variation +- The `feature-section-card-link` has been deprecated in favor of the `card` + (link) variation - `media-alignment` property has been removed -- `color-scheme` property now accepts `regular` (default), `inverse`, `cyan`, `purple` +- `color-scheme` property now accepts `regular` (default), `inverse`, `cyan`, + `purple` ### Filter panel @@ -128,9 +137,8 @@ information. ### Horizontal rule -- New options for `contrast` property: `subtle` (default), - `strong` (replaces `medium_contrast`), - `low_contrast`, `high_contrast` +- New options for `contrast` property: `subtle` (default), `strong` (replaces + `medium_contrast`), `low_contrast`, `high_contrast` ### Image @@ -148,15 +156,18 @@ information. ### Leadspace with Search - `leadspace-with-search-heading` has been replaced with `leadspace-heading` -- `leadspace-with-search-content-copy` has been replaced with `leadspace-with-search-copy` +- `leadspace-with-search-content-copy` has been replaced with + `leadspace-with-search-copy` - New highlight attribute in `dds-leadspace-heading` - Deprecated `background-media` image variant - Removed `leadspace-with-search-heading`, `leadspace-with-search-content`, -`leadspace-with-search-content-heading`, `leadspace-with-search-content-copy` + `leadspace-with-search-content-heading`, `leadspace-with-search-content-copy` ### Link list -- The `default` section has taken the design specs of `end of section`. As a result, `end of section` has been removed. In addition to this, the following components have been replaced: +- The `default` section has taken the design specs of `end of section`. As a + result, `end of section` has been removed. In addition to this, the following + components have been replaced: - `link-list-item-card` has been replaced with `link-list-item` - `link-list-item-card-cta` has been replaced with `link-list-item-cta` diff --git a/packages/styles/scss/components/carousel/_carousel.scss b/packages/styles/scss/components/carousel/_carousel.scss index 551f2aaefbe..f8b1894461e 100644 --- a/packages/styles/scss/components/carousel/_carousel.scss +++ b/packages/styles/scss/components/carousel/_carousel.scss @@ -25,7 +25,7 @@ } @include breakpoint(lg) { - --#{$c4d-prefix}--carousel--page-size: 3; + --#{$c4d-prefix}--carousel--page-size: 4; } [role='region'] { diff --git a/packages/styles/scss/components/image/_image.scss b/packages/styles/scss/components/image/_image.scss index f7755bd467b..a8050643461 100644 --- a/packages/styles/scss/components/image/_image.scss +++ b/packages/styles/scss/components/image/_image.scss @@ -47,10 +47,12 @@ } :host(#{$c4d-prefix}-image)[card-group-item], - :host(#{$c4d-prefix}-card-cta-image) { + :host(#{$c4d-prefix}-image) { @include ratio-base(4, 3, true); padding-top: 75%; + height: 0; + overflow: hidden; .#{$c4d-prefix}--image__img { position: absolute; diff --git a/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js b/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js index c4527f3e4b2..9e7f0ee7811 100644 --- a/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js +++ b/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js @@ -9,7 +9,6 @@ import React from 'react'; import { render } from 'react-dom'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card'; import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer'; import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading'; @@ -25,11 +24,10 @@ const copyOdd = ` // eslint-disable-next-line react/prop-types const Card = ({ copy = copyDefault, heading = headingDefault } = {}) => ( - + {heading} - {copy} +

{copy}

- ); diff --git a/packages/web-components/examples/codesandbox/components/carousel/cdn.html b/packages/web-components/examples/codesandbox/components/carousel/cdn.html index da83b15ae59..215b2074fcd 100644 --- a/packages/web-components/examples/codesandbox/components/carousel/cdn.html +++ b/packages/web-components/examples/codesandbox/components/carousel/cdn.html @@ -29,110 +29,45 @@
- - - Lorem ipsum dolor sit amet + + + 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

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 + + + + + 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

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 + + + + + Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.

- - - - - + + + +
diff --git a/packages/web-components/examples/codesandbox/components/carousel/index.html b/packages/web-components/examples/codesandbox/components/carousel/index.html index 1b88d695cd5..5d973dbae19 100644 --- a/packages/web-components/examples/codesandbox/components/carousel/index.html +++ b/packages/web-components/examples/codesandbox/components/carousel/index.html @@ -16,7 +16,7 @@ @@ -26,110 +26,45 @@
- - - Lorem ipsum dolor sit amet + + + 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

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 + + + + + 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

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 + + + + + Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.

- - - - - + + + +
diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts index 49dceba7865..11413a12617 100644 --- a/packages/web-components/src/components/card/__stories__/card.stories.ts +++ b/packages/web-components/src/components/card/__stories__/card.stories.ts @@ -379,8 +379,6 @@ export const Link = (args) => { videoCopy = customVideoTitle; } - console.log(card.querySelector('c4d-card-footer'), duration); - card.querySelector('c4d-card-footer')!.innerHTML = duration ?? ''; } diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts index ef584163e25..3990eb26d7b 100644 --- a/packages/web-components/src/components/card/card.ts +++ b/packages/web-components/src/components/card/card.ts @@ -87,7 +87,29 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) { */ // eslint-disable-next-line class-methods-use-this protected _renderHeading(): TemplateResult | string | void { - return html` `; + const { + ctaType, + videoName, + formatVideoCaption: formatVideoCaptionInEffect, + } = this; + if (ctaType !== CTA_TYPE.VIDEO) { + return html``; + } + const caption = formatVideoCaptionInEffect({ name: videoName }); + + this.dispatchEvent( + new CustomEvent( + (this.constructor as typeof C4DCard).eventVideoTitleUpdated, + { + bubbles: true, + composed: true, + } + ) + ); + return html` + ${caption} + `; } /** @@ -404,6 +426,13 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) { return `${c4dPrefix}-cta-request-additional-video-data`; } + /** + * The name of the custom event fired when the video title is updated + */ + static get eventVideoTitleUpdated() { + return `${c4dPrefix}-card-video-title-updated`; + } + static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true, diff --git a/packages/web-components/src/components/carousel/__stories__/README.stories.mdx b/packages/web-components/src/components/carousel/__stories__/README.stories.mdx index 8bffc1f6651..2054fd7bb1d 100644 --- a/packages/web-components/src/components/carousel/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/carousel/__stories__/README.stories.mdx @@ -35,74 +35,50 @@ import '@carbon/ibmdotcom-web-components/es/components/card/index.js'; ### HTML ```html - - + + 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 + + + + + Lorem ipsum dolor sit amet +

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. - - - - - + sollicitudin, sodales nulla quis, consequat libero.

+ + + + ``` ### SCSS -While `` has `page-size` attribute, `` also looks at -`--cds--carousel--page-size` CSS custom property to determine the number of +While `` has `page-size` attribute, `` also looks at +`--c4d--carousel--page-size` CSS custom property to determine the number of cards per page. This is useful for setting different number of cards for different breakpoints. ```scss @use '@carbon/styles/scss/breakpoint'; -cds-carousel { - --cds--carousel--page-size: 1; +c4d-carousel { + --c4d--carousel--page-size: 1; @include breakpoint(md) { - --cds--carousel--page-size: 2; + --c4d--carousel--page-size: 2; } @include breakpoint(lg) { - --cds--carousel--page-size: 3; + --c4d--carousel--page-size: 3; } } ``` -Another CSS custom property `` looks at is -`--cds--carousel--overflow-hint-size`. If `0rem` is set there, the first card at +Another CSS custom property `` looks at is +`--c4d--carousel--overflow-hint-size`. If `0rem` is set there, the first card at the next page as a hint of page overflow will be hidden. ## Accessibility Notes @@ -119,15 +95,15 @@ is provided for the `title` slot, a generic title of "carousel" will be announced. ```html - + Carousel label text ... - + ``` ## Props - + ## Stable selectors @@ -137,6 +113,6 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | ----------------------- | ---------------------- | ----------- | -| `` | N/A | Component | +| `` | N/A | Component | diff --git a/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx b/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx index 212c495062e..c092aa76ea0 100644 --- a/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx @@ -22,28 +22,25 @@ Here's a quick example to get you started. ### JS ```javascript -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/index'; import C4DCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/index'; function App() { return ( - + Lorem ipsum dolor sit amet - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies - est. +

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 +

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. + sodales nulla quis, consequat libero.

- @@ -53,29 +50,29 @@ function App() { ### SCSS -While `` has `page-size` attribute, `` also looks at -`--cds--carousel--page-size` CSS custom property to determine the number of +While `` has `page-size` attribute, `` also looks at +`--c4d--carousel--page-size` CSS custom property to determine the number of cards per page. This is useful for setting different number of cards for different breakpoints. ```scss @use '@carbon/styles/scss/breakpoint'; -cds-carousel { - --cds--carousel--page-size: 1; +c4d-carousel { + --c4d--carousel--page-size: 1; @include breakpoint(md) { - --cds--carousel--page-size: 2; + --c4d--carousel--page-size: 2; } @include breakpoint(lg) { - --cds--carousel--page-size: 3; + --c4d--carousel--page-size: 3; } } ``` -Another CSS custom property `` looks at is -`--cds--carousel--overflow-hint-size`. If `0rem` is set there, the first card at +Another CSS custom property `` looks at is +`--c4d--carousel--overflow-hint-size`. If `0rem` is set there, the first card at the next page as a hint of page overflow will be hidden. ## Props @@ -90,6 +87,6 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | ----------------------- | ---------------------- | ----------- | -| `` | N/A | Component | +| `` | N/A | Component | diff --git a/packages/web-components/src/components/carousel/__stories__/carousel.stories.react.tsx b/packages/web-components/src/components/carousel/__stories__/carousel.stories.react.tsx index 6d8e8cfaf1f..d47188f948e 100644 --- a/packages/web-components/src/components/carousel/__stories__/carousel.stories.react.tsx +++ b/packages/web-components/src/components/carousel/__stories__/carousel.stories.react.tsx @@ -8,7 +8,6 @@ */ import React from 'react'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore @@ -21,9 +20,13 @@ import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/ import C4DCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel'; // @ts-ignore import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image'; +// @ts-ignore +import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container'; import imgLg2x1 from '../../../../../storybook-images/assets/720/fpo--2x1--720x360--005.jpg'; +import imgLg4x3 from '../../../../../storybook-images/assets/720/fpo--4x3--720x540--004.jpg'; +import styles from './carousel.stories.scss'; import readme from './README.stories.react.mdx'; const hrefDefault = 'https://www.ibm.com/standards/carbon'; @@ -41,7 +44,25 @@ const Card = ({ href = hrefDefault, image = undefined, } = {}) => ( - + + {heading} +

{copy}

+ {image ? ( + + ) : ( + '' + )} + + +); + +const CardWithLongHeading = ({ + copy = copyDefault, + heading = headingDefault, + href = hrefDefault, + image = false, +} = {}) => ( + {heading}

{copy}

{image ? ( @@ -49,44 +70,51 @@ const Card = ({ ) : ( '' )} - - - + ); + +const CardWithVideo = ({ copy = copyDefault, href = hrefDefault } = {}) => ( + + +

{copy}

+ + + +); + export const Default = () => { - return ( - - - - - - - - ); + return ( <>{Card()}{Card({copy: copyOdd})}{CardWithLongHeading()}{Card({copy: copyOdd})}{Card()} ); }; export const CardsWithImages = () => { - return ( - - - - - - - - ); -}; + return ( <>{Card({image: imgLg2x1})}{Card({image: imgLg2x1, copy: copyOdd})}{Card({image: imgLg2x1})}{Card({image: imgLg2x1, copy: copyOdd})}{Card({image: imgLg2x1})} ); +} + +export const CardsWithVideos = () => { + return ( <>{CardWithVideo({href: '0_ibuqxqbe'})}{CardWithVideo({href: '0_ibuqxqbe'})}{CardWithVideo({href: '0_ibuqxqbe'})}{CardWithVideo({href: '0_ibuqxqbe'})} ); +} + +export const CardsWithMedia = () => { + return (<>{Card({image: imgLg4x3})}{CardWithVideo({href: '0_ibuqxqbe'})}{Card({image: imgLg4x3})}{CardWithVideo({href: '0_ibuqxqbe'})}{Card({image: imgLg4x3})}{CardWithVideo({href: '0_ibuqxqbe'})}) +} export default { title: 'Components/Carousel', decorators: [ (story) => { return ( -
-
{story()}
-
+ <> + +
+
+ + {story()} + +
+
+ ); }, ], diff --git a/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts b/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts index 69a8e7e64f9..1ee5813f73f 100644 --- a/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts +++ b/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts @@ -7,13 +7,11 @@ * LICENSE file in the root directory of this source tree. */ -import { classMap } from 'lit/directives/class-map.js'; import { html } from 'lit'; // Below path will be there when an application installs `carbon-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore import { ifDefined } from 'lit/directives/if-defined.js'; -import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js'; import '../../card/index'; import '../../cta/index'; import '../../image/index'; @@ -39,7 +37,7 @@ const Card = ({ href = hrefDefault, image = undefined, } = {}) => html` - + ${heading}

${copy}

${image @@ -50,7 +48,7 @@ const Card = ({ default-src="${image}"> ` : null} - ${ArrowRight20({ slot: 'icon' })} + `; @@ -60,8 +58,8 @@ const CardWithLongHeading = ({ href = hrefDefault, image = undefined, } = {}) => html` - - ${heading} ${heading} + + ${heading}

${copy}

${image ? html` @@ -71,108 +69,60 @@ const CardWithLongHeading = ({ default-src="${image}"> ` : null} - ${ArrowRight20({ slot: 'icon' })} + `; const CardWithVideo = ({ copy = copyDefault, href = hrefDefault } = {}) => html` - +

${copy}

- - ${ArrowRight20({ slot: 'icon' })} - - + + `; -export const Default = (args) => { - const { cardSize } = args?.Carousel ?? {}; - const classes = classMap({ - [cardSize]: cardSize, - }); +export const Default = () => { return html` - - Carousel (Storybook Sample) - ${Card()}${Card({ copy: copyOdd })}${CardWithLongHeading()}${Card({ - copy: copyOdd, - })}${Card()} - + ${Card()}${Card({ copy: copyOdd })}${CardWithLongHeading()}${Card({ + copy: copyOdd, + })}${Card()} `; + // } }; -export const CardsWithImages = (args) => { - const { cardSize } = args?.Carousel ?? {}; - const classes = classMap({ - [cardSize]: cardSize, - }); +export const CardsWithImages = () => { return html` - - ${Card({ image: imgLg2x1 })}${Card({ - copy: copyOdd, - image: imgLg2x1, - })}${Card({ image: imgLg2x1 })}${Card({ - copy: copyOdd, - image: imgLg2x1, - })}${Card({ image: imgLg2x1 })} - + ${Card({ image: imgLg2x1 })}${Card({ + image: imgLg2x1, + copy: copyOdd, + })}${Card({ image: imgLg2x1 })}${Card({ + image: imgLg2x1, + copy: copyOdd, + })}${Card({ image: imgLg2x1 })} `; }; -export const CardsWithVideos = (args) => { - const { cardSize } = args?.Carousel ?? {}; - const classes = classMap({ - [cardSize]: cardSize, - }); +export const CardsWithVideos = () => { return html` - - ${CardWithVideo({ href: '0_ibuqxqbe' })} - ${CardWithVideo({ href: '0_ibuqxqbe' })} - ${CardWithVideo({ href: '0_ibuqxqbe' })} - ${CardWithVideo({ href: '0_ibuqxqbe' })} - ${CardWithVideo({ href: '0_ibuqxqbe' })} - ${CardWithVideo({ href: '0_ibuqxqbe' })} - + ${CardWithVideo({ href: '0_ibuqxqbe' })}${CardWithVideo({ + href: '0_ibuqxqbe', + })}${CardWithVideo({ href: '0_ibuqxqbe' })}${CardWithVideo({ + href: '0_ibuqxqbe', + })} `; }; -export const CardsWithMedia = (args) => { - const { cardSize } = args?.Carousel ?? {}; - const classes = classMap({ - [cardSize]: cardSize, - }); +export const CardsWithMedia = () => { return html` - - ${Card({ image: imgLg4x3 })} ${CardWithVideo({ href: '0_ibuqxqbe' })} - ${Card({ image: imgLg4x3 })} ${CardWithVideo({ href: '0_ibuqxqbe' })} - ${Card({ image: imgLg4x3 })} ${CardWithVideo({ href: '0_ibuqxqbe' })} - + ${Card({ image: imgLg4x3 })}${CardWithVideo({ + href: '0_ibuqxqbe', + })}${Card({ image: imgLg4x3 })}${CardWithVideo({ + href: '0_ibuqxqbe', + })}${Card({ image: imgLg4x3 })}${CardWithVideo({ href: '0_ibuqxqbe' })} `; }; -CardsWithImages.story = { - name: 'Cards with images', -}; - -CardsWithVideos.story = { - name: 'Cards with videos', - parameters: { - ...readme.parameters, - percy: { - skip: true, - }, - }, -}; - -CardsWithMedia.story = { - name: 'Cards with Media', - parameters: { - ...readme.parameters, - }, -}; - export default { title: 'Components/Carousel', decorators: [ @@ -182,7 +132,9 @@ export default { ${styles}
-
${story()}
+
+ ${story()} +
`; }, @@ -194,6 +146,7 @@ export default { default: { Carousel: { cardSize: 4, + mediaType: 'none', }, }, }, diff --git a/packages/web-components/src/components/carousel/carousel.ts b/packages/web-components/src/components/carousel/carousel.ts index 8e76e0ee422..0ab6cf0a0bd 100644 --- a/packages/web-components/src/components/carousel/carousel.ts +++ b/packages/web-components/src/components/carousel/carousel.ts @@ -438,16 +438,18 @@ class C4DCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { (this.constructor as typeof C4DCarousel).selectorItemTagGroup ) ); + this._childItemHeadings.push( (e as HTMLElement).querySelector( (this.constructor as typeof C4DCarousel).selectorItemHeading ) ); + // gets card cta-type="video" headings this._childItemHeadings.push( (e as HTMLElement) .querySelector( - (this.constructor as typeof C4DCarousel).selectorItemCardCTA + (this.constructor as typeof C4DCarousel).selectorItem ) ?.shadowRoot?.querySelector( (this.constructor as typeof C4DCarousel).selectorItemHeading @@ -511,6 +513,7 @@ class C4DCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { this._childItemEyebrows.filter((item) => item !== null), 'sm' ); + sameHeight( this._childItemHeadings.filter((item) => item !== null), 'sm' @@ -764,7 +767,7 @@ class C4DCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { * The name of the custom event fired when the video title is updated */ static get eventVideoTitleUpdated() { - return `${c4dPrefix}-card-cta-video-title-updated`; + return `${c4dPrefix}-card-video-title-updated`; } /** @@ -774,12 +777,12 @@ class C4DCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { return `${c4dPrefix}-card`; } - /** - * The selector for the card cta - */ - static get selectorItemCardCTA() { - return `${c4dPrefix}-card-cta`; - } + // /** + // * The selector for the card cta + // */ + // static get selectorItemCardCTA() { + // return `${c4dPrefix}-card`; + // } /** * The selector for the video cta container @@ -820,7 +823,7 @@ class C4DCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) { * A selector that will return the card item's footer */ static get selectorItemFooter() { - return `${c4dPrefix}-card-cta-footer`; + return `${c4dPrefix}-card-footer`; } static get stableSelector() {