@indico-data/design-system 3.0.6 → 3.0.8

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 (21) hide show
  1. package/lib/components/forms/date/inputDatePicker/SingleInputDatePicker.d.ts +1 -0
  2. package/lib/components/forms/date/inputDateRangePicker/InputDateRangePicker.d.ts +1 -0
  3. package/lib/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.d.ts +1 -0
  4. package/lib/index.css +22 -22
  5. package/lib/index.d.ts +28 -1
  6. package/lib/index.esm.css +22 -22
  7. package/lib/index.esm.js +56 -12
  8. package/lib/index.esm.js.map +1 -1
  9. package/lib/index.js +56 -11
  10. package/lib/index.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.stories.tsx +7 -0
  13. package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.tsx +3 -0
  14. package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.stories.tsx +21 -0
  15. package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx +4 -0
  16. package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.stories.tsx +8 -0
  17. package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.tsx +3 -1
  18. package/src/components/pill/styles/Pill.scss +16 -16
  19. package/src/index.ts +1 -0
  20. package/src/styles/variables/themes/dark.scss +3 -3
  21. package/src/styles/variables/themes/light.scss +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "3.0.6",
3
+ "version": "3.0.8",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.stories.tsx CHANGED
@@ -13,6 +13,13 @@ const meta: Meta<typeof SingleInputDatePicker> = {
13
13
  ),
14
14
  ],
15
15
  argTypes: {
16
+ hasHiddenLabel: {
17
+ control: 'boolean',
18
+ description: 'Whether the label is hidden.',
19
+ table: {
20
+ category: 'Props',
21
+ },
22
+ },
16
23
  ariaLabel: {
17
24
  control: 'text',
18
25
  description: 'A label for assistive technologies.',
package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.tsx CHANGED
@@ -24,6 +24,7 @@ export interface SingleInputDatePickerProps {
24
24
  isClearable?: boolean;
25
25
  inputPlaceholder?: string;
26
26
  errorMessage?: string | undefined;
27
+ hasHiddenLabel?: boolean;
27
28
  'data-testid'?: string;
28
29
  }
29
30
 
@@ -46,6 +47,7 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
46
47
  isClearable,
47
48
  errorMessage,
48
49
  onSelect,
50
+ hasHiddenLabel,
49
51
  ...rest
50
52
  } = props;
51
53
 
@@ -97,6 +99,7 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
97
99
  value={localTextValue}
98
100
  placeholder={inputPlaceholder}
99
101
  isDisabled={isDisabled}
102
+ hasHiddenLabel={hasHiddenLabel}
100
103
  iconName={inputIconName}
101
104
  isClearable={isClearable}
102
105
  onChange={handleInputChange}
package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.stories.tsx CHANGED
@@ -15,6 +15,27 @@ const meta: Meta<typeof InputDateRangePicker> = {
15
15
  ),
16
16
  ],
17
17
  argTypes: {
18
+ hasHiddenLabel: {
19
+ control: 'boolean',
20
+ description: 'Whether the label is hidden.',
21
+ table: {
22
+ category: 'Props',
23
+ },
24
+ },
25
+ gutterWidth: {
26
+ control: 'number',
27
+ description: 'The gutter width for the date picker.',
28
+ table: {
29
+ category: 'Props',
30
+ },
31
+ },
32
+ setIsOpen: {
33
+ control: 'boolean',
34
+ description: 'Whether the date picker is open.',
35
+ table: {
36
+ category: 'Props',
37
+ },
38
+ },
18
39
  ariaLabel: {
19
40
  control: 'text',
20
41
  description: 'A label for assistive technologies.',
package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx CHANGED
@@ -32,6 +32,7 @@ interface InputDateRangePickerProps {
32
32
  toLabel?: string;
33
33
  closeOnSelect?: boolean;
34
34
  clearOnClose?: boolean;
35
+ hasHiddenLabel?: boolean;
35
36
  }
36
37
 
37
38
  export function InputDateRangePicker(props: InputDateRangePickerProps) {
@@ -57,6 +58,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
57
58
  toLabel,
58
59
  closeOnSelect,
59
60
  clearOnClose,
61
+ hasHiddenLabel,
60
62
  ...rest
61
63
  } = props;
62
64
 
@@ -151,6 +153,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
151
153
  label={fromLabel}
152
154
  name={'From Date'}
153
155
  data-testid="date-picker-from"
156
+ hasHiddenLabel={hasHiddenLabel}
154
157
  />
155
158
  </Col>
156
159
  <Col>
@@ -165,6 +168,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
165
168
  label={toLabel}
166
169
  name={'To Date'}
167
170
  data-testid="date-picker-to"
171
+ hasHiddenLabel={hasHiddenLabel}
168
172
  />
169
173
  </Col>
170
174
  </Row>
package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.stories.tsx CHANGED
@@ -20,6 +20,14 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
20
20
  ),
21
21
  ],
