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

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

@@ -2,6 +2,8 @@
   import { scaleLinear } from "d3-scale";
   import PositionChartAxis from "./PositionChartAxis.svelte";
   import ValueLabel from "../line-chart/ValueLabel.svelte";
+  import Button from "../../ui/Button.svelte";
+  import InsetText from "../../content/InsetText.svelte";
   let {
     value = undefined,
     min = undefined,
@@ -20,6 +22,8 @@
     annotation = undefined,
     showIcon = false,
     moreInfo = undefined,
+    markerRadius = chartHeight / 2,
+    options = [],
     rowData = [
       {
         value: value,
@@ -117,16 +121,12 @@
     }),
   );
 
-  $inspect(allDataNormalized);
-
-  // holds open/closed state for each label
-  let openStates = $state({});
+  let moreInfoTogglesArray = $state(
+    Array.from({ length: options.length }, () => false),
+  );
 
-  function toggle(label) {
-    openStates = {
-      ...openStates,
-      [label]: !openStates[label], // flip true/false
-    };
+  function updateMoreInfoTogglesArray(index) {
+    moreInfoTogglesArray[index] = !moreInfoTogglesArray[index];
   }
 
   let showLabel = $derived(
@@ -224,9 +224,6 @@
     return result;
   }
 
-  // the 'marker' is the circle
-  let markerRadius = $derived(chartHeight / 2);
-
   // the 'bar' is the 10 rectangles side by side
   let barWidth = $derived(chartWidth - markerRadius * 2);
   let barHeight = $derived((chartHeight * 5) / 6);
@@ -308,13 +305,22 @@
 >
   {#each allDataNormalized as positionChart, i}
     {#if showLabel}
-      <p class="label">{positionChart.label}</p>
+      <p
+        class="govuk-body-s"
+        style=" text-align: right;
+    margin: 0;
+    line-height: 1.05;"
+      >
+        {positionChart.label}
+      </p>
     {/if}
     {#if showIcon}
-      <button
-        id="info-{positionChart.label}"
-        onclick={() => toggle(positionChart.label)}>ⓘ</button
-      >
+      <Button
+        textContent="i"
+        buttonType="moreInfo"
+        noPadding={true}
+        onClickFunction={() => updateMoreInfoTogglesArray(i)}
+      ></Button>
     {/if}
     <div
       class="chart"
@@ -340,70 +346,68 @@
           >{/each}
         {#each Object.entries(positionChart.rowData) as [tier, points]}
           {#each points as rowValue, i}
-            {@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 !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 openStates[positionChart.label]}
-      <div
-        class="accordion"
-        style="grid-column:1 / -1; background-color:lightgrey; padding:10px; margin-right:{markerRadius}px"
-      >
-        <p>
-          {positionChart.moreInfo}
-        </p>
+    {#if moreInfoTogglesArray[i]}
+      <div class="accordion" style="grid-column:1 / -1;">
+        <p class="govuk-body-s">{positionChart.moreInfo}</p>
+        <!-- <InsetText content={positionChart.moreInfo} renderStringAsHTML={true}
+        ></InsetText> -->
       </div>
     {/if}
     {#if positionChart.divider}
       <div style="grid-column:1 / -1">
-        <svg width="100%" height="10">
+        <svg width="100%" height="5">
           <line
             x1="0"
-            y1="5"
+            y1="2.5"
             x2="100%"
-            y2="5"
-            stroke="black"
-            stroke-width="2"
-            stroke-dasharray="2,6"
+            y2="2.55"
+            stroke="grey"
+            stroke-width="0.5"
           ></line>
         </svg>
       </div>{/if}
@@ -445,11 +449,6 @@
          column-gap: 2%;
     row-gap: 2%;
   }
-  .label {
-    text-align: right;
-    margin: 0;
-    line-height: 1.05;
-  }
   .chart {
     display: flex;
     flex-direction: column;

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

@@ -21,6 +21,8 @@ declare const PositionChart: import("svelte").Component<{
     annotation?: any;
     showIcon?: boolean;
     moreInfo?: any;
+    markerRadius?: any;
+    options?: any[];
     rowData?: any[];
     allData?: any[];
     markerStyles?: Record<string, any>;
@@ -59,6 +61,8 @@ type $$ComponentProps = {
     annotation?: any;
     showIcon?: boolean;
     moreInfo?: any;
+    markerRadius?: any;
+    options?: any[];
     rowData?: any[];
     allData?: any[];
     markerStyles?: Record<string, any>;

package/dist/components/ui/Card.svelte

@@ -94,4 +94,8 @@
     margin: 0;
     line-height: 1;
   }
+
+  a {
+    color: #1d70b8;
+  }
 </style>

package/dist/components/ui/PostcodeOrAreaSearch.svelte

@@ -57,6 +57,10 @@
     homepage?: boolean;
     minLength?: number;
     required?: boolean;
+    autoselect?: boolean; // Auto-highlight first suggestion
+    hideHint?: boolean; // Hide the hint input element when autoselect is true
+    prefixMatchOnly?: boolean; // Only show suggestions that start with the query
+    autoFocusSubmitOnSelection?: boolean; // Auto-focus submit button when selection is confirmed
     [key: string]: any; // Allow other props
   };
 
@@ -83,6 +87,10 @@
     homepage = false,
     minLength = 2,
     required = false,
+    autoselect = true,
+    hideHint = false,
+    prefixMatchOnly = false,
+    autoFocusSubmitOnSelection = false,
     ...restProps
   }: Props = $props();
 
@@ -222,6 +230,10 @@
     homepage,
     minLength,
     required,
+    autoselect,
+    hideHint,
+    prefixMatchOnly,
+    autoFocusSubmitOnSelection,
     ...restProps,
   });
 </script>

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

@@ -31,6 +31,10 @@ type Props = {
     homepage?: boolean;
     minLength?: number;
     required?: boolean;
+    autoselect?: boolean;
+    hideHint?: boolean;
+    prefixMatchOnly?: boolean;
+    autoFocusSubmitOnSelection?: boolean;
     [key: string]: any;
 };
 declare const PostcodeOrAreaSearch: import("svelte").Component<Props, {}, "selectedValue">;

package/dist/components/ui/SearchAutocomplete.svelte

@@ -51,6 +51,10 @@
     hint?: string; // Add hint prop
     selectedValue?: any; // Bindable selected value, updated on selection
     maxSuggestions?: number; // Maximum number of suggestions to display
+    autoselect?: boolean; // Auto-highlight first suggestion
+    hideHint?: boolean; // Hide the hint input element when autoselect is true
+    prefixMatchOnly?: boolean; // Only show suggestions that start with the query (better for hint behavior)
+    autoFocusSubmitOnSelection?: boolean; // Auto-focus submit button when selection is confirmed
   };
 
   let {
@@ -85,6 +89,10 @@
     hint = undefined, // Add hint destructuring
     selectedValue = $bindable(), // Bindable prop for selected value
     maxSuggestions = undefined, // Maximum number of suggestions to display
+    autoselect = true, // Default to false as per library default
+    hideHint = false, // Default to false - show hint by default
+    prefixMatchOnly = false, // Default to false - show all matches
+    autoFocusSubmitOnSelection = false, // Default to false - don't auto-focus by default
     ...restSearchProps // Other props for the base Search component
   }: Props = $props();
 
@@ -97,6 +105,8 @@
   let currentSourceKey = $state<string | undefined>(undefined);
   let currentSourceProperty = $state<string | undefined>(undefined);
 
+
+
   // --- Derived Values ---
   const wrapperClasses = $derived(
     clsx(
@@ -254,19 +264,50 @@
           populateResults([]);
           return;
         }
+
         const lowerQuery = query.toLowerCase();
-        const filtered = options.filter((option) => {
-          const label = typeof option === "string" ? option : option.label;
-          return label.toLowerCase().includes(lowerQuery);
-        });
 
-        // Apply maxSuggestions limit if specified
-        const limitedResults =
-          maxSuggestions && maxSuggestions > 0
-            ? filtered.slice(0, maxSuggestions)
-            : filtered;
+        if (prefixMatchOnly) {
+          // Only show suggestions that start with the query
+          const filtered = options.filter((option) => {
+            const label = typeof option === "string" ? option : option.label;
+            return label.toLowerCase().startsWith(lowerQuery);
+          });
+
+          // Apply maxSuggestions limit if specified
+          const limitedResults =
+            maxSuggestions && maxSuggestions > 0
+              ? filtered.slice(0, maxSuggestions)
+              : filtered;
+
+          populateResults(limitedResults);
+        } else {
+          // Split results into two groups: starts-with and contains (existing behavior)
+          const startsWithResults: Suggestion[] = [];
+          const containsResults: Suggestion[] = [];
+
+          options.forEach((option) => {
+            const label = typeof option === "string" ? option : option.label;
+            const lowerLabel = label.toLowerCase();
+
+            if (lowerLabel.startsWith(lowerQuery)) {
+              startsWithResults.push(option);
+            } else if (lowerLabel.includes(lowerQuery)) {
+              containsResults.push(option);
+            }
+          });
+
+          // Combine results: starts-with first (for better hint behavior), then contains
+          const filtered = [...startsWithResults, ...containsResults];
 
-        populateResults(limitedResults);
+          // Apply maxSuggestions limit if specified
+          const limitedResults =
+            maxSuggestions && maxSuggestions > 0
+              ? filtered.slice(0, maxSuggestions)
+              : filtered;
+
+          populateResults(limitedResults);
+        }
       };
 
       // Determine which source to use
@@ -297,6 +338,7 @@
       const dynamicSourceFunction = sourceSelector
         ? (query: string, populateResults: (results: Suggestion[]) => void) => {
             const selectedSource = sourceSelector(query, options || []);
+
             // Handle invalid returns by falling back to default logic
             if (selectedSource === "api") {
               getResultsFromApi(query, populateResults);
@@ -366,7 +408,12 @@
       // Define confirm function
       let isSubmitting = false; // Prevent double submit
       const handleConfirm = (confirmedValue: Suggestion | undefined) => {
-        if (confirmedValue === undefined || isSubmitting) return;
+        console.log('handleConfirm called with:', confirmedValue, 'isSubmitting:', isSubmitting); // Debug log
+        
+        if (confirmedValue === undefined) return;
+        
+        // Reset submitting flag at the start of each new confirmation
+        isSubmitting = false;
 
         // Re-assign selectedValue before any form-based guard checks (!form) so bindings still update
         // (e.g. when no <form> exists around the component usage) and search component value is being used clienside without a page reload
@@ -379,23 +426,37 @@
         const inputElement =
           autocompleteInstance?.inputElement as HTMLInputElement;
         const form = containerElement?.closest("form");
-
-        if (!inputElement || !form) return;
-
-        isSubmitting = true;
-        inputElement.value = inputValueTemplate(confirmedValue);
-        inputElement.dataset.autocompleteAccepted = "true"; // Set tracking attribute
-
-        // Submit form
-        if (form.requestSubmit) {
-          form.requestSubmit();
-        } else {
-          form.submit(); // Fallback for older browsers
+        const submitButton = containerElement?.querySelector('button[type="submit"]') as HTMLButtonElement;
+        
+        console.log('Submit button found:', !!submitButton); // Debug log
+
+        // Always focus the submit button first, regardless of form presence (if feature is enabled)
+        if (autoFocusSubmitOnSelection && submitButton) {
+          console.log('Focusing submit button'); // Debug log
+          // Use requestAnimationFrame to ensure the focus happens after DOM updates
+          requestAnimationFrame(() => {
+            submitButton.focus();
+            console.log('Submit button focused, document.activeElement:', document.activeElement === submitButton);
+          });
         }
-        // Reset flag after a short delay in case submission fails/is prevented
-        setTimeout(() => {
+
+        // Handle form submission separately
+        if (inputElement && form) {
+          isSubmitting = true;
+          inputElement.value = inputValueTemplate(confirmedValue);
+          inputElement.dataset.autocompleteAccepted = "true"; // Set tracking attribute
+
+          // Submit form immediately
+          console.log('Submitting form'); // Debug log
+          if (form.requestSubmit) {
+            form.requestSubmit();
+          } else {
+            form.submit(); // Fallback for older browsers
+          }
+          
+          // Reset flag after submission
           isSubmitting = false;
-        }, 500);
+        }
       };
 
       // Initialise accessible-autocomplete
@@ -406,6 +467,8 @@
         inputClasses: searchInput.classList, // Pass original classes directly
         source: finalSourceFunction,
         minLength: minLength,
+        autoselect: autoselect,
+        hintClasses: hideHint ? "hidden-hint" : "",
         confirmOnBlur: confirmOnBlur,
         showNoOptionsFound: showNoOptionsFound,
         defaultValue: defaultValue,
@@ -430,10 +493,8 @@
       const autocompleteInputElement = containerElement?.querySelector(
         ".gem-c-search-with-autocomplete__input",
       ) as HTMLInputElement | null;
-      // console.log(
-      //   "SearchAutocomplete: Input element queried from DOM:",
-      //   autocompleteInputElement,
-      // ); // Updated log
+
+      // Apply hint visibility classes via hintClasses API
 
       // Post-initialisation tweaks
       if (autocompleteInputElement) {
@@ -446,6 +507,13 @@
         // Listen for input changes on the autocomplete field
         autocompleteInputElement.addEventListener("input", () => {
           const val = autocompleteInputElement.value;
+          
+          // Reset isSubmitting flag when user starts typing again
+          if (isSubmitting) {
+            console.log('User typing, resetting isSubmitting flag');
+            isSubmitting = false;
+          }
+          
           // Remove any existing 'too-short' warning before adding a new one to ensure we don't accumulate multiple warning items.
           suggestionsMenu
             ?.querySelector(
@@ -539,6 +607,64 @@
       position: relative;
     }
 
+    /* Hide hint when requested via hintClasses - must come AFTER the default styling for proper cascade */
+    .gem-c-search-with-autocomplete
+      .gem-c-search-with-autocomplete__hint.hidden-hint {
+      display: none !important;
+      visibility: hidden !important;
+    }
+
+    /* Default hint styling when visible - ensure smooth overlapping with main input */
+    .gem-c-search-with-autocomplete .gem-c-search-with-autocomplete__hint {
+      /* Use identical positioning and sizing as main input */
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      z-index: 99 !important;
+
+      /* Visual styling for hint */
+      color: rgba(0, 0, 0, 0.4);
+      background: transparent;
+      pointer-events: none;
+
+      /* Copy EXACT styling from main input */
+      margin: 0;
+      width: 100%;
+      height: 2.1052631579em;
+      padding: 0.3157894737em;
+      border: 2px solid transparent; /* Transparent instead of visible */
+      border-radius: 0;
+      box-sizing: border-box;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      font-family: "GDS Transport", arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      font-weight: 400;
+      font-size: 1.1875rem;
+      line-height: 1.4736842105;
+
+      /* Text alignment */
+      text-align: left;
+      white-space: nowrap;
+      overflow: hidden;
+
+      /* Ensure visibility - but allow hidden-hint to override */
+      display: block;
+      visibility: visible;
+      opacity: 1;
+    }
+
+    /* Custom focus styles for submit button (when focused after autocomplete selection) */
+    .gem-c-search-with-autocomplete .gem-c-search__submit:focus {
+      background-color: #ffdd00; /* GDS focus yellow */
+      border-color: #0b0c0c; /* GDS text color for contrast */
+      color: #0b0c0c; /* Dark text on yellow background */
+      outline: 3px solid #ffdd00;
+      outline-offset: 0;
+    }
+
     .gem-c-search-with-autocomplete__menu {
       margin: 0;
       padding: 0;

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

@@ -36,6 +36,10 @@ type Props = {
     hint?: string;
     selectedValue?: any;
     maxSuggestions?: number;
+    autoselect?: boolean;
+    hideHint?: boolean;
+    prefixMatchOnly?: boolean;
+    autoFocusSubmitOnSelection?: boolean;
 };
 declare const SearchAutocomplete: import("svelte").Component<Props, {}, "selectedValue">;
 type SearchAutocomplete = ReturnType<typeof SearchAutocomplete>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@communitiesuk/svelte-component-library",
-  "version": "0.1.19-beta.1",
+  "version": "0.1.19-beta.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/communitiesuk/mhclg_svelte_component_library.git"