@kaizen/components 1.68.2 → 1.68.3

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 (105) hide show
  1. package/dist/cjs/Tile/subcomponents/GenericTile/GenericTile.cjs +16 -3
  2. package/dist/esm/Tile/subcomponents/GenericTile/GenericTile.mjs +16 -3
  3. package/dist/styles.css +112 -112
  4. package/dist/types/Tile/subcomponents/GenericTile/GenericTile.d.ts +3 -1
  5. package/locales/en.json +8 -0
  6. package/package.json +1 -1
  7. package/src/Avatar/_docs/Avatar.stickersheet.stories.tsx +30 -32
  8. package/src/AvatarGroup/_docs/AvatarGroup.stickersheet.stories.tsx +14 -16
  9. package/src/Badge/_docs/Badge.stickersheet.stories.tsx +22 -22
  10. package/src/Brand/_docs/Brand.stickersheet.stories.tsx +24 -26
  11. package/src/BrandMoment/_docs/BrandMoment.stickersheet.stories.tsx +35 -39
  12. package/src/ButtonGroup/_docs/ButtonGroup.stickersheet.stories.tsx +117 -122
  13. package/src/Calendar/CalendarPopover/_docs/CalendarPopover.stickersheet.stories.tsx +4 -4
  14. package/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx +22 -30
  15. package/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx +58 -58
  16. package/src/Card/_docs/Card.stickersheet.stories.tsx +12 -16
  17. package/src/Checkbox/Checkbox/_docs/Checkbox.stickersheet.stories.tsx +24 -27
  18. package/src/Checkbox/CheckboxField/_docs/CheckboxField.stickersheet.stories.tsx +31 -34
  19. package/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.stickersheet.stories.tsx +25 -29
  20. package/src/ClearButton/_docs/ClearButton.stickersheet.stories.tsx +9 -9
  21. package/src/Collapsible/Collapsible/_docs/Collapsible.stickersheet.stories.tsx +56 -62
  22. package/src/Collapsible/CollapsibleGroup/_docs/CollapsibleGroup.stickersheet.stories.tsx +19 -21
  23. package/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.stickersheets.stories.tsx +6 -8
  24. package/src/DatePicker/_docs/DatePicker.stickersheet.stories.tsx +129 -144
  25. package/src/DatePicker/_docs/getLocale.stickersheet.stories.tsx +9 -11
  26. package/src/DateRangePicker/_docs/DateRangePicker.stickersheet.stories.tsx +26 -28
  27. package/src/Divider/_docs/Divider.stickersheet.stories.tsx +13 -10
  28. package/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx +7 -2
  29. package/src/ErrorPage/_docs/ErrorPage.stickersheet.stories.tsx +16 -20
  30. package/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx +5 -8
  31. package/src/FieldMessage/_docs/FieldMessage.stickersheet.stories.tsx +10 -20
  32. package/src/Filter/Filter/_docs/Filter.stickersheet.stories.tsx +13 -15
  33. package/src/Filter/FilterBar/_docs/FilterBar.stickersheet.stories.tsx +33 -47
  34. package/src/Filter/FilterButton/_docs/filter-buttons.stickersheet.stories.tsx +45 -51
  35. package/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx +74 -93
  36. package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx +110 -128
  37. package/src/Filter/FilterSelect/_docs/FilterSelect.stickersheet.stories.tsx +239 -249
  38. package/src/GuidanceBlock/_docs/GuidanceBlock.stickersheet.stories.tsx +38 -40
  39. package/src/Heading/_docs/Heading.stickersheet.stories.tsx +101 -111
  40. package/src/Icon/_docs/Icon.stickersheet.stories.tsx +13 -19
  41. package/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stickersheet.stories.tsx +8 -8
  42. package/src/Illustration/Scene/_docs/Scene.stickersheet.stories.tsx +139 -185
  43. package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.stickersheet.stories.tsx +39 -41
  44. package/src/Input/Input/_docs/Input.stickersheet.stories.tsx +30 -33
  45. package/src/Input/InputRange/_docs/InputRange.stickersheet.stories.tsx +21 -20
  46. package/src/Input/InputSearch/_docs/InputSearch.stickersheet.stories.tsx +137 -144
  47. package/src/Label/_docs/Label.stickersheet.stories.tsx +78 -85
  48. package/src/LabelledMessage/_docs/LabelledMessage.stickersheet.stories.tsx +3 -5
  49. package/src/LikertScaleLegacy/_docs/LikertScaleLegacy.stickersheet.stories.tsx +82 -82
  50. package/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stickersheet.stories.tsx +18 -20
  51. package/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx +46 -52
  52. package/src/Loading/LoadingHeading/_docs/LoadingHeading.stickersheet.stories.tsx +14 -18
  53. package/src/Loading/LoadingHeading/_docs/LoadingHeading.stories.tsx +7 -13
  54. package/src/Loading/LoadingParagraph/_docs/LoadingParagraph.stickersheet.stories.tsx +14 -16
  55. package/src/Loading/LoadingSpinner/_docs/LoadingSpinner.stickersheet.stories.tsx +13 -15
  56. package/src/MultiSelect/_docs/MultiSelect.stickersheet.stories.tsx +69 -74
  57. package/src/MultiSelect/subcomponents/Checkbox/_docs/Checkbox.stickersheet.stories.tsx +22 -28
  58. package/src/MultiSelect/subcomponents/MultiSelectOptionField/_docs/MultiSelectOptionField.stickersheet.stories.tsx +62 -67
  59. package/src/MultiSelect/subcomponents/MultiSelectOptions/_docs/MultiSelectOptions.stickersheet.stories.tsx +21 -28
  60. package/src/MultiSelect/subcomponents/MultiSelectToggle/_docs/MultiSelectToggle.stickersheet.stories.tsx +69 -93
  61. package/src/Notification/GlobalNotification/_docs/GlobalNotification.stickersheet.stories.tsx +13 -16
  62. package/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx +13 -16
  63. package/src/Pagination/_docs/Pagination.stickersheet.stories.tsx +60 -74
  64. package/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx +21 -23
  65. package/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx +24 -28
  66. package/src/Popover/_docs/Popover.stickersheet.stories.tsx +33 -45
  67. package/src/ProgressBar/_docs/ProgressBar.stickersheet.stories.tsx +15 -26
  68. package/src/Radio/Radio/_docs/Radio.stickersheet.stories.tsx +46 -54
  69. package/src/Radio/RadioField/_docs/RadioField.stickersheet.stories.tsx +51 -54
  70. package/src/Radio/RadioGroup/_docs/RadioGroup.stickersheet.stories.tsx +80 -86
  71. package/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.stickersheet.stories.tsx +42 -58
  72. package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx +34 -57
  73. package/src/SearchField/_docs/SearchField.stickersheet.stories.tsx +32 -31
  74. package/src/Select/_docs/Select.stickersheet.stories.tsx +128 -127
  75. package/src/Slider/_docs/Slider.stickersheet.stories.tsx +85 -96
  76. package/src/SplitButton/_docs/SplitButton.stickersheet.stories.tsx +62 -68
  77. package/src/Tag/_docs/Tag.stickersheet.stories.tsx +49 -57
  78. package/src/Text/_docs/Text.stickersheet.stories.tsx +43 -47
  79. package/src/TextArea/_docs/TextArea.stickersheet.stories.tsx +28 -31
  80. package/src/TextAreaField/_docs/TextAreaField.stickersheet.stories.tsx +71 -89
  81. package/src/TextField/_docs/TextField.stickersheet.stories.tsx +47 -50
  82. package/src/Tile/InformationTile/_docs/InformationTile.mdx +4 -0
  83. package/src/Tile/InformationTile/_docs/InformationTile.stickersheet.stories.tsx +15 -21
  84. package/src/Tile/InformationTile/_docs/InformationTile.stories.tsx +7 -0
  85. package/src/Tile/MultiActionTile/_docs/MultiActionTile.stickersheet.stories.tsx +15 -21
  86. package/src/Tile/TileGrid/_docs/TileGrid.stickersheet.stories.tsx +91 -99
  87. package/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx +65 -5
  88. package/src/Tile/subcomponents/GenericTile/GenericTile.tsx +20 -2
  89. package/src/Tile/subcomponents/GenericTile/_docs/GenericTile.stickersheet.stories.tsx +15 -21
  90. package/src/TimeField/_docs/TimeField.stickersheet.stories.tsx +74 -83
  91. package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx +73 -75
  92. package/src/ToggleSwitch/ToggleSwitch/_docs/ToggleSwitch.stickersheet.stories.tsx +24 -27
  93. package/src/ToggleSwitch/ToggleSwitchField/_docs/ToggleSwitchField.stickersheet.stories.tsx +47 -50
  94. package/src/Well/_docs/Well.stickersheet.stories.tsx +31 -41
  95. package/src/__actions__/Button/v1/Button/_docs/Button.stickersheet.stories.tsx +107 -146
  96. package/src/__actions__/Button/v1/IconButton/_docs/IconButton.stickersheet.stories.tsx +26 -29
  97. package/src/__actions__/Button/v3/_docs/Button.stickersheet.stories.tsx +141 -159
  98. package/src/__actions__/Menu/v1/_docs/Menu.stickersheet.stories.tsx +33 -36
  99. package/src/__future__/Icon/_docs/Icon.docs.stories.tsx +17 -23
  100. package/src/__future__/Icon/_docs/Icon.stickersheet.stories.tsx +63 -72
  101. package/src/__future__/Select/_docs/Select.stickersheet.stories.tsx +287 -309
  102. package/src/__future__/Tag/RemovableTag/_docs/RemovableTag.stickersheet.stories.tsx +42 -46
  103. package/src/__future__/Tag/Tag/_docs/Tag.stickersheet.stories.tsx +14 -17
  104. package/src/__overlays__/Tooltip/v1/_docs/Tooltip.stickersheet.stories.tsx +101 -103
  105. package/src/__overlays__/Tooltip/v3/_docs/Tooltip.stickersheet.stories.tsx +3 -4
