@cloudoperators/juno-ui-components 9.1.0 → 9.2.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.
Files changed (44) hide show
  1. package/build/components/Box/Box.component.d.ts +11 -2
  2. package/build/components/Box/Box.component.d.ts.map +1 -1
  3. package/build/components/Box/Box.stories.d.ts +8 -0
  4. package/build/components/Box/Box.stories.d.ts.map +1 -1
  5. package/build/components/Checkbox/Checkbox.stories.d.ts.map +1 -1
  6. package/build/components/CheckboxGroup/CheckboxGroup.stories.d.ts.map +1 -1
  7. package/build/components/CodeBlock/CodeBlock.component.d.ts +7 -2
  8. package/build/components/CodeBlock/CodeBlock.component.d.ts.map +1 -1
  9. package/build/components/CodeBlock/CodeBlock.stories.d.ts +1 -0
  10. package/build/components/CodeBlock/CodeBlock.stories.d.ts.map +1 -1
  11. package/build/components/CodeBlock/CodeBlockFooter.component.d.ts +17 -0
  12. package/build/components/CodeBlock/CodeBlockFooter.component.d.ts.map +1 -0
  13. package/build/components/CodeBlock/index.d.ts +1 -0
  14. package/build/components/CodeBlock/index.d.ts.map +1 -1
  15. package/build/components/DataGrid/DataGrid.component.d.ts +1 -0
  16. package/build/components/DataGrid/DataGrid.component.d.ts.map +1 -1
  17. package/build/components/DescriptionTerm/DescriptionTerm.component.d.ts.map +1 -1
  18. package/build/components/Divider/index.d.ts +2 -0
  19. package/build/components/Divider/index.d.ts.map +1 -0
  20. package/build/components/Radio/Radio.stories.d.ts.map +1 -1
  21. package/build/components/RadioGroup/RadioGroup.stories.d.ts.map +1 -1
  22. package/build/components/SecretText/SecretText.stories.d.ts.map +1 -1
  23. package/build/components/Select/Select.stories.d.ts.map +1 -1
  24. package/build/components/SignInForm/SignInForm.component.d.ts +1 -1
  25. package/build/components/SignInForm/SignInForm.component.d.ts.map +1 -1
  26. package/build/components/SignInForm/SignInForm.stories.d.ts +1 -0
  27. package/build/components/SignInForm/SignInForm.stories.d.ts.map +1 -1
  28. package/build/components/Status/Status.component.d.ts +21 -0
  29. package/build/components/Status/Status.component.d.ts.map +1 -0
  30. package/build/components/Status/Status.stories.d.ts +19 -0
  31. package/build/components/Status/Status.stories.d.ts.map +1 -0
  32. package/build/components/Status/Status.test.d.ts +2 -0
  33. package/build/components/Status/Status.test.d.ts.map +1 -0
  34. package/build/components/Status/index.d.ts +2 -0
  35. package/build/components/Status/index.d.ts.map +1 -0
  36. package/build/components/Switch/Switch.stories.d.ts.map +1 -1
  37. package/build/components/TextInput/TextInput.stories.d.ts.map +1 -1
  38. package/build/components/Textarea/Textarea.stories.d.ts.map +1 -1
  39. package/build/index.d.ts +2 -0
  40. package/build/index.d.ts.map +1 -1
  41. package/build/index.js +4061 -3820
  42. package/build/juno-ui-components.css +1 -1
  43. package/build/theme.css +75 -10
  44. package/package.json +18 -15
package/build/theme.css CHANGED
@@ -276,6 +276,11 @@
276
276
  /* Component Background Colors: */
277
277
  --background-color-theme-badge-default: var(--color-badge-default-bg);
278
278
  --background-color-theme-box-default: var(--color-box-bg);
279
+ --background-color-theme-box-info: var(--color-box-info-bg);
280
+ --background-color-theme-box-success: var(--color-box-success-bg);
281
+ --background-color-theme-box-warning: var(--color-box-warning-bg);
282
+ --background-color-theme-box-error: var(--color-box-error-bg);
283
+ --background-color-theme-box-danger: var(--color-box-danger-bg);
279
284
 
280
285
  /* Side Navigation Background Colors */
281
286
  --background-color-theme-sidenav: var(--color-sidenav-background);
@@ -344,6 +349,7 @@
344
349
  --background-color-theme-checkbox: var(--color-checkbox-bg); /* -> .jn:bg-theme-checkbox */
345
350
 
346
351
  --background-color-theme-code-block: var(--color-codeblock-bg);
