@uva-glass/component-library 3.41.0 → 3.41.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/dist/assets/EmptyStateDataDisplay.css +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.d.ts +4 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.js +28 -19
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.js.map +1 -1
- package/dist/types/UserInterface.d.ts +1 -0
- package/package.json +18 -18
|
@@ -1 +1 @@
|
|
|
1
|
-
._empty-state-data-
|
|
1
|
+
._empty-state-data-display_wrapper_1js18_1{align-items:center;background-color:var(--new-color-uva-white);display:flex;gap:1.5rem;padding:1.5rem}._empty-state-data-display_icon-frame_1js18_9{align-items:center;background-color:var(--new-color-grey-200);border-radius:50%;display:flex;justify-content:center;min-height:4rem;min-width:4rem}._empty-state-data-display_wrapper--invert-colors_1js18_19{background-color:var(--new-color-grey-200)}._empty-state-data-display_wrapper--slim_1js18_23{gap:1rem;padding:1rem}._empty-state-data-display_icon-frame--invert-colors_1js18_28{background-color:var(--new-color-uva-white)}._empty-state-data-display_icon-frame--slim_1js18_32{min-height:2rem;min-width:2rem}._empty-state-data-display_text-content_1js18_37{display:flex;flex-direction:column;gap:.5rem}._empty-state-data-display_label_1js18_43{font-weight:var(--semibold)}._empty-state-data-display_paragraph_1js18_47{color:var(--new-color-grey-700);margin:0}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { UISizeVariant } from 'types/UserInterface';
|
|
1
2
|
export interface EmptyStateDataDisplayProps {
|
|
2
3
|
/** The main text to display. */
|
|
3
4
|
label: string;
|
|
@@ -5,6 +6,8 @@ export interface EmptyStateDataDisplayProps {
|
|
|
5
6
|
paragraph?: string;
|
|
6
7
|
/** The colors of the wrapper and icon background are inverted. */
|
|
7
8
|
invertColors?: boolean;
|
|
9
|
+
/** The display variant. */
|
|
10
|
+
variant?: UISizeVariant;
|
|
8
11
|
}
|
|
9
12
|
/** Represents a component to indicate an empty state. */
|
|
10
|
-
export declare function EmptyStateDataDisplay({ label, paragraph, invertColors }: EmptyStateDataDisplayProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function EmptyStateDataDisplay({ label, paragraph, invertColors, variant, }: EmptyStateDataDisplayProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,41 +1,50 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as l, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { c as d } from "../../clsx-OuTLNxxd.js";
|
|
3
|
-
import { Icon as
|
|
3
|
+
import { Icon as r } from "../Icon/Icon.js";
|
|
4
4
|
import '../../assets/EmptyStateDataDisplay.css';const a = {
|
|
5
|
-
"empty-state-data-display_wrapper": "_empty-state-data-
|
|
6
|
-
"empty-state-data-display_icon-frame": "_empty-state-data-display_icon-
|
|
7
|
-
"empty-state-data-display_wrapper--invert-colors": "_empty-state-data-display_wrapper--invert-
|
|
8
|
-
"empty-state-data-
|
|
9
|
-
"empty-state-data-
|
|
10
|
-
"empty-state-data-
|
|
11
|
-
"empty-state-data-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
5
|
+
"empty-state-data-display_wrapper": "_empty-state-data-display_wrapper_1js18_1",
|
|
6
|
+
"empty-state-data-display_icon-frame": "_empty-state-data-display_icon-frame_1js18_9",
|
|
7
|
+
"empty-state-data-display_wrapper--invert-colors": "_empty-state-data-display_wrapper--invert-colors_1js18_19",
|
|
8
|
+
"empty-state-data-display_wrapper--slim": "_empty-state-data-display_wrapper--slim_1js18_23",
|
|
9
|
+
"empty-state-data-display_icon-frame--invert-colors": "_empty-state-data-display_icon-frame--invert-colors_1js18_28",
|
|
10
|
+
"empty-state-data-display_icon-frame--slim": "_empty-state-data-display_icon-frame--slim_1js18_32",
|
|
11
|
+
"empty-state-data-display_text-content": "_empty-state-data-display_text-content_1js18_37",
|
|
12
|
+
"empty-state-data-display_label": "_empty-state-data-display_label_1js18_43",
|
|
13
|
+
"empty-state-data-display_paragraph": "_empty-state-data-display_paragraph_1js18_47"
|
|
14
|
+
}, _ = 24, m = 16;
|
|
15
|
+
function n({
|
|
16
|
+
label: i,
|
|
17
|
+
paragraph: s,
|
|
18
|
+
invertColors: p,
|
|
19
|
+
variant: e = "regular"
|
|
20
|
+
}) {
|
|
21
|
+
return /* @__PURE__ */ l(
|
|
15
22
|
"div",
|
|
16
23
|
{
|
|
17
24
|
className: d(a["empty-state-data-display_wrapper"], {
|
|
18
|
-
[a["empty-state-data-display_wrapper--invert-colors"]]:
|
|
25
|
+
[a["empty-state-data-display_wrapper--invert-colors"]]: p,
|
|
26
|
+
[a["empty-state-data-display_wrapper--slim"]]: e === "slim"
|
|
19
27
|
}),
|
|
20
28
|
children: [
|
|
21
29
|
/* @__PURE__ */ t(
|
|
22
30
|
"div",
|
|
23
31
|
{
|
|
24
32
|
className: d(a["empty-state-data-display_icon-frame"], {
|
|
25
|
-
[a["empty-state-data-display_icon-frame--invert-colors"]]:
|
|
33
|
+
[a["empty-state-data-display_icon-frame--invert-colors"]]: p,
|
|
34
|
+
[a["empty-state-data-display_icon-frame--slim"]]: e === "slim"
|
|
26
35
|
}),
|
|
27
|
-
children: /* @__PURE__ */ t(
|
|
36
|
+
children: /* @__PURE__ */ t(r, { name: "CubeTransparent", size: e === "regular" ? _ : m })
|
|
28
37
|
}
|
|
29
38
|
),
|
|
30
|
-
/* @__PURE__ */
|
|
31
|
-
/* @__PURE__ */ t("label", { className: a["empty-state-data-display_label"], children:
|
|
32
|
-
|
|
39
|
+
/* @__PURE__ */ l("div", { className: a["empty-state-data-display_text-content"], children: [
|
|
40
|
+
/* @__PURE__ */ t("label", { className: a["empty-state-data-display_label"], children: i }),
|
|
41
|
+
s && /* @__PURE__ */ t("p", { className: a["empty-state-data-display_paragraph"], children: s })
|
|
33
42
|
] })
|
|
34
43
|
]
|
|
35
44
|
}
|
|
36
45
|
);
|
|
37
46
|
}
|
|
38
47
|
export {
|
|
39
|
-
|
|
48
|
+
n as EmptyStateDataDisplay
|
|
40
49
|
};
|
|
41
50
|
//# sourceMappingURL=EmptyStateDataDisplay.js.map
|
|
@@ -1 +1 @@
|
|
|
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({
|
|
1
|
+
{"version":3,"file":"EmptyStateDataDisplay.js","sources":["../../../src/components/EmptyStateDataDisplay/EmptyStateDataDisplay.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { UISizeVariant } from 'types/UserInterface';\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 /** The display variant. */\n variant?: UISizeVariant;\n}\n\nconst ICON_SIZE_REGULAR = 24;\nconst ICON_SIZE_SLIM = 16;\n\n/** Represents a component to indicate an empty state. */\nexport function EmptyStateDataDisplay({\n label,\n paragraph,\n invertColors,\n variant = 'regular',\n}: 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 [styles['empty-state-data-display_wrapper--slim']]: variant === 'slim',\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 [styles['empty-state-data-display_icon-frame--slim']]: variant === 'slim',\n })}\n >\n <Icon name=\"CubeTransparent\" size={variant === 'regular' ? ICON_SIZE_REGULAR : ICON_SIZE_SLIM} />\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":["ICON_SIZE_REGULAR","ICON_SIZE_SLIM","EmptyStateDataDisplay","label","paragraph","invertColors","variant","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;;;;;GAmBMA,IAAoB,IACpBC,IAAiB;AAGhB,SAASC,EAAsB;AAAA,EACpC,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,GAA+B;AAC7B,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,kCAAkC,GAAG;AAAA,QAC1D,CAACA,EAAO,iDAAiD,CAAC,GAAGJ;AAAA,QAC7D,CAACI,EAAO,wCAAwC,CAAC,GAAGH,MAAY;AAAA,MAAA,CACjE;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,qCAAqC,GAAG;AAAA,cAC7D,CAACA,EAAO,oDAAoD,CAAC,GAAGJ;AAAA,cAChE,CAACI,EAAO,2CAA2C,CAAC,GAAGH,MAAY;AAAA,YAAA,CACpE;AAAA,YAED,UAAA,gBAAAI,EAACC,KAAK,MAAK,mBAAkB,MAAML,MAAY,YAAYN,IAAoBC,EAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjG,gBAAAM,EAAC,OAAA,EAAI,WAAWE,EAAO,uCAAuC,GAC5D,UAAA;AAAA,UAAA,gBAAAC,EAAC,SAAA,EAAM,WAAWD,EAAO,gCAAgC,GAAI,UAAAN,GAAM;AAAA,UAClEC,KAAa,gBAAAM,EAAC,KAAA,EAAE,WAAWD,EAAO,oCAAoC,GAAI,UAAAL,EAAA,CAAU;AAAA,QAAA,EAAA,CACvF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -2,3 +2,4 @@ export type UIButtonVariant = 'primary' | 'secondary' | 'destructive-primary' |
|
|
|
2
2
|
export type UISelectVariant = 'small' | 'regular';
|
|
3
3
|
export type UITooltipSize = 'small' | 'medium' | 'large';
|
|
4
4
|
export type UIStatus = 'information' | 'danger' | 'warning' | 'success' | 'default' | 'cluster' | 'information-light' | 'warning-light' | 'success-light' | 'default-light';
|
|
5
|
+
export type UISizeVariant = 'slim' | 'regular';
|
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.41.
|
|
5
|
+
"version": "3.41.1",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -46,35 +46,35 @@
|
|
|
46
46
|
"@commitlint/cli": "^19.8.1",
|
|
47
47
|
"@commitlint/config-conventional": "^19.8.1",
|
|
48
48
|
"@react-aria/button": "^3.14.1",
|
|
49
|
-
"@react-aria/dialog": "^3.5.
|
|
50
|
-
"@react-aria/overlays": "^3.29.
|
|
49
|
+
"@react-aria/dialog": "^3.5.30",
|
|
50
|
+
"@react-aria/overlays": "^3.29.1",
|
|
51
51
|
"@react-types/dialog": "^3.5.21",
|
|
52
52
|
"@semantic-release/git": "^10.0.1",
|
|
53
53
|
"@semantic-release/gitlab": "^13.2.8",
|
|
54
54
|
"@semantic-release/npm": "^12.0.2",
|
|
55
|
-
"@storybook/addon-a11y": "^9.1.
|
|
56
|
-
"@storybook/addon-docs": "^9.1.
|
|
57
|
-
"@storybook/addon-links": "^9.1.
|
|
58
|
-
"@storybook/react": "^9.1.
|
|
59
|
-
"@storybook/react-vite": "^9.1.
|
|
55
|
+
"@storybook/addon-a11y": "^9.1.4",
|
|
56
|
+
"@storybook/addon-docs": "^9.1.4",
|
|
57
|
+
"@storybook/addon-links": "^9.1.4",
|
|
58
|
+
"@storybook/react": "^9.1.4",
|
|
59
|
+
"@storybook/react-vite": "^9.1.4",
|
|
60
60
|
"@testing-library/jest-dom": "^6.8.0",
|
|
61
61
|
"@testing-library/react": "^16.3.0",
|
|
62
62
|
"@types/jest": "^30.0.0",
|
|
63
63
|
"@types/node": "^22.18.0",
|
|
64
64
|
"@types/react": "^19.1.12",
|
|
65
|
-
"@types/react-dom": "^19.1.
|
|
65
|
+
"@types/react-dom": "^19.1.9",
|
|
66
66
|
"@uva-glass/eslint-config": "^1.3.11",
|
|
67
67
|
"@uva-glass/stylelint-config": "^1.2.3",
|
|
68
68
|
"@vitejs/plugin-react": "^5.0.2",
|
|
69
|
-
"babel-jest": "^30.1.
|
|
69
|
+
"babel-jest": "^30.1.2",
|
|
70
70
|
"babel-plugin-transform-vite-meta-env": "^1.0.3",
|
|
71
71
|
"clsx": "^2.1.1",
|
|
72
72
|
"eslint-plugin-react-hooks": "^6.0.0",
|
|
73
73
|
"glob": "^11.0.3",
|
|
74
74
|
"husky": "^9.1.7",
|
|
75
75
|
"identity-obj-proxy": "^3.0.0",
|
|
76
|
-
"jest": "^30.1.
|
|
77
|
-
"jest-environment-jsdom": "^30.1.
|
|
76
|
+
"jest": "^30.1.2",
|
|
77
|
+
"jest-environment-jsdom": "^30.1.2",
|
|
78
78
|
"jest-junit": "^16.0.0",
|
|
79
79
|
"jsdom": "^26.1.0",
|
|
80
80
|
"npm-run-all2": "^8.0.4",
|
|
@@ -82,15 +82,15 @@
|
|
|
82
82
|
"react-dom": "^19.1.1",
|
|
83
83
|
"react-router": "^7.8.2",
|
|
84
84
|
"semantic-release": "^24.2.7",
|
|
85
|
-
"storybook": "^9.1.
|
|
86
|
-
"style-dictionary": "^5.0.
|
|
85
|
+
"storybook": "^9.1.4",
|
|
86
|
+
"style-dictionary": "^5.0.4",
|
|
87
87
|
"stylelint": "^16.23.1",
|
|
88
88
|
"stylelint-config-recommended": "^17.0.0",
|
|
89
89
|
"stylelint-config-standard": "^39.0.0",
|
|
90
90
|
"stylelint-order": "^7.0.0",
|
|
91
91
|
"ts-node": "^10.9.2",
|
|
92
92
|
"typescript": "^5.9.2",
|
|
93
|
-
"vite": "^7.1.
|
|
93
|
+
"vite": "^7.1.4",
|
|
94
94
|
"vite-plugin-dts": "^4.5.4",
|
|
95
95
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
96
96
|
"vite-plugin-static-copy": "^3.1.2",
|
|
@@ -109,8 +109,8 @@
|
|
|
109
109
|
},
|
|
110
110
|
"optionalDependencies": {
|
|
111
111
|
"@ast-grep/napi-linux-x64-gnu": "0.39.4",
|
|
112
|
-
"@rollup/rollup-linux-x64-gnu": "^4.
|
|
113
|
-
"@rspack/binding-darwin-arm64": "1.5.
|
|
114
|
-
"@rspack/binding-linux-x64-gnu": "1.5.
|
|
112
|
+
"@rollup/rollup-linux-x64-gnu": "^4.50.0",
|
|
113
|
+
"@rspack/binding-darwin-arm64": "1.5.2",
|
|
114
|
+
"@rspack/binding-linux-x64-gnu": "1.5.2"
|
|
115
115
|
}
|
|
116
116
|
}
|