package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.stickersheet.stories.tsx CHANGED
@@ -17,47 +17,45 @@ export default {
17
17
  const StickerSheetTemplate: StickerSheetStory = {
18
18
  render: ({ isReversed }) => (
19
19
  <StickerSheet isReversed={isReversed} title="Aspect Ratio">
20
- <StickerSheet.Body>
21
- <StickerSheet.Row rowTitle="default">
22
- <div className="border border-dashed border-grey-500">
23
- <VideoPlayer
24
- autoplay={false}
25
- fallback="illustrations/heart/scene/brand-moments-positive-outro"
26
- source="illustrations/heart/scene/brand-moments-positive-outro"
27
- />
28
- </div>
29
- </StickerSheet.Row>
30
- <StickerSheet.Row rowTitle="landscape">
31
- <div className="border border-dashed border-grey-500">
32
- <VideoPlayer
33
- autoplay={false}
34
- aspectRatio="landscape"
35
- fallback="illustrations/heart/scene/brand-moments-positive-outro"
36
- source="illustrations/heart/scene/brand-moments-positive-outro"
37
- />
38
- </div>
39
- </StickerSheet.Row>
40
- <StickerSheet.Row rowTitle="portrait">
41
- <div className="border border-dashed border-grey-500">
42
- <VideoPlayer
43
- autoplay={false}
44
- aspectRatio="portrait"
45
- fallback="illustrations/heart/scene/brand-moments-positive-outro"
46
- source="illustrations/heart/scene/brand-moments-positive-outro"
47
- />
48
- </div>
49
- </StickerSheet.Row>
50
- <StickerSheet.Row rowTitle="square">
51
- <div className="border border-dashed border-grey-500">
52
- <VideoPlayer
53
- autoplay={false}
54
- aspectRatio="square"
55
- fallback="illustrations/heart/scene/brand-moments-positive-outro"
56
- source="illustrations/heart/scene/brand-moments-positive-outro"
57
- />
58
- </div>
59
- </StickerSheet.Row>
60
- </StickerSheet.Body>
20
+ <StickerSheet.Row header="default">
21
+ <div className="border border-dashed border-grey-500">
22
+ <VideoPlayer
23
+ autoplay={false}
24
+ fallback="illustrations/heart/scene/brand-moments-positive-outro"
25
+ source="illustrations/heart/scene/brand-moments-positive-outro"
26
+ />
27
+ </div>
28
+ </StickerSheet.Row>
29
+ <StickerSheet.Row header="landscape">
30
+ <div className="border border-dashed border-grey-500">
31
+ <VideoPlayer
32
+ autoplay={false}
33
+ aspectRatio="landscape"
34
+ fallback="illustrations/heart/scene/brand-moments-positive-outro"
35
+ source="illustrations/heart/scene/brand-moments-positive-outro"
36
+ />
37
+ </div>
38
+ </StickerSheet.Row>
39
+ <StickerSheet.Row header="portrait">
40
+ <div className="border border-dashed border-grey-500">
41
+ <VideoPlayer
42
+ autoplay={false}
43
+ aspectRatio="portrait"
44
+ fallback="illustrations/heart/scene/brand-moments-positive-outro"
45
+ source="illustrations/heart/scene/brand-moments-positive-outro"
46
+ />
47
+ </div>
48
+ </StickerSheet.Row>
49
+ <StickerSheet.Row header="square">
50
+ <div className="border border-dashed border-grey-500">
51
+ <VideoPlayer
52
+ autoplay={false}
53
+ aspectRatio="square"
54
+ fallback="illustrations/heart/scene/brand-moments-positive-outro"
55
+ source="illustrations/heart/scene/brand-moments-positive-outro"
56
+ />
57
+ </div>
58
+ </StickerSheet.Row>
61
59
  </StickerSheet>
62
60
  ),
63
61
  }
package/src/Input/Input/_docs/Input.stickersheet.stories.tsx CHANGED
@@ -61,39 +61,36 @@ const InputExampleGroup = (props: InputProps): JSX.Element => (
61
61
 
62
62
  const StickerSheetTemplate: StickerSheetStory = {
63
63
  render: ({ isReversed }) => (
64
- <StickerSheet isReversed={isReversed}>
65
- <StickerSheet.Header
66
- headings={["Default", "Hover", "Active", "Focus", "Disabled"]}
67
- hasVerticalHeadings
68
- />
69
- <StickerSheet.Body>
70
- {InputStatus.map(status => (
71
- <StickerSheet.Row key={status} rowTitle={status}>
72
- <InputExampleGroup reversed={isReversed} />
73
- <InputExampleGroup
74
- status={status}
75
- reversed={isReversed}
76
- data-sb-pseudo-styles="hover"
77
- />
78
- <InputExampleGroup
79
- status={status}
80
- reversed={isReversed}
81
- data-sb-pseudo-styles="active"
82
- />
83
- <InputExampleGroup
84
- status={status}
85
- reversed={isReversed}
86
- data-sb-pseudo-styles="focus"
87
- />
88
- <InputExampleGroup
89
- status={status}
90
- reversed={isReversed}
91
- disabled
92
- data-sb-a11y-color-contrast-disable
93
- />
94
- </StickerSheet.Row>
95
- ))}
96
- </StickerSheet.Body>
64
+ <StickerSheet
65
+ isReversed={isReversed}
66
+ headers={["Default", "Hover", "Active", "Focus", "Disabled"]}
67
+ >
68
+ {InputStatus.map(status => (
69
+ <StickerSheet.Row key={status} header={status}>
70
+ <InputExampleGroup reversed={isReversed} />
71
+ <InputExampleGroup
72
+ status={status}
73
+ reversed={isReversed}
74
+ data-sb-pseudo-styles="hover"
75
+ />
76
+ <InputExampleGroup
77
+ status={status}
78
+ reversed={isReversed}
79
+ data-sb-pseudo-styles="active"
80
+ />
81
+ <InputExampleGroup
82
+ status={status}
83
+ reversed={isReversed}
84
+ data-sb-pseudo-styles="focus"
85
+ />
86
+ <InputExampleGroup
87
+ status={status}
88
+ reversed={isReversed}
89
+ disabled
90
+ data-sb-a11y-color-contrast-disable
91
+ />
92
+ </StickerSheet.Row>
93
+ ))}
97
94
  </StickerSheet>
98
95
  ),
99
96
  parameters: {
package/src/Input/InputRange/_docs/InputRange.stickersheet.stories.tsx CHANGED
@@ -32,26 +32,27 @@ export default {
32
32
 
33
33
  const StickerSheetTemplate: StickerSheetStory = {
34
34
  render: () => (
35
- <StickerSheet>
36
- <StickerSheet.Header headings={["Default", "Disabled"]} />
37
- <StickerSheet.Body>
38
- <StickerSheet.Row>
39
- <InputRange
40
- id="inputRange"
41
- minLabel="Minimum"
42
- maxLabel="Maximum"
43
- value={2}
44
- />
45
- <InputRange
46
- id="inputRangeDisable"
47
- minLabel={<span data-sb-a11y-color-contrast-disable>Min</span>}
48
- maxLabel={<span data-sb-a11y-color-contrast-disable>Max</span>}
49
- value={2}
50
- disabled
51
- data-sb-a11y-color-contrast-disable
52
- />
53
- </StickerSheet.Row>
54
- </StickerSheet.Body>
35
+ <StickerSheet
36
+ title="InputRange"
37
+ headers={["Default", "Disabled"]}
38
+ layout="stretch"
39
+ >
40
+ <StickerSheet.Row>
41
+ <InputRange
42
+ id="inputRange"
43
+ minLabel="Minimum"
44
+ maxLabel="Maximum"
45
+ value={2}
46
+ />
47
+ <InputRange
48
+ id="inputRangeDisable"
49
+ minLabel={<span data-sb-a11y-color-contrast-disable>Min</span>}
50
+ maxLabel={<span data-sb-a11y-color-contrast-disable>Max</span>}
51
+ value={2}
52
+ disabled
53
+ data-sb-a11y-color-contrast-disable
54
+ />
55
+ </StickerSheet.Row>
55
56
  </StickerSheet>
56
57
  ),
57
58
  }
package/src/Input/InputSearch/_docs/InputSearch.stickersheet.stories.tsx CHANGED
@@ -27,150 +27,143 @@ export default {
27
27
 
28
28
  const StickerSheetTemplate: StickerSheetStory = {
29
29
  render: ({ isReversed }) => (
30
- <StickerSheet isReversed={isReversed}>
31
- <StickerSheet.Header
32
- headings={["Default", "Disabled", "Hover", "Focus", "Filled"]}
33
- hasVerticalHeadings
34
- />
35
- <StickerSheet.Body>
36
- <StickerSheet.Row rowTitle="Default">
37
- <InputSearch id="input-search--default" reversed={isReversed} />
38
- <InputSearch
39
- id="input-search--default"
40
- reversed={isReversed}
41
- disabled
42
- data-sb-a11y-color-contrast-disable
43
- />
44
- <InputSearch
45
- id="input-search--hover"
46
- reversed={isReversed}
47
- classNameOverride="story__input-search--hover"
48
- />
49
- <InputSearch
50
- id="input-search--focus"
51
- reversed={isReversed}
52
- data-sb-pseudo-styles="focus"
53
- classNameOverride="story__input-search--focus"
54
- />
55
- <InputSearch
56
- id="input-search--filled"
57
- reversed={isReversed}
58
- value="Search me"
59
- data-sb-pseudo-styles="filled"
60
- classNameOverride="story__input-search--filled"
61
- />
62
- </StickerSheet.Row>
63
- <StickerSheet.Row rowTitle="Loading">
64
- <InputSearch
65
- id="input-search--loading"
66
- loading
67
- reversed={isReversed}
68
- />
69
- <InputSearch
70
- id="input-search--loading"
71
- reversed={isReversed}
72
- loading
73
- disabled
74
- data-sb-a11y-color-contrast-disable
75
- />
76
- <InputSearch
77
- id="input-search--hover"
78
- reversed={isReversed}
79
- loading
80
- classNameOverride="story__input-search--hover"
81
- />
82
- <InputSearch
83
- id="input-search--focus"
84
- reversed={isReversed}
85
- loading
86
- data-sb-pseudo-styles="focus"
87
- classNameOverride="story__input-search--focus"
88
- />
89
- <InputSearch
90
- id="input-search--filled"
91
- reversed={isReversed}
92
- loading
93
- value="Search me"
94
- data-sb-pseudo-styles="filled"
95
- classNameOverride="story__input-search--filled"
96
- />
97
- </StickerSheet.Row>
98
- <StickerSheet.Row rowTitle="Secondary">
99
- <InputSearch
100
- id="input-search--secondary"
101
- secondary
102
- reversed={isReversed}
103
- />
104
- <InputSearch
105
- id="input-search--secondary"
106
- reversed={isReversed}
107
- secondary
108
- disabled
109
- data-sb-a11y-color-contrast-disable
110
- />
111
- <InputSearch
112
- id="input-search--hover"
113
- reversed={isReversed}
114
- secondary
115
- classNameOverride="story__input-search--hover"
116
- />
117
- <InputSearch
118
- id="input-search--focus"
119
- reversed={isReversed}
120
- secondary
121
- data-sb-pseudo-styles="focus"
122
- classNameOverride="story__input-search--focus"
123
- />
124
- <InputSearch
125
- id="input-search--filled"
126
- reversed={isReversed}
127
- secondary
128
- value="Search me"
129
- data-sb-pseudo-styles="filled"
130
- classNameOverride="story__input-search--filled"
131
- />
132
- </StickerSheet.Row>
133
- <StickerSheet.Row rowTitle="Secondary (Loading)">
134
- <InputSearch
135
- id="input-search--secondary-loading"
136
- secondary
137
- loading
138
- reversed={isReversed}
139
- />
140
- <InputSearch
141
- id="input-search--secondary-loading"
142
- reversed={isReversed}
143
- secondary
144
- loading
145
- disabled
146
- data-sb-a11y-color-contrast-disable
147
- />
148
- <InputSearch
149
- id="input-search--hover"
150
- reversed={isReversed}
151
- secondary
152
- loading
153
- classNameOverride="story__input-search--hover"
154
- />
155
- <InputSearch
156
- id="input-search--focus"
157
- reversed={isReversed}
158
- secondary
159
- loading
160
- data-sb-pseudo-styles="focus"
161
- classNameOverride="story__input-search--focus"
162
- />
163
- <InputSearch
164
- id="input-search--filled"
165
- reversed={isReversed}
166
- secondary
167
- loading
168
- value="Search me"
169
- data-sb-pseudo-styles="filled"
170
- classNameOverride="story__input-search--filled"
171
- />
172
- </StickerSheet.Row>
173
- </StickerSheet.Body>
30
+ <StickerSheet
31
+ isReversed={isReversed}
32
+ headers={["Default", "Disabled", "Hover", "Focus", "Filled"]}
33
+ >
34
+ <StickerSheet.Row header="Default">
35
+ <InputSearch id="input-search--default" reversed={isReversed} />
36
+ <InputSearch
37
+ id="input-search--default"
38
+ reversed={isReversed}
39
+ disabled
40
+ data-sb-a11y-color-contrast-disable
41
+ />
42
+ <InputSearch
43
+ id="input-search--hover"
44
+ reversed={isReversed}
45
+ classNameOverride="story__input-search--hover"
46
+ />
47
+ <InputSearch
48
+ id="input-search--focus"
49
+ reversed={isReversed}
50
+ data-sb-pseudo-styles="focus"
51
+ classNameOverride="story__input-search--focus"
52
+ />
53
+ <InputSearch
54
+ id="input-search--filled"
55
+ reversed={isReversed}
56
+ value="Search me"
57
+ data-sb-pseudo-styles="filled"
58
+ classNameOverride="story__input-search--filled"
59
+ />
60
+ </StickerSheet.Row>
61
+ <StickerSheet.Row header="Loading">
62
+ <InputSearch id="input-search--loading" loading reversed={isReversed} />
63
+ <InputSearch
64
+ id="input-search--loading"
65
+ reversed={isReversed}
66
+ loading
67
+ disabled
68
+ data-sb-a11y-color-contrast-disable
69
+ />
70
+ <InputSearch
71
+ id="input-search--hover"
72
+ reversed={isReversed}
73
+ loading
74
+ classNameOverride="story__input-search--hover"
75
+ />
76
+ <InputSearch
77
+ id="input-search--focus"
78
+ reversed={isReversed}
79
+ loading
80
+ data-sb-pseudo-styles="focus"
81
+ classNameOverride="story__input-search--focus"
82
+ />
83
+ <InputSearch
84
+ id="input-search--filled"
85
+ reversed={isReversed}
86
+ loading
87
+ value="Search me"
88
+ data-sb-pseudo-styles="filled"
89
+ classNameOverride="story__input-search--filled"
90
+ />
91
+ </StickerSheet.Row>
92
+ <StickerSheet.Row header="Secondary">
93
+ <InputSearch
94
+ id="input-search--secondary"
95
+ secondary
96
+ reversed={isReversed}
97
+ />
98
+ <InputSearch
99
+ id="input-search--secondary"
100
+ reversed={isReversed}
101
+ secondary
102
+ disabled
103
+ data-sb-a11y-color-contrast-disable
104
+ />
105
+ <InputSearch
106
+ id="input-search--hover"
107
+ reversed={isReversed}
108
+ secondary
109
+ classNameOverride="story__input-search--hover"
110
+ />
111
+ <InputSearch
112
+ id="input-search--focus"
113
+ reversed={isReversed}
114
+ secondary
115
+ data-sb-pseudo-styles="focus"
116
+ classNameOverride="story__input-search--focus"
117
+ />
118
+ <InputSearch
119
+ id="input-search--filled"
120
+ reversed={isReversed}
121
+ secondary
122
+ value="Search me"
123
+ data-sb-pseudo-styles="filled"
124
+ classNameOverride="story__input-search--filled"
125
+ />
126
+ </StickerSheet.Row>
127
+ <StickerSheet.Row header="Secondary (Loading)">
128
+ <InputSearch
129
+ id="input-search--secondary-loading"
130
+ secondary
131
+ loading
132
+ reversed={isReversed}
133
+ />
134
+ <InputSearch
135
+ id="input-search--secondary-loading"
136
+ reversed={isReversed}
137
+ secondary
138
+ loading
139
+ disabled
140
+ data-sb-a11y-color-contrast-disable
141
+ />
142
+ <InputSearch
143
+ id="input-search--hover"
144
+ reversed={isReversed}
145
+ secondary
146
+ loading
147
+ classNameOverride="story__input-search--hover"
148
+ />
149
+ <InputSearch
150
+ id="input-search--focus"
151
+ reversed={isReversed}
152
+ secondary
153
+ loading
154
+ data-sb-pseudo-styles="focus"
155
+ classNameOverride="story__input-search--focus"
156
+ />
157
+ <InputSearch
158
+ id="input-search--filled"
159
+ reversed={isReversed}
160
+ secondary
161
+ loading
162
+ value="Search me"
163
+ data-sb-pseudo-styles="filled"
164
+ classNameOverride="story__input-search--filled"
165
+ />
166
+ </StickerSheet.Row>
174
167
  </StickerSheet>
175
168
  ),
176
169
  parameters: {