352
+ --background-color-theme-status-details: var(--color-status-details-bg);
347
353
 
348
354
  --background-color-theme-content-area-bg: var(--color-content-area-bg);
349
355
 
@@ -402,16 +408,26 @@
402
408
  --text-color-theme-pageheader-appname-default: var(--color-pageheader-appname-text-default);
403
409
  --text-color-theme-pageheader-appname-hover: var(--color-pageheader-appname-text-hover);
404
410
  --text-color-theme-sidenavigation-item-active: var(--color-sidenavigation-item-active);
411
+ --text-color-theme-status-details: var(--color-status-details-text);
412
+ --text-color-theme-status-code: var(--color-status-code);
405
413
 
406
414
  /* Component Border Colors: */
407
415
  --border-color-theme-default: var(--color-border-default);
416
+ --border-color-theme-high: var(--color-border-high);
417
+ --border-color-theme-higher: var(--color-border-higher);
408
418
 
409
419
  --border-color-theme-box-default: var(--color-box-border);
420
+ --border-color-theme-box-info: var(--color-box-info-border);
421
+ --border-color-theme-box-success: var(--color-box-success-border);
422
+ --border-color-theme-box-warning: var(--color-box-warning-border);
423
+ --border-color-theme-box-error: var(--color-box-error-border);
424
+ --border-color-theme-box-danger: var(--color-box-danger-border);
410
425
 
411
426
  --border-color-theme-card-default: var(--color-card-border-default);
412
427
  --border-color-theme-card-hover: var(--color-card-border-hover);
413
428
 
414
429
  --border-color-theme-codeblock-bar: var(--color-codeblock-bar-border);
430
+ --border-color-theme-codeblock-footer: var(--color-codeblock-footer-border);
415
431
  --border-color-theme-codeblock-tab-active: var(--color-text-default);
416
432
 
417
433
  --border-color-theme-datalist-row: var(--color-datalist-row-border);
@@ -442,6 +458,7 @@
442
458
  --border-color-theme-textinput-default: var(--color-textinput-default-border);
443
459
 
444
460
  --border-color-theme-sidenav: var(--color-sidenav-border);
461
+ --border-color-theme-status-details: var(--color-status-details-border);
445
462
 
446
463
  --padding-xs: 0.25rem;
447
464
  --padding-sm: 0.5rem;
@@ -523,6 +540,7 @@
523
540
  --color-global-bg: var(--color-juno-grey-light-1);
524
541
  --color-border-default: var(--color-juno-grey-light-7);
525
542
  --color-border-high: var(--color-juno-grey-light-9);
543
+ --color-border-higher: rgb(183, 183, 183);
526
544
  --color-global-text: var(--color-juno-text-default);
527
545
  --color-content-area-bg: var(--color-background-lvl-0);
528
546
  /* LT FOCUS */
@@ -608,17 +626,24 @@
608
626
  --color-icon-severityMedium: var(--color-severity-medium);
609
627
  --color-icon-severityLow: var(--color-severity-low);
610
628
 
629
+ /* LT Semantic Background Colors */
630
+ --color-info-bg: rgb(229, 241, 250);
631
+ --color-warning-bg: rgb(255, 247, 229);
632
+ --color-success-bg: rgb(237, 248, 232);
633
+ --color-danger-bg: rgb(249, 229, 229);
634
+ --color-error-bg: rgb(249, 229, 229);
635
+
611
636
  /* LT Message */
612
637
  --color-message-danger-border: var(--color-danger);
613
- --color-message-danger-bg: rgb(249, 229, 229);
638
+ --color-message-danger-bg: var(--color-danger-bg);
614
639
  --color-message-default-border: var(--color-info);
615
- --color-message-default-bg: rgb(229, 241, 250);
640
+ --color-message-default-bg: var(--color-info-bg);
616
641
  --color-message-error-border: var(--color-error);
617
- --color-message-error-bg: rgb(249, 229, 229);
642
+ --color-message-error-bg: var(--color-error-bg);
618
643
  --color-message-warning-border: var(--color-warning);
619
- --color-message-warning-bg: rgb(255, 247, 229);
644
+ --color-message-warning-bg: var(--color-warning-bg);
620
645
  --color-message-success-border: var(--color-success);
621
- --color-message-success-bg: rgb(237, 248, 232);
646
+ --color-message-success-bg: var(--color-success-bg);
622
647
 
623
648
  /* LT Introbox */
624
649
  --color-introbox-bg: var(--color-background-lvl-2);
@@ -679,6 +704,12 @@
679
704
  /* LT CodeBlock */
