diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss index 77d182a6089..b450ce53290 100644 --- a/packages/web-components/.storybook/container.scss +++ b/packages/web-components/.storybook/container.scss @@ -78,7 +78,8 @@ body { .dds-ce-demo-devenv--simple-grid--card, .dds-ce-demo-devenv--simple-grid--card-group, .dds-ce-demo-devenv--simple-grid--content-layout, -.dds-ce-demo-devenv--simple-grid--content-layout--with-complementary { +.dds-ce-demo-devenv--simple-grid--content-layout--with-complementary, +.dds-ce-demo-devenv--simple-grid--content-block-cards { > * { grid-column: 1 / span 4; @@ -104,8 +105,11 @@ body { grid-column: 3 / span 12; } - .dds-ce-demo-devenv--simple-grid--content-layout--with-complementary > * { - grid-column: 5 / span 12; + .dds-ce-demo-devenv--simple-grid--content-layout--with-complementary, + .dds-ce-demo-devenv--simple-grid--content-block-cards { + > * { + grid-column: 5 / span 12; + } } } diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html b/packages/web-components/examples/codesandbox/components/content-block-cards/index.html index 7db3ef5c326..3ffe6e79b3f 100644 --- a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html +++ b/packages/web-components/examples/codesandbox/components/content-block-cards/index.html @@ -22,7 +22,7 @@
-
+
Lorem ipsum dolor sit amet diff --git a/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts b/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts index a9beb894d88..9568cb82e8b 100644 --- a/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts +++ b/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts @@ -126,14 +126,14 @@ export default { title: 'Components/Content Block Cards', decorators: [ story => html` - + ${story()} `, ], parameters: { ...readme.parameters, - hasCardGroup: true, + hasGrid: true, hasVerticalSpacingInComponent: true, knobs: { ContentBlockCards: () => ({ diff --git a/packages/web-components/src/components/content-block-cards/content-block-cards.scss b/packages/web-components/src/components/content-block-cards/content-block-cards.scss index d85f20cb497..017621d5cf1 100644 --- a/packages/web-components/src/components/content-block-cards/content-block-cards.scss +++ b/packages/web-components/src/components/content-block-cards/content-block-cards.scss @@ -1,18 +1,8 @@ // -// Copyright IBM Corp. 2020 +// Copyright IBM Corp. 2020, 2021 // // 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 '@carbon/ibmdotcom-styles/scss/components/content-block-cards/content-block-cards'; - -:host(#{$dds-prefix}-content-block-cards) { - padding-left: calc(#{$carbon--grid-gutter} / 2); - padding-right: calc(#{$carbon--grid-gutter} / 2); - - .#{$prefix}--content-block__children { - margin-left: calc(-1 * #{$carbon--grid-gutter} / 2); - margin-right: calc(-1 * #{$carbon--grid-gutter} / 2); - } -} diff --git a/packages/web-components/src/components/content-block-cards/content-block-cards.ts b/packages/web-components/src/components/content-block-cards/content-block-cards.ts index f863ac23e4a..4633d0ad137 100644 --- a/packages/web-components/src/components/content-block-cards/content-block-cards.ts +++ b/packages/web-components/src/components/content-block-cards/content-block-cards.ts @@ -7,12 +7,15 @@ * LICENSE file in the root directory of this source tree. */ -import { css, customElement } from 'lit-element'; +import { Part } from 'lit-html'; +import { html, css, customElement, TemplateResult } from 'lit-element'; +import settings from 'carbon-components/es/globals/js/settings.js'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import DDSContentBlock from '../content-block/content-block'; import styles from './content-block-cards.scss'; +const { prefix } = settings; const { stablePrefix: ddsPrefix } = ddsSettings; /** @@ -22,6 +25,50 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-block-cards`) class DDSContentBlockCards extends StableSelectorMixin(DDSContentBlock) { + /** + * The CSS class list for the container (grid) node. + */ + // eslint-disable-next-line class-methods-use-this + protected _getContainerClasses(): string | ((part: Part) => void) { + return `${prefix}--content-layout ${prefix}--content-layout--card-group`; + } + + /** + * @returns The non-header, non-complementary contents. + */ + protected _renderBody(): TemplateResult | string | void { + const { _hasContent: hasContent, _hasCopy: hasCopy, _hasMedia: hasMedia } = this; + return html` +
+ ${super._renderBody()} +
+ `; + } + + protected _renderInnerBody() { + return html` + ${this._renderContent()}${this._renderMedia()} + `; + } + + protected _renderFooter(): TemplateResult | string | void { + const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this; + // TODO: See if we can remove the surrounding `
` + return html` +
+ +
+ `; + } + + render() { + return html` +
+ ${this._renderHeading()}${this._renderBody()} +
+ `; + } + static get stableSelector() { return `${ddsPrefix}--content-block-cards`; } 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 80b0adbbe90..4d44b7f7aa8 100644 --- a/packages/web-components/src/components/content-block/content-block.scss +++ b/packages/web-components/src/components/content-block/content-block.scss @@ -95,6 +95,12 @@ } } +.#{$prefix}--content-layout--card-group ::slotted([slot='footer']) { + @include carbon--breakpoint('lg') { + width: calc(100% / 3); + } +} + // TODO: Apply `dds--make-col(2, 3)` to React version, too, so we can merge the style to React version .#{$dds-prefix}-ce--content-block__col { @include dds--make-col(2, 3);