@kaizen/components 2.4.0 → 3.0.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 (216) hide show
  1. package/dist/cjs/src/Button/Button.cjs +2 -4
  2. package/dist/cjs/src/GuidanceBlock/GuidanceBlock.cjs +16 -82
  3. package/dist/cjs/src/GuidanceBlock/GuidanceBlock.module.css.cjs +0 -1
  4. package/dist/cjs/src/Heading/Heading.cjs +1 -1
  5. package/dist/cjs/src/Heading/Heading.module.css.cjs +22 -0
  6. package/dist/cjs/src/Label/Label.cjs +1 -1
  7. package/dist/cjs/src/Label/Label.module.css.cjs +16 -0
  8. package/dist/cjs/src/LabelledMessage/LabelledMessage.cjs +1 -1
  9. package/dist/cjs/src/LabelledMessage/LabelledMessage.module.css.cjs +7 -0
  10. package/dist/cjs/src/LinkButton/LinkButton.cjs +2 -4
  11. package/dist/cjs/src/Modal/ConfirmationModal/ConfirmationModal.cjs +3 -2
  12. package/dist/cjs/src/Modal/ContextModal/ContextModal.cjs +0 -1
  13. package/dist/cjs/src/Modal/GenericModal/GenericModal.cjs +2 -2
  14. package/dist/cjs/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.cjs +3 -6
  15. package/dist/cjs/src/Notification/InlineNotification/InlineNotification.cjs +1 -1
  16. package/dist/cjs/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.cjs +1 -1
  17. package/dist/cjs/src/Notification/ToastNotification/ToastNotificationsList/{ToastNotificationsList.module.scss.cjs → ToastNotificationsList.module.css.cjs} +1 -1
  18. package/dist/cjs/src/Notification/subcomponents/CancelButton/CancelButton.cjs +1 -1
  19. package/dist/cjs/src/Notification/subcomponents/GenericNotification/GenericNotification.cjs +1 -1
  20. package/dist/cjs/src/Notification/subcomponents/GenericNotification/GenericNotification.module.css.cjs +29 -0
  21. package/dist/cjs/src/Notification/subcomponents/NotificationHeading/NotificationHeading.cjs +1 -1
  22. package/dist/cjs/src/Select/Select.cjs +23 -22
  23. package/dist/cjs/src/Select/Select.module.scss.cjs +0 -1
  24. package/dist/cjs/src/SingleSelect/SingleSelect.cjs +12 -19
  25. package/dist/cjs/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.cjs +3 -5
  26. package/dist/cjs/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.module.scss.cjs +0 -1
  27. package/dist/cjs/src/Text/Text.cjs +1 -1
  28. package/dist/cjs/src/Text/Text.module.css.cjs +16 -0
  29. package/dist/cjs/src/TimeField/TimeField.cjs +2 -3
  30. package/dist/cjs/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.cjs +1 -1
  31. package/dist/cjs/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.css.cjs +13 -0
  32. package/dist/cjs/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.cjs +1 -1
  33. package/dist/cjs/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.css.cjs +9 -0
  34. package/dist/cjs/src/Tooltip/OverlayArrow.cjs +1 -1
  35. package/dist/cjs/src/Tooltip/OverlayArrow.module.css.cjs +7 -0
  36. package/dist/cjs/src/Tooltip/Tooltip.cjs +1 -1
  37. package/dist/cjs/src/Tooltip/Tooltip.module.css.cjs +7 -0
  38. package/dist/esm/src/Button/Button.mjs +2 -4
  39. package/dist/esm/src/GuidanceBlock/GuidanceBlock.mjs +18 -84
  40. package/dist/esm/src/GuidanceBlock/GuidanceBlock.module.css.mjs +0 -1
  41. package/dist/esm/src/Heading/Heading.mjs +1 -1
  42. package/dist/esm/src/Heading/Heading.module.css.mjs +20 -0
  43. package/dist/esm/src/Label/Label.mjs +1 -1
  44. package/dist/esm/src/Label/Label.module.css.mjs +14 -0
  45. package/dist/esm/src/LabelledMessage/LabelledMessage.mjs +1 -1
  46. package/dist/esm/src/LabelledMessage/LabelledMessage.module.css.mjs +5 -0
  47. package/dist/esm/src/LinkButton/LinkButton.mjs +2 -4
  48. package/dist/esm/src/Modal/ConfirmationModal/ConfirmationModal.mjs +3 -2
  49. package/dist/esm/src/Modal/ContextModal/ContextModal.mjs +0 -1
  50. package/dist/esm/src/Modal/GenericModal/GenericModal.mjs +2 -2
  51. package/dist/esm/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.mjs +3 -6
  52. package/dist/esm/src/Notification/InlineNotification/InlineNotification.mjs +1 -1
  53. package/dist/esm/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.mjs +1 -1
  54. package/dist/esm/src/Notification/ToastNotification/ToastNotificationsList/{ToastNotificationsList.module.scss.mjs → ToastNotificationsList.module.css.mjs} +1 -1
  55. package/dist/esm/src/Notification/subcomponents/CancelButton/CancelButton.mjs +1 -1
  56. package/dist/esm/src/Notification/subcomponents/GenericNotification/GenericNotification.mjs +1 -1
  57. package/dist/esm/src/Notification/subcomponents/GenericNotification/GenericNotification.module.css.mjs +27 -0
  58. package/dist/esm/src/Notification/subcomponents/NotificationHeading/NotificationHeading.mjs +1 -1
  59. package/dist/esm/src/Select/Select.mjs +23 -22
  60. package/dist/esm/src/Select/Select.module.scss.mjs +0 -1
  61. package/dist/esm/src/SingleSelect/SingleSelect.mjs +12 -19
  62. package/dist/esm/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.mjs +3 -5
  63. package/dist/esm/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.module.scss.mjs +0 -1
  64. package/dist/esm/src/Text/Text.mjs +1 -1
  65. package/dist/esm/src/Text/Text.module.css.mjs +14 -0
  66. package/dist/esm/src/TimeField/TimeField.mjs +2 -3
  67. package/dist/esm/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.mjs +1 -1
  68. package/dist/esm/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.css.mjs +11 -0
  69. package/dist/esm/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.mjs +1 -1
  70. package/dist/esm/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.css.mjs +7 -0
  71. package/dist/esm/src/Tooltip/OverlayArrow.mjs +1 -1
  72. package/dist/esm/src/Tooltip/OverlayArrow.module.css.mjs +5 -0
  73. package/dist/esm/src/Tooltip/Tooltip.mjs +1 -1
  74. package/dist/esm/src/Tooltip/Tooltip.module.css.mjs +5 -0
  75. package/dist/styles.css +725 -613
  76. package/dist/types/Button/Button.d.ts +0 -5
  77. package/dist/types/Calendar/CalendarRange/CalendarRange.d.ts +2 -1
  78. package/dist/types/Calendar/CalendarSingle/CalendarSingle.d.ts +2 -1
  79. package/dist/types/Calendar/types.d.ts +1 -0
  80. package/dist/types/GuidanceBlock/GuidanceBlock.d.ts +1 -26
  81. package/dist/types/Input/Input/Input.d.ts +1 -6
  82. package/dist/types/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.d.ts +1 -5
  83. package/dist/types/Select/Select.d.ts +3 -13
  84. package/dist/types/SingleSelect/SingleSelect.d.ts +2 -24
  85. package/dist/types/SingleSelect/subcomponents/SelectToggle/SelectToggle.d.ts +2 -12
  86. package/dist/types/TextArea/TextArea.d.ts +1 -6
  87. package/dist/types/TimeField/TimeField.d.ts +1 -1
  88. package/locales/ar.json +4 -0
  89. package/locales/bg.json +4 -0
  90. package/locales/cs.json +4 -0
  91. package/locales/cy.json +4 -0
  92. package/locales/da.json +4 -0
  93. package/locales/de.json +4 -0
  94. package/locales/el.json +4 -0
  95. package/locales/en-GB.json +4 -0
  96. package/locales/en.json +4 -0
  97. package/locales/es-419.json +4 -0
  98. package/locales/es.json +4 -0
  99. package/locales/et.json +4 -0
  100. package/locales/fi.json +4 -0
  101. package/locales/fr-CA.json +4 -0
  102. package/locales/fr.json +4 -0
  103. package/locales/he.json +4 -0
  104. package/locales/hi.json +4 -0
  105. package/locales/ht.json +4 -0
  106. package/locales/hu.json +4 -0
  107. package/locales/id.json +4 -0
  108. package/locales/it.json +4 -0
  109. package/locales/ja.json +4 -0
  110. package/locales/km-KH.json +4 -0
  111. package/locales/ko.json +4 -0
  112. package/locales/lt.json +4 -0
  113. package/locales/lv.json +4 -0
  114. package/locales/mi.json +4 -0
  115. package/locales/ms.json +4 -0
  116. package/locales/nb.json +4 -0
  117. package/locales/nl.json +4 -0
  118. package/locales/pl.json +4 -0
  119. package/locales/pt-BR.json +4 -0
  120. package/locales/pt.json +4 -0
  121. package/locales/ro.json +4 -0
  122. package/locales/ru.json +4 -0
  123. package/locales/si-LK.json +4 -0
  124. package/locales/sk.json +4 -0
  125. package/locales/sr.json +4 -0
  126. package/locales/sv.json +4 -0
  127. package/locales/th.json +4 -0
  128. package/locales/tl.json +4 -0
  129. package/locales/tr.json +4 -0
  130. package/locales/uk.json +4 -0
  131. package/locales/vi.json +4 -0
  132. package/locales/zh-TW.json +4 -0
  133. package/locales/zh.json +4 -0
  134. package/package.json +1 -2
  135. package/src/Button/Button.tsx +1 -8
  136. package/src/Button/_docs/Button--api-specification.mdx +0 -1
  137. package/src/Calendar/CalendarRange/CalendarRange.tsx +4 -1
  138. package/src/Calendar/CalendarSingle/CalendarSingle.tsx +4 -1
  139. package/src/Calendar/types.ts +18 -0
  140. package/src/GuidanceBlock/GuidanceBlock.module.css +0 -8
  141. package/src/GuidanceBlock/GuidanceBlock.spec.tsx +1 -26
  142. package/src/GuidanceBlock/GuidanceBlock.tsx +2 -112
  143. package/src/GuidanceBlock/_docs/GuidanceBlock.stories.tsx +0 -90
  144. package/src/Heading/Heading.module.css +111 -0
  145. package/src/Heading/Heading.tsx +1 -1
  146. package/src/Input/Input/Input.module.scss +0 -31
  147. package/src/Input/Input/Input.tsx +1 -6
  148. package/src/Label/Label.module.css +97 -0
  149. package/src/Label/Label.tsx +1 -1
  150. package/src/Label/_docs/Label.stickersheet.stories.tsx +9 -4
  151. package/src/LabelledMessage/{LabelledMessage.module.scss → LabelledMessage.module.css} +1 -3
  152. package/src/LabelledMessage/LabelledMessage.tsx +1 -1
  153. package/src/LinkButton/LinkButton.tsx +1 -3
  154. package/src/LinkButton/_docs/LinkButton--api-specification.mdx +0 -1
  155. package/src/Modal/ConfirmationModal/ConfirmationModal.tsx +7 -6
  156. package/src/Modal/ContextModal/ContextModal.tsx +0 -1
  157. package/src/Modal/GenericModal/GenericModal.tsx +3 -4
  158. package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.tsx +2 -8
  159. package/src/Notification/InlineNotification/InlineNotification.tsx +1 -1
  160. package/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx +1 -1
  161. package/src/Notification/ToastNotification/ToastNotificationsList/{ToastNotificationsList.module.scss → ToastNotificationsList.module.css} +6 -8
  162. package/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx +1 -1
  163. package/src/Notification/subcomponents/CancelButton/CancelButton.tsx +1 -1
  164. package/src/Notification/subcomponents/GenericNotification/GenericNotification.module.css +392 -0
  165. package/src/Notification/subcomponents/GenericNotification/GenericNotification.tsx +1 -1
  166. package/src/Notification/subcomponents/NotificationHeading/NotificationHeading.tsx +1 -1
  167. package/src/Select/Select.module.scss +0 -16
  168. package/src/Select/Select.tsx +24 -25
  169. package/src/SingleSelect/SingleSelect.tsx +1 -14
  170. package/src/SingleSelect/_docs/SingleSelect.stories.tsx +5 -2
  171. package/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.module.scss +0 -8
  172. package/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.tsx +2 -9
  173. package/src/Text/Text.module.css +71 -0
  174. package/src/Text/Text.tsx +1 -1
  175. package/src/TextArea/TextArea.tsx +1 -6
  176. package/src/TimeField/TimeField.tsx +2 -9
  177. package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.css +141 -0
  178. package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx +1 -1
  179. package/src/ToggleSwitch/ToggleSwitchField/{ToggleSwitchField.module.scss → ToggleSwitchField.module.css} +1 -3
  180. package/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.tsx +1 -1
  181. package/src/Tooltip/OverlayArrow.module.css +45 -0
  182. package/src/Tooltip/OverlayArrow.tsx +1 -1
  183. package/src/Tooltip/Tooltip.module.css +62 -0
  184. package/src/Tooltip/Tooltip.tsx +1 -1
  185. package/dist/cjs/src/Heading/Heading.module.scss.cjs +0 -22
  186. package/dist/cjs/src/Label/Label.module.scss.cjs +0 -15
  187. package/dist/cjs/src/LabelledMessage/LabelledMessage.module.scss.cjs +0 -7
  188. package/dist/cjs/src/Modal/util/console.cjs +0 -16
  189. package/dist/cjs/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss.cjs +0 -29
  190. package/dist/cjs/src/Text/Text.module.scss.cjs +0 -16
  191. package/dist/cjs/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss.cjs +0 -13
  192. package/dist/cjs/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.scss.cjs +0 -9
  193. package/dist/cjs/src/Tooltip/OverlayArrow.module.scss.cjs +0 -7
  194. package/dist/cjs/src/Tooltip/Tooltip.module.scss.cjs +0 -7
  195. package/dist/esm/src/Heading/Heading.module.scss.mjs +0 -20
  196. package/dist/esm/src/Label/Label.module.scss.mjs +0 -13
  197. package/dist/esm/src/LabelledMessage/LabelledMessage.module.scss.mjs +0 -5
  198. package/dist/esm/src/Modal/util/console.mjs +0 -13
  199. package/dist/esm/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss.mjs +0 -27
  200. package/dist/esm/src/Text/Text.module.scss.mjs +0 -14
  201. package/dist/esm/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss.mjs +0 -11
  202. package/dist/esm/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.scss.mjs +0 -7
  203. package/dist/esm/src/Tooltip/OverlayArrow.module.scss.mjs +0 -5
  204. package/dist/esm/src/Tooltip/Tooltip.module.scss.mjs +0 -5
  205. package/dist/types/Modal/util/console.d.ts +0 -5
  206. package/dist/types/utils/useResizeObserver.d.ts +0 -22
  207. package/src/Heading/Heading.module.scss +0 -115
  208. package/src/Label/Label.module.scss +0 -105
  209. package/src/Modal/util/console.ts +0 -13
  210. package/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss +0 -138
  211. package/src/Notification/subcomponents/GenericNotification/_mixins.scss +0 -366
  212. package/src/Text/Text.module.scss +0 -74
  213. package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss +0 -139
  214. package/src/Tooltip/OverlayArrow.module.scss +0 -45
  215. package/src/Tooltip/Tooltip.module.scss +0 -68
  216. package/src/utils/useResizeObserver.ts +0 -73
