@caseparts-org/caseblocks 0.0.202 → 0.0.203
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/Admonition.css +1 -1
- package/dist/assets/QuantityInput.css +1 -1
- package/dist/assets/buttonClassName.css +1 -1
- package/dist/atoms/Button/buttonClassName.js +32 -32
- package/dist/molecules/Account/Account.js +55 -54
- package/dist/molecules/AddToCart/AddToCart.d.ts +1 -1
- package/dist/molecules/AddToCart/AddToCart.stories.d.ts +8 -0
- package/dist/molecules/AddToCart/AddToCart.stories.js +14 -3
- package/dist/molecules/Admonition/Admonition.js +26 -26
- package/dist/molecules/QuantityInput/QuantityInput.d.ts +1 -1
- package/dist/molecules/QuantityInput/QuantityInput.js +43 -41
- package/dist/molecules/QuantityInput/QuantityInput.stories.js +2 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._admonition_u2oen_1{display:grid;gap:var(--spacing-spacing-3xs);border-left:.5rem solid var(--border-border-primary);background:var(--surface-surface-secondary);padding:var(--spacing-spacing-2xs) var(--spacing-spacing-2xs);margin:var(--spacing-spacing-2xs) 0}._admonitionHeader_u2oen_10{display:flex;align-items:center;gap:var(--spacing-spacing-4xs)}._admonitionTitle_u2oen_16{line-height:1.2}._admonitionBody_u2oen_20{font-size:var(--font-size-sm)}._admonitionBody_u2oen_20>:first-child{margin-top:0}._admonitionBody_u2oen_20>:last-child{margin-bottom:0}._admonitionNote_u2oen_32{border-left-color:var(--border-border-primary)}._admonitionTip_u2oen_36{border-left-color:var(--border-border-success);background-color:#efffef}._admonitionImportant_u2oen_41{border-left-color:var(--border-border-help);background-color:#ffffef}._admonitionCaution_u2oen_46{border-left-color:var(--border-border-warning);background-color:#fff7ef}._admonitionWarning_u2oen_52{border-left-color:var(--border-border-error-warning);background-color:#fff6f6}._admonitionNeutral_u2oen_58{border-left-color:var(--border-border-primary)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._qty-
|
|
1
|
+
._qty-container_18e2j_1{display:flex;flex-direction:row;align-items:center}._qty-container_18e2j_1>button{font-size:1.25rem;border:1px solid var(--border-border-primary);background-color:#fff;box-sizing:border-box}._qty-container_18e2j_1>input{text-align:center;font-size:var(--font-size-md);border:1px solid var(--border-border-primary);box-sizing:border-box;outline:none}._qty-container_18e2j_1>input::-webkit-outer-spin-button,._qty-container_18e2j_1>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._qty-container_18e2j_1>input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}._decrease-btn_18e2j_35{position:relative;left:2px;z-index:0;display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:pointer}._increase-btn_18e2j_46{position:relative;left:-2px;z-index:0;display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:pointer}._decrease-btn_18e2j_35:disabled,._increase-btn_18e2j_46:disabled{pointer-events:none}._decrease-btn_18e2j_35:disabled svg,._increase-btn_18e2j_46:disabled svg{fill:var(--color-neutrals-neutral-4)}._button-sm_18e2j_67{width:1.25rem;height:1.25rem}._button-md_18e2j_71{width:2rem;height:2rem}._button-lg_18e2j_75{width:2.5rem;height:2.5rem}._qty-input-sm_18e2j_79{width:2.5rem;height:1.25rem}._qty-input-md_18e2j_83{width:2.5rem;height:2rem}._qty-input-lg_18e2j_87{width:3rem;height:2.5rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._button_up3lt_1{--inset-shadow-color: var(--surface-surface-primary-btn);--inset-shadow-style: 0 0 0, inset 0 0 0 var(--spacing-0-125) var(--inset-shadow-color);transition-property:background-color,border-width,box-shadow,color;transition-duration:.1s;transition-timing-function:ease-in;padding:var(--spacing-1);border:none;cursor:pointer;text-decoration:none;text-align:center;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-spacing-3xs)}._button_up3lt_1:hover{box-shadow:var(--color-neutrals-neutral-2) var(--spacing-0-125) var(--spacing-0-25) var(--spacing-0-5)}._button_up3lt_1:active{box-shadow:none}._button_up3lt_1:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert);transition:none;cursor:default}._button_up3lt_1:disabled:hover{box-shadow:none}._button-primary_up3lt_44{background-color:var(--surface-surface-primary-btn);color:var(--surface-surface-primary)}._button-primary_up3lt_44:active{background-color:var(--color-brand-secondary-dark-teal-blue)}._button-primary_up3lt_44:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-secondary_up3lt_58{background-color:var(--surface-surface-secondary-btn);border:1px solid var(--border-border-secondary-btn);color:var(--text-text-links)}._button-secondary_up3lt_58:active{--inset-shadow-color: var(--surface-surface-secondary);box-shadow:var(--inset-shadow-style)}._button-secondary_up3lt_58:disabled{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);box-shadow:none}._button-secondary_up3lt_58:disabled:hover{box-shadow:var(--inset-shadow-style)}._button-secondary-transparent_up3lt_79{background-color:transparent;border:1px solid var(--color-neutrals-neutral-1);color:var(--color-neutrals-neutral-1)}._button-secondary-transparent_up3lt_79:disabled{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);border:1px solid var(--border-border-primary)}._button-secondary-transparent_up3lt_79:disabled:hover{color:var(--surface-surface-disabled-btn);background-color:var(--surface-surface-disabled-btn-focus);box-shadow:none}._button-secondary-transparent_up3lt_79:hover{background-color:var(--color-neutrals-neutral-1);border:1px solid var(--border-border-primary);color:#000;box-shadow:none}._button-cta-primary_up3lt_104{background-color:var(--surface-surface-call-to-action-btn);color:var(--surface-surface-primary)}._button-cta-primary_up3lt_104:active{background-color:var(--surface-surface-call-to-action-btn-focus)}._button-cta-primary_up3lt_104:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-tertiary_up3lt_118{background-color:var(--surface-surface-tertiary-btn);color:var(--surface-surface-tertiary-btn-focus)}._button-tertiary_up3lt_118:active{color:var(--surface-surface-disabled-btn);background-color:var(--surface-surface-tertiary-btn-focus);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-tertiary_up3lt_118:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-destructive_up3lt_136{background-color:var(--surface-surface-error-warning-btn);color:var(--surface-surface-primary)}._button-destructive_up3lt_136:active{color:var(--surface-surface-error-warning-btn);background-color:var(--surface-surface-tertiary-btn-focus);--inset-shadow-color: var(--border-border-error-warning);box-shadow:var(--inset-shadow-style)}._button-destructive_up3lt_136:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-size-xxs_up3lt_154{border-radius:var(--border-radius-xs);padding:var(--spacing-spacing-4xs) var(--spacing-spacing-4xs)}._button-size-xs_up3lt_158{border-radius:var(--border-radius-xs);padding:calc(var(--spacing-spacing-4xs) - 1px) var(--spacing-spacing-2xs)}._button-size-sm_up3lt_162{border-radius:var(--border-radius-sm);padding:calc(var(--spacing-spacing-3xs) - 1px) var(--spacing-0-75)}._button-size-md_up3lt_166{border-radius:var(--border-radius-sm);padding:calc(var(--spacing-spacing-2xs) - 1px) var(--spacing-spacing-default)}._button-size-lg_up3lt_170{border-radius:var(--border-radius-sm);padding:calc(var(--spacing-spacing-1xs) - 2px) var(--spacing-spacing-default)}._button-size-xl_up3lt_174{border-radius:var(--border-radius-sm);padding:var(--spacing-0-75) var(--spacing-spacing-default)}._button-primary_up3lt_44._button-disabled_up3lt_179{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-secondary_up3lt_58._button-disabled_up3lt_179{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-secondary_up3lt_58._button-disabled_up3lt_179:hover{box-shadow:var(--inset-shadow-style)}._button-secondary-transparent_up3lt_79._button-disabled_up3lt_179{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style);border:1px solid var(--border-border-primary)}._button-secondary-transparent_up3lt_79._button-disabled_up3lt_179:hover{box-shadow:var(--inset-shadow-style);color:var(--surface-surface-disabled-btn);background-color:var(--surface-surface-disabled-btn-focus)}._button-cta-primary_up3lt_104._button-disabled_up3lt_179,._button-tertiary_up3lt_118._button-disabled_up3lt_179,._button-destructive_up3lt_136._button-disabled_up3lt_179{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import { t as
|
|
2
|
-
import { c as
|
|
1
|
+
import { t as u } from "../../Text.module-Dzhzk2fH.js";
|
|
2
|
+
import { c as b } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { getHideAtStyles as r } from "../HideAt.js";
|
|
4
|
-
import '../../assets/buttonClassName.css';const i = "
|
|
4
|
+
import '../../assets/buttonClassName.css';const i = "_button_up3lt_1", t = {
|
|
5
5
|
button: i,
|
|
6
|
-
"button-primary": "_button-
|
|
7
|
-
"button-secondary": "_button-
|
|
8
|
-
"button-secondary-transparent": "_button-secondary-
|
|
9
|
-
"button-cta-primary": "_button-cta-
|
|
10
|
-
"button-tertiary": "_button-
|
|
11
|
-
"button-destructive": "_button-
|
|
12
|
-
"button-size-xxs": "_button-size-
|
|
13
|
-
"button-size-xs": "_button-size-
|
|
14
|
-
"button-size-sm": "_button-size-
|
|
15
|
-
"button-size-md": "_button-size-
|
|
16
|
-
"button-size-lg": "_button-size-
|
|
17
|
-
"button-size-xl": "_button-size-
|
|
18
|
-
"button-disabled": "_button-
|
|
6
|
+
"button-primary": "_button-primary_up3lt_44",
|
|
7
|
+
"button-secondary": "_button-secondary_up3lt_58",
|
|
8
|
+
"button-secondary-transparent": "_button-secondary-transparent_up3lt_79",
|
|
9
|
+
"button-cta-primary": "_button-cta-primary_up3lt_104",
|
|
10
|
+
"button-tertiary": "_button-tertiary_up3lt_118",
|
|
11
|
+
"button-destructive": "_button-destructive_up3lt_136",
|
|
12
|
+
"button-size-xxs": "_button-size-xxs_up3lt_154",
|
|
13
|
+
"button-size-xs": "_button-size-xs_up3lt_158",
|
|
14
|
+
"button-size-sm": "_button-size-sm_up3lt_162",
|
|
15
|
+
"button-size-md": "_button-size-md_up3lt_166",
|
|
16
|
+
"button-size-lg": "_button-size-lg_up3lt_170",
|
|
17
|
+
"button-size-xl": "_button-size-xl_up3lt_174",
|
|
18
|
+
"button-disabled": "_button-disabled_up3lt_179"
|
|
19
19
|
};
|
|
20
|
-
function
|
|
21
|
-
size:
|
|
22
|
-
variant:
|
|
23
|
-
hideAt:
|
|
24
|
-
className:
|
|
25
|
-
disabled:
|
|
20
|
+
function d({
|
|
21
|
+
size: o,
|
|
22
|
+
variant: n,
|
|
23
|
+
hideAt: s,
|
|
24
|
+
className: _,
|
|
25
|
+
disabled: e
|
|
26
26
|
}) {
|
|
27
|
-
return
|
|
27
|
+
return b(
|
|
28
28
|
t.button,
|
|
29
|
-
t[`button-${
|
|
30
|
-
t[`button-size-${
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
r(
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
t[`button-${n}`],
|
|
30
|
+
t[`button-size-${o}`],
|
|
31
|
+
u.text,
|
|
32
|
+
u[`text-${o}`],
|
|
33
|
+
u["text-semibold"],
|
|
34
|
+
r(s),
|
|
35
|
+
e && t["button-disabled"],
|
|
36
|
+
_
|
|
37
37
|
);
|
|
38
38
|
}
|
|
39
39
|
export {
|
|
40
|
-
|
|
40
|
+
d as buttonClassNames
|
|
41
41
|
};
|
|
@@ -1,118 +1,119 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { getHideAtStyles as
|
|
3
|
-
import { Icon as
|
|
4
|
-
import { Text as
|
|
5
|
-
import { Avatar as
|
|
6
|
-
import { Flex as
|
|
7
|
-
import { Button as
|
|
8
|
-
import { Popover as
|
|
9
|
-
import { c as
|
|
10
|
-
import '../../assets/Account.css';const
|
|
11
|
-
loggedIn:
|
|
12
|
-
customer:
|
|
13
|
-
placeholder:
|
|
14
|
-
mobileAuth:
|
|
1
|
+
import { jsx as o, jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import { getHideAtStyles as c } from "../../atoms/HideAt.js";
|
|
3
|
+
import { Icon as p } from "../../atoms/Icon/Icon.js";
|
|
4
|
+
import { Text as s } from "../../atoms/Text/Text.js";
|
|
5
|
+
import { Avatar as h } from "../Avatar/Avatar.js";
|
|
6
|
+
import { Flex as d } from "../../atoms/Flex/Flex.js";
|
|
7
|
+
import { Button as A } from "../../atoms/Button/Button.js";
|
|
8
|
+
import { Popover as x } from "../../atoms/Popover/Popover.js";
|
|
9
|
+
import { c as m } from "../../clsx-OuTLNxxd.js";
|
|
10
|
+
import '../../assets/Account.css';const v = "_loggedIn_1g4to_1", _ = "_customer_1g4to_12", I = "_placeholder_1g4to_21", k = "_mobileAuth_1g4to_32", t = {
|
|
11
|
+
loggedIn: v,
|
|
12
|
+
customer: _,
|
|
13
|
+
placeholder: I,
|
|
14
|
+
mobileAuth: k
|
|
15
15
|
};
|
|
16
16
|
function N(i) {
|
|
17
17
|
return i.account !== void 0;
|
|
18
18
|
}
|
|
19
|
-
function
|
|
20
|
-
return i.isAccountLoading ? /* @__PURE__ */
|
|
19
|
+
function w(i) {
|
|
20
|
+
return i.isAccountLoading ? /* @__PURE__ */ o("div", { className: t.placeholder }) : N(i) ? /* @__PURE__ */ o(b, { ...i }) : /* @__PURE__ */ o(L, { ...i });
|
|
21
21
|
}
|
|
22
22
|
function b(i) {
|
|
23
23
|
const {
|
|
24
24
|
account: e,
|
|
25
25
|
className: r,
|
|
26
26
|
hideAt: l,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
onLoginClick: f,
|
|
28
|
+
popoverContent: a,
|
|
29
|
+
isAccountLoading: g,
|
|
30
|
+
...u
|
|
30
31
|
} = i;
|
|
31
|
-
return
|
|
32
|
-
|
|
32
|
+
return a ? /* @__PURE__ */ o(
|
|
33
|
+
x,
|
|
33
34
|
{
|
|
34
35
|
position: "bottom right",
|
|
35
|
-
trigger: /* @__PURE__ */
|
|
36
|
+
trigger: /* @__PURE__ */ n(
|
|
36
37
|
"div",
|
|
37
38
|
{
|
|
38
|
-
className:
|
|
39
|
-
...
|
|
39
|
+
className: m(t.loggedIn, c(l), r),
|
|
40
|
+
...u,
|
|
40
41
|
children: [
|
|
41
|
-
/* @__PURE__ */
|
|
42
|
-
|
|
42
|
+
/* @__PURE__ */ n(
|
|
43
|
+
d,
|
|
43
44
|
{
|
|
44
45
|
flexDirection: "column",
|
|
45
46
|
alignItems: "flex-end",
|
|
46
47
|
hideAt: ["sm", "md"],
|
|
47
|
-
className:
|
|
48
|
+
className: t.customer,
|
|
48
49
|
children: [
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
+
/* @__PURE__ */ n(s, { size: "xxs", children: [
|
|
50
51
|
"Acct: ",
|
|
51
52
|
e == null ? void 0 : e.number
|
|
52
53
|
] }),
|
|
53
|
-
/* @__PURE__ */
|
|
54
|
+
/* @__PURE__ */ n(s, { size: "sm", variant: "display", colorToken: "links", children: [
|
|
54
55
|
"Hello ",
|
|
55
56
|
e == null ? void 0 : e.name
|
|
56
57
|
] })
|
|
57
58
|
]
|
|
58
59
|
}
|
|
59
60
|
),
|
|
60
|
-
e.avatar ?? (e.initials ? /* @__PURE__ */
|
|
61
|
+
e.avatar ?? (e.initials ? /* @__PURE__ */ o(h, { initials: e.initials }) : null)
|
|
61
62
|
]
|
|
62
63
|
}
|
|
63
64
|
),
|
|
64
|
-
children:
|
|
65
|
+
children: a
|
|
65
66
|
}
|
|
66
|
-
) : /* @__PURE__ */
|
|
67
|
+
) : /* @__PURE__ */ n(
|
|
67
68
|
"div",
|
|
68
69
|
{
|
|
69
|
-
className:
|
|
70
|
-
...
|
|
70
|
+
className: m(t.loggedIn, c(l), r),
|
|
71
|
+
...u,
|
|
71
72
|
children: [
|
|
72
|
-
/* @__PURE__ */
|
|
73
|
-
|
|
73
|
+
/* @__PURE__ */ n(
|
|
74
|
+
d,
|
|
74
75
|
{
|
|
75
76
|
flexDirection: "column",
|
|
76
77
|
alignItems: "flex-end",
|
|
77
78
|
hideAt: ["sm", "md"],
|
|
78
|
-
className:
|
|
79
|
+
className: t.customer,
|
|
79
80
|
children: [
|
|
80
|
-
/* @__PURE__ */
|
|
81
|
-
/* @__PURE__ */
|
|
81
|
+
/* @__PURE__ */ o(s, { size: "xxs", children: e == null ? void 0 : e.number }),
|
|
82
|
+
/* @__PURE__ */ n(s, { size: "sm", variant: "display", colorToken: "links", children: [
|
|
82
83
|
"Hello ",
|
|
83
84
|
e == null ? void 0 : e.name
|
|
84
85
|
] })
|
|
85
86
|
]
|
|
86
87
|
}
|
|
87
88
|
),
|
|
88
|
-
e.avatar ?? (e.initials ? /* @__PURE__ */
|
|
89
|
+
e.avatar ?? (e.initials ? /* @__PURE__ */ o(h, { initials: e.initials }) : null)
|
|
89
90
|
]
|
|
90
91
|
}
|
|
91
92
|
);
|
|
92
93
|
}
|
|
93
|
-
function
|
|
94
|
+
function L(i) {
|
|
94
95
|
const {
|
|
95
96
|
onLoginClick: e,
|
|
96
97
|
className: r,
|
|
97
98
|
hideAt: l,
|
|
98
|
-
popoverContent:
|
|
99
|
-
isAccountLoading:
|
|
100
|
-
...
|
|
99
|
+
popoverContent: f,
|
|
100
|
+
isAccountLoading: a,
|
|
101
|
+
...g
|
|
101
102
|
} = i;
|
|
102
|
-
return /* @__PURE__ */
|
|
103
|
-
|
|
103
|
+
return /* @__PURE__ */ n(
|
|
104
|
+
d,
|
|
104
105
|
{
|
|
105
106
|
flexDirection: "row",
|
|
106
107
|
alignItems: "center",
|
|
107
|
-
...
|
|
108
|
-
className:
|
|
109
|
-
|
|
110
|
-
|
|
108
|
+
...g,
|
|
109
|
+
className: m(
|
|
110
|
+
t.unauthenticated,
|
|
111
|
+
c(l),
|
|
111
112
|
r
|
|
112
113
|
),
|
|
113
114
|
children: [
|
|
114
|
-
/* @__PURE__ */
|
|
115
|
-
|
|
115
|
+
/* @__PURE__ */ o(
|
|
116
|
+
A,
|
|
116
117
|
{
|
|
117
118
|
onClick: e,
|
|
118
119
|
size: "sm",
|
|
@@ -121,11 +122,11 @@ function k(i) {
|
|
|
121
122
|
children: "Sign In / Register"
|
|
122
123
|
}
|
|
123
124
|
),
|
|
124
|
-
/* @__PURE__ */
|
|
125
|
+
/* @__PURE__ */ o("button", { onClick: e, className: m(t.mobileAuth, c("lg")), children: /* @__PURE__ */ o(p, { iconKey: "fa-kit fa-user-anon", size: "lg" }) })
|
|
125
126
|
]
|
|
126
127
|
}
|
|
127
128
|
);
|
|
128
129
|
}
|
|
129
130
|
export {
|
|
130
|
-
|
|
131
|
+
w as Account
|
|
131
132
|
};
|
|
@@ -15,7 +15,7 @@ export interface AddToCartProps {
|
|
|
15
15
|
addButtonVariant?: ButtonVariant;
|
|
16
16
|
buttonText?: string;
|
|
17
17
|
buttonDoneText?: string;
|
|
18
|
-
size?: "sm" | "md";
|
|
18
|
+
size?: "sm" | "md" | "lg";
|
|
19
19
|
requiresUnitDetails?: boolean;
|
|
20
20
|
}
|
|
21
21
|
export declare function AddToCart({ itemKey, disableButton, initialQuantity, min, max, onQuantityChange, onAdd, autoHideDelayMs, showQuantity, className, addButtonClassName, addButtonVariant, buttonText, buttonDoneText, size, requiresUnitDetails }: AddToCartProps): React.ReactElement | null;
|
|
@@ -58,6 +58,13 @@ declare const meta: {
|
|
|
58
58
|
control: "boolean";
|
|
59
59
|
description: string;
|
|
60
60
|
};
|
|
61
|
+
size: {
|
|
62
|
+
control: {
|
|
63
|
+
type: "inline-radio";
|
|
64
|
+
};
|
|
65
|
+
options: string[];
|
|
66
|
+
description: string;
|
|
67
|
+
};
|
|
61
68
|
className: {
|
|
62
69
|
control: "text";
|
|
63
70
|
};
|
|
@@ -74,5 +81,6 @@ export declare const Default: Story;
|
|
|
74
81
|
export declare const HiddenQuantity: Story;
|
|
75
82
|
export declare const WithMaxConstraint: Story;
|
|
76
83
|
export declare const CustomTexts: Story;
|
|
84
|
+
export declare const Large: Story;
|
|
77
85
|
export declare const AsyncSlowAdd: Story;
|
|
78
86
|
export declare const CustomAutoHideDelay: Story;
|
|
@@ -47,6 +47,11 @@ const a = {
|
|
|
47
47
|
control: "boolean",
|
|
48
48
|
description: "Shows a tooltip on the add button when unit details are required"
|
|
49
49
|
},
|
|
50
|
+
size: {
|
|
51
|
+
control: { type: "inline-radio" },
|
|
52
|
+
options: ["sm", "md", "lg"],
|
|
53
|
+
description: "Controls the size of the quantity input and add button"
|
|
54
|
+
},
|
|
50
55
|
className: { control: "text" },
|
|
51
56
|
addButtonClassName: { control: "text" }
|
|
52
57
|
},
|
|
@@ -82,6 +87,11 @@ const a = {
|
|
|
82
87
|
buttonDoneText: "In Cart"
|
|
83
88
|
}
|
|
84
89
|
}, l = {
|
|
90
|
+
args: {
|
|
91
|
+
size: "lg",
|
|
92
|
+
buttonText: "Add to Cart"
|
|
93
|
+
}
|
|
94
|
+
}, c = {
|
|
85
95
|
name: "Async (Simulated Slow)",
|
|
86
96
|
args: {
|
|
87
97
|
onAdd: async (t, e) => {
|
|
@@ -95,17 +105,18 @@ const a = {
|
|
|
95
105
|
}
|
|
96
106
|
}
|
|
97
107
|
}
|
|
98
|
-
},
|
|
108
|
+
}, m = {
|
|
99
109
|
args: {
|
|
100
110
|
autoHideDelayMs: 5e3
|
|
101
111
|
}
|
|
102
112
|
};
|
|
103
113
|
export {
|
|
104
|
-
|
|
105
|
-
|
|
114
|
+
c as AsyncSlowAdd,
|
|
115
|
+
m as CustomAutoHideDelay,
|
|
106
116
|
u as CustomTexts,
|
|
107
117
|
s as Default,
|
|
108
118
|
d as HiddenQuantity,
|
|
119
|
+
l as Large,
|
|
109
120
|
r as WithMaxConstraint,
|
|
110
121
|
a as default
|
|
111
122
|
};
|
|
@@ -1,44 +1,44 @@
|
|
|
1
1
|
import { jsxs as m, jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import { Icon as
|
|
3
|
-
import { Text as
|
|
4
|
-
import { c as
|
|
5
|
-
import '../../assets/Admonition.css';const N = "
|
|
2
|
+
import { Icon as l } from "../../atoms/Icon/Icon.js";
|
|
3
|
+
import { Text as u } from "../../atoms/Text/Text.js";
|
|
4
|
+
import { c as p } from "../../clsx-OuTLNxxd.js";
|
|
5
|
+
import '../../assets/Admonition.css';const N = "_admonition_u2oen_1", g = "_admonitionHeader_u2oen_10", C = "_admonitionTitle_u2oen_16", T = "_admonitionBody_u2oen_20", h = "_admonitionNote_u2oen_32", I = "_admonitionTip_u2oen_36", f = "_admonitionImportant_u2oen_41", x = "_admonitionCaution_u2oen_46", B = "_admonitionWarning_u2oen_52", W = "_admonitionNeutral_u2oen_58", o = {
|
|
6
6
|
admonition: N,
|
|
7
|
-
admonitionHeader:
|
|
8
|
-
admonitionTitle:
|
|
9
|
-
admonitionBody:
|
|
10
|
-
admonitionNote:
|
|
11
|
-
admonitionTip:
|
|
12
|
-
admonitionImportant:
|
|
13
|
-
admonitionCaution:
|
|
14
|
-
admonitionWarning:
|
|
15
|
-
admonitionNeutral:
|
|
16
|
-
},
|
|
7
|
+
admonitionHeader: g,
|
|
8
|
+
admonitionTitle: C,
|
|
9
|
+
admonitionBody: T,
|
|
10
|
+
admonitionNote: h,
|
|
11
|
+
admonitionTip: I,
|
|
12
|
+
admonitionImportant: f,
|
|
13
|
+
admonitionCaution: x,
|
|
14
|
+
admonitionWarning: B,
|
|
15
|
+
admonitionNeutral: W
|
|
16
|
+
}, y = {
|
|
17
17
|
note: "Note",
|
|
18
18
|
tip: "Tip",
|
|
19
19
|
important: "Important",
|
|
20
20
|
caution: "Caution",
|
|
21
21
|
warning: "Warning"
|
|
22
|
-
},
|
|
22
|
+
}, A = (n) => {
|
|
23
23
|
const t = n.trim().replace(/[_-]+/g, " ");
|
|
24
|
-
return t ? t.split(/\s+/).map((
|
|
25
|
-
},
|
|
24
|
+
return t ? t.split(/\s+/).map((i) => `${i.charAt(0).toUpperCase()}${i.slice(1).toLowerCase()}`).join(" ") : "Admonition";
|
|
25
|
+
}, H = (n) => n === "note" ? o.admonitionNote : n === "tip" ? o.admonitionTip : n === "important" ? o.admonitionImportant : n === "caution" ? o.admonitionCaution : n === "warning" ? o.admonitionWarning : o.admonitionNeutral;
|
|
26
26
|
function b({
|
|
27
27
|
admonitionType: n,
|
|
28
28
|
variant: t,
|
|
29
|
-
icon:
|
|
30
|
-
title:
|
|
31
|
-
className:
|
|
29
|
+
icon: i,
|
|
30
|
+
title: e,
|
|
31
|
+
className: d,
|
|
32
32
|
children: s,
|
|
33
33
|
...r
|
|
34
34
|
}) {
|
|
35
|
-
const
|
|
36
|
-
return /* @__PURE__ */ m("aside", { ...r, className:
|
|
37
|
-
/* @__PURE__ */ m("div", { className:
|
|
38
|
-
|
|
39
|
-
/* @__PURE__ */ a(
|
|
35
|
+
const c = e ?? y[n] ?? A(n), _ = H(t);
|
|
36
|
+
return /* @__PURE__ */ m("aside", { ...r, className: p(o.admonition, _, d), "data-admonition": n, children: [
|
|
37
|
+
/* @__PURE__ */ m("div", { className: o.admonitionHeader, children: [
|
|
38
|
+
i ? /* @__PURE__ */ a("span", { className: o.admonitionIcon, "aria-hidden": "true", children: /* @__PURE__ */ a(l, { iconKey: i, size: "xs" }) }) : null,
|
|
39
|
+
/* @__PURE__ */ a(u, { size: "sm", weight: "semibold", className: o.admonitionTitle, children: c })
|
|
40
40
|
] }),
|
|
41
|
-
/* @__PURE__ */ a("div", { className:
|
|
41
|
+
/* @__PURE__ */ a("div", { className: o.admonitionBody, children: s })
|
|
42
42
|
] });
|
|
43
43
|
}
|
|
44
44
|
export {
|
|
@@ -5,7 +5,7 @@ export interface QuantityInputProps extends React.HTMLAttributes<HTMLInputElemen
|
|
|
5
5
|
onQuantityChange: (_quantity: number) => void;
|
|
6
6
|
min?: number;
|
|
7
7
|
max?: number;
|
|
8
|
-
size?: "sm" | "md";
|
|
8
|
+
size?: "sm" | "md" | "lg";
|
|
9
9
|
wrapperClassName?: string;
|
|
10
10
|
}
|
|
11
11
|
export declare function QuantityInput({ quantity, onQuantityChange, min, max, className, wrapperClassName, hideAt, size, ...otherProps }: QuantityInputProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,73 +1,75 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as N, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import { c as a } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { Icon as l } from "../../atoms/Icon/Icon.js";
|
|
4
|
-
import { getHideAtStyles as
|
|
4
|
+
import { getHideAtStyles as g } from "../../atoms/HideAt.js";
|
|
5
5
|
import '../../assets/QuantityInput.css';const s = {
|
|
6
|
-
"qty-container": "_qty-
|
|
7
|
-
"decrease-btn": "_decrease-
|
|
8
|
-
"increase-btn": "_increase-
|
|
9
|
-
"button-sm": "_button-
|
|
10
|
-
"button-md": "_button-
|
|
11
|
-
"
|
|
12
|
-
"qty-input-
|
|
6
|
+
"qty-container": "_qty-container_18e2j_1",
|
|
7
|
+
"decrease-btn": "_decrease-btn_18e2j_35",
|
|
8
|
+
"increase-btn": "_increase-btn_18e2j_46",
|
|
9
|
+
"button-sm": "_button-sm_18e2j_67",
|
|
10
|
+
"button-md": "_button-md_18e2j_71",
|
|
11
|
+
"button-lg": "_button-lg_18e2j_75",
|
|
12
|
+
"qty-input-sm": "_qty-input-sm_18e2j_79",
|
|
13
|
+
"qty-input-md": "_qty-input-md_18e2j_83",
|
|
14
|
+
"qty-input-lg": "_qty-input-lg_18e2j_87"
|
|
13
15
|
};
|
|
14
|
-
function
|
|
15
|
-
quantity:
|
|
16
|
-
onQuantityChange:
|
|
17
|
-
min:
|
|
18
|
-
max:
|
|
19
|
-
className:
|
|
20
|
-
wrapperClassName:
|
|
16
|
+
function C({
|
|
17
|
+
quantity: o = 1,
|
|
18
|
+
onQuantityChange: _,
|
|
19
|
+
min: e = 1,
|
|
20
|
+
max: n = 9999,
|
|
21
|
+
className: b,
|
|
22
|
+
wrapperClassName: d,
|
|
21
23
|
hideAt: p,
|
|
22
|
-
size:
|
|
23
|
-
...
|
|
24
|
+
size: r = "md",
|
|
25
|
+
...y
|
|
24
26
|
}) {
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
}, f = () => u(
|
|
29
|
-
return /* @__PURE__ */
|
|
30
|
-
/* @__PURE__ */
|
|
27
|
+
const m = (t) => (e !== void 0 && t < e && (t = e), n !== void 0 && n !== void 0 && t > n && (t = n), t), u = (t) => {
|
|
28
|
+
const c = m(Number.isNaN(t) ? e ?? 1 : t);
|
|
29
|
+
_(c);
|
|
30
|
+
}, f = () => u(o - 1), j = () => u(o + 1);
|
|
31
|
+
return /* @__PURE__ */ N("div", { className: a(s["qty-container"], g(p), d), children: [
|
|
32
|
+
/* @__PURE__ */ i(
|
|
31
33
|
"button",
|
|
32
34
|
{
|
|
33
35
|
type: "button",
|
|
34
|
-
className: a(s["decrease-btn"], s[`button-${
|
|
36
|
+
className: a(s["decrease-btn"], s[`button-${r}`]),
|
|
35
37
|
onClick: f,
|
|
36
|
-
disabled:
|
|
38
|
+
disabled: o <= (e ?? 1),
|
|
37
39
|
"aria-label": "Decrease quantity",
|
|
38
|
-
children: /* @__PURE__ */
|
|
40
|
+
children: /* @__PURE__ */ i(l, { iconKey: "fa-solid fa-minus", size: "sm" })
|
|
39
41
|
}
|
|
40
42
|
),
|
|
41
|
-
/* @__PURE__ */
|
|
43
|
+
/* @__PURE__ */ i(
|
|
42
44
|
"input",
|
|
43
45
|
{
|
|
44
|
-
className: a(s["qty-input"], s[`qty-input-${
|
|
46
|
+
className: a(s["qty-input"], s[`qty-input-${r}`], b),
|
|
45
47
|
type: "number",
|
|
46
|
-
min:
|
|
47
|
-
max:
|
|
48
|
-
value:
|
|
48
|
+
min: e,
|
|
49
|
+
max: n,
|
|
50
|
+
value: o,
|
|
49
51
|
onFocus: (t) => t.currentTarget.select(),
|
|
50
52
|
onChange: (t) => {
|
|
51
|
-
const
|
|
52
|
-
u(Number.isNaN(
|
|
53
|
+
const c = parseInt(t.target.value, 10);
|
|
54
|
+
u(Number.isNaN(c) ? e ?? 1 : c);
|
|
53
55
|
},
|
|
54
56
|
"aria-label": "Quantity",
|
|
55
|
-
...
|
|
57
|
+
...y
|
|
56
58
|
}
|
|
57
59
|
),
|
|
58
|
-
/* @__PURE__ */
|
|
60
|
+
/* @__PURE__ */ i(
|
|
59
61
|
"button",
|
|
60
62
|
{
|
|
61
63
|
type: "button",
|
|
62
|
-
className: a(s["increase-btn"], s[`button-${
|
|
63
|
-
onClick:
|
|
64
|
-
disabled:
|
|
64
|
+
className: a(s["increase-btn"], s[`button-${r}`]),
|
|
65
|
+
onClick: j,
|
|
66
|
+
disabled: n !== void 0 && o >= n,
|
|
65
67
|
"aria-label": "Increase quantity",
|
|
66
|
-
children: /* @__PURE__ */
|
|
68
|
+
children: /* @__PURE__ */ i(l, { iconKey: "fa-solid fa-plus", size: "sm" })
|
|
67
69
|
}
|
|
68
70
|
)
|
|
69
71
|
] });
|
|
70
72
|
}
|
|
71
73
|
export {
|
|
72
|
-
|
|
74
|
+
C as QuantityInput
|
|
73
75
|
};
|
|
@@ -14,7 +14,7 @@ const c = {
|
|
|
14
14
|
onQuantityChange: { action: "quantity changed" },
|
|
15
15
|
size: {
|
|
16
16
|
control: { type: "inline-radio" },
|
|
17
|
-
options: ["sm", "md"]
|
|
17
|
+
options: ["sm", "md", "lg"]
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
parameters: {
|
|
@@ -53,7 +53,7 @@ const c = {
|
|
|
53
53
|
render: (t) => /* @__PURE__ */ n(e, { ...t })
|
|
54
54
|
}, Q = {
|
|
55
55
|
args: { onQuantityChange: (t) => alert(t) },
|
|
56
|
-
render: (t) => /* @__PURE__ */ n("div", { style: { display: "flex", gap: "1rem", alignItems: "center" }, children: ["sm", "md"].map((a) => /* @__PURE__ */ n(e, { ...t, size: a, quantity: a === "sm" ? 1 : 2 }, a)) })
|
|
56
|
+
render: (t) => /* @__PURE__ */ n("div", { style: { display: "flex", gap: "1rem", alignItems: "center" }, children: ["sm", "md", "lg"].map((a) => /* @__PURE__ */ n(e, { ...t, size: a, quantity: a === "sm" ? 1 : 2 }, a)) })
|
|
57
57
|
}, C = {
|
|
58
58
|
args: { min: 1, max: 3, quantity: 3, onQuantityChange: (t) => alert(t) },
|
|
59
59
|
render: (t) => /* @__PURE__ */ n(e, { ...t })
|