From cd8425991d16f1598af8a4eb6f84669d1bc82d28 Mon Sep 17 00:00:00 2001 From: Anna Wen <54281166+annawen1@users.noreply.github.com> Date: Tue, 12 Sep 2023 11:07:23 -0700 Subject: [PATCH] feat(card): v2 card style updates (#10903) * feat(card): v2 card style updates * feat(card): move card styles to styles package * feat(card): react wrapper storybook changes * feat(card): aspect ratio property * feat(card): fix focus state style * feat(card): style adjustments * feat(card): import tag theme colors * chore(merge): edit from merge conflict * chore(styles): revert back to styles package * test(formatVideoCaption): edit test to include min * chore(styles): use calc --- docs/dotcom-v2-migration.md | 7 ++ .../styles/scss/components/card/_card.scss | 115 ++++++++++++++---- .../scss/globals/utils/_aspect-ratio.scss | 2 +- .../scss/globals/utils/_ratio-base.scss | 2 +- .../__tests__/formatVideoCaption.test.js | 6 +- .../formatVideoCaption/formatVideoCaption.js | 9 +- .../web-components/.storybook/container.scss | 2 + .../src/component-mixins/cta/cta.ts | 4 +- .../src/component-mixins/cta/video.ts | 4 +- .../card/__stories__/README.stories.mdx | 97 ++++++++------- .../card/__stories__/README.stories.react.mdx | 19 ++- .../card/__stories__/card.stories.react.tsx | 51 ++------ .../card/__stories__/card.stories.ts | 49 +++----- .../src/components/card/card-footer.ts | 21 +--- .../src/components/card/card.scss | 43 ------- .../src/components/card/card.ts | 10 -- .../cta/__stories__/ctaTypeConfig.js | 2 +- 17 files changed, 213 insertions(+), 230 deletions(-) diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md index d06874964b3..7ca5c698b3c 100644 --- a/docs/dotcom-v2-migration.md +++ b/docs/dotcom-v2-migration.md @@ -18,6 +18,7 @@ For Carbon v11 migration guidance, see their | back-to-top | View changes [here](#backtotop) | | background-media | No API changes. | | button | This component is deprecated in v2 in favor for Carbon's core Button | +| card | View changes [here] (#card) | | card-group-card-link-item | This component is deprecated in v2 in favor for default card or with content-item | | card-link | This component is deprecated in v2 in favor for card (link variant) component | | card-section-carousel | This component is deprecated in v2 in favor for content-section/block component combined with carousel | @@ -47,6 +48,12 @@ For Carbon v11 migration guidance, see their - +### Card + +- `` has `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 + ### CTA In Carbon for IBM.com v2, the CTA component (and all of its subcomponents) have been deprecated in favor of their base components. diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss index 94568642df0..c36f71eb7d1 100644 --- a/packages/styles/scss/components/card/_card.scss +++ b/packages/styles/scss/components/card/_card.scss @@ -18,8 +18,19 @@ @use '../../globals/utils/content-width' as *; @use '../../globals/utils/ratio-base' as *; @use '../lightbox-media-viewer/lightbox-media-viewer'; +@use '../link-with-icon/link-with-icon'; @mixin card { + .#{$prefix}--card, + :host(#{$c4d-prefix}-card), + :host(#{$c4d-prefix}-card-cta), + :host(#{$c4d-prefix}-card-group-item), + :host(#{$c4d-prefix}-card-group-item) .#{$prefix}--card, + :host(#{$c4d-prefix}-content-group-cards-item), + :host(#{$c4d-prefix}-content-group-cards-item) .#{$prefix}--card { + @include tile($enable-experimental-tile-contrast: true); + } + .#{$prefix}--card, :host(#{$c4d-prefix}-card), :host(#{$c4d-prefix}-link-list-item-card), @@ -40,8 +51,8 @@ padding: 0; transition: $duration-moderate-01 motion(standard, productive); - &:hover { - background-color: $background-hover; + .#{$prefix}-tile--clickable:hover { + background-color: $layer-hover-01; text-decoration: none; .#{$prefix}--card__wrapper { @@ -83,10 +94,12 @@ } &:focus-within { - outline: $spacing-01 solid $focus; - outline-offset: -#{$spacing-01}; - position: relative; - z-index: 2; + .#{$prefix}--tile--clickable { + outline: $spacing-01 solid $focus; + outline-offset: -#{$spacing-01}; + position: relative; + z-index: 2; + } ::slotted(#{$c4d-prefix}-image), ::slotted(#{$c4d-prefix}-card-cta-image), @@ -175,7 +188,7 @@ } .#{$prefix}--card__copy:not([hidden]) { - @include type-style('body-compact-02'); + @include type-style('body-02'); margin-bottom: $spacing-07; } @@ -191,6 +204,21 @@ } } + :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper { + @include ratio-base(1, 1, false); + } + + :host(#{$c4d-prefix}-card[aspect-ratio='3:2']) .#{$prefix}--card__wrapper { + @include ratio-base(3, 2, false); + } + + :host(#{$c4d-prefix}-card[aspect-ratio='4:3']) .#{$prefix}--card__wrapper { + @include ratio-base(4, 3, false); + } + + :host(#{$c4d-prefix}-card[aspect-ratio='16:9']) .#{$prefix}--card__wrapper { + @include ratio-base(16, 9, false); + } .#{$prefix}--card.#{$prefix}--card--light { background-color: $layer-02; } @@ -211,7 +239,7 @@ svg, .#{$prefix}--card__cta__copy { - color: $link-primary-hover; + color: $text-primary; } } @@ -350,7 +378,7 @@ .#{$c4d-prefix}-ce--card__footer ::slotted(svg[slot='icon']) { margin-left: 0; - color: $link-primary; + color: $icon-interactive; } :host(#{$c4d-prefix}-card-footer[disabled]) @@ -419,8 +447,8 @@ .#{$prefix}--card__cta__copy { max-width: calc(100% - 20px - #{$spacing-03}); margin-right: $spacing-03; - color: $link-primary; - @include type-style('body-compact-02'); + color: $text-primary; + @include type-style('body-02'); } .#{$prefix}--card__footer__copy { @@ -436,14 +464,6 @@ } } - :host(#{$c4d-prefix}-card-footer) a, - :host(#{$c4d-prefix}-card-cta-footer) a, - :host(#{$c4d-prefix}-card-in-card-footer) a { - @include breakpoint(md) { - padding-right: $spacing-07; - } - } - :host(#{$c4d-prefix}-feature-cta-footer) a { svg, ::slotted(svg[slot='icon']) { @@ -495,7 +515,9 @@ :host(#{$c4d-prefix}-card)[color-scheme='inverse'], :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse'] .#{$prefix}--card { - background-color: $background-inverse; + .#{$prefix}--tile { + background-color: $background-inverse; + } .#{$prefix}--card__wrapper:hover { background-color: $background-inverse-hover; @@ -532,7 +554,7 @@ bottom: 0; right: 0; border: $spacing-01 solid $focus; - outline: 1px solid $focus-inverse; + outline: 1px solid $focus-inset; outline-offset: -3px; pointer-events: none; } @@ -548,7 +570,7 @@ } :host(#{$c4d-prefix}-card-heading) { - @include type-style('fluid-heading-03', true); + @include type-style('heading-03', true); } :host(#{$c4d-prefix}-card-link-heading) { @@ -561,13 +583,10 @@ :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse'], :host(#{$c4d-prefix}-feature-section-card-link)[color-scheme='inverse'], .#{$prefix}--card-group__card { - ::slotted(#{$c4d-prefix}-card-eyebrow) { - color: $text-placeholder; - } - + ::slotted(#{$c4d-prefix}-card-eyebrow), ::slotted(#{$c4d-prefix}-card-heading), ::slotted(#{$c4d-prefix}-card-link-heading) { - color: $icon-inverse; + color: $text-inverse; } &:hover { @@ -801,4 +820,46 @@ gap: $spacing-05; } } + + :host(#{$c4d-prefix}-card-footer), + :host(#{$c4d-prefix}-card-cta-footer) { + .#{$c4d-prefix}-ce--card__footer--static { + color: $link-primary; + } + + .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon { + display: flex; + width: 100%; + justify-content: flex-end; + } + + &[color-scheme='inverse'] .#{$c4d-prefix}-ce--card__footer--static { + color: $link-inverse; + } + + &[color-scheme='inverse'] + .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon { + svg, + ::slotted(svg[slot='icon']) { + color: $link-inverse; + } + } + + &:hover { + ::slotted(svg[slot='icon']) { + color: $link-primary-hover; + } + } + } + + :host(#{$c4d-prefix}-card-cta-footer[cta-type='video']), + :host(#{$c4d-prefix}-card-footer[cta-type='video']) { + .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon { + justify-content: space-between; + } + } + + :host(#{$c4d-prefix}-card-footer[href])::after { + position: relative; + } } diff --git a/packages/styles/scss/globals/utils/_aspect-ratio.scss b/packages/styles/scss/globals/utils/_aspect-ratio.scss index 8984dd21621..0df69521af2 100644 --- a/packages/styles/scss/globals/utils/_aspect-ratio.scss +++ b/packages/styles/scss/globals/utils/_aspect-ratio.scss @@ -14,6 +14,6 @@ // // @return percentage of height vs width @function aspect-ratio($width, $height) { - $ratio: $height / $width * 100%; + $ratio: calc($height / $width) * 100%; @return $ratio; } diff --git a/packages/styles/scss/globals/utils/_ratio-base.scss b/packages/styles/scss/globals/utils/_ratio-base.scss index fe064ee2fe1..b17108c2e02 100644 --- a/packages/styles/scss/globals/utils/_ratio-base.scss +++ b/packages/styles/scss/globals/utils/_ratio-base.scss @@ -6,7 +6,7 @@ */ // mixin to give the ratio for lays doen for an aspect ratio -@use '../../globals/utils/aspect-ratio'; +@use '../../globals/utils/aspect-ratio' as *; @mixin ratio-base($height, $width, $fixed) { @if ($fixed) { diff --git a/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js b/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js index ec5f585c80e..75e541dbc04 100644 --- a/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js +++ b/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js @@ -42,15 +42,15 @@ describe('g11n formatter for video caption', () => { }); it('should fill zero for minutes', async () => { - expect(formatVideoDuration({ duration: 30000 })).toBe('0:30'); + expect(formatVideoDuration({ duration: 30000 })).toBe('0:30 min'); }); it('should fill zero for seconds', async () => { - expect(formatVideoDuration({ duration: 65000 })).toBe('1:05'); + expect(formatVideoDuration({ duration: 65000 })).toBe('1:05 min'); }); it('should support more than 1 minute', async () => { - expect(formatVideoDuration({ duration: 90000 })).toBe('1:30'); + expect(formatVideoDuration({ duration: 90000 })).toBe('1:30 min'); }); }); }); diff --git a/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js b/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js index 8249fd55d90..6118dbca2fe 100644 --- a/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js +++ b/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js @@ -33,10 +33,17 @@ export function formatVideoCaption({ duration, name } = {}) { * @returns {string} The formatted video duration. */ export function formatVideoDuration({ duration } = {}) { + const hours = Math.floor(((duration ?? 0) / (1000 * 60 * 60)) % 24); const minutes = Math.floor((duration ?? 0) / 60000); const seconds = Math.floor(((duration ?? 0) / 1000) % 60); + const fillSeconds = Array.from({ length: 2 - String(seconds).length + 1, }).join('0'); - return duration == null ? duration : `${minutes}:${fillSeconds}${seconds}`; + + return duration == null + ? duration + : hours + ? `${hours}:${minutes} hr` + : `${minutes}:${fillSeconds}${seconds} min`; } diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss index e388d304c63..e8d1f936969 100644 --- a/packages/web-components/.storybook/container.scss +++ b/packages/web-components/.storybook/container.scss @@ -12,6 +12,8 @@ @use '@carbon/styles/scss/themes' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/grid'; +@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens; +@include add-component-tokens(tag-tokens.$tag-tokens); // Emit the flex-grid styles @include grid.flex-grid(); diff --git a/packages/web-components/src/component-mixins/cta/cta.ts b/packages/web-components/src/component-mixins/cta/cta.ts index 0c0417f0e03..772305e7231 100644 --- a/packages/web-components/src/component-mixins/cta/cta.ts +++ b/packages/web-components/src/component-mixins/cta/cta.ts @@ -14,7 +14,7 @@ import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arr import Download20 from '../../internal/vendor/@carbon/web-components/icons/download/20.js'; import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer'; import Launch20 from '../../internal/vendor/@carbon/web-components/icons/launch/20.js'; -import PlayOutline20 from '../../internal/vendor/@carbon/web-components/icons/play--outline/20.js'; +import PlayFilledAlt20 from '../../internal/vendor/@carbon/web-components/icons/play--filled--alt/20.js'; import Blog20 from '../../internal/vendor/@carbon/web-components/icons/blog/20.js'; import DocumentPDF20 from '../../internal/vendor/@carbon/web-components/icons/document--pdf/20.js'; import NewTab20 from '../../internal/vendor/@carbon/web-components/icons/new-tab/20.js'; @@ -41,7 +41,7 @@ export const icons = { [CTA_TYPE.EXTERNAL]: Launch20, [CTA_TYPE.NEW_TAB]: NewTab20, [CTA_TYPE.JUMP]: ArrowDown20, - [CTA_TYPE.VIDEO]: PlayOutline20, + [CTA_TYPE.VIDEO]: PlayFilledAlt20, [CTA_TYPE.PDF]: DocumentPDF20, [CTA_TYPE.BLOG]: Blog20, [CTA_TYPE.EMAIL]: Email20, diff --git a/packages/web-components/src/component-mixins/cta/video.ts b/packages/web-components/src/component-mixins/cta/video.ts index 7c0fe0ba6c0..eda1b70e95c 100644 --- a/packages/web-components/src/component-mixins/cta/video.ts +++ b/packages/web-components/src/component-mixins/cta/video.ts @@ -11,7 +11,7 @@ import ArrowDown20 from '../../internal/vendor/@carbon/web-components/icons/arro import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js'; import Download20 from '../../internal/vendor/@carbon/web-components/icons/download/20.js'; import Launch20 from '../../internal/vendor/@carbon/web-components/icons/launch/20.js'; -import PlayOutline20 from '../../internal/vendor/@carbon/web-components/icons/play--outline/20.js'; +import PlayFilledAlt20 from '../../internal/vendor/@carbon/web-components/icons/play--filled--alt/20.js'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import { Constructor } from '../../globals/defs'; import { CTA_TYPE } from '../../components/cta/defs'; @@ -27,7 +27,7 @@ export const icons = { [CTA_TYPE.DOWNLOAD]: Download20, [CTA_TYPE.EXTERNAL]: Launch20, [CTA_TYPE.JUMP]: ArrowDown20, - [CTA_TYPE.VIDEO]: PlayOutline20, + [CTA_TYPE.VIDEO]: PlayFilledAlt20, }; /** 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 f980a721a98..e9332229bab 100644 --- a/packages/web-components/src/components/card/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/card/__stories__/README.stories.mdx @@ -31,10 +31,10 @@ import '@carbon/ibmdotcom-web-components/es/components/card/index.js'; ### HTML ```html - - Eyebrow text - Lorem ipsum dolor sit amet - + + Eyebrow text + Lorem ipsum dolor sit amet + Card CTA text - - + + ``` ## Card with pictogram @@ -61,11 +61,11 @@ to find a pictogram that fits your design. You can also check out the repo [here](https://github.com/carbon-design-system/carbon/tree/main/packages/pictograms) ```html - - Eyebrow text - Lorem ipsum dolor + Eyebrow text + Lorem ipsum dolor

Copy to be shown on hover if the pictogram placement is bottom

+ class="c4d--card__pictogram"> - + ``` ## Card - static @@ -97,16 +97,16 @@ variation will be rendered, where the card is no longer clickable and optional `Tag` elements can also be added. ```html - - Lorem ipsum dolor sit amet + + Lorem ipsum dolor sit amet ${copy ? html`

${copy}

` : ``} - + Most popular Enterprise - - + + Card CTA text - - + + ``` ## Card - logo @@ -131,22 +131,22 @@ If you need to use a Logo image for the Card component, use the Logo variant to ensure the Card properly accomodates to the Logo image. ```html - - + - Microsoft + default-src="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616"> + Microsoft

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

- + Most popular Enterprise - - - + + + ``` ## Light theme @@ -154,27 +154,38 @@ ensure the Card properly accomodates to the Logo image. An optional light theme is available under `color-scheme`. ```html - + +``` + +## Tags + +If using tags within `dds-card` in tandem with the dark themes, make sure the +proper styles are imported from `@carbon/styles` in your application. + +``` +@use '@carbon/styles/scss/themes' as *; +@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens; +@include add-component-tokens(tag-tokens.$tag-tokens); ``` ## Card with image -To add image to the `cds-card`, import the `image` component and place -`cds-image` within `cds-card`: +To add image to the `c4d-card`, import the `image` component and place +`c4d-image` within `c4d-card`: ```javascript import '@carbon/ibmdotcom-web-components/es/components/image/index.js'; ``` ```html - - Lorem ipsum dolor sit amet - - + + Lorem ipsum dolor sit amet + + Most popular Enterprise - - + + Card CTA text - - + + ``` ### CTA features @@ -218,19 +229,19 @@ following: Notes for `video`: - You need to pass the video ID as the `href` attribute. -- The Card component will need to be wrapped within a `cds-video-cta-container` +- The Card component will need to be wrapped within a `c4d-video-cta-container` components for videos to play. -- If left empty, the `cds-card-footer` can display the video duration. If not, +- If left empty, the `c4d-card-footer` can display the video duration. If not, it will be overridden with custom text. General note: -- Custom icons can replace the built-in ones within `cds-card-footer`, they only +- Custom icons can replace the built-in ones within `c4d-card-footer`, they only need to be assigned to the `icon` slot. ## Props - + ## Stable selectors @@ -240,6 +251,6 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | ----------------------- | ------------------------- | ----------- | -| `` | `data-autoid="cds--card"` | Component | +| `` | `data-autoid="c4d--card"` | Component | diff --git a/packages/web-components/src/components/card/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card/__stories__/README.stories.react.mdx index 6fb486b4706..8e8eba67479 100644 --- a/packages/web-components/src/components/card/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/card/__stories__/README.stories.react.mdx @@ -145,6 +145,17 @@ An optional light theme is available under `color-scheme`. ``` +## Tags + +If using tags within `dds-card` in tandem with the dark themes, make sure the +proper styles are imported from `@carbon/styles` in your application. + +``` +@use '@carbon/styles/scss/themes' as *; +@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens; +@include add-component-tokens(tag-tokens.$tag-tokens); +``` + ## Card with image To add image to the `C4DCard`, import the `C4DImage` component and place @@ -191,7 +202,7 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | ----------------------- | --------------------------------- | ----------- | -| `` | `data-autoid="cds--card"` | Component | -| `` | `data-autoid="cds--card-eyebrow"` | Component | -| `` | `data-autoid="cds--card-heading"` | Component | -| `` | `data-autoid="cds--card-footer"` | Component | +| `` | `data-autoid="c4d--card"` | Component | +| `` | `data-autoid="c4d--card-eyebrow"` | Component | +| `` | `data-autoid="c4d--card-heading"` | Component | +| `` | `data-autoid="c4d--card-footer"` | Component | diff --git a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx index 68697cc6851..a50625099c6 100644 --- a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx +++ b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx @@ -44,15 +44,8 @@ export const Default = (args) => { return ( /* eslint-disable no-nested-ternary */ + colorScheme={cardStyles === 'Inverse card' ? 'inverse' : ''} + href={href || undefined}> {image ? ( { + colorScheme={cardStyles === 'Inverse card' ? 'inverse' : ''}> {heading} {copy ?

{copy}

: ''} {tagGroup ? ( @@ -157,11 +139,7 @@ Pictogram.story = { heading: textNullable('Heading:', 'Aerospace and defence'), copy, href: 'https://example.com', - cardStyles: select( - 'Card style:', - ['Outlined card', 'Inverse card', 'none'], - 'none' - ), + cardStyles: select('Card style:', ['Inverse card', 'none'], 'none'), }; }, }, @@ -169,19 +147,10 @@ Pictogram.story = { }; export const Static = (args) => { - const { - image, - alt, - defaultSrc, - outlinedCard, - eyebrow, - heading, - copy, - tagGroup, - cta, - } = args?.StaticCard ?? {}; + const { image, alt, defaultSrc, eyebrow, heading, copy, tagGroup, cta } = + args?.StaticCard ?? {}; return ( - + {image ? ( { const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } = args?.Card ?? {}; return ( - + { const { + aspectRatio, ctaType, noPoster, image, @@ -49,7 +50,6 @@ export const Default = (args) => { eyebrow, tagGroup, copy, - footer, cardStyles, customVideoTitle, } = args?.Card ?? {}; @@ -68,22 +68,16 @@ export const Default = (args) => { videoCopy = customVideoTitle; } - if (!footer) { - videoFooterCopy = duration; - } + videoFooterCopy = duration; } return html` ${image ? html` @@ -97,7 +91,7 @@ export const Default = (args) => { ${videoCopy ?? heading} ${copy ? html`

${copy}

` : ``} ${tagGroup ? html` ${tagGroupContent} ` : ``} - ${videoFooterCopy ?? footer} + ${videoFooterCopy ?? ''} `; @@ -113,6 +107,11 @@ Default.story = { ...readme.parameters, knobs: { Card: () => { + const aspectRatio = select( + 'Aspect ratio (aspect-ratio)', + ['1:1', '2:1', '3:2', '4:3', '16:9', '1:1'], + '2:1' + ); const ctaType = select( 'CTA type (cta-type)', typeOptions, @@ -135,6 +134,7 @@ Default.story = { ctaType === CTA_TYPE.VIDEO ? boolean('No poster:', false) : null; return { + aspectRatio, customVideoTitle, ctaType, image, @@ -149,12 +149,7 @@ Default.story = { knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], hrefsForType[ctaType ?? CTA_TYPE.REGULAR] ), - footer: textNullable('CTA:', 'Learn more'), - cardStyles: select( - 'Card style:', - ['Outlined card', 'Inverse card', 'none'], - 'none' - ), + cardStyles: select('Card style:', ['Inverse card', 'none'], 'none'), }; }, }, @@ -169,7 +164,6 @@ Default.story = { defaultSrc: imgXlg4x3, tagGroup: false, href: 'https://example.com', - footer: 'Learn more', cardStyles: 'none', }, }, @@ -184,12 +178,7 @@ export const Pictogram = (args) => { + color-scheme=${cardStyles === 'Inverse card' ? 'inverse' : ''}> ${heading} ${copy ? html`

${copy}

` : ``} ${tagGroup ? html` ${tagGroupContent} ` : ``} @@ -244,7 +233,7 @@ Pictogram.story = { href: 'https://example.com', cardStyles: select( 'Card style:', - ['Outlined card', 'Inverse card', 'none'], + ['Inverse card', 'none'], 'none', 'pictogram' ), @@ -271,7 +260,6 @@ export const Static = (args) => { image, alt, defaultSrc, - outlinedCard, eyebrow, heading, copy, @@ -280,9 +268,7 @@ export const Static = (args) => { ctaCopy, } = args?.Card ?? {}; return html` - + ${image ? html` { const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } = args?.Card ?? {}; return html` - +