jcicl 0.0.114 → 0.0.118

package/ImageWIthDetails/ImageWithDetails.js

@@ -0,0 +1,49 @@
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { n as r } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as n } from "../.chunks/emotion-react.browser.esm.js";
+import e from "../theme.js";
+const f = r("div")(({ height: o }) => ({
+  ...n`
+    display: flex;
+    flex-direction: column;
+    border-radius: 32px;
+    box-sizing: border-box;
+    height: ${o};
+    box-shadow: ${e.boxShadows.gray63};
+    background-color: ${e.colors.white};
+    width: min-content;
+  `
+})), a = r("div")(({ height: o, padding: t }) => ({
+  ...n`
+    font-family: ${e.fonts.roboto};
+    display: flex;
+    padding: ${t};
+    align-items: center;
+    justify-content: center;
+    height: ${o};
+    box-sizing: border-box;
+  `
+})), x = r("img")(({ heightOffset: o }) => ({
+  ...n`
+    max-height: calc(100% - 2 * ${o});
+    object-fit: contain;
+  `
+})), y = ({
+  title: o,
+  description: t,
+  imageUrl: d,
+  imageAlt: h,
+  detailsBarSize: s = "120px",
+  detailsBarPadding: l = "1rem",
+  containerHeight: m = "100%"
+}) => {
+  const c = { height: s, padding: l };
+  return /* @__PURE__ */ g(f, { height: m, children: [
+    /* @__PURE__ */ i(a, { ...c, children: o }),
+    /* @__PURE__ */ i(x, { heightOffset: s, src: d, alt: h }),
+    /* @__PURE__ */ i(a, { ...c, children: t })
+  ] });
+};
+export {
+  y as default
+};

package/ImageWIthDetails/index.d.ts

@@ -0,0 +1 @@
+export { default, type ImageWithDetailsProps } from './ImageWithDetails';

package/ImageWIthDetails/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./ImageWithDetails.js";
+export {
+  o as default
+};

package/InfoCard/InfoCard.js

@@ -33,16 +33,16 @@ const x = d("div")(({ padding: r, shadow: o, styles: e }) => ({
   title: o,
   items: e,
   padding: m = "1rem 2rem",
-  shadow: c = l.boxShadow.darkGreen,
-  spacing: s = "2rem",
+  shadow: s = l.boxShadows.darkGreen,
+  spacing: c = "2rem",
   columns: p = 3,
   styles: f
-}) => /* @__PURE__ */ t(x, { ...{ padding: m, shadow: c, styles: f }, children: [
+}) => /* @__PURE__ */ t(x, { ...{ padding: m, shadow: s, styles: f }, children: [
   /* @__PURE__ */ t(g, { width: "100%", gap: "1rem", alignItems: "center", children: [
     r && r,
     /* @__PURE__ */ a("h3", { children: o })
   ] }),
-  /* @__PURE__ */ a(u, { ...{ spacing: s, columns: p }, children: e == null ? void 0 : e.map((n) => /* @__PURE__ */ a(h, { ...n }, n.label)) })
+  /* @__PURE__ */ a(u, { ...{ spacing: c, columns: p }, children: e == null ? void 0 : e.map((n) => /* @__PURE__ */ a(h, { ...n }, n.label)) })
 ] });
 export {
   j as InfoCard,

package/Nav/Nav.d.ts

@@ -21,7 +21,7 @@ export interface NavProps {
     activeRoute?: string;
     navWidth?: string;
     isTablet?: boolean;
-    themeColors: TemplateThemeProps;
+    themeColors: Pick<TemplateThemeProps, 'highlightPrimary' | 'highlightTertiary' | 'iconPrimary'>;
 }
 export declare const Nav: React.FC<NavProps>;
 export default Nav;

package/Nav/Nav.js

@@ -6,55 +6,53 @@ import S from "../ScrollContainer/ScrollContainer.js";
 import { B as k } from "../.chunks/ButtonBase.js";
 const w = c(k, {
   shouldForwardProp: (o) => C(o)
-})(
-  ({ active: o, isTablet: t, highlight1: r, highlight3: i, iconColor: e }) => ({
+})(({ active: o, isTablet: t, highlight1: r, highlight3: i, iconColor: e }) => ({
+  display: "flex",
+  flexDirection: t ? "row" : "column",
+  alignItems: "center",
+  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.boxShadows.darkGreen,
+      backgroundColor: i
+    }
+  },
+  svg: {
+    fontSize: "2.1rem",
+    fill: e,
+    backgroundColor: "transparent",
+    borderRadius: "50%",
+    padding: "8px",
     display: "flex",
-    flexDirection: t ? "row" : "column",
     alignItems: "center",
-    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",
+    justifyContent: "center",
+    transition: "313ms all ease-in-out"
+  },
+  span: {
+    fontFamily: "Roboto, sans-serif",
+    fontSize: "12px",
+    fontWeight: "bold",
+    color: e,
+    textAlign: "center",
     ...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"
-      }
+      fontSize: "1.5rem",
+      fontWeight: "500"
     }
-  })
-), P = c("div")(({ navWidth: o, isTablet: t }) => ({
+  }
+})), P = c("div")(({ navWidth: o, isTablet: t }) => ({
   display: "flex",
   flexDirection: "column",
   backgroundColor: "transparent",

package/Nav/index.d.ts

@@ -1 +1 @@
-export { default, type NavItemProps } from './Nav';
+export { default, type NavProps, type NavItemProps, type TemplateThemeProps } from './Nav';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.114",
+  "version": "0.0.118",
   "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

@@ -15,6 +15,7 @@ export interface ThemeColors {
     gold: string;
     gold2: string;
     gray: string;
+    gray2: string;
     grayO44: string;
     green: string;
     indigo: string;
@@ -51,11 +52,15 @@ export interface ThemeScreenSizes {
     mobile: string;
     tablet: string;
 }
+export interface ThemeFonts {
+    roboto: string;
+}
 export interface Theme {
-    boxShadow: ThemeBoxShadows;
+    boxShadows: ThemeBoxShadows;
     colors: ThemeColors;
     constants: ThemeConstants;
     screenSizes: ThemeScreenSizes;
+    fonts: ThemeFonts;
 }
 declare const theme: Theme;
 export default theme;

package/theme.js

@@ -1,5 +1,8 @@
 const e = {
-  boxShadow: {},
+  fonts: {
+    roboto: "Roboto, sans-serif"
+  },
+  boxShadows: {},
   colors: {
     black: "black",
     blue: "#1976d2",
@@ -17,6 +20,7 @@ const e = {
     gold: "#fab62d",
     gold2: "#fcba03",
     gray: "#727272",
+    gray2: "#dddddd",
     grayO44: "#72727244",
     green: "#009200",
     indigo: "#4105c1",
@@ -50,7 +54,7 @@ const e = {
     tablet: "963px"
   }
 };
-e.boxShadow = {
+e.boxShadows = {
   ...Object.fromEntries(
     Object.keys(e.colors).map((a) => [
       a,