@communitiesuk/svelte-component-library 0.1.19-beta.7.0 → 0.1.19-beta.9

package/dist/assets/icons/MaterialIcon.svelte

@@ -23,6 +23,7 @@
   class="c inline h-16 w-16"
   viewBox="0 0 48 48"
   style={`transform: rotate(${rotation}deg)`}
+  aria-hidden={true}
 >
   {#each paths as path}
     <path d={path}></path>

package/dist/components/data-vis/line-chart/ValueLabel.svelte

@@ -41,16 +41,15 @@ left: {markerRect?.x +
   border-radius: 5px;"
     >
       {#if tooltipContent}
-        <div>
+        <div role="tooltip">
           {activeMarkerId[tooltipContent]}
         </div>
       {:else}
-        <div>
-          <div>{activeMarkerId?.value ?? activeMarkerId}</div>
-        </div>{/if}
+        <div role="tooltip">{activeMarkerId?.value ?? activeMarkerId}</div>
+      {/if}
     </div>
   {:else}
-    <div>
+    <div role="tooltip">
       {@render tooltipSnippet(activeMarkerId)}
     </div>
   {/if}

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

@@ -12,7 +12,7 @@
     showAxis = true,
     chartWidth = $bindable(500), // the 'chart' is the bar and the marker
     chartHeight = 24,
-    colour = "#CA357C",
+    color = "#CA357C",
     nSegments = 10,
     startColor = "#8EB8DC",
     endColor = "#0F385C",
@@ -27,7 +27,7 @@
     rowData = [
       {
         value: value,
-        colour: colour,
+        color: color,
         opacity: opacity,
         annotation: annotation,
       },
@@ -79,10 +79,12 @@
       activeMarkerId = null;
     },
     activeMarkerId = undefined,
+    ariaLabel,
+    axisTextSize,
   } = $props();
 
   // base defaults that apply to every row
-  const baseRow = { value, colour, opacity, annotation };
+  const baseRow = { value, color, opacity, annotation };
 
   // base defaults that apply to every chart
   const baseChart = { label, chartHeight, min, max, showAxis };
@@ -234,218 +236,244 @@
       ),
   );
 
+  $inspect(allDataNormalized, "allDataNormalized");
+
   let gridTemplateRows = $derived(
     allDataNormalized
       .map((item, i) => {
-        const sizes = ["minmax(0,1fr)"];
-        if (moreInfoTogglesArray[i]) sizes.push("minmax(0,auto)");
-        if (item.divider === "true") sizes.push("minmax(0,auto)");
+        const sizes = ["minmax(28px,1fr)"];
+        if (moreInfoTogglesArray[i]) sizes.push("minmax(50px,auto)");
+        if (item.divider) sizes.push("0px");
         return sizes.join(" "); // still fine because number of rows matches
       })
-      .concat(showAxis ? ["minmax(0,auto)"] : [])
+      .concat(showAxis ? ["minmax(0px,auto)"] : [])
       .join(" "),
   );
 </script>
 
