jcicl 0.0.42 → 0.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +2 -1
  2. package/base/ScrollContainer/ScrollContainer.d.ts +1 -1
  3. package/base/ScrollContainer/ScrollContainer.js +2 -2
  4. package/package.json +1 -1
  5. package/supercomposite/Nav/Nav.js +34 -26
  6. package/templates/AppContainer/AppContainer.js +4 -4
package/README.md CHANGED
@@ -19,7 +19,7 @@ import Nav, { NavProps } from 'jcicl/supercomposite/Nav';
19
19
  const Component: React.FC<ButtonProps> = ({ ...buttonProps }) => <Button {...buttonProps}>Johnson County Button</Button>;
20
20
  ```
21
21
 
22
- ### Adding the fonts
22
+ ### Adding the fonts and scrollbar styles
23
23
 
24
24
  In your project entry point (most likely `main.tsx`), add:
25
25
 
@@ -29,6 +29,7 @@ import '@fontsource/roboto/400.css';
29
29
  import '@fontsource/roboto/500.css';
30
30
  import '@fontsource/roboto/700.css';
31
31
  import '@fontsource/material-icons';
32
+ import 'overlayscrollbars/overlayscrollbars.css';
32
33
  ```
33
34
 
34
35
  Alternatively, add to project root `index.html` `<head />`:
package/base/ScrollContainer/ScrollContainer.d.ts CHANGED
@@ -2,7 +2,7 @@ export interface ScrollContainerProps {
2
2
  width?: string;
3
3
  height?: string;
4
4
  direction?: 'vertical' | 'horizontal' | 'all';
5
- style?: React.CSSProperties;
5
+ styles?: React.CSSProperties;
6
6
  }
7
7
  declare const ScrollContainer: React.FC<ScrollContainerProps & {
8
8
  children: React.ReactNode;
package/base/ScrollContainer/ScrollContainer.js CHANGED
@@ -1370,7 +1370,7 @@ const Bs = () => {
1370
1370
  children: t,
1371
1371
  width: n,
1372
1372
  height: e,
1373
- style: o,
1373
+ styles: o,
1374
1374
  direction: s = "vertical"
1375
1375
  }) => {
1376
1376
  const a = { style: {
@@ -1387,7 +1387,7 @@ const Bs = () => {
1387
1387
  autoHideDelay: 29
1388
1388
  }
1389
1389
  } };
1390
- return /* @__PURE__ */ zo(Zs, { defer: !0, ...a, children: t });
1390
+ return /* @__PURE__ */ zo(Zs, { ...a, children: t });
1391
1391
  };
