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/examples/codesandbox/components/content-block-media/index.html b/packages/web-components/examples/codesandbox/components/content-block-media/index.html index 045827a1f60..671e11e764a 100644 --- a/packages/web-components/examples/codesandbox/components/content-block-media/index.html +++ b/packages/web-components/examples/codesandbox/components/content-block-media/index.html @@ -27,11 +27,11 @@ 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. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. - + Lorem ipsum dolor sit amet diff --git a/packages/web-components/examples/codesandbox/components/content-block-media/src/index.js b/packages/web-components/examples/codesandbox/components/content-block-media/src/index.js index dc0031d90ba..8b2ff5c0610 100644 --- a/packages/web-components/examples/codesandbox/components/content-block-media/src/index.js +++ b/packages/web-components/examples/codesandbox/components/content-block-media/src/index.js @@ -1,7 +1,7 @@ /** * @license * - * 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. @@ -10,7 +10,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-media/content-block-media.js'; import '@carbon/ibmdotcom-web-components/es/components/content-block-media/content-block-media-content.js'; import '@carbon/ibmdotcom-web-components/es/components/content-block/content-block-heading.js'; -import '@carbon/ibmdotcom-web-components/es/components/content-block/content-block-paragraph.js'; +import '@carbon/ibmdotcom-web-components/es/components/content-block/content-block-copy.js'; import '@carbon/ibmdotcom-web-components/es/components/content-group/content-group-heading.js'; import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item-heading.js'; import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item-copy.js'; 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/src/components/content-block-media/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-media/__stories__/README.stories.mdx index b5f16e404e4..17dc840a087 100644 --- a/packages/web-components/src/components/content-block-media/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-media/__stories__/README.stories.mdx @@ -20,7 +20,7 @@ Here's a quick example to get you started. import '@carbon/ibmdotcom-web-components/es/components/content-block-media/content-block-media.js'; import '@carbon/ibmdotcom-web-components/es/components/content-block-media/content-block-media-content.js'; import '@carbon/ibmdotcom-web-components/es/components/content-block/content-block-heading.js'; -import '@carbon/ibmdotcom-web-components/es/components/content-block/content-block-paragraph.js'; +import '@carbon/ibmdotcom-web-components/es/components/content-block/content-block-copy.js'; import '@carbon/ibmdotcom-web-components/es/components/content-group/content-group-heading.js'; import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item-heading.js'; import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item-copy.js'; @@ -34,11 +34,11 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item 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. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. - + Lorem ipsum dolor sit amet diff --git a/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts b/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts index 4e91fb3fd80..2384576ba5e 100644 --- a/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts +++ b/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts @@ -9,7 +9,7 @@ import '../content-block-media'; import '../../content-block/content-block-heading'; -import '../../content-block/content-block-paragraph'; +import '../../content-block/content-block-copy'; import '../../content-group/content-group-heading'; import '../../content-item/content-item-heading'; import '../../content-item/content-item-copy'; @@ -19,13 +19,25 @@ import '../../card/card-heading'; import '../../card-link/card-link'; import '../../feature-card/feature-card'; import '../../feature-card/feature-card-footer'; +import '../../link-list/link-list'; +import '../../link-list/link-list-heading'; import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20'; import { html } from 'lit-element'; +import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js'; +import { select } from '@storybook/addon-knobs'; +import textNullable from '../../../../.storybook/knob-text-nullable'; import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--002.jpg'; import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--004.jpg'; import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--002.jpg'; import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--002.jpg'; import readme from './README.stories.mdx'; +import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../../content-block/defs'; + +const complementaryStyleSchemes = { + 'Regular style scheme': null, + // eslint-disable-next-line max-len + [`With border (${CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER})`]: CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER, +}; const heading = 'Lorem ipsum dolor sit amet.'; @@ -69,91 +81,195 @@ const items = [ }, ]; -export const Default = () => { +export const Default = ({ parameters }) => { + const { blockHeading, featureCard } = parameters?.props?.ContentBlockMedia ?? {}; + return html` + + + ${blockHeading} + + 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. Phasellus at elit sollicitudin, sodales + nulla quis, consequat libero. + + + + Lorem ipsum dolor sit amet + + + + + + + ${items.map( + ({ heading: itemHeading, copy: itemCopy }) => html` + + ${itemHeading} + ${itemCopy} + + ` + )} + +

Lorem ipsum dolor sit amet

+ + ${ArrowRight20({ slot: 'icon' })} + + + + + + Lorem ipsum dolor sit amet + + + + + + + ${items.map( + ({ heading: itemHeading, copy: itemCopy }) => html` + + ${itemHeading} + ${itemCopy} + + ` + )} + +

Lorem ipsum dolor sit amet

+ + ${ArrowRight20({ slot: 'icon' })} + + + + + ${featureCard === 'cta' + ? html` + + Lorem ipsum dolor sit amet + + + + Consectetur adipisicing elit + + ${ArrowRight20({ slot: 'icon' })} + + + ` + : ``} + + + `; +}; + +export const withAsideElements = ({ parameters }) => { + const { linkListHeading, complementaryStyleScheme } = parameters?.props?.ContentBlockMedia ?? {}; return 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. Phasellus at elit sollicitudin, sodales nulla quis, - consequat libero. - - - - Lorem ipsum dolor sit amet - - - - - - - ${items.map( - ({ heading: itemHeading, copy: itemCopy }) => html` - - ${itemHeading} - ${itemCopy} - - ` - )} - -

Lorem ipsum dolor sit amet

- - ${ArrowRight20({ slot: 'icon' })} - - - - - - Lorem ipsum dolor sit amet - - - - - - - ${items.map( - ({ heading: itemHeading, copy: itemCopy }) => html` - - ${itemHeading} - ${itemCopy} - - ` - )} - -

Lorem ipsum dolor sit amet

- - ${ArrowRight20({ slot: 'icon' })} - - - - - - Lorem ipsum dolor sit amet - - - - Consectetur adipisicing elit - - ${ArrowRight20({ slot: 'icon' })} - - - + + + 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. Phasellus at elit sollicitudin, sodales + nulla quis, consequat libero. + + + + Lorem ipsum dolor sit amet + + + + + + + ${items.map( + ({ heading: itemHeading, copy: itemCopy }) => html` + + ${itemHeading} + ${itemCopy} + + ` + )} + +

Lorem ipsum dolor sit amet

+ + ${ArrowRight20({ slot: 'icon' })} + + + + + + Lorem ipsum dolor sit amet + + + + + + + ${items.map( + ({ heading: itemHeading, copy: itemCopy }) => html` + + ${itemHeading} + ${itemCopy} + + ` + )} + +

Lorem ipsum dolor sit amet

+ + ${ArrowRight20({ slot: 'icon' })} + + + + + + Lorem ipsum dolor sit amet + + + + Consectetur adipisicing elit + + ${ArrowRight20({ slot: 'icon' })} + + + + + ${linkListHeading} + +

Containerization A Complete Guide

+ + + +

Why should you use microservices and containers

+ + + + `; }; +withAsideElements.story = { + parameters: { + gridContentClasses: 'dds-ce-demo-devenv--simple-grid--content-layout--with-complementary', + knobs: { + ContentBlockMedia: () => ({ + linkListHeading: textNullable('Link list heading (heading)', 'Tutorials'), + complementaryStyleScheme: select( + 'Complementary style scheme (complementary-style-scheme)', + complementaryStyleSchemes, + null + ), + }), + }, + }, +}; + export default { title: 'Components/Content Block Media', decorators: [ - story => html` -
-
-
- - ${story()} - -
-
+ (story, { parameters }) => html` +
+ ${story()}
`, ], @@ -161,5 +277,13 @@ export default { ...readme.parameters, hasGrid: true, hasVerticalSpacingInComponent: true, + gridContentClasses: 'dds-ce-demo-devenv--simple-grid--content-layout', + knobs: { + ContentBlockMedia: () => ({ + blockHeading: textNullable('Heading (required)', 'Curabitur malesuada varius mi eu posuere'), + simpleGroupHeading: textNullable('Simple Group Heading (required)', 'Lorem ipsum dolor sit amet'), + featureCard: select('FeatureCard (optional)', ['cta', 'none'], 'cta'), + }), + }, }, }; diff --git a/packages/web-components/src/components/content-block-media/content-block-media.scss b/packages/web-components/src/components/content-block-media/content-block-media.scss index b0f57b7700c..19f0370956a 100644 --- a/packages/web-components/src/components/content-block-media/content-block-media.scss +++ b/packages/web-components/src/components/content-block-media/content-block-media.scss @@ -1,5 +1,5 @@ // -// 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. @@ -21,4 +21,15 @@ margin-right: -1rem; display: block; } + + ::slotted(#{$dds-prefix}-content-block-complementary) { + @include carbon--breakpoint-down('lg') { + margin: $layout-05 0; + } + } +} + +:host(#{$dds-prefix}-content-block-media-content) ::slotted(*) { + margin-left: $carbon--spacing-05; + margin-right: $carbon--spacing-05; } diff --git a/packages/web-components/src/components/content-block-media/content-block-media.ts b/packages/web-components/src/components/content-block-media/content-block-media.ts index 0ebd7012236..64651eadfe8 100644 --- a/packages/web-components/src/components/content-block-media/content-block-media.ts +++ b/packages/web-components/src/components/content-block-media/content-block-media.ts @@ -9,8 +9,7 @@ import { css, customElement } from 'lit-element'; 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 DDSContentBlockSimple from '../content-block-simple/content-block-simple'; import styles from './content-block-media.scss'; const { stablePrefix: ddsPrefix } = ddsSettings; @@ -21,7 +20,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @element dds-content-block-media */ @customElement(`${ddsPrefix}-content-block-media`) -class DDSContentBlockMedia extends StableSelectorMixin(DDSContentBlock) { +class DDSContentBlockMedia extends DDSContentBlockSimple { static get stableSelector() { return `${ddsPrefix}--content-block-media`; } diff --git a/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts b/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts index de027f74e46..abbd52feeeb 100644 --- a/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts +++ b/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts @@ -82,7 +82,7 @@ const contentItemCopy = 'elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.'; export const Default = ({ parameters }) => { - const { heading, copy, ctaStyle, ctaType } = parameters?.props?.ContentBlockSimple ?? {}; + const { heading, copy, ctaStyle, ctaType } = parameters?.props?.ContentBlockSegmented ?? {}; return html` ${heading} @@ -120,7 +120,7 @@ export const Default = ({ parameters }) => { }; export const withVideo = ({ parameters }) => { - const { heading, copy, ctaStyle, ctaType } = parameters?.props?.ContentBlockSimple ?? {}; + const { heading, copy, ctaStyle, ctaType } = parameters?.props?.ContentBlockSegmented ?? {}; return html` ${heading} @@ -158,7 +158,7 @@ export const withVideo = ({ parameters }) => { }; export const withAsideElements = ({ parameters }) => { - const { heading, copy, ctaStyle, ctaType, complementaryStyleScheme } = parameters?.props?.ContentBlockSimple ?? {}; + const { heading, copy, ctaStyle, ctaType, complementaryStyleScheme } = parameters?.props?.ContentBlockSegmented ?? {}; return html` Lorem ipsum dolor sit amet. @@ -210,7 +210,7 @@ withAsideElements.story = { parameters: { gridContentClasses: 'dds-ce-demo-devenv--simple-grid--content-layout--with-complementary', knobs: { - ContentBlockSimple: () => ({ + ContentBlockSegmented: () => ({ heading: textNullable('Link list heading (heading)', 'Tutorials'), ctaStyle: select('CTA style (cta-style)', ctaStyles, null), ctaType: select('CTA type (cta-type)', ctaTypes, CTA_TYPE.LOCAL), @@ -239,7 +239,7 @@ export default { hasVerticalSpacingInComponent: true, gridContentClasses: 'dds-ce-demo-devenv--simple-grid--content-layout', knobs: { - ContentBlockSimple: () => ({ + ContentBlockSegmented: () => ({ heading: textNullable('Heading (required)', 'Lorem ipsum dolor sit amet.'), copy: textNullable( 'copy', 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` ``` - - - - - -