fix(ld-cookie-consent): fix styling and update screenshots

emdgroup-liquid · May 2, 2023 · e3d92cb · e3d92cb · vercel · May 2, 2023
1 parent 4f8248d
commit e3d92cb
Show file tree

Hide file tree

Showing 18 changed files with 91 additions and 26 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -12096,7 +12096,7 @@
     },
     {
       "id": "3d455876",
-      "image": "5b450704fa5ce1ba379630649c5afab8.png",
+      "image": "32f7b651dfdb76936928bca7f8d13d88.png",
       "userAgent": "default",
       "desc": "ld-cookie-consent disclaimer custom notice only",
       "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
@@ -12109,7 +12109,7 @@
     },
     {
       "id": "e783dc8b",
-      "image": "e365669c34d87536952062addaa9574c.png",
+      "image": "e7b69852dd151193d96a142f143e0ae9.png",
       "userAgent": "default",
       "desc": "ld-cookie-consent disclaimer custom opt-in",
       "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
@@ -12122,7 +12122,7 @@
     },
     {
       "id": "d6a4d630",
-      "image": "4e4934635085408cb7023c253a56bb4f.png",
+      "image": "48acd138ad10802cab6da02e8b0da711.png",
       "userAgent": "default",
       "desc": "ld-cookie-consent disclaimer custom opt-out",
       "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
@@ -12133,6 +12133,19 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "7334fa2d",
+      "image": "667953d8967580bf00bb7931ec2690bb.png",
+      "userAgent": "default",
+      "desc": "ld-cookie-consent disclaimer custom rejectable",
+      "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "4b022e08",
       "image": "cfe29a8fea2e5c3f30c0809ef07e3dce.png",
@@ -12148,7 +12161,7 @@
     },
     {
       "id": "b4eff9e5",
-      "image": "b1c77db4bebb8c87a9d56b12682c7417.png",
+      "image": "189c90378ae862522a5e7630610c675f.png",
       "userAgent": "default",
       "desc": "ld-cookie-consent disclaimer opt-in",
       "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
@@ -12161,7 +12174,7 @@
     },
     {
       "id": "5304ded9",
-      "image": "328aa85f33198a2b3bee7c0b9c570917.png",
+      "image": "340634cd4777bcee7add797a0d06febf.png",
       "userAgent": "default",
       "desc": "ld-cookie-consent disclaimer opt-out",
       "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
@@ -12172,9 +12185,22 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "a0402c18",
+      "image": "b70715df6a8b1c9c5e53e84f96ed8d37.png",
+      "userAgent": "default",
+      "desc": "ld-cookie-consent disclaimer rejectable",
+      "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "ded5bfa7",
-      "image": "0997dee422acd184890a412b2c0eab71.png",
+      "image": "61ea4cd89b106746ee7aad98969ae3f2.png",
       "userAgent": "default",
       "desc": "ld-cookie-consent preferences custom opt-in, first category expanded",
       "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
@@ -12187,7 +12213,7 @@
     },
     {
       "id": "57c9bfea",
-      "image": "1aa2215edc80debc8d91293fae54444f.png",
+      "image": "bc618d75abc69ef69c93639aa0385011.png",
       "userAgent": "default",
       "desc": "ld-cookie-consent preferences custom opt-in, third category expanded",
       "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
@@ -12200,7 +12226,7 @@
     },
     {
       "id": "715d62a3",
-      "image": "2699aeac27f3d9d4b70f6aaf0cf3dfce.png",
+      "image": "00eb9d79558fa297279f6df97259a50c.png",
       "userAgent": "default",
       "desc": "ld-cookie-consent preferences opt-in, first category expanded",
       "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",
@@ -12213,7 +12239,7 @@
     },
     {
       "id": "24480fde",
-      "image": "5de7ed8ac3604a6ce69461846ab7accb.png",
+      "image": "a7262c93f6fda5faa0ec840437faabc4.png",
       "userAgent": "default",
       "desc": "ld-cookie-consent preferences opt-in, third category expanded",
       "testPath": "./src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts",

diff --git a/screenshot/images/00eb9d79558fa297279f6df97259a50c.png b/screenshot/images/00eb9d79558fa297279f6df97259a50c.png
diff --git a/screenshot/images/0997dee422acd184890a412b2c0eab71.png b/screenshot/images/0997dee422acd184890a412b2c0eab71.png
diff --git a/...ages/b1c77db4bebb8c87a9d56b12682c7417.png → ...ages/189c90378ae862522a5e7630610c675f.png b/...ages/b1c77db4bebb8c87a9d56b12682c7417.png → ...ages/189c90378ae862522a5e7630610c675f.png
diff --git a/screenshot/images/2699aeac27f3d9d4b70f6aaf0cf3dfce.png b/screenshot/images/2699aeac27f3d9d4b70f6aaf0cf3dfce.png
diff --git a/...ages/5b450704fa5ce1ba379630649c5afab8.png → ...ages/32f7b651dfdb76936928bca7f8d13d88.png b/...ages/5b450704fa5ce1ba379630649c5afab8.png → ...ages/32f7b651dfdb76936928bca7f8d13d88.png
diff --git a/...ages/328aa85f33198a2b3bee7c0b9c570917.png → ...ages/340634cd4777bcee7add797a0d06febf.png b/...ages/328aa85f33198a2b3bee7c0b9c570917.png → ...ages/340634cd4777bcee7add797a0d06febf.png
diff --git a/...ages/4e4934635085408cb7023c253a56bb4f.png → ...ages/48acd138ad10802cab6da02e8b0da711.png b/...ages/4e4934635085408cb7023c253a56bb4f.png → ...ages/48acd138ad10802cab6da02e8b0da711.png
diff --git a/screenshot/images/61ea4cd89b106746ee7aad98969ae3f2.png b/screenshot/images/61ea4cd89b106746ee7aad98969ae3f2.png
diff --git a/screenshot/images/667953d8967580bf00bb7931ec2690bb.png b/screenshot/images/667953d8967580bf00bb7931ec2690bb.png
diff --git a/...ages/5de7ed8ac3604a6ce69461846ab7accb.png → ...ages/a7262c93f6fda5faa0ec840437faabc4.png b/...ages/5de7ed8ac3604a6ce69461846ab7accb.png → ...ages/a7262c93f6fda5faa0ec840437faabc4.png
diff --git a/screenshot/images/b70715df6a8b1c9c5e53e84f96ed8d37.png b/screenshot/images/b70715df6a8b1c9c5e53e84f96ed8d37.png
diff --git a/...ages/1aa2215edc80debc8d91293fae54444f.png → ...ages/bc618d75abc69ef69c93639aa0385011.png b/...ages/1aa2215edc80debc8d91293fae54444f.png → ...ages/bc618d75abc69ef69c93639aa0385011.png
diff --git a/...ages/e365669c34d87536952062addaa9574c.png → ...ages/e7b69852dd151193d96a142f143e0ae9.png b/...ages/e365669c34d87536952062addaa9574c.png → ...ages/e7b69852dd151193d96a142f143e0ae9.png
diff --git a/src/liquid/components/ld-cookie-consent/ld-cookie-consent.shadow.css b/src/liquid/components/ld-cookie-consent/ld-cookie-consent.shadow.css
@@ -197,12 +197,12 @@
     white-space: nowrap;
   }
 
