@indico-data/design-system 2.0.3 → 2.1.2

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 (36) hide show
  1. package/.commitlintrc.ts +13 -0
  2. package/.harness/pipeline.yaml +1 -1
  3. package/.releaserc.json +16 -1
  4. package/README.md +47 -26
  5. package/lib/index.css +84 -67
  6. package/lib/index.d.ts +49 -156
  7. package/lib/index.esm.css +84 -67
  8. package/lib/index.esm.js +1 -287
  9. package/lib/index.esm.js.map +1 -1
  10. package/lib/index.js +0 -291
  11. package/lib/index.js.map +1 -1
  12. package/lib/legacy/components/index.d.ts +0 -2
  13. package/package.json +4 -3
  14. package/src/components/button/{Button.scss → styles/Button.scss} +5 -69
  15. package/src/components/button/styles/_variables.scss +89 -0
  16. package/src/index.ts +0 -5
  17. package/src/legacy/components/index.ts +0 -2
  18. package/src/styles/index.scss +1 -1
  19. package/src/styles/variables/themes/dark.scss +70 -74
  20. package/src/stylesAndAnimations/colors/constants.ts +60 -60
  21. package/lib/legacy/components/Wizard/Wizard.d.ts +0 -48
  22. package/lib/legacy/components/Wizard/Wizard.stories.d.ts +0 -29
  23. package/lib/legacy/components/Wizard/Wizard.styles.d.ts +0 -4
  24. package/lib/legacy/components/Wizard/index.d.ts +0 -2
  25. package/lib/legacy/components/WizardWithSidebar/WizardWithSidebar.d.ts +0 -58
  26. package/lib/legacy/components/WizardWithSidebar/WizardWithSidebar.stories.d.ts +0 -46
  27. package/lib/legacy/components/WizardWithSidebar/WizardWithSidebar.styles.d.ts +0 -9
  28. package/lib/legacy/components/WizardWithSidebar/index.d.ts +0 -2
  29. package/src/legacy/components/Wizard/Wizard.stories.tsx +0 -180
  30. package/src/legacy/components/Wizard/Wizard.styles.ts +0 -72
  31. package/src/legacy/components/Wizard/Wizard.tsx +0 -211
  32. package/src/legacy/components/Wizard/index.ts +0 -2
  33. package/src/legacy/components/WizardWithSidebar/WizardWithSidebar.stories.tsx +0 -143
  34. package/src/legacy/components/WizardWithSidebar/WizardWithSidebar.styles.ts +0 -107
  35. package/src/legacy/components/WizardWithSidebar/WizardWithSidebar.tsx +0 -278
  36. package/src/legacy/components/WizardWithSidebar/index.ts +0 -2
@@ -10,8 +10,6 @@ export { Pagination } from './Pagination';
10
10
  export { Shrug } from './user-feedback';
11
11
  export { ConfirmModal, ModalBase } from './modals';
12
12
  export { LoadingAwareContainer } from './LoadingAwareContainer';
13
- export { Wizard, WizardCard, WizardSection, StyledWizard } from './Wizard';
14
- export { WizardWithSidebar } from './WizardWithSidebar';
15
13
  export { Drawer } from './Navigation/Drawer';
16
14
  export { TextTruncate } from './text-truncate';
17
15
  export { Toggle } from './Toggle';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "2.0.3",
3
+ "version": "2.1.2",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
@@ -18,7 +18,9 @@
18
18
  "build storybook": "storybook build",
19
19
  "test-storybook": "test-storybook",
20
20
  "test": "DEBUG_PRINT_LIMIT=10000 jest",
21
- "test:watch": "DEBUG_PRINT_LIMIT=10000 jest --watch"
21
+ "test:watch": "DEBUG_PRINT_LIMIT=10000 jest --watch",
22
+ "all-releases": "npm view @indico-data/design-system versions",
23
+ "latest-release": "npm dist-tags ls @indico-data/design-system"
22
24
  },
