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

package/dist/components/data-vis/position-chart/PositionChartAxis.svelte

@@ -1,70 +1,81 @@
 <script>
-  let { markerRadius = undefined, barWidth = undefined } = $props();
+  let { textSize = "s", axisLabels = ["Left", "Right"] } = $props();
 </script>
 
-<div class="axis" style="--axis-padding:{markerRadius}px; width: {barWidth}">
-  <div class="more-deprived">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="11"
-      height="16"
-      viewBox="0 0 11 16"
-      fill="none"
-    >
-      <path
-        d="M0.292893 7.29289C-0.0976315 7.68342 -0.0976314 8.31658 0.292893 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928933L0.292893 7.29289ZM11 8L11 7L1 7L1 8L1 9L11 9L11 8Z"
-        fill="#B1B4B6"
-      ></path>
-    </svg>
-    <span style="font-family:GDS Transport">More deprived</span>
+<div class="axis govuk-body-{textSize}">
+  <div class="left-label">
+    <div class="arrow-container">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="16"
+        viewBox="0 0 18 16"
+      >
+        <path
+          d="M8 1L1 8L8 15M1 8H17"
+          stroke="darkgrey"
+          stroke-width="2"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>
+      </svg>
+    </div>
+    <span class="axis-text">{axisLabels[0]}</span>
   </div>
-  <div class="less-deprived">
-    <span style="font-family:GDS Transport">Less deprived</span>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="16"
-      viewBox="0 0 12 16"
-      fill="none"
-    >
-      <path
-        d="M11.2071 8.70711C11.5976 8.31658 11.5976 7.68342 11.2071 7.2929L4.84315 0.928933C4.45262 0.538409 3.81946 0.538408 3.42893 0.928933C3.03841 1.31946 3.03841 1.95262 3.42893 2.34315L9.08579 8L3.42893 13.6569C3.03841 14.0474 3.03841 14.6805 3.42893 15.0711C3.81946 15.4616 4.45262 15.4616 4.84314 15.0711L11.2071 8.70711ZM0.5 8L0.5 9L10.5 9L10.5 8L10.5 7L0.5 7L0.5 8Z"
-        fill="#B1B4B6"
-      ></path>
-    </svg>
+  <div class="right-label">
+    <span class="axis-text">{axisLabels[1]}</span>
+    <div class="arrow-container">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="16"
+        viewBox="0 0 18 16"
+      >
+        <path
+          d="M10 1L17 8L10 15M17 8H1"
+          stroke="darkgrey"
+          stroke-width="2"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>
+      </svg>
+    </div>
   </div>
 </div>
 
 <style>
+  svg {
+    overflow: visible;
+  }
+
   .axis {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    padding: 0 var(--axis-padding);
+    margin-bottom: 0;
   }
 
