@uva-glass/component-library 3.0.12 → 3.0.13

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.
@@ -0,0 +1,60 @@
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
@@ -0,0 +1 @@
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 +1 @@
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_recyi_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_recyi_31{margin-bottom:-.25rem;margin-left:1.5rem}._timeline__button-container--active_recyi_36{margin-bottom:.75rem}._timeline__list_recyi_40{list-style:none;margin:0;padding:0;width:100%}._timeline__item_recyi_47{display:flex;flex-direction:column;padding-bottom:1.25rem;position:relative;width:100%}._timeline__item_recyi_47:empty{min-height:1rem}._timeline__item_recyi_47:not(:last-child):before{background-color:var(--uva-black);border:none;bottom:-1rem;content:"";left:.25rem;position:absolute;top:1rem;width:1px}._timeline__item_recyi_47:last-child{padding-bottom:0}._timeline__item_recyi_47:nth-last-child(2):before{bottom:-.75rem}._timeline__item--todo_recyi_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_recyi_47:empty:before{top:-1rem}._timeline__item-title_recyi_86{align-items:center;display:inline-flex;font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--semibold);margin-bottom:.25rem;position:relative}._timeline__item-title_recyi_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_recyi_107 ._timeline__item-title_recyi_86:before{height:.5rem;margin-left:0;margin-right:1rem;width:.5rem}._timeline__item--todo_recyi_78 ._timeline__item-title_recyi_86:before{background-color:var(--gray-400)}._timeline__item--rejected_recyi_118 ._timeline__item-title_recyi_86:before{border-radius:0;height:.125rem;margin-left:0;margin-right:1rem;width:.5rem}._timeline__item--draft_recyi_126:last-child ._timeline__item-title_recyi_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_recyi_137,._timeline__item-dark-label_recyi_138{color:var(--gray-700);font-size:var(--font-size-text-non-essential)}._timeline__item-dark-label_recyi_138{color:var(--uva-black);margin-bottom:.25rem;margin-left:1.5rem}._timeline__item-card_recyi_149{display:flex;flex-direction:column;margin-bottom:.125rem;margin-left:1.5rem;padding:.5rem 0}._timeline__item-card_recyi_149 ._timeline__item-dark-label_recyi_138{margin-left:0}._timeline__item--verified_recyi_161 ._timeline__item-card_recyi_149{margin-top:-.25rem;padding:.125rem 0}._timeline__item--rejected_recyi_118{margin-bottom:-.25rem}._timeline__item--rejected_recyi_118 ._timeline__item-card_recyi_149{margin-top:-.25rem;padding:.125rem 0}._timeline__item--draft_recyi_126{margin-bottom:.5rem}._timeline__item--draft_recyi_126 ._timeline__item-card_recyi_149{margin-top:-.25rem;padding:.125rem 0}._timeline__item--todo_recyi_78 ._timeline__item-card_recyi_149{background-color:var(--gray-200);padding:.5rem .75rem}._timeline__item--submitted_recyi_189:not(._timeline__item--todo_recyi_78){margin-bottom:-.25rem}._timeline__item--submitted_recyi_189:not(._timeline__item--todo_recyi_78) ._timeline__item-card_recyi_149{margin-top:-.25rem;padding:.125rem 0}._timeline__item--draft_recyi_126:not(:last-child) ._timeline__item-card_recyi_149{background-color:var(--gray-200);padding:.5rem .75rem}._timeline__item--verified_recyi_161{margin-bottom:-.25rem}._timeline__item--verified_recyi_161 ._timeline__item-title_recyi_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
+ :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,20 +1,15 @@
1
1
  type NodeTypes = 'active' | 'draft' | 'rejected' | 'verified' | 'submitted';
2
2
  export interface TimelineItemProps {
3
- /** Title of the node */
4
3
  title: string;
5
- /** Type of the node active, draft, rejected, verified, submitted */
6
4
  type: NodeTypes;
7
- /** Reason for rejection on verified node */
8
5
  reason?: string;
9
- /** Subtitle of the node */
10
6
  subtitle?: string;
11
- /** Tasks to be completed */
12
7
  tasks?: {
13
8
  title?: string;
14
9
  assignee?: string;
15
10
  }[];
16
- /** If the task is completed */
17
11
  completed: boolean;
12
+ position: number;
18
13
  }