22
22
  argTypes: {
23
+ hasHiddenLabel: {
24
+ control: 'boolean',
25
+ description: 'Whether the label is hidden.',
26
+ table: {
27
+ category: 'Props',
28
+ },
29
+ },
30
+
23
31
  timeValue: {
24
32
  control: 'text',
25
33
  description: 'The time value to display.',
package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.tsx CHANGED
@@ -27,6 +27,7 @@ export interface SingleInputDateTimePickerProps {
27
27
  inputPlaceholder?: string;
28
28
  errorMessage?: string | undefined;
29
29
  'data-testid'?: string;
30
+ hasHiddenLabel?: boolean;
30
31
  timeValue?: string;
31
32
  onTimeChange?: (time: string) => void;
32
33
  }
@@ -52,6 +53,7 @@ export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps)
52
53
  onSelect,
53
54
  timeValue,
54
55
  onTimeChange,
56
+ hasHiddenLabel,
55
57
  ...rest
56
58
  } = props;
57
59
 
@@ -113,7 +115,7 @@ export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps)
113
115
  isClearable={isClearable}
114
116
  onChange={handleInputChange}
115
117
  errorMessage={errorMessage}
116
- hasHiddenLabel
118
+ hasHiddenLabel={hasHiddenLabel}
117
119
  label={'Single Date Picker'}
118
120
  name={`${id}-date-picker`}
119
121
  />
package/src/components/pill/styles/Pill.scss CHANGED
@@ -1,15 +1,15 @@
1
1
  // Light Theme Specific Variables
2
2
  :root [data-theme='light'] {
3
3
  --pf-pill-info-background-color: var(--pf-info-color-dark);
4
- --pf-pill-info-font-color: var(--pf-secondary-color-50);
4
+ --pf-pill-info-font-color: var(--pf-gray-color-50);
5
5
  --pf-pill-info-border-color: var(--pf-info-color-dark);
6
6
 
7
7
  --pf-pill-error-background-color: var(--pf-error-color-dark);
8
- --pf-pill-error-font-color: var(--pf-red-color-50);
8
+ --pf-pill-error-font-color: var(--pf-gray-color-50);
9
9
  --pf-pill-error-border-color: var(--pf-error-color-dark);
10
10
 
11
11
  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
12
- --pf-pill-warning-font-color: var(--pf-yellow-color-50);
12
+ --pf-pill-warning-font-color: var(--pf-gray-color-50);
13
13
  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
14
14
 
15
15
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
@@ -17,23 +17,23 @@
17
17
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
18
18
 
19
19
  --pf-pill-success-background-color: var(--pf-success-color-dark);
20
- --pf-pill-success-font-color: var(--pf-green-color-50);
20
+ --pf-pill-success-font-color: var(--pf-gray-color-50);
21
21
  --pf-pill-success-border-color: var(--pf-success-color-dark);
22
22
 
23
23
  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
24
- --pf-pill-purple-font-color: var(--pf-purple-color-50);
24
+ --pf-pill-purple-font-color: var(--pf-gray-color-50);
25
25
  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
26
26
 
27
27
  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
28
- --pf-pill-pending-font-color: var(--pf-pink-color-50);
28
+ --pf-pill-pending-font-color: var(--pf-gray-color-50);
29
29
  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
30
30
 
31
31
  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
32
- --pf-pill-orange-font-color: var(--pf-orange-color-50);
32
+ --pf-pill-orange-font-color: var(--pf-gray-color-50);
33
33
  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
34
34
 
35
35
  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
36
- --pf-pill-teal-font-color: var(--pf-teal-color-50);
36
+ --pf-pill-teal-font-color: var(--pf-gray-color-50);
37
37
  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
38
38
  }
39
39
 
@@ -41,15 +41,15 @@
41
41
  :root [data-theme='dark'],
