fix(content-block): add story and fix issues (#11658)

### Related Ticket(s)

#11624 (content-block)

### Description

This creates a story for content-block and updates the spacing for the component.
### Changelog

**New**

- Story and data folder with content
**Changed**
- link-list
   - heading had extra styling indenting it at md breakpoint -> this was removed to stay in grid
   - had padding at the bottom if last-of-type this was removed since not necessary in content-block
- content-block
   - lots of style updates
   - bottom and top spacing converted from padding to margins
   - accounting for different paddings at each breakpoint and with/without border
   - all children components are slotted unless the fall in the gutter (i.e. cards and tabs-)
   - when there is a card cta and the child in content-block is a card-group that card cta will align to the grid-mode the card-group is in
   - headings and copies have a max-inline-size
   - moved most of the content-block styles inside the styles package
   - readme updates to explain to adopters it should be in a 12 column grid
- content-group/item
   - both now only have bottom margins if there are multiple together OR if single have no bottom/top margins
- cta-block
   - there was an extra row-gap causing additional spacing
 - leadspace block
    - because of content-block updates needed to adjust some styling to stay in line

**Removed**

- border from content-items in cta-block

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/styles/scss/components/leadspace-block/_leadspace-block.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * 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,6 +30,10 @@
     ::slotted(#{$c4d-prefix}-leadspace-block-content) {
       padding: 0;
     }
+
+    .#{$prefix}--content-layout ::slotted(*:not([slot])) {
+      margin: 0;
+    }
   }
 
   :host(#{$c4d-prefix}-leadspace-block[border]) {

packages/styles/scss/components/link-list/_link-list.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -104,14 +104,6 @@
     }
 
     @include type-style('heading-02');
-
-    @include breakpoint(md) {
-      margin-inline-start: -$spacing-05;
-    }
-
-    @include breakpoint(lg) {
-      margin-inline-start: 0;
-    }
   }
 
   :host(#{$c4d-prefix}-link-list-item)[type='default'],
@@ -177,8 +169,4 @@
     min-block-size: 20px;
     min-inline-size: 20px;
   }
-
-  :host(#{$c4d-prefix}-link-list):last-of-type {
-    padding-block-end: $spacing-10;
-  }
 }

packages/styles/scss/internal/content-block/_content-block.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * 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 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/content-width' as *;
 @use '../../globals/utils/flex-grid' as *;
