feat(ld-card): zero-padding

Resolves #810
emdgroup-liquid · Jul 20, 2023 · a090c00 · a090c00 · vercel · Jul 20, 2023
1 parent ebff98a
commit a090c00
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 4 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -9663,6 +9663,32 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "abeef848",
+      "image": "e5f588e5ea2b00fdc592cda83d4fbb83.png",
+      "userAgent": "default",
+      "desc": "ld-card size zero-padding card CSS Component",
+      "testPath": "./src/liquid/components/ld-card/test/ld-card.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "2b171cd2",
+      "image": "e5f588e5ea2b00fdc592cda83d4fbb83.png",
+      "userAgent": "default",
+      "desc": "ld-card size zero-padding card Web Component",
+      "testPath": "./src/liquid/components/ld-card/test/ld-card.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "ac3712f8",
       "image": "ff3ae1826f2d6a3182e7ccb109551233.png",

diff --git a/screenshot/images/e5f588e5ea2b00fdc592cda83d4fbb83.png b/screenshot/images/e5f588e5ea2b00fdc592cda83d4fbb83.png
diff --git a/src/liquid/components/ld-card/ld-card.css b/src/liquid/components/ld-card/ld-card.css
@@ -3,7 +3,6 @@
   --ld-card-bg-col: var(--ld-col-wht);
   --ld-card-border-radius: var(--ld-br-l);
   --ld-card-padding: var(--ld-sp-32);
-  --ld-card-padding-sm: var(--ld-sp-16);
 
   appearance: none;
   border: none;
@@ -34,6 +33,10 @@
   }
 }
 
+slot {
+  border-radius: inherit;
+}
+
 :host(.ld-card--sticky)::before,
 .ld-card--sticky::before,
 :host(.ld-card--interactive-sticky)::after,
@@ -73,6 +76,13 @@
 .ld-card--sm {
   :host(&),
   & {
-    padding: var(--ld-card-padding-sm);
+    --ld-card-padding: var(--ld-sp-16);
+  }
+}
+
+.ld-card--zero {
+  :host(&),
+  & {
+    --ld-card-padding: 0px;
   }
 }
diff --git a/src/liquid/components/ld-card/ld-card.tsx b/src/liquid/components/ld-card/ld-card.tsx
@@ -23,7 +23,7 @@ export class LdCard {
   @Prop() shadowInteractive?: 'active' | 'hover' | 'stacked' | 'sticky'
 
   /** The size prop effects the card padding only. */
-  @Prop() size?: 'sm'
+  @Prop() size?: 'sm' | 'zero'
 
   componentWillLoad() {
     if (this.el.parentElement?.tagName === 'LD-CARD-STACK') {

diff --git a/src/liquid/components/ld-card/readme.md b/src/liquid/components/ld-card/readme.md
@@ -51,6 +51,14 @@ The `size` prop effects the card padding only.
   <ld-typo>Lorem ipsum dolor sit amet.</ld-typo>
 </ld-card>
 
+<ld-card size="zero">
+  <img
+    style="border-radius: inherit"
+    src="https://picsum.photos/id/152/180/80"
+    alt=""
+  />
+</ld-card>
+
 <!-- React component -->
 
 <LdCard>
@@ -61,6 +69,16 @@ The `size` prop effects the card padding only.
   <LdTypo>Lorem ipsum dolor sit amet.</LdTypo>
 </LdCard>
 
+<LdCard size="zero">
+  <img
+    style={ {
+      borderRadius: 'inherit'
+    } }
+    src="https://picsum.photos/id/152/180/80"
+    alt=""
+  />
+</LdCard>
+
 <!-- CSS component -->
 
 <div class="ld-card">
@@ -70,6 +88,14 @@ The `size` prop effects the card padding only.
 <div class="ld-card ld-card--sm">
   <p class="ld-typo ld-typo--body-m">Lorem ipsum dolor sit amet.</p>
 </div>
+
+<div class="ld-card ld-card--zero">
+  <img
+    style="border-radius: inherit"
+    src="https://picsum.photos/id/152/180/80"
+    alt=""
+  />
+</div>
 {% endexample %}
 
 ## Shadow
@@ -195,7 +221,7 @@ Use the `shadow-interactive` prop for a transition to a different shadow on hove
 | `ref`               | `ref`                | reference to component                                                                                             | `any`                                          | `undefined` |
 | `shadow`            | `shadow`             | Simulates card elevation by setting the size of the card box shadow.                                               | `"active" \| "hover" \| "stacked" \| "sticky"` | `'stacked'` |
 | `shadowInteractive` | `shadow-interactive` | Adds hover and focus-within states using an elevation transition from `shadow` (see above) to `shadowInteractive`. | `"active" \| "hover" \| "stacked" \| "sticky"` | `undefined` |
-| `size`              | `size`               | The size prop effects the card padding only.                                                                       | `"sm"`                                         | `undefined` |
+| `size`              | `size`               | The size prop effects the card padding only.                                                                       | `"sm" \| "zero"`                               | `undefined` |
 
 
 ----------------------------------------------

diff --git a/src/liquid/components/ld-card/test/ld-card.e2e.ts b/src/liquid/components/ld-card/test/ld-card.e2e.ts
@@ -83,6 +83,39 @@ describe('ld-card', () => {
       const results = await page.compareScreenshot()
       expect(results).toMatchScreenshot()
     })
+
+    it('zero-padding card Web Component', async () => {
+      const page = await getPageWithContent(
+        `<ld-card size="zero-padding">
+          <img
+            style="border-radius: inherit"
+            src="https://picsum.photos/id/152/180/80"
+            alt=""
+          />
+        </ld-card>`
+      )
+
+      const results = await page.compareScreenshot()
+      expect(results).toMatchScreenshot()
+    })
+
+    it('zero-padding card CSS Component', async () => {
+      const page = await getPageWithContent(
+        `<div class="ld-card ld-card--zero">
+          <img
+            style="border-radius: inherit"
+            src="https://picsum.photos/id/152/180/80"
+            alt=""
+          />
+        </div>`,
+        {
+          components: [LdCard, LdTypo],
+        }
+      )
+
+      const results = await page.compareScreenshot()
+      expect(results).toMatchScreenshot()
+    })
   })
 
   describe('shadow', () => {