From 18e367fc9fbb054fff584972242135cae60c666c Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Mon, 18 Sep 2023 13:57:28 -0700 Subject: [PATCH 1/3] feat(card-link): updaate v2 --- docs/dotcom-v2-migration.md | 3 +- .../styles/scss/components/card/_card.scss | 24 ++ .../card-link/__stories__/README.stories.mdx | 69 ----- .../__stories__/README.stories.react.mdx | 58 ----- .../__stories__/card-link.stories.react.tsx | 72 ------ .../__stories__/card-link.stories.ts | 71 ------ .../card/__stories__/README.stories.mdx | 12 +- .../card/__stories__/README.stories.react.mdx | 18 +- .../card/__stories__/card.stories.react.tsx | 241 ++++++++++++++---- .../card/__stories__/card.stories.ts | 84 ++++++ .../src/components/card/card-footer.ts | 5 +- .../src/components/card/card.ts | 9 + .../src/components/cta/cta.scss | 1 - 13 files changed, 347 insertions(+), 320 deletions(-) delete mode 100644 packages/web-components/src/components/card-link/__stories__/README.stories.mdx delete mode 100644 packages/web-components/src/components/card-link/__stories__/README.stories.react.mdx delete mode 100644 packages/web-components/src/components/card-link/__stories__/card-link.stories.react.tsx delete mode 100644 packages/web-components/src/components/card-link/__stories__/card-link.stories.ts diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md index a8f4792135f..74e31f5d7a6 100644 --- a/docs/dotcom-v2-migration.md +++ b/docs/dotcom-v2-migration.md @@ -22,7 +22,7 @@ For Carbon v11 migration guidance, see their | callout-quote | View changes [here](#callout-quote) | | 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-link | This component is deprecated in v2 in favor for [card](#card) (link variant) component | | card-section-carousel | This component is deprecated in v2 in favor for content-section/block component combined with carousel | | card-section-simple | This component is deprecated in v2 in facor for content-section/block component combined with card-group | | content-block-cards | This component is deprecated in v2 in favor for content-section/block & card-group components | @@ -62,6 +62,7 @@ For Carbon v11 migration guidance, see their - `` 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 +- New `link` property which takes the place of the deprecated `card-link` ### CTA diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss index b3ebab2e452..8eb29a5e307 100644 --- a/packages/styles/scss/components/card/_card.scss +++ b/packages/styles/scss/components/card/_card.scss @@ -433,6 +433,18 @@ } } } + + &[link] { + ::slotted(#{$c4d-prefix}-card-heading) { + @include type-style('heading-02'); + + margin-bottom: 0; + } + + .#{$prefix}--card .#{$prefix}--card__copy { + margin-top: 0; + } + } } :host(#{$c4d-prefix}-card-cta), @@ -751,6 +763,18 @@ } } + :host(#{$c4d-prefix}-card[disabled]) { + .#{$prefix}--card { + cursor: not-allowed; + } + + .#{$prefix}--card__copy, + ::slotted(#{$c4d-prefix}-card-eyebrow), + ::slotted(#{$c4d-prefix}-card-heading) { + color: $text-disabled; + } + } + :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 { diff --git a/packages/web-components/src/components/card-link/__stories__/README.stories.mdx b/packages/web-components/src/components/card-link/__stories__/README.stories.mdx deleted file mode 100644 index 0ba16a1b1a1..00000000000 --- a/packages/web-components/src/components/card-link/__stories__/README.stories.mdx +++ /dev/null @@ -1,69 +0,0 @@ -import { - Preview, - Props, - Description, - Story, -} from '@storybook/addon-docs/blocks'; -import contributing from '../../../../../../docs/contributing-license.md'; -import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; - -# Card Link - -> 💡 Check our -> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-link) -> example implementation. - -[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-link) - -## Getting started - -Here's a quick example to get you started. - -### JS (via import) - -```javascript -import '@carbon/ibmdotcom-web-components/es/components/card-link/index.js'; -``` - - - - - -### HTML - -```html - - Heading text -

Optional copy text

- - -``` - -## Props - - - -## 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. - -| Web Components selector | Compatibility selector | Description | -| ------------------------- | -------------------------------------- | ----------- | -| `` | `data-autoid="cds--card-link"` | Component | -| `` | `data-autoid="cds--card-link-heading"` | Component | - - diff --git a/packages/web-components/src/components/card-link/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-link/__stories__/README.stories.react.mdx deleted file mode 100644 index 60a6e851ba8..00000000000 --- a/packages/web-components/src/components/card-link/__stories__/README.stories.react.mdx +++ /dev/null @@ -1,58 +0,0 @@ -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/card-link/card-link'; - -# Card Link - -> 💡 Check our -> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card-link) -> example implementation. - -[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card-link) - -## Getting started - -Here's a quick example to get you started. - -### JS - -```javascript -import C4DCardLink from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link.js'; -import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading'; -import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; - -function App() { - return ( - - Heading text -

Optional copy text

- - - - - ); -} -``` - -## Props - - - -## 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. - -| Web Components selector | Compatibility selector | Description | -| ------------------------- | ---------------------- | ----------- | -| `` | N/A | Component | -| `` | N/A | Component | - - diff --git a/packages/web-components/src/components/card-link/__stories__/card-link.stories.react.tsx b/packages/web-components/src/components/card-link/__stories__/card-link.stories.react.tsx deleted file mode 100644 index 05a046a7d39..00000000000 --- a/packages/web-components/src/components/card-link/__stories__/card-link.stories.react.tsx +++ /dev/null @@ -1,72 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 2022 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { boolean } from '@storybook/addon-knobs'; -import React from 'react'; -import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js'; -import Error20 from '@carbon/icons-react/es/error/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 -import C4DCardLink from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link'; -import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading'; -import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer'; -import readme from './README.stories.react.mdx'; -import textNullable from '../../../../.storybook/knob-text-nullable'; - -export const Default = (args) => { - const { disabled, href, heading, copy } = args?.CardLink ?? {}; - return ( - - {heading} - {copy ?

{copy}

: ''} - - {' '} - {disabled ? : }{' '} - - - ); -}; - -Default.story = { - parameters: { - knobs: { - CardLink: () => ({ - disabled: boolean('Disabled (disabled):', false), - href: textNullable('Card href (href):', 'https://example.com'), - heading: textNullable( - 'Card heading (heading):', - 'Explore AI use cases in all industries' - ), - copy: textNullable('Card copy (copy):', ''), - }), - }, - }, -}; - -export default { - title: 'Components/Card link', - decorators: [ - (story) => { - return ( -
-
-
- {story()} -
-
-
- ); - }, - ], - parameters: { - ...readme.parameters, - hasStoryPadding: true, - }, -}; diff --git a/packages/web-components/src/components/card-link/__stories__/card-link.stories.ts b/packages/web-components/src/components/card-link/__stories__/card-link.stories.ts deleted file mode 100644 index bb7f49d876d..00000000000 --- a/packages/web-components/src/components/card-link/__stories__/card-link.stories.ts +++ /dev/null @@ -1,71 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { boolean } from '@storybook/addon-knobs'; -import { html } from 'lit'; -import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js'; -import Error20 from '../../../internal/vendor/@carbon/web-components/icons/error/20.js'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import readme from './README.stories.mdx'; -import textNullable from '../../../../.storybook/knob-text-nullable'; -import '../index'; - -export const Default = (args) => { - const { disabled, href, heading, copy } = args?.CardLink ?? {}; - return html` - - ${heading} - ${copy ? html`

${copy}

` : ``} - - ${disabled ? Error20({ slot: 'icon' }) : ArrowRight20({ slot: 'icon' })} - - - `; -}; - -export default { - title: 'Components/Card link', - decorators: [ - (story) => html` -
-
-
- ${story()} -
-
-
- `, - ], - parameters: { - ...readme.parameters, - hasStoryPadding: true, - knobs: { - CardLink: () => ({ - disabled: boolean('Disabled (disabled):', false), - href: textNullable('Card href (href):', 'https://example.com'), - heading: textNullable( - 'Card heading (heading):', - 'Explore AI use cases in all industries' - ), - copy: textNullable('Card copy (copy):', ''), - }), - }, - propsSet: { - default: { - CardLink: { - disabled: false, - href: 'https://example.com', - heading: 'Explore AI use cases in all industries', - copy: '', - }, - }, - }, - }, -}; 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 e9332229bab..65e4fa92884 100644 --- a/packages/web-components/src/components/card/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/card/__stories__/README.stories.mdx @@ -35,7 +35,6 @@ import '@carbon/ibmdotcom-web-components/es/components/card/index.js'; Eyebrow text Lorem ipsum dolor sit amet - Card CTA text ``` +## Card - link + +```html + + Card link heading + + +``` + ## Card - logo 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 - + Eyebrow text Lorem ipsum dolor sit amet - Card CTA text @@ -99,6 +98,23 @@ function App() { } ``` +## Card - link + +```javascript +import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card'; +import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading'; +import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer'; + +function App() { + return ( + + Card link heading + + + ); +} +``` + ## Card - logo If you need to use a Logo image for the Card component, use the Logo variant to 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 e227278b334..33e230481a4 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 @@ -20,6 +20,7 @@ import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/ import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image'; import C4DImageLogo from '@carbon/ibmdotcom-web-components/es/components-react/card/image-logo'; import C4DTagGroup from '@carbon/ibmdotcom-web-components/es/components-react/tag-group/tag-group'; +import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container'; import Tag from '@carbon/web-components/es/components-react/tag/tag.js'; import textNullable from '../../../../.storybook/knob-text-nullable'; @@ -28,8 +29,20 @@ import imgXlg4x3 from '../../../../../storybook-images/assets/1312/fpo--4x3--131 import logoMicrosoft2x1 from '../../../../../storybook-images/assets/logos/logo-microsoft--2x1.png'; import { PICTOGRAM_PLACEMENT } from '../defs'; +import { CTA_TYPE } from '../../cta/defs'; +import { + hrefsForType, + knobNamesForType, + typeOptions, + types, +} from '../../cta/__stories__/ctaTypeConfig'; + export const Default = (args) => { const { + aspectRatio, + ctaType, + disabled, + noPoster, image, href, alt, @@ -38,27 +51,52 @@ export const Default = (args) => { eyebrow, tagGroup, copy, - footer, cardStyles, + customVideoTitle, } = args?.Card ?? {}; + /* eslint-disable no-nested-ternary */ + + let videoCopy; + let videoFooterCopy; + + if (ctaType === CTA_TYPE.VIDEO) { + const card = document.querySelector('c4d-card') as any; + const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop(); + + if (!customVideoTitle) { + videoCopy = card?.videoTitle; + } else { + videoCopy = customVideoTitle; + } + + videoFooterCopy = duration; + } + + const copyComponent = document.querySelector('c4d-card')?.querySelector('p'); + if (copyComponent) { + copyComponent!.innerHTML = copy; + } + return ( - /* eslint-disable no-nested-ternary */ - - {image ? ( - - ) : ( - '' - )} - {eyebrow} - {heading} - {copy ?

{copy}

: ''} - {tagGroup ? ( + + + {image + ? + + : ``} + {eyebrow} + {videoCopy ?? heading} + {copy ?

: ``} + {tagGroup ? ( Most popular Enterprise @@ -66,29 +104,65 @@ export const Default = (args) => { ) : ( '' )} - - {footer} - - - + {ctaType === CTA_TYPE.VIDEO + ? {videoFooterCopy} + : } + + ); }; Default.story = { parameters: { + ...readme.parameters, knobs: { - Card: () => ({ - image: boolean('Add image:', false), - eyebrow: textNullable('Eyebrow:', 'Industry'), - heading: textNullable('Heading:', 'Aerospace and defence'), - copy: textNullable('Body copy:', ''), - alt: 'Image alt text', - defaultSrc: imgXlg4x3, - tagGroup: boolean('Add tags:', false), - href: 'https://example.com', - footer: textNullable('CTA:', 'Learn more'), - cardStyles: select('Card style:', ['Inverse card', 'none'], 'none'), - }), + 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, + types[CTA_TYPE.LOCAL] + ); + + const heading = + ctaType === CTA_TYPE.VIDEO + ? undefined + : textNullable('Heading:', 'Aerospace and defence'); + + const customVideoTitle = + ctaType === CTA_TYPE.VIDEO + ? textNullable('Custom video title', 'Custom video title') + : null; + + const image = + ctaType === CTA_TYPE.VIDEO ? null : boolean('Add image:', false); + const noPoster = + ctaType === CTA_TYPE.VIDEO ? boolean('No poster:', false) : null; + + return { + disabled: boolean('Disabled:', false), + aspectRatio, + customVideoTitle, + ctaType, + image, + noPoster, + eyebrow: textNullable('Eyebrow:', 'Industry'), + heading, + copy: textNullable('Body copy:', ''), + alt: 'Image alt text', + defaultSrc: imgXlg4x3, + tagGroup: boolean('Add tags:', false), + href: textNullable( + knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], + hrefsForType[ctaType ?? CTA_TYPE.REGULAR] + ), + cardStyles: select('Card style:', ['Inverse card', 'none'], 'none'), + }; + }, }, }, }; @@ -151,15 +225,13 @@ export const Static = (args) => { args?.StaticCard ?? {}; return ( - {image ? ( - - ) : ( - '' - )} + {image + ? + + : ``} {eyebrow} {heading} {copy ?

{copy}

: ''} @@ -242,6 +314,87 @@ export const Logo = (args) => { ); }; +export const Link = (args) => { + const { disabled, ctaType, href, heading, copy, customVideoTitle } = + args?.Card ?? {}; + + let videoCopy; + + if (ctaType === CTA_TYPE.VIDEO) { + const card = document.querySelector('c4d-card') as any; + const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop(); + + if (!customVideoTitle) { + videoCopy = card?.videoTitle; + } else { + videoCopy = customVideoTitle; + } + + console.log(card.querySelector('c4d-card-footer'), duration); + + card.querySelector('c4d-card-footer')!.innerHTML = duration ?? ''; + } + + const copyComponent = document.querySelector('c4d-card')?.querySelector('p'); + if (copyComponent) { + copyComponent!.innerHTML = copy; + } + + return ( + + + {videoCopy ?? heading} + {copy ?

: ``} + + + + ); +}; + +Link.story = { + parameters: { + ...readme.parameters, + knobs: { + Card: () => { + const ctaType = select( + 'CTA type (cta-type)', + typeOptions, + types[CTA_TYPE.LOCAL] + ); + + const heading = + ctaType === CTA_TYPE.VIDEO + ? undefined + : textNullable('Heading:', 'Aerospace and defence'); + + const customVideoTitle = + ctaType === CTA_TYPE.VIDEO + ? textNullable('Custom video title', 'Custom video title') + : null; + + return { + disabled: boolean('Disabled: ', false), + customVideoTitle, + ctaType, + heading, + copy: textNullable('Body copy:', ''), + alt: 'Image alt text', + defaultSrc: imgXlg4x3, + href: textNullable( + knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], + hrefsForType[ctaType ?? CTA_TYPE.REGULAR] + ), + }; + }, + }, + }, +}; + Logo.story = { parameters: { ...readme.parameters, 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 eabccc6902e..355141c10e1 100644 --- a/packages/web-components/src/components/card/__stories__/card.stories.ts +++ b/packages/web-components/src/components/card/__stories__/card.stories.ts @@ -41,6 +41,7 @@ export const Default = (args) => { const { aspectRatio, ctaType, + disabled, noPoster, image, href, @@ -79,6 +80,7 @@ export const Default = (args) => { return html` { + const { disabled, ctaType, href, heading, copy, customVideoTitle } = + args?.Card ?? {}; + + let videoCopy; + + if (ctaType === CTA_TYPE.VIDEO) { + const card = document.querySelector('c4d-card') as any; + const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop(); + + if (!customVideoTitle) { + videoCopy = card?.videoTitle; + } else { + videoCopy = customVideoTitle; + } + + console.log(card.querySelector('c4d-card-footer'), duration); + + card.querySelector('c4d-card-footer')!.innerHTML = duration ?? ''; + } + + const copyComponent = document.querySelector('c4d-card')?.querySelector('p'); + if (copyComponent) { + copyComponent!.innerHTML = copy; + } + + return html` + + + ${videoCopy ?? heading} + ${copy ? html`

` : ``} + + + + `; +}; + +Link.story = { + parameters: { + ...readme.parameters, + knobs: { + Card: () => { + const ctaType = select( + 'CTA type (cta-type)', + typeOptions, + types[CTA_TYPE.LOCAL] + ); + + const heading = + ctaType === CTA_TYPE.VIDEO + ? undefined + : textNullable('Heading:', 'Aerospace and defence'); + + const customVideoTitle = + ctaType === CTA_TYPE.VIDEO + ? textNullable('Custom video title', 'Custom video title') + : null; + + return { + disabled: boolean('Disabled: ', false), + customVideoTitle, + ctaType, + heading, + copy: textNullable('Body copy:', ''), + alt: 'Image alt text', + defaultSrc: imgXlg4x3, + href: textNullable( + knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], + hrefsForType[ctaType ?? CTA_TYPE.REGULAR] + ), + }; + }, + }, + }, +}; + export const Logo = (args) => { const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } = args?.Card ?? {}; diff --git a/packages/web-components/src/components/card/card-footer.ts b/packages/web-components/src/components/card/card-footer.ts index 667a594ac22..57cb86526df 100644 --- a/packages/web-components/src/components/card/card-footer.ts +++ b/packages/web-components/src/components/card/card-footer.ts @@ -12,6 +12,7 @@ import { property, query, state } from 'lit/decorators.js'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js'; import C4DLinkWithIcon from '../link-with-icon/link-with-icon'; +import Error20 from '../../internal/vendor/@carbon/web-components/icons/error/20.js'; import { BASIC_COLOR_SCHEME } from '../../globals/defs'; import styles from './card.scss'; @@ -72,7 +73,9 @@ class C4DCardFooter extends C4DLinkWithIcon { } _renderInner() { - return html` ${this._renderContent()}${this._renderIcon()} `; + return html` + ${this._renderContent()} ${this.disabled ? Error20() : this._renderIcon()} + `; } /** diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts index eb2de40c910..8793b2250fe 100644 --- a/packages/web-components/src/components/card/card.ts +++ b/packages/web-components/src/components/card/card.ts @@ -206,6 +206,12 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) { @property({ attribute: 'pictogram-placement', reflect: true }) pictogramPlacement = PICTOGRAM_PLACEMENT.BOTTOM; + /** + * Whether or not to apply the link style. + */ + @property({ type: Boolean, reflect: true }) + link = false; + /** * Whether or not to apply the logo style. */ @@ -221,6 +227,7 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) { if ( changedProperties.has('ctaType') || + changedProperties.has('disabled') || changedProperties.has('formatCaption') || changedProperties.has('formatDuration') || changedProperties.has('videoDuration') || @@ -228,6 +235,7 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) { ) { const { ctaType, + disabled, videoDuration, videoName, videoDescription, @@ -246,6 +254,7 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) { if (videoDuration !== undefined) { ariaDuration = `, DURATION ${videoDuration}`; } + (footer as C4DCardFooter).disabled = disabled; (footer as C4DCardFooter).altAriaLabel = `${ariaTitle}${ariaDuration}`; (footer as C4DCardFooter).ctaType = ctaType; (footer as C4DCardFooter).videoDuration = videoDuration; diff --git a/packages/web-components/src/components/cta/cta.scss b/packages/web-components/src/components/cta/cta.scss index f129e2c8dc6..a117bf096bb 100644 --- a/packages/web-components/src/components/cta/cta.scss +++ b/packages/web-components/src/components/cta/cta.scss @@ -9,7 +9,6 @@ @use '../button-group/button-group'; @use '../link-with-icon/link-with-icon'; @use '../feature-card/feature-card'; /* Covers regular card style, too */ -@use '../card-link/card-link'; @use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; .#{$c4d-prefix}-ce--cta__icon { From 13b0605902741ba08a3baedcf239378cd0e28f6b Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Wed, 20 Sep 2023 07:49:59 -0700 Subject: [PATCH 2/3] fix(card): pr comments --- packages/styles/scss/components/card/_card.scss | 16 ++++++++-------- .../card/__stories__/card.stories.react.tsx | 4 +--- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss index 8eb29a5e307..c044e425dba 100644 --- a/packages/styles/scss/components/card/_card.scss +++ b/packages/styles/scss/components/card/_card.scss @@ -433,17 +433,17 @@ } } } + } - &[link] { - ::slotted(#{$c4d-prefix}-card-heading) { - @include type-style('heading-02'); + :host(#{$c4d-prefix}-card[link]) { + ::slotted(#{$c4d-prefix}-card-heading) { + @include type-style('heading-02'); - margin-bottom: 0; - } + margin-bottom: 0; + } - .#{$prefix}--card .#{$prefix}--card__copy { - margin-top: 0; - } + .#{$prefix}--card .#{$prefix}--card__copy { + margin-top: 0; } } 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 33e230481a4..d71b8e88568 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 @@ -329,9 +329,7 @@ export const Link = (args) => { } else { videoCopy = customVideoTitle; } - - console.log(card.querySelector('c4d-card-footer'), duration); - + card.querySelector('c4d-card-footer')!.innerHTML = duration ?? ''; } From 57346646b089fd415cd273589fb7abacb21d30df Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Thu, 21 Sep 2023 08:45:38 -0700 Subject: [PATCH 3/3] fix(callout): format --- .../components/callout-with-media/_callout-with-media.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss index 54ab0ecec35..6b579fdaaf1 100644 --- a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss +++ b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss @@ -91,7 +91,8 @@ @extend :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']); } - :host(#{$c4d-prefix}-callout-with-media-image) .#{$c4d-prefix}--image__caption, + :host(#{$c4d-prefix}-callout-with-media-image) + .#{$c4d-prefix}--image__caption, :host(#{$c4d-prefix}-callout-with-media-video) ::slotted(#{$c4d-prefix}-video-player) { @extend :host(#{$c4d-prefix}-callout-caption);