chore(content-block): reorganize slots (#4869)

### Related Ticket(s)

Refs #4627.
Refs #4851.

### Description

Unifies the slot name strategy, using the default slot for child contents, and `copy` slot for copy contents, for `<dds-content-block>`, `<dds-content-group>` and their descendants.

Such unification allows us to reduce the overrides, especially for slot names and layout, in the descendants on top of the ancestor components.

`<dds-content-block-copy>` now sets `copy` slot automatically. `<dds-content-block-headlines-item>` no longer sets the slot.

Also:

* Ensures that `<div>`s surrounding copy, media, etc. contents won't be rendered unless the corresponding contents are there.
* Introduces `size="sm"` option to `<dds-content-block-copy>`, so we can use it instead of `<dds-content-item-copy>` in
  `<dds-content-block>`, `<dds-content-group>` and their descendants.
* Introduces `<dds-content-group-copy>` so we can apply styling specific to content group.

### Changelog

**New**

- `size="sm"` option to `<dds-content-block-copy>`.
- `<dds-content-group-copy>`, the copy content of content group.

**Changed**

- Changes to unify the slot name strategy, using the default slot for child contents, and `copy` slot for copy contents, for `<dds-content-block>`, `<dds-content-group>` and their descendants.
- `<dds-content-block-copy>` to set `copy` slot automatically
- `<dds-content-block-headlines-item>` to no longer set the slot.
- Changes to ensure that `<div>`s surrounding copy, media, etc. contents won't be rendered unless the corresponding contents are there.

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;
     }
   }
 

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;
   }
 }
 

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;
 

packages/web-components/examples/codesandbox/components/callout-with-media/index.html

@@ -26,7 +26,7 @@
     <h1>Hello World! 👋</h1>
     <dds-callout-with-media>
       <dds-content-block-heading>lorum ipsum dolor sit ameet</dds-content-block-heading>
-      <dds-content-item-copy>lorum ipsum dolor sit ameet</dds-content-item-copy>
+      <dds-content-block-copy size="sm">lorum ipsum dolor sit ameet</dds-content-block-copy>
       <dds-callout-with-media-image
         alt="Image alt text"
         default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"

packages/web-components/examples/codesandbox/components/callout-with-media/src/index.js

@@ -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 '@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-item/content-item-copy.js';
 import '@carbon/ibmdotcom-web-components/es/components/callout-with-media/callout-with-media.js';
 import '@carbon/ibmdotcom-web-components/es/components/callout-with-media/callout-with-media-image.js';

packages/web-components/examples/codesandbox/components/content-block-cards/index.html

@@ -25,7 +25,7 @@
         <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
           <dds-content-block-cards>
             <dds-content-block-heading>Lorem ipsum dolor sit amet</dds-content-block-heading>
-            <dds-card-group slot="content">
+            <dds-card-group>
               <dds-card-group-item href="https://example.com">
                 <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
                 <p>

packages/web-components/examples/codesandbox/components/content-block-segmented/index.html

@@ -25,7 +25,7 @@
         <div class="bx--col-sm-4 bx-col-lg-8">
           <dds-content-block-segmented>
             <dds-content-block-heading>heading</dds-content-block-heading>
-            <dds-content-block-copy slot="copy">copy</dds-content-block-copy>
+            <dds-content-block-copy>copy</dds-content-block-copy>
             <dds-image-with-caption
               slot="media"
               alt="Image alt text"

packages/web-components/examples/codesandbox/components/content-group-pictograms/index.html

@@ -23,7 +23,7 @@
     <div class="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
       <dds-content-group-pictograms>
         <dds-content-group-heading>${groupHeading}</dds-content-group-heading>
-        <dds-content-item-copy>${groupCopy}</dds-content-item-copy>
+        <dds-content-group-copy>${groupCopy}</dds-content-group-copy>
             <dds-pictogram-item>
               <svg
                 version="1.1"

packages/web-components/examples/codesandbox/components/content-group-pictograms/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,6 +10,7 @@
 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-pictograms/content-group-pictograms.js';
 import './index.scss';

packages/web-components/examples/codesandbox/components/content-group-simple/index.html

@@ -23,7 +23,7 @@
     <div class="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
       <dds-content-group-simple>
         <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-        <dds-content-item-copy>Lorem ipsum *dolor* sit amet</dds-content-item-copy>
