@uva-glass/component-library 3.33.3 → 3.34.0
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/RadioButton.css +1 -1
- package/dist/components/Notification/Notification.d.ts +1 -1
- package/dist/components/Notification/Notification.js +11 -11
- package/dist/components/Notification/Notification.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.js +11 -11
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
._radio-
|
|
1
|
+
._radio-button_qfy88_1{align-items:center;display:grid;gap:0 .5rem;grid-template-columns:auto [label] 1fr}._radio-button__input_qfy88_8{accent-color:var(--new-color-navy-600)}._radio-button_qfy88_1 ._radio-button__input_qfy88_8{cursor:pointer;margin-top:0}._radio-button__label_qfy88_17{position:relative;cursor:pointer;display:flex;flex-direction:column}._radio-button__label_qfy88_17:before{content:"";position:absolute;top:0;left:-1rem;bottom:0;width:1rem}._radio-button__description_qfy88_33{color:var(--new-color-grey-700);grid-area:label;margin:0}._radio-button_qfy88_1 ._radio-button__label_qfy88_17{width:fit-content}._radio-button_qfy88_1 :disabled+._radio-button__label_qfy88_17{color:var(--new-color-grey-700);cursor:unset}._radio-button--gap-large_qfy88_48{column-gap:1rem}
|
|
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
export type NotificationVariant = 'default' | 'bar';
|
|
3
3
|
export type NotificationLevel = 'neutral' | 'information' | 'success' | 'warning' | 'danger';
|
|
4
4
|
export interface NotificationProps {
|
|
5
|
-
title
|
|
5
|
+
title?: string;
|
|
6
6
|
subtitle?: string;
|
|
7
7
|
action?: ReactNode;
|
|
8
8
|
variant?: NotificationVariant;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as c, jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import { c as
|
|
3
|
-
import { Icon as
|
|
2
|
+
import { c as f } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { Icon as s } from "../Icon/Icon.js";
|
|
4
4
|
import '../../assets/Notification.css';const w = "_notification_qwbrb_1", t = {
|
|
5
5
|
notification: w,
|
|
6
6
|
"notification--default": "_notification--default_qwbrb_7",
|
|
@@ -25,18 +25,18 @@ import '../../assets/Notification.css';const w = "_notification_qwbrb_1", t = {
|
|
|
25
25
|
"notification-close-button--danger": "_notification-close-button--danger_qwbrb_127",
|
|
26
26
|
"notification-close-button--bar--success": "_notification-close-button--bar--success_qwbrb_140",
|
|
27
27
|
"notification-close-button--bar--warning": "_notification-close-button--bar--warning_qwbrb_143"
|
|
28
|
-
}, g = ({ title:
|
|
29
|
-
const l =
|
|
28
|
+
}, g = ({ title: a, subtitle: r, action: b, variant: e = "default", level: n, onClose: _ }) => {
|
|
29
|
+
const l = e === "bar";
|
|
30
30
|
function u(o) {
|
|
31
31
|
return o === "neutral" ? "CalendarEdit" : o === "information" ? "SquareInfo" : o === "success" ? "CheckCircle" : "ExclamationTriangleMini";
|
|
32
32
|
}
|
|
33
|
-
return /* @__PURE__ */ c("div", { className:
|
|
33
|
+
return /* @__PURE__ */ c("div", { className: f(t.notification, t[`notification--${e}`], t[`notification--${n}`]), children: [
|
|
34
34
|
/* @__PURE__ */ c("div", { className: t["notification-content"], children: [
|
|
35
|
-
/* @__PURE__ */ i(
|
|
35
|
+
/* @__PURE__ */ i(s, { name: u(n) }),
|
|
36
36
|
/* @__PURE__ */ c("div", { className: t["notification-content--text"], children: [
|
|
37
|
-
/* @__PURE__ */ i("p", { className: t["notification-title"], children:
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
a && /* @__PURE__ */ i("p", { className: t["notification-title"], children: a }),
|
|
38
|
+
r && /* @__PURE__ */ i("p", { className: t["notification-subtitle"], children: r }),
|
|
39
|
+
b && /* @__PURE__ */ i("div", { className: t["notification-action"], children: b })
|
|
40
40
|
] })
|
|
41
41
|
] }),
|
|
42
42
|
_ && /* @__PURE__ */ i(
|
|
@@ -44,10 +44,10 @@ import '../../assets/Notification.css';const w = "_notification_qwbrb_1", t = {
|
|
|
44
44
|
{
|
|
45
45
|
type: "button",
|
|
46
46
|
"aria-label": "close",
|
|
47
|
-
className:
|
|
47
|
+
className: f(t["notification-close-button"], t[`notification-close-button--${n}`], {
|
|
48
48
|
[t[`notification-close-button--bar--${n}`]]: l
|
|
49
49
|
}),
|
|
50
|
-
children: /* @__PURE__ */ i(
|
|
50
|
+
children: /* @__PURE__ */ i(s, { name: "Cross", size: 24 })
|
|
51
51
|
}
|
|
52
52
|
)
|
|
53
53
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Notification.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type NotificationVariant = 'default' | 'bar';\nexport type NotificationLevel = 'neutral' | 'information' | 'success' | 'warning' | 'danger';\n\nexport interface NotificationProps {\n title
|
|
1
|
+
{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Notification.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type NotificationVariant = 'default' | 'bar';\nexport type NotificationLevel = 'neutral' | 'information' | 'success' | 'warning' | 'danger';\n\nexport interface NotificationProps {\n title?: string;\n subtitle?: string;\n action?: ReactNode;\n variant?: NotificationVariant;\n level: NotificationLevel;\n onClose?: () => void;\n}\n\nexport const Notification = ({ title, subtitle, action, variant = 'default', level, onClose }: NotificationProps) => {\n const isBar = variant === 'bar';\n\n function setIconName(toastType: NotificationLevel) {\n if (toastType === 'neutral') return 'CalendarEdit';\n if (toastType === 'information') return 'SquareInfo';\n if (toastType === 'success') return 'CheckCircle';\n return 'ExclamationTriangleMini';\n }\n\n return (\n <div className={clsx(styles['notification'], styles[`notification--${variant}`], styles[`notification--${level}`])}>\n <div className={styles['notification-content']}>\n <Icon name={setIconName(level)} />\n <div className={styles['notification-content--text']}>\n {title && <p className={styles['notification-title']}>{title}</p>}\n {subtitle && <p className={styles['notification-subtitle']}>{subtitle}</p>}\n {action && <div className={styles['notification-action']}>{action}</div>}\n </div>\n </div>\n {onClose && (\n <button\n type=\"button\"\n aria-label=\"close\"\n className={clsx(styles['notification-close-button'], styles[`notification-close-button--${level}`], {\n [styles[`notification-close-button--bar--${level}`]]: isBar,\n })}\n >\n <Icon name=\"Cross\" size={24} />\n </button>\n )}\n </div>\n );\n};\n"],"names":["Notification","title","subtitle","action","variant","level","onClose","isBar","setIconName","toastType","clsx","styles","jsxs","jsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;GAoBaA,IAAe,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,IAAU,WAAW,OAAAC,GAAO,SAAAC,QAAiC;AACnH,QAAMC,IAAQH,MAAY;AAE1B,WAASI,EAAYC,GAA8B;AACjD,WAAIA,MAAc,YAAkB,iBAChCA,MAAc,gBAAsB,eACpCA,MAAc,YAAkB,gBAC7B;AAAA,EAAA;AAGT,2BACG,OAAA,EAAI,WAAWC,EAAKC,EAAO,cAAiBA,EAAO,iBAAiBP,CAAO,EAAE,GAAGO,EAAO,iBAAiBN,CAAK,EAAE,CAAC,GAC/G,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,sBAAsB,GAC3C,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAMN,EAAYH,CAAK,EAAA,CAAG;AAAA,MAChC,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,4BAA4B,GAChD,UAAA;AAAA,QAAAV,uBAAU,KAAA,EAAE,WAAWU,EAAO,oBAAoB,GAAI,UAAAV,GAAM;AAAA,QAC5DC,KAAY,gBAAAW,EAAC,KAAA,EAAE,WAAWF,EAAO,uBAAuB,GAAI,UAAAT,GAAS;AAAA,QACrEC,KAAU,gBAAAU,EAAC,OAAA,EAAI,WAAWF,EAAO,qBAAqB,GAAI,UAAAR,EAAA,CAAO;AAAA,MAAA,EAAA,CACpE;AAAA,IAAA,GACF;AAAA,IACCG,KACC,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWH,EAAKC,EAAO,2BAA2B,GAAGA,EAAO,8BAA8BN,CAAK,EAAE,GAAG;AAAA,UAClG,CAACM,EAAO,mCAAmCN,CAAK,EAAE,CAAC,GAAGE;AAAA,QAAA,CACvD;AAAA,QAED,UAAA,gBAAAM,EAACC,GAAA,EAAK,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAC/B,GAEJ;AAEJ;"}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { jsxs as d, jsx as
|
|
1
|
+
import { jsxs as d, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import { c as b } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import '../../assets/RadioButton.css';const t = {
|
|
4
|
-
"radio-button": "_radio-
|
|
5
|
-
"radio-button__input": "_radio-
|
|
6
|
-
"radio-button__label": "_radio-
|
|
7
|
-
"radio-button__description": "_radio-
|
|
8
|
-
"radio-button--gap-large": "_radio-button--gap-
|
|
9
|
-
}, s = ({ id: o, label: r, gap: _ = "normal", description:
|
|
10
|
-
/* @__PURE__ */
|
|
4
|
+
"radio-button": "_radio-button_qfy88_1",
|
|
5
|
+
"radio-button__input": "_radio-button__input_qfy88_8",
|
|
6
|
+
"radio-button__label": "_radio-button__label_qfy88_17",
|
|
7
|
+
"radio-button__description": "_radio-button__description_qfy88_33",
|
|
8
|
+
"radio-button--gap-large": "_radio-button--gap-large_qfy88_48"
|
|
9
|
+
}, s = ({ id: o, label: r, gap: _ = "normal", description: a, ...n }) => /* @__PURE__ */ d("div", { className: b(t["radio-button"], t[`radio-button--gap-${_}`]), children: [
|
|
10
|
+
/* @__PURE__ */ i(
|
|
11
11
|
"input",
|
|
12
12
|
{
|
|
13
13
|
className: t["radio-button__input"],
|
|
14
14
|
...n,
|
|
15
15
|
id: o,
|
|
16
16
|
type: "radio",
|
|
17
|
-
"aria-describedby":
|
|
17
|
+
"aria-describedby": a ? `${o}-description` : void 0
|
|
18
18
|
}
|
|
19
19
|
),
|
|
20
|
-
/* @__PURE__ */
|
|
21
|
-
|
|
20
|
+
/* @__PURE__ */ i("label", { className: t["radio-button__label"], htmlFor: o, children: r }),
|
|
21
|
+
a && /* @__PURE__ */ i("p", { id: `${o}-description`, className: t["radio-button__description"], children: a })
|
|
22
22
|
] });
|
|
23
23
|
export {
|
|
24
24
|
s as RadioButton
|