-{#if annotations.length}
-  {#each annotations as d (d.value)}
-    <div bind:clientWidth={topWidth}>
-      <svg width={topWidth} height="60">
-        <g>
-          <text
-            font-family="GDS Transport"
-            id="label"
-            x={d.value}
-            y="20"
-            fill={d.colour}
-            font-size="18"
-            opacity={typeof activeMarkerId !== "undefined" && activeMarkerId
-              ? 0.2
-              : 1}
-          >
-            {d.annotation}
-          </text>
-        </g>
-        <defs>
-          <marker
-            id="arrow-down"
-            markerWidth="10"
-            markerHeight="10"
-            refX="3"
-            refY="3"
-            orient="auto"
-            markerUnits="strokeWidth"
+<div role="img" aria-label={ariaLabel}>
+  {#if annotations.length}
+    {#each annotations as d (d.value)}
+      <div bind:clientWidth={topWidth} aria-hidden={true}>
+        <svg width={topWidth} height="60">
+          <g>
+            <text
+              font-family="GDS Transport"
+              id="label"
+              x={d.value}
+              y="20"
+              fill={d.color}
+              font-size="18"
+              opacity={typeof activeMarkerId !== "undefined" && activeMarkerId
+                ? 0.2
+                : 1}
+            >
+              {d.annotation}
+            </text>
+          </g>
+          <defs>
+            <marker
+              id="arrow-down"
+              markerWidth="10"
+              markerHeight="10"
+              refX="3"
+              refY="3"
+              orient="auto"
+              markerUnits="strokeWidth"
+              opacity={typeof activeMarkerId !== "undefined" && activeMarkerId
+                ? 0.2
+                : 1}
+            >
+              <path d="M 0 0 L 6 3 L 0 6 z" fill={d.color}></path>
+            </marker>
+          </defs>
+          <path
+            d="M 4 25 v 10 h {xFunction(min, max)(d.value) +
+              markerRadius -
+              4 +
+              (topWidth - chartWidth)}  v 15"
+            fill="none"
+            stroke={d.color}
+            stroke-width="1.5"
+            marker-end="url(#arrow-down)"
             opacity={typeof activeMarkerId !== "undefined" && activeMarkerId
               ? 0.2
               : 1}
-          >
-            <path d="M 0 0 L 6 3 L 0 6 z" fill={d.colour}></path>
-          </marker>
-        </defs>
-        <path
-          d="M 4 25 v 10 h {xFunction(min, max)(d.value) +
-            markerRadius -
-            4 +
-            (topWidth - chartWidth)}  v 15"
-          fill="none"
-          stroke={d.colour}
-          stroke-width="1.5"
-          marker-end="url(#arrow-down)"
-          opacity={typeof activeMarkerId !== "undefined" && activeMarkerId
-            ? 0.2
-            : 1}
-        ></path>
-      </svg>
-    </div>
-  {/each}
-{/if}
+          ></path>
+        </svg>
+      </div>
+    {/each}
+  {/if}
 
-<div
-  class="grid-container"
-  bind:this={container}
-  style="
+  <div
+    class="grid-container"
+    bind:this={container}
+    style="
   position: relative;
     grid-template-columns: {gridTemplateColumns};
     grid-template-rows: {gridTemplateRows};
   "
->
-  {#each allDataNormalized as positionChart, i}
-    {#if showLabel}
-      <p
-        class="govuk-body-s"
-        style=" text-align: right;
+  >
+    {#each allDataNormalized as positionChart, i}
+      {#if showLabel}
+        <p
+          aria-hidden={true}
+          class="govuk-body-s"
+          style=" text-align: right;
     margin: 0;
     line-height: 1.05;"
-      >
-        {positionChart.label}
-      </p>
-    {/if}
-    {#if showIcon}
-      <div class="button-container">
+        >
+          {positionChart.label}
+        </p>
+      {/if}
+      {#if showIcon}
         <Button
           textContent="i"
           buttonType="moreInfo"
           noPadding={true}
           onClickFunction={() => updateMoreInfoTogglesArray(i)}
+          ariaExpanded={moreInfoTogglesArray[i]}
         ></Button>
-      </div>
-    {/if}
-    <div
-      class="chart"
-      style="height: {positionChart.chartHeight}px"
-      bind:clientWidth={chartWidth}
-    >
-      <svg width={chartWidth} height={positionChart.chartHeight}>
-        {#each range as number}
-          <g
-            transform="translate({markerRadius +
-              (barWidth * number) / nSegments},{(positionChart.chartHeight -
-              barHeight) /
-              2})"
-            ><rect
-              width={barWidth / nSegments}
-              height={barHeight}
-              fill={colorScale && colorScale.length > 0
-                ? colorScale[number]
-                : interpolateColors(startColor, endColor, nSegments, midColor)[
-                    number
-                  ]}
-            ></rect></g
-          >{/each}
-        {#each Object.entries(positionChart.rowData) as [tier, points]}
-          {#each points as rowValue, i}
-            {#if !isNaN(Number(rowValue.value))}
-              {@const markerId = "marker-" + rowValue.value}
-              <g
-                data-id={markerId}
-                onclick={interactiveMarkers
-                  ? (event) => onClickMarker(event, rowValue, markerId)
-                  : null}
-                onmouseenter={interactiveMarkers
-                  ? (event) =>
-                      onMouseEnterMarker(
-                        event,
-                        rowValue,
-                        markerId,
-                        event.currentTarget.getBoundingClientRect(),
-                      )
-                  : null}
-                onmouseleave={interactiveMarkers
-                  ? (event) => onMouseLeaveMarker(event, rowValue, markerId)
-                  : null}
-                role="button"
-                tabindex="0"
-                onkeydown={interactiveMarkers
-                  ? (e) => e.key === "Enter" && onClickMarker(e, value)
-                  : null}
-                pointer-events={interactiveMarkers ? null : "none"}
-                transform="translate({xFunction(
-                  positionChart.min,
-                  positionChart.max,
-                )(rowValue.value) + markerRadius},{positionChart.chartHeight /
-                  2})"
-              >
-                <circle
-                  r={markerRadius}
-                  cx="0"
-                  cy="0"
-                  fill={rowValue.colour}
-                  stroke="white"
-                  opacity={rowValue.opacity}
-                ></circle>
-              </g>
-            {/if}
-          {/each}
-        {/each}
-      </svg>
-    </div>
-    {#if moreInfoTogglesArray[i]}
-      <div class="accordion" style="grid-column:1 / -1">
-        <InsetText content={positionChart.moreInfo} renderStringAsHTML={true}
-        ></InsetText>
-      </div>
-    {/if}
-    {#if positionChart.divider}
-      <div style="grid-column:1 / -1">
-        <svg width="100%" height="5">
-          <line
-            x1="0"
-            y1="2.5"
-            x2="100%"
-            y2="2.55"
+      {/if}
+      <div
+        class="chart"
+        style="height: {positionChart.chartHeight}px"
+        bind:clientWidth={chartWidth}
+      >
+        <svg
+          width={chartWidth}
+          height={positionChart.chartHeight}
+          aria-hidden={true}
+        >
+          <rect
+            x={markerRadius}
+            y={(positionChart.chartHeight - barHeight) / 2}
+            width={barWidth}
+            height={barHeight}
+            fill="none"
             stroke="grey"
-            stroke-width="0.5"
-          ></line>
+            stroke-width="1"
+          ></rect>
+          {#each range as number}
+            <g
+              transform="translate({markerRadius +
+                (barWidth * number) / nSegments},{(positionChart.chartHeight -
+                barHeight) /
+                2})"
+              ><rect
+                width={barWidth / nSegments}
+                height={barHeight}
+                fill={colorScale && colorScale.length > 0
+                  ? colorScale[number]
+                  : interpolateColors(
+                      startColor,
+                      endColor,
+                      nSegments,
+                      midColor,
+                    )[number]}
+              ></rect></g
+            >{/each}
+
+          {#each Object.entries(positionChart.rowData) as [tier, points]}
+            {#each points as rowValue, i}
+              {#if !isNaN(Number(rowValue.value))}
+                {@const markerId = "marker-" + rowValue.value}
+                <g
+                  data-id={markerId}
+                  onclick={interactiveMarkers
+                    ? (event) => onClickMarker(event, rowValue, markerId)
+                    : null}
+                  onmouseenter={interactiveMarkers
+                    ? (event) =>
+                        onMouseEnterMarker(
+                          event,
+                          rowValue,
+                          markerId,
+                          event.currentTarget.getBoundingClientRect(),
+                        )
+                    : null}
+                  onmouseleave={interactiveMarkers
+                    ? (event) => onMouseLeaveMarker(event, rowValue, markerId)
+                    : null}
+                  onfocus={interactiveMarkers
+                    ? (event) =>
+                        onMouseEnterMarker(
+                          event,
+                          rowValue,
+                          markerId,
+                          event.currentTarget.getBoundingClientRect(),
+                        )
+                    : null}
+                  onblur={interactiveMarkers
+                    ? (event) => onMouseLeaveMarker(event, rowValue, markerId)
+                    : null}
+                  role="button"
+                  aria-label={tooltipContent}
+                  tabindex="0"
+                  onkeydown={interactiveMarkers
+                    ? (event) => onClickMarker(event, rowValue, markerId)
+                    : null}
+                  pointer-events={interactiveMarkers ? null : "none"}
+                  transform="translate({xFunction(
+                    positionChart.min,
+                    positionChart.max,
+                  )(rowValue.value) + markerRadius},{positionChart.chartHeight /
+                    2})"
+                >
+                  <circle
+                    r={markerRadius}
+                    cx="0"
+                    cy="0"
+                    fill={rowValue.color}
+                    stroke="white"
+                    opacity={rowValue.opacity}
+                  ></circle>
+                </g>
+              {/if}
+            {/each}
+          {/each}
         </svg>
-      </div>{/if}
-  {/each}
+      </div>
+      {#if moreInfoTogglesArray[i]}
+        <div class="accordion" style="grid-column:1 / -1" aria-live="assertive">
+          <InsetText content={positionChart.moreInfo} renderStringAsHTML={true}
+          ></InsetText>
+        </div>
+      {/if}
+      {#if positionChart.divider}
+        <div
+          style="grid-column:1 / -1; border-bottom: solid 1px #d5dade;"
+        ></div>{/if}
+    {/each}
 
-  {#if showAxis}
-    {#if showIcon}
-      <div class="empty"></div>
+    {#if showAxis}
+      {#if showIcon}
+        <div class="empty"></div>
+      {/if}
+      {#if showLabel}
+        <div class="empty"></div>
+      {/if}
+      <div class="axis" aria-hidden="true">
+        <PositionChartAxis {markerRadius} {barWidth} textSize={axisTextSize}
+        ></PositionChartAxis>
+      </div>
     {/if}
-    {#if showLabel}
-      <div class="empty"></div>
+    {#if activeMarkerId}
+      <ValueLabel
+        {activeMarkerId}
+        labelColor="lightgrey"
+        labelTextColor="black"
+        {labelText}
+        {tooltipContent}
+        {xFunction}
+        {yFunction}
+        {x}
+        {y}
+        {markerRect}
+        {tooltipSnippet}
+      ></ValueLabel>
     {/if}
-    <div class="axis">
-      <PositionChartAxis {markerRadius} {barWidth}></PositionChartAxis>
-    </div>
-  {/if}
-  {#if activeMarkerId}
-    <ValueLabel
-      {activeMarkerId}
-      labelColor="lightgrey"
-      labelTextColor="black"
-      {labelText}
-      {tooltipContent}
-      {xFunction}
-      {yFunction}
-      {x}
-      {y}
-      {markerRect}
-      {tooltipSnippet}
-    ></ValueLabel>
-  {/if}
+  </div>
 </div>
 
 <style>

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

@@ -11,7 +11,7 @@ declare const PositionChart: import("svelte").Component<{
     showAxis?: boolean;
     chartWidth?: number;
     chartHeight?: number;
-    colour?: string;
+    color?: string;
     nSegments?: number;
     startColor?: string;
     endColor?: string;
@@ -42,6 +42,8 @@ declare const PositionChart: import("svelte").Component<{
     onMouseEnterMarker?: Function;
     onMouseLeaveMarker?: Function;
     activeMarkerId?: any;
+    ariaLabel: any;
+    axisTextSize: any;
 }, {}, "chartWidth">;
 type $$ComponentProps = {
     value?: any;
@@ -51,7 +53,7 @@ type $$ComponentProps = {
     showAxis?: boolean;
     chartWidth?: number;
     chartHeight?: number;
-    colour?: string;
+    color?: string;
     nSegments?: number;
     startColor?: string;
     endColor?: string;
@@ -82,4 +84,6 @@ type $$ComponentProps = {
     onMouseEnterMarker?: Function;
     onMouseLeaveMarker?: Function;
     activeMarkerId?: any;
+    ariaLabel: any;
+    axisTextSize: any;
 };

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

@@ -1,19 +1,27 @@
 <script>
-  let { markerRadius = undefined, barWidth = undefined } = $props();
+  let {
+    markerRadius = undefined,
+    barWidth = undefined,
+    textSize = "s",
+  } = $props();
 </script>
 
-<div class="axis" style="--axis-padding:{markerRadius}px; width: {barWidth}">
+<div
+  class="axis govuk-body-{textSize}"
+  style="--axis-padding:{markerRadius}px; width: {barWidth}"
+>
   <div class="more-deprived">
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="11"
+      width="18"
       height="16"
-      viewBox="0 0 11 16"
+      viewBox="0 0 11 20"
       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="#555555"
+        transform="translate(20,21)rotate(180)"
+        d="M 19.7071 12.7071 C 20.0976 12.3166 20.0976 11.6834 19.7071 11.2929 L 13.3431 4.9289 C 12.9526 4.5384 12.3195 4.5384 11.9289 4.9289 C 11.5384 5.3195 11.5384 5.9526 11.9289 6.3431 L 17.5858 12 L 11.9289 17.6568 C 11.5384 18.0474 11.5384 18.6805 11.9289 19.0711 C 12.3195 19.4616 12.9526 19.4616 13.3431 19.0711 L 19.7071 12.7071 Z M 4 12 L 4 13 L 19 13 L 19 12 L 19 11 L 9 11 L 4 11 Z"
+        fill="black"
       ></path>
     </svg>
     <span class="axis-text">More deprived</span>
@@ -22,14 +30,15 @@
     <span class="axis-text">Less deprived</span>
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="12"
+      width="18"
       height="16"
-      viewBox="0 0 12 16"
+      viewBox="0 0 11 20"
       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="#555555"
+        transform="translate(-5,-3)"
+        d="M 19.7071 12.7071 C 20.0976 12.3166 20.0976 11.6834 19.7071 11.2929 L 13.3431 4.9289 C 12.9526 4.5384 12.3195 4.5384 11.9289 4.9289 C 11.5384 5.3195 11.5384 5.9526 11.9289 6.3431 L 17.5858 12 L 11.9289 17.6568 C 11.5384 18.0474 11.5384 18.6805 11.9289 19.0711 C 12.3195 19.4616 12.9526 19.4616 13.3431 19.0711 L 19.7071 12.7071 Z M 4 12 L 4 13 L 19 13 L 19 12 L 19 11 L 9 11 L 4 11 Z"
+        fill="black"
       ></path>
     </svg>
   </div>
@@ -47,7 +56,18 @@
   .more-deprived {
     display: flex;
     align-items: top;
-    gap: 5px;
+
+    gap: 2px;
+  }
+
+  .more-deprived {
+    width: 45%;
+  }
+
+  .less-deprived {
+    text-align: end;
+    justify-content: end;
+    width: 43%;
   }
 
   /* Tell the parent to act as a container */
@@ -58,19 +78,7 @@
   .axis-text {
     font-family: "GDS Transport";
     line-height: 0.9;
-    color: #444444;
-  }
-
-  /* Container query: hide the child if parent's width is less than 400px */
-  @container (max-width: 18rem) {
-    .less-deprived {
-      display: none;
-    }
-  }
-
-  @container (max-width: 25rem) {
-    .average {
-      display: none;
-    }
+    color: black;
+    font-style: italic;
   }
 </style>

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

@@ -6,8 +6,10 @@ type PositionChartAxis = {
 declare const PositionChartAxis: import("svelte").Component<{
     markerRadius?: any;
     barWidth?: any;
+    textSize?: string;
 }, {}, "">;
 type $$ComponentProps = {
     markerRadius?: any;
     barWidth?: any;
+    textSize?: string;
 };

package/dist/components/layout/Footer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import legacyDefaultCopyrightLogo from "./../../assets/images/govuk-crest.svg";
   // Define component props with default values
   // sections: array of footer navigation sections
   // inlineLinks: array of inline footer links
@@ -227,7 +226,7 @@
             ]}
             href={copyrightHref}
             style={copyrightLogoUrl || !rebrand
-              ? `background-image: url(${copyrightLogoUrl ?? legacyDefaultCopyrightLogo}); display: block; width: 100%; padding-top: 112px; background-repeat: no-repeat; background-position: 50% 0; background-size: 125px 102px; text-align: center;`
+              ? `background-image: url(${copyrightLogoUrl ?? "/images/govuk-crest.svg"}); display: block; width: 100%; padding-top: 112px; background-repeat: no-repeat; background-position: 50% 0; background-size: 125px 102px; text-align: center;`
               : ""}
           >
             {copyrightText}