23
25
  "lint-staged": {
24
26
  "**/*": "prettier --write --ignore-unknown"
@@ -128,7 +130,6 @@
128
130
  "rollup-plugin-scss": "^4.0.0",
129
131
  "sass": "^1.75.0",
130
132
  "sass-loader": "10.1.1",
131
- "semantic-release": "^23.1.1",
132
133
  "storybook": "^8.0.8",
133
134
  "storybook-css-modules": "^1.0.8",
134
135
  "style-loader": "2.0.0",
@@ -1,72 +1,4 @@
1
- // Variables
2
- :root [data-theme='light'],
3
- :root {
4
- // Typography
5
- --pf-button-font-weight-bold: var(--pf-font-weight-bold);
6
- --pf-button-font-weight-regular: var(--pf-button-font-weight-regular);
7
- --pf-button-background-primary-color: var(--pf-primary-color);
8
- --pf-button-disabled-primary-color: var(--pf-primary-color-300);
9
- --pf-button-focus-primary-color: var(--pf-primary-color-900);
10
- --pf-button-hover-primary-color: var(--pf-primary-color-400);
11
- --pf-button-outline-hover-primary-color: var(--pf-primary-color-100);
12
- --pf-button-primary-color: var(--pf-primary-color);
13
- --pf-button-primary-text-color: var(--pf-white-color);
14
-
15
- // Secondary Button Colors
16
- --pf-button-background-secondary-color: var(--pf-secondary-color);
17
- --pf-button-disabled-secondary-color: var(--pf-secondary-color-300);
18
- --pf-button-focus-secondary-color: var(--pf-secondary-color-900);
19
- --pf-button-hover-secondary-color: var(--pf-secondary-color-400);
20
- --pf-button-outline-hover-secondary-color: var(--pf-secondary-color-100);
21
- --pf-button-secondary-color: var(--pf-secondary-color);
22
- --pf-button-secondary-text-color: var(--pf-white-color);
23
-
24
- // Error Button Colors
25
- --pf-button-background-error-color: var(--pf-error-color);
26
- --pf-button-disabled-error-color: var(--pf-red-color-300);
27
- --pf-button-focus-error-color: var(--pf-red-color-900);
28
- --pf-button-hover-error-color: var(--pf-red-color-400);
29
- --pf-button-error-color: var(--pf-error-color);
30
- --pf-button-error-text-color: var(--pf-white-color);
31
- --pf-button-outline-hover-error-color: var(--pf-red-color-100);
32
-
33
- // Success Button Colors
34
- --pf-button-background-success-color: var(--pf-success-color);
35
- --pf-button-disabled-success-color: var(--pf-green-color-300);
36
- --pf-button-focus-success-color: var(--pf-green-color-900);
37
- --pf-button-hover-success-color: var(--pf-green-color-400);
38
- --pf-button-success-color: var(--pf-success-color);
39
- --pf-button-success-text-color: var(--pf-white-color);
40
- --pf-button-outline-hover-success-color: var(--pf-green-color-100);
41
-
42
- // Warning Button Colors
43
- --pf-button-background-warning-color: var(--pf-warning-color);
44
- --pf-button-disabled-warning-color: var(--pf-orange-color-300);
45
- --pf-button-focus-warning-color: var(--pf-orange-color-900);
46
- --pf-button-hover-warning-color: var(--pf-orange-color-400);
47
- --pf-button-warning-color: var(--pf-warning-color);
48
- --pf-button-warning-text-color: var(--pf-white-color);
49
- --pf-button-outline-hover-warning-color: var(--pf-orange-color-100);
50
-
51
- // Info Button Colors
52
- --pf-button-background-info-color: var(--pf-info-color);
53
- --pf-button-disabled-info-color: var(--pf-gray-color-300);
54
- --pf-button-focus-info-color: var(--pf-gray-color-900);
55
- --pf-button-hover-info-color: var(--pf-gray-color-400);
56
- --pf-button-info-color: var(--pf-info-color);
57
- --pf-button-info-text-color: var(--pf-white-color);
58
- --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
59
-
60
- // Gray Button Color
61
- --pf-button-gray-color: var(--pf-gray-color);
62
- --pf-button-gray-disabled-color: var(--pf-gray-color-400);
63
-
64
- // Outline Buttons
65
- --pf-button-outline-background-color: var(--pf-white-color);
66
-
67
- // Button Radius
68
- --pf-button-rounded: var(--pf-rounded);
69
- }
1
+ @import './variables.scss';
70
2
 
71
3
  .btn {
72
4
  display: inline-flex;
@@ -256,6 +188,10 @@
256
188
  }
257
189
  }
258
190
 