680
705
  --color-codeblock-bg: var(--color-background-lvl-2);
681
706
  --color-codeblock-bar-border: var(--color-background-lvl-4);
707
+ --color-codeblock-footer-border: var(--color-background-lvl-4);
708
+ /* LT Status */
709
+ --color-status-details-bg: var(--color-background-lvl-2);
710
+ --color-status-details-text: var(--color-text-default);
711
+ --color-status-details-border: var(--color-border-default);
712
+ --color-status-code: var(--color-text-disabled);
682
713
  /* LT Panel */
683
714
  --color-panel-bg: rgb(252 252 252 / 0.8);
684
715
  /* LT PageHeader */
@@ -703,6 +734,16 @@
703
734
  /* LT Box */
704
735
  --color-box-bg: var(--color-background-lvl-1);
705
736
  --color-box-border: var(--color-background-lvl-3);
737
+ --color-box-info-bg: var(--color-info-bg);
738
+ --color-box-info-border: var(--color-info);
739
+ --color-box-success-bg: var(--color-success-bg);
740
+ --color-box-success-border: var(--color-success);
741
+ --color-box-warning-bg: var(--color-warning-bg);
742
+ --color-box-warning-border: var(--color-warning);
743
+ --color-box-error-bg: var(--color-error-bg);
744
+ --color-box-error-border: var(--color-error);
745
+ --color-box-danger-bg: var(--color-danger-bg);
746
+ --color-box-danger-border: var(--color-danger);
706
747
  /* LT SideNavigation */
707
748
  --color-sidenavigation-item-active: var(--color-black);
708
749
  --color-sidenavigation-item-active-bg: var(--color-background-lvl-0);
@@ -776,6 +817,7 @@
776
817
  --color-global-bg: var(--color-juno-grey-blue-10);
777
818
  --color-border-default: var(--color-juno-grey-blue-3);
778
819
  --color-border-high: var(--color-juno-grey-blue-1);
820
+ --color-border-higher: rgb(92, 92, 92);
779
821
  --color-global-text: var(--color-juno-text-default);
780
822
  --color-content-area-bg: var(--color-background-lvl-0);
781
823
 
@@ -864,17 +906,24 @@
864
906
  --color-icon-severityMedium: var(--color-severity-medium);
865
907
  --color-icon-severityLow: var(--color-severity-low);
866
908
 
909
+ /* DT Semantic Background Colors */
910
+ --color-info-bg: rgb(14, 48, 57);
911
+ --color-warning-bg: rgb(49, 47, 24);
912
+ --color-success-bg: rgb(20, 48, 34);
913
+ --color-danger-bg: rgb(49, 27, 26);
914
+ --color-error-bg: rgb(49, 27, 26);
915
+
867
916
  /* DT Message */
868
917
  --color-message-danger-border: var(--color-danger);
869
- --color-message-danger-bg: rgb(49, 27, 26);
918
+ --color-message-danger-bg: var(--color-danger-bg);
870
919
  --color-message-default-border: var(--color-info);
871
- --color-message-default-bg: rgb(14, 48, 57);
920
+ --color-message-default-bg: var(--color-info-bg);
872
921
  --color-message-error-border: var(--color-error);
873
- --color-message-error-bg: rgb(49, 27, 26);
922
+ --color-message-error-bg: var(--color-error-bg);
874
923
  --color-message-warning-border: var(--color-warning);
875
- --color-message-warning-bg: rgb(49, 47, 24);
924
+ --color-message-warning-bg: var(--color-warning-bg);
876
925
  --color-message-success-border: var(--color-success);
877
- --color-message-success-bg: rgba(20, 48, 34);
926
+ --color-message-success-bg: var(--color-success-bg);
878
927
  /* DT Introbox */
879
928
  --color-introbox-bg: var(--color-background-lvl-2);
880
929
  --color-introbox-border: var(--color-accent);
@@ -934,6 +983,12 @@
934
983
  /* DT CodeBlock */
935
984
  --color-codeblock-bg: var(--color-background-lvl-2);
936
985
  --color-codeblock-bar-border: var(--color-background-lvl-4);
986
+ --color-codeblock-footer-border: var(--color-background-lvl-4);
987
+ /* DT Status */
988
+ --color-status-details-bg: var(--color-background-lvl-2);
989
+ --color-status-details-text: var(--color-text-default);
990
+ --color-status-details-border: var(--color-border-default);
991
+ --color-status-code: var(--color-text-disabled);
937
992
  /* DT Panel */
