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

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

@@ -0,0 +1,18 @@
+type Option = {
+    id: string | number;
+    label: string;
+};
+type $$ComponentProps = {
+    options?: Option[];
+    selected?: (string | number)[];
+    colorArray?: string[];
+    placeholder?: string;
+    label?: string;
+    hint?: string;
+    enableColors?: boolean;
+    startsWithSearch?: boolean;
+    resetButton?: boolean;
+};
+declare const BasicMultiSelect: import("svelte").Component<$$ComponentProps, {}, "selected">;
+type BasicMultiSelect = ReturnType<typeof BasicMultiSelect>;
+export default BasicMultiSelect;

package/dist/components/ui/Button.svelte

@@ -7,162 +7,257 @@
     componentNameProp = undefined,
     onClickFunction = undefined,
     noPadding = false,
+    direction = null, // "ascending" | "descending" | null
+    disabled = false,
   } = $props();
 
   let buttonClass = $derived(
-    buttonType === "default"
-      ? "govuk-button"
-      : buttonType === "secondary"
-        ? "govuk-button govuk-button--secondary"
-        : buttonType === "warning"
-          ? "govuk-button govuk-button--warning"
-          : buttonType === "dark background"
-            ? "govuk-button govuk-button--inverse"
-            : undefined,
+          buttonType === "default"
+                  ? "govuk-button"
+                  : buttonType === "secondary"
+                          ? "govuk-button govuk-button--secondary"
+                          : buttonType === "warning"
+                                  ? "govuk-button govuk-button--warning"
+                                  : buttonType === "dark background"
+                                          ? "govuk-button govuk-button--inverse"
+                                          : undefined,
   );
 </script>
 
 {#if noPadding}
   {#if buttonType === "moreInfo"}
     <div>
-      <button class="more-info-button" onclick={onClickFunction}>
+      <button class="more-info-button" type="button" onclick={onClickFunction}>
         <Icon kind="info" />
       </button>
     </div>
+
   {:else if buttonType === "start"}
     <a
-      href={"#"}
-      role="button"
-      draggable="false"
-      class="govuk-button govuk-button--start"
-      data-module="govuk-button"
-      onclick={onClickFunction}
+            href="#"
+            role="button"
+            draggable="false"
+            class="govuk-button govuk-button--start"
+            data-module="govuk-button"
+            onclick={onClickFunction}
     >
       {textContent}
       <svg
-        class="govuk-button__start-icon"
-        xmlns="http://www.w3.org/2000/svg"
-        width="17.5"
-        height="19"
-        viewBox="0 0 33 40"
-        aria-hidden="true"
-        focusable="false"
+              class="govuk-button__start-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              width="17.5"
+              height="19"
+              viewBox="0 0 33 40"
+              aria-hidden="true"
+              focusable="false"
       >
         <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
       </svg>
     </a>
+
   {:else if buttonType === "disabled"}
     <button
-      type="submit"
-      disabled
-      aria-disabled="true"
-      class="govuk-button"
-      data-module="govuk-button"
-      onclick={onClickFunction}
+            type="submit"
+            disabled
+            aria-disabled="true"
+            class="govuk-button"
+            data-module="govuk-button"
+            onclick={onClickFunction}
     >
       {textContent}
     </button>
+
   {:else if buttonType === "table header"}
-    <button type="button" class="text-header" onclick={onClickFunction}>
-      {textContent}
-      <svg
-        width="22"
-        height="22"
-        focusable="false"
-        aria-hidden="true"
-        role="img"
-        viewBox="0 0 22 22"
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          class="top-triangle"
-          d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
-          fill="currentColor"
-        ></path>
-        <path
-          class="bottom-triangle"
-          d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
-          fill="currentColor"
-        ></path>
-      </svg>
+    <button
+            type="button"
+            class="text-header"
+            onclick={onClickFunction}
+            disabled={disabled}
+    >
+      <span>{textContent}</span>
+
+      <span class="sort-icon" aria-hidden="true">
+        {#if direction === "ascending"}
+          <svg
+                  class="sort-arrow-single"
+                  width="1em"
+                  height="1em"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 22 22"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+                    d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
+                    fill="currentColor"
+            ></path>
+          </svg>
+        {:else if direction === "descending"}
+          <svg
+                  class="sort-arrow-single"
+                  width="1em"
+                  height="1em"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 22 22"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+                    d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
+                    fill="currentColor"
+            ></path>
+          </svg>
+        {:else}
+          <svg
+                  class="sort-arrow-both"
+                  width="1em"
+                  height="1em"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 22 22"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+                    d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
+                    fill="currentColor"
+            ></path>
+            <path
+                    d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
+                    fill="currentColor"
+            ></path>
+          </svg>
+        {/if}
+      </span>
     </button>
+
   {:else}
     <button
-      type="submit"
-      class={buttonClass}
-      data-module="govuk-button"
-      onclick={onClickFunction}
+            type="submit"
+            class={buttonClass}
+            data-module="govuk-button"
+            onclick={onClickFunction}
     >
       {textContent}
     </button>
   {/if}
+
 {:else}
   <div class="p-4">
     {#if buttonType === "start"}
       <a
-        href={"#"}
-        role="button"
-        draggable="false"
-        class="govuk-button govuk-button--start"
-        data-module="govuk-button"
-        onclick={onClickFunction}
+              href="#"
+              role="button"
+              draggable="false"
+              class="govuk-button govuk-button--start"
+              data-module="govuk-button"
+              onclick={onClickFunction}
       >
         {textContent}
         <svg
-          class="govuk-button__start-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          width="17.5"
-          height="19"
-          viewBox="0 0 33 40"
-          aria-hidden="true"
-          focusable="false"
+                class="govuk-button__start-icon"
+                xmlns="http://www.w3.org/2000/svg"
+                width="17.5"
+                height="19"
+                viewBox="0 0 33 40"
+                aria-hidden="true"
+                focusable="false"
         >
           <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
         </svg>
       </a>
+
     {:else if buttonType === "disabled"}
       <button
-        type="submit"
-        disabled
-        aria-disabled="true"
-        class="govuk-button"
-        data-module="govuk-button"
-        onclick={onClickFunction}
+              type="submit"
+              disabled
+              aria-disabled="true"
+              class="govuk-button"
+              data-module="govuk-button"
+              onclick={onClickFunction}
       >
         {textContent}
       </button>
+
     {:else if buttonType === "table header"}
-      <button type="button" class="text-header" onclick={onClickFunction}>
-        {textContent}
-        <svg
-          width="22"
-          height="22"
-          focusable="false"
-          aria-hidden="true"
-          role="img"
-          viewBox="0 0 22 22"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            class="top-triangle"
-            d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
-            fill="currentColor"
-          ></path>
-          <path
-            class="bottom-triangle"
-            d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
-            fill="currentColor"
-          ></path>
-        </svg>
+      <button
+              type="button"
+              class="text-header"
+              onclick={onClickFunction}
+              disabled={disabled}
+      >
+        <span>{textContent}</span>
+
+        <span class="sort-icon" aria-hidden="true">
+          {#if direction === "ascending"}
+            <svg
+                    class="sort-arrow-single"
+                    width="1em"
+                    height="1em"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 22 22"
+                    fill="currentColor"
+                    xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                      d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
+                      fill="currentColor"
+              ></path>
+            </svg>
+          {:else if direction === "descending"}
+            <svg
+                    class="sort-arrow-single"
+                    width="1em"
+                    height="1em"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 22 22"
+                    fill="currentColor"
+                    xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                      d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
+                      fill="currentColor"
+              ></path>
+            </svg>
+          {:else}
+            <svg
+                    class="sort-arrow-both"
+                    width="1em"
+                    height="1em"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 22 22"
+                    fill="currentColor"
+                    xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                      d="M8.1875 9.5L10.9609 3.95703L13.7344 9.5H8.1875Z"
+                      fill="currentColor"
+              ></path>
+              <path
+                      d="M13.7344 12.0781L10.9609 17.6211L8.1875 12.0781H13.7344Z"
+                      fill="currentColor"
+              ></path>
+            </svg>
+          {/if}
+        </span>
       </button>
+
+    {:else if buttonType === "moreInfo"}
+      <button class="more-info-button" type="button" onclick={onClickFunction}>
+        <Icon kind="info" />
+      </button>
+
     {:else}
       <button
-        type="button"
-        class={buttonClass}
-        data-module="govuk-button"
-        onclick={onClickFunction}
+              type="button"
+              class={buttonClass}
+              data-module="govuk-button"
+              onclick={onClickFunction}
       >
         {textContent}
       </button>
@@ -176,7 +271,28 @@
     color: #005ea5;
   }
 
+  .sort-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .sort-icon svg {
+    display: block;
+  }
+
+  .sort-arrow-single {
+    width: 1em;
+    height: 1em;
+  }
+
+  .sort-arrow-both {
+    width: 1em;
+    height: 1em;
+  }
+
   .more-info-button {
+    display: flex;
     flex: none;
     font-size: 1.25rem;
     padding-top: 2px;
@@ -184,11 +300,11 @@
     cursor: pointer;
   }
 
-  /* For the scale on hover of group parent */
   :hover .more-info-button {
     transform: scale(1.25);
   }
+
   .more-info-button.custom-ring {
     box-shadow: 0 0 0 2px rgba(59, 130, 246, 1);
   }
-</style>
+</style>

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

@@ -9,6 +9,8 @@ declare const Button: import("svelte").Component<{
     componentNameProp?: any;
     onClickFunction?: any;
     noPadding?: boolean;
+    direction?: any;
+    disabled?: boolean;
 }, {}, "">;
 type $$ComponentProps = {
     textContent?: any;
@@ -16,4 +18,6 @@ type $$ComponentProps = {
     componentNameProp?: any;
     onClickFunction?: any;
     noPadding?: boolean;
+    direction?: any;
+    disabled?: boolean;
 };

package/dist/components/ui/Card.svelte

@@ -1,101 +1,89 @@
 <script>
+  import CardHeader from "./CardHeader.svelte";
+
   let {
-    linkCard = true,
-    linkText = undefined,
-    linkTextColor = "#1D70B8",
+    headerIsLink = true,
+    headerText = "Card header",
+    headerTextSize = "1.5rem",
+    headerTextColor = "#1D70B8",
+    headerBackgroundColor = "white",
     href = undefined,
-    callToActionBackgroundColor = "white",
-    bodyText = undefined,
+    onlyTextInBody = true,
+    bodyText = "Text in the body of the card",
+    headerSnippet = undefined,
+    bodySnippet = undefined,
+    children = undefined,
     bodyTextColor = "#0B0C0C",
     bodyBackgroundColor = "#FBFCFD",
     bodyTopBorderColor = "#F4F8FB",
     bodyBottomBorderColor = "#c3d9e9",
     selectedValue = $bindable(),
-    cardSnippet = undefined,
+    display = "flex",
+    gridPosition = undefined,
+    subtitle = undefined,
   } = $props();
 </script>
 
-<div class="card">
+<div class="card" style="display: {display}">
   <div
-    class="call-to-action"
-    style="background-color: {callToActionBackgroundColor};"
+    class="header-div"
+    style="background-color: {headerBackgroundColor}; grid-row: {gridPosition?.[0]
+      ?.row ?? null}; grid-column: {gridPosition?.[0]?.col ?? null};"
   >
-    {#if linkCard}
-      <a class="link" {href}>
-        <h3
-          class="govuk-link link-heading govuk-heading-m"
-          style="--link-text-color: {linkTextColor}"
-        >
-          {linkText}
-        </h3>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="10"
-          height="17"
-          viewBox="0 0 10 17"
-          fill="none"
-        >
-          <path
-            d="M6.21622 8.5L0 2.36667L1.89189 0.5L10 8.5L1.89189 16.5L0 14.6333L6.21622 8.5Z"
-            fill={linkTextColor}
-          ></path>
-        </svg>
-      </a>
+    {#if headerIsLink}
+      <CardHeader
+        text={headerText}
+        textSize={headerTextSize}
+        textColor={headerTextColor}
+        backgroundColor={headerBackgroundColor}
+        {href}
+        {subtitle}
+      ></CardHeader>
     {:else}
-      {@render cardSnippet()}
+      {@render headerSnippet?.()}
     {/if}
   </div>
 
   <div
     class="body-div"
-    style="--body-bg-color: {bodyBackgroundColor}; --body-bottom-border-color: {bodyBottomBorderColor}; --body-top-border-color: {bodyTopBorderColor};"
+    style="--body-bg-color: {bodyBackgroundColor}; --body-bottom-border-color: {bodyBottomBorderColor}; --body-top-border-color: {bodyTopBorderColor}; grid-row: {gridPosition?.[1]
+      ?.row ?? null}; grid-column: {gridPosition?.[1]?.col ?? null};"
   >
-    <p class="govuk-body body-text" style="--body-text-color: {bodyTextColor};">
-      {bodyText}
-    </p>
+    {#if onlyTextInBody}
+      <p
+        class="govuk-body body-text"
+        style="--body-text-color: {bodyTextColor};"
+      >
+        {bodyText}
+      </p>
+    {:else if children}
+      {@render children?.()}
+    {:else}
+      {@render bodySnippet?.()}
+    {/if}
   </div>
 </div>
 
 <style>
   .card {
-    display: flex;
     flex-direction: column;
+    min-width: 0;
   }
 
-  .call-to-action {
-    padding: 15px 20px;
-  }
-
-  .link {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  .link-heading {
-    color: var(--link-text-color);
+  .header-div {
+    padding: 20px;
+    flex: 1;
   }
 
   .body-div {
     background-color: var(--body-bg-color);
     border-bottom: 1px solid var(--body-bottom-border-color);
     border-top: 1px solid var(--body-top-border-color);
-    padding: 10px 20px 15px 20px;
+    padding: 15px 1%;
     flex: 1;
   }
 
   .body-text {
     color: var(--body-text-color);
   }
-
-  .govuk-heading-m {
-    /* overwriting margin and line-height to make link centered vertically */
-    margin: 0;
-    line-height: 1;
-  }
-
-  a {
-    color: #1d70b8;
-  }
 </style>

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

@@ -4,30 +4,44 @@ type Card = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const Card: import("svelte").Component<{
-    linkCard?: boolean;
-    linkText?: any;
-    linkTextColor?: string;
+    headerIsLink?: boolean;
+    headerText?: string;
+    headerTextSize?: string;
+    headerTextColor?: string;
+    headerBackgroundColor?: string;
     href?: any;
-    callToActionBackgroundColor?: string;
-    bodyText?: any;
+    onlyTextInBody?: boolean;
+    bodyText?: string;
+    headerSnippet?: any;
+    bodySnippet?: any;
+    children?: any;
     bodyTextColor?: string;
     bodyBackgroundColor?: string;
     bodyTopBorderColor?: string;
     bodyBottomBorderColor?: string;
     selectedValue?: any;
-    cardSnippet?: any;
+    display?: string;
+    gridPosition?: any;
+    subtitle?: any;
 }, {}, "selectedValue">;
 type $$ComponentProps = {
-    linkCard?: boolean;
-    linkText?: any;
-    linkTextColor?: string;
+    headerIsLink?: boolean;
+    headerText?: string;
+    headerTextSize?: string;
+    headerTextColor?: string;
+    headerBackgroundColor?: string;
     href?: any;
-    callToActionBackgroundColor?: string;
-    bodyText?: any;
+    onlyTextInBody?: boolean;
+    bodyText?: string;
+    headerSnippet?: any;
+    bodySnippet?: any;
+    children?: any;
     bodyTextColor?: string;
     bodyBackgroundColor?: string;
     bodyTopBorderColor?: string;
     bodyBottomBorderColor?: string;
     selectedValue?: any;
-    cardSnippet?: any;
+    display?: string;
+    gridPosition?: any;
+    subtitle?: any;
 };