Merge 3e7bcc9 into main

carbon-design-system · Dec 10, 2024 · ac3fe4f · ac3fe4f
2 parents bb9ae8c + 3e7bcc9
commit ac3fe4f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss
@@ -63,6 +63,7 @@
       display: grid;
       border: 0;
       grid-row: span 10;
+      grid-template-columns: subgrid;
       grid-template-rows: subgrid;
       margin-block-end: $spacing-07;
       outline: 1px solid $border-tile-01;

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
@@ -157,7 +157,7 @@
       }
     }
 
-    .#{$prefix}--card__copy:not([hidden]) {
+    .#{$prefix}--card__copy {
       @include type-style('body-02');
 
       margin-block-end: $spacing-07;
@@ -219,10 +219,6 @@
 
       .#{$prefix}--card__copy {
         margin-block: $spacing-07 0;
-
-        &[hidden] {
-          margin: 0;
-        }
       }
 
       svg {
@@ -254,6 +250,16 @@
           align-items: flex-start;
         }
 
+        .#{$prefix}--card__content {
+          padding-block-end: $spacing-10;
+        }
+
+        .#{$prefix}--card__pictogram-wrapper {
+          position: absolute;
+          inset-block-end: $spacing-05;
+          inset-inline-start: $spacing-05;
+        }
+
         .#{$prefix}--card__copy {
           margin-block-end: $spacing-07;
         }
@@ -286,6 +292,13 @@
       display: flex;
       flex-direction: column;
       gap: $spacing-05;
+
+      &[hidden] {
+        // Need important to force [hidden] to really mean hidden above many
+        // other variants setting display.
+        /* stylelint-disable declaration-no-important */
+        display: none !important;
+      }
     }
   }
 

diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
@@ -157,18 +157,20 @@ const longHeadingCardGroupItem = (
   `;
 };
 
-const pictogramCard = (colorScheme) => {
+const pictogramCard = (colorScheme, hideDescription = false) => {
   return html`
     <c4d-card-group-item
       href="https://example.com"
       pictogram-placement="bottom"
       color-scheme=${colorSchemeMap[colorScheme]}>
       <c4d-card-heading>Aerospace and defence</c4d-card-heading>
-      <p>
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
-        ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis
-        nostrud exercitation.
-      </p>
+      ${hideDescription
+        ? ''
+        : html` <p>
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+            nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam,
+            quis nostrud exercitation.
+          </p>`}
       <svg
         slot="pictogram"
         focusable="false"
@@ -264,6 +266,7 @@ export const Default = (args) => {
     cta,
     addCta,
     colorScheme,
+    hideDescription,
   } = args?.CardGroup ?? {};
 
   const allCards: object[] = [];
@@ -294,7 +297,7 @@ export const Default = (args) => {
 
   if (cardType === 'Card - pictogram') {
     for (let i = 0; i < cards; i++) {
-      allCards.push(pictogramCard(colorScheme));
+      allCards.push(pictogramCard(colorScheme, hideDescription));
     }
   }
 
@@ -460,6 +463,10 @@ export default {
           ['Regular', 'Inverse'],
           'Regular'
         );
+        const hideDescription =
+          cardType === 'Card - pictogram'
+            ? boolean('Hide description', false)
+            : false;
         return {
           cardType,
           media,
@@ -469,6 +476,7 @@ export default {
           gridMode,
           cta,
           colorScheme,
+          hideDescription,
         };
       },
     },