@@ -13,17 +13,12 @@ export type SelectToggleProps = {
13
13
  /** Props for the element representing the selected value. */
14
14
  valueProps: DOMAttributes<FocusableElement>
15
15
  isOpen?: boolean
16
- /**
17
- * @deprecated Use of placeholder text goes against our a11y standards.
18
- * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
19
- */
20
- placeholder?: string
21
16
  /** Updates the styling of the validation. */
22
17
  status?: 'error' | 'caution'
23
18
  isDisabled?: boolean
24
19
  /** Use the `reversed` styles. */
25
20
  isReversed?: boolean
26
- } & OverrideClassName<HTMLAttributes<HTMLButtonElement>>
21
+ } & OverrideClassName<Omit<HTMLAttributes<HTMLButtonElement>, 'placeholder'>>
27
22
 
28
23
  export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProps>(
29
24
  (
@@ -33,7 +28,6 @@ export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProp
33
28
  value,
34
29
  valueProps,
35
30
  isOpen,
36
- placeholder = 'Select',
37
31
  status,
38
32
  isDisabled,
39
33
  isReversed,
@@ -55,7 +49,6 @@ export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProp
55
49
  ref={ref}
56
50
  className={classnames(
57
51
  styles.selectToggle,
58
- (value === null || value === undefined) && styles.placeholder,
59
52
  status === 'error' && styles.error,
60
53
  status === 'caution' && styles.caution,
61
54
  isDisabled && styles.disabled,
@@ -64,7 +57,7 @@ export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProp
64
57
  )}
65
58
  >
66
59
  <span {...valueProps} className={styles.value}>
67
- {value ?? placeholder}
60
+ {value}
68
61
  </span>
69
62
  <Icon
70
63
  name={isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
@@ -0,0 +1,71 @@
1
+ @layer kz-components {
2
+ .text {
3
+ --icon-vertical-align: text-bottom;
4
+
5
+ margin: 0;
6
+
7
+ strong {
8
+ font-weight: var(--typography-paragraph-bold-font-weight);
9
+ }
10
+ }
11
+
12
+ .intro-lede {
13
+ font-family: var(--typography-paragraph-intro-lede-font-family);
14
+ font-weight: var(--typography-paragraph-intro-lede-font-weight);
15
+ font-size: var(--typography-paragraph-intro-lede-font-size);
16
+ line-height: var(--typography-paragraph-intro-lede-line-height);
17
+ letter-spacing: var(--typography-paragraph-intro-lede-letter-spacing);
18
+ }
19
+
20
+ .body {
21
+ font-family: var(--typography-paragraph-body-font-family);
22
+ font-weight: var(--typography-paragraph-body-font-weight);
23
+ font-size: var(--typography-paragraph-body-font-size);
24
+ line-height: var(--typography-paragraph-body-line-height);
25
+ letter-spacing: var(--typography-paragraph-body-letter-spacing);
26
+ }
27
+
28
+ .small {
29
+ font-family: var(--typography-paragraph-small-font-family);
30
+ font-weight: var(--typography-paragraph-small-font-weight);
31
+ font-size: var(--typography-paragraph-small-font-size);
32
+ line-height: var(--typography-paragraph-small-line-height);
33
+ letter-spacing: var(--typography-paragraph-small-letter-spacing);
34
+ }
35
+
36
+ .extra-small {
37
+ font-family: var(--typography-paragraph-extra-small-font-family);
38
+ font-weight: var(--typography-paragraph-extra-small-font-weight);
39
+ font-size: var(--typography-paragraph-extra-small-font-size);
40
+ line-height: var(--typography-paragraph-extra-small-line-height);
41
+ letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
42
+ }
43
+
44
+ .dark {
45
+ color: var(--color-purple-800);
46
+ opacity: 1;
47
+ }
48
+
49
+ .dark-reduced-opacity {
50
+ color: var(--color-purple-800);
51
+ opacity: 0.7;
52
+ }
53
+
54
+ .white {
55
+ color: var(--color-white);
56
+ opacity: 1;
57
+ }
58
+
59
+ .white-reduced-opacity {
60
+ color: var(--color-white);
61
+ opacity: 0.8;
62
+ }
63
+
64
+ .positive {
65
+ color: var(--color-green-600);
66
+ }
67
+
68
+ .negative {
69
+ color: var(--color-red-600);
70
+ }
71
+ }
package/src/Text/Text.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { createElement, type HTMLAttributes } from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { type OverrideClassName } from '~components/types/OverrideClassName'
4
- import styles from './Text.module.scss'
4
+ import styles from './Text.module.css'
5
5
 
6
6
  export type TextVariants = 'intro-lede' | 'body' | 'small' | 'extra-small'
7
7
 
@@ -12,12 +12,7 @@ export type TextAreaProps = {
12
12
  */
13
13
  autogrow?: boolean
14
14
  reversed?: boolean
15
- /**
16
- * @deprecated Use of placeholder text goes against our a11y standards.
17
- * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
18
- */
19
- placeholder?: string
20
- } & OverrideClassName<TextareaHTMLAttributes<HTMLTextAreaElement>>
15
+ } & OverrideClassName<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder'>>
21
16
 
22
17
  export const TextArea = ({
23
18
  textAreaRef: propsTextAreaRef,
@@ -11,13 +11,7 @@ import { TimeSegment } from './subcomponents/TimeSegment'
11
11
  import { type StatusType, type TimeValue, type ValueType } from './types'
12
12
  import styles from './TimeField.module.scss'
13
13
 
14
- type OmittedTimeFieldProps =
15
- | 'errorMessage'
16
- | 'validationState'
17
- | 'value'
18
- | 'onChange'
19
- | 'label'
20
- | 'hideTimeZone'
14
+ type OmittedTimeFieldProps = 'errorMessage' | 'value' | 'onChange' | 'label' | 'hideTimeZone'
21
15
 
22
16
  export type TimeFieldProps = {
23
17
  id?: string
@@ -80,7 +74,6 @@ const TimeFieldComponent = ({
80
74
  isDisabled,
81
75
  hideTimeZone: true,
82
76
  locale,
83
- validationState: status === 'default' ? 'valid' : 'invalid',
84
77
  })
85
78
 
86
79
  const hasError = !!validationMessage && status === 'error'
@@ -111,7 +104,7 @@ const TimeFieldComponent = ({
111
104
  className={classnames(
112
105
  styles.input,
113
106
  state.isDisabled && styles.isDisabled,
114
- state.validationState === 'invalid' && styles.error,
107
+ status === 'error' && styles.error,
115
108
  )}
116
109
  >
117
110
  {state.segments.map((segment, i) => {
@@ -0,0 +1,141 @@
1
+ @layer kz-components {
2
+ :root {
3
+ --animation-timing: var(--animation-duration-immediate) var(--animation-easing-function-linear);
4
+ --focus-ring-offset: 1px;
5
+ }
6
+
7
+ .checkbox {
8
+ /* Reset checkbox */
9
+ opacity: 0;
10
+ position: absolute;
11
+
12
+ :global(.ideal-sans) & {
13
+ /* This is to override bootstrap styles. Remove when appropriate */
14
+ position: absolute;
15
+ }
16
+ }
17
+
18
+ .track {
19
+ position: relative;
20
+ background-color: var(--color-gray-500);
21
+ border: var(--border-borderless-border-width) var(--border-borderless-border-style)
22
+ var(--border-borderless-border-color);
23
+ border-radius: var(--spacing-md);
24
+ box-sizing: content-box;
25
+ width: calc((var(--spacing-md) * 1.05) * 2);
26
+ height: calc(var(--spacing-md) * 1.25);
27
+ padding: 0 calc(var(--spacing-md) * 0.15);
28
+ display: flex;
29
+ align-items: center;
30
+ transition: background-color var(--animation-timing);
31
+
32
+ /* TODO: Fix */
33
+ /* stylelint-disable no-descending-specificity */
34
+ .checkbox:not(.disabled):focus + &,
35
+ .checkbox:not(.disabled):hover:focus + & {
36
+ border-color: transparent;
37
+ outline: 2px solid var(--color-blue-500);
38
+ outline-offset: var(--focus-ring-offset);
39
+ background-color: var(--color-gray-600);
40
+ }
41
+
42
+ .checkbox:not(.disabled) + &:hover,
43
+ label:hover .checkbox:not(.disabled) + & {
44
+ background-color: var(--color-gray-600);
45
+ }
46
+
47
+ /* stylelint-enable no-descending-specificity */
48
+ }
49
+
50
+ .thumb {
51
+ display: flex;
52
+ align-items: center;
53
+ justify-content: center;
54
+ background-color: var(--color-white);
55
+ border: var(--border-borderless-border-width) var(--border-borderless-border-style)
56
+ var(--border-borderless-border-color);
57
+ border-radius: var(--spacing-md);
58
+ transition:
59
+ left var(--animation-timing),
60
+ right var(--animation-timing);
61
+ cursor: default;
62
+ }
63
+
64
+ .checkIcon {
65
+ color: var(--color-green-500);
66
+ opacity: 0;
67
+ transition-duration: var(--animation-duration-rapid);
68
+ }
69
+
70
+ /* stylelint-disable no-descending-specificity */
71
+ .on {
72
+ .checkbox + .track {
73
+ border-color: var(--border-borderless-border-color);
74
+ background-color: var(--color-green-500);
75
+ }
76
+
77
+ .checkbox:focus + .track {
78
+ border-color: transparent;
79
+ background-color: var(--color-green-600);
80
+ }
81
+
82
+ .thumb {
83
+ position: relative;
84
+ right: auto;
85
+ inset-inline-start: calc(var(--spacing-md) * 1.1);
86
+ }
87
+
88
+ .checkIcon {
89
+ opacity: 1;
90
+ transition-delay: var(--animation-duration-immediate);
91
+ transition-duration: var(--animation-duration-fast);
92
+ }
93
+
94
+ .checkbox:not(.disabled) + .track:hover,
95
+ label:hover & .checkbox:not(.disabled) + .track {
96
+ background-color: var(--color-green-600);
97
+ }
98
+ }
99
+
100
+ .off {
101
+ .thumb {
102
+ position: relative;
103
+ right: auto;
104
+ inset-inline-start: calc(var(--spacing-md) * -0.05);
105
+ }
106
+ }
107
+
108
+ .reversed {
109
+ .checkbox:focus + .track,
110
+ .checkbox:hover:focus + .track {
111
+ outline-color: var(--color-blue-300);
112
+ }
113
+
114
+ &.off {
115
+ .track {
116
+ background-color: rgb(var(--color-white-rgb), 0.2);
117
+ }
118
+
119
+ .checkbox:focus + .track,
120
+ .checkbox:hover:focus + .track {
121
+ background-color: rgb(var(--color-white-rgb), 0.65);
122
+ }
123
+
124
+ .checkbox:not(.disabled) + .track:hover,
125
+ label:hover & .checkbox:not(.disabled) + .track {
126
+ background-color: rgb(var(--color-white-rgb), 0.65);
127
+ }
128
+ }
129
+ }
130
+
131
+ /* When the ToggleSwitch is used as part of the ToggleSwitchField, the disabled state opacity is set on the Label component */
132
+ label .disabled.track {
133
+ opacity: 1;
134
+ }
135
+
136
+ .disabled.track {
137
+ opacity: 0.3;
138
+ }
139
+
140
+ /* stylelint-enable no-descending-specificity */
141
+ }
@@ -2,7 +2,7 @@ import React, { type InputHTMLAttributes } from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { Icon } from '~components/Icon'
4
4
  import { type OverrideClassName } from '~components/types/OverrideClassName'
5
- import styles from './ToggleSwitch.module.scss'
5
+ import styles from './ToggleSwitch.module.css'
6
6
 
7
7
  export type ToggledStatus = 'on' | 'off'
8
8
 
@@ -1,5 +1,3 @@
1
- @import '~@kaizen/design-tokens/sass/typography';
2
-
3
1
  @layer kz-components {
4
2
  .container {
5
3
  display: flex;
@@ -12,6 +10,6 @@
12
10
  }
13
11
 
14
12
  .on label {
15
- font-weight: $typography-paragraph-bold-font-weight;
13
+ font-weight: var(--typography-paragraph-bold-font-weight);
16
14
  }
17
15
  }
@@ -7,7 +7,7 @@ import {
7
7
  type ToggleSwitchProps,
8
8
  type ToggledStatus,
9
9
  } from '../ToggleSwitch/ToggleSwitch'
10
- import styles from './ToggleSwitchField.module.scss'
10
+ import styles from './ToggleSwitchField.module.css'
11
11
 
12
12
  export type ToggleSwitchFieldProps = {
13
13
  labelText: React.ReactNode
@@ -0,0 +1,45 @@
1
+ @layer kz-components {
2
+ .overlayArrow {
3
+ display: flex;
4
+
5
+ /*
6
+ for correct arrow positioning with rounded corners we need to do bit trickery here
7
+ the positioning is done in js in RAC and works by first getting size of arrow without data-placement, and isn't recomputed after update
8
+ so we first set padding on arrow from all sides (that'll be used for start position computation)
9
+ and then we remove it from the oposite axis
10
+ */
11
+
12
+ padding: 8px;
13
+
14
+ &[data-placement='top'],
15
+ &[data-placement='bottom'] {
16
+ padding: 0 8px;
17
+ }
18
+
19
+ &[data-placement='left'],
20
+ &[data-placement='right'] {
21
+ padding: 8px 0;
22
+ }
23
+
24
+ path {
25
+ fill: var(--color-purple-800);
26
+ box-shadow: var(--shadow-small-box-shadow);
27
+ }
28
+
29
+ &[data-placement='right'] svg {
30
+ transform: rotate(90deg);
31
+ }
32
+
33
+ &[data-placement='bottom'] svg {
34
+ transform: rotate(180deg);
35
+ }
36
+
37
+ &[data-placement='left'] svg {
38
+ transform: rotate(270deg);
39
+ }
40
+
41
+ &.reversed path {
42
+ fill: var(--color-white);
43
+ }
44
+ }
45
+ }
@@ -3,7 +3,7 @@ import { OverlayArrow as RACOverlayArrow, type OverlayArrowProps } from 'react-a
3
3
  import { useReversedColors } from '~components/utils'
4
4
  import { mergeClassNames } from '~components/utils/mergeClassNames'
5
5
 
6
- import styles from './OverlayArrow.module.scss'
6
+ import styles from './OverlayArrow.module.css'
7
7
 
8
8
  export { type OverlayArrowProps }
9
9
 
@@ -0,0 +1,62 @@
1
+ @layer kz-components {
2
+ .tooltip {
3
+ max-width: 200px;
4
+ padding: var(--spacing-8) var(--spacing-12);
5
+ color: var(--color-white);
6
+ text-align: center;
7
+ font-family: var(--typography-paragraph-extra-small-font-family);
8
+ font-size: var(--typography-paragraph-extra-small-font-size);
9
+ font-weight: var(--typography-paragraph-extra-small-font-weight);
10
+ letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
11
+ line-height: var(--typography-paragraph-extra-small-line-height);
12
+ border-radius: var(--border-solid-border-radius);
13
+ box-shadow: var(--shadow-small-box-shadow);
14
+ background-color: var(--color-purple-800);
15
+ text-wrap: pretty;
16
+
17
+ /* fixes FF gap */
18
+ transform: translate3d(0, 0, 0);
19
+
20
+ &.reversed {
21
+ background-color: var(--color-white);
22
+ color: var(--color-purple-800);
23
+ }
24
+
25
+ &[data-placement='top'] {
26
+ --origin: translateY(4px);
27
+ }
28
+
29
+ &[data-placement='bottom'] {
30
+ --origin: translateY(-4px);
31
+ }
32
+
33
+ &[data-placement='right'] {
34
+ --origin: translateX(-4px);
35
+ }
36
+
37
+ &[data-placement='left'] {
38
+ --origin: translateX(4px);
39
+ }
40
+
41
+ &[data-entering] {
42
+ animation: slide var(--animation-duration-fast);
43
+ }
44
+
45
+ &[data-exiting] {
46
+ animation: slide var(--animation-duration-fast) reverse
47
+ var(--animation-easing-function-ease-in);
48
+ }
49
+ }
50
+ }
51
+
52
+ @keyframes slide {
53
+ from {
54
+ transform: var(--origin);
55
+ opacity: 0;
56
+ }
57
+
58
+ to {
59
+ transform: translateY(0);
60
+ opacity: 1;
61
+ }
62
+ }
@@ -10,7 +10,7 @@ import { VisuallyHidden } from '~components/VisuallyHidden'
10
10
  import { useReversedColors } from '~components/utils'
11
11
  import { mergeClassNames } from '~components/utils/mergeClassNames'
12
12
  import { OverlayArrow } from './OverlayArrow'
13
- import styles from './Tooltip.module.scss'
13
+ import styles from './Tooltip.module.css'
14
14
 
15
15
  export { TooltipContext }
16
16
 
@@ -1,22 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "heading": "Heading-module_heading__Gq6I8",
5
- "display-0": "Heading-module_display-0__yZ7rx",
6
- "composable-header-title": "Heading-module_composable-header-title__mqQVh",
7
- "heading-1": "Heading-module_heading-1__PbAcw",
8
- "heading-2": "Heading-module_heading-2__Ovpfe",
9
- "heading-3": "Heading-module_heading-3__S4Pb1",
10
- "heading-4": "Heading-module_heading-4__IIiwi",
11
- "heading-5": "Heading-module_heading-5__QFtpN",
12
- "heading-6": "Heading-module_heading-6__kts--",
13
- "dark": "Heading-module_dark__IqcnT",
14
- "dark-reduced-opacity": "Heading-module_dark-reduced-opacity__i-JqI",
15
- "white": "Heading-module_white__mUqRT",
16
- "white-reduced-opacity": "Heading-module_white-reduced-opacity__y1wq8",
17
- "positive": "Heading-module_positive__mBS79",
18
- "small": "Heading-module_small__qupiD",
19
- "large": "Heading-module_large__cB-V3",
20
- "negative": "Heading-module_negative__Q4byH"
21
- };
22
- module.exports = styles;
@@ -1,15 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "label": "Label-module_label__Dmp7q",
5
- "reversed": "Label-module_reversed__n6Q4r",
6
- "disabled": "Label-module_disabled__qOB4e",
7
- "text": "Label-module_text__LUnIh",
8
- "radio": "Label-module_radio__-Iu-D",
9
- "checkbox": "Label-module_checkbox__Fhjww",
10
- "toggle": "Label-module_toggle__4tyKF",
11
- "prependedLabel": "Label-module_prependedLabel__pdsEt",
12
- "appendedLabel": "Label-module_appendedLabel__-OHis",
13
- "prominent": "Label-module_prominent__SPdrr"
14
- };
15
- module.exports = styles;
@@ -1,7 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "labelledMessage": "LabelledMessage-module_labelledMessage__8hqzY",
5
- "labelSeparator": "LabelledMessage-module_labelSeparator__f3zFN"
6
- };
7
- module.exports = styles;
@@ -1,16 +0,0 @@
1
- 'use strict';
2
-
3
- var yellow = '\u001b[33m ';
4
- var reset = '\u001b[0m ';
5
- /**
6
- * @deprecated Do not use ever again
7
- */
8
- var warn = function (message) {
9
- // eslint-disable-next-line no-console
10
- console.warn("".concat(yellow, "\nCULTUREAMP UI WARNING:\n").concat(singleLine(message)).concat(reset, "\n"));
11
- };
12
- var singleLine = function (message) {
13
- return message.replace(/^ +/gm, ' ').replace(/\n|\r/gm, '').trim();
14
- };
15
- exports.singleLine = singleLine;
16
- exports.warn = warn;
@@ -1,29 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "notification": "GenericNotification-module_notification__-JP1M",
5
- "inline": "GenericNotification-module_inline__OciO5",
6
- "toast": "GenericNotification-module_toast__GOVfC",
7
- "global": "GenericNotification-module_global__Weka-",
8
- "security": "GenericNotification-module_security__QTALa",
9
- "hidden": "GenericNotification-module_hidden__WJjct",
10
- "noBottomMargin": "GenericNotification-module_noBottomMargin__28nF8",
11
- "persistent": "GenericNotification-module_persistent__O7bgI",
12
- "subtle": "GenericNotification-module_subtle__kPns9",
13
- "icon": "GenericNotification-module_icon__SDb8v",
14
- "textContainer": "GenericNotification-module_textContainer__Avpbk",
15
- "forceMultiline": "GenericNotification-module_forceMultiline__JcVA4",
16
- "title": "GenericNotification-module_title__dvQOr",
17
- "text": "GenericNotification-module_text__X-5ld",
18
- "cancel": "GenericNotification-module_cancel__c6wky",
19
- "disabled": "GenericNotification-module_disabled__WGBhD",
20
- "hover": "GenericNotification-module_hover__hUURd",
21
- "active": "GenericNotification-module_active__-6ahb",
22
- "cancelLabel": "GenericNotification-module_cancelLabel__HJzsk",
23
- "notificationTitle": "GenericNotification-module_notificationTitle__Oaqb8",
24
- "success": "GenericNotification-module_success__oLGIP",
25
- "informative": "GenericNotification-module_informative__WLimi",
26
- "cautionary": "GenericNotification-module_cautionary__lneFu",
27
- "warning": "GenericNotification-module_warning__7275P"
28
- };
29
- module.exports = styles;
@@ -1,16 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "text": "Text-module_text__Byo7R",
5
- "intro-lede": "Text-module_intro-lede__ENE72",
6
- "body": "Text-module_body__cO-XH",
7
- "small": "Text-module_small__uZNGn",
8
- "extra-small": "Text-module_extra-small__3g9eN",
9
- "dark": "Text-module_dark__-jDSk",
10
- "dark-reduced-opacity": "Text-module_dark-reduced-opacity__18nLo",
11
- "white": "Text-module_white__-yVD0",
12
- "white-reduced-opacity": "Text-module_white-reduced-opacity__i0veZ",
13
- "positive": "Text-module_positive__e-IKh",
14
- "negative": "Text-module_negative__agbge"
15
- };
16
- module.exports = styles;
@@ -1,13 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "checkbox": "ToggleSwitch-module_checkbox__ezWz3",
5
- "track": "ToggleSwitch-module_track__fcDMP",
6
- "disabled": "ToggleSwitch-module_disabled__3H-9R",
7
- "thumb": "ToggleSwitch-module_thumb__8PULV",
8
- "checkIcon": "ToggleSwitch-module_checkIcon__8iitB",
9
- "on": "ToggleSwitch-module_on__CQpkh",
10
- "off": "ToggleSwitch-module_off__OhSEP",
11
- "reversed": "ToggleSwitch-module_reversed__Q3-iM"
12
- };
13
- module.exports = styles;
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "container": "ToggleSwitchField-module_container__e7TXD",
5
- "fullWidth": "ToggleSwitchField-module_fullWidth__ybDf-",
6
- "inner": "ToggleSwitchField-module_inner__9-O0m",
7
- "on": "ToggleSwitchField-module_on__HQOkN"
8
- };
9
- module.exports = styles;
@@ -1,7 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "overlayArrow": "OverlayArrow-module_overlayArrow__UoDjH",
5
- "reversed": "OverlayArrow-module_reversed__N3t-k"
6
- };
7
- module.exports = styles;
@@ -1,7 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "tooltip": "Tooltip-module_tooltip__NMZ65",
5
- "reversed": "Tooltip-module_reversed__aTr5h"
6
- };
7
- module.exports = styles;
@@ -1,20 +0,0 @@
1
- var styles = {
2
- "heading": "Heading-module_heading__Gq6I8",
3
- "display-0": "Heading-module_display-0__yZ7rx",
4
- "composable-header-title": "Heading-module_composable-header-title__mqQVh",
5
- "heading-1": "Heading-module_heading-1__PbAcw",
6
- "heading-2": "Heading-module_heading-2__Ovpfe",
7
- "heading-3": "Heading-module_heading-3__S4Pb1",
8
- "heading-4": "Heading-module_heading-4__IIiwi",
9
- "heading-5": "Heading-module_heading-5__QFtpN",
10
- "heading-6": "Heading-module_heading-6__kts--",
11
- "dark": "Heading-module_dark__IqcnT",
12
- "dark-reduced-opacity": "Heading-module_dark-reduced-opacity__i-JqI",
13
- "white": "Heading-module_white__mUqRT",
14
- "white-reduced-opacity": "Heading-module_white-reduced-opacity__y1wq8",
15
- "positive": "Heading-module_positive__mBS79",
16
- "small": "Heading-module_small__qupiD",
17
- "large": "Heading-module_large__cB-V3",
18
- "negative": "Heading-module_negative__Q4byH"
19
- };
20
- export { styles as default };
@@ -1,13 +0,0 @@
1
- var styles = {
2
- "label": "Label-module_label__Dmp7q",
3
- "reversed": "Label-module_reversed__n6Q4r",
4
- "disabled": "Label-module_disabled__qOB4e",
5
- "text": "Label-module_text__LUnIh",
6
- "radio": "Label-module_radio__-Iu-D",
7
- "checkbox": "Label-module_checkbox__Fhjww",
8
- "toggle": "Label-module_toggle__4tyKF",
9
- "prependedLabel": "Label-module_prependedLabel__pdsEt",
10
- "appendedLabel": "Label-module_appendedLabel__-OHis",
11
- "prominent": "Label-module_prominent__SPdrr"
12
- };
13
- export { styles as default };