Show either accept all or accept selected depending on user choices

Author: antony

README.MD

@@ -151,8 +151,11 @@ const props = {
 
   /**
    * All the button labels and aria-label content.
+
+    Note that either acceptAllLabel or acceptSelectedLabel will appear, depending on whether the user has selected all or only some cookie choices in the configuration dialogue. 
    **/
-  acceptLabel: 'Confirm all',
+  acceptAllLabel: 'Accept all',
+  acceptSelectedLabel: 'Accept selected',
   rejectLabel: 'Reject all',
   settingsLabel: 'Preferences',
   closeLabel: 'Close window',

src/lib/Banner.svelte

@@ -37,12 +37,12 @@
   /**
    * @type {string|undefined|null}
    */
-  export let acceptLabel = 'Accept all'
+  export let acceptAllLabel = 'Accept all'
+  export let acceptSelectedLabel = 'Accept selected'
   export let rejectLabel = 'Reject all'
   export let settingsLabel = 'Cookie settings'
   export let closeLabel = 'Close settings'
   export let editLabel = 'Edit cookie settings'
-  export let saveLabel = 'Accept selected'
 
   /**
    * Whether to show the cookie banner if the user has not yet accepted or rejected your choices.
@@ -109,10 +109,7 @@
     return result
   }, {})
 
-  $: allCookieChoices = choicesArr.reduce((result, item) => {
-    result[item.id] = true
-    return result
-  }, {})
+  $: hasSelectedAllCookieTypes = Object.values(cookieChoices).every(value => value === true)
 
   export function show () {
     shown = visible
@@ -179,15 +176,10 @@
     execute(necessaryCookieChoices)
   }
 
-  function choose () {
+  function accept () {
     setCookie(cookieChoices)
     execute(cookieChoices)
   }
-
-  function accept () {
-    setCookie(allCookieChoices)
-    execute(allCookieChoices)
-  }
 </script>
 
 {#if showEditIcon}
@@ -239,15 +231,6 @@
         on:click={() => { settingsShown = true } }>
         {settingsLabel}
       </button>
-      <button
-        type="submit"
-        class="cookieConsent__Button"
-        part="button button--choose"
-        on:click={choose}
-        aria-label={saveLabel}
-      >
-        {saveLabel}
-      </button>
       {#if canRejectCookies}
       <button
         type="submit"
@@ -264,9 +247,9 @@
         class="cookieConsent__Button cookieConsent__Button--Accept"
         part="button button--accept"
         on:click={accept}
-        aria-label={acceptLabel}
+        aria-label={hasSelectedAllCookieTypes ? acceptAllLabel : acceptSelectedLabel}
       >
-        {acceptLabel}
+        {hasSelectedAllCookieTypes ? acceptAllLabel : acceptSelectedLabel}
       </button>
     </div>
   </div>