From 3e7bcc980c3a9cc1e1dde230610bbd57bf1f4f60 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Tue, 10 Dec 2024 15:26:47 -0500
Subject: [PATCH] fix(card): pictogram related style adjustments (#12155)

### Related Ticket(s)

[ADCMS-6840](https://jsw.ibm.com/browse/ADCMS-6840)
[ADCMS-7238](https://jsw.ibm.com/browse/ADCMS-7238)

### Description

Fixes some pictogram related card styling issues.

### Testing instructions

* Review and pay particular attention to Card and Card Group stories, looking for regressions
* Use the Card Group story, with a "Card type" of "Card - pictogram". Then check the "Hide description" checkbox and ensure that the cards are [matching spec](https://www.figma.com/design/oip4K9G1z0v7tLNBbDZzdr/Card-specs-v2?node-id=19-3434&node-type=canvas&t=lwI58ey8t4c8MTqo-0).

### Changelog

**Changed**

- Visual fixes for pictogram cards when there is no card description.

<!-- 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) -->
---
 .../components/card-group/_card-group.scss    |  1 +
 .../styles/scss/components/card/_card.scss    | 23 +++++++++++++++----
 .../__stories__/card-group.stories.ts         | 22 ++++++++++++------
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss
index 4097a15cfad..dfd0e0b48f4 100644
--- a/packages/styles/scss/components/card-group/_card-group.scss
+++ b/packages/styles/scss/components/card-group/_card-group.scss
@@ -62,6 +62,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
index 9c926c7c0f3..143836fdf3f 100644
--- 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
index c995926af32..826187b5168 100644
--- 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,
         };
       },
     },