-  .less-deprived,
-  .more-deprived {
+  .left-label,
+  .right-label {
     display: flex;
-    align-items: center;
-    gap: 5px;
+    gap: 4px;
+    max-width: 120px;
   }
 
-  /* Tell the parent to act as a container */
-  .axis {
-    container-type: inline-size;
+  .right-label {
+    text-align: end;
   }
 
-  /* Container query: hide the child if parent's width is less than 400px */
-  @container (max-width: 18rem) {
-    .less-deprived {
-      display: none;
-    }
+  .axis-text {
+    font-family: "GDS Transport";
+    line-height: 0.9;
+    color: #666666;
+    font-style: italic;
   }
 
-  @container (max-width: 25rem) {
-    .average {
-      display: none;
-    }
+  .arrow-container {
+    display: flex;
+    align-items: center;
   }
 </style>

package/dist/components/data-vis/position-chart/PositionChartAxis.svelte.d.ts

@@ -4,10 +4,10 @@ type PositionChartAxis = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const PositionChartAxis: import("svelte").Component<{
-    markerRadius?: any;
-    barWidth?: any;
+    textSize?: string;
+    axisLabels?: any[];
 }, {}, "">;
 type $$ComponentProps = {
-    markerRadius?: any;
-    barWidth?: any;
+    textSize?: string;
+    axisLabels?: any[];
 };

package/dist/components/layout/Footer.svelte

@@ -51,6 +51,7 @@
     copyrightHref = "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/",
     rebrand = true,
     borderTopColor = "#00625E",
+    removeCopyrightPadding = false,
   } = $props<{
     sections?: FooterSection[];
     inlineLinks?: FooterItem[];
@@ -68,6 +69,7 @@
     copyrightHref?: string;
     rebrand?: boolean;
     borderTopColor?: string;
+    removeCopyrightPadding?: boolean;
   }>();
 </script>
 
@@ -218,6 +220,7 @@
           <a
             class={[
               "govuk-footer__link",
+              { "no-copyright-padding": removeCopyrightPadding },
               {
                 "govuk-footer__copyright-logo": !copyrightLogoUrl && rebrand,
               },
@@ -234,3 +237,9 @@
     </div>
   </div>
 </footer>
+
+<style>
+  .no-copyright-padding {
+    padding: 0;
+  }
+</style>

package/dist/components/layout/Footer.svelte.d.ts

@@ -27,6 +27,7 @@ type $$ComponentProps = {
     copyrightHref?: string;
     rebrand?: boolean;
     borderTopColor?: string;
+    removeCopyrightPadding?: boolean;
 };
 declare const Footer: import("svelte").Component<$$ComponentProps, {}, "">;
 type Footer = ReturnType<typeof Footer>;

package/dist/components/layout/PhaseBanner.svelte

@@ -5,15 +5,21 @@
     bannerText = "This is a new service. Help us improve it and ",
     linkText = "give your feedback by email",
     linkHref = "#",
+    bottomBorder = true,
   } = $props<{
     tagText?: string;
     bannerText?: string;
     linkText?: string;
     linkHref?: string;
+    bottomBorder?: boolean;
   }>();
 </script>
 
-<div class="govuk-phase-banner govuk-width-container">
+<div
+  class="govuk-phase-banner govuk-width-container {bottomBorder
+    ? ''
+    : 'no-bottom-border'}"
+>
   <p class="govuk-phase-banner__content">
     <strong class="govuk-tag govuk-phase-banner__content__tag">
       {tagText}
@@ -25,4 +31,7 @@
 </div>
 
 <style>
+  .no-bottom-border {
+    border-bottom: none;
+  }
 </style>

package/dist/components/layout/PhaseBanner.svelte.d.ts

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     bannerText?: string;
     linkText?: string;
     linkHref?: string;
+    bottomBorder?: boolean;
 };
 declare const PhaseBanner: import("svelte").Component<$$ComponentProps, {}, "">;
 type PhaseBanner = ReturnType<typeof PhaseBanner>;

package/dist/components/layout/ServiceNavigation.svelte

@@ -17,11 +17,15 @@ Use the component with or without navigation items based on your needs. -->
     serviceUrl = "#",
     navigationItems = undefined,
     collapseOnDesktop = false,
+    customiseServiceNameLink = false,
+    serviceNameLinkStyle = "govuk-link no-underline",
   } = $props<{
     serviceName?: string;
     serviceUrl?: string;
     navigationItems?: NavigationItem[];
     collapseOnDesktop?: boolean;
+    customiseServiceNameLink?: boolean;
+    serviceNameLinkStyle?: string;
   }>();
 
   // Reactive state declarations
@@ -94,7 +98,12 @@ Use the component with or without navigation items based on your needs. -->
   <div class="govuk-width-container">
     <div class="govuk-service-navigation__container">
       <span class="govuk-service-navigation__service-name">
-        <a href={serviceUrl} class="govuk-service-navigation__link">
+        <a
+          href={serviceUrl}
+          class={customiseServiceNameLink
+            ? serviceNameLinkStyle
+            : "govuk-service-navigation__link"}
+        >
           {serviceName}
         </a>
       </span>
@@ -145,3 +154,12 @@ Use the component with or without navigation items based on your needs. -->
     </div>
   </div>
 </section>
+
+<style>
+  .no-underline {
+    text-decoration: none;
+  }
+  .no-underline:hover {
+    text-decoration: underline;
+  }
+</style>

package/dist/components/layout/ServiceNavigation.svelte.d.ts

@@ -8,6 +8,8 @@ type $$ComponentProps = {
     serviceUrl?: string;
     navigationItems?: NavigationItem[];
     collapseOnDesktop?: boolean;
+    customiseServiceNameLink?: boolean;
+    serviceNameLinkStyle?: string;
 };
 declare const ServiceNavigation: import("svelte").Component<$$ComponentProps, {}, "">;
 type ServiceNavigation = ReturnType<typeof ServiceNavigation>;