@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/BrandMoment/_docs/BrandMoment.stickersheet.stories.tsx CHANGED
@@ -44,47 +44,43 @@ export default {
44
44
  const StickerSheetTemplate: StickerSheetStory = {
45
45
  render: ({ isReversed }) => (
46
46
  <>
47
- <StickerSheet isReversed={isReversed} heading="Variant">
48
- <StickerSheet.Body>
49
- <StickerSheet.Row rowTitle="Informative">
50
- <BrandMoment {...Informative.args} />
51
- </StickerSheet.Row>
52
- <StickerSheet.Row rowTitle="Success">
53
- <BrandMoment {...Success.args} />
54
- </StickerSheet.Row>
55
- <StickerSheet.Row rowTitle="Warning">
56
- <BrandMoment {...Warning.args} />
57
- </StickerSheet.Row>
58
- </StickerSheet.Body>
47
+ <StickerSheet isReversed={isReversed} title="Variant">
48
+ <StickerSheet.Row header="Informative">
49
+ <BrandMoment {...Informative.args} />
50
+ </StickerSheet.Row>
51
+ <StickerSheet.Row header="Success">
52
+ <BrandMoment {...Success.args} />
53
+ </StickerSheet.Row>
54
+ <StickerSheet.Row header="Warning">
55
+ <BrandMoment {...Warning.args} />
56
+ </StickerSheet.Row>
59
57
  </StickerSheet>
60
58
 
61
- <StickerSheet isReversed={isReversed} heading="Mood (deprecated)">
62
- <StickerSheet.Body>
63
- <StickerSheet.Row rowTitle="Informative">
64
- <BrandMoment
65
- {...Informative.args}
66
- illustration={<BrandMomentCaptureIntro />}
67
- variant={undefined}
68
- mood="informative"
69
- />
70
- </StickerSheet.Row>
71
- <StickerSheet.Row rowTitle="Positive">
72
- <BrandMoment
73
- {...Success.args}
74
- illustration={<BrandMomentPositiveOutro />}
75
- variant={undefined}
76
- mood="positive"
77
- />
78
- </StickerSheet.Row>
79
- <StickerSheet.Row rowTitle="Negative">
80
- <BrandMoment
81
- {...Warning.args}
82
- illustration={<BrandMomentError />}
83
- variant={undefined}
84
- mood="negative"
85
- />
86
- </StickerSheet.Row>
87
- </StickerSheet.Body>
59
+ <StickerSheet isReversed={isReversed} title="Mood (deprecated)">
60
+ <StickerSheet.Row header="Informative">
61
+ <BrandMoment
62
+ {...Informative.args}
63
+ illustration={<BrandMomentCaptureIntro />}
64
+ variant={undefined}
65
+ mood="informative"
66
+ />
67
+ </StickerSheet.Row>
68
+ <StickerSheet.Row header="Positive">
69
+ <BrandMoment
70
+ {...Success.args}
71
+ illustration={<BrandMomentPositiveOutro />}
72
+ variant={undefined}
73
+ mood="positive"
74
+ />
75
+ </StickerSheet.Row>
76
+ <StickerSheet.Row header="Negative">
77
+ <BrandMoment
78
+ {...Warning.args}
79
+ illustration={<BrandMomentError />}
80
+ variant={undefined}
81
+ mood="negative"
82
+ />
83
+ </StickerSheet.Row>
88
84
  </StickerSheet>
89
85
  </>
90
86
  ),
package/src/ButtonGroup/_docs/ButtonGroup.stickersheet.stories.tsx CHANGED
@@ -19,132 +19,127 @@ export default {
19
19
  const StickerSheetTemplate: StickerSheetStory = {
20
20
  render: () => (
21
21
  <>
22
- <StickerSheet heading="Button Group">
23
- <StickerSheet.Header
24
- headings={["Group of 2", "Group of 3", "With tooltip"]}
25
- />
26
- <StickerSheet.Body>
27
- <StickerSheet.Row>
28
- <ButtonGroup>
29
- <FilterButtonBase>First</FilterButtonBase>
30
- <FilterButtonBase>Last</FilterButtonBase>
31
- </ButtonGroup>
32
- <ButtonGroup>
33
- <FilterButtonBase>First</FilterButtonBase>
34
- <FilterButtonBase>Middle</FilterButtonBase>
35
- <FilterButtonBase>Last</FilterButtonBase>
36
- </ButtonGroup>
37
- <ButtonGroup>
38
- <Tooltip text="Hello!">
39
- <FilterButtonBase>Tooltips here</FilterButtonBase>
40
- </Tooltip>
41
- <Tooltip text="Pancakes!">
42
- <FilterButtonBase>Styles should still work</FilterButtonBase>
43
- </Tooltip>
44
- </ButtonGroup>
45
- </StickerSheet.Row>
46
- </StickerSheet.Body>
22
+ <StickerSheet
23
+ title="Button Group"
24
+ headers={["Group of 2", "Group of 3", "With tooltip"]}
25
+ >
26
+ <StickerSheet.Row>
27
+ <ButtonGroup>
28
+ <FilterButtonBase>First</FilterButtonBase>
29
+ <FilterButtonBase>Last</FilterButtonBase>
30
+ </ButtonGroup>
31
+ <ButtonGroup>
32
+ <FilterButtonBase>First</FilterButtonBase>
33
+ <FilterButtonBase>Middle</FilterButtonBase>
34
+ <FilterButtonBase>Last</FilterButtonBase>
35
+ </ButtonGroup>
36
+ <ButtonGroup>
37
+ <Tooltip text="Hello!">
38
+ <FilterButtonBase>Tooltips here</FilterButtonBase>
39
+ </Tooltip>
40
+ <Tooltip text="Pancakes!">
41
+ <FilterButtonBase>Styles should still work</FilterButtonBase>
42
+ </Tooltip>
43
+ </ButtonGroup>
44
+ </StickerSheet.Row>
47
45
  </StickerSheet>
48
46
 
49
- <StickerSheet heading="Pseudo states">
50
- <StickerSheet.Header
51
- headings={["Hover", "Active", "Focus"]}
52
- hasVerticalHeadings
53
- />
54
- <StickerSheet.Body>
55
- <StickerSheet.Row rowTitle="First">
56
- <ButtonGroup>
57
- <FilterButtonBase
58
- data-sb-pseudo-styles="hover"
59
- data-sb-a11y-color-contrast-disable
60
- >
61
- First
62
- </FilterButtonBase>
63
- <FilterButtonBase>Last</FilterButtonBase>
64
- </ButtonGroup>
65
- <ButtonGroup>
66
- <FilterButtonBase
67
- data-sb-pseudo-styles="active"
68
- data-sb-a11y-color-contrast-disable
69
- >
70
- First
71
- </FilterButtonBase>
72
- <FilterButtonBase>Last</FilterButtonBase>
73
- </ButtonGroup>
74
- <ButtonGroup>
75
- <FilterButtonBase
76
- data-sb-pseudo-styles="focus"
77
- data-sb-a11y-color-contrast-disable
78
- >
79
- First
80
- </FilterButtonBase>
81
- <FilterButtonBase>Last</FilterButtonBase>
82
- </ButtonGroup>
83
- </StickerSheet.Row>
47
+ <StickerSheet
48
+ title="Pseudo states"
49
+ headers={["Hover", "Active", "Focus"]}
50
+ >
51
+ <StickerSheet.Row header="First">
52
+ <ButtonGroup>
53
+ <FilterButtonBase
54
+ data-sb-pseudo-styles="hover"
55
+ data-sb-a11y-color-contrast-disable
56
+ >
57
+ First
58
+ </FilterButtonBase>
59
+ <FilterButtonBase>Last</FilterButtonBase>
60
+ </ButtonGroup>
61
+ <ButtonGroup>
62
+ <FilterButtonBase
63
+ data-sb-pseudo-styles="active"
64
+ data-sb-a11y-color-contrast-disable
65
+ >
66
+ First
67
+ </FilterButtonBase>
68
+ <FilterButtonBase>Last</FilterButtonBase>
69
+ </ButtonGroup>
70
+ <ButtonGroup>
71
+ <FilterButtonBase
72
+ data-sb-pseudo-styles="focus"
73
+ data-sb-a11y-color-contrast-disable
74
+ >
75
+ First
76
+ </FilterButtonBase>
77
+ <FilterButtonBase>Last</FilterButtonBase>
78
+ </ButtonGroup>
79
+ </StickerSheet.Row>
84
80
 
85
- <StickerSheet.Row rowTitle="Last">
86
- <ButtonGroup>
87
- <FilterButtonBase>First</FilterButtonBase>
88
- <FilterButtonBase
89
- data-sb-pseudo-styles="hover"
90
- data-sb-a11y-color-contrast-disable
91
- >
92
- Last
93
- </FilterButtonBase>
94
- </ButtonGroup>
95
- <ButtonGroup>
96
- <FilterButtonBase>First</FilterButtonBase>
97
- <FilterButtonBase
98
- data-sb-pseudo-styles="active"
99
- data-sb-a11y-color-contrast-disable
100
- >
101
- Last
102
- </FilterButtonBase>
103
- </ButtonGroup>
104
- <ButtonGroup>
105
- <FilterButtonBase>First</FilterButtonBase>
106
- <FilterButtonBase
107
- data-sb-pseudo-styles="focus"
108
- data-sb-a11y-color-contrast-disable
109
- >
110
- Last
111
- </FilterButtonBase>
112
- </ButtonGroup>
113
- </StickerSheet.Row>
81
+ <StickerSheet.Row header="Last">
82
+ <ButtonGroup>
83
+ <FilterButtonBase>First</FilterButtonBase>
84
+ <FilterButtonBase
85
+ data-sb-pseudo-styles="hover"
86
+ data-sb-a11y-color-contrast-disable
87
+ >
88
+ Last
89
+ </FilterButtonBase>
90
+ </ButtonGroup>
91
+ <ButtonGroup>
92
+ <FilterButtonBase>First</FilterButtonBase>
93
+ <FilterButtonBase
94
+ data-sb-pseudo-styles="active"
95
+ data-sb-a11y-color-contrast-disable
96
+ >
97
+ Last
98
+ </FilterButtonBase>
99
+ </ButtonGroup>
100
+ <ButtonGroup>
101
+ <FilterButtonBase>First</FilterButtonBase>
102
+ <FilterButtonBase
103
+ data-sb-pseudo-styles="focus"
104
+ data-sb-a11y-color-contrast-disable
105
+ >
106
+ Last
107
+ </FilterButtonBase>
108
+ </ButtonGroup>
109
+ </StickerSheet.Row>
114
110
 
115
- <StickerSheet.Row rowTitle="Middle">
116
- <ButtonGroup>
117
- <FilterButtonBase>First</FilterButtonBase>
118
- <FilterButtonBase
119
- data-sb-pseudo-styles="hover"
120
- data-sb-a11y-color-contrast-disable
121
- >
122
- Middle
123
- </FilterButtonBase>
124
- <FilterButtonBase>Last</FilterButtonBase>
125
- </ButtonGroup>
126
- <ButtonGroup>
127
- <FilterButtonBase>First</FilterButtonBase>
128
- <FilterButtonBase
129
- data-sb-pseudo-styles="active"
130
- data-sb-a11y-color-contrast-disable
131
- >
132
- Middle
133
- </FilterButtonBase>
134
- <FilterButtonBase>Last</FilterButtonBase>
135
- </ButtonGroup>
136
- <ButtonGroup>
137
- <FilterButtonBase>First</FilterButtonBase>
138
- <FilterButtonBase
139
- data-sb-pseudo-styles="focus"
140
- data-sb-a11y-color-contrast-disable
141
- >
142
- Middle
143
- </FilterButtonBase>
144
- <FilterButtonBase>Last</FilterButtonBase>
145
- </ButtonGroup>
146
- </StickerSheet.Row>
147
- </StickerSheet.Body>
111
+ <StickerSheet.Row header="Middle">
112
+ <ButtonGroup>
113
+ <FilterButtonBase>First</FilterButtonBase>
114
+ <FilterButtonBase
115
+ data-sb-pseudo-styles="hover"
116
+ data-sb-a11y-color-contrast-disable
117
+ >
118
+ Middle
119
+ </FilterButtonBase>
120
+ <FilterButtonBase>Last</FilterButtonBase>
121
+ </ButtonGroup>
122
+ <ButtonGroup>
123
+ <FilterButtonBase>First</FilterButtonBase>
124
+ <FilterButtonBase
125
+ data-sb-pseudo-styles="active"
126
+ data-sb-a11y-color-contrast-disable
127
+ >
128
+ Middle
129
+ </FilterButtonBase>
130
+ <FilterButtonBase>Last</FilterButtonBase>
131
+ </ButtonGroup>
132
+ <ButtonGroup>
133
+ <FilterButtonBase>First</FilterButtonBase>
134
+ <FilterButtonBase
135
+ data-sb-pseudo-styles="focus"
136
+ data-sb-a11y-color-contrast-disable
137
+ >
138
+ Middle
139
+ </FilterButtonBase>
140
+ <FilterButtonBase>Last</FilterButtonBase>
141
+ </ButtonGroup>
142
+ </StickerSheet.Row>
148
143
  </StickerSheet>
149
144
  </>
150
145
  ),
package/src/Calendar/CalendarPopover/_docs/CalendarPopover.stickersheet.stories.tsx CHANGED
@@ -99,7 +99,7 @@ const StickerSheetTemplate: StickerSheetStory = {
99
99
  render: ({ isReversed }) => (
100
100
  <>
101
101
  <StickerSheet isReversed={isReversed}>
102
- <StickerSheet.Row rowTitle="Default">
102
+ <StickerSheet.Row header="Default">
103
103
  <CalendarPopoverExample rowHeight={102}>
104
104
  CalendarPopover
105
105
  <br />
@@ -107,13 +107,13 @@ const StickerSheetTemplate: StickerSheetStory = {
107
107
  </CalendarPopoverExample>
108
108
  </StickerSheet.Row>
109
109
 
110
- <StickerSheet.Row rowTitle="CalendarSingle">
110
+ <StickerSheet.Row header="CalendarSingle">
111
111
  <CalendarPopoverExample rowHeight={350}>
112
112
  <CalendarSingle selected={new Date("2022-02-19")} />
113
113
  </CalendarPopoverExample>
114
114
  </StickerSheet.Row>
115
115
 
116
- <StickerSheet.Row rowTitle="CalendarRange">
116
+ <StickerSheet.Row header="CalendarRange">
117
117
  <CalendarPopoverExample rowHeight={350}>
118
118
  <CalendarRange
119
119
  selected={{
@@ -124,7 +124,7 @@ const StickerSheetTemplate: StickerSheetStory = {
124
124
  </CalendarPopoverExample>
125
125
  </StickerSheet.Row>
126
126
 
127
- <StickerSheet.Row rowTitle="CalendarRange with divider">
127
+ <StickerSheet.Row header="CalendarRange with divider">
128
128
  <CalendarPopoverExample rowHeight={350}>
129
129
  <CalendarRange
130
130
  data-testid="sb-final-calendar"
package/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx CHANGED
@@ -44,41 +44,33 @@ const CalendarRangeWrapper = (
44
44
  const StickerSheetTemplate: StickerSheetStory = {
45
45
  render: () => (
46
46
  <>
47
- <StickerSheet heading="Calendar Range">
48
- <StickerSheet.Body>
49
- <StickerSheet.Row rowTitle="Default">
50
- <CalendarRangeWrapper />
51
- </StickerSheet.Row>
47
+ <StickerSheet title="Calendar Range">
48
+ <StickerSheet.Row header="Default">
49
+ <CalendarRangeWrapper />
50
+ </StickerSheet.Row>
52
51
 
53
- <StickerSheet.Row rowTitle="With divider">
54
- <div style={{ padding: "1.5rem 0" }}>
55
- <CalendarRangeWrapper hasDivider />
56
- </div>
57
- </StickerSheet.Row>
58
- </StickerSheet.Body>
52
+ <StickerSheet.Row header="With divider">
53
+ <div style={{ padding: "1.5rem 0" }}>
54
+ <CalendarRangeWrapper hasDivider />
55
+ </div>
56
+ </StickerSheet.Row>
59
57
  </StickerSheet>
60
58
 
61
- <StickerSheet heading="Pseudo states">
62
- <StickerSheet.Header
63
- headings={["Hover", "Focus"]}
64
- hasVerticalHeadings
65
- />
66
- <StickerSheet.Body>
67
- <StickerSheet.Row rowTitle="Selected (Start)">
68
- <CalendarRangeWrapper id="id__calendar-range__start--hover" />
69
- <CalendarRangeWrapper id="id__calendar-range__start--focus" />
70
- </StickerSheet.Row>
59
+ <StickerSheet title="Pseudo states" headers={["Hover", "Focus"]}>
60
+ <StickerSheet.Row header="Selected (Start)">
61
+ <CalendarRangeWrapper id="id__calendar-range__start--hover" />
62
+ <CalendarRangeWrapper id="id__calendar-range__start--focus" />
63
+ </StickerSheet.Row>
71
64
 
72
- <StickerSheet.Row rowTitle="Selected (Middle)">
73
- <CalendarRangeWrapper id="id__calendar-range__middle--hover" />
74
- <CalendarRangeWrapper id="id__calendar-range__middle--focus" />
75
- </StickerSheet.Row>
65
+ <StickerSheet.Row header="Selected (Middle)">
66
+ <CalendarRangeWrapper id="id__calendar-range__middle--hover" />
67
+ <CalendarRangeWrapper id="id__calendar-range__middle--focus" />
68
+ </StickerSheet.Row>
76
69
 
77
- <StickerSheet.Row rowTitle="Selected (End)">
78
- <CalendarRangeWrapper id="id__calendar-range__end--hover" />
79
- <CalendarRangeWrapper id="id__calendar-range__end--focus" />
80
- </StickerSheet.Row>
81
- </StickerSheet.Body>
70
+ <StickerSheet.Row header="Selected (End)">
71
+ <CalendarRangeWrapper id="id__calendar-range__end--hover" />
72
+ <CalendarRangeWrapper id="id__calendar-range__end--focus" />
73
+ </StickerSheet.Row>
82
74
  </StickerSheet>
83
75
  </>
84
76
  ),
package/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx CHANGED
@@ -27,70 +27,70 @@ const CalendarSingleExample = (
27
27
  const StickerSheetTemplate: StickerSheetStory = {
28
28
  render: () => (
29
29
  <>
30
- <StickerSheet heading="Calendars - Day">
31
- <StickerSheet.Header headings={["Hover", "Focus", "Disabled"]} />
32
- <StickerSheet.Body>
33
- <StickerSheet.Row>
34
- <CalendarSingleExample id="id--calendar--hover" />
35
- <CalendarSingleExample id="id--calendar--focus" />
36
- <CalendarSingleExample
37
- disabled={[
38
- new Date("2021-09-15"),
39
- { after: new Date("2021-09-17") },
40
- ]}
41
- />
42
- </StickerSheet.Row>
43
- </StickerSheet.Body>
30
+ <StickerSheet
31
+ title="Calendars - Day"
32
+ headers={["Hover", "Focus", "Disabled"]}
33
+ >
34
+ <StickerSheet.Row>
35
+ <CalendarSingleExample id="id--calendar--hover" />
36
+ <CalendarSingleExample id="id--calendar--focus" />
37
+ <CalendarSingleExample
38
+ disabled={[
39
+ new Date("2021-09-15"),
40
+ { after: new Date("2021-09-17") },
41
+ ]}
42
+ />
43
+ </StickerSheet.Row>
44
44
  </StickerSheet>
45
45
 
46
- <StickerSheet heading="Calendars - Selected Day">
47
- <StickerSheet.Header headings={["Default", "Hover", "Focus"]} />
48
- <StickerSheet.Body>
49
- <StickerSheet.Row>
50
- <CalendarSingleExample selected={new Date("2021-09-05")} />
51
- <CalendarSingleExample
52
- selected={new Date("2021-09-05")}
53
- id="id--calendar-selected--hover"
54
- />
55
- <CalendarSingleExample
56
- selected={new Date("2021-09-05")}
57
- id="id--calendar-selected--focus"
58
- />
59
- </StickerSheet.Row>
60
- </StickerSheet.Body>
46
+ <StickerSheet
47
+ title="Calendars - Selected Day"
48
+ headers={["Default", "Hover", "Focus"]}
49
+ >
50
+ <StickerSheet.Row>
51
+ <CalendarSingleExample selected={new Date("2021-09-05")} />
52
+ <CalendarSingleExample
53
+ selected={new Date("2021-09-05")}
54
+ id="id--calendar-selected--hover"
55
+ />
56
+ <CalendarSingleExample
57
+ selected={new Date("2021-09-05")}
58
+ id="id--calendar-selected--focus"
59
+ />
60
+ </StickerSheet.Row>
61
61
  </StickerSheet>
62
62
 
63
- <StickerSheet heading="Calendars - Today">
64
- <StickerSheet.Header headings={["Default", "Selected", "Disabled"]} />
65
- <StickerSheet.Body>
66
- <StickerSheet.Row>
67
- <CalendarSingleExample
68
- defaultMonth={new Date("2022-05-01")}
69
- id="id--calendar-today--default"
70
- />
71
- <CalendarSingleExample
72
- defaultMonth={new Date("2022-05-01")}
73
- id="id--calendar-today--selected"
74
- selected={new Date("2022-05-01")}
75
- />
76
- <CalendarSingleExample
77
- defaultMonth={new Date("2022-05-01")}
78
- id="id--calendar-today--disabled"
79
- selected={new Date("2022-05-01")}
80
- disabled={[new Date("2022-05-01")]}
81
- />
82
- </StickerSheet.Row>
83
- </StickerSheet.Body>
63
+ <StickerSheet
64
+ title="Calendars - Today"
65
+ headers={["Default", "Selected", "Disabled"]}
66
+ >
67
+ <StickerSheet.Row>
68
+ <CalendarSingleExample
69
+ defaultMonth={new Date("2022-05-01")}
70
+ id="id--calendar-today--default"
71
+ />
72
+ <CalendarSingleExample
73
+ defaultMonth={new Date("2022-05-01")}
74
+ id="id--calendar-today--selected"
75
+ selected={new Date("2022-05-01")}
76
+ />
77
+ <CalendarSingleExample
78
+ defaultMonth={new Date("2022-05-01")}
79
+ id="id--calendar-today--disabled"
80
+ selected={new Date("2022-05-01")}
81
+ disabled={[new Date("2022-05-01")]}
82
+ />
83
+ </StickerSheet.Row>
84
84
  </StickerSheet>
85
85
 
86
- <StickerSheet heading="Calendars - Navigation Buttons">
87
- <StickerSheet.Header headings={["Hover", "Focus"]} />
88
- <StickerSheet.Body>
89
- <StickerSheet.Row>
90
- <CalendarSingleExample id="id--calendar-navigation--hover" />
91
- <CalendarSingleExample id="id--calendar-navigation--focus" />
92
- </StickerSheet.Row>
93
- </StickerSheet.Body>
86
+ <StickerSheet
87
+ title="Calendars - Navigation Buttons"
88
+ headers={["Hover", "Focus"]}
89
+ >
90
+ <StickerSheet.Row>
91
+ <CalendarSingleExample id="id--calendar-navigation--hover" />
92
+ <CalendarSingleExample id="id--calendar-navigation--focus" />
93
+ </StickerSheet.Row>
94
94
  </StickerSheet>
95
95
  </>
96
96
  ),
package/src/Card/_docs/Card.stickersheet.stories.tsx CHANGED
@@ -41,23 +41,19 @@ const variants = [
41
41
  const StickerSheetTemplate: StickerSheetStory = {
42
42
  render: ({ isReversed, ...args }) => (
43
43
  <>
44
- <StickerSheet isReversed={isReversed} heading="Colors">
45
- <StickerSheet.Body>
46
- {colors.map(color => (
47
- <StickerSheet.Row key={color} rowTitle={color}>
48
- <Card {...args} color={color} />
49
- </StickerSheet.Row>
50
- ))}
51
- </StickerSheet.Body>
44
+ <StickerSheet isReversed={isReversed} title="Colors">
45
+ {colors.map(color => (
46
+ <StickerSheet.Row key={color} header={color}>
47
+ <Card {...args} color={color} />
48
+ </StickerSheet.Row>
49
+ ))}
52
50
  </StickerSheet>
53
- <StickerSheet isReversed={isReversed} heading="Variants (deprecated)">
54
- <StickerSheet.Body>
55
- {variants.map(variant => (
56
- <StickerSheet.Row key={variant} rowTitle={variant}>
57
- <Card {...args} variant={variant} />
58
- </StickerSheet.Row>
59
- ))}
60
- </StickerSheet.Body>
51
+ <StickerSheet isReversed={isReversed} title="Variants (deprecated)">
52
+ {variants.map(variant => (
53
+ <StickerSheet.Row key={variant} header={variant}>
54
+ <Card {...args} variant={variant} />
55
+ </StickerSheet.Row>
56
+ ))}
61
57
  </StickerSheet>
62
58
  </>
63
59
  ),