Merge branch 'master' into fix/megamenu-update-fixes

carbon-design-system · Feb 5, 2021 · 876bad6 · 876bad6
2 parents ff8462d + bb5243d
commit 876bad6
Show file tree

Hide file tree

Showing 16 changed files with 370 additions and 180 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -22,7 +22,7 @@
   <body>
     <div class="bx--grid">
       <div class="bx--row">
-        <div class="bx--col-sm-4 bx-col-lg-12 bx--offset-lg-4">
+        <div class="bx--col-sm-4 bx-col-lg-12 bx--offset-lg-4 bx--no-gutter">
           <dds-content-block-headlines>
             <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
             <dds-content-item-copy>Lorem ipsum *dolor* sit amet</dds-content-item-copy>

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
@@ -27,11 +27,11 @@
             <dds-content-block-heading>
               Curabitur malesuada varius mi eu posuere
             </dds-content-block-heading>
-            <dds-content-block-paragraph>
+            <dds-content-block-copy size="lg">
               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.
-            </dds-content-block-paragraph>
+            </dds-content-block-copy>
             <dds-content-block-media-content>
               <dds-content-group-heading>
                 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
@@ -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/...nts/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts b/...nts/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts
@@ -77,12 +77,8 @@ export default !DDS_CONTENT_BLOCK_HEADLINES
         },
         decorators: [
           story => html`
-            <div class="bx--grid dds-ce-demo-devenv--grid--stretch">
-              <div class="bx--row dds-ce-demo-devenv--grid-row">
-                <div class="bx--col-sm-4 bx--offset-lg-4 bx--col-lg-12">
-                  ${story()}
-                </div>
-              </div>
+            <div class="dds-ce-demo-devenv--simple-grid dds-ce-demo-devenv--simple-grid--content-block-headlines">
+              ${story()}
             </div>
           `,
         ],

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
@@ -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
@@ -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`
+      <div ?hidden="${!hasContent && !hasCopy && !hasMedia}" class="${prefix}--content-layout__body">
+        ${super._renderBody()}
+      </div>
+    `;
+  }
+
   protected _renderInnerBody(): TemplateResult | string | void {
     const { _hasContent: hasContent, _handleSlotChange: handleSlotChange } = this;
     return html`
-      <div ?hidden="${!hasContent}" class="${prefix}--content-block__children">
-        <div class="${prefix}--content-block-headlines__container">
-          <div class="${prefix}--content-block-headlines__row">
-            <div class="${prefix}--content-block-headlines__item-container">
-              <slot @slotchange="${handleSlotChange}"></slot>
-            </div>
-          </div>
-        </div>
+      <div ?hidden="${!hasContent}" class="${prefix}--content-block-headlines__item-container">
+        <slot @slotchange="${handleSlotChange}"></slot>
+      </div>
+    `;
+  }
+
+  protected _renderContent(): TemplateResult | string | void {
+    const { _handleSlotChange: handleSlotChange } = this;
+    return html`
+      <slot @slotchange="${handleSlotChange}"></slot>
+    `;
+  }
+
+  protected _renderFooter(): TemplateResult | string | void {
+    const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this;
+    // TODO: See if we can remove the surrounding `<div>`
+    return html`
+      <div ?hidden="${!hasFooter}">
+        <slot name="footer" @slotchange="${handleSlotChange}"></slot>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="${this._getContainerClasses()}">
+        ${this._renderHeading()}${this._renderBody()}${this._renderComplementary()}
       </div>
     `;
   }

diff --git a/...eb-components/src/components/content-block-media/__stories__/README.stories.mdx b/...eb-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
   <dds-content-block-heading>
     Curabitur malesuada varius mi eu posuere
   </dds-content-block-heading>
-  <dds-content-block-paragraph>
+  <dds-content-block-copy size="lg">
     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.
-  </dds-content-block-paragraph>
+  </dds-content-block-copy>
   <dds-content-block-media-content>
     <dds-content-group-heading>
       Lorem ipsum dolor sit amet