@communitiesuk/svelte-component-library 0.1.19-beta.3 → 0.1.19-beta.34

package/dist/components/ui/Accordion.svelte

@@ -16,6 +16,8 @@
     minSectionsAllSectionToggle = 2,
     rememberIsExpandedState = true,
     headingLevel = "h4",
+    useCustomSectionIcon = false,
+    useLightweightAccordionStyles = false,
   }: {
     sections: {
       heading: string;
@@ -34,35 +36,35 @@
     minSectionsAllSectionToggle?: number;
     rememberIsExpandedState?: boolean;
     headingLevel?: string;
+    useCustomSectionIcon?: boolean;
+    useLightweightAccordionStyles?: boolean;
   } = $props();
 
-  //Attempt to ensure that ids are unique by attaching extra characters
+  // Attempt to ensure that ids are unique by attaching extra characters
   let uniqueSections = $derived(
-    sections.map((section) => {
-      return {
-        ...section,
-        uniqueid:
-          section.id +
-          section.heading.slice(1, 3) +
-          (section?.summary?.slice(0, 2) ?? ""),
-      };
-    }),
+          sections.map((section) => {
+            return {
+              ...section,
+              uniqueid:
+                      section.id +
+                      section.heading.slice(1, 3) +
+                      (section?.summary?.slice(0, 2) ?? ""),
+            };
+          }),
   );
 
   let expandedSections = $derived(
-    new SvelteSet(
-      uniqueSections
-        .filter((section) => section.expanded)
-        .map((section) => section.uniqueid),
-    ),
+          new SvelteSet(
+                  uniqueSections
+                          .filter((section) => section.expanded)
+                          .map((section) => section.uniqueid),
+          ),
   );
 
   let allExpanded = $derived(expandedSections.size === sections.length);
 
   let ariaLiveValue: "polite" | "off" | "assertive" | null | undefined =
-    $state("polite");
-
-  // Event handlers
+          $state("polite");
 
   function toggleSection(uniqueid: string) {
     if (expandedSections.has(uniqueid)) {
@@ -70,28 +72,25 @@
     } else {
       expandedSections.add(uniqueid);
     }
-    //Announce the contents change when an accoridion section is expanded
+
     ariaLiveValue = "polite";
   }
 
   function toggleAll() {
     if (!allExpanded) {
       uniqueSections.forEach((section) =>
-        expandedSections.add(section.uniqueid),
+              expandedSections.add(section.uniqueid),
       );
     } else {
       expandedSections.clear();
     }
-    //Don't announce all of the changes when we open all sections - this gets noisy and the content isn't associated with the label
+
     ariaLiveValue = "off";
   }
 
-  // Only use session storage logic if rememberIsExpandedState is true
   onMount(() => {
     if (rememberIsExpandedState) {
       uniqueSections.forEach((section) => {
-        // If the section is explicitly expanded, respect that.
-        // Otherwise, try to restore from session storage.
         if (section.expanded) {
           expandedSections.add(section.uniqueid);
         } else {
@@ -102,7 +101,6 @@
         }
       });
     } else {
-      // If rememberIsExpandedState is false, just respect the initial `section.expanded` values
       uniqueSections.forEach((section) => {
         if (section.expanded) {
           expandedSections.add(section.uniqueid);
@@ -111,13 +109,12 @@
     }
   });
 
-  // Effect to update sessionStorage when uniqueSections change
   $effect(() => {
     if (rememberIsExpandedState) {
       uniqueSections.forEach((section) => {
         sessionStorage.setItem(
-          section.uniqueid,
-          expandedSections.has(section.uniqueid).toString(),
+                section.uniqueid,
+                expandedSections.has(section.uniqueid).toString(),
         );
       });
     }
@@ -125,67 +122,112 @@
 </script>
 
 <div
-  class="govuk-accordion"
-  data-module="govuk-accordion"
-  id="accordion-default"
+        class="govuk-accordion"
+        class:govuk-accordion--download-style={useLightweightAccordionStyles}
+        data-module="govuk-accordion"
+        id="accordion-default"
 >
   <div
-    class="govuk-accordion__controls"
-    hidden={!allSectionToggle ||
+          class="govuk-accordion__controls"
+          hidden={!allSectionToggle ||
       uniqueSections.length < minSectionsAllSectionToggle}
+          style="display: flex; flex-direction: row"
   >
     <button
-      type="button"
-      class="govuk-accordion__show-all"
-      aria-expanded={allExpanded}
-      onclick={toggleAll}
+            type="button"
+            class="govuk-accordion__show-all"
+            aria-expanded={allExpanded}
+            onclick={toggleAll}
     >
       <span class="govuk-accordion__show-all-text">
         {allExpanded ? hideAllSections : showAllSections}
       </span>
       <span
-        class="govuk-accordion-nav__chevron"
-        class:govuk-accordion-nav__chevron--down={!allExpanded}
+              class="govuk-accordion-nav__chevron"
+              class:govuk-accordion-nav__chevron--down={!allExpanded}
       ></span>
     </button>
   </div>
 
   {#snippet headerContent(section, isExpanded)}
     <button
-      type="button"
-      aria-controls="{section.uniqueid}-content"
-      id="{section.uniqueid}-button"
-      class="govuk-accordion__section-button"
-      aria-expanded={isExpanded}
-      onclick={() => toggleSection(section.uniqueid)}
-      aria-label="{section.heading}, {section.summary
+            type="button"
+            aria-controls="{section.uniqueid}-content"
+            id="{section.uniqueid}-button"
+            class="govuk-accordion__section-button"
+            aria-expanded={isExpanded}
+            onclick={() => toggleSection(section.uniqueid)}
+            aria-label="{section.heading}, {section.summary
         ? section.summary + ','
         : ''} {isExpanded ? hideSectionAriaLabel : showSectionAriaLabel}"
     >
       <span class="govuk-accordion__section-heading-text">
-        <span class="govuk-accordion__section-heading-text-focus"
-          >{section.heading}</span
-        >
+        <span class="govuk-accordion__section-heading-text-focus">
+          {section.heading}
+        </span>
       </span>
 
       {#if section.summary}
         <span
-          class="govuk-visually-hidden govuk-accordion__section-heading-divider"
-          >,
+                class="govuk-visually-hidden govuk-accordion__section-heading-divider"
+        >
+          ,
         </span>
         <span class="govuk-accordion__section-summary govuk-body">
-          <span class="govuk-accordion__section-summary-focus"
-            >{section.summary}</span
-          >
+          <span class="govuk-accordion__section-summary-focus">
+            {section.summary}
+          </span>
         </span>
       {/if}
 
       <span class="govuk-accordion__section-toggle" data-nosnippet>
         <span class="govuk-accordion__section-toggle-focus">
-          <span
-            class="govuk-accordion-nav__chevron"
-            class:govuk-accordion-nav__chevron--down={!isExpanded}
-          ></span>
+          {#if useCustomSectionIcon}
+            <svg
+                    width="30"
+                    height="30"
+                    viewBox="0 0 30 30"
+                    aria-hidden="true"
+                    class="govuk-accordion__custom-icon"
+            >
+              <g
+                      transform="translate({12 + (isExpanded ? 3 : 0)},{15 + (isExpanded ? -3 : 0)}) rotate({isExpanded ? -45 : -135})"
+              >
+                {#each [-5, 5] as cxcy}
+                  <circle
+                          data-role={isExpanded
+                      ? "button-circle-selected"
+                      : "button-circle-unselected"}
+                          cx={cxcy}
+                          cy={cxcy}
+                  ></circle>
+                {/each}
+
+                <path
+                        data-role={isExpanded
+                    ? "button-path-selected"
+                    : "button-path-unselected"}
+                        d="M -5 -5 l0 9.75 m0.25 0.25 l9.75 0"
+                ></path>
+
+                <rect
+                        data-role={isExpanded
+                    ? "button-rect-selected"
+                    : "button-rect-unselected"}
+                        transform="translate(-6, 4)"
+                        width="2"
+                        height="2"
+                        rx="4px"
+                ></rect>
+              </g>
+            </svg>
+          {:else}
+            <span
+                    class="govuk-accordion-nav__chevron"
+                    class:govuk-accordion-nav__chevron--down={!isExpanded}
+            ></span>
+          {/if}
+
           <span class="govuk-accordion__section-toggle-text">
             {isExpanded ? hideSection : showSection}
           </span>
@@ -197,8 +239,8 @@
   {#each uniqueSections as section}
     {@const isExpanded = expandedSections.has(section.uniqueid)}
     <div
-      class="govuk-accordion__section"
-      class:govuk-accordion__section--expanded={isExpanded}
+            class="govuk-accordion__section"
+            class:govuk-accordion__section--expanded={isExpanded}
     >
       <div class="govuk-accordion__section-header">
         {#if headingLevel.toLowerCase() == "h2"}
@@ -223,13 +265,14 @@
           </h6>
         {/if}
       </div>
+
       <div
-        id="{section.uniqueid}-content"
-        class="govuk-accordion__section-content"
-        aria-live={ariaLiveValue}
-        hidden={!isExpanded}
-        role={uniqueSections.length < 6 ? "region" : ""}
-        aria-labelledby={uniqueSections.length < 6
+              id="{section.uniqueid}-content"
+              class="govuk-accordion__section-content"
+              aria-live={ariaLiveValue}
+              hidden={!isExpanded}
+              role={uniqueSections.length < 6 ? "region" : ""}
+              aria-labelledby={uniqueSections.length < 6
           ? section.uniqueid + "-button"
           : ""}
       >
@@ -242,3 +285,106 @@
     </div>
   {/each}
 </div>
+
+<style>
+  .govuk-accordion__custom-icon {
+    display: inline-block;
+    vertical-align: middle;
+    flex: 0 0 auto;
+    margin-right: 0.35rem;
+  }
+
+  [data-role="button-circle-unselected"] {
+    fill: #0B0C0C;
+    stroke: #0B0C0C;
+    stroke-width: 1.5;
+  }
+
+  [data-role="button-circle-selected"] {
+    fill: #0B0C0C;
+    stroke: #0B0C0C;
+    stroke-width: 1.5;
+  }
+
+  [data-role="button-path-unselected"] {
+    stroke: #0B0C0C;
+    stroke-width: 2;
+    fill: none;
+    stroke-linecap: round;
+  }
+
+  [data-role="button-path-selected"] {
+    stroke: #0B0C0C;
+    stroke-width: 2;
+    fill: none;
+    stroke-linecap: round;
+  }
+
+  [data-role="button-rect-unselected"] {
+    fill: #0B0C0C;
+  }
+
+  [data-role="button-rect-selected"] {
+    fill: #0B0C0C;
+  }
+
+  /* Alternative style mode */
+  .govuk-accordion--download-style {
+    background: #f8f8f8;
+    padding: 0.75rem 1rem;
+    border: 1px solid #e0e0e0;
+  }
+
+  .govuk-accordion--download-style.govuk-accordion {
+    border-bottom: 0;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section {
+    border-bottom: 1px solid #b1b4b6;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 1rem 0;
+    border: 0;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-button:hover {
+    color: #0b0c0c;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-toggle {
+    order: -1;
+    margin: 0;
+    min-width: 1rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-toggle-focus {
+    display: flex;
+    align-items: center;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-toggle-text {
+    display: none;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-content .govuk-body {
+    padding-top: 0;
+    margin-top: 0;
+  }
+
+  .govuk-accordion--download-style .govuk-accordion__section-heading-text {
+    margin-bottom: 0;
+  }
+
+  .govuk-accordion--download-style .govuk-hint {
+    all: unset;
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+</style>

package/dist/components/ui/Accordion.svelte.d.ts

@@ -17,6 +17,8 @@ type $$ComponentProps = {
     minSectionsAllSectionToggle?: number;
     rememberIsExpandedState?: boolean;
     headingLevel?: string;
+    useCustomSectionIcon?: boolean;
+    useLightweightAccordionStyles?: boolean;
 };
 declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "">;
 type Accordion = ReturnType<typeof Accordion>;