@nswds/app 1.87.14 → 1.89.0

package/dist/index.cjs

@@ -17557,7 +17557,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.87.0"};
+  version: "1.88.0"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -30428,40 +30428,56 @@ function ThemeColorPaletteLoading() {
     ] }, i)) })
   ] });
 }
-function getInitialThemeState(searchParams) {
+function getInitialThemeState(searchParams, defaults) {
   const themeParam = searchParams.get("theme");
   const primaryParam = searchParams.get("primary");
   const accentParam = searchParams.get("accent");
-  const themeCategory = themeParam === "aboriginal" ? "aboriginal" : "brand";
-  let primaryColor = "blue";
-  let accentColor = "red";
-  const availableColors = Object.keys(colorThemes[themeCategory]);
-  if (primaryParam && availableColors.includes(primaryParam)) {
+  const themeCategory = themeParam === "aboriginal" || themeParam === "brand" ? themeParam : defaults?.themeCategory ?? "brand";
+  function pickFirst(arr) {
+    return arr.length > 0 ? arr[0] : null;
+  }
+  function pickFirstNot(arr, not) {
+    return arr.find((x) => x !== not) ?? null;
+  }
+  const availableColors = Object.keys(colorThemes[themeCategory] ?? {});
+  const availableNonGreyColors = availableColors.filter((c) => !c.toLowerCase().includes("grey"));
+  let primaryColor = defaults?.primaryColor ?? "blue";
+  let accentColor = defaults?.accentColor ?? "red";
+  if (primaryParam && availableNonGreyColors.includes(primaryParam)) {
     primaryColor = primaryParam;
-  } else if (!availableColors.includes(primaryColor)) {
-    primaryColor = availableColors[0];
+  } else if (!availableNonGreyColors.includes(primaryColor)) {
+    const fallback = pickFirst(availableNonGreyColors);
+    if (fallback) primaryColor = fallback;
   }
-  if (accentParam && availableColors.includes(accentParam) && accentParam !== primaryColor) {
+  if (accentParam && availableNonGreyColors.includes(accentParam) && accentParam !== primaryColor) {
     accentColor = accentParam;
   } else {
-    const newAccent = availableColors.find((c) => c !== primaryColor);
-    if (newAccent) accentColor = newAccent;
+    const defaultAccentOk = availableNonGreyColors.includes(accentColor) && accentColor !== primaryColor;
+    if (!defaultAccentOk) {
+      const fallback = pickFirstNot(availableNonGreyColors, primaryColor);
+      if (fallback) accentColor = fallback;
+    }
   }
-  const neutralKey = Object.keys(colorThemes[themeCategory]).find((k) => k.toLowerCase().includes("grey")) ?? "grey";
+  const neutralKey = Object.keys(colorThemes[themeCategory]).find((k) => k.toLowerCase().includes("grey")) ?? defaults?.greyColor ?? "grey";
   return { themeCategory, primaryColor, accentColor, greyColor: neutralKey };
 }
-function ThemeColorPaletteContent() {
+function ThemeColorPaletteContent(props) {
   const searchParams = navigation.useSearchParams();
-  const baseColors = {
-    brand,
-    aboriginal
-  };
   const {
     themeCategory: initialThemeCategory,
     primaryColor: initialPrimaryColor,
     accentColor: initialAccentColor,
     greyColor: initialGreyColor
-  } = getInitialThemeState(searchParams);
+  } = getInitialThemeState(searchParams, {
+    themeCategory: props.defaultThemeCategory,
+    primaryColor: props.defaultPrimaryColor,
+    accentColor: props.defaultAccentColor,
+    greyColor: props.defaultGreyColor
+  });
+  const baseColors = {
+    brand,
+    aboriginal
+  };
   const [format, setFormat] = React5.useState("hex");
   const [viewMode, setViewMode] = React5.useState("grid");
   const [themeCategory, setThemeCategory] = React5.useState(initialThemeCategory);
@@ -30602,8 +30618,9 @@ function ThemeColorPaletteContent() {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-12", children: currentColorPalette.map((theme2) => {
       const baseKey = theme2.name === "Primary" ? primaryColor : theme2.name === "Accent" ? accentColor : "grey";
+      const headingId = theme2.name.toLowerCase().trim().replace(/\s+/g, "-");
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold", children: theme2.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { id: headingId, className: "text-2xl font-semibold", children: theme2.name }),
         /* @__PURE__ */ jsxRuntime.jsx(BaseColorSwatches, { baseColors: baseColors[themeCategory][baseKey], format }),
         /* @__PURE__ */ jsxRuntime.jsx(ColourScale, { colorsToUse: theme2.colors }),
         /* @__PURE__ */ jsxRuntime.jsx(ColorSwatches, { theme: theme2.colors, format, viewMode })
@@ -30611,8 +30628,8 @@ function ThemeColorPaletteContent() {
     }) })
   ] });
 }
-function ThemeColorPalette() {
-  return /* @__PURE__ */ jsxRuntime.jsx(React5.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ThemeColorPaletteLoading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(ThemeColorPaletteContent, {}) });
+function ThemeColorPalette(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(React5.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ThemeColorPaletteLoading, {}), children: /* @__PURE__ */ jsxRuntime.jsx(ThemeColorPaletteContent, { ...props }) });
 }
 function ThemeProvider({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(nextThemes.ThemeProvider, { ...props, children });