191
+ .btn--info {
192
+ background-color: var(--pf-button-background-info-color);
193
+ }
194
+
259
195
  .btn--info.btn--text {
260
196
  background: transparent;
261
197
  color: var(--pf-button-info-color);
@@ -0,0 +1,89 @@
1
+ // Common Variables
2
+ :root,
3
+ :root [data-theme='light'],
4
+ :root [data-theme='dark'] {
5
+ // Typography
6
+ --pf-button-font-weight-bold: var(--pf-font-weight-bold);
7
+ --pf-button-font-weight-regular: var(--pf-button-font-weight-regular);
8
+
9
+ // Primary Button Colors
10
+ --pf-button-background-primary-color: var(--pf-primary-color);
11
+ --pf-button-disabled-primary-color: var(--pf-primary-color-300);
12
+ --pf-button-focus-primary-color: var(--pf-primary-color-900);
13
+ --pf-button-hover-primary-color: var(--pf-primary-color-400);
14
+ --pf-button-outline-hover-primary-color: var(--pf-primary-color-100);
15
+ --pf-button-primary-color: var(--pf-primary-color);
16
+ --pf-button-primary-text-color: var(--pf-white-color);
17
+
18
+ // Secondary Button Colors
19
+ --pf-button-background-secondary-color: var(--pf-secondary-color);
20
+ --pf-button-disabled-secondary-color: var(--pf-secondary-color-300);
21
+ --pf-button-focus-secondary-color: var(--pf-secondary-color-900);
22
+ --pf-button-hover-secondary-color: var(--pf-secondary-color-400);
23
+ --pf-button-outline-hover-secondary-color: var(--pf-secondary-color-100);
24
+ --pf-button-secondary-color: var(--pf-secondary-color);
25
+ --pf-button-secondary-text-color: var(--pf-white-color);
26
+
27
+ // Error Button Colors
28
+ --pf-button-background-error-color: var(--pf-error-color);
29
+ --pf-button-disabled-error-color: var(--pf-red-color-300);
30
+ --pf-button-focus-error-color: var(--pf-red-color-900);
31
+ --pf-button-hover-error-color: var(--pf-red-color-400);
32
+ --pf-button-error-color: var(--pf-error-color);
33
+ --pf-button-error-text-color: var(--pf-white-color);
34
+ --pf-button-outline-hover-error-color: var(--pf-red-color-100);
35
+
36
+ // Success Button Colors
37
+ --pf-button-background-success-color: var(--pf-success-color);
38
+ --pf-button-focus-success-color: var(--pf-green-color-900);
39
+ --pf-button-hover-success-color: var(--pf-green-color-400);
40
+ --pf-button-success-color: var(--pf-success-color);
41
+ --pf-button-success-text-color: var(--pf-white-color);
42
+ --pf-button-outline-hover-success-color: var(--pf-green-color-100);
43
+
44
+ // Warning Button Colors
45
+ --pf-button-background-warning-color: var(--pf-warning-color);
46
+ --pf-button-focus-warning-color: var(--pf-orange-color-900);
47
+ --pf-button-hover-warning-color: var(--pf-orange-color-400);
48
+ --pf-button-warning-color: var(--pf-warning-color);
49
+ --pf-button-warning-text-color: var(--pf-white-color);
50
+
51
+ // Info Button Colors
52
+
53
+ --pf-button-disabled-info-color: var(--pf-gray-color-300);
54
+ --pf-button-focus-info-color: var(--pf-gray-color-900);
55
+ --pf-button-info-color: var(--pf-info-color);
56
+ --pf-button-info-text-color: var(--pf-white-color);
57
+
58
+ // Gray Button Color
59
+ --pf-button-gray-color: var(--pf-gray-color);
60
+ --pf-button-gray-disabled-color: var(--pf-gray-color-400);
61
+
62
+ // Outline Buttons
63
+ --pf-button-outline-background-color: var(--pf-white-color);
64
+
65
+ // Button Radius
66
+ --pf-button-rounded: var(--pf-rounded);
67
+ }
68
+
69
+ // Light Theme Specific Variables
70
+ :root [data-theme='light'] {
71
+ --pf-button-disabled-success-color: var(--pf-green-color-300);
72
+ --pf-button-disabled-warning-color: var(--pf-orange-color-300);
73
+ --pf-button-outline-hover-warning-color: var(--pf-orange-color-100);
74
+
75
+ --pf-button-background-info-color: var(--pf-info-color);
76
+ --pf-button-hover-info-color: var(--pf-gray-color-400);
77
+ --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
78
+ }
79
+
80
+ // Dark Theme Specific Variables
81
+ :root [data-theme='dark'] {
82
+ --pf-button-disabled-success-color: var(--pf-green-color-400);
83
+ --pf-button-disabled-warning-color: var(--pf-orange-color-400);
84
+ --pf-button-outline-hover-warning-color: var(--pf-orange-color-300);
85
+
86
+ --pf-button-background-info-color: var(--pf-gray-color-800);
87
+ --pf-button-hover-info-color: var(--pf-gray-color-600);
88
+ --pf-button-outline-hover-info-color: var(--pf-gray-color-300);
89
+ }
package/src/index.ts CHANGED
@@ -53,14 +53,9 @@ export {
53
53
  Shrug,
54
54
  SingleCombobox,
55
55
  TextInput,
56
- Wizard,
57
- WizardCard,
58
- WizardSection,
59
- StyledWizard,
60
56
  TextTruncate,
61
57
  Toggle,
62
58
  Tooltip,
63
- WizardWithSidebar,
64
59
  } from './legacy/components';
65
60
 
66
61
  export { numberUtils, stringUtils, colorUtils } from './legacy/utils';
@@ -29,8 +29,6 @@ export { Pagination } from './Pagination';
29
29
  export { Shrug } from './user-feedback';
30
30
  export { ConfirmModal, ModalBase } from './modals';
31
31
  export { LoadingAwareContainer } from './LoadingAwareContainer';
32
- export { Wizard, WizardCard, WizardSection, StyledWizard } from './Wizard';
33
- export { WizardWithSidebar } from './WizardWithSidebar';
34
32
  export { Drawer } from './Navigation/Drawer';
35
33
  export { TextTruncate } from './text-truncate';
36
34
  export { Toggle } from './Toggle';
@@ -3,7 +3,7 @@
3
3
 
4
4
  // Components
5
5
  @import '../legacy/components/Navigation/Drawer/Drawer.scss';
6
- @import '../components/button/Button.scss';
6
+ @import '../components/button/styles/Button.scss';
7
7
 
8
8
  // Helper Classes
9
9
  @import 'typography';
@@ -1,89 +1,85 @@
1
- :root [data-theme="dark"] {
2
-
1
+ :root [data-theme='dark'] {
3
2
  // Primary Color
4
- --pf-primary-color: #27374D;
5
-
6
- --pf-primary-color-100: #E2E4E8;
7
- --pf-primary-color-200: #B6BAC1;
8
- --pf-primary-color-300: #898F9A;
9
- --pf-primary-color-400: #5D6573;
10
- --pf-primary-color-500: #27374D;
11
- --pf-primary-color-600: #202C3A;
12
- --pf-primary-color-700: #192228;
13
- --pf-primary-color-800: #131816;
14
- --pf-primary-color-900: #0D0E0E;
15
-
16
- // Secondary Color
17
- --pf-secondary-color: #526D82;
18
-
19
- --pf-secondary-color-100: #E6E9EB;
20
- --pf-secondary-color-200: #C0C7CD;
21
- --pf-secondary-color-300: #99A5AF;
22
- --pf-secondary-color-400: #738491;
23
- --pf-secondary-color-500: #526D82;
24
- --pf-secondary-color-600: #3F5866;
25
- --pf-secondary-color-700: #2C434A;
26
- --pf-secondary-color-800: #1A2E2E;
27
- --pf-secondary-color-900: #071919;
3
+ --pf-primary-color: #262c3a;
4
+
5
+ --pf-primary-color-100: #8194c0;
6
+ --pf-primary-color-200: #5b6b8f;
7
+ --pf-primary-color-300: #3b455e;
8
+ --pf-primary-color-400: #323a4d;
9
+ --pf-primary-color-500: #262c3a;
10
+ --pf-primary-color-600: #1f2431;
11
+ --pf-primary-color-700: #1c2632;
12
+ --pf-primary-color-800: #1b202c;
13
+ --pf-primary-color-900: #141b24;
14
+
15
+ // Secondary Color
16
+ --pf-secondary-color: #0070f5;
17
+
18
+ --pf-secondary-color-100: #dceafd;
19
+ --pf-secondary-color-200: #b3d4fc;
20
+ --pf-secondary-color-300: #7ab5fa;
21
+ --pf-secondary-color-400: #4797f5;
22
+ --pf-secondary-color-500: #0070f5;
23
+ --pf-secondary-color-600: #0067e1;
24
+ --pf-secondary-color-700: #005ac4;
25
+ --pf-secondary-color-800: #004eac;
26
+ --pf-secondary-color-900: #004393;
28
27
 
29
28
  // Gray Color
30
- --pf-gray-color: #DDE6ED;
31
-
32
- --pf-gray-color-100: #F7F9FA;
33
- --pf-gray-color-200: #EAF2F5;
34
- --pf-gray-color-300: #DDE6ED;
35
- --pf-gray-color-400: #D1DAE5;
36
- --pf-gray-color-500: #C4CFDD;
37
- --pf-gray-color-600: #B7C3D5;
38
- --pf-gray-color-700: #AAB8CD;
39
- --pf-gray-color-800: #9DACB5;
40
- --pf-gray-color-900: #90A19D;
41
-
29
+ --pf-gray-color: #bfc1c3;
30
+
31
+ --pf-gray-color-100: #efefef;
32
+ --pf-gray-color-200: #eaeaea;
33
+ --pf-gray-color-300: #dcdcdc;
34
+ --pf-gray-color-400: #d2d2d2;
35
+ --pf-gray-color-500: #bfc1c3;
36
+ --pf-gray-color-600: #a0a0a0;
37
+ --pf-gray-color-700: #828588;
38
+ --pf-gray-color-800: #797979;
39
+ --pf-gray-color-900: #585858;
42
40
 
43
41
  //Green Color
44
- --pf-green-color: #82DD55;
45
-
46
- --pf-green-color-100: #F0FFF2;
47
- --pf-green-color-200: #E1FFD5;
48
- --pf-green-color-300: #D2FFB8;
49
- --pf-green-color-400: #C3FF9B;
50
- --pf-green-color-500: #82DD55;
51
- --pf-green-color-600: #6FC94A;
52
- --pf-green-color-700: #5CB53F;
53
- --pf-green-color-800: #4AA134;
54
- --pf-green-color-900: #388D29;
55
-
42
+ --pf-green-color: #199d19;
43
+
44
+ --pf-green-color-100: #98ff98;
45
+ --pf-green-color-200: #76ff76;
46
+ --pf-green-color-300: #63eb63;
47
+ --pf-green-color-400: #41ca41;
48
+ --pf-green-color-500: #199d19;
49
+ --pf-green-color-600: #168116;
50
+ --pf-green-color-700: #106710;
51
+ --pf-green-color-800: #0d5a0d;
52
+ --pf-green-color-900: #0a500a;
56
53
 
57
54
  //Orange color
58
- --pf-orange-color: #EDB95E;
59
-
60
- --pf-orange-color-100: #FFF7E6;
61
- --pf-orange-color-200: #FFEDCC;
62
- --pf-orange-color-300: #FFE4B2;
63
- --pf-orange-color-400: #FFDA99;
64
- --pf-orange-color-500: #EDB95E;
65
- --pf-orange-color-600: #DAA54D;
66
- --pf-orange-color-700: #C7913D;
67
- --pf-orange-color-800: #B47D2D;
68
- --pf-orange-color-900: #A1691D;
69
-
55
+ --pf-orange-color: #da9534;
56
+
57
+ --pf-orange-color-100: #ffd599;
58
+ --pf-orange-color-200: #ffc676;
59
+ --pf-orange-color-300: #f7b75b;
60
+ --pf-orange-color-400: #f1ab48;
61
+ --pf-orange-color-500: #da9534;
62
+ --pf-orange-color-600: #c7892f;
63
+ --pf-orange-color-700: #a87428;
64
+ --pf-orange-color-800: #825b22;
65
+ --pf-orange-color-900: #68481a;
70
66
 
71
67
  //Red color
72
- --pf-red-color: #E23636;
73
-
74
- --pf-red-color-100: #FDECEC;
75
- --pf-red-color-200: #FBD1D1;
76
- --pf-red-color-300: #F9B6B6;
77
- --pf-red-color-400: #F79B9B;
78
- --pf-red-color-500: #E23636;
79
- --pf-red-color-600: #C72F2F;
80
- --pf-red-color-700: #AC2828;
81
- --pf-red-color-800: #912121;
82
- --pf-red-color-900: #761A1A;
68
+ --pf-red-color: #f44d4f;
69
+
70
+ --pf-red-color-100: #ffa9aa;
71
+ --pf-red-color-200: #ff8a8b;
72
+ --pf-red-color-300: #ff7577;
73
+ --pf-red-color-400: #ff6466;
74
+ --pf-red-color-500: #f44d4f;
75
+ --pf-red-color-600: #cf4244;
76
+ --pf-red-color-700: #b4393a;
77
+ --pf-red-color-800: #9a3132;
78
+ --pf-red-color-900: #752324;
83
79
 
84
80
  // Utility Colors
85
81
  --pf-error-color: var(--pf-red-color);
86
82
  --pf-success-color: var(--pf-green-color);
87
83
  --pf-warning-color: var(--pf-orange-color);
88
84
  --pf-info-color: var(--pf-gray-color);
89
- }
85
+ }
@@ -76,76 +76,76 @@ export const lightThemeColors = {
76
76
 
77
77
  export const darkThemeColors = {
78
78
  primary: {
79
- base: '#27374D',
80
- 100: '#E2E4E8',
81
- 200: '#B6BAC1',
82
- 300: '#898F9A',
83
- 400: '#5D6573',
84
- 500: '#27374D',
85
- 600: '#202C3A',
86
- 700: '#192228',
87
- 800: '#131816',
88
- 900: '#0D0E0E',
79
+ base: '#262c3a',
80
+ 100: '#8194c0',
81
+ 200: '#5b6b8f',
82
+ 300: '#3b455e',
83
+ 400: '#323a4d',
84
+ 500: '#262c3a',
85
+ 600: '#1f2431',
86
+ 700: '#1c2632',
87
+ 800: '#1b202c',
88
+ 900: '#141b24',
89
89
  },
90
90
  secondary: {
91
- base: '#526D82',
92
- 100: '#E6E9EB',
93
- 200: '#C0C7CD',
94
- 300: '#99A5AF',
95
- 400: '#738491',
96
- 500: '#526D82',
97
- 600: '#3F5866',
98
- 700: '#2C434A',
99
- 800: '#1A2E2E',
100
- 900: '#071919',
91
+ base: '#0070f5',
92
+ 100: '#dceafd',
93
+ 200: '#b3d4fc',
94
+ 300: '#7ab5fa',
95
+ 400: '#4797f5',
96
+ 500: '#0070f5',
97
+ 600: '#0067e1',
98
+ 700: '#005ac4',
99
+ 800: '#004eac',
100
+ 900: '#004393',
101
101
  },
102
102
  gray: {
103
- base: '#DDE6ED',
104
- 100: '#F7F9FA',
105
- 200: '#EAF2F5',
106
- 300: '#DDE6ED',
107
- 400: '#D1DAE5',
108
- 500: '#C4CFDD',
109
- 600: '#B7C3D5',
110
- 700: '#AAB8CD',
111
- 800: '#9DACB5',
112
- 900: '#90A19D',
103
+ base: '#bfc1c3',
104
+ 100: '#efefef',
105
+ 200: '#eaeaea',
106
+ 300: '#dcdcdc',
107
+ 400: '#d2d2d2',
108
+ 500: '#bfc1c3',
109
+ 600: '#a0a0a0',
110
+ 700: '#828588',
111
+ 800: '#797979',
112
+ 900: '#585858',
113
113
  },
114
114
  green: {
115
- base: '#82DD55',
116
- 100: '#F0FFF2',
117
- 200: '#E1FFD5',
118
- 300: '#D2FFB8',
119
- 400: '#C3FF9B',
120
- 500: '#82DD55',
121
- 600: '#6FC94A',
122
- 700: '#5CB53F',
123
- 800: '#4AA134',
124
- 900: '#388D29',
115
+ base: '#199d19',
116
+ 100: '#98ff98',
117
+ 200: '#76ff76',
118
+ 300: '#63eb63',
119
+ 400: '#41ca41',
120
+ 500: '#199d19',
121
+ 600: '#168116',
122
+ 700: '#106710',
123
+ 800: '#0d5a0d',
124
+ 900: '#0a500a',
125
125
  },
126
126
  orange: {
127
- base: '#EDB95E',
128
- 100: '#FFF7E6',
129
- 200: '#FFEDCC',
130
- 300: '#FFE4B2',
131
- 400: '#FFDA99',
132
- 500: '#EDB95E',
133
- 600: '#DAA54D',
134
- 700: '#C7913D',
135
- 800: '#B47D2D',
136
- 900: '#A1691D',
127
+ base: '#da9534',
128
+ 100: '#ffd599',
129
+ 200: '#ffc676',
130
+ 300: '#f7b75b',
131
+ 400: '#f1ab48',
132
+ 500: '#da9534',
133
+ 600: '#c7892f',
134
+ 700: '#a87428',
135
+ 800: '#825b22',
136
+ 900: '#68481a',
137
137
  },
138
138
  red: {
139
- base: '#E23636',
140
- 100: '#FDECEC',
141
- 200: '#FBD1D1',
142
- 300: '#F9B6B6',
143
- 400: '#F79B9B',
144
- 500: '#E23636',
145
- 600: '#C72F2F',
146
- 700: '#AC2828',
147
- 800: '#912121',
148
- 900: '#761A1A',
139
+ base: '#f44d4f',
140
+ 100: '#ffa9aa',
141
+ 200: '#ff8a8b',
142
+ 300: '#ff7577',
143
+ 400: '#ff6466',
144
+ 500: '#f44d4f',
145
+ 600: '#cf4244',
146
+ 700: '#b4393a',
147
+ 800: '#9a3132',
148
+ 900: '#752324',
149
149
  },
150
150
  } as Record<string, any>;
151
151
  export const shades = 9;
@@ -1,48 +0,0 @@
1
- import React from 'react';
2
- import { PermafrostComponent } from '@/types';
3
- export type CancelText = {
4
- confirmText: string;
5
- message?: string;
6
- rejectText: string;
7
- title: string;
8
- };
9
- type Props = PermafrostComponent & {
10
- children: React.ReactNode;
11
- /**
12
- * text for the cancel confirmation modal
13
- */
14
- confirmCancel: CancelText;
15
- disableNextStep?: boolean;
16
- disablePrevStep?: boolean;
17
- disableSubmit?: boolean;
18
- isLastStep?: boolean;
19
- /**
20
- * for testing/mocking purposes
21
- */
22
- startingStep?: string;
23
- steps: string[];
24
- /**
25
- * the text to appear on the submit button
26
- */
27
- submitButtonLabel: string;
28
- /**
29
- * Puts button in "busy" mode, and replaces button label with this text
30
- */
31
- submitProcessing?: string;
32
- wizardTitle: string;
33
- onCancel?(): void;
34
- onNextPress?(): boolean;
35
- /**
36
- * returns the current step name to the parent component
37
- */
38
- onStepChange(stepName: string): void;
39
- onSubmit(): void;
40
- /**
41
- * Allows for any custom attribute to be added directly to "next button" in wizard
42
- */
43
- nextButtonProps?: {
44
- 'data-cy': string;
45
- };
46
- };
47
- export declare function Wizard(props: Props): import("react/jsx-runtime").JSX.Element;
48
- export {};
@@ -1,29 +0,0 @@
1
- import type { StoryObj } from '@storybook/react';
2
- import { Wizard } from './Wizard';
3
- declare const meta: {
4
- component: typeof Wizard;
5
- title: string;
6
- args: {
7
- steps: string[];
8
- onCancel: () => void;
9
- onSubmit: () => void;
10
- wizardTitle: string;
11
- confirmCancel: {
12
- title: string;
13
- message: string;
14
- confirmText: string;
15
- rejectText: string;
16
- };
17
- submitButtonLabel: string;
18
- onNextPress: () => true;
19
- };
20
- };
21
- export default meta;
22
- type Story = StoryObj<typeof Wizard>;
23
- export declare const Normal: Story;
24
- export declare const FirstStep: Story;
25
- export declare const LastStep: Story;
26
- export declare const DisabledNextStep: Story;
27
- export declare const DisabledPreviousStep: Story;
28
- export declare const SubmitProcessing: Story;
29
- export declare const LastStepOverride: Story;
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const StyledWizard: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
3
- export declare const WizardCard: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
4
- export declare const WizardSection: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
@@ -1,2 +0,0 @@
1
- export { Wizard } from './Wizard';
2
- export { WizardCard, WizardSection, StyledWizard } from './Wizard.styles';