@uva-glass/component-library 1.64.2 → 1.64.3
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
|
-
._accordion-
|
|
1
|
+
._accordion-card_2u4nr_1{background-color:var(--color-grey-50);overflow:hidden;position:relative}._accordion-card__title_2u4nr_7{align-items:center;cursor:pointer;display:flex;gap:.5rem;justify-content:flex-start;padding:1.5rem 1rem;-webkit-user-select:none;user-select:none}._accordion-card__title_2u4nr_7 h3{margin:0}._accordion-card__title_2u4nr_7:focus-visible{text-decoration:underline}._accordion-card__title-icon_2u4nr_25{transform:rotate(-90deg);transition:transform .3s ease-in}._accordion-card__title-icon--expanded_2u4nr_30{transform:rotate(90deg);transition:transform .3s ease-out}._accordion-card__content_2u4nr_35{display:none;margin:.5rem 2.5rem 2.5rem}._accordion-card__content--expanded_2u4nr_40{display:block}
|
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as e, jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import { c as i } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { useState as x, useId as m } from "react";
|
|
4
|
-
import { Icon as
|
|
4
|
+
import { Icon as u } from "../Icon/Icon.js";
|
|
5
5
|
import '../../assets/AccordionCard.css';const c = {
|
|
6
|
-
"accordion-card": "_accordion-
|
|
7
|
-
"accordion-card__title": "_accordion-
|
|
8
|
-
"accordion-card__title-icon": "_accordion-card__title-
|
|
9
|
-
"accordion-card__title-icon--expanded": "_accordion-card__title-icon--
|
|
10
|
-
"accordion-card__content": "_accordion-
|
|
11
|
-
"accordion-card__content--expanded": "_accordion-card__content--
|
|
12
|
-
},
|
|
13
|
-
const [
|
|
14
|
-
const { code:
|
|
15
|
-
(
|
|
6
|
+
"accordion-card": "_accordion-card_2u4nr_1",
|
|
7
|
+
"accordion-card__title": "_accordion-card__title_2u4nr_7",
|
|
8
|
+
"accordion-card__title-icon": "_accordion-card__title-icon_2u4nr_25",
|
|
9
|
+
"accordion-card__title-icon--expanded": "_accordion-card__title-icon--expanded_2u4nr_30",
|
|
10
|
+
"accordion-card__content": "_accordion-card__content_2u4nr_35",
|
|
11
|
+
"accordion-card__content--expanded": "_accordion-card__content--expanded_2u4nr_40"
|
|
12
|
+
}, v = ({ title: t, content: _, expanded: s = !1 }) => {
|
|
13
|
+
const [o, d] = x(s), a = m(), l = (p) => {
|
|
14
|
+
const { code: r } = p;
|
|
15
|
+
(r === "Enter" || r === "Space") && d(!o);
|
|
16
16
|
};
|
|
17
|
-
return /* @__PURE__ */
|
|
18
|
-
/* @__PURE__ */
|
|
17
|
+
return /* @__PURE__ */ e("div", { className: c["accordion-card"], children: [
|
|
18
|
+
/* @__PURE__ */ e(
|
|
19
19
|
"div",
|
|
20
20
|
{
|
|
21
21
|
className: c["accordion-card__title"],
|
|
22
|
-
id:
|
|
22
|
+
id: a,
|
|
23
23
|
role: "button",
|
|
24
24
|
tabIndex: 0,
|
|
25
|
-
onClick: () =>
|
|
26
|
-
onKeyUp:
|
|
27
|
-
"aria-expanded":
|
|
25
|
+
onClick: () => d(!o),
|
|
26
|
+
onKeyUp: l,
|
|
27
|
+
"aria-expanded": o,
|
|
28
28
|
children: [
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
|
|
29
|
+
/* @__PURE__ */ n(
|
|
30
|
+
u,
|
|
31
31
|
{
|
|
32
32
|
className: i(c["accordion-card__title-icon"], {
|
|
33
|
-
[c["accordion-card__title-icon--expanded"]]:
|
|
33
|
+
[c["accordion-card__title-icon--expanded"]]: o
|
|
34
34
|
}),
|
|
35
35
|
name: "CheveronLeft",
|
|
36
36
|
size: 16
|
|
37
37
|
}
|
|
38
38
|
),
|
|
39
|
-
/* @__PURE__ */
|
|
39
|
+
/* @__PURE__ */ n("h3", { children: t })
|
|
40
40
|
]
|
|
41
41
|
}
|
|
42
42
|
),
|
|
43
|
-
/* @__PURE__ */
|
|
43
|
+
/* @__PURE__ */ n(
|
|
44
44
|
"div",
|
|
45
45
|
{
|
|
46
|
-
"aria-labelledby":
|
|
46
|
+
"aria-labelledby": a,
|
|
47
47
|
className: i(c["accordion-card__content"], {
|
|
48
|
-
[c["accordion-card__content--expanded"]]:
|
|
48
|
+
[c["accordion-card__content--expanded"]]: o
|
|
49
49
|
}),
|
|
50
50
|
children: _
|
|
51
51
|
}
|
|
@@ -53,6 +53,6 @@ import '../../assets/AccordionCard.css';const c = {
|
|
|
53
53
|
] });
|
|
54
54
|
};
|
|
55
55
|
export {
|
|
56
|
-
|
|
56
|
+
v as AccordionCard
|
|
57
57
|
};
|
|
58
58
|
//# sourceMappingURL=AccordionCard.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { AccordionCard as n } from "./AccordionCard.js";
|
|
3
3
|
import { Container as t } from "../../storyComponents/Container/Container.js";
|
|
4
|
-
const r = "<AccordionCard title={title} content={content}/>",
|
|
4
|
+
const r = "<AccordionCard title={title} content={content}/>", p = {
|
|
5
5
|
title: "Atoms/AccordionCard",
|
|
6
6
|
component: n,
|
|
7
7
|
argTypes: {
|
|
@@ -19,8 +19,8 @@ const r = "<AccordionCard title={title} content={content}/>", m = {
|
|
|
19
19
|
}, o = (a) => /* @__PURE__ */ e(t, { size: "large", children: /* @__PURE__ */ e(n, { ...a }) }), s = o.bind({});
|
|
20
20
|
s.args = {
|
|
21
21
|
title: "Vakaanbieding 1",
|
|
22
|
-
content: /* @__PURE__ */ i("div", {
|
|
23
|
-
/* @__PURE__ */ e("h3", { children: "Vakaanmelding: Het Belang van een Goede Start van Je Studiejaar" }),
|
|
22
|
+
content: /* @__PURE__ */ i("div", { children: [
|
|
23
|
+
/* @__PURE__ */ e("h3", { style: { marginTop: "0" }, children: "Vakaanmelding: Het Belang van een Goede Start van Je Studiejaar" }),
|
|
24
24
|
/* @__PURE__ */ e("p", { children: "Vakaanmelding is een cruciale stap in het studieproces, waarbij studenten zich inschrijven voor de vakken die zij tijdens een semester of studiejaar willen volgen. Deze procedure is belangrijk om een gestructureerd en succesvol academisch traject te waarborgen. Hieronder bespreken we wat vakaanmelding inhoudt, waarom het essentieel is en hoe je je optimaal kunt voorbereiden." }),
|
|
25
25
|
/* @__PURE__ */ e("h3", { children: "Wat is vakaanmelding?" }),
|
|
26
26
|
/* @__PURE__ */ e("p", { children: "Vakaanmelding is het proces waarbij studenten via een digitaal systeem (zoals Blackboard, Canvas of een specifieke universiteitsportal) aangeven welke vakken zij willen volgen. Dit kan variëren van verplichte kernvakken tot keuzevakken die aansluiten bij persoonlijke interesses of specialisaties." })
|
|
@@ -28,6 +28,6 @@ s.args = {
|
|
|
28
28
|
};
|
|
29
29
|
export {
|
|
30
30
|
s as AccordionCardExample,
|
|
31
|
-
|
|
31
|
+
p as default
|
|
32
32
|
};
|
|
33
33
|
//# sourceMappingURL=AccordionCard.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionCard.stories.js","sources":["../../../src/components/AccordionCard/AccordionCard.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AccordionCardProps } from './AccordionCard';\n\nimport { AccordionCard } from './AccordionCard';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<AccordionCard title={title} content={content}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/AccordionCard',\n component: AccordionCard,\n argTypes: {\n expanded: {\n // Hide the expanded prop. Changing the value in Storybook doesn't update the state of the component.\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: AccordionCard,\n codeString: codeString,\n },\n} as Meta<AccordionCardProps>;\n\nconst Template: StoryFn<AccordionCardProps> = (args) => (\n <Container size=\"large\">\n <AccordionCard {...args} />\n </Container>\n);\n\nexport const AccordionCardExample = Template.bind({});\nAccordionCardExample.args = {\n title: 'Vakaanbieding 1',\n content: (\n <div style={{
|
|
1
|
+
{"version":3,"file":"AccordionCard.stories.js","sources":["../../../src/components/AccordionCard/AccordionCard.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AccordionCardProps } from './AccordionCard';\n\nimport { AccordionCard } from './AccordionCard';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<AccordionCard title={title} content={content}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/AccordionCard',\n component: AccordionCard,\n argTypes: {\n expanded: {\n // Hide the expanded prop. Changing the value in Storybook doesn't update the state of the component.\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: AccordionCard,\n codeString: codeString,\n },\n} as Meta<AccordionCardProps>;\n\nconst Template: StoryFn<AccordionCardProps> = (args) => (\n <Container size=\"large\">\n <AccordionCard {...args} />\n </Container>\n);\n\nexport const AccordionCardExample = Template.bind({});\nAccordionCardExample.args = {\n title: 'Vakaanbieding 1',\n content: (\n <div>\n <h3 style={{ marginTop: '0' }}>Vakaanmelding: Het Belang van een Goede Start van Je Studiejaar</h3>\n <p>\n Vakaanmelding is een cruciale stap in het studieproces, waarbij studenten zich inschrijven voor de vakken die\n zij tijdens een semester of studiejaar willen volgen. Deze procedure is belangrijk om een gestructureerd en\n succesvol academisch traject te waarborgen. Hieronder bespreken we wat vakaanmelding inhoudt, waarom het\n essentieel is en hoe je je optimaal kunt voorbereiden.\n </p>\n <h3>Wat is vakaanmelding?</h3>\n <p>\n Vakaanmelding is het proces waarbij studenten via een digitaal systeem (zoals Blackboard, Canvas of een\n specifieke universiteitsportal) aangeven welke vakken zij willen volgen. Dit kan variëren van verplichte\n kernvakken tot keuzevakken die aansluiten bij persoonlijke interesses of specialisaties.\n </p>\n </div>\n ),\n};\n"],"names":["codeString","AccordionCard_stories","AccordionCard","Template","args","jsx","Container","AccordionCardExample"],"mappings":";;;AAOA,MAAMA,IAAa,oDAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA;AAAA,MAER,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAwC,CAACC,MAC5C,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAC,gBAAAD,EAAAH,GAAA,EAAe,GAAGE,EAAM,CAAA,EAC3B,CAAA,GAGWG,IAAuBJ,EAAS,KAAK,EAAE;AACpDI,EAAqB,OAAO;AAAA,EAC1B,OAAO;AAAA,EACP,2BACG,OACC,EAAA,UAAA;AAAA,IAAA,gBAAAF,EAAC,QAAG,OAAO,EAAE,WAAW,OAAO,UAA+D,mEAAA;AAAA,IAC9F,gBAAAA,EAAC,OAAE,UAKH,4XAAA,CAAA;AAAA,IACA,gBAAAA,EAAC,QAAG,UAAqB,wBAAA,CAAA;AAAA,IACzB,gBAAAA,EAAC,OAAE,UAIH,4SAAA,CAAA;AAAA,EAAA,GACF;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": "1.64.
|
|
5
|
+
"version": "1.64.3",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -42,10 +42,10 @@
|
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@commitlint/cli": "^19.6.0",
|
|
44
44
|
"@commitlint/config-conventional": "^19.6.0",
|
|
45
|
-
"@react-aria/button": "^3.
|
|
46
|
-
"@react-aria/dialog": "^3.5.
|
|
47
|
-
"@react-aria/overlays": "^3.
|
|
48
|
-
"@react-types/dialog": "^3.5.
|
|
45
|
+
"@react-aria/button": "^3.11.0",
|
|
46
|
+
"@react-aria/dialog": "^3.5.20",
|
|
47
|
+
"@react-aria/overlays": "^3.24.0",
|
|
48
|
+
"@react-types/dialog": "^3.5.14",
|
|
49
49
|
"@semantic-release/git": "^10.0.1",
|
|
50
50
|
"@semantic-release/gitlab": "^13.2.1",
|
|
51
51
|
"@semantic-release/npm": "^12.0.1",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"@storybook/react-vite": "^8.4.5",
|
|
59
59
|
"@storybook/react": "^8.4.5",
|
|
60
60
|
"@storybook/test": "^8.4.5",
|
|
61
|
-
"@types/node": "^22.9.
|
|
61
|
+
"@types/node": "^22.9.3",
|
|
62
62
|
"@types/react-dom": "^18.3.1",
|
|
63
63
|
"@types/react": "^18.3.12",
|
|
64
64
|
"@uva-glass/eslint-config": "^1.3.1",
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"stylelint-config-standard": "^36.0.1",
|
|
87
87
|
"stylelint-order": "^6.0.4",
|
|
88
88
|
"stylelint": "^16.10.0",
|
|
89
|
-
"typescript": "^5.
|
|
89
|
+
"typescript": "^5.7.2",
|
|
90
90
|
"vite-plugin-dts": "^4.3.0",
|
|
91
91
|
"vite-plugin-lib-inject-css": "^2.1.1",
|
|
92
92
|
"vite-plugin-static-copy": "^2.1.0",
|