diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss index c74361be73a..cdb9e46b2ab 100644 --- a/packages/styles/scss/components/card-group/_card-group.scss +++ b/packages/styles/scss/components/card-group/_card-group.scss @@ -59,6 +59,10 @@ :host(#{$c4d-prefix}-card-group-item) { display: contents; + * { + row-gap: 0; + } + .#{$prefix}--card { display: grid; border: 0; @@ -73,6 +77,7 @@ display: grid; justify-content: revert; grid-row: span 10; + grid-template-columns: subgrid; grid-template-rows: subgrid; &::before, @@ -91,15 +96,15 @@ .#{$prefix}--card__content { display: grid; grid-area: 1 / 1 / -1 / -1; + grid-template-columns: subgrid; grid-template-rows: subgrid; - row-gap: 0; } .#{$prefix}--card__copy { display: grid; grid-row: span 2; + grid-template-columns: subgrid; grid-template-rows: subgrid; - row-gap: 0; } } diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss index d63c6cd9cf5..3f84b32e114 100644 --- a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss +++ b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss @@ -340,7 +340,7 @@ $hover-transition-timing: 95ms; .#{$prefix}--toc__navbar-chevron-right-container { z-index: 2; - inset-inline-end: -$spacing-01; + inset-inline-end: 0; @include breakpoint(md) { inset-inline-end: -$spacing-05; @@ -417,11 +417,11 @@ $hover-transition-timing: 95ms; border-block-start: 1px solid $border-subtle-00; content: ''; inset-block-start: -1px; - inset-inline: calc(-50vw + 50%) 100%; + inset-inline: calc(-50vw + 50% + $spacing-03) 100%; } &::after { - inset-inline: 100% calc(-50vw + 50%); + inset-inline: 100% calc(-50vw + 50% + $spacing-03); } } 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 598b15243c7..3666243ef16 100644 --- a/packages/web-components/src/components/card/__stories__/card.stories.ts +++ b/packages/web-components/src/components/card/__stories__/card.stories.ts @@ -38,6 +38,14 @@ const tagGroupContent = html` `; +const copyMarkupContent = html` + +`; + export const Default = (args) => { const { aspectRatio, @@ -52,6 +60,7 @@ export const Default = (args) => { eyebrow, tagGroup, copy, + copyMarkup, cardStyles, customVideoTitle, } = args?.Card ?? {}; @@ -96,7 +105,7 @@ export const Default = (args) => { : ``} ${eyebrow} ${videoCopy ?? heading} - ${copy ? html`

${copy}

` : ``} + ${copyMarkup ? copyMarkupContent : copy ? html`

${copy}

` : ``} ${tagGroup ? html` ${tagGroupContent} ` : ``} ${ctaType === CTA_TYPE.VIDEO ? html` ${videoFooterCopy} ` @@ -152,6 +161,7 @@ Default.story = { eyebrow: textNullable('Eyebrow:', 'Industry'), heading, copy: textNullable('Body copy:', ''), + copyMarkup: boolean('Body copy markup', false), alt: 'Image alt text', defaultSrc: imgXlg4x3, tagGroup: boolean('Add tags:', false), @@ -170,6 +180,7 @@ Default.story = { eyebrow: 'Industry', heading: 'Aerospace and defence', copy: '', + copyMarkup: false, alt: 'Image alt text', defaultSrc: imgXlg4x3, tagGroup: false, diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts index 2a1f42a695e..3fb38960cde 100644 --- a/packages/web-components/src/components/card/card.ts +++ b/packages/web-components/src/components/card/card.ts @@ -105,8 +105,12 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) { /** * Handles `slotchange` event for the copy slot. */ - protected _handleCopySlotChange() { - this._hasCopy = Boolean(this.querySelector('p')); + protected _handleCopySlotChange({ target }: Event) { + this._hasCopy = (target as HTMLSlotElement) + .assignedNodes() + .some( + (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim() + ); } /** diff --git a/packages/web-components/src/components/cta-block/cta-block.scss b/packages/web-components/src/components/cta-block/cta-block.scss index 0a57d7c1d45..89f576b637e 100644 --- a/packages/web-components/src/components/cta-block/cta-block.scss +++ b/packages/web-components/src/components/cta-block/cta-block.scss @@ -169,6 +169,7 @@ position: relative; display: grid; grid-row: auto / span 5; + grid-template-columns: subgrid; grid-template-rows: subgrid; inline-size: 100%; margin-block: 0; diff --git a/packages/web-components/src/components/cta/video-cta-composite.ts b/packages/web-components/src/components/cta/video-cta-composite.ts index e8ec0be84d5..4a0b81120df 100644 --- a/packages/web-components/src/components/cta/video-cta-composite.ts +++ b/packages/web-components/src/components/cta/video-cta-composite.ts @@ -41,7 +41,6 @@ class C4DVideoCTAComposite extends ModalRenderMixin( * * @internal */ - @state() _embedMedia?: (videoId: string) => Promise; /**