@@ -27,20 +28,18 @@
   :host(#{$c4d-prefix}-content-block-headlines),
   .#{$prefix}--content-block {
     display: block;
-    padding-block: $spacing-07 $spacing-10;
+    margin-block: $spacing-07;
+    margin-block-end: $spacing-12;
 
-    @include breakpoint(md) {
-      padding-block: $spacing-10 $spacing-12;
-    }
-
-    @include breakpoint(max) {
-      padding-block-end: $spacing-13;
+    @include breakpoint('lg') {
+      margin-block: $spacing-10;
+      margin-block-end: $spacing-13;
     }
 
-    .#{$prefix}--card__CTA {
-      // TO DO: aspect ratio 2x1
-      @include breakpoint(md) {
-        @include hang;
+    &[complementary-style-scheme='with-border'] {
+      margin-block-end: $spacing-07;
+      @include breakpoint('lg') {
+        margin-block-end: $spacing-10;
       }
     }
 
@@ -70,40 +69,47 @@
 
     &.#{$prefix}--layout--border {
       margin-inline: 0;
+      margin-inline-end: 0;
+      padding-block-end: $spacing-10;
       padding-inline: 0;
+      padding-inline-end: 0;
+
+      @include breakpoint('lg') {
+        padding-block-end: $spacing-12;
+      }
     }
 
-    // Most slotted contents have margins aligning to Carbon grid gutters.
-    // Note: Child contents define their margin by their own
-    ::slotted([slot]) {
-      margin-inline: $spacing-05;
+    ::slotted([slot='heading']),
+    ::slotted([slot='copy']),
+    ::slotted(*:not([slot])) {
+      margin-inline-start: $spacing-05;
     }
 
-    // Cards and link lists are the exceptions of above
-    // TODO: Remove negative margin adjustment from `<cds-link-list-item*>` and add `<cds-link-list>` here
-    ::slotted(#{$c4d-prefix}-card[slot]),
-    ::slotted(#{$c4d-prefix}-card-cta[slot]),
-    ::slotted(#{$c4d-prefix}-card-link-cta[slot]) {
-      margin-inline: 0;
+    ::slotted(#{$c4d-prefix}-content-group:not([slot])),
+    ::slotted([data-autoid^='c4d--tabs-']:not([slot])),
+    ::slotted([data-autoid^='c4d--card']:not([slot])) {
+      margin-inline-start: 0;
     }
 
     &__aside,
     ::slotted([slot='complementary']) {
       grid-area: complementary;
-      margin-block: $layout-05;
-
-      @include breakpoint(lg) {
-        margin-block: 0;
-      }
     }
 
-    ::slotted([slot='footer']) {
-      margin-block-start: $spacing-09;
+    ::slotted(#{$c4d-prefix}-card[slot='footer']) {
+      @include make-col(4, 4);
 
       @include breakpoint(md) {
-        inline-size: 50%;
-        margin-block-start: $spacing-10;
+        @include make-col(4, 8);
       }
+
+      @include breakpoint(lg) {
+        @include make-col(4, 12);
+      }
+    }
+
+    ::slotted([slot='footer']:not(#{$c4d-prefix}-card)) {
+      padding-inline-start: $spacing-05;
     }
 
     ::slotted([slot='heading']) {
@@ -142,6 +148,31 @@
         'footer footer footer footer footer footer footer footer . complementary complementary complementary';
       grid-template-columns: repeat(12, 1fr);
     }
+
+    ::slotted(#{$c4d-prefix}-card[slot='footer']) {
+      @include make-col(4, 4);
+
+      @include breakpoint(md) {
+        @include make-col(4, 8);
+      }
+    }
+
+    ::slotted([slot='complementary']) {
+      margin-inline: $spacing-05;
+    }
+  }
+
+  .#{$prefix}--content-layout--with-complementary.#{$prefix}--content-layout--with-footer {
+    @include breakpoint-down(lg) {
+      ::slotted([slot='complementary']) {
+        padding-block-start: $spacing-07;
+      }
+    }
+  }
+
+  .#{$prefix}--content-layout--with-children
+    .#{$c4d-prefix}--content-block-footer {
+    padding-block-start: $spacing-07;
   }
 
   .#{$prefix}--content-layout__body {
@@ -182,7 +213,7 @@
   :host(#{$c4d-prefix}-callout-with-media-copy),
   .#{$prefix}--content-block__heading,
   .#{$prefix}--content-block__copy {
-    @include content-width;
+    max-inline-size: to-rem(640px);
   }
 
   :host(#{$c4d-prefix}-content-block-heading),
@@ -243,4 +274,36 @@
       padding-inline: $spacing-05;
     }
   }
+
+  :host(#{$c4d-prefix}-content-block),
+  :host(#{$c4d-prefix}-callout-with-media-copy),
+  :host(#{$c4d-prefix}-content-block-copy),
+  :host(#{$c4d-prefix}-content-block-heading),
+  :host(#{$c4d-prefix}-content-block-complementary),
+  :host(#{$c4d-prefix}-content-block-paragraph) {
+    display: block;
+  }
+
+  // TODO: Consider applying this rule in general
+  :host(#{$c4d-prefix}-content-block-simple),
+  :host(#{$c4d-prefix}-content-block-segmented) {
+    ::slotted(#{$c4d-prefix}-callout-with-media-copy),
+    ::slotted(#{$c4d-prefix}-content-block-copy) {
+      @include breakpoint(md) {
+        inline-size: calc((100% - 2 * #{$spacing-05}) * 0.9);
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media-copy[size='sm']),
+  :host(#{$c4d-prefix}-content-block-copy[size='sm']) {
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+      @include type-style('body-02', true);
+    }
+  }
+
+  // TODO: Apply `cds--make-col(2, 3)` to React version, too, so we can merge the style to React version
+  .#{$c4d-prefix}-ce--content-block__col {
+    @include make-col(2, 3);
+  }
 }

packages/styles/scss/internal/content-group/_content-group.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -31,12 +31,20 @@
   :host(#{$c4d-prefix}-content-group-pictograms),
   .#{$prefix}--content-group {
     display: block;
-    margin-block: $spacing-07;
+    margin-block-end: $spacing-07;
 
     @include breakpoint(md) {
       margin-block-end: $spacing-09;
     }
 
+    &:only-of-type {
+      margin-block-end: 0;
+    }
+
+    &:last-of-type {
+      margin-block-end: 0;
+    }
+
     .#{$prefix}--card__CTA {
       // TO DO: aspect ratio 2x1
       @include breakpoint(md) {

packages/styles/scss/internal/content-item/_content-item.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * 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,6 +11,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '../../globals/vars' as *;
 @use '../../globals/utils/content-width' as *;
 @use '../../components/list/list';
@@ -20,10 +21,17 @@
 @mixin content-item {
   :host(#{$c4d-prefix}-content-item) {
     display: block;
-    margin-block: $spacing-07;
     margin-block-end: $spacing-07;
     max-inline-size: to-rem(640px);
 
+    &:only-of-type {
+      margin-block-end: 0;
+    }
+
+    &:last-of-type {
+      margin-block-end: 0;
+    }
+
     @include breakpoint(md) {
       padding-inline-end: $spacing-05;
     }

packages/web-components/src/components/content-block/__stories__/README.stories.mdx

@@ -5,6 +5,8 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
 # `<c4d-content-block>`
 
+> Content block is one of the main layout components that can be used to build web experiences on IBM.com. It includes a large heading, subheading, body copy and CTA, and can accept many child components to enable customization and flexibility. The Content block should be used in a 12 column grid.
+
 > 💡 Check our
 > [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/content-block)
 > example implementation.
@@ -19,6 +21,8 @@ Here's a quick example to get you started.
 
 ```javascript
 import '@carbon/ibmdotcom-web-components/es/components/content-block/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/card/index.js';
+
 ```
 
 <Description markdown={`${cdnJs({ components: ['content-block'] })}`} />
@@ -27,17 +31,23 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block/index.js';
 ### HTML
 
 ```html
-<c4d-content-block>
-  <c4d-content-block-heading>Heading text</c4d-content-block-heading>
-  <c4d-content-block-copy>Copy test</c4d-content-block-copy>
-  <c4d-card link
-    slot="footer"
-    cta-type="local"
-    href="https://www.example.com">
-    <c4d-card-link-heading>cta copy</c4d-card-link-heading>
-    <c4d-card-footer></c4d-card-footer>
-  </c4d-card>
-</c4d-content-block>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-lg-12 cds--no-gutter">
+      <c4d-content-block>
+        <c4d-content-block-heading>Heading text</c4d-content-block-heading>
+        <c4d-content-block-copy>Copy test</c4d-content-block-copy>
+        <c4d-card link
+          slot="footer"
+          cta-type="local"
+          href="https://www.example.com">
+          <c4d-card-heading>cta copy</c4d-card-heading>
+          <c4d-card-footer></c4d-card-footer>
+        </c4d-card>
+      </c4d-content-block>
+    </div>
+  </div>
+</div>
 ```
 
 ## Props