diff --git a/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss b/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss index 5b3cfff3a19..46f0f503078 100644 --- a/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss +++ b/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss @@ -1,18 +1,18 @@ /** - * 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. */ @mixin content-group-pictograms { - .#{$prefix}--content-group-pictograms { - .#{$prefix}--content-group__copy { - margin-bottom: $spacing-05; + :host(#{$dds-prefix}-content-group-pictograms) + ::slotted(#{$dds-prefix}-content-group-copy), + .#{$prefix}--content-group-pictograms .#{$prefix}--content-group__copy { + margin-bottom: $spacing-05; - @include carbon--breakpoint('md') { - margin-bottom: $spacing-07; - } + @include carbon--breakpoint('md') { + margin-bottom: $spacing-07; } } diff --git a/packages/styles/scss/components/content-group-simple/_content-group-simple.scss b/packages/styles/scss/components/content-group-simple/_content-group-simple.scss index c2d5514e76c..35f7d4d485f 100644 --- a/packages/styles/scss/components/content-group-simple/_content-group-simple.scss +++ b/packages/styles/scss/components/content-group-simple/_content-group-simple.scss @@ -1,15 +1,15 @@ /** - * 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. */ @mixin content-group-simple { - .#{$prefix}--content-group-simple { - .#{$prefix}--content-group__copy { - margin-bottom: $spacing-07; - } + :host(#{$dds-prefix}-content-group-simple) + ::slotted(#{$dds-prefix}-content-group-copy), + .#{$prefix}--content-group-simple .#{$prefix}--content-group__copy { + margin-bottom: $spacing-07; } } diff --git a/packages/styles/scss/internal/content-group/_content-group.scss b/packages/styles/scss/internal/content-group/_content-group.scss index 766f1ac30d9..3c6edf3bd04 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, 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. @@ -45,11 +45,13 @@ } :host(#{$dds-prefix}-content-group-heading), + :host(#{$dds-prefix}-content-group-copy), .#{$prefix}--content-group__title, .#{$prefix}--content-group__copy { @include content-width; } + :host(#{$dds-prefix}-content-group-copy), .#{$prefix}--content-group__copy { margin-bottom: $layout-04; diff --git a/packages/web-components/examples/codesandbox/components/callout-with-media/index.html b/packages/web-components/examples/codesandbox/components/callout-with-media/index.html index bdc93137f2d..8dfaa67d677 100644 --- a/packages/web-components/examples/codesandbox/components/callout-with-media/index.html +++ b/packages/web-components/examples/codesandbox/components/callout-with-media/index.html @@ -26,7 +26,7 @@

Hello World! 👋

lorum ipsum dolor sit ameet - lorum ipsum dolor sit ameet + lorum ipsum dolor sit ameet Lorem ipsum dolor sit amet - + Nunc convallis lobortis

diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html b/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html index 06155e864df..d165e50dc58 100644 --- a/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html +++ b/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html @@ -25,7 +25,7 @@

heading - copy + copy ${groupHeading} - ${groupCopy} + ${groupCopy} Curabitur malesuada varius mi eu posuere - Lorem ipsum *dolor* sit amet + Lorem ipsum *dolor* sit amet diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/src/index.js b/packages/web-components/examples/codesandbox/components/content-group-simple/src/index.js index b70da6cbba9..d268129d601 100644 --- a/packages/web-components/examples/codesandbox/components/content-group-simple/src/index.js +++ b/packages/web-components/examples/codesandbox/components/content-group-simple/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. @@ -11,7 +11,7 @@ import '@carbon/ibmdotcom-web-components/es/components/image-with-caption/image- import '@carbon/ibmdotcom-web-components/es/components/cta/card-cta.js'; import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item.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'; +import '@carbon/ibmdotcom-web-components/es/components/content-group/content-group-copy.js'; import '@carbon/ibmdotcom-web-components/es/components/content-group/content-group-heading.js'; import '@carbon/ibmdotcom-web-components/es/components/content-group-simple/content-group-simple.js'; import '@carbon-web-components/es/icons/arrow--right/20'; diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/index.html b/packages/web-components/examples/codesandbox/components/leadspace-block/index.html index 68fd95ee84b..1c96abe2860 100644 --- a/packages/web-components/examples/codesandbox/components/leadspace-block/index.html +++ b/packages/web-components/examples/codesandbox/components/leadspace-block/index.html @@ -27,7 +27,7 @@ LeadSpace Block Title LeadSpace Block Heading - LeadSpace Block Copy + LeadSpace Block Copy lorum ipsum dolor sit ameet - lorum ipsum dolor sit ameet + lorum ipsum dolor sit ameet { return html` ${heading} - ${copy} + ${copy} ${mediaType === 'image' ? image : ``} ${mediaType === 'video' ? video : ``} `; 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 f97893bb2fb..c28203913cb 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 @@ -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. @@ -68,7 +68,7 @@ export const Default = ({ parameters }) => { return html` ${heading} - + ${cardGroupItem} ${cardGroupItem} ${cardGroupItem} ${cardGroupItem} ${cardGroupItem} @@ -84,7 +84,7 @@ export const withImages = ({ parameters }) => { return html` ${heading} - + ${cardGroupItemWithImages} ${cardGroupItemWithImages} ${cardGroupItemWithImages} ${cardGroupItemWithImages} ${cardGroupItemWithImages} @@ -101,7 +101,7 @@ export const withVideos = ({ parameters }) => { return html` ${heading} - + ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} 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 c264b76b44b..f863ac23e4a 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 @@ -1,20 +1,18 @@ /** * @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. */ -import { css, customElement, html, TemplateResult } from 'lit-element'; -import settings from 'carbon-components/es/globals/js/settings'; +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 styles from './content-block-cards.scss'; -const { prefix } = settings; const { stablePrefix: ddsPrefix } = ddsSettings; /** @@ -24,18 +22,6 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-block-cards`) class DDSContentBlockCards extends StableSelectorMixin(DDSContentBlock) { - /** - * @returns The main content. - */ - // eslint-disable-next-line class-methods-use-this - protected _renderContent(): TemplateResult | string | void { - return html` -
- -
- `; - } - static get stableSelector() { return `${ddsPrefix}--content-block-cards`; } diff --git a/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx index 4e316192487..894e3190a7e 100755 --- a/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx @@ -28,7 +28,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item ```html Aliquam condimentum< - Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin. ${heading} - ${copy} + ${copy} ${contentItemRow1} ${contentItemRow1} ${contentItemRow2} ${contentItemRow1} `; diff --git a/packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts b/packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts index f1ce5d398b2..fc7d82ea291 100755 --- a/packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts +++ b/packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts @@ -1,13 +1,13 @@ /** * @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. */ -import { css, customElement, html, property } from 'lit-element'; +import { html, css, customElement } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import DDSContentItem from '../content-item/content-item'; @@ -22,12 +22,6 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-block-headlines-item`) class DDSContentBlockHeadlinesItem extends StableSelectorMixin(DDSContentItem) { - /** - * The shadow slot this headlines item should be in. - */ - @property({ reflect: true }) - slot = 'content'; - render() { return html`

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 291d3ab76b2..068a83b5b60 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 @@ -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. @@ -24,17 +24,14 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-block-headlines`) class DDSContentBlockHeadlines extends StableSelectorMixin(DDSContentBlock) { - /** - * @returns Main content - */ - // eslint-disable-next-line class-methods-use-this - protected _renderContent(): TemplateResult | string | void { + protected _renderInnerBody(): TemplateResult | string | void { + const { _hasContent: hasContent, _handleSlotChange: handleSlotChange } = this; return html` -
+
- +
@@ -42,18 +39,6 @@ class DDSContentBlockHeadlines extends StableSelectorMixin(DDSContentBlock) { `; } - /** - * @returns The copy content. - */ - // eslint-disable-next-line class-methods-use-this - protected _renderCopy(): TemplateResult | string | void { - return html` -
- -
- `; - } - static get stableSelector() { return `${ddsPrefix}-content-block-headlines`; } diff --git a/packages/web-components/src/components/content-block-media/content-block-media-content.ts b/packages/web-components/src/components/content-block-media/content-block-media-content.ts index f211c7b1e90..81288ed2ac1 100644 --- a/packages/web-components/src/components/content-block-media/content-block-media-content.ts +++ b/packages/web-components/src/components/content-block-media/content-block-media-content.ts @@ -1,18 +1,20 @@ /** * @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. */ -import { css, customElement, html } from 'lit-element'; +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 styles from './content-block-media.scss'; import DDSContentGroupSimple from '../content-group-simple/content-group-simple'; +const { prefix } = settings; const { stablePrefix: ddsPrefix } = ddsSettings; /** @@ -22,12 +24,14 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-block-media-content`) class DDSContentBlockMediaContent extends StableSelectorMixin(DDSContentGroupSimple) { - // Overrides the media position in relation to another slotted components - // eslint-disable-next-line class-methods-use-this - protected _renderCopy() { + protected _renderInnerBody(): TemplateResult | string | void { + const { _hasContent: hasContent, _hasMedia: hasMedia } = this; + // Moves media content out of `
` return html` - - + ${this._renderMedia()} +
+ ${this._renderContent()} +
`; } 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 f86775bf207..0ebd7012236 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 @@ -1,20 +1,18 @@ /** * @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. */ -import { css, customElement, html, TemplateResult } from 'lit-element'; -import settings from 'carbon-components/es/globals/js/settings'; +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 styles from './content-block-media.scss'; -const { prefix } = settings; const { stablePrefix: ddsPrefix } = ddsSettings; /** @@ -24,18 +22,6 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-block-media`) class DDSContentBlockMedia extends StableSelectorMixin(DDSContentBlock) { - /** - * @returns The main content. - */ - // eslint-disable-next-line class-methods-use-this - protected _renderContent(): TemplateResult | string | void { - return html` -
- -
- `; - } - static get stableSelector() { return `${ddsPrefix}--content-block-media`; } diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx index b22375b2f71..52a087a9d1a 100644 --- a/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx @@ -16,6 +16,7 @@ Here's a quick example to get you started. import '@carbon/ibmdotcom-web-components/content-block-mixed.js'; import '@carbon/ibmdotcom-web-components/image/image.js'; import '@carbon/ibmdotcom-web-components/card/card-heading.js'; +import '@carbon/ibmdotcom-web-components/content-block/content-block-copy.js'; import '@carbon/ibmdotcom-web-components/content-block/content-block-heading.js'; import '@carbon/ibmdotcom-web-components/content-block/content-block-paragraph.js'; import '@carbon/ibmdotcom-web-components/content-group/content-group-heading.js'; @@ -24,6 +25,7 @@ import '@carbon/ibmdotcom-web-components/content-group-cards/content-group-cards import '@carbon/ibmdotcom-web-components/content-group-pictograms/content-group-pictograms.js'; import '@carbon/ibmdotcom-web-components/content-group-simple/content-group-simple.js'; import '@carbon/ibmdotcom-web-components/content-item/content-item-heading.js'; +import '@carbon/ibmdotcom-web-components/content-item/content-item-copy.js'; import '@carbon/ibmdotcom-web-components/pictogram-item/pictogram-item.js'; import '@carbon/ibmdotcom-web-components/cta/card-cta.js'; import '@carbon/ibmdotcom-web-components/cta/card-cta-footer.js'; @@ -91,7 +93,7 @@ import '@carbon/ibmdotcom-web-components/cta/card-cta-footer.js'; Curabitur malesuada varius mi eu posuere - Lorem ipsum *dolor* sit amet + Lorem ipsum *dolor* sit amet ... @@ -109,7 +111,7 @@ import '@carbon/ibmdotcom-web-components/cta/card-cta-footer.js'; Curabitur malesuada varius mi eu posuere - Lorem ipsum *dolor* sit amet + Lorem ipsum *dolor* sit amet ` | `data-autoid="dds--content-block-mixed"` | Component | +| `` | `data-autoid="dds--content-block__copy"` | Component | | `` | `data-autoid="dds--content-block__heading"` | Component | | `` | `data-autoid="dds--content-item__copy"` | Component | diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts index d410f9ddb09..a193a884cd2 100644 --- a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts +++ b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts @@ -2,7 +2,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. @@ -12,6 +12,8 @@ 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 textNullable from '../../../../.storybook/knob-text-nullable'; +import '../../content-group/content-group-copy'; +import '../../content-item/content-item-copy'; import '../../card/card-heading'; import readme from './README.stories.mdx'; @@ -112,7 +114,6 @@ export const Default = ({ parameters }) => { ${groupCopy} ${cardsGroupHeading} -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt @@ -140,7 +141,7 @@ export const Default = ({ parameters }) => { ${heading} - ${groupCopy} + ${groupCopy} ${pictogramsItems.map( ({ heading: itemHeading, copy: itemCopy, linkWithIcon }) => html` @@ -180,7 +181,7 @@ export const Default = ({ parameters }) => { ${heading} - ${groupCopy} + ${groupCopy} ${image({ heading })} Lorem ipsum dolor sit amet diff --git a/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx index 9abacb5f945..38e04af27f8 100644 --- a/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx @@ -37,7 +37,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-segmented/c ```html heading - copy + copy { return html` ${heading} - ${copy} + ${copy} ${image} Lorem ipsum dolor sit amet. @@ -132,7 +132,7 @@ export const withVideo = ({ parameters }) => { return html` ${heading} - ${copy} + ${copy} ${video} Lorem ipsum dolor sit amet. @@ -170,7 +170,7 @@ export const withAsideElements = ({ parameters }) => { return html` Lorem ipsum dolor sit amet. - ${copy} + ${copy} ${image} Lorem ipsum dolor sit amet. diff --git a/packages/web-components/src/components/content-block-segmented/content-block-segmented-item.ts b/packages/web-components/src/components/content-block-segmented/content-block-segmented-item.ts index f59cf9a9ed6..dd4cd7f39fb 100644 --- a/packages/web-components/src/components/content-block-segmented/content-block-segmented-item.ts +++ b/packages/web-components/src/components/content-block-segmented/content-block-segmented-item.ts @@ -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. @@ -24,14 +24,17 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-block-segmented-item`) class DDSContentBlockSegmentedItem extends StableSelectorMixin(DDSContentGroup) { - /** - * @returns The main content. - */ - // eslint-disable-next-line class-methods-use-this - protected _renderContent(): TemplateResult | string | void { + protected _renderInnerBody(): TemplateResult | string | void { return html` -
- + ${this._renderContent()}${this._renderMedia()} + `; + } + + protected _renderMedia(): TemplateResult | string | void { + const { _hasMedia: hasMedia, _handleSlotChange: handleSlotChange } = this; + return html` +
+
`; } diff --git a/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts b/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts index 68c6adc36a4..570c874aaba 100644 --- a/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts +++ b/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts @@ -1,13 +1,13 @@ /** * @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. */ -import { html, css, customElement, TemplateResult } from 'lit-element'; +import { html, css, customElement } 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'; @@ -25,37 +25,22 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-block-segmented`) class DDSContentBlockSegmented extends StableSelectorMixin(DDSContentBlock) { - /** - * @returns The main content. - */ - // eslint-disable-next-line class-methods-use-this - protected _renderContent() { + protected _renderInnerBody() { + const { _hasContent: hasContent, _hasMedia: hasMedia, _handleSlotChange: handleSlotChange } = this; return html` -
+
-
- +
+
-
- +
+
`; } - /** - * @returns The copy content. - */ - // eslint-disable-next-line class-methods-use-this - protected _renderCopy(): TemplateResult | string | void { - return html` -
- -
- `; - } - static get stableSelector() { return `${ddsPrefix}--content-block-segmented`; } diff --git a/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx index c22b4e69599..e591b44fe2d 100644 --- a/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx @@ -22,7 +22,7 @@ Here's a quick example to get you started. ```javascript import '@carbon/ibmdotcom-web-components/es/components/image/image.js'; import '@carbon/ibmdotcom-web-components/es/components/cta/text-cta.js'; -import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item-copy.js'; +import '@carbon/ibmdotcom-web-components/es/components/content-block/content-block-copy.js'; import '@carbon/ibmdotcom-web-components/es/components/content-block/content-block-heading.js'; import '@carbon/ibmdotcom-web-components/es/components/content-block-simple/content-block-simple.js'; ``` @@ -32,7 +32,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-simple/cont ```html Curabitur malesuada varius mi eu posuere - Lorem ipsum *dolor* sit amet + Lorem ipsum *dolor* sit amet ` | `data-autoid="dds--content-block-simple"` | Component | +| `` | `data-autoid="dds--content-block__copy"` | Component | | `` | `data-autoid="dds--content-block__heading"` | Component | -| `` | `data-autoid="dds--content-item__copy"` | Component | diff --git a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts index 146b75c5649..b2d2f2c6e36 100644 --- a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts +++ b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts @@ -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. @@ -17,7 +17,11 @@ import '../../image/image'; import '../../cta/link-list-item-card-cta'; import '../../cta/text-cta'; import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../../content-block/content-block'; -import '../../content-item/content-item-copy'; +/* eslint-disable import/no-duplicates */ +import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy'; +// Above import is interface-only ref and thus code won't be brought into the build +import '../../content-block/content-block-copy'; +/* eslint-enable import/no-duplicates */ import '../../content-block/content-block-heading'; import '../../content-block/content-block-complementary'; import '../../link-list/link-list'; @@ -87,7 +91,7 @@ export const Default = ({ parameters }) => { return html` ${heading} - ${copy} + ${copy} ${ctaCopy} `; @@ -100,7 +104,7 @@ export const WithImage = ({ parameters }) => { ${heading} ${image} - ${copy} + ${copy} ${ctaCopy} `; @@ -112,7 +116,7 @@ export const WithVideo = ({ parameters }) => { return html` ${heading} - ${copy} + ${copy} ${ctaCopy} @@ -125,7 +129,7 @@ export const WithAsideElements = ({ parameters }) => { return html` ${heading} - ${copy} + ${copy} ${image} diff --git a/packages/web-components/src/components/content-block-simple/content-block-simple.ts b/packages/web-components/src/components/content-block-simple/content-block-simple.ts index 705096d70ee..67762321304 100644 --- a/packages/web-components/src/components/content-block-simple/content-block-simple.ts +++ b/packages/web-components/src/components/content-block-simple/content-block-simple.ts @@ -1,13 +1,13 @@ /** * @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. */ -import { html, css, customElement } from 'lit-element'; +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'; @@ -25,27 +25,26 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-block-simple`) class DDSContentBlockSimple extends StableSelectorMixin(DDSContentBlock) { - // eslint-disable-next-line class-methods-use-this - protected _renderContent() { + protected _renderInnerBody() { + const { _hasContent: hasContent, _hasMedia: hasMedia } = this; // Renders `
` directly instead of using `` // because `` uses only the copy content return html` -
+
-
- -
-
- -
+ ${this._renderContent()}${this._renderMedia()}
`; } - // eslint-disable-next-line class-methods-use-this - protected _renderCopy() { - return ''; + protected _renderContent(): TemplateResult | string | void { + const { _hasContent: hasContent, _handleSlotChange: handleSlotChange } = this; + return html` +
+ +
+ `; } static get stableSelector() { diff --git a/packages/web-components/src/components/content-block/content-block-copy.ts b/packages/web-components/src/components/content-block/content-block-copy.ts index 9ae4d5bf7fd..bc2f73eb079 100644 --- a/packages/web-components/src/components/content-block/content-block-copy.ts +++ b/packages/web-components/src/components/content-block/content-block-copy.ts @@ -1,19 +1,22 @@ /** * @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. */ -import { css, customElement } from 'lit-element'; +import { css, property, customElement } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import DDSMarkdown from '../markdown/markdown'; +import { CONTENT_BLOCK_COPY_SIZE } from './defs'; import './content-block-paragraph'; import styles from './content-block.scss'; +export { CONTENT_BLOCK_COPY_SIZE }; + const { stablePrefix: ddsPrefix } = ddsSettings; /** @@ -37,6 +40,18 @@ class DDSContentBlockCopy extends StableSelectorMixin(DDSMarkdown) { }); } + /** + * The content size. + */ + @property({ reflect: true }) + size = CONTENT_BLOCK_COPY_SIZE.REGULAR; + + /** + * The shadow slot this copy content should be in. + */ + @property({ reflect: true }) + slot = 'copy'; + static get stableSelector() { return `${ddsPrefix}--content-block__copy`; } 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 7e95f143afe..f74bc78622f 100644 --- a/packages/web-components/src/components/content-block/content-block.scss +++ b/packages/web-components/src/components/content-block/content-block.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. @@ -13,11 +13,27 @@ @import '@carbon/ibmdotcom-styles/scss/components/layout/layout'; :host(#{$dds-prefix}-content-block), +:host(#{$dds-prefix}-content-block-copy), :host(#{$dds-prefix}-content-block-heading), :host(#{$dds-prefix}-content-block-complementary) { display: block; } +:host(#{$dds-prefix}-content-block-copy[size='sm']) { + width: auto; + max-width: none; + + @include carbon--breakpoint(md) { + @include content-width; + } + + ::slotted(#{$dds-prefix}-content-block-paragraph) { + @include carbon--type-style('body-long-02'); + + margin-bottom: $carbon--spacing-06; + } +} + :host(#{$dds-prefix}-content-block-complementary) { @include dds--make-col(1, 3); } 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 f6e8c4baf34..ca5056092b0 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 + * 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. @@ -24,7 +24,9 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ const slotExistencePropertyNames = { complementary: '_hasComplementary', - footer: '_haFooter', + copy: '_hasCopy', + footer: '_hasFooter', + media: '_hasMedia', }; // TODO: Figure out how to define a mixin type supporting abstract class @@ -32,6 +34,8 @@ const slotExistencePropertyNames = { * Content block. * * @slot heading - The heading content. + * @slot copy - The copy content. + * @slot media - The media content. * @slot footer - The footer (CTA) content. * @slot complementary - The complementary (aside) content. * @abstract @@ -43,11 +47,29 @@ class DDSContentBlock extends LitElement { @internalProperty() protected _hasComplementary = false; + /** + * `true` if there is child content. + */ + @internalProperty() + protected _hasContent = false; + + /** + * `true` if there is copy content. + */ + @internalProperty() + protected _hasCopy = false; + /** * `true` if there is footer content. */ @internalProperty() - protected _haFooter = false; + protected _hasFooter = false; + + /** + * `true` if there is media content. + */ + @internalProperty() + protected _hasMedia = false; /** * Handles `slotchange` event. @@ -63,39 +85,89 @@ class DDSContentBlock extends LitElement { } /** - * @returns The content, that may be wrapped in a Carbon grid. + * @returns The non-header, non-complementary contents. */ protected _renderBody(): TemplateResult | string | void { - const { _haFooter: hasFooter } = this; return html` - ${this._renderCopy()}${this._renderContent()} + ${this._renderCopy()}${this._renderInnerBody()}${this._renderFooter()} + `; + } + + /** + * @returns The main content. + */ + protected _renderContent(): TemplateResult | string | void { + const { _handleSlotChange: handleSlotChange } = this; + return html` + + `; + } + + /** + * @returns The copy content. + */ + protected _renderCopy(): TemplateResult | string | void { + const { _handleSlotChange: handleSlotChange } = this; + return html` + + `; + } + + /** + * @returns The footer content. + */ + protected _renderFooter(): TemplateResult | string | void { + const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this; + return html`
- +
`; } /** - * @returns The main content. + * @returns The heading content. */ - // eslint-disable-next-line class-methods-use-this - protected _renderContent(): TemplateResult | string | void { + protected _renderHeading(): TemplateResult | string | void { + const { _handleSlotChange: handleSlotChange } = this; return html` -
- + + `; + } + + /** + * @returns The main/media content. + */ + protected _renderInnerBody(): TemplateResult | string | void { + const { _hasContent: hasContent, _hasMedia: hasMedia } = this; + return html` +
+ ${this._renderContent()}${this._renderMedia()}
`; } /** - * @returns The copy content. + * @returns The media content. */ - // eslint-disable-next-line class-methods-use-this - protected _renderCopy(): TemplateResult | string | void { + protected _renderMedia(): TemplateResult | string | void { + const { _hasMedia: hasMedia, _handleSlotChange: handleSlotChange } = this; + return html` +
+ +
+ `; + } + + /** + * @returns The complementary content. + */ + protected _renderComplementary(): TemplateResult | string | void { + const { _handleSlotChange: handleSlotChange } = this; return html` - + `; } @@ -114,14 +186,12 @@ class DDSContentBlock extends LitElement { return !hasComplementary ? html` - - ${this._renderBody()} - + ${this._renderHeading()}${this._renderBody()}${this._renderComplementary()} ` : html`
- + ${this._renderHeading()}
@@ -129,7 +199,7 @@ class DDSContentBlock extends LitElement {
${this._renderBody()}
- + ${this._renderComplementary()}
`; } diff --git a/packages/web-components/src/components/content-block/defs.ts b/packages/web-components/src/components/content-block/defs.ts index 3c53e7cf57e..bf76a85da35 100644 --- a/packages/web-components/src/components/content-block/defs.ts +++ b/packages/web-components/src/components/content-block/defs.ts @@ -1,12 +1,27 @@ /** * @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. */ +/** + * The copy content size. + */ +export enum CONTENT_BLOCK_COPY_SIZE { + /** + * Small size. + */ + SMALL = 'sm', + + /** + * Regular size, equals to the middle size. + */ + REGULAR = 'md', +} + /** * The style scheme for the complementary content. */ diff --git a/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx index e16d6516031..939079743b8 100644 --- a/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx @@ -22,6 +22,7 @@ Here's a quick example to get you started. import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js'; import '@carbon/ibmdotcom-web-components/es/components/content-group-cards/content-group-cards.js'; import '@carbon/ibmdotcom-web-components/es/components/content-group-cards/content-group-cards-item.js'; +import '@carbon/ibmdotcom-web-components/es/components/content-group/content-group-copy.js'; import '@carbon/ibmdotcom-web-components/es/components/content-group/content-group-heading.js'; ``` @@ -30,7 +31,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-group/content-gro ```html ${heading} -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.

diff --git a/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.ts b/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.ts index 301b70121cf..aacf99f7984 100644 --- a/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.ts +++ b/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.ts @@ -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. @@ -14,6 +14,7 @@ import textNullable from '../../../../.storybook/knob-text-nullable'; import '../content-group-cards'; import '../content-group-cards-item'; import '../../card/card-heading'; +import '../../content-group/content-group-copy'; import '../../content-group/content-group-heading'; const card1 = html` @@ -47,8 +48,8 @@ export const Default = ({ parameters }) => { return html` ${heading} -

${copy}

- ${card1} ${card2} ${card1} ${card2} + ${copy} + ${card1}${card2}${card1}${card2} `; }; diff --git a/packages/web-components/src/components/content-group-cards/content-group-cards-item.ts b/packages/web-components/src/components/content-group-cards/content-group-cards-item.ts index 80363d0b707..5cad3e4beb9 100644 --- a/packages/web-components/src/components/content-group-cards/content-group-cards-item.ts +++ b/packages/web-components/src/components/content-group-cards/content-group-cards-item.ts @@ -1,14 +1,15 @@ /** * @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. */ -import { customElement, property } from 'lit-element'; +import { customElement } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; +import StableSelectorMixin from '../../globals/mixins/stable-selector'; import DDSCard from '../card/card'; import styles from './content-group-cards.scss'; @@ -20,12 +21,10 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @element dds-content-group-card-item */ @customElement(`${ddsPrefix}-content-group-cards-item`) -class DDSContentGroupCardsItem extends DDSCard { - /** - * The shadow slot the Content Group Card Item should be in. - */ - @property({ reflect: true }) - slot = 'content'; +class DDSContentGroupCardsItem extends StableSelectorMixin(DDSCard) { + static get stableSelector() { + return `${ddsPrefix}--content-group-cards-item`; + } static styles = styles; } diff --git a/packages/web-components/src/components/content-group-cards/content-group-cards.ts b/packages/web-components/src/components/content-group-cards/content-group-cards.ts index 743fca189bb..06f746b6a4e 100644 --- a/packages/web-components/src/components/content-group-cards/content-group-cards.ts +++ b/packages/web-components/src/components/content-group-cards/content-group-cards.ts @@ -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. @@ -26,28 +26,13 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-group-cards`) class DDSContentGroupCards extends StableSelectorMixin(DDSContentGroup) { - /** - * @returns The copy content. - */ - // eslint-disable-next-line class-methods-use-this - protected _renderCopy(): TemplateResult | string | void { + protected _renderInnerBody(): TemplateResult | string | void { + const { _hasContent: hasContent, _hasMedia: hasMedia } = this; return html` -
- -
- `; - } - - /** - * @returns The main content. - */ - // eslint-disable-next-line class-methods-use-this - protected _renderContent(): TemplateResult | string | void { - return html` -
+
- + ${this._renderContent()}${this._renderMedia()}
diff --git a/packages/web-components/src/components/content-group-horizontal/content-group-horizontal.ts b/packages/web-components/src/components/content-group-horizontal/content-group-horizontal.ts index 0845b8fb155..6a467a91346 100644 --- a/packages/web-components/src/components/content-group-horizontal/content-group-horizontal.ts +++ b/packages/web-components/src/components/content-group-horizontal/content-group-horizontal.ts @@ -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. @@ -25,8 +25,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; class DDSContentGroupHorizontal extends StableSelectorMixin(DDSContentBlock) { render() { return html` - - ${this._renderBody()} + ${super.render()} `; } diff --git a/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.mdx index 8999816408b..19a2ed61429 100644 --- a/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.mdx @@ -18,6 +18,7 @@ Here's a quick example to get you started. ##### JS ```javascript +import '@carbon/ibmdotcom-web-components/es/components/content-group/content-group-copy.js'; import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item.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'; @@ -30,17 +31,13 @@ import '@carbon/ibmdotcom-web-components/es/components/content-group/content-gro ```html - Curabitur malesuada varius mi eu posuere - Lorem ipsum *dolor* sit amet + Curabitur malesuada varius mi eu posuere + Lorem ipsum *dolor* sit amet ... - Lorem ipsum dolor sit amet + Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Link text @@ -61,6 +58,7 @@ to see how Web Components selector and `data-autoid` should be used. | Web Components selector | Compatibility selector | Description | | -------------------------------- | ----------------------------------------- | ----------- | | `` | `data-autoid="dds--content-group-simple"` | Component | +| `` | `data-autoid="dds--content-group__copy"` | Component | | `` | `data-autoid="dds--content-group__title"` | Component | | `` | `data-autoid="dds--content-item__copy"` | Component | diff --git a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.ts b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.ts index a5ff6d6960c..e1579e1000a 100644 --- a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.ts +++ b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.ts @@ -2,7 +2,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. @@ -14,6 +14,8 @@ import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20'; import readme from './README.stories.mdx'; import textNullable from '../../../../.storybook/knob-text-nullable'; import '../../pictogram-item/pictogram-item'; +import '../../content-group/content-group-copy'; +import '../../content-item/content-item-copy'; import '../../content-item/content-item-heading'; import styles from './content-group-pictograms.stories.scss'; @@ -76,7 +78,7 @@ export const Default = ({ parameters }) => { return html` ${groupHeading} - ${groupCopy} + ${groupCopy} ${pictogramsItems.map( ({ heading, copy, linkWithIcon }) => html` diff --git a/packages/web-components/src/components/content-group-simple/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group-simple/__stories__/README.stories.mdx index 6b79541a7ac..c872c1fe51a 100644 --- a/packages/web-components/src/components/content-group-simple/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/content-group-simple/__stories__/README.stories.mdx @@ -23,7 +23,7 @@ import '@carbon/ibmdotcom-web-components/es/components/image-with-caption/image- import '@carbon/ibmdotcom-web-components/es/components/cta/card-cta.js'; import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item.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'; +import '@carbon/ibmdotcom-web-components/es/components/content-group/content-group-copy.js'; import '@carbon/ibmdotcom-web-components/es/components/content-group/content-group-heading.js'; import '@carbon/ibmdotcom-web-components/es/components/content-group-simple/content-group-simple.js'; import '@carbon-web-components/es/icons/arrow--right/20'; @@ -34,7 +34,7 @@ import '@carbon-web-components/es/icons/arrow--right/20'; ```html Curabitur malesuada varius mi eu posuere - Lorem ipsum *dolor* sit amet + Lorem ipsum *dolor* sit amet ` | `data-autoid="dds--content-group-simple"` | Component | +| `` | `data-autoid="dds--content-group__copy"` | Component | | `` | `data-autoid="dds--content-group__title"` | Component | -| `` | `data-autoid="dds--content-item__copy"` | Component | diff --git a/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts b/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts index a65b9bff448..d8afeb53936 100644 --- a/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts +++ b/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts @@ -17,6 +17,7 @@ import '../../image/image'; import '../../cta/video-cta-container'; import '../../cta/card-cta'; import '../../cta/card-cta-footer'; +import '../../content-group/content-group-copy'; import '../../content-group/content-group-heading'; import '../../content-item/content-item'; import '../../content-item/content-item-heading'; @@ -120,7 +121,7 @@ export const Default = ({ parameters }) => { return html` ${groupHeading} - ${groupCopy} + ${groupCopy} ${items.map( ({ heading: itemHeading, copy: itemCopy }) => html` @@ -143,7 +144,7 @@ export const WithImage = ({ parameters }) => { return html` ${groupHeading} - ${groupCopy} + ${groupCopy} ${image({ heading: groupHeading })} ${items.map( ({ heading: itemHeading, copy: itemCopy }) => html` @@ -167,7 +168,7 @@ export const WithVideo = ({ parameters }) => { return html` ${groupHeading} - ${groupCopy} + ${groupCopy} ${items.map( ({ heading: itemHeading, copy: itemCopy }) => html` diff --git a/packages/web-components/src/components/content-group-simple/content-group-simple.ts b/packages/web-components/src/components/content-group-simple/content-group-simple.ts index af5311413b1..1f2dccb85fb 100644 --- a/packages/web-components/src/components/content-group-simple/content-group-simple.ts +++ b/packages/web-components/src/components/content-group-simple/content-group-simple.ts @@ -1,13 +1,13 @@ /** * @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. */ -import { html, css, customElement } from 'lit-element'; +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'; @@ -21,18 +21,14 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * Simple version of content group. * * @element dds-content-group-simple - * @slot media - The media content. */ @customElement(`${ddsPrefix}-content-group-simple`) class DDSContentGroupSimple extends StableSelectorMixin(DDSContentGroup) { - // eslint-disable-next-line class-methods-use-this - protected _renderContent() { + protected _renderInnerBody(): TemplateResult | string | void { + const { _hasContent: hasContent, _hasMedia: hasMedia } = this; return html` -
-
- -
- +
+ ${this._renderMedia()}${this._renderContent()}
`; } diff --git a/packages/web-components/src/components/content-group/content-group-copy.ts b/packages/web-components/src/components/content-group/content-group-copy.ts new file mode 100644 index 00000000000..adb1c2c0028 --- /dev/null +++ b/packages/web-components/src/components/content-group/content-group-copy.ts @@ -0,0 +1,53 @@ +/** + * @license + * + * 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 { property, customElement } from 'lit-element'; +import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; +import StableSelectorMixin from '../../globals/mixins/stable-selector'; +import DDSMarkdown from '../markdown/markdown'; +import './content-group-paragraph'; +import styles from './content-group.scss'; + +const { stablePrefix: ddsPrefix } = ddsSettings; + +/** + * The copy content in content group. + * + * @element dds-content-group-copy + */ +@customElement(`${ddsPrefix}-content-group-copy`) +class DDSContentGroupCopy extends StableSelectorMixin(DDSMarkdown) { + protected get _customTags() { + const tags = new Set(super._customTags); + tags.add(`${ddsPrefix}-content-group-paragraph`); + return tags; + } + + protected get _renderer() { + return Object.assign(super._renderer, { + paragraph(text) { + return `<${ddsPrefix}-content-group-paragraph>${text}`; + }, + }); + } + + /** + * The shadow slot this copy content should be in. + */ + @property({ reflect: true }) + slot = 'copy'; + + static get stableSelector() { + return `${ddsPrefix}--content-group__copy`; + } + + static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader +} + +export default DDSContentGroupCopy; diff --git a/packages/web-components/src/components/content-group/content-group-paragraph.ts b/packages/web-components/src/components/content-group/content-group-paragraph.ts new file mode 100644 index 00000000000..e049edf8b3e --- /dev/null +++ b/packages/web-components/src/components/content-group/content-group-paragraph.ts @@ -0,0 +1,32 @@ +/** + * @license + * + * 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 { html, customElement, LitElement } from 'lit-element'; +import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; +import styles from './content-group.scss'; + +const { stablePrefix: ddsPrefix } = ddsSettings; + +/** + * The paragraph content in content group. + * + * @element dds-content-group-paragraph + */ +@customElement(`${ddsPrefix}-content-group-paragraph`) +class DDSContentGroupParagraph extends LitElement { + render() { + return html` + + `; + } + + static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader +} + +export default DDSContentGroupParagraph; diff --git a/packages/web-components/src/components/content-group/content-group.scss b/packages/web-components/src/components/content-group/content-group.scss index ff5283ecdb4..726f42651ea 100644 --- a/packages/web-components/src/components/content-group/content-group.scss +++ b/packages/web-components/src/components/content-group/content-group.scss @@ -1,15 +1,22 @@ // -// 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-components/scss/globals/scss/vars'; +@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles'; @import '@carbon/ibmdotcom-styles/scss/globals/vars'; @import '../../globals/scss/box-sizing'; @import '@carbon/ibmdotcom-styles/scss/internal/content-group/content-group'; -:host(#{$dds-prefix}-content-group) { +:host(#{$dds-prefix}-content-group), +:host(#{$dds-prefix}-content-group-copy), +:host(#{$dds-prefix}-content-group-paragraph) { display: block; } + +:host(#{$dds-prefix}-content-group-copy) { + @include carbon--type-style('body-long-02'); +} diff --git a/packages/web-components/src/components/content-group/content-group.ts b/packages/web-components/src/components/content-group/content-group.ts index 5e2689fb278..ebafbee825a 100644 --- a/packages/web-components/src/components/content-group/content-group.ts +++ b/packages/web-components/src/components/content-group/content-group.ts @@ -1,94 +1,45 @@ /** * @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. */ -import { html, internalProperty, LitElement, TemplateResult } from 'lit-element'; +import { html, TemplateResult } from 'lit-element'; import settings from 'carbon-components/es/globals/js/settings.js'; +import DDSContentBlock from '../content-block/content-block'; import styles from './content-group.scss'; const { prefix } = settings; -/** - * The table mapping slot name with the private property name that indicates the existence of the slot content. - */ -const slotExistencePropertyNames = { - footer: '_hasFooter', -}; - /** * Content group. * * @abstract */ -class DDSContentGroup extends LitElement { - /** - * `true` if there is footer content. - */ - @internalProperty() - protected _hasFooter = false; - - /** - * Handles `slotchange` event. - * - * @param event The event. - */ - protected _handleSlotChange({ target }: Event) { - const { name } = target as HTMLSlotElement; - const hasContent = (target as HTMLSlotElement) - .assignedNodes() - .some(node => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()); - this[slotExistencePropertyNames[name] || '_hasContent'] = hasContent; - } - - /** - * @returns The content, that may be wrapped in a Carbon grid. - */ - protected _renderBody(): TemplateResult | string | void { - const { _hasFooter: hasFooter } = this; +class DDSContentGroup extends DDSContentBlock { + protected _renderFooter(): TemplateResult | string | void { + const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this; return html` - ${this._renderCopy()}${this._renderContent()}
- +
`; } - /** - * @returns The main content. - */ - // eslint-disable-next-line class-methods-use-this - protected _renderContent(): TemplateResult | string | void { + protected _renderInnerBody(): TemplateResult | string | void { + const { _hasContent: hasContent, _hasMedia: hasMedia } = this; return html` -
+
`; } - /** - * @returns The copy content. - */ - // eslint-disable-next-line class-methods-use-this - protected _renderCopy(): TemplateResult | string | void { - return html` - - `; - } - - render() { - return html` - - ${this._renderBody()} - `; - } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts b/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts index 5d3eed84119..aadd7b177ee 100644 --- a/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts +++ b/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts @@ -27,6 +27,11 @@ import mockLegalLinks from '../../footer/__stories__/legal-links'; import mockLocaleList from '../../locale-modal/__stories__/locale-data.json'; import '../../card/card-eyebrow'; import '../../card/card-heading'; +/* eslint-disable import/no-duplicates */ +import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy'; +// Above import is interface-only ref and thus code won't be brought into the build +import '../../content-block/content-block-copy'; +/* eslint-enable import/no-duplicates */ import '../../content-item-horizontal/content-item-horizontal'; import '../../content-item-horizontal/content-item-horizontal-copy'; import '../../content-item-horizontal/content-item-horizontal-eyebrow'; @@ -156,7 +161,7 @@ const StoryContent = () => html` Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. @@ -186,7 +191,7 @@ const StoryContent = () => html` Pharetra pharetra massa massa ultricies mi quis. - + ${Array.from([1, 2]).map(() => contentBlockSegmentedItems)} @@ -212,7 +217,7 @@ const StoryContent = () => html` Elementum nibh tellus molestie nunc non. - + ${Array.from([1, 2]).map(() => contentBlockSegmentedItemsWithImage)} Lorem ipsum dolor @@ -222,11 +227,11 @@ const StoryContent = () => html` Mauris ultrices eros in cursus - Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui. - + @@ -254,7 +259,7 @@ const StoryContent = () => html` Aliquam condimentum interdum - + ${Array.from([1, 2, 3]).map(() => cardGroupItems)} diff --git a/packages/web-components/src/components/leadspace-block/__stories__/README.stories.mdx b/packages/web-components/src/components/leadspace-block/__stories__/README.stories.mdx index e39d34851ac..2aa88c1fdbd 100644 --- a/packages/web-components/src/components/leadspace-block/__stories__/README.stories.mdx +++ b/packages/web-components/src/components/leadspace-block/__stories__/README.stories.mdx @@ -38,7 +38,7 @@ import '@carbon/ibmdotcom-web-components/es/components/leadspace-block/leadspace LeadSpace Block Title LeadSpace Block Heading - LeadSpace Block Copy + LeadSpace Block Copy { ${title} ${heading} - ${copy} + ${copy} ${image} ${linkList} ${buttonCTA} @@ -96,7 +96,7 @@ export const WithVideo = ({ parameters }) => { ${title} ${heading} - ${copy} + ${copy} diff --git a/packages/web-components/src/components/leadspace-block/leadspace-block-content.ts b/packages/web-components/src/components/leadspace-block/leadspace-block-content.ts index c94053eec82..054346070d9 100644 --- a/packages/web-components/src/components/leadspace-block/leadspace-block-content.ts +++ b/packages/web-components/src/components/leadspace-block/leadspace-block-content.ts @@ -1,13 +1,13 @@ /** * @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. */ -import { css, customElement, html } from 'lit-element'; +import { css, customElement, html, 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 DDSContentBlock from '../content-block/content-block'; @@ -23,23 +23,15 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-leadspace-block-content`) class DDSLeadSpaceBlockContent extends DDSContentBlock { - // eslint-disable-next-line class-methods-use-this - protected _renderContent() { + protected _renderInnerBody(): TemplateResult | string | void { + const { _hasContent: hasContent, _hasMedia: hasMedia } = this; return html` -
- - +
+ ${this._renderMedia()}${this._renderContent()}
`; } - // eslint-disable-next-line class-methods-use-this - protected _renderCopy() { - return html` - - `; - } - render() { return html` diff --git a/packages/web-components/src/components/logo-grid/logo-grid.ts b/packages/web-components/src/components/logo-grid/logo-grid.ts index 8137425bc27..4b2f668e8e4 100644 --- a/packages/web-components/src/components/logo-grid/logo-grid.ts +++ b/packages/web-components/src/components/logo-grid/logo-grid.ts @@ -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. @@ -22,20 +22,20 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-logo-grid`) class DDSLogoGrid extends StableSelectorMixin(DDSContentBlock) { - @property({ attribute: 'hide-border', reflect: true, type: Boolean }) - hideBorder = false; - - // eslint-disable-next-line class-methods-use-this - protected _renderContent() { + protected _renderInnerBody() { + const { _hasContent: hasContent, _hasMedia: hasMedia } = this; return html` -
+
- + ${this._renderContent()}${this._renderMedia()}
`; } + @property({ attribute: 'hide-border', reflect: true, type: Boolean }) + hideBorder = false; + render() { return html` @@ -43,11 +43,6 @@ class DDSLogoGrid extends StableSelectorMixin(DDSContentBlock) { `; } - // eslint-disable-next-line class-methods-use-this - protected _renderCopy() { - return ''; - } - static get stableSelector() { return `${ddsPrefix}--logo-grid`; } diff --git a/packages/web-components/tests/snapshots/dds-callout-with-media.md b/packages/web-components/tests/snapshots/dds-callout-with-media.md index 01739d2fcfb..7ceebde2ab1 100644 --- a/packages/web-components/tests/snapshots/dds-callout-with-media.md +++ b/packages/web-components/tests/snapshots/dds-callout-with-media.md @@ -9,13 +9,21 @@
-
+ + +