@indico-data/design-system 2.9.0 → 2.10.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 (27) hide show
  1. package/lib/index.css +112 -0
  2. package/lib/index.d.ts +41 -2
  3. package/lib/index.esm.css +112 -0
  4. package/lib/index.esm.js +19 -3
  5. package/lib/index.esm.js.map +1 -1
  6. package/lib/index.js +20 -2
  7. package/lib/index.js.map +1 -1
  8. package/lib/src/components/forms/input/Input.d.ts +2 -1
  9. package/lib/src/components/forms/passwordInput/PasswordInput.d.ts +16 -0
  10. package/lib/src/components/forms/passwordInput/PasswordInput.stories.d.ts +11 -0
  11. package/lib/src/components/forms/passwordInput/__tests__/PasswordInput.test.d.ts +1 -0
  12. package/lib/src/components/forms/passwordInput/index.d.ts +1 -0
  13. package/lib/src/components/index.d.ts +2 -0
  14. package/lib/src/index.d.ts +2 -0
  15. package/package.json +1 -1
  16. package/src/components/forms/input/Input.stories.tsx +0 -5
  17. package/src/components/forms/input/Input.tsx +3 -1
  18. package/src/components/forms/input/styles/Input.scss +1 -0
  19. package/src/components/forms/passwordInput/PasswordInput.mdx +28 -0
  20. package/src/components/forms/passwordInput/PasswordInput.stories.tsx +269 -0
  21. package/src/components/forms/passwordInput/PasswordInput.tsx +82 -0
  22. package/src/components/forms/passwordInput/__tests__/PasswordInput.test.tsx +129 -0
  23. package/src/components/forms/passwordInput/index.ts +1 -0
  24. package/src/components/forms/passwordInput/styles/PasswordInput.scss +120 -0
  25. package/src/components/index.ts +2 -0
  26. package/src/index.ts +2 -0
  27. package/src/styles/index.scss +1 -0
