jcicl 0.0.112 → 0.0.114

package/Nav/Nav.js

@@ -1,58 +1,60 @@
-import { jsx as s, jsxs as x } from "react/jsx-runtime";
-import { useState as u } from "react";
-import { n as c, i as h } from "../.chunks/emotion-styled.browser.esm.js";
-import r from "../theme.js";
-import g from "../ScrollContainer/ScrollContainer.js";
+import { jsx as a, jsxs as y } from "react/jsx-runtime";
+import { useState as v } from "react";
+import { n as c, i as C } from "../.chunks/emotion-styled.browser.esm.js";
+import d from "../theme.js";
+import S from "../ScrollContainer/ScrollContainer.js";
 import { B as k } from "../.chunks/ButtonBase.js";
-const C = c(k, {
-  shouldForwardProp: (n) => h(n)
-})(({ active: n, isTablet: o }) => ({
-  display: "flex",
-  flexDirection: o ? "row" : "column",
-  alignItems: "center",
-  justifyContent: o ? "flex-start" : "center",
-  width: "100%",
-  padding: o ? "16px" : "0 8px 8px 8px",
-  transition: "313ms all ease-in-out",
-  backgroundColor: n ? r.colors.sunlight : "transparent",
-  boxShadow: n ? r.boxShadow.darkGreen : "none",
-  ...o && {
-    gap: "0.5rem"
-  },
-  "&:hover, :focus-visible": {
-    svg: {
-      ...!o && {
-        backgroundColor: r.colors.sunlight
-      }
-    },
-    ...o && {
-      boxShadow: r.boxShadow.darkGreen,
-      backgroundColor: `${r.colors.dandelion}99`
-    }
-  },
-  svg: {
-    fontSize: "2.1rem",
-    fill: r.colors.darkGreen,
-    backgroundColor: "transparent",
-    borderRadius: "50%",
-    padding: "8px",
+const w = c(k, {
+  shouldForwardProp: (o) => C(o)
+})(
+  ({ active: o, isTablet: t, highlight1: r, highlight3: i, iconColor: e }) => ({
     display: "flex",
+    flexDirection: t ? "row" : "column",
     alignItems: "center",
-    justifyContent: "center",
-    transition: "313ms all ease-in-out"
-  },
-  span: {
-    fontFamily: "Roboto, sans-serif",
-    fontSize: "12px",
-    fontWeight: "bold",
-    color: r.colors.darkGreen,
-    textAlign: "center",
-    ...o && {
-      fontSize: "1.5rem",
-      fontWeight: "500"
+    justifyContent: t ? "flex-start" : "center",
+    width: "100%",
+    padding: t ? "16px" : "0 8px 8px 8px",
+    transition: "313ms all ease-in-out",
+    backgroundColor: o ? r : "transparent",
+    boxShadow: o ? e : "none",
+    ...t && {
+      gap: "0.5rem"
+    },
+    "&:hover, :focus-visible": {
+      svg: {
+        ...!t && {
+          backgroundColor: r
+        }
+      },
+      ...t && {
+        boxShadow: d.boxShadow.darkGreen,
+        backgroundColor: i
+      }
+    },
+    svg: {
+      fontSize: "2.1rem",
+      fill: e,
+      backgroundColor: "transparent",
+      borderRadius: "50%",
+      padding: "8px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transition: "313ms all ease-in-out"
+    },
+    span: {
+      fontFamily: "Roboto, sans-serif",
+      fontSize: "12px",
+      fontWeight: "bold",
+      color: e,
+      textAlign: "center",
+      ...t && {
+        fontSize: "1.5rem",
+        fontWeight: "500"
+      }
     }
-  }
-})), v = c("div")(({ navWidth: n, isTablet: o }) => ({
+  })
+), P = c("div")(({ navWidth: o, isTablet: t }) => ({
   display: "flex",
   flexDirection: "column",
   backgroundColor: "transparent",
@@ -60,34 +62,38 @@ const C = c(k, {
   justifyContent: "flex-start",
   maxHeight: "100%",
   flexShrink: 0,
-  gap: o ? 0 : "1rem",
-  width: n
-})), z = ({
-  navItems: n,
-  activeRoute: o,
-  navWidth: e = `${r.constants.navDefaultWidth}px`,
-  isTablet: a
+  gap: t ? 0 : "1rem",
+  width: o
+})), W = ({
+  navItems: o,
+  activeRoute: t,
+  navWidth: r = `${d.constants.navDefaultWidth}px`,
+  isTablet: i,
+  themeColors: e
 }) => {
-  const [d, l] = u(""), p = (i, t) => {
-    l(i), t();
-  };
-  return /* @__PURE__ */ s(g, { direction: "vertical", width: e, styles: { minWidth: e }, children: /* @__PURE__ */ s(v, { ...{ navWidth: e, isTablet: a }, children: n.map(({ icon: i, label: t = "", onClick: f = () => {
-  }, ...m }) => /* @__PURE__ */ x(
-    C,
+  const [l, p] = v(""), m = (s, n) => {
+    p(s), n();
+  }, { highlightPrimary: f, highlightTertiary: h, iconPrimary: g } = e;
+  return /* @__PURE__ */ a(S, { direction: "vertical", width: r, styles: { minWidth: r }, children: /* @__PURE__ */ a(P, { ...{ navWidth: r, isTablet: i }, children: o.map(({ icon: s, label: n = "", onClick: x = () => {
+  }, ...u }) => /* @__PURE__ */ y(
+    w,
     {
-      ...m,
-      active: o ? o === t : d === t,
-      onClick: () => p(t, f),
-      isTablet: a,
+      ...u,
+      active: t ? t === n : l === n,
+      onClick: () => m(n, x),
+      isTablet: i,
+      highlight1: f,
+      highlight3: h,
+      iconColor: g,
       children: [
-        i,
-        /* @__PURE__ */ s("span", { children: t })
+        s,
+        /* @__PURE__ */ a("span", { children: n })
       ]
     },
-    t
+    n
   )) }) });
 };
 export {
-  z as Nav,
-  z as default
+  W as Nav,
+  W as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.112",
+  "version": "0.0.114",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",

package/theme.d.ts

@@ -3,6 +3,8 @@ export interface ThemeColors {
     blue: string;
     burgundy: string;
     charcoal: string;
+    cobalt: string;
+    cornflower: string;
     dandelion: string;
     darkBlue: string;
     darkerGreen: string;
@@ -18,11 +20,14 @@ export interface ThemeColors {
     indigo: string;
     lighterRed: string;
     lightRed: string;
+    lovemist: string;
     maroon: string;
     midnight: string;
     mint: string;
+    ocean: string;
     purple: string;
     sage: string;
+    sky: string;
     sunlight: string;
     veryLightGray: string;
     veryLightGrayO33: string;

package/theme.js

@@ -5,6 +5,8 @@ const e = {
     blue: "#1976d2",
     burgundy: "#920920",
     charcoal: "#404040",
+    cobalt: "#022961",
+    cornflower: "#6aa7fc",
     dandelion: "#fffacd",
     darkBlue: "#10517c",
     darkerGreen: "#124000",
@@ -20,11 +22,14 @@ const e = {
     indigo: "#4105c1",
     lighterRed: "#ffcccc",
     lightRed: "#eda4a4",
+    lovemist: "#90c5f7",
     maroon: "#5c0000",
     midnight: "#131313",
     mint: "#a4edb4",
+    ocean: "#279fcf",
     purple: "#920092",
     sage: "#bdd5c1",
+    sky: "#b3e0f2",
     sunlight: "#faf9e8",
     veryLightGray: "#fafafa",
     veryLightGrayO33: "#fafafa33",