diff --git a/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss b/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss index d413057984e..78a928863a8 100644 --- a/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss +++ b/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss @@ -1,5 +1,5 @@ /** -* Copyright IBM Corp. 2016, 2020 +* Copyright IBM Corp. 2016, 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. @@ -30,7 +30,7 @@ } } - :host(#{$dds-prefix}-content-block__copy), + ::slotted(#{$dds-prefix}-content-block-copy), .#{$prefix}--content-block__copy { margin-bottom: 6rem; p { @@ -112,6 +112,27 @@ padding-bottom: $carbon--layout-05; } } + + .#{$prefix}--content-layout--with-headlines { + grid-template: + 'heading' auto + 'body' auto + 'footer' auto / 1fr; + + @include carbon--breakpoint('md') { + grid-template: + 'heading heading' auto + 'body body' auto + 'footer .' auto / 1fr 1fr; + } + + @include carbon--breakpoint('lg') { + grid-template: + 'heading heading .' auto + 'body body .' auto + 'footer . .' auto / 1fr 1fr 1fr; + } + } } @include exports('content-block-headlines') { diff --git a/packages/styles/scss/internal/content-block/_content-block.scss b/packages/styles/scss/internal/content-block/_content-block.scss index cb2ed401b1d..1790e1fa790 100644 --- a/packages/styles/scss/internal/content-block/_content-block.scss +++ b/packages/styles/scss/internal/content-block/_content-block.scss @@ -64,6 +64,13 @@ 'footer .' auto / 1fr 1fr; } + &.#{$prefix}--layout--border { + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + } + // Most slotted contents have margins aligning to Carbon grid gutters. // Note: Child contents define their margin by their own ::slotted([slot]) { diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss index 40b8d1b9c61..6a4c1280312 100644 --- a/packages/web-components/.storybook/container.scss +++ b/packages/web-components/.storybook/container.scss @@ -79,6 +79,7 @@ body { .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-block-headlines, .dds-ce-demo-devenv--simple-grid--content-section, .dds-ce-demo-devenv--simple-grid--content-block-cards { > * { @@ -125,6 +126,7 @@ body { } .dds-ce-demo-devenv--simple-grid--content-layout--with-complementary, + .dds-ce-demo-devenv--simple-grid--content-block-headlines, .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-headlines/index.html b/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html index 2ae953e2bf1..c826a15533e 100644 --- a/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html +++ b/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html @@ -22,7 +22,7 @@
-
+
Curabitur malesuada varius mi eu posuere Lorem ipsum *dolor* sit amet diff --git a/packages/web-components/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts b/packages/web-components/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts index 7e32a244e59..66ddcd75e63 100755 --- a/packages/web-components/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts +++ b/packages/web-components/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts @@ -77,12 +77,8 @@ export default !DDS_CONTENT_BLOCK_HEADLINES }, decorators: [ story => html` -
-
-
- ${story()} -
-
+
+ ${story()}
`, ], diff --git a/packages/web-components/src/components/content-block-headlines/content-block-headlines.scss b/packages/web-components/src/components/content-block-headlines/content-block-headlines.scss index bbf807b50a1..e7736927ff2 100755 --- a/packages/web-components/src/components/content-block-headlines/content-block-headlines.scss +++ b/packages/web-components/src/components/content-block-headlines/content-block-headlines.scss @@ -1,8 +1,12 @@ // -// 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-headlines/content-block-headlines'; + +:host(#{$dds-prefix}-content-block-headlines-item) { + display: block; +} diff --git a/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts b/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts index 068a83b5b60..f1fe938d73f 100755 --- a/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts +++ b/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts @@ -7,6 +7,7 @@ * LICENSE file in the root directory of this source tree. */ +import { Part } from 'lit-html'; import { css, customElement, html, TemplateResult } from 'lit-element'; import settings from 'carbon-components/es/globals/js/settings'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; @@ -24,17 +25,56 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-block-headlines`) class DDSContentBlockHeadlines 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--with-headlines ${prefix}--layout--border`; + } + + /** + * @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(): TemplateResult | string | void { const { _hasContent: hasContent, _handleSlotChange: handleSlotChange } = this; return html` -
-
-
-
- -
-
-
+
+ +
+ `; + } + + protected _renderContent(): TemplateResult | string | void { + const { _handleSlotChange: handleSlotChange } = this; + return html` + + `; + } + + 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()}${this._renderComplementary()}
`; } diff --git a/packages/web-components/tests/snapshots/dds-content-block-headlines.md b/packages/web-components/tests/snapshots/dds-content-block-headlines.md index e2c7f9e3836..b687a0c5a40 100644 --- a/packages/web-components/tests/snapshots/dds-content-block-headlines.md +++ b/packages/web-components/tests/snapshots/dds-content-block-headlines.md @@ -5,34 +5,30 @@ #### `should render with minimum attributes` ``` - - - - - -