package/src/components/forms/passwordInput/styles/PasswordInput.scss ADDED
@@ -0,0 +1,120 @@
1
+ // Common Variables
2
+ :root,
3
+ :root [data-theme='light'],
4
+ :root [data-theme='dark'] {
5
+ // Typography
6
+ --pf-password-input-background-color: var(--pf-white-color);
7
+ --pf-password-input-border-color: var(--pf-gray-color);
8
+ --pf-password-input-text-color: var(--pf-gray-color);
9
+ --pf-password-input-placeholder-text-color: var(--pf-gray-color-300);
10
+ --pf-password-input-help-text-color: var(--pf-gray-color-400);
11
+ --pf-password-input-disabled-background-color: var(--pf-gray-color-100);
12
+ --pf-password-input-border-color: var(--pf-gray-color);
13
+ --pf-password-input-disabled-color: var(--pf-gray-color-400);
14
+ --pf-password-input-border-color: var(--pf-gray-color);
15
+
16
+ // input Radius
17
+ --pf-password-input-rounded: var(--pf-rounded);
18
+ }
19
+
20
+ // Dark Theme Specific Variables
21
+ :root [data-theme='dark'] {
22
+ --pf-password-input-background-color: var(--pf-primary-color);
23
+ --pf-password-input-border-color: var(--pf-gray-color-100);
24
+ --pf-password-input-text-color: var(--pf-gray-color-100);
25
+ --pf-password-input-placeholder-text-color: var(--pf-gray-color);
26
+ --pf-password-input-help-text-color: var(--pf-gray-color-200);
27
+ --pf-password-input-disabled-background-color: var(--pf-primary-color-200);
28
+ --pf-password-input-disabled-border-color: var(--pf-gray-color-300);
29
+ --pf-password-input-disabled-color: var(--pf-gray-color-400);
30
+ }
31
+
32
+ .password-input {
33
+ background-color: var(--pf-password-input-background-color);
34
+ border: 1px solid var(--pf-password-input-border-color);
35
+ border-radius: var(--pf-password-input-rounded);
36
+ color: var(--pf-password-input-text-color);
37
+ padding: 10px;
38
+ width: 100%;
39
+ box-sizing: border-box;
40
+ height: 36px;
41
+ &::placeholder {
42
+ color: var(--pf-password-input-placeholder-text-color);
43
+ }
44
+
45
+ &:focus {
46
+ border-color: var(--pf-primary-color);
47
+ }
48
+
49
+ &.error {
50
+ border-color: var(--pf-error-color);
51
+ }
52
+
53
+ &.success {
54
+ border-color: var(--pf-success-color);
55
+ }
56
+
57
+ &.warning {
58
+ border-color: var(--pf-warning-color);
59
+ }
60
+
61
+ &.info {
62
+ border-color: var(--pf-info-color);
63
+ }
64
+
65
+ &:disabled {
66
+ background-color: var(--pf-password-input-disabled-background-color);
67
+ border-color: var(--pf-password-input-disabled-border-color);
68
+ color: var(--pf-password-input-disabled-color);
69
+ }
70
+ &--has-icon {
71
+ padding-left: var(--pf-padding-7);
72
+ }
73
+ }
74
+
75
+ .form-control {
76
+ .error-list {
77
+ list-style: none;
78
+ padding: 0;
79
+ margin: 0;
80
+ margin-top: var(--pf-margin-2);
81
+ margin-bottom: var(--pf-margin-2);
82
+ color: var(--pf-error-color);
83
+ }
84
+ .help-text {
85
+ margin-top: var(--pf-margin-2);
86
+ margin-bottom: var(--pf-margin-2);
87
+ color: var(--pf-password-input-help-text-color);
88
+ font-size: var(--pf-font-size-subtitle2);
89
+ }
90
+ .password-input-wrapper {
91
+ position: relative;
92
+ .embedded-icon {
93
+ position: absolute;
94
+ top: 10px;
95
+ left: var(--pf-margin-2);
96
+ color: var(--pf-password-input-text-color);
97
+ }
98
+ .toggle-show-password-icon {
99
+ position: absolute;
100
+ top: var(--pf-margin-3);
101
+ right: var(--pf-margin-2);
102
+ color: var(--pf-password-input-text-color);
103
+ cursor: pointer;
104
+ }
105
+ }
106
+ .is-visually-hidden {
107
+ position: absolute;
108
+ width: 1px;
109
+ height: 1px;
110
+ padding: 0;
111
+ margin: -1px;
112
+ overflow: hidden;
113
+ clip: rect(0, 0, 0, 0);
114
+ white-space: nowrap;
115
+ border: 0;
116
+ }
117
+ .form-label {
118
+ margin-bottom: var(--pf-margin-2);
119
+ }
120
+ }
package/src/components/index.ts CHANGED
@@ -6,3 +6,5 @@ export { Input } from './forms/input';
6
6
  export { Radio } from './forms/radio';
7
7
  export { Checkbox } from './forms/checkbox';
8
8
  export { Toggle } from './forms/toggle';
9
+ export { Textarea } from './forms/textarea';
10
+ export { PasswordInput } from './forms/passwordInput';
package/src/index.ts CHANGED
@@ -65,3 +65,5 @@ export { Input } from './components/forms/input';
65
65
  export { Radio as RadioInput } from './components/forms/radio';
66
66
  export { Checkbox } from './components/forms/checkbox';
67
67
  export { Toggle as ToggleInput } from './components/forms/toggle';
68
+ export { Textarea } from './components/forms/textarea';
69
+ export { PasswordInput } from './components/forms/passwordInput';
package/src/styles/index.scss CHANGED
@@ -10,6 +10,7 @@
10
10
  @import '../components/forms/radio/styles/Radio.scss';
11
11
  @import '../components/forms/checkbox/styles/Checkbox.scss';
12
12
  @import '../components/forms/textarea/styles/Textarea.scss';
13
+ @import '../components/forms/passwordInput/styles/PasswordInput.scss';
13
14
 
14
15
  @import '../components/forms/toggle/styles/Toggle.scss';
15
16
  @import 'typography';