19
14
  export interface TimelineProps {
20
15
  /** Is the task is completed */
@@ -1,25 +1,25 @@
1
- import { jsxs as s, jsx as o, Fragment as h } from "react/jsx-runtime";
1
+ import { jsxs as s, jsx as n, Fragment as h } from "react/jsx-runtime";
2
2
  import { useState as u, createElement as r } from "react";
3
3
  import { c } from "../../clsx-OuTLNxxd.js";
4
- import { s as t, T as a } from "../../TimelineItem-DmrymETS.js";
4
+ import { s as t, T as a } from "../../TimelineItem-ClDZJkaZ.js";
5
5
  import { Button as T } from "../Buttons/Button.js";
6
6
  import "../Buttons/LinkButton.js";
7
7
  import "@react-aria/button";
8
- const y = ({ timelineData: n, showLabel: p, hideLabel: _ }) => {
9
- const [i, d] = u(!1), f = n.filter((e) => e.completed), m = n.filter((e) => !e.completed);
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
10
  return /* @__PURE__ */ s("div", { className: t.timeline__container, children: [
11
- m.length > 0 && /* @__PURE__ */ o(
11
+ m.length > 0 && /* @__PURE__ */ n(
12
12
  "div",
13
13
  {
14
14
  className: c(t["timeline__button-container"], [
15
15
  i && t["timeline__button-container--active"]
16
16
  ]),
17
- children: /* @__PURE__ */ o(T, { variant: "blank-subtle", onClick: () => d(!i), children: i ? `${_}` : `${p}` })
17
+ children: /* @__PURE__ */ n(T, { variant: "blank-subtle", onClick: () => d(!i), children: i ? `${_}` : `${p}` })
18
18
  }
19
19
  ),
20
20
  /* @__PURE__ */ s("ul", { className: t.timeline__list, children: [
21
- i ? /* @__PURE__ */ o(h, { children: m.map((e, l) => /* @__PURE__ */ r(a, { ...e, key: `${l}_${e.title}` })) }) : /* @__PURE__ */ o("li", { className: c(t.timeline__item, t["timeline__item--todo"]) }),
22
- f.map((e, l) => /* @__PURE__ */ r(a, { ...e, key: `${l}_${e.title}` }))
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
23
  ] })
24
24
  ] });
25
25
  };
@@ -1 +1 @@
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 of the node */\n title: string;\n /** Type of the node active, draft, rejected, verified, submitted */\n type: NodeTypes;\n /** Reason for rejection on verified node */\n reason?: string;\n /** Subtitle of the node */\n subtitle?: string;\n /** Tasks to be completed */\n tasks?: {\n title?: string;\n assignee?: string;\n }[];\n /** If the task is completed */\n completed: boolean;\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}`} />\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":";;;;;;;AAoCO,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,wBAC3CE,GAAc,EAAA,GAAGH,GAAM,KAAK,GAAGC,CAAG,IAAID,EAAK,KAAK,IAAI,CACtD;AAAA,IAAA,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}
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,2 +1,2 @@
1
1
  import { TimelineItemProps } from './Timeline';
2
- export declare const TimelineItem: ({ title, type, reason, subtitle, tasks, completed }: TimelineItemProps) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const TimelineItem: ({ title, type, reason, subtitle, tasks, completed, position, }: TimelineItemProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,6 @@
1
1
  import "react/jsx-runtime";
2
2
  import "../../clsx-OuTLNxxd.js";
3
- import { T as r } from "../../TimelineItem-DmrymETS.js";
3
+ import { T as r } from "../../TimelineItem-ClDZJkaZ.js";
4
4
  export {
5
5
  r as TimelineItem
6
6
  };
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.0.12",
5
+ "version": "3.0.13",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",
@@ -1,52 +0,0 @@
1
- import { jsxs as a, jsx as t } from "react/jsx-runtime";
2
- import { c as m } from "./clsx-OuTLNxxd.js";
3
- import './assets/TimelineItem.css';const b = "_timeline__container_recyi_20", f = "_timeline__list_recyi_40", u = "_timeline__item_recyi_47", e = {
4
- timeline__container: b,
5
- "timeline__button-container": "_timeline__button-container_recyi_31",
6
- "timeline__button-container--active": "_timeline__button-container--active_recyi_36",
7
- timeline__list: f,
8
- timeline__item: u,
9
- "timeline__item--todo": "_timeline__item--todo_recyi_78",
10
- "timeline__item-title": "_timeline__item-title_recyi_86",
11
- "timeline__item--current": "_timeline__item--current_recyi_107",
12
- "timeline__item--rejected": "_timeline__item--rejected_recyi_118",
13
- "timeline__item--draft": "_timeline__item--draft_recyi_126",
14
- "timeline__item-label": "_timeline__item-label_recyi_137",
15
- "timeline__item-dark-label": "_timeline__item-dark-label_recyi_138",
16
- "timeline__item-card": "_timeline__item-card_recyi_149",
17
- "timeline__item--verified": "_timeline__item--verified_recyi_161",
18
- "timeline__item--submitted": "_timeline__item--submitted_recyi_189"
19
- }, h = ({ title: c, type: i, reason: s, subtitle: n, tasks: l, completed: _ = !1 }) => /* @__PURE__ */ a(
20
- "li",
21
- {
22
- className: m(e.timeline__item, {
23
- [e["timeline__item--active"]]: i === "active" && !_,
24
- [e["timeline__item--todo"]]: i === "active" && !_ || i === "submitted" && !_,
25
- [e["timeline__item--submitted"]]: i === "submitted" && !_,
26
- [e["timeline__item--draft"]]: i === "draft",
27
- [e["timeline__item--current"]]: i === "draft",
28
- [e["timeline__item--rejected"]]: i === "rejected",
29
- [e["timeline__item--submitted"]]: i === "submitted",
30
- [e["timeline__item--verified"]]: i === "verified"
31
- }),
32
- children: [
33
- /* @__PURE__ */ t("span", { className: e["timeline__item-title"], "data-reason": s, children: c }),
34
- n && /* @__PURE__ */ t("span", { className: e["timeline__item-dark-label"], children: n }),
35
- l && l.map(({ title: r, assignee: d }, o) => /* @__PURE__ */ a("div", { className: e["timeline__item-card"], children: [
36
- /* @__PURE__ */ t(
37
- "span",
38
- {
39
- className: m(i === "rejected" ? e["timeline__item-dark-label"] : e["timeline__item-label"]),
40
- children: r
41
- }
42
- ),
43
- /* @__PURE__ */ t("span", { className: m(i === "rejected" ? e["timeline__item-label"] : e["timeline__item-info"]), children: d })
44
- ] }, `${r}_${o}`))
45
- ]
46
- }
47
- );
48
- export {
49
- h as T,
50
- e as s
51
- };
52
- //# sourceMappingURL=TimelineItem-DmrymETS.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TimelineItem-DmrymETS.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 = ({ title, type, reason, subtitle, tasks, completed = false }: 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',\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","jsxs","clsx","styles","jsx","assignee","idx"],"mappings":";;;;;;;;;;;;;;;;;;GAMaA,IAAe,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,QAAAC,GAAQ,UAAAC,GAAU,OAAAC,GAAO,WAAAC,IAAY,GAAA,MAC/E,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,gBAAmB;AAAA,MACxC,CAACA,EAAO,wBAAwB,CAAC,GAAGP,MAAS,YAAY,CAACI;AAAA,MAC1D,CAACG,EAAO,sBAAsB,CAAC,GAAIP,MAAS,YAAY,CAACI,KAAeJ,MAAS,eAAe,CAACI;AAAA,MACjG,CAACG,EAAO,2BAA2B,CAAC,GAAGP,MAAS,eAAe,CAACI;AAAA,MAEhE,CAACG,EAAO,uBAAuB,CAAC,GAAGP,MAAS;AAAA,MAC5C,CAACO,EAAO,yBAAyB,CAAC,GAAGP,MAAS;AAAA,MAC9C,CAACO,EAAO,0BAA0B,CAAC,GAAGP,MAAS;AAAA,MAC/C,CAACO,EAAO,2BAA2B,CAAC,GAAGP,MAAS;AAAA,MAChD,CAACO,EAAO,0BAA0B,CAAC,GAAGP,MAAS;AAAA,IAAA,CAChD;AAAA,IAED,UAAA;AAAA,MAAA,gBAAAQ,EAAC,UAAK,WAAWD,EAAO,sBAAsB,GAAG,eAAaN,GAC3D,UACHF,GAAA;AAAA,MACCG,KAAa,gBAAAM,EAAA,QAAA,EAAK,WAAWD,EAAO,2BAA2B,GAAI,UAASL,GAAA;AAAA,MAC5EC,KACCA,EAAM,IAAI,CAAC,EAAE,OAAAJ,GAAO,UAAAU,EAAS,GAAGC,MAC7B,gBAAAL,EAAA,OAAA,EAAI,WAAWE,EAAO,qBAAqB,GAC1C,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKN,MAAS,aAAaO,EAAO,2BAA2B,IAAIA,EAAO,sBAAsB,CAAC;AAAA,YAEzG,UAAAR;AAAAA,UAAA;AAAA,QACH;AAAA,QACC,gBAAAS,EAAA,QAAA,EAAK,WAAWF,EAAKN,MAAS,aAAaO,EAAO,sBAAsB,IAAIA,EAAO,qBAAqB,CAAC,GACvG,UACHE,EAAA,CAAA;AAAA,MAAA,EAAA,GARkD,GAAGV,CAAK,IAAIW,CAAG,EASnE,CACD;AAAA,IAAA;AAAA,EAAA;AACL;"}