@uva-glass/component-library 3.38.0 → 3.38.2
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/dist/assets/Accordion.css +1 -1
- package/dist/components/Accordion/Accordion.d.ts +3 -1
- package/dist/components/Accordion/Accordion.js +60 -39
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/Icon/icons/index.d.ts +18 -0
- package/dist/components/Icon/icons/index.js +224 -209
- package/dist/components/Icon/icons/index.js.map +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._accordion_19w0n_1{overflow:hidden;position:relative}._accordion__title_19w0n_6{align-items:center;display:flex;gap:.5rem}._accordion__title_19w0n_6:hover{cursor:pointer;text-decoration:underline}._accordion__title_19w0n_6:focus-visible{text-decoration:underline}._accordion__title-icon_19w0n_21,._accordion__title-icon-right_19w0n_22{transform:rotate(-90deg);transition:transform .3s ease-in;margin-right:.25rem}._accordion__title-icon--margin-0_19w0n_28{margin:0}._accordion__title-icon--margin-025_19w0n_32{margin:0 .25rem}._accordion__title-icon--margin-050_19w0n_36{margin:0 .5rem}._accordion__title-icon--margin-075_19w0n_40{margin:0 .75rem}._accordion__title-icon--margin-100_19w0n_44{margin:0 1rem}._accordion__title-icon--margin-150_19w0n_48{margin:0 1.5rem}._accordion__title-icon--margin-200_19w0n_52{margin:0 2rem}._accordion__title-icon-right_19w0n_22{margin-left:auto}._accordion__title-icon--expanded_19w0n_60,._accordion__title-icon-right--expanded_19w0n_61{transform:rotate(90deg);transition:transform .3s ease-out}._accordion__content_19w0n_66{display:none}._accordion__content--expanded_19w0n_70{display:block}
|
|
@@ -8,6 +8,8 @@ export interface AccordionProps {
|
|
|
8
8
|
expanded?: boolean;
|
|
9
9
|
/** Indicator for cheveron icon placement.*/
|
|
10
10
|
cheveronPlacement?: 'left' | 'right';
|
|
11
|
+
/** Indicator for cheveron icon margin. By default '050'. */
|
|
12
|
+
cheveronMargin?: '0' | '025' | '050' | '075' | '100' | '150' | '200';
|
|
11
13
|
}
|
|
12
14
|
/** A controller for accordion display toggling of content with click on a title. */
|
|
13
|
-
export declare const Accordion: ({ title, content, expanded, cheveronPlacement }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const Accordion: ({ title, content, expanded, cheveronPlacement, cheveronMargin, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,51 +1,72 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { c
|
|
3
|
-
import { useState as
|
|
4
|
-
import { Icon as
|
|
5
|
-
import '../../assets/Accordion.css';const
|
|
6
|
-
accordion:
|
|
7
|
-
accordion__title:
|
|
8
|
-
"accordion__title-icon": "_accordion__title-
|
|
9
|
-
"accordion__title-icon-right": "_accordion__title-icon-
|
|
10
|
-
"accordion__title-icon--
|
|
11
|
-
"accordion__title-icon-
|
|
12
|
-
|
|
13
|
-
"
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import { jsx as o, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import { c } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { useState as w, useId as h } from "react";
|
|
4
|
+
import { Icon as l } from "../Icon/Icon.js";
|
|
5
|
+
import '../../assets/Accordion.css';const f = "_accordion_19w0n_1", u = "_accordion__title_19w0n_6", I = "_accordion__content_19w0n_66", n = {
|
|
6
|
+
accordion: f,
|
|
7
|
+
accordion__title: u,
|
|
8
|
+
"accordion__title-icon": "_accordion__title-icon_19w0n_21",
|
|
9
|
+
"accordion__title-icon-right": "_accordion__title-icon-right_19w0n_22",
|
|
10
|
+
"accordion__title-icon--margin-0": "_accordion__title-icon--margin-0_19w0n_28",
|
|
11
|
+
"accordion__title-icon--margin-025": "_accordion__title-icon--margin-025_19w0n_32",
|
|
12
|
+
"accordion__title-icon--margin-050": "_accordion__title-icon--margin-050_19w0n_36",
|
|
13
|
+
"accordion__title-icon--margin-075": "_accordion__title-icon--margin-075_19w0n_40",
|
|
14
|
+
"accordion__title-icon--margin-100": "_accordion__title-icon--margin-100_19w0n_44",
|
|
15
|
+
"accordion__title-icon--margin-150": "_accordion__title-icon--margin-150_19w0n_48",
|
|
16
|
+
"accordion__title-icon--margin-200": "_accordion__title-icon--margin-200_19w0n_52",
|
|
17
|
+
"accordion__title-icon--expanded": "_accordion__title-icon--expanded_19w0n_60",
|
|
18
|
+
"accordion__title-icon-right--expanded": "_accordion__title-icon-right--expanded_19w0n_61",
|
|
19
|
+
accordion__content: I,
|
|
20
|
+
"accordion__content--expanded": "_accordion__content--expanded_19w0n_70"
|
|
21
|
+
}, C = ({
|
|
22
|
+
title: s,
|
|
23
|
+
content: m,
|
|
24
|
+
expanded: g = !1,
|
|
25
|
+
cheveronPlacement: _ = "right",
|
|
26
|
+
cheveronMargin: t = "050"
|
|
27
|
+
}) => {
|
|
28
|
+
const [i, a] = w(g), e = h();
|
|
16
29
|
function p(x) {
|
|
17
|
-
const { code:
|
|
18
|
-
(
|
|
30
|
+
const { code: r } = x;
|
|
31
|
+
(r === "Enter" || r === "Space") && a(!i);
|
|
19
32
|
}
|
|
20
|
-
return /* @__PURE__ */
|
|
21
|
-
/* @__PURE__ */
|
|
33
|
+
return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ d("div", { className: n.accordion, children: [
|
|
34
|
+
/* @__PURE__ */ d(
|
|
22
35
|
"div",
|
|
23
36
|
{
|
|
24
|
-
className:
|
|
25
|
-
id:
|
|
37
|
+
className: n.accordion__title,
|
|
38
|
+
id: e,
|
|
26
39
|
role: "button",
|
|
27
40
|
tabIndex: 0,
|
|
28
|
-
onClick: () =>
|
|
41
|
+
onClick: () => a(!i),
|
|
29
42
|
onKeyUp: p,
|
|
30
|
-
"aria-expanded":
|
|
43
|
+
"aria-expanded": i,
|
|
31
44
|
children: [
|
|
32
|
-
|
|
33
|
-
|
|
45
|
+
_ === "left" && /* @__PURE__ */ o(
|
|
46
|
+
l,
|
|
34
47
|
{
|
|
35
|
-
className:
|
|
36
|
-
[
|
|
37
|
-
|
|
48
|
+
className: c(
|
|
49
|
+
n["accordion__title-icon"],
|
|
50
|
+
n[`accordion__title-icon--margin-${t}`],
|
|
51
|
+
{
|
|
52
|
+
[n["accordion__title-icon--expanded"]]: i
|
|
53
|
+
}
|
|
54
|
+
),
|
|
38
55
|
name: "CheveronLeft",
|
|
39
56
|
size: 16
|
|
40
57
|
}
|
|
41
58
|
),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
59
|
+
s,
|
|
60
|
+
_ === "right" && /* @__PURE__ */ o(
|
|
61
|
+
l,
|
|
45
62
|
{
|
|
46
|
-
className:
|
|
47
|
-
[
|
|
48
|
-
|
|
63
|
+
className: c(
|
|
64
|
+
n["accordion__title-icon-right"],
|
|
65
|
+
n[`accordion__title-icon--margin-${t}`],
|
|
66
|
+
{
|
|
67
|
+
[n["accordion__title-icon-right--expanded"]]: i
|
|
68
|
+
}
|
|
69
|
+
),
|
|
49
70
|
name: "CheveronLeft",
|
|
50
71
|
size: 16
|
|
51
72
|
}
|
|
@@ -53,17 +74,17 @@ import '../../assets/Accordion.css';const g = "_accordion_13h0q_1", q = "_accord
|
|
|
53
74
|
]
|
|
54
75
|
}
|
|
55
76
|
),
|
|
56
|
-
/* @__PURE__ */
|
|
77
|
+
/* @__PURE__ */ o(
|
|
57
78
|
"div",
|
|
58
79
|
{
|
|
59
|
-
"aria-labelledby":
|
|
60
|
-
className:
|
|
61
|
-
children:
|
|
80
|
+
"aria-labelledby": e,
|
|
81
|
+
className: c(n.accordion__content, { [n["accordion__content--expanded"]]: i }),
|
|
82
|
+
children: m
|
|
62
83
|
}
|
|
63
84
|
)
|
|
64
85
|
] }) });
|
|
65
86
|
};
|
|
66
87
|
export {
|
|
67
|
-
|
|
88
|
+
C as Accordion
|
|
68
89
|
};
|
|
69
90
|
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './Accordion.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionProps {\n /** Clickable title (always visible). */\n title: ReactNode;\n /** Main content (hidden when expanded is false). */\n content: ReactNode;\n /** Indicator if Accordion should be expanded by default.*/\n expanded?: boolean;\n /** Indicator for cheveron icon placement.*/\n cheveronPlacement?: 'left' | 'right';\n}\n\n/** A controller for accordion display toggling of content with click on a title. */\nexport const Accordion = ({
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './Accordion.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionProps {\n /** Clickable title (always visible). */\n title: ReactNode;\n /** Main content (hidden when expanded is false). */\n content: ReactNode;\n /** Indicator if Accordion should be expanded by default.*/\n expanded?: boolean;\n /** Indicator for cheveron icon placement.*/\n cheveronPlacement?: 'left' | 'right';\n /** Indicator for cheveron icon margin. By default '050'. */\n cheveronMargin?: '0' | '025' | '050' | '075' | '100' | '150' | '200';\n}\n\n/** A controller for accordion display toggling of content with click on a title. */\nexport const Accordion = ({\n title,\n content,\n expanded = false,\n cheveronPlacement = 'right',\n cheveronMargin = '050',\n}: AccordionProps) => {\n const [isExpanded, setIsExpanded] = useState(expanded);\n const accordionId = useId();\n\n function onKeyUp(event: KeyboardEvent<HTMLDivElement>) {\n const { code } = event;\n\n if (code === 'Enter' || code === 'Space') {\n setIsExpanded(!isExpanded);\n }\n }\n\n return (\n <div>\n <div className={styles['accordion']}>\n <div\n className={styles['accordion__title']}\n id={accordionId}\n role=\"button\"\n tabIndex={0}\n onClick={() => setIsExpanded(!isExpanded)}\n onKeyUp={onKeyUp}\n aria-expanded={isExpanded}\n >\n {cheveronPlacement === 'left' && (\n <Icon\n className={clsx(\n styles['accordion__title-icon'],\n styles[`accordion__title-icon--margin-${cheveronMargin}`],\n {\n [styles['accordion__title-icon--expanded']]: isExpanded,\n }\n )}\n name=\"CheveronLeft\"\n size={16}\n />\n )}\n\n {title}\n {cheveronPlacement === 'right' && (\n <Icon\n className={clsx(\n styles['accordion__title-icon-right'],\n styles[`accordion__title-icon--margin-${cheveronMargin}`],\n {\n [styles['accordion__title-icon-right--expanded']]: isExpanded,\n }\n )}\n name=\"CheveronLeft\"\n size={16}\n />\n )}\n </div>\n <div\n aria-labelledby={accordionId}\n className={clsx(styles.accordion__content, { [styles['accordion__content--expanded']]: isExpanded })}\n >\n {content}\n </div>\n </div>\n </div>\n );\n};\n"],"names":["Accordion","title","content","expanded","cheveronPlacement","cheveronMargin","isExpanded","setIsExpanded","useState","accordionId","useId","onKeyUp","event","code","jsxs","styles","jsx","Icon","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;GAuBaA,IAAY,CAAC;AAAA,EACxB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,mBAAAC,IAAoB;AAAA,EACpB,gBAAAC,IAAiB;AACnB,MAAsB;AACpB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASL,CAAQ,GAC/CM,IAAcC,EAAA;AAEpB,WAASC,EAAQC,GAAsC;AACrD,UAAM,EAAE,MAAAC,MAASD;AAEjB,KAAIC,MAAS,WAAWA,MAAS,YAC/BN,EAAc,CAACD,CAAU;AAAA,EAC3B;AAGF,2BACG,OAAA,EACC,UAAA,gBAAAQ,EAAC,SAAI,WAAWC,EAAO,WACrB,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAO;AAAA,QAClB,IAAIN;AAAA,QACJ,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS,MAAMF,EAAc,CAACD,CAAU;AAAA,QACxC,SAAAK;AAAA,QACA,iBAAeL;AAAA,QAEd,UAAA;AAAA,UAAAF,MAAsB,UACrB,gBAAAY;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWC;AAAA,gBACTH,EAAO,uBAAuB;AAAA,gBAC9BA,EAAO,iCAAiCV,CAAc,EAAE;AAAA,gBACxD;AAAA,kBACE,CAACU,EAAO,iCAAiC,CAAC,GAAGT;AAAA,gBAAA;AAAA,cAC/C;AAAA,cAEF,MAAK;AAAA,cACL,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAITL;AAAA,UACAG,MAAsB,WACrB,gBAAAY;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWC;AAAA,gBACTH,EAAO,6BAA6B;AAAA,gBACpCA,EAAO,iCAAiCV,CAAc,EAAE;AAAA,gBACxD;AAAA,kBACE,CAACU,EAAO,uCAAuC,CAAC,GAAGT;AAAA,gBAAA;AAAA,cACrD;AAAA,cAEF,MAAK;AAAA,cACL,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiBP;AAAA,QACjB,WAAWS,EAAKH,EAAO,oBAAoB,EAAE,CAACA,EAAO,8BAA8B,CAAC,GAAGT,GAAY;AAAA,QAElG,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,EAAA,CACF,EAAA,CACF;AAEJ;"}
|
|
@@ -5,6 +5,12 @@ export declare const Icons: {
|
|
|
5
5
|
desc?: string;
|
|
6
6
|
descId?: string;
|
|
7
7
|
}>;
|
|
8
|
+
Aggregate: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
9
|
+
title?: string;
|
|
10
|
+
titleId?: string;
|
|
11
|
+
desc?: string;
|
|
12
|
+
descId?: string;
|
|
13
|
+
}>;
|
|
8
14
|
ArrowDownOnSquare: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
9
15
|
title?: string;
|
|
10
16
|
titleId?: string;
|
|
@@ -449,6 +455,12 @@ export declare const Icons: {
|
|
|
449
455
|
desc?: string;
|
|
450
456
|
descId?: string;
|
|
451
457
|
}>;
|
|
458
|
+
Lock: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
459
|
+
title?: string;
|
|
460
|
+
titleId?: string;
|
|
461
|
+
desc?: string;
|
|
462
|
+
descId?: string;
|
|
463
|
+
}>;
|
|
452
464
|
LockClosedFill: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
453
465
|
title?: string;
|
|
454
466
|
titleId?: string;
|
|
@@ -539,6 +551,12 @@ export declare const Icons: {
|
|
|
539
551
|
desc?: string;
|
|
540
552
|
descId?: string;
|
|
541
553
|
}>;
|
|
554
|
+
Sketch: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
555
|
+
title?: string;
|
|
556
|
+
titleId?: string;
|
|
557
|
+
desc?: string;
|
|
558
|
+
descId?: string;
|
|
559
|
+
}>;
|
|
542
560
|
Sparkles: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
|
|
543
561
|
title?: string;
|
|
544
562
|
titleId?: string;
|