feat(content-group): v2 style updates (carbon-design-system#11007)

* feat(content-group): style update v2 * feat(content-group): style update for v2 * feat(content-group): style update for v2 * feat(content-group): width update * feat(content-group): style update v2 * fix(content group): margin collapse issue fix --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
ariellalgilmore · Nov 7, 2023 · 94e9d94 · 94e9d94
1 parent be4c9b2
commit 94e9d94
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 18 deletions.
diff --git a/packages/styles/scss/components/content-group/_content-group.scss b/packages/styles/scss/components/content-group/_content-group.scss
@@ -0,0 +1,37 @@
+//
+// Copyright IBM Corp. 2020, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/ibmdotcom-styles/scss/internal/content-block';
+@use '@carbon/ibmdotcom-styles/scss/internal/content-group';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+
+@mixin content-group {
+  :host(#{$c4d-prefix}-content-group),
+  :host(#{$c4d-prefix}-content-group-copy),
+  :host(#{$c4d-prefix}-content-group-paragraph) {
+    display: block;
+  }
+
+  :host(#{$c4d-prefix}-content-group-copy) {
+    @include type-style('body-02');
+  }
+  :host(#{$c4d-prefix}-content-group-heading),
+  :host(#{$c4d-prefix}-content-group-copy) {
+    max-width: 40rem;
+  }
+  :host(#{$c4d-prefix}-content-group) {
+    ::slotted([slot='footer']) {
+      background: none;
+      height: auto;
+    }
+  }
+  .#{$prefix}--content-layout__body {
+    display: block;
+  }
+}
diff --git a/packages/styles/scss/components/content-group/_index.scss b/packages/styles/scss/components/content-group/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'content-group';
+@use 'content-group';
+
+@include content-group.content-group;
diff --git a/packages/web-components/src/components/content-group/__stories__/content-group.stories.ts b/packages/web-components/src/components/content-group/__stories__/content-group.stories.ts
@@ -111,16 +111,16 @@ export const Default = (args) => {
         : ``}
       ${cta
         ? html`
-            <c4d-card-link-cta
+            <c4d-card
               slot="footer"
               cta-type="local"
               href="https://www.example.com">
               <c4d-card-link-heading
                 >Learn more about natual language
                 processing</c4d-card-link-heading
               >
-              <c4d-card-cta-footer></c4d-card-cta-footer>
-            </c4d-card-link-cta>
+              <c4d-card-footer></c4d-card-footer>
+            </c4d-card>
           `
         : ''}
     </c4d-content-group>

diff --git a/packages/web-components/src/components/content-group/content-group.scss b/packages/web-components/src/components/content-group/content-group.scss
@@ -1,21 +1,8 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/styles/scss/type' as *;
-@use '@carbon/ibmdotcom-styles/scss/internal/content-block';
-@use '@carbon/ibmdotcom-styles/scss/internal/content-group';
-@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
-
-:host(#{$c4d-prefix}-content-group),
-:host(#{$c4d-prefix}-content-group-copy),
-:host(#{$c4d-prefix}-content-group-paragraph) {
-  display: block;
-}
-
-:host(#{$c4d-prefix}-content-group-copy) {
-  @include type-style('body-02');
-}
+@use '@carbon/ibmdotcom-styles/scss/components/content-group';