+        <dds-content-group-copy>Lorem ipsum *dolor* sit amet</dds-content-group-copy>
         <dds-image-with-caption slot="media" alt="Image alt text" default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616" heading="Curabitur malesuada varius mi eu posuere">
           <dds-image-item media="(min-width: 672px)" srcset="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></dds-image-item>
           <dds-image-item media="(min-width: 400px)" srcset="https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"></dds-image-item>

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';

packages/web-components/examples/codesandbox/components/leadspace-block/index.html

@@ -27,7 +27,7 @@
             <dds-leadspace-block-heading>LeadSpace Block Title</dds-leadspace-block-heading>
             <dds-leadspace-block-content>
               <dds-content-block-heading>LeadSpace Block Heading</dds-content-block-heading>
-              <dds-content-block-copy slot="copy">LeadSpace Block Copy</dds-content-block-copy>
+              <dds-content-block-copy>LeadSpace Block Copy</dds-content-block-copy>
               <dds-leadspace-block-media slot="media">
                 <dds-image-with-caption
                 alt="Image alt text"

packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx

@@ -18,15 +18,18 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
+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/callout-with-media/callout-with-media.js';
+import '@carbon/ibmdotcom-web-components/es/components/callout-with-media/callout-with-media-image.js';
 ```
 
 ### HTML
 
 ```html
 <dds-callout-with-media>
   <dds-content-block-heading>lorum ipsum dolor sit ameet</dds-content-block-heading>
-  <dds-content-item-copy>lorum ipsum dolor sit ameet</dds-content-item-copy>
+  <dds-content-block-copy size="sm">lorum ipsum dolor sit ameet</dds-content-block-copy>
   <dds-callout-with-media-image
     alt="Image alt text"
     default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"

packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.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.
@@ -11,7 +11,11 @@ import { html } from 'lit-element';
 import { select } from '@storybook/addon-knobs';
 import styles from './callout-with-media.stories.scss';
 import '../../content-block/content-block-heading';
-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 '../callout-with-media';
 import '../callout-with-media-image';
 import '../callout-with-media-video';
@@ -36,7 +40,7 @@ export const Default = ({ parameters }) => {
   return html`
     <dds-callout-with-media>
       <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-content-item-copy>${copy}</dds-content-item-copy>
+      <dds-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}">${copy}</dds-content-block-copy>
       ${mediaType === 'image' ? image : ``} ${mediaType === 'video' ? video : ``}
     </dds-callout-with-media>
   `;

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`
     <dds-content-block-cards>
       <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-card-group slot="content">
+      <dds-card-group>
         ${cardGroupItem} ${cardGroupItem} ${cardGroupItem} ${cardGroupItem} ${cardGroupItem}
       </dds-card-group>
       <dds-card-cta slot="footer" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
@@ -84,7 +84,7 @@ export const withImages = ({ parameters }) => {
   return html`
     <dds-content-block-cards>
       <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-card-group slot="content">
+      <dds-card-group>
         ${cardGroupItemWithImages} ${cardGroupItemWithImages} ${cardGroupItemWithImages} ${cardGroupItemWithImages}
         ${cardGroupItemWithImages}
       </dds-card-group>
@@ -101,7 +101,7 @@ export const withVideos = ({ parameters }) => {
   return html`
     <dds-content-block-cards>
       <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-card-group slot="content">
+      <dds-card-group>
         ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} ${cardGroupItemWithVideos}
         ${cardGroupItemWithVideos}
       </dds-card-group>

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`
-      <div class="${prefix}--content-block__children">
-        <slot name="content"></slot>
-      </div>
-    `;
-  }
-
   static get stableSelector() {
     return `${ddsPrefix}--content-block-cards`;
   }

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
 <dds-content-block-headlines>
   <dds-content-block-heading>Aliquam condimentum<</dds-content-block-heading>
-  <dds-content-block-copy slot="copy"
+  <dds-content-block-copy
     >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
     ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
     sollicitudin.</dds-content-block-copy

packages/web-components/src/components/content-block-headlines/__stories__/content-block-headlines.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.
@@ -50,7 +50,7 @@ export const Default = !DDS_CONTENT_BLOCK_HEADLINES
       return html`
         <dds-content-block-headlines>
           <dds-content-block-heading>${heading}</dds-content-block-heading>
-          <dds-content-block-copy slot="copy">${copy}</dds-content-block-copy>
+          <dds-content-block-copy>${copy}</dds-content-block-copy>
           ${contentItemRow1} ${contentItemRow1} ${contentItemRow2} ${contentItemRow1}
         </dds-content-block-headlines>
       `;

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`
       <h4 class="bx--content-block-headlines__heading"><slot name="heading"></slot></h4>