@uva-glass/component-library 3.38.0 → 3.38.1
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.
|
@@ -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;"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@uva-glass/component-library",
|
|
3
3
|
"author": "Team Glass - Frontend vrienden",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "3.38.
|
|
5
|
+
"version": "3.38.1",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@testing-library/react": "^16.3.0",
|
|
62
62
|
"@types/jest": "^30.0.0",
|
|
63
63
|
"@types/node": "^22.17.2",
|
|
64
|
-
"@types/react": "^19.1.
|
|
64
|
+
"@types/react": "^19.1.11",
|
|
65
65
|
"@types/react-dom": "^19.1.7",
|
|
66
66
|
"@uva-glass/eslint-config": "^1.3.11",
|
|
67
67
|
"@uva-glass/stylelint-config": "^1.2.3",
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
"npm-run-all2": "^8.0.4",
|
|
81
81
|
"react": "^19.1.1",
|
|
82
82
|
"react-dom": "^19.1.1",
|
|
83
|
-
"react-router": "^7.8.
|
|
83
|
+
"react-router": "^7.8.2",
|
|
84
84
|
"semantic-release": "^24.2.7",
|
|
85
85
|
"storybook": "^9.1.3",
|
|
86
86
|
"style-dictionary": "^5.0.2",
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"vite-plugin-dts": "^4.5.4",
|
|
95
95
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
96
96
|
"vite-plugin-static-copy": "^3.1.2",
|
|
97
|
-
"vite-plugin-svgr": "^4.
|
|
97
|
+
"vite-plugin-svgr": "^4.5.0",
|
|
98
98
|
"vite-tsconfig-paths": "^5.1.4"
|
|
99
99
|
},
|
|
100
100
|
"dependencies": {
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
},
|
|
110
110
|
"optionalDependencies": {
|
|
111
111
|
"@ast-grep/napi-linux-x64-gnu": "0.39.4",
|
|
112
|
-
"@rollup/rollup-linux-x64-gnu": "^4.
|
|
112
|
+
"@rollup/rollup-linux-x64-gnu": "^4.48.1",
|
|
113
113
|
"@rspack/binding-darwin-arm64": "1.4.11",
|
|
114
114
|
"@rspack/binding-linux-x64-gnu": "1.4.11"
|
|
115
115
|
}
|