-  &--accept-all {
-    flex-grow: 10;
+  &--grow {
+    flex-grow: 100;
   }
 
   &--acknowledge {
-    justify-self: flex-end;
+    flex-grow: 0;
     min-width: min(10rem, 50%);
   }
 }
@@ -214,6 +214,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--ld-sp-12);
+  justify-content: flex-end;
   padding: var(--ld-sp-16);
 }
 

diff --git a/src/liquid/components/ld-cookie-consent/ld-cookie-consent.tsx b/src/liquid/components/ld-cookie-consent/ld-cookie-consent.tsx
@@ -481,7 +481,7 @@ export class LdCookieConsent {
           )}
           {config.mode !== 'notice-only' && config.rejectable && (
             <ld-button
-              class="ld-cookie-consent__btn ld-cookie-consent__btn--accept-none"
+              class="ld-cookie-consent__btn"
               mode="secondary"
               onClick={() => {
                 this.hideDisclaimerAndPreferences()
@@ -496,9 +496,11 @@ export class LdCookieConsent {
           <ld-button
             class={getClassNames([
               'ld-cookie-consent__btn',
-              config.mode === 'notice-only'
-                ? 'ld-cookie-consent__btn--acknowledge'
-                : 'ld-cookie-consent__btn--accept-all',
+              config.mode === 'notice-only' &&
+                'ld-cookie-consent__btn--acknowledge',
+              config.mode !== 'notice-only' &&
+                config.rejectable &&
+                'ld-cookie-consent__btn--grow',
             ])}
             onClick={() => {
               this.hideDisclaimerAndPreferences()
@@ -573,7 +575,7 @@ export class LdCookieConsent {
         >
           {config.buttonAcceptNone && (
             <ld-button
-              class="ld-cookie-consent__btn ld-cookie-consent__btn--accept-none"
+              class="ld-cookie-consent__btn"
               mode="secondary"
               onClick={() => {
                 this.hideDisclaimerAndPreferences()
@@ -587,7 +589,7 @@ export class LdCookieConsent {
           )}
           {config.buttonAcceptSelected && (
             <ld-button
-              class="ld-cookie-consent__btn ld-cookie-consent__btn--accept-selected"
+              class="ld-cookie-consent__btn"
               mode="secondary"
               onClick={() => {
                 this.hideDisclaimerAndPreferences()
@@ -601,7 +603,7 @@ export class LdCookieConsent {
           )}
           {config.buttonAcceptAll && (
             <ld-button
-              class="ld-cookie-consent__btn ld-cookie-consent__btn--accept-all"
+              class="ld-cookie-consent__btn ld-cookie-consent__btn--grow"
               onClick={() => {
                 this.hideDisclaimerAndPreferences()
                 this.saveConsent('all')

diff --git a/src/liquid/components/ld-cookie-consent/readme.md b/src/liquid/components/ld-cookie-consent/readme.md
@@ -1329,6 +1329,7 @@ return (
 
 <!-- Auto Generated Below -->
 
+
 ## Properties
 
 | Property                | Attribute  | Description                                                                               | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default     |
@@ -1337,6 +1338,7 @@ return (
 | `ref`                   | `ref`      | reference to component                                                                    | `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 | `settings` _(required)_ | `settings` | Component settings object to be merged with the default options (optionally stringified). | `string \| { backdropBlur?: boolean; buttonAcceptAll?: string; buttonAcceptCookies?: string; buttonAcceptNone?: string; buttonAcceptSelected?: string; buttonAcknowledge?: string; buttonDismiss?: string; buttonPreferences?: string; categories?: { autoclear?: { name: string; domain?: string; path?: string; }[]; details: { description: string; cookieTable?: { headers?: string[]; rows: string[][]; }; }; title: string; toggle: { checked?: boolean; disabled?: boolean; value: string; }; }[]; disclaimerAlignement?: "center" \| "left" \| "right"; dismissable?: boolean; localStorageKey?: string; mode?: "notice-only" \| "opt-in" \| "opt-out"; privacyStatementURL?: string; rejectable?: boolean; revision?: number; scriptSelector?: string; showOnLoad?: boolean; showOnLoadDelay?: number; }` | `undefined` |
 
+
 ## Events
 
 | Event                             | Description                                                                                              | Type                                                                                                                      |
@@ -1349,6 +1351,7 @@ return (
 | `ldCookieConsentSave`             | Emitted after saving cookies preferences to local storage with accepted categories.                      | `CustomEvent<{ acceptedCategories: Set<string>; consentDate: Date; rejectedCategories: Set<string>; revision: number; }>` |
 | `ldCookieSavedConsentLoad`        | Emitted after loading saved consent from local storage.                                                  | `CustomEvent<{ acceptedCategories: Set<string>; consentDate: Date; rejectedCategories: Set<string>; revision: number; }>` |
 
+
 ## Methods
 
 ### `getAcceptedAndRejectedCategories() => Promise<{ acceptedCategories: Set<string>; rejectedCategories: Set<string>; }>`
@@ -1359,6 +1362,8 @@ Returns accepted categories.
 
 Type: `Promise<{ acceptedCategories: Set<string>; rejectedCategories: Set<string>; }>`
 
+
+
 ### `hideDisclaimerAndPreferences() => Promise<void>`
 
 Hides cookie consent disclaimer and preferences.
@@ -1367,6 +1372,8 @@ Hides cookie consent disclaimer and preferences.
 
 Type: `Promise<void>`
 
+
+
 ### `isCategoryAccepted(cookieCategory: string) => Promise<boolean>`
 
 Returns true if cookie category has been accepted.
@@ -1375,6 +1382,8 @@ Returns true if cookie category has been accepted.
 
 Type: `Promise<boolean>`
 
+
+
 ### `showDisclaimer(delay?: number) => Promise<void>`
 
 Shows cookie consent disclaimer.
@@ -1383,6 +1392,9 @@ Shows cookie consent disclaimer.
 
 Type: `Promise<void>`
 
+
+
+
 ## Slots
 
 | Slot                                  | Description                                                |
@@ -1395,6 +1407,7 @@ Type: `Promise<void>`
 | `"preferences-privacy-policy-notice"` | Slot for privacy policy notice in preferences modal layer. |
 | `"preferences-title"`                 | Slot for title in preferences modal layer.                 |
 
+
 ## Shadow Parts
 
 | Part                                            | Description                                               |
@@ -1435,6 +1448,7 @@ Type: `Promise<void>`
 | `"preferences-privacy-policy-notice-container"` | container for privacy notice slot                         |
 | `"preferences-title"`                           | the preferences title displayed in the modal layer header |
 
+
 ## Dependencies
 
 ### Depends on
@@ -1451,7 +1465,6 @@ Type: `Promise<void>`
 - [ld-toggle](../ld-toggle)
 
 ### Graph
-
 ```mermaid
 graph TD;
   ld-cookie-consent --> ld-icon
@@ -1468,6 +1481,6 @@ graph TD;
   style ld-cookie-consent fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
----
+----------------------------------------------
 
-_Built with [StencilJS](https://stenciljs.com/)_
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts b/src/liquid/components/ld-cookie-consent/test/ld-cookie-consent.e2e.ts
@@ -2,8 +2,9 @@ import {
   analyzeAccessibility,
   getPageWithContent,
 } from '../../../utils/e2e-tests'
+import { LdCookieConsentConfig } from '../ld-cookie-consent.types'
 
-const categories = [
+const categories: LdCookieConsentConfig['categories'] = [
   {
     title: 'Necessary',
     details: {
@@ -121,7 +122,7 @@ describe('ld-cookie-consent', () => {
       })
 
       it('opt-in', async () => {
-        const settings = {
+        const settings: Partial<LdCookieConsentConfig> = {
           categories,
           mode: 'opt-in',
           privacyStatementURL: '#',
@@ -143,7 +144,7 @@ describe('ld-cookie-consent', () => {
       })
 
       it('opt-out', async () => {
-        const settings = {
+        const settings: Partial<LdCookieConsentConfig> = {
           categories,
           mode: 'opt-out',
           privacyStatementURL: '#',
@@ -163,11 +164,33 @@ describe('ld-cookie-consent', () => {
         const results = await page.compareScreenshot()
         expect(results).toMatchScreenshot()
       })
+
+      it('rejectable', async () => {
+        const settings: Partial<LdCookieConsentConfig> = {
+          categories,
+          privacyStatementURL: '#',
+          rejectable: true,
+          showOnLoadDelay: 0,
+        }
+        const page = await getPageWithContent(
+          `${withCustomStyle ? customStyle : ''}<ld-cookie-consent
+          settings='${JSON.stringify(settings)}'>
+            ${withCustomStyle ? customLogo : ''}
+          </ld-cookie-consent>`,
+          {
+            disableAllTransitions: true,
+            reducedMotion: true,
+          }
+        )
+
+        const results = await page.compareScreenshot()
+        expect(results).toMatchScreenshot()
+      })
     })
 
     describe(`preferences${withCustomStyle ? ' custom' : ''}`, () => {
       it('opt-in', async () => {
-        const settings = {
+        const settings: Partial<LdCookieConsentConfig> = {
           categories,
           mode: 'opt-in',
           privacyStatementURL: '#',