@uva-glass/component-library 3.14.0 → 3.14.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.
- package/dist/assets/OverlayStepBar.css +1 -1
- package/dist/components/OverlayStepBar/OverlayStepBar.d.ts +5 -7
- package/dist/components/OverlayStepBar/OverlayStepBar.js +19 -57
- package/dist/components/OverlayStepBar/OverlayStepBar.js.map +1 -1
- package/dist/components/OverlayStepBar/OverlayStepBar.stories.js +7 -12
- package/dist/components/OverlayStepBar/OverlayStepBar.stories.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
._overlay-step-
|
|
1
|
+
._overlay-step-bar__container_18gn9_1{align-items:center;background-color:var(--color-grey-50);display:flex;height:2.5rem;justify-content:center;overflow-y:hidden}._overlay-step-bar__step_18gn9_10{align-items:center;background-color:var(--color-grey-50);color:var(--color-grey-500);display:flex;font-family:inherit;font-size:var(--font-size-default);gap:.5rem;height:100%;padding:0 2rem;position:relative}._overlay-step-bar__step_18gn9_10:not(:last-child):after{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--color-grey-50);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.25rem;top:-.25rem;z-index:10}._overlay-step-bar__step_18gn9_10:not(:last-child):before{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--color-white);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.5rem;top:-.25rem;z-index:5}._overlay-step-bar__step--active_18gn9_45{color:var(--color-black);font-weight:var(--semibold)}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
type StepType = {
|
|
2
|
-
label: string;
|
|
3
|
-
status: 'inactive' | 'active' | 'checked';
|
|
4
|
-
};
|
|
5
1
|
export interface OverlayStepBarProps {
|
|
6
|
-
|
|
2
|
+
/** Array of strings. */
|
|
3
|
+
stepLabels: string[];
|
|
4
|
+
/** activeStep number starting with 1. */
|
|
5
|
+
activeStep: number;
|
|
7
6
|
}
|
|
8
|
-
export declare const OverlayStepBar: ({
|
|
9
|
-
export {};
|
|
7
|
+
export declare const OverlayStepBar: ({ stepLabels, activeStep }: OverlayStepBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,60 +1,22 @@
|
|
|
1
|
-
import { jsx as e,
|
|
2
|
-
import { c as
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
import "../RteEditor/Providers/LanguageProvider.js";
|
|
20
|
-
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
21
|
-
import "../RteEditor/hooks/components/Flyout.js";
|
|
22
|
-
import "../../index-DllfJcv4.js";
|
|
23
|
-
import "../SelectListbox/SelectListbox.js";
|
|
24
|
-
import "../SelectListbox/SelectProvider.js";
|
|
25
|
-
import "../Sortable/components/SortableItem.js";
|
|
26
|
-
import "../../SortableProvider-DZggDO3M.js";
|
|
27
|
-
import '../../assets/OverlayStepBar.css';const r = {
|
|
28
|
-
"overlay-step-bar__container": "_overlay-step-bar__container_u2k5r_1",
|
|
29
|
-
"overlay-step-bar__separator": "_overlay-step-bar__separator_u2k5r_10",
|
|
30
|
-
"overlay-step-bar__step": "_overlay-step-bar__step_u2k5r_14",
|
|
31
|
-
"overlay-step-bar__step-bullet": "_overlay-step-bar__step-bullet_u2k5r_23",
|
|
32
|
-
"overlay-step-bar__step--inactive": "_overlay-step-bar__step--inactive_u2k5r_34",
|
|
33
|
-
"overlay-step-bar__step--active": "_overlay-step-bar__step--active_u2k5r_40",
|
|
34
|
-
"overlay-step-bar__step--checked": "_overlay-step-bar__step--checked_u2k5r_49"
|
|
35
|
-
}, t = [
|
|
36
|
-
"MiniCheck",
|
|
37
|
-
"One",
|
|
38
|
-
"Two",
|
|
39
|
-
"Three",
|
|
40
|
-
"Four",
|
|
41
|
-
"Five",
|
|
42
|
-
"Six",
|
|
43
|
-
"Seven",
|
|
44
|
-
"Eight",
|
|
45
|
-
"Nine"
|
|
46
|
-
], B = ({ steps: a }) => {
|
|
47
|
-
if (a.length > t.length - 1)
|
|
48
|
-
throw new Error("The 'steps' array must contain no more than 9 objects.");
|
|
49
|
-
return /* @__PURE__ */ e("div", { className: r["overlay-step-bar__container"], children: a.length < t.length && a.map(({ label: p, status: _ }, o) => /* @__PURE__ */ s(m, { children: [
|
|
50
|
-
o !== 0 && /* @__PURE__ */ e(i, { name: "CheveronRight", size: 16, className: r["overlay-step-bar__separator"] }),
|
|
51
|
-
/* @__PURE__ */ s("span", { className: l(r["overlay-step-bar__step"], r[`overlay-step-bar__step--${_}`]), children: [
|
|
52
|
-
/* @__PURE__ */ e("span", { className: r["overlay-step-bar__step-bullet"], children: /* @__PURE__ */ e(i, { name: _ === "checked" ? t[0] : t[o + 1], size: 24 }) }),
|
|
53
|
-
p
|
|
54
|
-
] })
|
|
55
|
-
] }, `${o}_${p}`)) });
|
|
56
|
-
};
|
|
1
|
+
import { jsx as e, Fragment as n, jsxs as o } from "react/jsx-runtime";
|
|
2
|
+
import { c as p } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import '../../assets/OverlayStepBar.css';const t = {
|
|
4
|
+
"overlay-step-bar__container": "_overlay-step-bar__container_18gn9_1",
|
|
5
|
+
"overlay-step-bar__step": "_overlay-step-bar__step_18gn9_10",
|
|
6
|
+
"overlay-step-bar__step--active": "_overlay-step-bar__step--active_18gn9_45"
|
|
7
|
+
}, i = ({ stepLabels: r, activeStep: s = 0 }) => (s > r.length && console.error("activeStep is greater than the number of steps"), /* @__PURE__ */ e("div", { className: t["overlay-step-bar__container"], children: r.length && r.map((_, a) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ o(
|
|
8
|
+
"span",
|
|
9
|
+
{
|
|
10
|
+
className: p(t["overlay-step-bar__step"], [
|
|
11
|
+
a === s - 1 && t["overlay-step-bar__step--active"]
|
|
12
|
+
]),
|
|
13
|
+
children: [
|
|
14
|
+
/* @__PURE__ */ e("span", { children: a + 1 }),
|
|
15
|
+
/* @__PURE__ */ e("span", { children: _ })
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
) }, `${a}_${_}`)) }));
|
|
57
19
|
export {
|
|
58
|
-
|
|
20
|
+
i as OverlayStepBar
|
|
59
21
|
};
|
|
60
22
|
//# sourceMappingURL=OverlayStepBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport
|
|
1
|
+
{"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport styles from './OverlayStepBar.module.css';\n\nexport interface OverlayStepBarProps {\n /** Array of strings. */\n stepLabels: string[];\n /** activeStep number starting with 1. */\n activeStep: number;\n}\n\nexport const OverlayStepBar = ({ stepLabels, activeStep = 0 }: OverlayStepBarProps) => {\n if (activeStep > stepLabels.length) {\n console.error('activeStep is greater than the number of steps');\n }\n\n return (\n <div className={styles['overlay-step-bar__container']}>\n {stepLabels.length &&\n stepLabels.map((label, index) => (\n <Fragment key={`${index}_${label}`}>\n <span\n className={clsx(styles[`overlay-step-bar__step`], [\n index === activeStep - 1 && styles[`overlay-step-bar__step--active`],\n ])}\n >\n <span>{index + 1}</span>\n <span>{label}</span>\n </span>\n </Fragment>\n ))}\n </div>\n );\n};\n"],"names":["OverlayStepBar","stepLabels","activeStep","jsx","styles","label","index","Fragment","jsxs","clsx"],"mappings":";;;;;;GAYaA,IAAiB,CAAC,EAAE,YAAAC,GAAY,YAAAC,IAAa,SACpDA,IAAaD,EAAW,UAC1B,QAAQ,MAAM,gDAAgD,GAI7D,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAO,6BAA6B,GACjD,UAAAH,EAAW,UACVA,EAAW,IAAI,CAACI,GAAOC,wBACpBC,GACC,EAAA,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKL,EAAO,wBAAwB,GAAG;AAAA,MAChDE,MAAUJ,IAAa,KAAKE,EAAO,gCAAgC;AAAA,IAAA,CACpE;AAAA,IAED,UAAA;AAAA,MAAC,gBAAAD,EAAA,QAAA,EAAM,cAAQ,EAAE,CAAA;AAAA,MACjB,gBAAAA,EAAC,UAAM,UAAME,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,KAPF,GAAGC,CAAK,IAAID,CAAK,EAShC,CACD,GACL;"}
|
|
@@ -1,22 +1,17 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import { OverlayStepBar as e } from "./OverlayStepBar.js";
|
|
3
|
-
const
|
|
3
|
+
const r = "<OverlayStepBar stelLabels={[string]} activeStep={number}/>", i = {
|
|
4
4
|
title: "Molecules/OverlayStepBar",
|
|
5
5
|
component: e,
|
|
6
6
|
argTypes: {},
|
|
7
7
|
parameters: {
|
|
8
8
|
inspectComponent: e,
|
|
9
|
-
codeString:
|
|
9
|
+
codeString: r
|
|
10
10
|
}
|
|
11
|
-
},
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
{ status: "active", label: "Aanvullende informatie" },
|
|
16
|
-
{ status: "inactive", label: "Docenten" },
|
|
17
|
-
{ status: "inactive", label: "Overzicht" }
|
|
18
|
-
]
|
|
19
|
-
}, n = r.bind({});
|
|
11
|
+
}, a = (t) => /* @__PURE__ */ s(e, { ...t }), l = {
|
|
12
|
+
stepLabels: ["BasicDetails", "Lecturers", "PeriodPlanning", "Assessment", "Miscellaneous", "Overview"],
|
|
13
|
+
activeStep: 2
|
|
14
|
+
}, n = a.bind({});
|
|
20
15
|
n.args = {
|
|
21
16
|
...l
|
|
22
17
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString = '<OverlayStepBar />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/OverlayStepBar',\n component: OverlayStepBar,\n argTypes: {},\n parameters: {\n inspectComponent: OverlayStepBar,\n codeString: codeString,\n },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => <OverlayStepBar {...args} />;\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n
|
|
1
|
+
{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString = '<OverlayStepBar stelLabels={[string]} activeStep={number}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/OverlayStepBar',\n component: OverlayStepBar,\n argTypes: {},\n parameters: {\n inspectComponent: OverlayStepBar,\n codeString: codeString,\n },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => <OverlayStepBar {...args} />;\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n stepLabels: ['BasicDetails', 'Lecturers', 'PeriodPlanning', 'Assessment', 'Miscellaneous', 'Overview'],\n activeStep: 2,\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","jsx","defaultArgs","OverlayStepBarExample"],"mappings":";;AAKA,MAAMA,IAAa,+DAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,GAAM,GAE7EE,IAA4C;AAAA,EAChD,YAAY,CAAC,gBAAgB,aAAa,kBAAkB,cAAc,iBAAiB,UAAU;AAAA,EACrG,YAAY;AACd,GAEaC,IAAwBJ,EAAS,KAAK,CAAE,CAAA;AACrDI,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AACL;"}
|