1392
1392
  export {
1393
1393
  Js as default
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "jcicl",
3
3
  "private": false,
4
- "version": "0.0.42",
4
+ "version": "0.0.43",
5
5
  "description": "Component library for the websites of Johnson County Iowa",
6
6
  "license": "MIT",
7
7
  "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",
package/supercomposite/Nav/Nav.js CHANGED
@@ -1,29 +1,29 @@
1
- import { jsx as r, jsxs as u } from "react/jsx-runtime";
2
- import { useState as x } from "react";
3
- import { n as s, i as h } from "../../.chunks/emotion-styled.browser.esm.js";
4
- import o from "../../theme.js";
1
+ import { jsx as r, jsxs as m } from "react/jsx-runtime";
2
+ import { useState as u } from "react";
3
+ import { n as s, i as x } from "../../.chunks/emotion-styled.browser.esm.js";
4
+ import t from "../../theme.js";
5
5
  import g from "../../base/ScrollContainer/ScrollContainer.js";
6
6
  import { B as v } from "../../.chunks/ButtonBase.js";
7
7
  const C = s(v, {
8
- shouldForwardProp: (t) => h(t)
9
- })(({ active: t }) => ({
8
+ shouldForwardProp: (n) => x(n)
9
+ })(({ active: n }) => ({
10
10
  display: "flex",
11
11
  flexDirection: "column",
12
12
  alignItems: "center",
13
13
  justifyContent: "center",
14
14
  padding: "0 8px 8px 8px",
15
15
  transition: "313ms all ease-in-out",
16
- backgroundColor: t ? o.colors.sunlight : "transparent",
17
- boxShadow: t ? o.boxShadow.darkGreen : "none",
16
+ backgroundColor: n ? t.colors.sunlight : "transparent",
17
+ boxShadow: n ? t.boxShadow.darkGreen : "none",
18
18
  "&:hover, :focus-visible": {
19
19
  svg: {
20
- backgroundColor: o.colors.sunlight
20
+ backgroundColor: t.colors.sunlight
21
21
  }
22
22
  },
23
23
  svg: {
24
24
  fontSize: "2.1rem",
25
- fill: o.colors.darkGreen,
26
- backgroundColor: t ? o.colors.sunlight : "transparent",
25
+ fill: t.colors.darkGreen,
26
+ backgroundColor: n ? t.colors.sunlight : "transparent",
27
27
  borderRadius: "50%",
28
28
  padding: "8px",
29
29
  display: "flex",
@@ -35,10 +35,10 @@ const C = s(v, {
35
35
  fontFamily: "Roboto, sans-serif",
36
36
  fontSize: "12px",
37
37
  fontWeight: "bold",
38
- color: o.colors.darkGreen,
38
+ color: t.colors.darkGreen,
39
39
  textAlign: "center"
40
40
  }
41
- })), k = s("div")(({ navWidth: t }) => ({
41
+ })), k = s("div")(({ navWidth: n }) => ({
42
42
  display: "flex",
43
43
  flexDirection: "column",
44
44
  backgroundColor: "transparent",
@@ -47,22 +47,30 @@ const C = s(v, {
47
47
  maxHeight: "100%",
48
48
  flexShrink: 0,
49
49
  gap: "1rem",
50
- width: t
51
- })), H = ({
52
- navItems: t,
50
+ width: n
51
+ })), A = ({
52
+ navItems: n,
53
53
  activeRoute: i,
54
- navWidth: a = `${o.constants.navDefaultWidth}px`
54
+ navWidth: a = `${t.constants.navDefaultWidth}px`
55
55
  }) => {
56
- const [l, c] = x(""), d = (e, n) => {
57
- c(e), n();
56
+ const [l, c] = u(""), d = (e, o) => {
57
+ c(e), o();
58
58
  }, p = { navWidth: a };
59
- return /* @__PURE__ */ r(g, { style: { maxHeight: `calc(100vh - ${o.constants.appHeaderHeight}px - 8px)` }, children: /* @__PURE__ */ r(k, { ...p, children: t.map(({ icon: e, label: n = "", onClick: m = () => {
60
- }, ...f }) => /* @__PURE__ */ u(C, { ...f, active: i ? i === n : l === n, onClick: () => d(n, m), children: [
61
- e,
62
- /* @__PURE__ */ r("span", { children: n })
63
- ] }, n)) }) });
59
+ return /* @__PURE__ */ r(
60
+ g,
61
+ {
62
+ height: `calc(100vh - ${t.constants.appHeaderHeight}px - 8px)`,
63
+ width: `${t.constants.navDefaultWidth}px`,
64
+ styles: { minWidth: `${t.constants.navDefaultWidth}px` },
65
+ children: /* @__PURE__ */ r(k, { ...p, children: n.map(({ icon: e, label: o = "", onClick: f = () => {
66
+ }, ...h }) => /* @__PURE__ */ m(C, { ...h, active: i ? i === o : l === o, onClick: () => d(o, f), children: [
67
+ e,
68
+ /* @__PURE__ */ r("span", { children: o })
69
+ ] }, o)) })
70
+ }
71
+ );
64
72
  };
65
73
  export {
66
- H as Nav,
67
- H as default
74
+ A as Nav,
75
+ A as default
68
76
  };
package/templates/AppContainer/AppContainer.js CHANGED
@@ -22,7 +22,7 @@ const x = d("div")({
22
22
  padding: "4px 2px",
23
23
  paddingLeft: 0,
24
24
  height: `calc(100% - ${o.constants.appHeaderHeight}px - 8px)`
25
- }), h = d("div")(({ withActionsPanel: r }) => ({
25
+ }), f = d("div")(({ withActionsPanel: r }) => ({
26
26
  display: "flex",
27
27
  flexDirection: "column",
28
28
  opacity: r ? 1 : 0,
@@ -39,7 +39,7 @@ const x = d("div")({
39
39
  ...!r && {
40
40
  border: "none"
41
41
  }
42
- })), f = d("div")(({ withActionsPanel: r }) => ({
42
+ })), h = d("div")(({ withActionsPanel: r }) => ({
43
43
  display: "flex",
44
44
  backgroundColor: o.colors.whiteGreen,
45
45
  borderRadius: "4px",
@@ -63,8 +63,8 @@ const x = d("div")({
63
63
  /* @__PURE__ */ e(l, { ...p }),
64
64
  /* @__PURE__ */ n(m, { children: [
65
65
  /* @__PURE__ */ e(s, { ...r }),
66
- /* @__PURE__ */ e(h, { withActionsPanel: t, children: /* @__PURE__ */ e(c, { height: "calc(100% - 2px - 2rem)", children: i && i }) }),
67
- /* @__PURE__ */ e(f, { withActionsPanel: t, children: a })
66
+ /* @__PURE__ */ e(f, { withActionsPanel: t, children: /* @__PURE__ */ e(c, { children: i && i }) }),
67
+ /* @__PURE__ */ e(h, { withActionsPanel: t, children: a })
68
68
  ] })
69
69
  ] });
70
70
  };