feat(ld-cookie-consent): rename "reject all" label

emdgroup-liquid · May 2, 2023 · 5edb487 · 5edb487
1 parent c551e4c
commit 5edb487
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 24 deletions.
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
@@ -90,7 +90,7 @@
   font-family: var(--ld-font-body);
 
   ld-accordion-toggle::part(toggle),
-  ld-btn::part(button),
+  ld-button::part(button),
   ld-typo::part(tag) {
     font-family: inherit;
   }
@@ -190,24 +190,30 @@
   }
 }
 
-.ld-cookie-consent__disclaimer-btn-accept-all {
-  .ld-cookie-consent__disclaimer--rejectable & {
-    grid-column: span 2;
+.ld-cookie-consent__btn {
+  flex-grow: 1;
+
+  &::part(button) {
+    white-space: nowrap;
+  }
+
+  &--accept-all {
+    flex-grow: 10;
   }
-}
 
-.ld-cookie-consent__disclaimer-btn-acknowledge {
-  justify-self: flex-end;
-  min-width: min(10rem, 50%);
+  &--acknowledge {
+    justify-self: flex-end;
+    min-width: min(10rem, 50%);
+  }
 }
 
 .ld-cookie-consent__disclaimer-buttons {
   background-color: var(--ld-col-neutral-010);
   border-bottom-left-radius: var(--ld-br-l);
   border-bottom-right-radius: var(--ld-br-l);
-  display: grid;
+  display: flex;
+  flex-wrap: wrap;
   gap: var(--ld-sp-12);
-  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
   padding: var(--ld-sp-16);
 }
 
@@ -293,10 +299,6 @@
   }
 }
 
-.ld-cookie-consent__preferences-btn-accept-all {
-  grid-column: span 2;
-}
-
 .ld-cookie-consent__preferences-category-description {
   padding: var(--ld-sp-12) var(--ld-accordion-padding-x);
 }
@@ -349,9 +351,10 @@
 }
 
 .ld-cookie-consent__preferences-buttons {
-  display: grid;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: stretch;
   gap: var(--ld-sp-12);
-  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
 }
 
 .ld-cookie-consent__disclaimer-logo-container,

diff --git a/src/liquid/components/ld-cookie-consent/ld-cookie-consent.tsx b/src/liquid/components/ld-cookie-consent/ld-cookie-consent.tsx
@@ -118,7 +118,7 @@ export class LdCookieConsent {
     backdropBlur: true,
     buttonAcceptAll: 'Accept all',
     buttonAcceptCookies: 'Accept cookies',
-    buttonAcceptNone: 'Reject all',
+    buttonAcceptNone: 'Accept only necessary',
     buttonAcceptSelected: 'Accept selected',
     buttonAcknowledge: 'Acknowledge',
     buttonDismiss: 'Dismiss',
@@ -468,7 +468,7 @@ export class LdCookieConsent {
         >
           {config.mode !== 'notice-only' && (
             <ld-button
-              class="ld-cookie-consent__disclaimer-btn-preferences"
+              class="ld-cookie-consent__btn ld-cookie-consent__btn--preferences"
               mode="secondary"
               onClick={() => {
                 this.showPreferences()
@@ -481,7 +481,7 @@ export class LdCookieConsent {
           )}
           {config.mode !== 'notice-only' && config.rejectable && (
             <ld-button
-              class="ld-cookie-consent__disclaimer-btn-accept-none"
+              class="ld-cookie-consent__btn ld-cookie-consent__btn--accept-none"
               mode="secondary"
               onClick={() => {
                 this.hideDisclaimerAndPreferences()
@@ -495,9 +495,10 @@ export class LdCookieConsent {
           )}
           <ld-button
             class={getClassNames([
+              'ld-cookie-consent__btn',
               config.mode === 'notice-only'
-                ? 'ld-cookie-consent__disclaimer-btn-acknowledge'
-                : 'ld-cookie-consent__disclaimer-btn-accept-all',
+                ? 'ld-cookie-consent__btn--acknowledge'
+                : 'ld-cookie-consent__btn--accept-all',
             ])}
             onClick={() => {
               this.hideDisclaimerAndPreferences()
@@ -572,7 +573,7 @@ export class LdCookieConsent {
         >
           {config.buttonAcceptNone && (
             <ld-button
-              class="ld-cookie-consent__btn--accept-none"
+              class="ld-cookie-consent__btn ld-cookie-consent__btn--accept-none"
               mode="secondary"
               onClick={() => {
                 this.hideDisclaimerAndPreferences()
@@ -586,7 +587,7 @@ export class LdCookieConsent {
           )}
           {config.buttonAcceptSelected && (
             <ld-button
-              class="ld-cookie-consent__btn--accept-selected"
+              class="ld-cookie-consent__btn ld-cookie-consent__btn--accept-selected"
               mode="secondary"
               onClick={() => {
                 this.hideDisclaimerAndPreferences()
@@ -600,7 +601,7 @@ export class LdCookieConsent {
           )}
           {config.buttonAcceptAll && (
             <ld-button
-              class="ld-cookie-consent__preferences-btn-accept-all"
+              class="ld-cookie-consent__btn ld-cookie-consent__btn--accept-all"
               onClick={() => {
                 this.hideDisclaimerAndPreferences()
                 this.saveConsent('accept-all')