@uva-glass/component-library 3.19.3 → 3.19.4
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/StatusPill.css +1 -1
- package/dist/assets/TextArea.css +1 -1
- package/dist/assets/ToggleSwitch.css +1 -1
- package/dist/assets/Tooltip.css +1 -1
- package/dist/assets/VarIndicator.css +1 -1
- package/dist/components/StatusPill/StatusPill.js +5 -5
- package/dist/components/TextArea/TextArea.js +12 -12
- package/dist/components/ToggleSwitch/ToggleSwitch.js +26 -26
- package/dist/components/Tooltip/Tooltip.js +24 -24
- package/dist/components/VarIndicator/VarIndicator.js +13 -13
- package/dist/components/index.d.ts +0 -1
- package/dist/components/index.js +10 -12
- package/dist/components/index.js.map +1 -1
- package/dist/index.js +10 -12
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/TimelineItem-ClDZJkaZ.js +0 -60
- package/dist/TimelineItem-ClDZJkaZ.js.map +0 -1
- package/dist/assets/TimelineItem.css +0 -1
- package/dist/components/Timeline/Timeline.d.ts +0 -23
- package/dist/components/Timeline/Timeline.js +0 -29
- package/dist/components/Timeline/Timeline.js.map +0 -1
- package/dist/components/Timeline/Timeline.stories.d.ts +0 -5
- package/dist/components/Timeline/Timeline.stories.js +0 -43
- package/dist/components/Timeline/Timeline.stories.js.map +0 -1
- package/dist/components/Timeline/Timeline.test.d.ts +0 -0
- package/dist/components/Timeline/Timeline.test.js +0 -80
- package/dist/components/Timeline/Timeline.test.js.map +0 -1
- package/dist/components/Timeline/TimelineItem.d.ts +0 -2
- package/dist/components/Timeline/TimelineItem.js +0 -7
- package/dist/components/Timeline/TimelineItem.js.map +0 -1
- package/dist/components/Timeline/index.d.ts +0 -1
- package/dist/components/Timeline/index.js +0 -5
- package/dist/components/Timeline/index.js.map +0 -1
- package/dist/components/Timeline/mockTimelineItem.d.ts +0 -30
- package/dist/components/Timeline/mockTimelineItem.js +0 -95
- package/dist/components/Timeline/mockTimelineItem.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
._status-
|
|
1
|
+
._status-pill_1df7x_1{align-items:center;border-radius:1.5rem;display:flex;gap:.25rem;padding:.25rem .5rem;width:fit-content}._status-pill__possible_1df7x_10{background-color:var(--new-color-forest-100);color:var(--new-color-forest-900)}._status-pill__impossible_1df7x_15{background-color:var(--new-color-red-100);color:var(--new-color-red-800)}._status-pill__new_1df7x_20{background-color:var(--new-color-navy-100);color:var(--new-color-navy-600);font-size:var(--font-size-text-non-essential)}._status-pill--bar_1df7x_26{border-radius:0;justify-content:center;padding:.5rem;width:100%}
|
package/dist/assets/TextArea.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._text-
|
|
1
|
+
._text-area__wrapper_13728_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_13728_7{align-items:baseline;display:flex;justify-content:space-between}._text-area__label_13728_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold);line-height:var(--line-height-s)}._text-area__word-count_13728_20{color:var(--new-color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_13728_25{color:var(--new-color-red-600);font-weight:700}._text-area_13728_1{border-radius:.25rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._toggle-
|
|
1
|
+
._toggle-switch_98blk_1{align-items:center;cursor:pointer;display:inline-flex;gap:1ch;-webkit-user-select:none;user-select:none}._toggle-switch__visible_98blk_9{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-uva-black);border-radius:.75rem;box-shadow:0 1px 1px #0000000f,0 1px 2px #0000001a;display:flex;height:1.5rem;outline:.125rem dotted transparent;outline-offset:.125rem;padding:.25rem;transition:background-color .15s;width:3.125rem}:focus-visible+._toggle-switch__visible_98blk_9{outline-color:var(--new-color-navy-600)}:checked+._toggle-switch__visible_98blk_9{background-color:var(--new-color-forest-600)}._toggle-switch__visible_98blk_9:before{background-color:var(--new-color-grey-300);border:1px solid var(--new-color-uva-black);border-radius:.75rem;content:"";display:inline-block;height:1rem;min-width:1rem;transform:translate(-.1rem);transition:background-color .15s,transform .15s,width .15s}:checked+._toggle-switch__visible_98blk_9:before{background-color:var(--new-color-uva-white);transform:translate(1.6rem)}._toggle-switch--disabled_98blk_52 ._toggle-switch__visible_98blk_9:before{background-color:#0000001a;border-color:#0000001a}:checked:active+._toggle-switch__visible_98blk_9:before{transform:translate(1.25rem)}._toggle-switch--disabled_98blk_52,._toggle-switch--loading_98blk_62{pointer-events:none}._toggle-switch--disabled_98blk_52 ._toggle-switch__visible_98blk_9{background-color:var(--new-color-grey-300);border-color:#0000001a;box-shadow:none}._toggle-switch--visually-hidden_98blk_72{border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}._toggle-switch--disabled-label_98blk_85{color:var(--new-color-grey-700)}._toggle-switch--loading-cursor_98blk_89{cursor:wait}._toggle-switch--extra-left-gap_98blk_93{margin-left:.5rem}
|
package/dist/assets/Tooltip.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._tooltip-
|
|
1
|
+
._tooltip-container_622pq_1{align-items:flex-end;cursor:help;display:flex;position:relative}._tooltip_small_622pq_8,._tooltip_medium_622pq_9,._tooltip_large_622pq_10{background-color:var(--new-color-grey-700);border-radius:.5rem;color:var(--new-color-uva-white);font-weight:400;padding:.5rem;position:fixed;text-align:center;transform:translate(-50%,-50%);white-space:normal;z-index:10}._tooltip_small_622pq_8{height:4rem;width:14.5rem}._tooltip_medium_622pq_9{height:5.5rem;width:20rem}._tooltip_large_622pq_10{height:5.5rem;width:24.5rem}._tooltip_small_622pq_8:before,._tooltip_medium_622pq_9:before,._tooltip_large_622pq_10:before{border:.5rem solid transparent;border-top-color:var(--new-color-grey-700);content:"";height:0;position:absolute;width:0}._tooltip_small_622pq_8:before{right:1rem;top:4rem}._tooltip_medium_622pq_9:before{right:3rem;top:5.5rem}._tooltip_large_622pq_10:before{right:4rem;top:5.5rem}._tooltip_under-trigger_622pq_64{background-color:var(--new-color-grey-700);border-radius:.5rem;color:var(--new-color-uva-white);font-weight:400;max-width:calc(100vw - 2rem);padding:.25rem 1rem;position:fixed;right:1rem;top:3.5rem}._tooltip_under-trigger_622pq_64:before{border-bottom:.5rem solid var(--new-color-grey-700);border-left:.5rem solid transparent;border-right:.5rem solid transparent;content:"";height:0;position:absolute;right:3.5rem;top:-.5rem;width:0}@media (min-width: 50rem){._tooltip_under-trigger_622pq_64{right:.5rem}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-active: var(--color-forest-700);--color-active-hover: var(--color-uva-white);--color-background-active: var(--color-forest-100);--color-background-active-hover: var(--color-forest-700);--color-background-draft: var(--color-sky-100);--color-background-draft-hover: var(--color-navy-600);--color-background-submitted: var(--color-orange-100);--color-background-submitted-hover: var(--color-orange-900);--color-border-active: var(--color-forest-700);--color-border-draft: var(--color-navy-600);--color-border-submitted: var(--color-orange-900);--color-draft: var(--color-navy-600);--color-draft-hover: var(--color-uva-white);--color-label: var(--color-uva-black);--color-submitted: var(--color-orange-900);--color-submitted-hover: var(--color-uva-white);--
|
|
1
|
+
:root{--color-active: var(--new-color-forest-700);--color-active-hover: var(--new-color-uva-white);--color-background-active: var(--new-color-forest-100);--color-background-active-hover: var(--new-color-forest-700);--color-background-draft: var(--new-color-sky-100);--color-background-draft-hover: var(--new-color-navy-600);--color-background-submitted: var(--new-color-orange-100);--color-background-submitted-hover: var(--new-color-orange-900);--color-border-active: var(--new-color-forest-700);--color-border-draft: var(--new-color-navy-600);--color-border-submitted: var(--new-color-orange-900);--color-draft: var(--new-color-navy-600);--color-draft-hover: var(--new-color-uva-white);--color-label: var(--new-color-uva-black);--color-submitted: var(--new-color-orange-900);--color-submitted-hover: var(--new-color-uva-white);--border-radius-var-indicator: .25rem}._var-indicator__container_1m025_29{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid;border-radius:var(--border-radius-var-indicator);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-size-default);font-weight:var(--semibold);gap:.375rem;height:2rem;justify-content:center;line-height:inherit;margin:0;padding:0 .75rem 0 .5rem;white-space:nowrap}._var-indicator__container--draft_1m025_48,._var-indicator__container--rejected_1m025_49{background-color:var(--color-background-draft);border-color:var(--color-border-draft);color:var(--color-draft)}._var-indicator__container--draft_1m025_48:hover,._var-indicator__container--rejected_1m025_49:hover{background-color:var(--color-background-draft-hover);color:var(--color-draft-hover)}._var-indicator__container--submitted_1m025_61{background-color:var(--color-background-submitted);border-color:var(--color-border-submitted);color:var(--color-submitted)}._var-indicator__container--submitted_1m025_61:hover{background-color:var(--color-background-submitted-hover);color:var(--color-submitted-hover)}._var-indicator__container--active_1m025_72{background-color:var(--color-background-active);border-color:var(--color-border-active);color:var(--color-active)}._var-indicator__container--active_1m025_72:hover{background-color:var(--color-background-active-hover);color:var(--color-active-hover)}._var-indicator__label_1m025_83{color:var(--color-label)}._var-indicator__container--submitted_1m025_61:hover ._var-indicator__label_1m025_83,._var-indicator__container--draft_1m025_48:hover ._var-indicator__label_1m025_83,._var-indicator__container--rejected_1m025_49:hover ._var-indicator__label_1m025_83,._var-indicator__container--active_1m025_72:hover ._var-indicator__label_1m025_83{color:var(--color-uva-white)}._var-indicator__step-container_1m025_94{align-items:center;display:inline flex;height:100%;justify-content:flex-start}._var-indicator__step-container_1m025_94 svg{margin:0 -.5rem}
|
|
@@ -2,11 +2,11 @@ import { jsxs as _, jsx as p } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as e } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { Icon as a } from "../Icon/Icon.js";
|
|
4
4
|
import '../../assets/StatusPill.css';const l = {
|
|
5
|
-
"status-pill": "_status-
|
|
6
|
-
"status-pill__possible": "_status-
|
|
7
|
-
"status-pill__impossible": "_status-
|
|
8
|
-
"status-pill__new": "_status-
|
|
9
|
-
"status-pill--bar": "_status-pill--
|
|
5
|
+
"status-pill": "_status-pill_1df7x_1",
|
|
6
|
+
"status-pill__possible": "_status-pill__possible_1df7x_10",
|
|
7
|
+
"status-pill__impossible": "_status-pill__impossible_1df7x_15",
|
|
8
|
+
"status-pill__new": "_status-pill__new_1df7x_20",
|
|
9
|
+
"status-pill--bar": "_status-pill--bar_1df7x_26"
|
|
10
10
|
}, o = {
|
|
11
11
|
possible: "CheckCircleFillMini",
|
|
12
12
|
impossible: "CrossCircleFillMini"
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { jsxs as r, jsx as _ } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { c as
|
|
2
|
+
import { useRef as u, useState as x } from "react";
|
|
3
|
+
import { c as d } from "../../clsx-OuTLNxxd.js";
|
|
4
4
|
import '../../assets/TextArea.css';const t = {
|
|
5
|
-
"text-area__wrapper": "_text-
|
|
6
|
-
"text-area__header": "_text-
|
|
7
|
-
"text-area__label": "_text-
|
|
8
|
-
"text-area__word-count": "_text-area__word-
|
|
9
|
-
"text-area__word-count--alert": "_text-area__word-count--
|
|
10
|
-
"text-area": "_text-
|
|
5
|
+
"text-area__wrapper": "_text-area__wrapper_13728_1",
|
|
6
|
+
"text-area__header": "_text-area__header_13728_7",
|
|
7
|
+
"text-area__label": "_text-area__label_13728_13",
|
|
8
|
+
"text-area__word-count": "_text-area__word-count_13728_20",
|
|
9
|
+
"text-area__word-count--alert": "_text-area__word-count--alert_13728_25",
|
|
10
|
+
"text-area": "_text-area_13728_1"
|
|
11
11
|
};
|
|
12
|
-
function
|
|
13
|
-
const e =
|
|
12
|
+
function m({ onChange: l, label: c, maxCharacters: a = 0 }) {
|
|
13
|
+
const e = u(null), [n, o] = x(0), s = () => {
|
|
14
14
|
e.current && (e.current.style.height = "auto", e.current.style.height = `${e.current.scrollHeight}px`, o(e.current.value.length), l(e.current.value.trim()));
|
|
15
15
|
};
|
|
16
16
|
return /* @__PURE__ */ r("div", { className: t["text-area__wrapper"], children: [
|
|
17
17
|
/* @__PURE__ */ r("div", { className: t["text-area__header"], children: [
|
|
18
18
|
/* @__PURE__ */ _("span", { className: t["text-area__label"], children: c }),
|
|
19
19
|
a > 0 && /* @__PURE__ */ r("div", { className: t["text-area__word-count"], children: [
|
|
20
|
-
/* @__PURE__ */ _("span", { className:
|
|
20
|
+
/* @__PURE__ */ _("span", { className: d({ [t["text-area__word-count--alert"]]: n === a }), children: n }),
|
|
21
21
|
" / ",
|
|
22
22
|
a
|
|
23
23
|
] })
|
|
@@ -34,6 +34,6 @@ function h({ onChange: l, label: c, maxCharacters: a = 0 }) {
|
|
|
34
34
|
] });
|
|
35
35
|
}
|
|
36
36
|
export {
|
|
37
|
-
|
|
37
|
+
m as TextArea
|
|
38
38
|
};
|
|
39
39
|
//# sourceMappingURL=TextArea.js.map
|
|
@@ -1,58 +1,58 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as e, jsxs as _ } from "react/jsx-runtime";
|
|
2
2
|
import { c as a } from "../../clsx-OuTLNxxd.js";
|
|
3
|
-
import '../../assets/ToggleSwitch.css';const
|
|
4
|
-
"toggle-switch": "_toggle-
|
|
5
|
-
"toggle-switch__visible": "_toggle-
|
|
6
|
-
"toggle-switch--disabled": "_toggle-switch--
|
|
7
|
-
"toggle-switch--loading": "_toggle-switch--
|
|
8
|
-
"toggle-switch--visually-hidden": "_toggle-switch--visually-
|
|
9
|
-
"toggle-switch--disabled-label": "_toggle-switch--disabled-
|
|
10
|
-
"toggle-switch--loading-cursor": "_toggle-switch--loading-
|
|
11
|
-
"toggle-switch--extra-left-gap": "_toggle-switch--extra-left-
|
|
3
|
+
import '../../assets/ToggleSwitch.css';const l = {
|
|
4
|
+
"toggle-switch": "_toggle-switch_98blk_1",
|
|
5
|
+
"toggle-switch__visible": "_toggle-switch__visible_98blk_9",
|
|
6
|
+
"toggle-switch--disabled": "_toggle-switch--disabled_98blk_52",
|
|
7
|
+
"toggle-switch--loading": "_toggle-switch--loading_98blk_62",
|
|
8
|
+
"toggle-switch--visually-hidden": "_toggle-switch--visually-hidden_98blk_72",
|
|
9
|
+
"toggle-switch--disabled-label": "_toggle-switch--disabled-label_98blk_85",
|
|
10
|
+
"toggle-switch--loading-cursor": "_toggle-switch--loading-cursor_98blk_89",
|
|
11
|
+
"toggle-switch--extra-left-gap": "_toggle-switch--extra-left-gap_98blk_93"
|
|
12
12
|
};
|
|
13
13
|
function n({
|
|
14
14
|
condition: i,
|
|
15
15
|
wrapper: g,
|
|
16
|
-
children:
|
|
16
|
+
children: t
|
|
17
17
|
}) {
|
|
18
|
-
return i ? g(
|
|
18
|
+
return i ? g(t) : t;
|
|
19
19
|
}
|
|
20
|
-
function
|
|
20
|
+
function b({
|
|
21
21
|
label: i,
|
|
22
22
|
labelPosition: g = "after",
|
|
23
|
-
labelVisible:
|
|
23
|
+
labelVisible: t = !0,
|
|
24
24
|
loading: o = !1,
|
|
25
25
|
extraLeftGap: d,
|
|
26
26
|
...s
|
|
27
27
|
}) {
|
|
28
|
-
const c = /* @__PURE__ */
|
|
28
|
+
const c = /* @__PURE__ */ e(
|
|
29
29
|
"span",
|
|
30
30
|
{
|
|
31
31
|
className: a(
|
|
32
|
-
{ [
|
|
33
|
-
{ [
|
|
32
|
+
{ [l["toggle-switch--visually-hidden"]]: !t },
|
|
33
|
+
{ [l["toggle-switch--disabled-label"]]: s.disabled }
|
|
34
34
|
),
|
|
35
35
|
children: i
|
|
36
36
|
}
|
|
37
37
|
);
|
|
38
|
-
return /* @__PURE__ */
|
|
38
|
+
return /* @__PURE__ */ e(
|
|
39
39
|
n,
|
|
40
40
|
{
|
|
41
41
|
condition: o,
|
|
42
|
-
wrapper: (h) => /* @__PURE__ */
|
|
42
|
+
wrapper: (h) => /* @__PURE__ */ e("div", { className: l["toggle-switch--loading-cursor"], children: h }),
|
|
43
43
|
children: /* @__PURE__ */ _(
|
|
44
44
|
"label",
|
|
45
45
|
{
|
|
46
46
|
className: a(
|
|
47
|
-
|
|
48
|
-
{ [
|
|
49
|
-
{ [
|
|
50
|
-
{ [
|
|
47
|
+
l["toggle-switch"],
|
|
48
|
+
{ [l["toggle-switch--disabled"]]: s.disabled },
|
|
49
|
+
{ [l["toggle-switch--loading"]]: o },
|
|
50
|
+
{ [l["toggle-switch--extra-left-gap"]]: d }
|
|
51
51
|
),
|
|
52
52
|
children: [
|
|
53
53
|
g === "before" && c,
|
|
54
|
-
/* @__PURE__ */
|
|
55
|
-
/* @__PURE__ */
|
|
54
|
+
/* @__PURE__ */ e("input", { className: l["toggle-switch--visually-hidden"], ...s, type: "checkbox" }),
|
|
55
|
+
/* @__PURE__ */ e("span", { className: l["toggle-switch__visible"], title: t ? "" : i }),
|
|
56
56
|
g === "after" && c
|
|
57
57
|
]
|
|
58
58
|
}
|
|
@@ -61,6 +61,6 @@ function f({
|
|
|
61
61
|
);
|
|
62
62
|
}
|
|
63
63
|
export {
|
|
64
|
-
|
|
64
|
+
b as ToggleSwitch
|
|
65
65
|
};
|
|
66
66
|
//# sourceMappingURL=ToggleSwitch.js.map
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as y, useState as E, useCallback as b, useEffect as
|
|
3
|
-
import '../../assets/Tooltip.css';const
|
|
4
|
-
"tooltip-container": "_tooltip-
|
|
5
|
-
tooltip_small:
|
|
6
|
-
tooltip_medium:
|
|
7
|
-
tooltip_large:
|
|
8
|
-
"tooltip_under-trigger": "_tooltip_under-
|
|
1
|
+
import { jsxs as B, jsx as R } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as y, useState as E, useCallback as b, useEffect as a } from "react";
|
|
3
|
+
import '../../assets/Tooltip.css';const M = "_tooltip_small_622pq_8", j = "_tooltip_medium_622pq_9", I = "_tooltip_large_622pq_10", f = {
|
|
4
|
+
"tooltip-container": "_tooltip-container_622pq_1",
|
|
5
|
+
tooltip_small: M,
|
|
6
|
+
tooltip_medium: j,
|
|
7
|
+
tooltip_large: I,
|
|
8
|
+
"tooltip_under-trigger": "_tooltip_under-trigger_622pq_64"
|
|
9
9
|
};
|
|
10
|
-
function
|
|
11
|
-
const l = y(null), c = y(null), [i, o] = E(!1), [d,
|
|
10
|
+
function X({ element: q, id: _, text: L, size: n = "medium", openUnderTrigger: s = !1 }) {
|
|
11
|
+
const l = y(null), c = y(null), [i, o] = E(!1), [d, k] = E({ top: 0, left: 0 }), m = n === "small" && 20 || n === "large" && 35 || 27, g = n === "small" && 25 || n === "large" && 70 || 47, e = b(() => {
|
|
12
12
|
if (l.current && c.current) {
|
|
13
|
-
const t = l.current.getBoundingClientRect(), h = c.current.getBoundingClientRect(),
|
|
14
|
-
let r = t.top +
|
|
15
|
-
const
|
|
16
|
-
r -=
|
|
13
|
+
const t = l.current.getBoundingClientRect(), h = c.current.getBoundingClientRect(), p = window.scrollY, C = window.scrollX;
|
|
14
|
+
let r = t.top + p + m - h.height;
|
|
15
|
+
const O = t.left + C + g + (t.width - h.width) / 2;
|
|
16
|
+
r -= p, r < 0 && (r = t.bottom + p), k({ top: r, left: O });
|
|
17
17
|
}
|
|
18
|
-
}, [
|
|
18
|
+
}, [g, m]), u = b(
|
|
19
19
|
(t) => {
|
|
20
20
|
t.key === "Escape" && o(!1);
|
|
21
21
|
},
|
|
@@ -27,20 +27,20 @@ function Y({ element: L, id: _, text: k, size: n = "medium", openUnderTrigger: s
|
|
|
27
27
|
function v() {
|
|
28
28
|
o(!1);
|
|
29
29
|
}
|
|
30
|
-
function
|
|
30
|
+
function x() {
|
|
31
31
|
o(!i);
|
|
32
32
|
}
|
|
33
|
-
return
|
|
33
|
+
return a(() => {
|
|
34
34
|
if (!l.current) return;
|
|
35
35
|
const t = l.current;
|
|
36
36
|
return t.addEventListener("keyup", u, !0), () => {
|
|
37
37
|
t.removeEventListener("keyup", u, !0);
|
|
38
38
|
};
|
|
39
|
-
}, [u]),
|
|
39
|
+
}, [u]), a(() => (e(), window.addEventListener("resize", e), () => {
|
|
40
40
|
window.removeEventListener("resize", e);
|
|
41
|
-
}), [e]),
|
|
41
|
+
}), [e]), a(() => {
|
|
42
42
|
i && !s && e();
|
|
43
|
-
}, [i, s, e]), /* @__PURE__ */
|
|
43
|
+
}, [i, s, e]), /* @__PURE__ */ B(
|
|
44
44
|
"div",
|
|
45
45
|
{
|
|
46
46
|
className: f["tooltip-container"],
|
|
@@ -48,12 +48,12 @@ function Y({ element: L, id: _, text: k, size: n = "medium", openUnderTrigger: s
|
|
|
48
48
|
onFocus: w,
|
|
49
49
|
onMouseEnter: w,
|
|
50
50
|
onMouseLeave: v,
|
|
51
|
-
onMouseUp:
|
|
51
|
+
onMouseUp: x,
|
|
52
52
|
ref: l,
|
|
53
53
|
role: "button",
|
|
54
54
|
tabIndex: -1,
|
|
55
55
|
children: [
|
|
56
|
-
/* @__PURE__ */ R("div", { "aria-describedby": i ? _ : void 0, children:
|
|
56
|
+
/* @__PURE__ */ R("div", { "aria-describedby": i ? _ : void 0, children: q }),
|
|
57
57
|
i && /* @__PURE__ */ R(
|
|
58
58
|
"span",
|
|
59
59
|
{
|
|
@@ -62,7 +62,7 @@ function Y({ element: L, id: _, text: k, size: n = "medium", openUnderTrigger: s
|
|
|
62
62
|
id: _,
|
|
63
63
|
role: "tooltip",
|
|
64
64
|
style: s ? {} : { top: d.top, left: d.left },
|
|
65
|
-
children:
|
|
65
|
+
children: L
|
|
66
66
|
}
|
|
67
67
|
)
|
|
68
68
|
]
|
|
@@ -70,6 +70,6 @@ function Y({ element: L, id: _, text: k, size: n = "medium", openUnderTrigger: s
|
|
|
70
70
|
);
|
|
71
71
|
}
|
|
72
72
|
export {
|
|
73
|
-
|
|
73
|
+
X as Tooltip
|
|
74
74
|
};
|
|
75
75
|
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import { jsxs as l, jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import { c as
|
|
2
|
+
import { c as m } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { Icon as c } from "../Icon/Icon.js";
|
|
4
4
|
import '../../assets/VarIndicator.css';const i = {
|
|
5
|
-
"var-indicator__container": "_var-
|
|
6
|
-
"var-indicator__container--draft": "_var-indicator__container--
|
|
7
|
-
"var-indicator__container--rejected": "_var-indicator__container--
|
|
8
|
-
"var-indicator__container--submitted": "_var-indicator__container--
|
|
9
|
-
"var-indicator__container--active": "_var-indicator__container--
|
|
10
|
-
"var-indicator__label": "_var-
|
|
11
|
-
"var-indicator__step-container": "_var-indicator__step-
|
|
12
|
-
},
|
|
5
|
+
"var-indicator__container": "_var-indicator__container_1m025_29",
|
|
6
|
+
"var-indicator__container--draft": "_var-indicator__container--draft_1m025_48",
|
|
7
|
+
"var-indicator__container--rejected": "_var-indicator__container--rejected_1m025_49",
|
|
8
|
+
"var-indicator__container--submitted": "_var-indicator__container--submitted_1m025_61",
|
|
9
|
+
"var-indicator__container--active": "_var-indicator__container--active_1m025_72",
|
|
10
|
+
"var-indicator__label": "_var-indicator__label_1m025_83",
|
|
11
|
+
"var-indicator__step-container": "_var-indicator__step-container_1m025_94"
|
|
12
|
+
}, s = {
|
|
13
13
|
DRAFT: "CircleLarge",
|
|
14
14
|
REJECTED: "CircleLarge",
|
|
15
15
|
SUBMITTED: "CircleLargeDotted",
|
|
16
16
|
ACTIVE: "SignalActive"
|
|
17
|
-
},
|
|
17
|
+
}, E = ({ label: t, variant: r = "DRAFT", maxSteps: n, currentStep: e = 1, onClick: o }) => /* @__PURE__ */ l(
|
|
18
18
|
"button",
|
|
19
19
|
{
|
|
20
|
-
className:
|
|
20
|
+
className: m(i["var-indicator__container"], i[`var-indicator__container--${r.toLowerCase()}`]),
|
|
21
21
|
onClick: o,
|
|
22
22
|
children: [
|
|
23
|
-
/* @__PURE__ */ a(c, { name:
|
|
23
|
+
/* @__PURE__ */ a(c, { name: s[r], size: 16 }),
|
|
24
24
|
/* @__PURE__ */ a("span", { className: i["var-indicator__label"], children: t[`${r}`] }),
|
|
25
25
|
n && n > 0 && r === "SUBMITTED" ? Array.from({ length: n }, (_, d) => d + 1).map((_) => /* @__PURE__ */ a("div", { className: i["var-indicator__step-container"], children: /* @__PURE__ */ a(c, { name: _ <= e ? "CircleSmallFilled" : "CircleSmall" }) }, _)) : null
|
|
26
26
|
]
|
|
27
27
|
}
|
|
28
28
|
);
|
|
29
29
|
export {
|
|
30
|
-
|
|
30
|
+
E as VarIndicator
|
|
31
31
|
};
|
|
32
32
|
//# sourceMappingURL=VarIndicator.js.map
|
package/dist/components/index.js
CHANGED
|
@@ -13,7 +13,7 @@ import { Checkbox as I } from "./Checkbox/Checkbox.js";
|
|
|
13
13
|
import { CheckboxButton as h } from "./CheckboxButton/CheckboxButton.js";
|
|
14
14
|
import { CheckboxButtonBar as P } from "./CheckboxButtonBar/CheckboxButtonBar.js";
|
|
15
15
|
import { CheckboxTree as y } from "./CheckboxTree/CheckboxTree.js";
|
|
16
|
-
import { Chip as
|
|
16
|
+
import { Chip as v } from "./Chip/Chip.js";
|
|
17
17
|
import { Drawer as w } from "./Drawer/Drawer.js";
|
|
18
18
|
import { EmptyStateDataDisplay as O } from "./EmptyStateDataDisplay/EmptyStateDataDisplay.js";
|
|
19
19
|
import { FeedbackBar as H } from "./FeedbackBar/FeedbackBar.js";
|
|
@@ -40,7 +40,7 @@ import { OverlayStepBar as Lo } from "./OverlayStepBar/OverlayStepBar.js";
|
|
|
40
40
|
import { PageOverlay as Ao } from "./PageOverlay/PageOverlay.js";
|
|
41
41
|
import { Periods as Ro } from "./Periods/Periods.js";
|
|
42
42
|
import { PeriodSelector as Do } from "./PeriodSelector/PeriodSelector.js";
|
|
43
|
-
import { ProgrammeCard as
|
|
43
|
+
import { ProgrammeCard as To } from "./ProgrammeCard/ProgrammeCard.js";
|
|
44
44
|
import { RadioButton as Go } from "./RadioButton/RadioButton.js";
|
|
45
45
|
import { RadioGroup as Eo } from "./RadioGroup/RadioGroup.js";
|
|
46
46
|
import { Repeater as zo } from "./Repeater/Repeater.js";
|
|
@@ -53,10 +53,9 @@ import { Spinner as $o } from "./Spinner/Spinner.js";
|
|
|
53
53
|
import { StatusBadge as rr } from "./StatusBadge/StatusBage.js";
|
|
54
54
|
import { StatusPill as er } from "./StatusPill/StatusPill.js";
|
|
55
55
|
import { TextArea as xr } from "./TextArea/TextArea.js";
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import { VarIndicator as dr } from "./VarIndicator/VarIndicator.js";
|
|
56
|
+
import { ToggleSwitch as fr } from "./ToggleSwitch/ToggleSwitch.js";
|
|
57
|
+
import { Tooltip as ir } from "./Tooltip/Tooltip.js";
|
|
58
|
+
import { VarIndicator as lr } from "./VarIndicator/VarIndicator.js";
|
|
60
59
|
export {
|
|
61
60
|
t as Accordion,
|
|
62
61
|
p as AccordionCard,
|
|
@@ -71,7 +70,7 @@ export {
|
|
|
71
70
|
h as CheckboxButton,
|
|
72
71
|
P as CheckboxButtonBar,
|
|
73
72
|
y as CheckboxTree,
|
|
74
|
-
|
|
73
|
+
v as Chip,
|
|
75
74
|
w as Drawer,
|
|
76
75
|
O as EmptyStateDataDisplay,
|
|
77
76
|
H as FeedbackBar,
|
|
@@ -100,7 +99,7 @@ export {
|
|
|
100
99
|
Ao as PageOverlay,
|
|
101
100
|
Do as PeriodSelector,
|
|
102
101
|
Ro as Periods,
|
|
103
|
-
|
|
102
|
+
To as ProgrammeCard,
|
|
104
103
|
Go as RadioButton,
|
|
105
104
|
Eo as RadioGroup,
|
|
106
105
|
zo as Repeater,
|
|
@@ -114,10 +113,9 @@ export {
|
|
|
114
113
|
rr as StatusBadge,
|
|
115
114
|
er as StatusPill,
|
|
116
115
|
xr as TextArea,
|
|
117
|
-
fr as
|
|
118
|
-
ir as
|
|
119
|
-
lr as
|
|
120
|
-
dr as VarIndicator,
|
|
116
|
+
fr as ToggleSwitch,
|
|
117
|
+
ir as Tooltip,
|
|
118
|
+
lr as VarIndicator,
|
|
121
119
|
Xo as useSelect
|
|
122
120
|
};
|
|
123
121
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -13,7 +13,7 @@ import { Checkbox as I } from "./components/Checkbox/Checkbox.js";
|
|
|
13
13
|
import { CheckboxButton as h } from "./components/CheckboxButton/CheckboxButton.js";
|
|
14
14
|
import { CheckboxButtonBar as P } from "./components/CheckboxButtonBar/CheckboxButtonBar.js";
|
|
15
15
|
import { CheckboxTree as y } from "./components/CheckboxTree/CheckboxTree.js";
|
|
16
|
-
import { Chip as
|
|
16
|
+
import { Chip as v } from "./components/Chip/Chip.js";
|
|
17
17
|
import { Drawer as w } from "./components/Drawer/Drawer.js";
|
|
18
18
|
import { EmptyStateDataDisplay as O } from "./components/EmptyStateDataDisplay/EmptyStateDataDisplay.js";
|
|
19
19
|
import { FeedbackBar as H } from "./components/FeedbackBar/FeedbackBar.js";
|
|
@@ -40,7 +40,7 @@ import { OverlayStepBar as Lo } from "./components/OverlayStepBar/OverlayStepBar
|
|
|
40
40
|
import { PageOverlay as Ao } from "./components/PageOverlay/PageOverlay.js";
|
|
41
41
|
import { Periods as Ro } from "./components/Periods/Periods.js";
|
|
42
42
|
import { PeriodSelector as Do } from "./components/PeriodSelector/PeriodSelector.js";
|
|
43
|
-
import { ProgrammeCard as
|
|
43
|
+
import { ProgrammeCard as To } from "./components/ProgrammeCard/ProgrammeCard.js";
|
|
44
44
|
import { RadioButton as Go } from "./components/RadioButton/RadioButton.js";
|
|
45
45
|
import { RadioGroup as Eo } from "./components/RadioGroup/RadioGroup.js";
|
|
46
46
|
import { Repeater as zo } from "./components/Repeater/Repeater.js";
|
|
@@ -53,10 +53,9 @@ import { Spinner as $o } from "./components/Spinner/Spinner.js";
|
|
|
53
53
|
import { StatusBadge as rr } from "./components/StatusBadge/StatusBage.js";
|
|
54
54
|
import { StatusPill as er } from "./components/StatusPill/StatusPill.js";
|
|
55
55
|
import { TextArea as xr } from "./components/TextArea/TextArea.js";
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import { VarIndicator as dr } from "./components/VarIndicator/VarIndicator.js";
|
|
56
|
+
import { ToggleSwitch as fr } from "./components/ToggleSwitch/ToggleSwitch.js";
|
|
57
|
+
import { Tooltip as ir } from "./components/Tooltip/Tooltip.js";
|
|
58
|
+
import { VarIndicator as lr } from "./components/VarIndicator/VarIndicator.js";
|
|
60
59
|
export {
|
|
61
60
|
t as Accordion,
|
|
62
61
|
p as AccordionCard,
|
|
@@ -71,7 +70,7 @@ export {
|
|
|
71
70
|
h as CheckboxButton,
|
|
72
71
|
P as CheckboxButtonBar,
|
|
73
72
|
y as CheckboxTree,
|
|
74
|
-
|
|
73
|
+
v as Chip,
|
|
75
74
|
w as Drawer,
|
|
76
75
|
O as EmptyStateDataDisplay,
|
|
77
76
|
H as FeedbackBar,
|
|
@@ -100,7 +99,7 @@ export {
|
|
|
100
99
|
Ao as PageOverlay,
|
|
101
100
|
Do as PeriodSelector,
|
|
102
101
|
Ro as Periods,
|
|
103
|
-
|
|
102
|
+
To as ProgrammeCard,
|
|
104
103
|
Go as RadioButton,
|
|
105
104
|
Eo as RadioGroup,
|
|
106
105
|
zo as Repeater,
|
|
@@ -114,10 +113,9 @@ export {
|
|
|
114
113
|
rr as StatusBadge,
|
|
115
114
|
er as StatusPill,
|
|
116
115
|
xr as TextArea,
|
|
117
|
-
fr as
|
|
118
|
-
ir as
|
|
119
|
-
lr as
|
|
120
|
-
dr as VarIndicator,
|
|
116
|
+
fr as ToggleSwitch,
|
|
117
|
+
ir as Tooltip,
|
|
118
|
+
lr as VarIndicator,
|
|
121
119
|
Xo as useSelect
|
|
122
120
|
};
|
|
123
121
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { jsxs as d, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { c as m } from "./clsx-OuTLNxxd.js";
|
|
3
|
-
import './assets/TimelineItem.css';const f = "_timeline__container_14ed5_20", u = "_timeline__list_14ed5_40", v = "_timeline__item_14ed5_47", e = {
|
|
4
|
-
timeline__container: f,
|
|
5
|
-
"timeline__button-container": "_timeline__button-container_14ed5_31",
|
|
6
|
-
"timeline__button-container--active": "_timeline__button-container--active_14ed5_36",
|
|
7
|
-
timeline__list: u,
|
|
8
|
-
timeline__item: v,
|
|
9
|
-
"timeline__item--todo": "_timeline__item--todo_14ed5_78",
|
|
10
|
-
"timeline__item-title": "_timeline__item-title_14ed5_86",
|
|
11
|
-
"timeline__item--current": "_timeline__item--current_14ed5_106",
|
|
12
|
-
"timeline__item--rejected": "_timeline__item--rejected_14ed5_121",
|
|
13
|
-
"timeline__item--draft": "_timeline__item--draft_14ed5_129",
|
|
14
|
-
"timeline__item-label": "_timeline__item-label_14ed5_140",
|
|
15
|
-
"timeline__item-dark-label": "_timeline__item-dark-label_14ed5_141",
|
|
16
|
-
"timeline__item-card": "_timeline__item-card_14ed5_152",
|
|
17
|
-
"timeline__item--verified": "_timeline__item--verified_14ed5_164",
|
|
18
|
-
"timeline__item--submitted": "_timeline__item--submitted_14ed5_192"
|
|
19
|
-
}, N = ({
|
|
20
|
-
title: r,
|
|
21
|
-
type: i,
|
|
22
|
-
reason: c,
|
|
23
|
-
subtitle: n,
|
|
24
|
-
tasks: l,
|
|
25
|
-
completed: _ = !1,
|
|
26
|
-
position: s
|
|
27
|
-
}) => /* @__PURE__ */ d(
|
|
28
|
-
"li",
|
|
29
|
-
{
|
|
30
|
-
className: m(e.timeline__item, {
|
|
31
|
-
[e["timeline__item--active"]]: i === "active" && !_,
|
|
32
|
-
[e["timeline__item--todo"]]: i === "active" && !_ || i === "submitted" && !_,
|
|
33
|
-
[e["timeline__item--submitted"]]: i === "submitted" && !_,
|
|
34
|
-
[e["timeline__item--draft"]]: i === "draft",
|
|
35
|
-
[e["timeline__item--current"]]: i === "draft" && s === 0,
|
|
36
|
-
[e["timeline__item--rejected"]]: i === "rejected",
|
|
37
|
-
[e["timeline__item--submitted"]]: i === "submitted",
|
|
38
|
-
[e["timeline__item--verified"]]: i === "verified"
|
|
39
|
-
}),
|
|
40
|
-
children: [
|
|
41
|
-
/* @__PURE__ */ t("span", { className: e["timeline__item-title"], "data-reason": c, children: r }),
|
|
42
|
-
n && /* @__PURE__ */ t("span", { className: e["timeline__item-dark-label"], children: n }),
|
|
43
|
-
l && l.map(({ title: a, assignee: o }, b) => /* @__PURE__ */ d("div", { className: e["timeline__item-card"], children: [
|
|
44
|
-
/* @__PURE__ */ t(
|
|
45
|
-
"span",
|
|
46
|
-
{
|
|
47
|
-
className: m(i === "rejected" ? e["timeline__item-dark-label"] : e["timeline__item-label"]),
|
|
48
|
-
children: a
|
|
49
|
-
}
|
|
50
|
-
),
|
|
51
|
-
/* @__PURE__ */ t("span", { className: m(i === "rejected" ? e["timeline__item-label"] : e["timeline__item-info"]), children: o })
|
|
52
|
-
] }, `${a}_${b}`))
|
|
53
|
-
]
|
|
54
|
-
}
|
|
55
|
-
);
|
|
56
|
-
export {
|
|
57
|
-
N as T,
|
|
58
|
-
e as s
|
|
59
|
-
};
|
|
60
|
-
//# sourceMappingURL=TimelineItem-ClDZJkaZ.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem-ClDZJkaZ.js","sources":["../src/components/Timeline/TimelineItem.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport type { TimelineItemProps } from './Timeline';\n\nimport styles from 'components/Timeline/Timeline.module.css';\n\nexport const TimelineItem = ({\n title,\n type,\n reason,\n subtitle,\n tasks,\n completed = false,\n position,\n}: TimelineItemProps) => (\n <li\n className={clsx(styles['timeline__item'], {\n [styles['timeline__item--active']]: type === 'active' && !completed,\n [styles['timeline__item--todo']]: (type === 'active' && !completed) || (type === 'submitted' && !completed),\n [styles['timeline__item--submitted']]: type === 'submitted' && !completed,\n\n [styles['timeline__item--draft']]: type === 'draft',\n [styles['timeline__item--current']]: type === 'draft' && position === 0,\n [styles['timeline__item--rejected']]: type === 'rejected',\n [styles['timeline__item--submitted']]: type === 'submitted',\n [styles['timeline__item--verified']]: type === 'verified',\n })}\n >\n <span className={styles['timeline__item-title']} data-reason={reason}>\n {title}\n </span>\n {subtitle && <span className={styles['timeline__item-dark-label']}>{subtitle}</span>}\n {tasks &&\n tasks.map(({ title, assignee }, idx) => (\n <div className={styles['timeline__item-card']} key={`${title}_${idx}`}>\n <span\n className={clsx(type === 'rejected' ? styles['timeline__item-dark-label'] : styles['timeline__item-label'])}\n >\n {title}\n </span>\n <span className={clsx(type === 'rejected' ? styles['timeline__item-label'] : styles['timeline__item-info'])}>\n {assignee}\n </span>\n </div>\n ))}\n </li>\n);\n"],"names":["TimelineItem","title","type","reason","subtitle","tasks","completed","position","jsxs","clsx","styles","jsx","assignee","idx"],"mappings":";;;;;;;;;;;;;;;;;;GAMaA,IAAe,CAAC;AAAA,EAC3B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACF,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,gBAAmB;AAAA,MACxC,CAACA,EAAO,wBAAwB,CAAC,GAAGR,MAAS,YAAY,CAACI;AAAA,MAC1D,CAACI,EAAO,sBAAsB,CAAC,GAAIR,MAAS,YAAY,CAACI,KAAeJ,MAAS,eAAe,CAACI;AAAA,MACjG,CAACI,EAAO,2BAA2B,CAAC,GAAGR,MAAS,eAAe,CAACI;AAAA,MAEhE,CAACI,EAAO,uBAAuB,CAAC,GAAGR,MAAS;AAAA,MAC5C,CAACQ,EAAO,yBAAyB,CAAC,GAAGR,MAAS,WAAWK,MAAa;AAAA,MACtE,CAACG,EAAO,0BAA0B,CAAC,GAAGR,MAAS;AAAA,MAC/C,CAACQ,EAAO,2BAA2B,CAAC,GAAGR,MAAS;AAAA,MAChD,CAACQ,EAAO,0BAA0B,CAAC,GAAGR,MAAS;AAAA,IAAA,CAChD;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAS,EAAC,UAAK,WAAWD,EAAO,sBAAsB,GAAG,eAAaP,GAC3D,UACHF,GAAA;AAAA,MACCG,KAAa,gBAAAO,EAAA,QAAA,EAAK,WAAWD,EAAO,2BAA2B,GAAI,UAASN,GAAA;AAAA,MAC5EC,KACCA,EAAM,IAAI,CAAC,EAAE,OAAAJ,GAAO,UAAAW,EAAS,GAAGC,MAC7B,gBAAAL,EAAA,OAAA,EAAI,WAAWE,EAAO,qBAAqB,GAC1C,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKP,MAAS,aAAaQ,EAAO,2BAA2B,IAAIA,EAAO,sBAAsB,CAAC;AAAA,YAEzG,UAAAT;AAAAA,UAAA;AAAA,QACH;AAAA,QACC,gBAAAU,EAAA,QAAA,EAAK,WAAWF,EAAKP,MAAS,aAAaQ,EAAO,sBAAsB,IAAIA,EAAO,qBAAqB,CAAC,GACvG,UACHE,EAAA,CAAA;AAAA,MAAA,EAAA,GARkD,GAAGX,CAAK,IAAIY,CAAG,EASnE,CACD;AAAA,IAAA;AAAA,EAAA;AACL;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--gray-100: #faf9f9;--gray-200: #f5f4f4;--gray-300: #e7e5e4;--gray-400: #d6d3d1;--gray-500: #a8a19e;--gray-600: #78706c;--gray-700: #57514e;--gray-800: #433f3d;--gray-900: #282625;--uva-black: #000;--uva-white: #fff}._timeline__container_14ed5_20{align-items:flex-start;background-color:var(--uva-white);display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding:.25rem 1rem;width:100%}._timeline__button-container_14ed5_31{margin-bottom:-.25rem;margin-left:1.5rem}._timeline__button-container--active_14ed5_36{margin-bottom:.75rem}._timeline__list_14ed5_40{list-style:none;margin:0;padding:0;width:100%}._timeline__item_14ed5_47{display:flex;flex-direction:column;padding-bottom:1.25rem;position:relative;width:100%}._timeline__item_14ed5_47:empty{min-height:1rem}._timeline__item_14ed5_47:not(:last-child):before{background-color:var(--uva-black);border:none;bottom:-1.25rem;content:"";left:.25rem;position:absolute;top:.825rem;width:1px}._timeline__item_14ed5_47:last-child{padding-bottom:0}._timeline__item_14ed5_47:nth-last-child(2):before{bottom:-.5rem}._timeline__item--todo_14ed5_78:not(:last-child):before{background:repeating-linear-gradient(to bottom,transparent 0 4px,var(--gray-400) 4px 8px) 80%/2px 100% no-repeat}._timeline__item_14ed5_47:empty:before{top:-1rem}._timeline__item-title_14ed5_86{align-items:center;display:inline-flex;font-family:inherit;font-size:var(--font-size-sm);margin-bottom:.25rem;position:relative}._timeline__item-title_14ed5_86:before{background-color:var(--uva-black);border-radius:50%;content:"";height:.375rem;margin-left:.0625rem;margin-right:1.0625rem;position:relative;width:.375rem}._timeline__item--current_14ed5_106 ._timeline__item-title_14ed5_86{font-weight:var(--semibold)}._timeline__item--current_14ed5_106 ._timeline__item-title_14ed5_86:before{height:.5rem;margin-left:0;margin-right:1rem;width:.5rem}._timeline__item--todo_14ed5_78 ._timeline__item-title_14ed5_86:before{background-color:var(--gray-400)}._timeline__item--rejected_14ed5_121 ._timeline__item-title_14ed5_86:before{border-radius:0;height:.125rem;margin-left:0;margin-right:1rem;width:.5rem}._timeline__item--draft_14ed5_129:last-child ._timeline__item-title_14ed5_86:before{background-color:var(--uva-black);border-radius:50%;content:"";height:.375rem;margin-left:.0625rem;margin-right:1.0625rem;position:relative;width:.375rem}._timeline__item-label_14ed5_140,._timeline__item-dark-label_14ed5_141{color:var(--gray-700);font-size:var(--font-size-text-non-essential)}._timeline__item-dark-label_14ed5_141{color:var(--uva-black);margin-bottom:.25rem;margin-left:1.5rem}._timeline__item-card_14ed5_152{display:flex;flex-direction:column;margin-bottom:.125rem;margin-left:1.5rem;padding:.5rem 0}._timeline__item-card_14ed5_152 ._timeline__item-dark-label_14ed5_141{margin-left:0}._timeline__item--verified_14ed5_164 ._timeline__item-card_14ed5_152{margin-top:-.25rem;padding:.125rem 0}._timeline__item--rejected_14ed5_121{margin-bottom:-.25rem}._timeline__item--rejected_14ed5_121 ._timeline__item-card_14ed5_152{margin-top:-.25rem;padding:.125rem 0}._timeline__item--draft_14ed5_129{margin-bottom:.5rem}._timeline__item--draft_14ed5_129 ._timeline__item-card_14ed5_152{margin-top:-.25rem;padding:.125rem 0}._timeline__item--todo_14ed5_78 ._timeline__item-card_14ed5_152{background-color:var(--gray-200);padding:.5rem .75rem}._timeline__item--submitted_14ed5_192:not(._timeline__item--todo_14ed5_78){margin-bottom:-.25rem}._timeline__item--submitted_14ed5_192:not(._timeline__item--todo_14ed5_78) ._timeline__item-card_14ed5_152{margin-top:-.25rem;padding:.125rem 0}._timeline__item--draft_14ed5_129:not(:last-child) ._timeline__item-card_14ed5_152{background-color:var(--gray-200);padding:.5rem .75rem}._timeline__item--verified_14ed5_164{margin-bottom:-.25rem}._timeline__item--verified_14ed5_164 ._timeline__item-title_14ed5_86:after{background-color:var(--gray-200);color:var(--color-grey-500);content:attr(data-reason);font-size:var(--font-size-text-non-essential);margin-left:.5rem;padding:.25rem .5rem}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
type NodeTypes = 'active' | 'draft' | 'rejected' | 'verified' | 'submitted';
|
|
2
|
-
export interface TimelineItemProps {
|
|
3
|
-
title: string;
|
|
4
|
-
type: NodeTypes;
|
|
5
|
-
reason?: string;
|
|
6
|
-
subtitle?: string;
|
|
7
|
-
tasks?: {
|
|
8
|
-
title?: string;
|
|
9
|
-
assignee?: string;
|
|
10
|
-
}[];
|
|
11
|
-
completed: boolean;
|
|
12
|
-
position: number;
|
|
13
|
-
}
|
|
14
|
-
export interface TimelineProps {
|
|
15
|
-
/** Is the task is completed */
|
|
16
|
-
timelineData: TimelineItemProps[];
|
|
17
|
-
/** Label of the button is inclomplete tasks are hidden */
|
|
18
|
-
showLabel: string;
|
|
19
|
-
/** Label of the button is inclomplete tasks are shown */
|
|
20
|
-
hideLabel: string;
|
|
21
|
-
}
|
|
22
|
-
export declare const Timeline: ({ timelineData, showLabel, hideLabel }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
export {};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { jsxs as s, jsx as n, Fragment as h } from "react/jsx-runtime";
|
|
2
|
-
import { useState as u, createElement as r } from "react";
|
|
3
|
-
import { c } from "../../clsx-OuTLNxxd.js";
|
|
4
|
-
import { s as t, T as a } from "../../TimelineItem-ClDZJkaZ.js";
|
|
5
|
-
import { Button as T } from "../Buttons/Button.js";
|
|
6
|
-
import "../Buttons/LinkButton.js";
|
|
7
|
-
import "@react-aria/button";
|
|
8
|
-
const y = ({ timelineData: l, showLabel: p, hideLabel: _ }) => {
|
|
9
|
-
const [i, d] = u(!1), f = l.filter((e) => e.completed), m = l.filter((e) => !e.completed);
|
|
10
|
-
return /* @__PURE__ */ s("div", { className: t.timeline__container, children: [
|
|
11
|
-
m.length > 0 && /* @__PURE__ */ n(
|
|
12
|
-
"div",
|
|
13
|
-
{
|
|
14
|
-
className: c(t["timeline__button-container"], [
|
|
15
|
-
i && t["timeline__button-container--active"]
|
|
16
|
-
]),
|
|
17
|
-
children: /* @__PURE__ */ n(T, { variant: "blank-subtle", onClick: () => d(!i), children: i ? `${_}` : `${p}` })
|
|
18
|
-
}
|
|
19
|
-
),
|
|
20
|
-
/* @__PURE__ */ s("ul", { className: t.timeline__list, children: [
|
|
21
|
-
i ? /* @__PURE__ */ n(h, { children: m.map((e, o) => /* @__PURE__ */ r(a, { ...e, key: `${o}_${e.title}` })) }) : /* @__PURE__ */ n("li", { className: c(t.timeline__item, t["timeline__item--todo"]) }),
|
|
22
|
-
f.map((e, o) => /* @__PURE__ */ r(a, { ...e, key: `${o}_${e.title}`, position: o }))
|
|
23
|
-
] })
|
|
24
|
-
] });
|
|
25
|
-
};
|
|
26
|
-
export {
|
|
27
|
-
y as Timeline
|
|
28
|
-
};
|
|
29
|
-
//# sourceMappingURL=Timeline.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.js","sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useState } from 'react';\n\nimport styles from './Timeline.module.css';\n\nimport { TimelineItem } from 'components/Timeline/TimelineItem';\nimport { Button } from 'components/Buttons';\n\ntype NodeTypes = 'active' | 'draft' | 'rejected' | 'verified' | 'submitted';\n\nexport interface TimelineItemProps {\n title: string;\n type: NodeTypes;\n reason?: string;\n subtitle?: string;\n tasks?: {\n title?: string;\n assignee?: string;\n }[];\n completed: boolean;\n position: number;\n}\nexport interface TimelineProps {\n /** Is the task is completed */\n timelineData: TimelineItemProps[];\n /** Label of the button is inclomplete tasks are hidden */\n showLabel: string;\n /** Label of the button is inclomplete tasks are shown */\n hideLabel: string;\n}\n\nexport const Timeline = ({ timelineData, showLabel, hideLabel }: TimelineProps) => {\n const [showTodo, setShowTodo] = useState(false);\n const completedTasks = timelineData.filter((task) => task.completed);\n const pendingTasks = timelineData.filter((task) => !task.completed);\n\n return (\n <div className={styles['timeline__container']}>\n {pendingTasks.length > 0 && (\n <div\n className={clsx(styles['timeline__button-container'], [\n showTodo && styles['timeline__button-container--active'],\n ])}\n >\n <Button variant=\"blank-subtle\" onClick={() => setShowTodo(!showTodo)}>\n {showTodo ? `${hideLabel}` : `${showLabel}`}\n </Button>\n </div>\n )}\n <ul className={styles['timeline__list']}>\n {showTodo ? (\n <>\n {pendingTasks.map((data: TimelineItemProps, idx: number) => (\n <TimelineItem {...data} key={`${idx}_${data.title}`} />\n ))}\n </>\n ) : (\n <li className={clsx(styles['timeline__item'], styles['timeline__item--todo'])}></li>\n )}\n {completedTasks.map((data: TimelineItemProps, idx: number) => (\n <TimelineItem {...data} key={`${idx}_${data.title}`} position={idx} />\n ))}\n </ul>\n </div>\n );\n};\n"],"names":["Timeline","timelineData","showLabel","hideLabel","showTodo","setShowTodo","useState","completedTasks","task","pendingTasks","jsxs","styles","jsx","clsx","Button","Fragment","data","idx","createElement","TimelineItem"],"mappings":";;;;;;;AA+BO,MAAMA,IAAW,CAAC,EAAE,cAAAC,GAAc,WAAAC,GAAW,WAAAC,QAA+B;AACjF,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAiBN,EAAa,OAAO,CAACO,MAASA,EAAK,SAAS,GAC7DC,IAAeR,EAAa,OAAO,CAACO,MAAS,CAACA,EAAK,SAAS;AAElE,SACG,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAO,qBACpB,UAAA;AAAA,IAAAF,EAAa,SAAS,KACrB,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKF,EAAO,4BAA4B,GAAG;AAAA,UACpDP,KAAYO,EAAO,oCAAoC;AAAA,QAAA,CACxD;AAAA,QAED,4BAACG,GAAO,EAAA,SAAQ,gBAAe,SAAS,MAAMT,EAAY,CAACD,CAAQ,GAChE,cAAW,GAAGD,CAAS,KAAK,GAAGD,CAAS,GAC3C,CAAA;AAAA,MAAA;AAAA,IACF;AAAA,IAED,gBAAAQ,EAAA,MAAA,EAAG,WAAWC,EAAO,gBACnB,UAAA;AAAA,MAAAP,IAEI,gBAAAQ,EAAAG,GAAA,EAAA,UAAAN,EAAa,IAAI,CAACO,GAAyBC,MACzC,gBAAAC,EAAAC,GAAA,EAAc,GAAGH,GAAM,KAAK,GAAGC,CAAG,IAAID,EAAK,KAAK,GAAA,CAAI,CACtD,EACH,CAAA,IAEA,gBAAAJ,EAAC,MAAG,EAAA,WAAWC,EAAKF,EAAO,gBAAmBA,EAAO,sBAAsB,CAAC,GAAG;AAAA,MAEhFJ,EAAe,IAAI,CAACS,GAAyBC,MAC5C,gBAAAC,EAACC,KAAc,GAAGH,GAAM,KAAK,GAAGC,CAAG,IAAID,EAAK,KAAK,IAAI,UAAUC,GAAK,CACrE;AAAA,IAAA,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/react';
|
|
2
|
-
import { TimelineProps } from './Timeline';
|
|
3
|
-
declare const _default: Meta<TimelineProps>;
|
|
4
|
-
export default _default;
|
|
5
|
-
export declare const TimelineExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, TimelineProps>;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { Timeline as e } from "./Timeline.js";
|
|
3
|
-
import { MOCK_TIMELINE_ITEM as i } from "./mockTimelineItem.js";
|
|
4
|
-
const n = "<Timeline data=[] showLabel={string} hideLabel={string} />", c = {
|
|
5
|
-
title: "Organisms/Timeline",
|
|
6
|
-
component: e,
|
|
7
|
-
argTypes: {
|
|
8
|
-
timelineData: {
|
|
9
|
-
description: "Data for the timeline",
|
|
10
|
-
control: {
|
|
11
|
-
type: "object"
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
showLabel: {
|
|
15
|
-
description: "Label of the button if inclomplete tasks are hidden",
|
|
16
|
-
control: {
|
|
17
|
-
type: "text"
|
|
18
|
-
}
|
|
19
|
-
},
|
|
20
|
-
hideLabel: {
|
|
21
|
-
description: "Label of the button if inclomplete tasks are shown",
|
|
22
|
-
control: {
|
|
23
|
-
type: "text"
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
parameters: {
|
|
28
|
-
inspectComponent: e,
|
|
29
|
-
codeString: n
|
|
30
|
-
}
|
|
31
|
-
}, a = (t) => /* @__PURE__ */ o(e, { ...t }), s = {
|
|
32
|
-
timelineData: i,
|
|
33
|
-
showLabel: "Toon vervolgstappen",
|
|
34
|
-
hideLabel: "Verberg vervolgstappen"
|
|
35
|
-
}, l = a.bind({});
|
|
36
|
-
l.args = {
|
|
37
|
-
...s
|
|
38
|
-
};
|
|
39
|
-
export {
|
|
40
|
-
l as TimelineExample,
|
|
41
|
-
c as default
|
|
42
|
-
};
|
|
43
|
-
//# sourceMappingURL=Timeline.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.stories.js","sources":["../../../src/components/Timeline/Timeline.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { TimelineProps, TimelineItemProps } from './Timeline';\n\nimport { Timeline } from './Timeline';\nimport { MOCK_TIMELINE_ITEM } from './mockTimelineItem';\n\nconst codeString = '<Timeline data=[] showLabel={string} hideLabel={string} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Organisms/Timeline',\n component: Timeline,\n argTypes: {\n timelineData: {\n description: 'Data for the timeline',\n control: {\n type: 'object',\n },\n },\n showLabel: {\n description: 'Label of the button if inclomplete tasks are hidden',\n control: {\n type: 'text',\n },\n },\n hideLabel: {\n description: 'Label of the button if inclomplete tasks are shown',\n control: {\n type: 'text',\n },\n },\n },\n parameters: {\n inspectComponent: Timeline,\n codeString: codeString,\n },\n} as Meta<TimelineProps>;\n\nconst Template: StoryFn<TimelineProps> = (args) => <Timeline {...args} />;\n\nconst defaultArgs: Partial<TimelineProps> = {\n timelineData: MOCK_TIMELINE_ITEM as TimelineItemProps[],\n showLabel: 'Toon vervolgstappen',\n hideLabel: 'Verberg vervolgstappen',\n};\n\nexport const TimelineExample = Template.bind({});\nTimelineExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","Timeline_stories","Timeline","Template","args","jsx","defaultArgs","MOCK_TIMELINE_ITEM","TimelineExample"],"mappings":";;;AAMA,MAAMA,IAAa,8DAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,aAAa;AAAA,MACb,SAAS;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,MACb,SAAS;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,MACb,SAAS;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAmC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAU,GAAGE,GAAM,GAEjEE,IAAsC;AAAA,EAC1C,cAAcC;AAAA,EACd,WAAW;AAAA,EACX,WAAW;AACb,GAEaC,IAAkBL,EAAS,KAAK,CAAE,CAAA;AAC/CK,EAAgB,OAAO;AAAA,EACrB,GAAGF;AACL;"}
|
|
File without changes
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import "../../index-BqLi4tOb.js";
|
|
3
|
-
import { r as n, s as e, f as i } from "../../react.esm-CsMDid07.js";
|
|
4
|
-
import { MOCK_TIMELINE_ITEM as r } from "./mockTimelineItem.js";
|
|
5
|
-
import "react";
|
|
6
|
-
import "../Buttons/Button.js";
|
|
7
|
-
import "../Buttons/LinkButton.js";
|
|
8
|
-
import "@react-aria/button";
|
|
9
|
-
import "../Checkbox/Checkbox.js";
|
|
10
|
-
import "@react-aria/dialog";
|
|
11
|
-
import "@react-aria/focus";
|
|
12
|
-
import "@react-aria/overlays";
|
|
13
|
-
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
14
|
-
import "../GridRow/GridRow.js";
|
|
15
|
-
import "../IconButton/IconButton.js";
|
|
16
|
-
import "../Input/Input.js";
|
|
17
|
-
import "../InputField/InputField.js";
|
|
18
|
-
import "react-router";
|
|
19
|
-
import "../../TablePlugin-hxs9O_ox.js";
|
|
20
|
-
import "../RteEditor/Providers/LanguageProvider.js";
|
|
21
|
-
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
22
|
-
import "../RteEditor/hooks/components/Flyout.js";
|
|
23
|
-
import "../../index-DllfJcv4.js";
|
|
24
|
-
import "../SelectListbox/SelectListbox.js";
|
|
25
|
-
import "../SelectListbox/SelectProvider.js";
|
|
26
|
-
import "../Sortable/components/SortableItem.js";
|
|
27
|
-
import "../../SortableProvider-B3_u0pKv.js";
|
|
28
|
-
import { Timeline as p } from "./Timeline.js";
|
|
29
|
-
describe("should render", () => {
|
|
30
|
-
it("should render completed items", () => {
|
|
31
|
-
n(
|
|
32
|
-
/* @__PURE__ */ o(
|
|
33
|
-
p,
|
|
34
|
-
{
|
|
35
|
-
timelineData: r,
|
|
36
|
-
showLabel: "Toon vervolgstappen",
|
|
37
|
-
hideLabel: "Verberg vervolgstappen"
|
|
38
|
-
}
|
|
39
|
-
)
|
|
40
|
-
), expect(e.getByText("Concept")).toBeInTheDocument(), expect(e.getByText("Vakgegevens afgewezen")).toBeInTheDocument(), expect(e.getByText("Geverifieerd 1 van 3")).toBeInTheDocument(), expect(e.getByText("Concept ingediend")).toBeInTheDocument(), expect(e.getByText("Aangemaakt")).toBeInTheDocument();
|
|
41
|
-
}), it("should switch label when button is clicked", () => {
|
|
42
|
-
n(
|
|
43
|
-
/* @__PURE__ */ o(
|
|
44
|
-
p,
|
|
45
|
-
{
|
|
46
|
-
timelineData: r,
|
|
47
|
-
showLabel: "Toon vervolgstappen",
|
|
48
|
-
hideLabel: "Verberg vervolgstappen"
|
|
49
|
-
}
|
|
50
|
-
)
|
|
51
|
-
);
|
|
52
|
-
const t = e.getByRole("button", { name: "Toon vervolgstappen" });
|
|
53
|
-
expect(t).toBeInTheDocument(), i.click(t), expect(e.getByText("Verberg vervolgstappen")).toBeInTheDocument();
|
|
54
|
-
}), it("should show incomplete tasks if button is clicked", () => {
|
|
55
|
-
n(
|
|
56
|
-
/* @__PURE__ */ o(
|
|
57
|
-
p,
|
|
58
|
-
{
|
|
59
|
-
timelineData: r,
|
|
60
|
-
showLabel: "Toon vervolgstappen",
|
|
61
|
-
hideLabel: "Verberg vervolgstappen"
|
|
62
|
-
}
|
|
63
|
-
)
|
|
64
|
-
);
|
|
65
|
-
const t = e.getByRole("button", { name: "Toon vervolgstappen" });
|
|
66
|
-
expect(t).toBeInTheDocument(), i.click(t), expect(e.getByText("Verberg vervolgstappen")).toBeInTheDocument(), expect(e.getByText("Actief")).toBeInTheDocument();
|
|
67
|
-
}), it("should not show button if there are no incomplete tasks", () => {
|
|
68
|
-
n(
|
|
69
|
-
/* @__PURE__ */ o(
|
|
70
|
-
p,
|
|
71
|
-
{
|
|
72
|
-
timelineData: r.filter(({ completed: t }) => t),
|
|
73
|
-
showLabel: "Toon vervolgstappen",
|
|
74
|
-
hideLabel: "Verberg vervolgstappen"
|
|
75
|
-
}
|
|
76
|
-
)
|
|
77
|
-
), expect(e.queryByText("Toon vervolgstappen")).not.toBeInTheDocument();
|
|
78
|
-
});
|
|
79
|
-
});
|
|
80
|
-
//# sourceMappingURL=Timeline.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.test.js","sources":["../../../src/components/Timeline/Timeline.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { fireEvent, render, screen } from '@testing-library/react';\n\nimport type { TimelineItemProps } from './Timeline';\n\nimport { MOCK_TIMELINE_ITEM } from './mockTimelineItem';\n\nimport { Timeline } from 'components';\n\ndescribe('should render', () => {\n it('should render completed items', () => {\n render(\n <Timeline\n timelineData={MOCK_TIMELINE_ITEM as TimelineItemProps[]}\n showLabel=\"Toon vervolgstappen\"\n hideLabel=\"Verberg vervolgstappen\"\n />\n );\n expect(screen.getByText('Concept')).toBeInTheDocument();\n expect(screen.getByText('Vakgegevens afgewezen')).toBeInTheDocument();\n expect(screen.getByText('Geverifieerd 1 van 3')).toBeInTheDocument();\n expect(screen.getByText('Concept ingediend')).toBeInTheDocument();\n expect(screen.getByText('Aangemaakt')).toBeInTheDocument();\n });\n\n it('should switch label when button is clicked', () => {\n render(\n <Timeline\n timelineData={MOCK_TIMELINE_ITEM as TimelineItemProps[]}\n showLabel=\"Toon vervolgstappen\"\n hideLabel=\"Verberg vervolgstappen\"\n />\n );\n const button = screen.getByRole('button', { name: 'Toon vervolgstappen' });\n expect(button).toBeInTheDocument();\n fireEvent.click(button);\n expect(screen.getByText('Verberg vervolgstappen')).toBeInTheDocument();\n });\n\n it('should show incomplete tasks if button is clicked', () => {\n render(\n <Timeline\n timelineData={MOCK_TIMELINE_ITEM as TimelineItemProps[]}\n showLabel=\"Toon vervolgstappen\"\n hideLabel=\"Verberg vervolgstappen\"\n />\n );\n const button = screen.getByRole('button', { name: 'Toon vervolgstappen' });\n expect(button).toBeInTheDocument();\n fireEvent.click(button);\n expect(screen.getByText('Verberg vervolgstappen')).toBeInTheDocument();\n expect(screen.getByText('Actief')).toBeInTheDocument();\n });\n\n it('should not show button if there are no incomplete tasks', () => {\n render(\n <Timeline\n timelineData={(MOCK_TIMELINE_ITEM as TimelineItemProps[]).filter(({ completed }) => completed)}\n showLabel=\"Toon vervolgstappen\"\n hideLabel=\"Verberg vervolgstappen\"\n />\n );\n expect(screen.queryByText('Toon vervolgstappen')).not.toBeInTheDocument();\n });\n});\n"],"names":["render","jsx","Timeline","MOCK_TIMELINE_ITEM","screen","button","fireEvent","completed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,SAAS,iBAAiB,MAAM;AAC9B,KAAG,iCAAiC,MAAM;AACxC,IAAAA;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,cAAcC;AAAA,UACd,WAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAEd,GACA,OAAOC,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB,GACtD,OAAOA,EAAO,UAAU,uBAAuB,CAAC,EAAE,kBAAkB,GACpE,OAAOA,EAAO,UAAU,sBAAsB,CAAC,EAAE,kBAAkB,GACnE,OAAOA,EAAO,UAAU,mBAAmB,CAAC,EAAE,kBAAkB,GAChE,OAAOA,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB;AAAA,EAAA,CAC1D,GAED,GAAG,8CAA8C,MAAM;AACrD,IAAAJ;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,cAAcC;AAAA,UACd,WAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAEd;AACA,UAAME,IAASD,EAAO,UAAU,UAAU,EAAE,MAAM,uBAAuB;AAClE,WAAAC,CAAM,EAAE,kBAAkB,GACjCC,EAAU,MAAMD,CAAM,GACtB,OAAOD,EAAO,UAAU,wBAAwB,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACtE,GAED,GAAG,qDAAqD,MAAM;AAC5D,IAAAJ;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,cAAcC;AAAA,UACd,WAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAEd;AACA,UAAME,IAASD,EAAO,UAAU,UAAU,EAAE,MAAM,uBAAuB;AAClE,WAAAC,CAAM,EAAE,kBAAkB,GACjCC,EAAU,MAAMD,CAAM,GACtB,OAAOD,EAAO,UAAU,wBAAwB,CAAC,EAAE,kBAAkB,GACrE,OAAOA,EAAO,UAAU,QAAQ,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACtD,GAED,GAAG,2DAA2D,MAAM;AAClE,IAAAJ;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,cAAeC,EAA2C,OAAO,CAAC,EAAE,WAAAI,EAAA,MAAgBA,CAAS;AAAA,UAC7F,WAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAEd,GACA,OAAOH,EAAO,YAAY,qBAAqB,CAAC,EAAE,IAAI,kBAAkB;AAAA,EAAA,CACzE;AACH,CAAC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Timeline';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
export declare const MOCK_TIMELINE_ITEM: ({
|
|
2
|
-
title: string;
|
|
3
|
-
type: string;
|
|
4
|
-
reason: string;
|
|
5
|
-
subtitle: string;
|
|
6
|
-
tasks: {
|
|
7
|
-
title: string;
|
|
8
|
-
assignee: string;
|
|
9
|
-
}[];
|
|
10
|
-
completed: boolean;
|
|
11
|
-
} | {
|
|
12
|
-
title: string;
|
|
13
|
-
type: string;
|
|
14
|
-
tasks: {
|
|
15
|
-
title: string;
|
|
16
|
-
assignee: string;
|
|
17
|
-
}[];
|
|
18
|
-
completed: boolean;
|
|
19
|
-
reason?: undefined;
|
|
20
|
-
subtitle?: undefined;
|
|
21
|
-
} | {
|
|
22
|
-
title: string;
|
|
23
|
-
type: string;
|
|
24
|
-
reason: string;
|
|
25
|
-
subtitle: string;
|
|
26
|
-
tasks: {
|
|
27
|
-
title: string;
|
|
28
|
-
}[];
|
|
29
|
-
completed: boolean;
|
|
30
|
-
})[];
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
const e = [
|
|
2
|
-
{
|
|
3
|
-
title: "Actief",
|
|
4
|
-
type: "active",
|
|
5
|
-
completed: !1,
|
|
6
|
-
reason: "",
|
|
7
|
-
subtitle: "",
|
|
8
|
-
tasks: []
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
title: "Verificatie",
|
|
12
|
-
type: "submitted",
|
|
13
|
-
reason: "",
|
|
14
|
-
subtitle: "3 openstaande verificatietaken",
|
|
15
|
-
tasks: [
|
|
16
|
-
{
|
|
17
|
-
title: "Vakgegevens te verifiëren door",
|
|
18
|
-
assignee: "Opleidingsdirecteur"
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
title: "Vakgegevens te verifiëren door",
|
|
22
|
-
assignee: "Opleidingscoördinator"
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
title: "Vakgegevens te verifiëren door",
|
|
26
|
-
assignee: "Studiegidsredacteur"
|
|
27
|
-
}
|
|
28
|
-
],
|
|
29
|
-
completed: !1
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
title: "Concept",
|
|
33
|
-
type: "draft",
|
|
34
|
-
reason: "",
|
|
35
|
-
subtitle: "",
|
|
36
|
-
tasks: [
|
|
37
|
-
{
|
|
38
|
-
title: "Vakgegevens opnieuw in te dienen door",
|
|
39
|
-
assignee: "Vakcoördinator"
|
|
40
|
-
}
|
|
41
|
-
],
|
|
42
|
-
completed: !0
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
title: "Vakgegevens afgewezen",
|
|
46
|
-
type: "rejected",
|
|
47
|
-
tasks: [
|
|
48
|
-
{
|
|
49
|
-
title: "Afwijsreden: gegevens mbt de aanbiedingen kloppen nog niet.",
|
|
50
|
-
assignee: "Jane Doe als opleidingscoördinator, 14 mei 2024, 16:39"
|
|
51
|
-
}
|
|
52
|
-
],
|
|
53
|
-
completed: !0
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
title: "Geverifieerd 1 van 3",
|
|
57
|
-
type: "verified",
|
|
58
|
-
reason: "ongeldig door afwijzing",
|
|
59
|
-
subtitle: "",
|
|
60
|
-
tasks: [
|
|
61
|
-
{
|
|
62
|
-
title: "Jan Doe als opleidingsdirecteur, 14 mei 2024, 16:38"
|
|
63
|
-
}
|
|
64
|
-
],
|
|
65
|
-
completed: !0
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
title: "Concept ingediend",
|
|
69
|
-
type: "submitted",
|
|
70
|
-
reason: "",
|
|
71
|
-
subtitle: "",
|
|
72
|
-
tasks: [
|
|
73
|
-
{
|
|
74
|
-
title: "John Doe, 14 mei 2024, 16:37"
|
|
75
|
-
}
|
|
76
|
-
],
|
|
77
|
-
completed: !0
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
title: "Aangemaakt",
|
|
81
|
-
type: "draft",
|
|
82
|
-
reason: "ongeldig door afwijzing",
|
|
83
|
-
subtitle: "",
|
|
84
|
-
tasks: [
|
|
85
|
-
{
|
|
86
|
-
title: "Glass jaarkopie, 14 mei 2024, 16:35"
|
|
87
|
-
}
|
|
88
|
-
],
|
|
89
|
-
completed: !0
|
|
90
|
-
}
|
|
91
|
-
];
|
|
92
|
-
export {
|
|
93
|
-
e as MOCK_TIMELINE_ITEM
|
|
94
|
-
};
|
|
95
|
-
//# sourceMappingURL=mockTimelineItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"mockTimelineItem.js","sources":["../../../src/components/Timeline/mockTimelineItem.ts"],"sourcesContent":["export const MOCK_TIMELINE_ITEM = [\n {\n title: 'Actief',\n type: 'active',\n completed: false,\n reason: '',\n subtitle: '',\n tasks: [],\n },\n {\n title: 'Verificatie',\n type: 'submitted',\n reason: '',\n subtitle: '3 openstaande verificatietaken',\n tasks: [\n {\n title: 'Vakgegevens te verifiëren door',\n assignee: 'Opleidingsdirecteur',\n },\n {\n title: 'Vakgegevens te verifiëren door',\n assignee: 'Opleidingscoördinator',\n },\n {\n title: 'Vakgegevens te verifiëren door',\n assignee: 'Studiegidsredacteur',\n },\n ],\n completed: false,\n },\n {\n title: 'Concept',\n type: 'draft',\n reason: '',\n subtitle: '',\n tasks: [\n {\n title: 'Vakgegevens opnieuw in te dienen door',\n assignee: 'Vakcoördinator',\n },\n ],\n completed: true,\n },\n {\n title: 'Vakgegevens afgewezen',\n type: 'rejected',\n tasks: [\n {\n title: 'Afwijsreden: gegevens mbt de aanbiedingen kloppen nog niet.',\n assignee: 'Jane Doe als opleidingscoördinator, 14 mei 2024, 16:39',\n },\n ],\n completed: true,\n },\n {\n title: 'Geverifieerd 1 van 3',\n type: 'verified',\n reason: 'ongeldig door afwijzing',\n subtitle: '',\n tasks: [\n {\n title: 'Jan Doe als opleidingsdirecteur, 14 mei 2024, 16:38',\n },\n ],\n completed: true,\n },\n {\n title: 'Concept ingediend',\n type: 'submitted',\n reason: '',\n subtitle: '',\n tasks: [\n {\n title: 'John Doe, 14 mei 2024, 16:37',\n },\n ],\n completed: true,\n },\n {\n title: 'Aangemaakt',\n type: 'draft',\n reason: 'ongeldig door afwijzing',\n subtitle: '',\n tasks: [\n {\n title: 'Glass jaarkopie, 14 mei 2024, 16:35',\n },\n ],\n completed: true,\n },\n];\n"],"names":["MOCK_TIMELINE_ITEM"],"mappings":"AAAO,MAAMA,IAAqB;AAAA,EAChC;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO,CAAA;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,MACL;AAAA,QACE,OAAO;AAAA,QACP,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IAEd;AAAA,IACA,WAAW;AAAA,EACb;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,MACL;AAAA,QACE,OAAO;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IAEd;AAAA,IACA,WAAW;AAAA,EACb;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,MACL;AAAA,QACE,OAAO;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IAEd;AAAA,IACA,WAAW;AAAA,EACb;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,MACL;AAAA,QACE,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,WAAW;AAAA,EACb;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,MACL;AAAA,QACE,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,WAAW;AAAA,EACb;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,MACL;AAAA,QACE,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,WAAW;AAAA,EAAA;AAEf;"}
|