42
42
  :root {
43
43
  --pf-pill-info-background-color: var(--pf-info-color-dark);
44
- --pf-pill-info-font-color: var(--pf-secondary-color-50);
44
+ --pf-pill-info-font-color: var(--pf-gray-color-50);
45
45
  --pf-pill-info-border-color: var(--pf-info-color-dark);
46
46
 
47
47
  --pf-pill-error-background-color: var(--pf-error-color-dark);
48
- --pf-pill-error-font-color: var(--pf-red-color-50);
48
+ --pf-pill-error-font-color: var(--pf-gray-color-50);
49
49
  --pf-pill-error-border-color: var(--pf-error-color-dark);
50
50
 
51
51
  --pf-pill-warning-background-color: var(--pf-warning-color-dark);
52
- --pf-pill-warning-font-color: var(--pf-yellow-color-50);
52
+ --pf-pill-warning-font-color: var(--pf-gray-color-50);
53
53
  --pf-pill-warning-border-color: var(--pf-warning-color-dark);
54
54
 
55
55
  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
@@ -57,23 +57,23 @@
57
57
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
58
58
 
59
59
  --pf-pill-success-background-color: var(--pf-success-color-dark);
60
- --pf-pill-success-font-color: var(--pf-green-color-50);
60
+ --pf-pill-success-font-color: var(--pf-gray-color-50);
61
61
  --pf-pill-success-border-color: var(--pf-success-color-dark);
62
62
 
63
63
  --pf-pill-purple-background-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
64
- --pf-pill-purple-font-color: var(--pf-purple-color-50);
64
+ --pf-pill-purple-font-color: var(--pf-gray-color-50);
65
65
  --pf-pill-purple-border-color: color-mix(in srgb, var(--pf-purple-color-450) 75%, black);
66
66
 
67
67
  --pf-pill-pending-background-color: var(--pf-pending-color-dark);
68
- --pf-pill-pending-font-color: var(--pf-pink-color-50);
68
+ --pf-pill-pending-font-color: var(--pf-gray-color-50);
69
69
  --pf-pill-pending-border-color: var(--pf-pending-color-dark);
70
70
 
71
71
  --pf-pill-orange-background-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
72
- --pf-pill-orange-font-color: var(--pf-orange-color-50);
72
+ --pf-pill-orange-font-color: var(--pf-gray-color-50);
73
73
  --pf-pill-orange-border-color: color-mix(in srgb, var(--pf-orange-color-500) 75%, black);
74
74
 
75
75
  --pf-pill-teal-background-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
76
- --pf-pill-teal-font-color: var(--pf-teal-color-50);
76
+ --pf-pill-teal-font-color: var(--pf-gray-color-50);
77
77
  --pf-pill-teal-border-color: color-mix(in srgb, var(--pf-teal-color-600) 75%, black);
78
78
  }
79
79
 
package/src/index.ts CHANGED
@@ -20,6 +20,7 @@ export { TimePicker } from './components/forms/timePicker';
20
20
  export { IconTriggerDatePicker } from './components/forms/date/iconTriggerDatePicker';
21
21
  export { SingleInputDatePicker } from './components/forms/date/inputDatePicker';
22
22
  export { InputDateRangePicker } from './components/forms/date/inputDateRangePicker';
23
+ export { SingleInputDateTimePicker } from './components/forms/date/inputDateTimePicker';
23
24
  export { Form } from './components/forms/form';
24
25
  export { Skeleton } from './components/skeleton';
25
26
  export { Card } from './components/card';
package/src/styles/variables/themes/dark.scss CHANGED
@@ -261,7 +261,7 @@
261
261
  --pf-brand-color: var(--pf-brand-color-450);
262
262
  --pf-brand-color-dark: var(--pf-brand-color-550);
263
263
  --pf-brand-color-light: var(--pf-brand-color-300);
264
- --pf-pending-color: var(--pf-pink-color-450);
265
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
266
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
264
+ --pf-pending-color: var(--pf-pink-color-500);
265
+ --pf-pending-color-dark: var(--pf-pink-color-600);
266
+ --pf-pending-color-light: var(--pf-pink-color-300);
267
267
  }
package/src/styles/variables/themes/light.scss CHANGED
@@ -260,7 +260,7 @@
260
260
  --pf-brand-color: var(--pf-brand-color-450);
261
261
  --pf-brand-color-dark: var(--pf-brand-color-550);
262
262
  --pf-brand-color-light: var(--pf-brand-color-300);
263
- --pf-pending-color: var(--pf-pink-color-450);
264
- --pf-pending-color-dark: color-mix(in srgb, var(--pf-pink-color-450) 75%, black);
265
- --pf-pending-color-light: color-mix(in srgb, var(--pf-pink-color-450) 60%, white);
263
+ --pf-pending-color: var(--pf-pink-color-500);
264
+ --pf-pending-color-dark: var(--pf-pink-color-600);
265
+ --pf-pending-color-light: var(--pf-pink-color-300);
266
266
  }