@tedi-design-system/react 14.1.0 → 14.2.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle-stats.html +1 -1
- package/index.css +1 -1
- package/package.json +1 -1
- package/src/community/components/vertical-stepper/step-item/step-item.cjs.js +1 -1
- package/src/community/components/vertical-stepper/step-item/step-item.d.ts +5 -1
- package/src/community/components/vertical-stepper/step-item/step-item.es.js +63 -58
- package/src/community/components/vertical-stepper/sub-item/sub-item.cjs.js +1 -1
- package/src/community/components/vertical-stepper/sub-item/sub-item.es.js +32 -13
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),f=require("../../../../tedi/components/base/typography/text/text.cjs.js"),n=require("../../../../tedi/components/base/icon/icon.cjs.js"),I=require("../../../../tedi/components/buttons/collapse/collapse.cjs.js"),s=require("../vertical-stepper.module.scss.cjs.js"),c=require("../../../../tedi/components/layout/grid/row.cjs.js"),o=require("../../../../tedi/components/layout/grid/col.cjs.js"),R=({children:t,className:h,isSelected:d,hasIcon:r,title:p,href:N,onClick:u,state:l="default",info:a,isOpen:m,onToggle:x})=>{const[g,q]=C.useState(!1),j=m??g,v=i=>{x&&x(i),m===void 0&&q(i)},k=y.default(s.default["stepper-item"],{[s.default[l]]:l,[s.default.selected]:d,[s.default["has-info"]]:a&&!t,[s.default["info-with-children"]]:a&&t,[s.default["stepper-collapse-open"]]:j},h);return e.jsxs("li",{role:"treeitem","aria-selected":d,className:k,children:[e.jsx("span",{className:s.default["stepper-counter"]}),e.jsx("div",{className:s.default["stepper-content"],children:t?e.jsx(I.Collapse,{onToggle:v,open:j,hideCollapseText:!0,id:"vertical-stepper-collapse",className:s.default["stepper-item-collapse"],title:e.jsxs(e.Fragment,{children:[e.jsx(c.Row,{alignItems:"start",children:e.jsx(o.Col,{className:s.default["stepper-link"],children:e.jsxs(f.Text,{children:[p,r&&l==="error"&&e.jsx(n.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["radio__tooltip-icon"]}),r&&l==="completed"&&e.jsx(n.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["radio__tooltip-icon"]})]})})}),e.jsx(c.Row,{children:e.jsx(o.Col,{children:a})})]}),children:t&&e.jsx("ul",{className:s.default["sub-item-list"],children:t})}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.default["stepper-link-container"],children:e.jsx("a",{href:N,onClick:i=>{i.preventDefault(),u&&u()},className:s.default["stepper-link"],children:e.jsxs(f.Text,{children:[p,e.jsxs("span",{className:s.default["stepper-link-icon"],children:[r&&l==="error"&&e.jsx(n.Icon,{name:"error",color:"danger",size:16,display:"inline"}),r&&l==="completed"&&e.jsx(n.Icon,{name:"check",color:"success",size:16,display:"inline"})]})]})})}),e.jsx(c.Row,{children:e.jsx(o.Col,{children:a})})]})}),e.jsx("div",{className:s.default["stepper-line"]})]})};exports.StepItem=R;
|
|
@@ -21,5 +21,9 @@ export interface StepItemProps {
|
|
|
21
21
|
* Additional info components like StatusBadge, Button, Link or Text.
|
|
22
22
|
*/
|
|
23
23
|
info?: React.ReactNode;
|
|
24
|
+
/** Controls the collapse externally if provided */
|
|
25
|
+
isOpen?: boolean;
|
|
26
|
+
/** Called when collapse is toggled */
|
|
27
|
+
onToggle?: (isOpen: boolean) => void;
|
|
24
28
|
}
|
|
25
|
-
export declare const StepItem: ({ children, className, isSelected, hasIcon, title, href, onClick, state, info, }: StepItemProps) => JSX.Element;
|
|
29
|
+
export declare const StepItem: ({ children, className, isSelected, hasIcon, title, href, onClick, state, info, isOpen, onToggle, }: StepItemProps) => JSX.Element;
|
|
@@ -1,94 +1,99 @@
|
|
|
1
|
-
import { jsxs as s, jsx as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { jsxs as s, jsx as e, Fragment as g } from "react/jsx-runtime";
|
|
2
|
+
import T from "../../../../../external/classnames/index.es.js";
|
|
3
|
+
import j from "react";
|
|
4
|
+
import { Text as k } from "../../../../tedi/components/base/typography/text/text.es.js";
|
|
4
5
|
import { Icon as c } from "../../../../tedi/components/base/icon/icon.es.js";
|
|
5
|
-
import { Collapse as
|
|
6
|
-
import
|
|
7
|
-
import { Row as
|
|
8
|
-
import { Col as
|
|
9
|
-
const
|
|
6
|
+
import { Collapse as I } from "../../../../tedi/components/buttons/collapse/collapse.es.js";
|
|
7
|
+
import r from "../vertical-stepper.module.scss.es.js";
|
|
8
|
+
import { Row as n } from "../../../../tedi/components/layout/grid/row.es.js";
|
|
9
|
+
import { Col as p } from "../../../../tedi/components/layout/grid/col.es.js";
|
|
10
|
+
const E = ({
|
|
10
11
|
children: i,
|
|
11
|
-
className:
|
|
12
|
+
className: v,
|
|
12
13
|
isSelected: m,
|
|
13
14
|
hasIcon: o,
|
|
14
15
|
title: d,
|
|
15
|
-
href:
|
|
16
|
-
onClick:
|
|
17
|
-
state:
|
|
18
|
-
info: a
|
|
16
|
+
href: _,
|
|
17
|
+
onClick: h,
|
|
18
|
+
state: l = "default",
|
|
19
|
+
info: a,
|
|
20
|
+
isOpen: f,
|
|
21
|
+
onToggle: N
|
|
19
22
|
}) => {
|
|
20
|
-
const [
|
|
21
|
-
|
|
23
|
+
const [x, y] = j.useState(!1), u = f ?? x, z = (t) => {
|
|
24
|
+
N && N(t), f === void 0 && y(t);
|
|
25
|
+
}, C = T(
|
|
26
|
+
r["stepper-item"],
|
|
22
27
|
{
|
|
23
|
-
[
|
|
24
|
-
[
|
|
25
|
-
[
|
|
26
|
-
[
|
|
27
|
-
[
|
|
28
|
+
[r[l]]: l,
|
|
29
|
+
[r.selected]: m,
|
|
30
|
+
[r["has-info"]]: a && !i,
|
|
31
|
+
[r["info-with-children"]]: a && i,
|
|
32
|
+
[r["stepper-collapse-open"]]: u
|
|
28
33
|
},
|
|
29
|
-
|
|
34
|
+
v
|
|
30
35
|
);
|
|
31
|
-
return /* @__PURE__ */ s("li", { role: "treeitem", "aria-selected": m, className:
|
|
32
|
-
/* @__PURE__ */
|
|
33
|
-
/* @__PURE__ */
|
|
34
|
-
|
|
36
|
+
return /* @__PURE__ */ s("li", { role: "treeitem", "aria-selected": m, className: C, children: [
|
|
37
|
+
/* @__PURE__ */ e("span", { className: r["stepper-counter"] }),
|
|
38
|
+
/* @__PURE__ */ e("div", { className: r["stepper-content"], children: i ? /* @__PURE__ */ e(
|
|
39
|
+
I,
|
|
35
40
|
{
|
|
36
|
-
onToggle:
|
|
37
|
-
open:
|
|
41
|
+
onToggle: z,
|
|
42
|
+
open: u,
|
|
38
43
|
hideCollapseText: !0,
|
|
39
44
|
id: "vertical-stepper-collapse",
|
|
40
|
-
className:
|
|
41
|
-
title: /* @__PURE__ */ s(
|
|
42
|
-
/* @__PURE__ */
|
|
45
|
+
className: r["stepper-item-collapse"],
|
|
46
|
+
title: /* @__PURE__ */ s(g, { children: [
|
|
47
|
+
/* @__PURE__ */ e(n, { alignItems: "start", children: /* @__PURE__ */ e(p, { className: r["stepper-link"], children: /* @__PURE__ */ s(k, { children: [
|
|
43
48
|
d,
|
|
44
|
-
o &&
|
|
49
|
+
o && l === "error" && /* @__PURE__ */ e(
|
|
45
50
|
c,
|
|
46
51
|
{
|
|
47
52
|
name: "error",
|
|
48
53
|
color: "danger",
|
|
49
54
|
size: 16,
|
|
50
55
|
display: "inline",
|
|
51
|
-
className:
|
|
56
|
+
className: r["radio__tooltip-icon"]
|
|
52
57
|
}
|
|
53
58
|
),
|
|
54
|
-
o &&
|
|
59
|
+
o && l === "completed" && /* @__PURE__ */ e(
|
|
55
60
|
c,
|
|
56
61
|
{
|
|
57
62
|
name: "check",
|
|
58
63
|
color: "success",
|
|
59
64
|
size: 16,
|
|
60
65
|
display: "inline",
|
|
61
|
-
className:
|
|
66
|
+
className: r["radio__tooltip-icon"]
|
|
62
67
|
}
|
|
63
68
|
)
|
|
64
|
-
] }) }),
|
|
65
|
-
/* @__PURE__ */
|
|
69
|
+
] }) }) }),
|
|
70
|
+
/* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(p, { children: a }) })
|
|
66
71
|
] }),
|
|
67
|
-
children: i && /* @__PURE__ */
|
|
72
|
+
children: i && /* @__PURE__ */ e("ul", { className: r["sub-item-list"], children: i })
|
|
68
73
|
}
|
|
69
|
-
) : /* @__PURE__ */ s(
|
|
70
|
-
/* @__PURE__ */
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
/* @__PURE__ */
|
|
74
|
+
) : /* @__PURE__ */ s(g, { children: [
|
|
75
|
+
/* @__PURE__ */ e("div", { className: r["stepper-link-container"], children: /* @__PURE__ */ e(
|
|
76
|
+
"a",
|
|
77
|
+
{
|
|
78
|
+
href: _,
|
|
79
|
+
onClick: (t) => {
|
|
80
|
+
t.preventDefault(), h && h();
|
|
81
|
+
},
|
|
82
|
+
className: r["stepper-link"],
|
|
83
|
+
children: /* @__PURE__ */ s(k, { children: [
|
|
84
|
+
d,
|
|
85
|
+
/* @__PURE__ */ s("span", { className: r["stepper-link-icon"], children: [
|
|
86
|
+
o && l === "error" && /* @__PURE__ */ e(c, { name: "error", color: "danger", size: 16, display: "inline" }),
|
|
87
|
+
o && l === "completed" && /* @__PURE__ */ e(c, { name: "check", color: "success", size: 16, display: "inline" })
|
|
88
|
+
] })
|
|
89
|
+
] })
|
|
90
|
+
}
|
|
91
|
+
) }),
|
|
92
|
+
/* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(p, { children: a }) })
|
|
88
93
|
] }) }),
|
|
89
|
-
/* @__PURE__ */
|
|
94
|
+
/* @__PURE__ */ e("div", { className: r["stepper-line"] })
|
|
90
95
|
] });
|
|
91
96
|
};
|
|
92
97
|
export {
|
|
93
|
-
|
|
98
|
+
E as StepItem
|
|
94
99
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),j=require("../../../../tedi/components/base/typography/text/text.cjs.js"),a=require("../../../../tedi/components/base/icon/icon.cjs.js"),s=require("../vertical-stepper.module.scss.cjs.js"),p=({children:r,className:n,state:t="default",isSelected:l,hasIcon:i,title:c,href:o,as:d="a",onClick:u})=>{const m=d,x=f.default(s.default["sub-item"],{[s.default[t]]:t,[s.default.selected]:l},n);return e.jsxs(e.Fragment,{children:[e.jsxs("li",{role:"treeitem",className:x,"aria-selected":l,children:[e.jsx("span",{className:s.default["sub-item-dot-container"],children:e.jsx("span",{className:s.default["sub-item-dot"]})}),e.jsx("span",{className:s.default["sub-item-text"],children:e.jsx(m,{href:o,onClick:u,className:s.default["sub-item-link"],children:e.jsxs(j.Text,{children:[c,i&&t==="error"&&e.jsx(a.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["radio__tooltip-icon"]}),i&&t==="completed"&&e.jsx(a.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["radio__tooltip-icon"]})]})})})]}),e.jsx("div",{children:r})]})};exports.SubItem=p;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { jsxs as r, Fragment as b, jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import f from "../../../../../external/classnames/index.es.js";
|
|
3
|
+
import { Text as h } from "../../../../tedi/components/base/typography/text/text.es.js";
|
|
3
4
|
import { Icon as l } from "../../../../tedi/components/base/icon/icon.es.js";
|
|
4
5
|
import e from "../vertical-stepper.module.scss.es.js";
|
|
5
|
-
const
|
|
6
|
-
children:
|
|
7
|
-
className:
|
|
6
|
+
const k = ({
|
|
7
|
+
children: a,
|
|
8
|
+
className: t,
|
|
8
9
|
state: i = "default",
|
|
9
10
|
isSelected: o,
|
|
10
|
-
hasIcon:
|
|
11
|
-
title:
|
|
11
|
+
hasIcon: m,
|
|
12
|
+
title: c,
|
|
12
13
|
href: n,
|
|
13
14
|
as: d = "a",
|
|
14
15
|
onClick: p
|
|
@@ -19,20 +20,38 @@ const g = ({
|
|
|
19
20
|
[e[i]]: i,
|
|
20
21
|
[e.selected]: o
|
|
21
22
|
},
|
|
22
|
-
|
|
23
|
+
t
|
|
23
24
|
);
|
|
24
25
|
return /* @__PURE__ */ r(b, { children: [
|
|
25
26
|
/* @__PURE__ */ r("li", { role: "treeitem", className: N, "aria-selected": o, children: [
|
|
26
27
|
/* @__PURE__ */ s("span", { className: e["sub-item-dot-container"], children: /* @__PURE__ */ s("span", { className: e["sub-item-dot"] }) }),
|
|
27
|
-
/* @__PURE__ */
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
/* @__PURE__ */ s("span", { className: e["sub-item-text"], children: /* @__PURE__ */ s(u, { href: n, onClick: p, className: e["sub-item-link"], children: /* @__PURE__ */ r(h, { children: [
|
|
29
|
+
c,
|
|
30
|
+
m && i === "error" && /* @__PURE__ */ s(
|
|
31
|
+
l,
|
|
32
|
+
{
|
|
33
|
+
name: "error",
|
|
34
|
+
color: "danger",
|
|
35
|
+
size: 16,
|
|
36
|
+
display: "inline",
|
|
37
|
+
className: e["radio__tooltip-icon"]
|
|
38
|
+
}
|
|
39
|
+
),
|
|
40
|
+
m && i === "completed" && /* @__PURE__ */ s(
|
|
41
|
+
l,
|
|
42
|
+
{
|
|
43
|
+
name: "check",
|
|
44
|
+
color: "success",
|
|
45
|
+
size: 16,
|
|
46
|
+
display: "inline",
|
|
47
|
+
className: e["radio__tooltip-icon"]
|
|
48
|
+
}
|
|
49
|
+
)
|
|
50
|
+
] }) }) })
|
|
32
51
|
] }),
|
|
33
|
-
/* @__PURE__ */ s("div", { children:
|
|
52
|
+
/* @__PURE__ */ s("div", { children: a })
|
|
34
53
|
] });
|
|
35
54
|
};
|
|
36
55
|
export {
|
|
37
|
-
|
|
56
|
+
k as SubItem
|
|
38
57
|
};
|