@uva-glass/component-library 3.15.2 → 3.16.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/EmptyStateDataDisplay.css +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.d.ts +4 -2
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.js +35 -16
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
._empty-state-data-
|
|
1
|
+
._empty-state-data-display_wrapper_1blmp_1{align-items:center;background-color:var(--color-white);display:flex;gap:1.5rem;padding:1.5rem}._empty-state-data-display_icon-frame_1blmp_9{align-items:center;background-color:var(--color-grey-50);border-radius:50%;display:flex;justify-content:center;min-height:4rem;min-width:4rem}._empty-state-data-display_wrapper--invert-colors_1blmp_19{background-color:var(--color-grey-50)}._empty-state-data-display_icon-frame--invert-colors_1blmp_23{background-color:var(--color-white)}._empty-state-data-display_text-content_1blmp_27{display:flex;flex-direction:column;gap:.5rem}._empty-state-data-display_label_1blmp_33{font-weight:var(--semibold)}._empty-state-data-display_paragraph_1blmp_37{color:var(--color-grey-500);margin:0}
|
|
@@ -2,7 +2,9 @@ export interface EmptyStateDataDisplayProps {
|
|
|
2
2
|
/** The main text to display. */
|
|
3
3
|
label: string;
|
|
4
4
|
/** The sub-text to display. */
|
|
5
|
-
paragraph
|
|
5
|
+
paragraph?: string;
|
|
6
|
+
/** The colors of the wrapper and icon background are inverted. */
|
|
7
|
+
invertColors: boolean;
|
|
6
8
|
}
|
|
7
9
|
/** Represents a component to indicate an empty state. */
|
|
8
|
-
export declare function EmptyStateDataDisplay({ label, paragraph }: EmptyStateDataDisplayProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function EmptyStateDataDisplay({ label, paragraph, invertColors }: EmptyStateDataDisplayProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,22 +1,41 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
1
|
+
import { jsxs as s, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { c as l } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { Icon as r } from "../Icon/Icon.js";
|
|
3
4
|
import '../../assets/EmptyStateDataDisplay.css';const a = {
|
|
4
|
-
"empty-state-data-display_wrapper": "_empty-state-data-
|
|
5
|
-
"empty-state-data-display_icon-frame": "_empty-state-data-display_icon-
|
|
6
|
-
"empty-state-data-
|
|
7
|
-
"empty-state-data-
|
|
8
|
-
"empty-state-data-
|
|
5
|
+
"empty-state-data-display_wrapper": "_empty-state-data-display_wrapper_1blmp_1",
|
|
6
|
+
"empty-state-data-display_icon-frame": "_empty-state-data-display_icon-frame_1blmp_9",
|
|
7
|
+
"empty-state-data-display_wrapper--invert-colors": "_empty-state-data-display_wrapper--invert-colors_1blmp_19",
|
|
8
|
+
"empty-state-data-display_icon-frame--invert-colors": "_empty-state-data-display_icon-frame--invert-colors_1blmp_23",
|
|
9
|
+
"empty-state-data-display_text-content": "_empty-state-data-display_text-content_1blmp_27",
|
|
10
|
+
"empty-state-data-display_label": "_empty-state-data-display_label_1blmp_33",
|
|
11
|
+
"empty-state-data-display_paragraph": "_empty-state-data-display_paragraph_1blmp_37"
|
|
9
12
|
};
|
|
10
|
-
function
|
|
11
|
-
return /* @__PURE__ */
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
function _({ label: d, paragraph: e, invertColors: p }) {
|
|
14
|
+
return /* @__PURE__ */ s(
|
|
15
|
+
"div",
|
|
16
|
+
{
|
|
17
|
+
className: l(a["empty-state-data-display_wrapper"], {
|
|
18
|
+
[a["empty-state-data-display_wrapper--invert-colors"]]: p
|
|
19
|
+
}),
|
|
20
|
+
children: [
|
|
21
|
+
/* @__PURE__ */ t(
|
|
22
|
+
"div",
|
|
23
|
+
{
|
|
24
|
+
className: l(a["empty-state-data-display_icon-frame"], {
|
|
25
|
+
[a["empty-state-data-display_icon-frame--invert-colors"]]: p
|
|
26
|
+
}),
|
|
27
|
+
children: /* @__PURE__ */ t(r, { name: "CubeTransparent" })
|
|
28
|
+
}
|
|
29
|
+
),
|
|
30
|
+
/* @__PURE__ */ s("div", { className: a["empty-state-data-display_text-content"], children: [
|
|
31
|
+
/* @__PURE__ */ t("label", { className: a["empty-state-data-display_label"], children: d }),
|
|
32
|
+
e && /* @__PURE__ */ t("p", { className: a["empty-state-data-display_paragraph"], children: e })
|
|
33
|
+
] })
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
);
|
|
18
37
|
}
|
|
19
38
|
export {
|
|
20
|
-
|
|
39
|
+
_ as EmptyStateDataDisplay
|
|
21
40
|
};
|
|
22
41
|
//# sourceMappingURL=EmptyStateDataDisplay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyStateDataDisplay.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.tsx"],"sourcesContent":["import styles from './EmptyStateDataDisplay.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface EmptyStateDataDisplayProps {\n /** The main text to display. */\n label: string;\n /** The sub-text to display. */\n paragraph
|
|
1
|
+
{"version":3,"file":"EmptyStateDataDisplay.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './EmptyStateDataDisplay.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface EmptyStateDataDisplayProps {\n /** The main text to display. */\n label: string;\n /** The sub-text to display. */\n paragraph?: string;\n /** The colors of the wrapper and icon background are inverted. */\n invertColors: boolean;\n}\n\n/** Represents a component to indicate an empty state. */\nexport function EmptyStateDataDisplay({ label, paragraph, invertColors }: EmptyStateDataDisplayProps) {\n return (\n <div\n className={clsx(styles['empty-state-data-display_wrapper'], {\n [styles['empty-state-data-display_wrapper--invert-colors']]: invertColors,\n })}\n >\n <div\n className={clsx(styles['empty-state-data-display_icon-frame'], {\n [styles['empty-state-data-display_icon-frame--invert-colors']]: invertColors,\n })}\n >\n <Icon name=\"CubeTransparent\" />\n </div>\n <div className={styles['empty-state-data-display_text-content']}>\n <label className={styles['empty-state-data-display_label']}>{label}</label>\n {paragraph && <p className={styles['empty-state-data-display_paragraph']}>{paragraph}</p>}\n </div>\n </div>\n );\n}\n"],"names":["EmptyStateDataDisplay","label","paragraph","invertColors","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;;;;AAgBO,SAASA,EAAsB,EAAE,OAAAC,GAAO,WAAAC,GAAW,cAAAC,KAA4C;AAElG,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,kCAAkC,GAAG;AAAA,QAC1D,CAACA,EAAO,iDAAiD,CAAC,GAAGH;AAAA,MAAA,CAC9D;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,qCAAqC,GAAG;AAAA,cAC7D,CAACA,EAAO,oDAAoD,CAAC,GAAGH;AAAA,YAAA,CACjE;AAAA,YAED,UAAA,gBAAAI,EAACC,GAAK,EAAA,MAAK,kBAAkB,CAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,QACC,gBAAAJ,EAAA,OAAA,EAAI,WAAWE,EAAO,uCAAuC,GAC5D,UAAA;AAAA,UAAA,gBAAAC,EAAC,SAAM,EAAA,WAAWD,EAAO,gCAAgC,GAAI,UAAML,GAAA;AAAA,UAClEC,KAAc,gBAAAK,EAAA,KAAA,EAAE,WAAWD,EAAO,oCAAoC,GAAI,UAAUJ,EAAA,CAAA;AAAA,QAAA,EACvF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
|