diff --git a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss index 2d90540752e..972fed809a4 100644 --- a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss +++ b/packages/styles/scss/components/leadspace-block/_leadspace-block.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. @@ -30,6 +30,10 @@ ::slotted(#{$c4d-prefix}-leadspace-block-content) { padding: 0; } + + .#{$prefix}--content-layout ::slotted(*:not([slot])) { + margin: 0; + } } :host(#{$c4d-prefix}-leadspace-block[border]) { diff --git a/packages/styles/scss/components/link-list/_link-list.scss b/packages/styles/scss/components/link-list/_link-list.scss index 6324b751574..4ee0b5878e2 100644 --- a/packages/styles/scss/components/link-list/_link-list.scss +++ b/packages/styles/scss/components/link-list/_link-list.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. @@ -104,14 +104,6 @@ } @include type-style('heading-02'); - - @include breakpoint(md) { - margin-inline-start: -$spacing-05; - } - - @include breakpoint(lg) { - margin-inline-start: 0; - } } :host(#{$c4d-prefix}-link-list-item)[type='default'], @@ -177,8 +169,4 @@ min-block-size: 20px; min-inline-size: 20px; } - - :host(#{$c4d-prefix}-link-list):last-of-type { - padding-block-end: $spacing-10; - } } diff --git a/packages/styles/scss/internal/content-block/_content-block.scss b/packages/styles/scss/internal/content-block/_content-block.scss index 396389ca780..0bc91c9e8f7 100644 --- a/packages/styles/scss/internal/content-block/_content-block.scss +++ b/packages/styles/scss/internal/content-block/_content-block.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. @@ -10,6 +10,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; @use '../../globals/utils/content-width' as *; @use '../../globals/utils/flex-grid' as *; @@ -27,20 +28,18 @@ :host(#{$c4d-prefix}-content-block-headlines), .#{$prefix}--content-block { display: block; - padding-block: $spacing-07 $spacing-10; + margin-block: $spacing-07; + margin-block-end: $spacing-12; - @include breakpoint(md) { - padding-block: $spacing-10 $spacing-12; - } - - @include breakpoint(max) { - padding-block-end: $spacing-13; + @include breakpoint('lg') { + margin-block: $spacing-10; + margin-block-end: $spacing-13; } - .#{$prefix}--card__CTA { - // TO DO: aspect ratio 2x1 - @include breakpoint(md) { - @include hang; + &[complementary-style-scheme='with-border'] { + margin-block-end: $spacing-07; + @include breakpoint('lg') { + margin-block-end: $spacing-10; } } @@ -70,40 +69,47 @@ &.#{$prefix}--layout--border { margin-inline: 0; + margin-inline-end: 0; + padding-block-end: $spacing-10; padding-inline: 0; + padding-inline-end: 0; + + @include breakpoint('lg') { + padding-block-end: $spacing-12; + } } - // Most slotted contents have margins aligning to Carbon grid gutters. - // Note: Child contents define their margin by their own - ::slotted([slot]) { - margin-inline: $spacing-05; + ::slotted([slot='heading']), + ::slotted([slot='copy']), + ::slotted(*:not([slot])) { + margin-inline-start: $spacing-05; } - // Cards and link lists are the exceptions of above - // TODO: Remove negative margin adjustment from `` and add `` here - ::slotted(#{$c4d-prefix}-card[slot]), - ::slotted(#{$c4d-prefix}-card-cta[slot]), - ::slotted(#{$c4d-prefix}-card-link-cta[slot]) { - margin-inline: 0; + ::slotted(#{$c4d-prefix}-content-group:not([slot])), + ::slotted([data-autoid^='c4d--tabs-']:not([slot])), + ::slotted([data-autoid^='c4d--card']:not([slot])) { + margin-inline-start: 0; } &__aside, ::slotted([slot='complementary']) { grid-area: complementary; - margin-block: $layout-05; - - @include breakpoint(lg) { - margin-block: 0; - } } - ::slotted([slot='footer']) { - margin-block-start: $spacing-09; + ::slotted(#{$c4d-prefix}-card[slot='footer']) { + @include make-col(4, 4); @include breakpoint(md) { - inline-size: 50%; - margin-block-start: $spacing-10; + @include make-col(4, 8); } + + @include breakpoint(lg) { + @include make-col(4, 12); + } + } + + ::slotted([slot='footer']:not(#{$c4d-prefix}-card)) { + padding-inline-start: $spacing-05; } ::slotted([slot='heading']) { @@ -142,6 +148,31 @@ 'footer footer footer footer footer footer footer footer . complementary complementary complementary'; grid-template-columns: repeat(12, 1fr); } + + ::slotted(#{$c4d-prefix}-card[slot='footer']) { + @include make-col(4, 4); + + @include breakpoint(md) { + @include make-col(4, 8); + } + } + + ::slotted([slot='complementary']) { + margin-inline: $spacing-05; + } + } + + .#{$prefix}--content-layout--with-complementary.#{$prefix}--content-layout--with-footer { + @include breakpoint-down(lg) { + ::slotted([slot='complementary']) { + padding-block-start: $spacing-07; + } + } + } + + .#{$prefix}--content-layout--with-children + .#{$c4d-prefix}--content-block-footer { + padding-block-start: $spacing-07; } .#{$prefix}--content-layout__body { @@ -182,7 +213,7 @@ :host(#{$c4d-prefix}-callout-with-media-copy), .#{$prefix}--content-block__heading, .#{$prefix}--content-block__copy { - @include content-width; + max-inline-size: to-rem(640px); } :host(#{$c4d-prefix}-content-block-heading), @@ -243,4 +274,36 @@ padding-inline: $spacing-05; } } + + :host(#{$c4d-prefix}-content-block), + :host(#{$c4d-prefix}-callout-with-media-copy), + :host(#{$c4d-prefix}-content-block-copy), + :host(#{$c4d-prefix}-content-block-heading), + :host(#{$c4d-prefix}-content-block-complementary), + :host(#{$c4d-prefix}-content-block-paragraph) { + display: block; + } + + // TODO: Consider applying this rule in general + :host(#{$c4d-prefix}-content-block-simple), + :host(#{$c4d-prefix}-content-block-segmented) { + ::slotted(#{$c4d-prefix}-callout-with-media-copy), + ::slotted(#{$c4d-prefix}-content-block-copy) { + @include breakpoint(md) { + inline-size: calc((100% - 2 * #{$spacing-05}) * 0.9); + } + } + } + + :host(#{$c4d-prefix}-callout-with-media-copy[size='sm']), + :host(#{$c4d-prefix}-content-block-copy[size='sm']) { + ::slotted(#{$c4d-prefix}-content-block-paragraph) { + @include type-style('body-02', true); + } + } + + // TODO: Apply `cds--make-col(2, 3)` to React version, too, so we can merge the style to React version + .#{$c4d-prefix}-ce--content-block__col { + @include make-col(2, 3); + } } diff --git a/packages/styles/scss/internal/content-group/_content-group.scss b/packages/styles/scss/internal/content-group/_content-group.scss index d2e6628f443..ca9f9b60b7f 100644 --- a/packages/styles/scss/internal/content-group/_content-group.scss +++ b/packages/styles/scss/internal/content-group/_content-group.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. @@ -31,12 +31,20 @@ :host(#{$c4d-prefix}-content-group-pictograms), .#{$prefix}--content-group { display: block; - margin-block: $spacing-07; + margin-block-end: $spacing-07; @include breakpoint(md) { margin-block-end: $spacing-09; } + &:only-of-type { + margin-block-end: 0; + } + + &:last-of-type { + margin-block-end: 0; + } + .#{$prefix}--card__CTA { // TO DO: aspect ratio 2x1 @include breakpoint(md) { diff --git a/packages/styles/scss/internal/content-item/_content-item.scss b/packages/styles/scss/internal/content-item/_content-item.scss index 19858e8e703..2035050298b 100644 --- a/packages/styles/scss/internal/content-item/_content-item.scss +++ b/packages/styles/scss/internal/content-item/_content-item.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. @@ -11,6 +11,7 @@ @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/utilities/convert' as *; @use '../../globals/vars' as *; @use '../../globals/utils/content-width' as *; @use '../../components/list/list'; @@ -20,10 +21,17 @@ @mixin content-item { :host(#{$c4d-prefix}-content-item) { display: block; - margin-block: $spacing-07; margin-block-end: $spacing-07; max-inline-size: to-rem(640px); + &:only-of-type { + margin-block-end: 0; + } + + &:last-of-type { + margin-block-end: 0; + } + @include breakpoint(md) { padding-inline-end: $spacing-05; } diff --git a/packages/web-components/src/components/content-block/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block/__stories__/README.stories.mdx index 8b36aaef2c1..a63c2ad1a5d 100644 --- a/packages/web-components/src/components/content-block/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block/__stories__/README.stories.mdx @@ -5,6 +5,8 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn'; # `` +> Content block is one of the main layout components that can be used to build web experiences on IBM.com. It includes a large heading, subheading, body copy and CTA, and can accept many child components to enable customization and flexibility. The Content block should be used in a 12 column grid. + > đź’ˇ Check our > [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-block) > example implementation. @@ -19,6 +21,8 @@ Here's a quick example to get you started. ```javascript import '@carbon/ibmdotcom-web-components/es/components/content-block/index.js'; +import '@carbon/ibmdotcom-web-components/es/components/card/index.js'; + ``` @@ -27,17 +31,23 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block/index.js'; ### HTML ```html - - Heading text - Copy test - - cta copy - - - +
+
+
+ + Heading text + Copy test + + cta copy + + + +
+
+
``` ## Props diff --git a/packages/web-components/src/components/content-block/__stories__/content-block.stories.ts b/packages/web-components/src/components/content-block/__stories__/content-block.stories.ts new file mode 100644 index 00000000000..77499b7c8a5 --- /dev/null +++ b/packages/web-components/src/components/content-block/__stories__/content-block.stories.ts @@ -0,0 +1,202 @@ +/** + * @license + * + * 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. + */ + +import '../index'; +import '../../card/index'; +import { html } from 'lit-element'; +import { boolean, select } from '@storybook/addon-knobs'; +import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../content-block'; +import readme from './README.stories.mdx'; +import * as components from './data/content.js'; + +const currentComponents = [ + 'None', + 'Callout quote', + 'Callout with media', + 'Card group', + 'Card in card', + 'Carousel', + 'Content group', + 'Content item row', + 'Content item', + 'Feature card', + 'Image', + 'Link list', + 'Quote', + 'Structured list', + 'Tabs extended', + 'Video player', +]; + +const componentVariables = { + 'Callout quote': components.calloutQuote, + 'Callout with media': components.calloutWithMedia, + 'Card group': components.cardGroup, + 'Card in card': components.cardInCard, + Carousel: components.carousel, + 'Content group': components.contentGroup, + 'Content item row': components.contentItemRowStory, + 'Content item': components.contentItem, + 'Feature card': components.featureCard, + Image: components.image, + 'Link list': components.linkList, + Quote: components.quote, + 'Structured list': components.structuredList, + 'Tabs extended': components.tabsExtended, + 'Video player': components.videoPlayer, +}; + +export const Default = (args) => { + const { subHeading, child, copy, showCopy, showCTA, border, aside } = + args?.ContentBlock ?? {}; + + const childStory = componentVariables[child]; + + return html` +
+ + Heading text for Content Block + ${subHeading + ? html` Subheading ` + : ''} + ${showCopy + ? html` + ${copy} + ` + : ``} + ${childStory} + ${showCTA === 'card-link' + ? html` + + Learn more about natual language processing + + + ` + : ``} + ${showCTA === 'button' + ? html` + + CTA Button + + ` + : ``} + ${showCTA === 'button-group' + ? html` + + + Secondary Button + + + Primary button + + + ` + : ``} + ${showCTA === 'link' + ? html` + + CTA Link + + ` + : ``} + ${aside + ? html` + + Tutorial + +

Containerization A Complete Guide

+ + +

Why should you use microservices and containers

+ + + ` + : ``} + +
+ `; +}; + +export default { + title: 'Components/Content block', + decorators: [ + (story) => html` +
+
${story()}
+
+ `, + ], + parameters: { + ...readme.parameters, + hasStoryPadding: true, + knobs: { + ContentBlock: () => ({ + subHeading: boolean('Sub-heading:', true), + showCopy: boolean('Copy:', true), + copy: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, mattis id pellentesque at,' + + ' molestie et ipsum. Proin sodales est hendrerit maximus malesuada. Orci varius natoque penatibus et' + + ' magnis dis parturient montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus est ' + + 'ligula, vitae finibus ante aliquet a.', + child: select('Child component:', currentComponents, 'None'), + aside: boolean('Aside:', false), + showCTA: select( + 'CTA', + ['none', 'link', 'button', 'button-group', 'card-link'], + '' + ), + border: boolean('Border:', false), + }), + }, + propsSet: { + default: { + ContentBlock: { + heading: true, + showCopy: true, + copy: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, mattis id pellentesque at,' + + ' molestie et ipsum. Proin sodales est hendrerit maximus malesuada. Orci varius natoque penatibus et' + + ' magnis dis parturient montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus est ' + + 'ligula, vitae finibus ante aliquet a.', + aside: false, + addChildren: '', + showCTA: true, + border: false, + }, + }, + }, + }, +}; diff --git a/packages/web-components/src/components/content-block/__stories__/data/content.js b/packages/web-components/src/components/content-block/__stories__/data/content.js new file mode 100644 index 00000000000..43d1b78c38e --- /dev/null +++ b/packages/web-components/src/components/content-block/__stories__/data/content.js @@ -0,0 +1,470 @@ +/** + * @license + * + * 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. + */ + +import { html } from 'lit-element'; +import imgLg1x1 from '../../../../../.storybook/storybook-images/assets/960/fpo--1x1--960x960--006.jpg'; +import imgLg16x9 from '../../../../../.storybook/storybook-images/assets/720/fpo--16x9--720x405--005.jpg'; +import imgXlg16x9 from '../../../../../.storybook/storybook-images/assets/1312/fpo--16x9--1312x738--005.jpg'; +import imgMd16x9 from '../../../../../.storybook/storybook-images/assets/960/fpo--16x9--960x540--005.jpg'; +import imgLg4x3 from '../../../../../.storybook/storybook-images/assets/720/fpo--4x3--720x540--004.jpg'; +import imgSm4x3 from '../../../../../.storybook/storybook-images/assets/480/fpo--4x3--480x360--005.jpg'; +import ArrowRight20 from '../../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js'; + +export const cardGroupItem1 = html` + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +

+ + ${ArrowRight20({ slot: 'icon' })} + + +`; + +export const cardGroupItem2 = html` + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+ + ${ArrowRight20({ slot: 'icon' })} + + +`; + +export const card = (heading) => html` + + ${heading} processing + + +`; + +export const imageCard = html` + + Lorem ipsum dolor sit atemt +

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

+ + + + +`; + +export const videoCard = html` + + +

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

+ + + +`; + +export const currentComponents = [ + 'Callout quote', + 'Callout with media', + 'Card group', + 'Card in card', + 'Carousel', + 'Content group', + 'Content item row', + 'Content item', + 'Feature card', + 'Image', + 'Link list', + 'Quote', + 'Structured list', + 'Tabs extended', + 'Video player', +]; + +export const image = html` + + +`; + +export const calloutQuote = html` + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, + posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus + fermentum, hendrerit augue eu, placerat magna. + Lorem ipsum dolor sit amet + consectetur adipiscing elit + IBM Cloud + + Link with icon + + +`; + +export const calloutWithMedia = html` + + Curabitur malesuada varius mi eu posuere + ${`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. Here are + some common categories:`} + + + +`; + +export const cardGroup = html` + + ${cardGroupItem1}${cardGroupItem2}${cardGroupItem1} + ${cardGroupItem2}${cardGroupItem1}${cardGroupItem2} + +`; + +export const cardInCard = html` + + + + + + + + + + Label + Standard Bank Group prepares to embrace Africa’s AI + opportunity + + +`; + +export const carousel = html` + + ${imageCard}${videoCard}${imageCard}${videoCard}${imageCard}${videoCard} + +`; + +export const contentBlock = html` + + What is the latest news in artificial + intelligence? + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, + mattis id pellentesque at, molestie et ipsum. Proin sodales est hendrerit + maximus malesuada. Orci varius natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus + est ligula, vitae finibus ante aliquet a. + + Learn more about natural processing + + + +`; + +export const contentGroup = html` + + Natural language processing (NLP) + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, + mattis id pellentesque at, molestie et ipsum. Proin sodales est hendrerit + maximus malesuada. Orci varius natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus + est ligula, vitae finibus ante aliquet a. + + ${card(`Learn more about natual language processing`)} + +`; + +export const contentItem = html` + + Natural language understanding + ${`This area of NLP takes “real world” text and applies a symbolic system + for a machine to interpret its meaning, using formal logic; structures that describe the various + relationships between concepts (ontologies); and other semantic tools.`} + + Learn more about NLP + +`; + +export const contentItemRow = ({ + thumbnail = false, + image = false, +} = {}) => html` + + ${image + ? html`` + : ''} + Lorem ipsum + Aliquam condimentum + Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et + ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit + sollicitudin. + + + Learn more + + + Microservices and containers + + + ${thumbnail + ? html`` + : ''} + +`; + +export const contentItemRowStory = html`${contentItemRow()}${contentItemRow({ + thumbnail: true, +})}${contentItemRow({ image: true })}`; + +export const ctaBlock = html` + + Take the next step + Want to discuss your options with a DevOps expert? Contact our sales team + to evaluate your needs. + + + Secondary Button + + + Primary button + + + + + Get connected + IBM DevOps partners have a wide range of expertise. Find one to build + that right solution for you. + Find a partner + + + Learn how + Dig into more self-directed larning about DevOps + methodologies. + Browse tutorials + + + Learn how + Dig into more self-directed larning about DevOps + methodologies. + Browse tutorials + + + +`; + +export const featureCard = html` + + + Natural language processing (NLP) + + +`; + +export const linkListItemCopy = [ + 'Learn more about Kubernetes', + 'Containerization A Complete Guide', + 'Microservices and containers', +]; + +export const linkListItem = ({ copy = '' } = {}) => html` + +

${copy}

+ + +`; + +export const linkList = html` + + Tutorial + ${linkListItem({ copy: linkListItemCopy[0] })} + ${linkListItem({ copy: linkListItemCopy[1] })} + ${linkListItem({ copy: linkListItemCopy[2] })} + +`; + +export const quote = html` + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, + posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus + fermentum, hendrerit augue eu, placerat magna. + + Lorem ipsum dolor sit amet + + consectetur adipiscing elit + IBM Cloud + + Link with Icon + + +`; + +export const structuredList = html` + + + + Column A + Column B + Column C + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. + + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. + + + + Row 3 + Row 3 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. + + + + +`; + +export const tabsExtended = html` + + + First tab with long text + + + Second tab + + + Third tab + + + Fourth tab + + Fifth tab + +`; + +export const videoPlayer = html` + + +`; diff --git a/packages/web-components/src/components/content-block/content-block.scss b/packages/web-components/src/components/content-block/content-block.scss index c3d05568d15..18e995f3f9d 100644 --- a/packages/web-components/src/components/content-block/content-block.scss +++ b/packages/web-components/src/components/content-block/content-block.scss @@ -1,62 +1,31 @@ // -// 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. // -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type' as *; @use '@carbon/ibmdotcom-styles/scss/internal/content-block'; @use '@carbon/ibmdotcom-styles/scss/internal/content-item'; @use '@carbon/ibmdotcom-styles/scss/components/layout'; @use '@carbon/ibmdotcom-styles/scss/components/card-group'; -@use '@carbon/ibmdotcom-styles/scss/globals/utils/content-width' as *; -@use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *; @use '@carbon/ibmdotcom-styles/scss/globals/vars' as *; +@use '@carbon/styles/scss/spacing' as *; -:host(#{$c4d-prefix}-content-block), -:host(#{$c4d-prefix}-callout-with-media-copy), -:host(#{$c4d-prefix}-content-block-copy), -:host(#{$c4d-prefix}-content-block-heading), -:host(#{$c4d-prefix}-content-block-complementary), -:host(#{$c4d-prefix}-content-block-paragraph) { - display: block; -} - -// TODO: Consider applying this rule in general -:host(#{$c4d-prefix}-content-block-simple), -:host(#{$c4d-prefix}-content-block-segmented) { - ::slotted(#{$c4d-prefix}-callout-with-media-copy), - ::slotted(#{$c4d-prefix}-content-block-copy) { - @include breakpoint(md) { - inline-size: calc((100% - 2 * #{$spacing-05}) * 0.9); - } - } -} +.#{$c4d-prefix}--content-block-footer[card-group] { + @extend :host(#{$c4d-prefix}-card-group); -:host(#{$c4d-prefix}-callout-with-media-copy[size='sm']), -:host(#{$c4d-prefix}-content-block-copy[size='sm']) { - inline-size: auto; - max-inline-size: none; + gap: $spacing-08; - @include breakpoint(md) { - @include content-width; + &[grid-mode='condensed'] { + gap: 0; } - ::slotted(#{$c4d-prefix}-content-block-paragraph) { - @include type-style('body-02'); - - margin-block-end: $spacing-06; + &[grid-mode='narrow'] { + gap: $spacing-05; } -} - -.#{$c4d-prefix}--content-block-footer { - @extend :host(#{$c4d-prefix}-card-group); -} -// TODO: Apply `cds--make-col(2, 3)` to React version, too, so we can merge the style to React version -.#{$c4d-prefix}-ce--content-block__col { - @include make-col(2, 3); + ::slotted(#{$c4d-prefix}-card[slot='footer']) { + max-inline-size: 100%; + } } diff --git a/packages/web-components/src/components/content-block/content-block.ts b/packages/web-components/src/components/content-block/content-block.ts index 8b61b835fa7..d00a4aff360 100644 --- a/packages/web-components/src/components/content-block/content-block.ts +++ b/packages/web-components/src/components/content-block/content-block.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. @@ -84,11 +84,17 @@ class C4DContentBlock extends StableSelectorMixin(LitElement) { * The CSS class list for the container (grid) node. */ protected _getContainerClasses() { - const { complementaryStyleScheme, _hasComplementary: hasComplementary } = - this; + const { + complementaryStyleScheme, + _hasContent: hasContent, + _hasComplementary: hasComplementary, + _hasFooter: hasFooter, + } = this; return classMap({ [`${prefix}--content-layout`]: true, + [`${prefix}--content-layout--with-children`]: hasContent, [`${prefix}--content-layout--with-complementary`]: hasComplementary, + [`${prefix}--content-layout--with-footer`]: hasFooter, [`${prefix}--layout--border`]: complementaryStyleScheme === CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER, @@ -168,10 +174,10 @@ class C4DContentBlock extends StableSelectorMixin(LitElement) { return html`
+ class="${hasFooter && `${c4dPrefix}--content-block-footer`}" + style="${cardGroupStyle}" + ?card-group="${cardGroup}" + grid-mode="${cardGroup?.getAttribute('grid-mode')}">
`; diff --git a/packages/web-components/src/components/content-block/index.ts b/packages/web-components/src/components/content-block/index.ts index 099dbeb1929..23a5bc6aafa 100644 --- a/packages/web-components/src/components/content-block/index.ts +++ b/packages/web-components/src/components/content-block/index.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2021 + * 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. @@ -12,4 +12,3 @@ import './content-block-complementary'; import './content-block-copy'; import './content-block-heading'; import './content-block-paragraph'; -import '../card/card-footer'; 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 267525c3c6e..55bdcaeed51 100644 --- a/packages/web-components/src/components/cta-block/cta-block.scss +++ b/packages/web-components/src/components/cta-block/cta-block.scss @@ -1,5 +1,5 @@ // -// 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,6 @@ grid-template-columns: 1fr; grid-template-rows: auto; inline-size: 100%; - row-gap: $spacing-07; // Hide last row's items' bottom border &::after { @@ -144,10 +143,6 @@ } } - ::slotted(#{$c4d-prefix}-cta-block-item) { - border-block-end: 1px solid $border-subtle-01; - } - ::slotted(#{$c4d-prefix}-cta-block-item:last-of-type) { @include breakpoint-down(md) { border: 0;