938
993
  --color-panel-bg: rgb(from var(--color-juno-grey-blue-11) r g b / 0.75);
939
994
  /* DT PageHeader */
@@ -958,6 +1013,16 @@
958
1013
  /* DT Box */
959
1014
  --color-box-bg: var(--color-background-lvl-1);
960
1015
  --color-box-border: var(--color-background-lvl-3);
1016
+ --color-box-info-bg: var(--color-info-bg);
1017
+ --color-box-info-border: var(--color-info);
1018
+ --color-box-success-bg: var(--color-success-bg);
1019
+ --color-box-success-border: var(--color-success);
1020
+ --color-box-warning-bg: var(--color-warning-bg);
1021
+ --color-box-warning-border: var(--color-warning);
1022
+ --color-box-error-bg: var(--color-error-bg);
1023
+ --color-box-error-border: var(--color-error);
1024
+ --color-box-danger-bg: var(--color-danger-bg);
1025
+ --color-box-danger-border: var(--color-danger);
961
1026
  /* DT SideNavigation */
962
1027
  --color-sidenavigation-item-active: var(--color-white);
963
1028
  --color-sidenavigation-item-active-bg: var(--color-background-lvl-0);
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@cloudoperators/juno-ui-components",
3
3
  "private": false,
4
4
  "source": "src/index.js",
5
- "version": "9.1.0",
5
+ "version": "9.2.0",
6
6
  "types": "build/index.d.ts",
7
7
  "exports": {
8
8
  "./index": "./build/index.js",
@@ -15,7 +15,10 @@
15
15
  "build/*"
16
16
  ],
17
17
  "author": "UI-Team",
18
- "repository": "https://github.com/cloudoperators/juno/tree/main/packages/juno-ui-components",
18
+ "repository": {
19
+ "type": "git",
20
+ "url": "https://github.com/cloudoperators/juno/tree/main/packages/juno-ui-components"
21
+ },
19
22
  "license": "Apache-2.0",
20
23
  "engines": {
21
24
  "node": ">=20.19.0",
@@ -24,35 +27,35 @@
24
27
  "devDependencies": {
25
28
  "@babel/preset-env": "7.29.7",
26
29
  "@babel/preset-react": "7.28.5",
27
- "@floating-ui/react": "0.27.19",
30
+ "@floating-ui/react": "0.27.20",
28
31
  "@headlessui/react": "2.2.10",
29
32
  "@material-design-icons/svg": "0.14.15",
30
- "@storybook/addon-docs": "10.4.4",
31
- "@storybook/addon-links": "10.4.4",
32
- "@storybook/react-vite": "10.4.4",
33
- "@tailwindcss/vite": "4.3.0",
33
+ "@storybook/addon-docs": "10.4.6",
34
+ "@storybook/addon-links": "10.4.6",
35
+ "@storybook/react-vite": "10.4.6",
36
+ "@tailwindcss/vite": "4.3.3",
34
37
  "@testing-library/jest-dom": "6.9.1",
35
38
  "@testing-library/react": "16.3.2",
36
39
  "@testing-library/user-event": "14.6.1",
37
40
  "@types/react": "19.2.17",
38
41
  "@types/react-dom": "19.2.3",
39
- "@vitejs/plugin-react": "6.0.2",
40
- "eslint-plugin-storybook": "10.4.4",
42
+ "@vitejs/plugin-react": "6.0.4",
43
+ "eslint-plugin-storybook": "10.4.6",
41
44
  "flatpickr": "4.6.13",
42
- "focus-trap-react": "12.0.2",
45
+ "focus-trap-react": "12.0.3",
43
46
  "jsdom": "29.1.1",
44
- "react": "19.2.7",
45
- "react-dom": "19.2.7",
47
+ "react": "19.2.8",
48
+ "react-dom": "19.2.8",
46
49
  "react-tabs": "6.1.1",
47
- "storybook": "10.4.4",
48
- "tailwindcss": "4.3.0",
50
+ "storybook": "10.4.6",
51
+ "tailwindcss": "4.3.3",
49
52
  "typescript": "6.0.3",
50
53
  "vite": "8.0.16",
51
54
  "vite-plugin-dts": "4.5.4",
52
55
  "vite-plugin-glob": "0.3.2",
53
56
  "vite-plugin-svgr": "5.2.0",
54
57
  "vite-tsconfig-paths": "6.1.1",
55
- "vitest": "4.1.8",
58
+ "vitest": "4.1.10",
56
59
  "@cloudoperators/juno-config": "0.1.0"
57
60
  },
58
61
  "peerDependencies": {