jcicl 0.0.26 → 0.0.28
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.
- package/README.md +4 -0
- package/composite/List/List.d.ts +1 -3
- package/composite/List/List.js +22 -47
- package/composite/List/ListButton.d.ts +10 -0
- package/composite/List/ListButton.js +30 -0
- package/composite/List/index.d.ts +1 -0
- package/composite/List/index.js +4 -2
- package/composite/index.js +5 -4
- package/index.js +25 -24
- package/package.json +1 -23
- package/templates/AppContainer/AppContainer.js +5 -6
package/README.md
CHANGED
|
@@ -88,3 +88,7 @@ Templates are intended to render the HTML for predefined page layouts comprised
|
|
|
88
88
|
### Publishing the library
|
|
89
89
|
|
|
90
90
|
`npm run bp`
|
|
91
|
+
|
|
92
|
+
- Versions, builds, and publishes the library to the npm registry
|
|
93
|
+
|
|
94
|
+
For more details on scripting commands, please see the [npm CLI documentation](https://docs.npmjs.com/cli/v9/commands)
|
package/composite/List/List.d.ts
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { default as React, PropsWithChildren } from 'react';
|
|
2
|
-
|
|
3
|
-
export interface ListProps extends ButtonBaseProps {
|
|
4
|
-
interactable?: boolean;
|
|
2
|
+
export interface ListProps {
|
|
5
3
|
width?: string;
|
|
6
4
|
padding?: string;
|
|
7
5
|
borderColor?: string;
|
package/composite/List/List.js
CHANGED
|
@@ -1,64 +1,39 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { n as
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
({ width: e, borderColor: o, bordered: n }) => ({
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import a from "react";
|
|
3
|
+
import { n as i } from "../../.chunks/emotion-styled.browser.esm.js";
|
|
4
|
+
import l from "../../theme.js";
|
|
5
|
+
const m = i("div")(
|
|
6
|
+
({ width: o, borderColor: e, bordered: t }) => ({
|
|
8
7
|
display: "flex",
|
|
9
8
|
flexDirection: "column",
|
|
10
9
|
fontFamily: "Roboto, sans-serif",
|
|
11
10
|
listStyleType: "none",
|
|
12
|
-
...
|
|
11
|
+
...t && { border: `1px solid ${e}` },
|
|
13
12
|
borderRadius: "4px",
|
|
14
13
|
overflow: "hidden",
|
|
15
14
|
pointerEvents: "none",
|
|
16
|
-
...
|
|
17
|
-
width:
|
|
15
|
+
...o && {
|
|
16
|
+
width: o
|
|
18
17
|
}
|
|
19
18
|
})
|
|
20
|
-
),
|
|
21
|
-
({ padding:
|
|
22
|
-
backgroundColor:
|
|
23
|
-
padding:
|
|
24
|
-
...
|
|
25
|
-
borderBottom: `1px solid ${
|
|
19
|
+
), c = i("div")(
|
|
20
|
+
({ padding: o, borderColor: e, bordered: t }) => ({
|
|
21
|
+
backgroundColor: l.colors.white,
|
|
22
|
+
padding: o,
|
|
23
|
+
...t && {
|
|
24
|
+
borderBottom: `1px solid ${e}`,
|
|
26
25
|
"&:last-child": {
|
|
27
26
|
borderBottom: "none"
|
|
28
27
|
}
|
|
29
28
|
}
|
|
30
29
|
})
|
|
31
|
-
), h =
|
|
32
|
-
({ borderColor: e, bordered: o }) => ({
|
|
33
|
-
...o && { borderBottom: `1px solid ${e}` },
|
|
34
|
-
fontSize: "inherit",
|
|
35
|
-
pointerEvents: "all",
|
|
36
|
-
"&:last-child": {
|
|
37
|
-
borderBottom: "none"
|
|
38
|
-
},
|
|
39
|
-
span: {
|
|
40
|
-
transition: "201ms all ease-in-out"
|
|
41
|
-
},
|
|
42
|
-
"&:hover": {
|
|
43
|
-
span: {
|
|
44
|
-
boxShadow: `inset 0px -11px 3px -10px ${t.colors.green}, inset 0px 11px 3px -10px ${t.colors.green}`
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
"&:focus": {
|
|
48
|
-
span: {
|
|
49
|
-
boxShadow: `inset 0px -11px 3px -10px ${t.colors.darkGreen}, inset 0px 11px 3px -10px ${t.colors.darkGreen}`
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
})
|
|
53
|
-
), y = ({
|
|
54
|
-
interactable: e = !1,
|
|
30
|
+
), h = ({
|
|
55
31
|
bordered: o = !1,
|
|
56
|
-
width:
|
|
57
|
-
padding:
|
|
58
|
-
borderColor:
|
|
59
|
-
children:
|
|
60
|
-
|
|
61
|
-
}) => e ? /* @__PURE__ */ r(d, { width: n, borderColor: s, bordered: o, children: x.Children.map(a, (i) => /* @__PURE__ */ r(h, { borderColor: s, bordered: o, ...c, children: /* @__PURE__ */ r(m, { padding: p, borderColor: "transparent", bordered: !1, children: i }) })) }) : /* @__PURE__ */ r(d, { width: n, borderColor: s, bordered: o, children: x.Children.map(a, (i) => /* @__PURE__ */ r(m, { padding: p, borderColor: s, bordered: o, children: i })) });
|
|
32
|
+
width: e,
|
|
33
|
+
padding: t = "0",
|
|
34
|
+
borderColor: r = l.colors.darkGreen,
|
|
35
|
+
children: s
|
|
36
|
+
}) => /* @__PURE__ */ n(m, { width: e, borderColor: r, bordered: o, children: a.Children.map(s, (d) => /* @__PURE__ */ n(c, { padding: t, borderColor: r, bordered: o, children: d })) });
|
|
62
37
|
export {
|
|
63
|
-
|
|
38
|
+
h as default
|
|
64
39
|
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ButtonBaseProps } from '@mui/material/ButtonBase/ButtonBase';
|
|
2
|
+
export interface ListButtonProps extends ButtonBaseProps {
|
|
3
|
+
padding?: string;
|
|
4
|
+
}
|
|
5
|
+
declare const ListButton: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonBaseOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
6
|
+
ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
|
|
7
|
+
}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
|
|
8
|
+
theme?: import('@emotion/react').Theme;
|
|
9
|
+
} & ListButtonProps, {}, {}>;
|
|
10
|
+
export default ListButton;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { n as o } from "../../.chunks/emotion-styled.browser.esm.js";
|
|
2
|
+
import e from "../../theme.js";
|
|
3
|
+
import { B as n } from "../../.chunks/ButtonBase.js";
|
|
4
|
+
const x = o(n)(({ padding: t = "1rem" }) => ({
|
|
5
|
+
width: "100%",
|
|
6
|
+
height: "100%",
|
|
7
|
+
padding: t,
|
|
8
|
+
fontSize: "inherit",
|
|
9
|
+
pointerEvents: "all",
|
|
10
|
+
justifyContent: "flex-start",
|
|
11
|
+
"*": {
|
|
12
|
+
pointerEvents: "none"
|
|
13
|
+
},
|
|
14
|
+
span: {
|
|
15
|
+
transition: "201ms all ease-in-out"
|
|
16
|
+
},
|
|
17
|
+
"&:hover": {
|
|
18
|
+
span: {
|
|
19
|
+
boxShadow: `inset 0px -11px 3px -10px ${e.colors.green}, inset 0px 11px 3px -10px ${e.colors.green}`
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"&:focus": {
|
|
23
|
+
span: {
|
|
24
|
+
boxShadow: `inset 0px -11px 3px -10px ${e.colors.darkGreen}, inset 0px 11px 3px -10px ${e.colors.darkGreen}`
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}));
|
|
28
|
+
export {
|
|
29
|
+
x as default
|
|
30
|
+
};
|
package/composite/List/index.js
CHANGED
package/composite/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { default as
|
|
2
|
-
import
|
|
1
|
+
import { default as o } from "./List/List.js";
|
|
2
|
+
import "./List/ListButton.js";
|
|
3
|
+
import { default as f } from "./WithLabel/WithLabel.js";
|
|
3
4
|
export {
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
o as List,
|
|
6
|
+
f as WithLabel
|
|
6
7
|
};
|
package/index.js
CHANGED
|
@@ -1,28 +1,29 @@
|
|
|
1
|
-
import { default as
|
|
2
|
-
import { AvatarWithImage as
|
|
3
|
-
import { Button as
|
|
4
|
-
import { Divider as
|
|
5
|
-
import { default as
|
|
6
|
-
import { Grid as
|
|
1
|
+
import { default as f } from "./base/Avatar/Avatar.js";
|
|
2
|
+
import { AvatarWithImage as m } from "./base/AvatarWithImage/AvatarWithImage.js";
|
|
3
|
+
import { Button as i } from "./base/Button/Button.js";
|
|
4
|
+
import { Divider as l } from "./base/Divider/Divider.js";
|
|
5
|
+
import { default as u } from "./base/Flex/Flex.js";
|
|
6
|
+
import { Grid as A } from "./base/Grid/Grid.js";
|
|
7
7
|
import "./base/Input/Input.js";
|
|
8
|
-
import { default as
|
|
9
|
-
import
|
|
8
|
+
import { default as g } from "./composite/List/List.js";
|
|
9
|
+
import "./composite/List/ListButton.js";
|
|
10
|
+
import { default as B } from "./composite/WithLabel/WithLabel.js";
|
|
10
11
|
import "./supercomposite/AppBar/AppBar.js";
|
|
11
|
-
import { default as
|
|
12
|
-
import { Nav as
|
|
13
|
-
import { default as
|
|
14
|
-
import { default as
|
|
12
|
+
import { default as W } from "./supercomposite/AppHeader/AppHeader.js";
|
|
13
|
+
import { Nav as c } from "./supercomposite/Nav/Nav.js";
|
|
14
|
+
import { default as D } from "./templates/AppContainer/AppContainer.js";
|
|
15
|
+
import { default as G } from "./templates/BasicPage/BasicPage.js";
|
|
15
16
|
export {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
D as AppContainer,
|
|
18
|
+
W as AppHeader,
|
|
19
|
+
f as Avatar,
|
|
20
|
+
m as AvatarWithImage,
|
|
21
|
+
G as BasicPage,
|
|
22
|
+
i as Button,
|
|
23
|
+
l as Divider,
|
|
24
|
+
u as Flex,
|
|
25
|
+
A as Grid,
|
|
26
|
+
g as List,
|
|
27
|
+
c as Nav,
|
|
28
|
+
B as WithLabel
|
|
28
29
|
};
|
package/package.json
CHANGED
|
@@ -1,23 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "jcicl",
|
|
3
|
-
"private": false,
|
|
4
|
-
"version": "0.0.26",
|
|
5
|
-
"description": "Component library for the websites of Johnson County Iowa",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",
|
|
8
|
-
"repository": {
|
|
9
|
-
"type": "git",
|
|
10
|
-
"url": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary"
|
|
11
|
-
},
|
|
12
|
-
"bugs": {
|
|
13
|
-
"url": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary"
|
|
14
|
-
},
|
|
15
|
-
"dependencies": {
|
|
16
|
-
"@emotion/react": "^11.13.3",
|
|
17
|
-
"@emotion/styled": "^11.13.0",
|
|
18
|
-
"@fontsource/material-icons": "^5.1.0",
|
|
19
|
-
"@fontsource/roboto": "^5.1.0",
|
|
20
|
-
"@mui/icons-material": "^6.1.3",
|
|
21
|
-
"@mui/material": "^6.1.1"
|
|
22
|
-
}
|
|
23
|
-
}
|
|
1
|
+
{"name":"jcicl","private":false,"version":"0.0.28","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","repository":{"type":"git","url":"https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary"},"bugs":{"url":"https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary"},"dependencies":{"@emotion/react":"^11.13.3","@emotion/styled":"^11.13.0","@fontsource/material-icons":"^5.1.0","@fontsource/roboto":"^5.1.0","@mui/icons-material":"^6.1.3","@mui/material":"^6.1.1"}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as p, jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import l from "../../supercomposite/AppHeader/AppHeader.js";
|
|
3
3
|
import { Nav as s } from "../../supercomposite/Nav/Nav.js";
|
|
4
4
|
import { n as d } from "../../.chunks/emotion-styled.browser.esm.js";
|
|
5
5
|
import o from "../../theme.js";
|
|
@@ -33,13 +33,12 @@ const c = d("div")({
|
|
|
33
33
|
height: r ? "calc(100% - 32px)" : "100%",
|
|
34
34
|
padding: r ? "1rem" : 0,
|
|
35
35
|
backgroundColor: o.colors.darkGreenO22,
|
|
36
|
-
color: o.colors.white,
|
|
37
36
|
width: r ? "400px" : 0,
|
|
38
37
|
transition: "313ms all ease-in-out",
|
|
39
38
|
...!r && {
|
|
40
39
|
border: "none"
|
|
41
40
|
}
|
|
42
|
-
})),
|
|
41
|
+
})), m = d("div")(({ withActionsPanel: r }) => ({
|
|
43
42
|
display: "flex",
|
|
44
43
|
backgroundColor: o.colors.whiteGreen,
|
|
45
44
|
borderRadius: "4px",
|
|
@@ -56,15 +55,15 @@ const c = d("div")({
|
|
|
56
55
|
navProps: r,
|
|
57
56
|
appHeaderProps: a,
|
|
58
57
|
actionsPanelContent: e,
|
|
59
|
-
children:
|
|
58
|
+
children: n
|
|
60
59
|
}) => {
|
|
61
60
|
const t = e != null;
|
|
62
61
|
return /* @__PURE__ */ p(c, { children: [
|
|
63
|
-
/* @__PURE__ */ i(
|
|
62
|
+
/* @__PURE__ */ i(l, { ...a }),
|
|
64
63
|
/* @__PURE__ */ p(x, { children: [
|
|
65
64
|
/* @__PURE__ */ i(s, { ...r }),
|
|
66
65
|
/* @__PURE__ */ i(f, { withActionsPanel: t, children: e && e }),
|
|
67
|
-
/* @__PURE__ */ i(
|
|
66
|
+
/* @__PURE__ */ i(m, { withActionsPanel: t, children: n })
|
|
68
67
|
] })
|
|
69
68
|
] });
|
|
70
69
|
};
|