@kaizen/components 1.68.2 → 1.68.4

package/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx

@@ -44,41 +44,33 @@ const CalendarRangeWrapper = (
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <>
-      <StickerSheet heading="Calendar Range">
-        <StickerSheet.Body>
-          <StickerSheet.Row rowTitle="Default">
-            <CalendarRangeWrapper />
-          </StickerSheet.Row>
+      <StickerSheet title="Calendar Range">
+        <StickerSheet.Row header="Default">
+          <CalendarRangeWrapper />
+        </StickerSheet.Row>
 
-          <StickerSheet.Row rowTitle="With divider">
-            <div style={{ padding: "1.5rem 0" }}>
-              <CalendarRangeWrapper hasDivider />
-            </div>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+        <StickerSheet.Row header="With divider">
+          <div style={{ padding: "1.5rem 0" }}>
+            <CalendarRangeWrapper hasDivider />
+          </div>
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet heading="Pseudo states">
-        <StickerSheet.Header
-          headings={["Hover", "Focus"]}
-          hasVerticalHeadings
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row rowTitle="Selected (Start)">
-            <CalendarRangeWrapper id="id__calendar-range__start--hover" />
-            <CalendarRangeWrapper id="id__calendar-range__start--focus" />
-          </StickerSheet.Row>
+      <StickerSheet title="Pseudo states" headers={["Hover", "Focus"]}>
+        <StickerSheet.Row header="Selected (Start)">
+          <CalendarRangeWrapper id="id__calendar-range__start--hover" />
+          <CalendarRangeWrapper id="id__calendar-range__start--focus" />
+        </StickerSheet.Row>
 
-          <StickerSheet.Row rowTitle="Selected (Middle)">
-            <CalendarRangeWrapper id="id__calendar-range__middle--hover" />
-            <CalendarRangeWrapper id="id__calendar-range__middle--focus" />
-          </StickerSheet.Row>
+        <StickerSheet.Row header="Selected (Middle)">
+          <CalendarRangeWrapper id="id__calendar-range__middle--hover" />
+          <CalendarRangeWrapper id="id__calendar-range__middle--focus" />
+        </StickerSheet.Row>
 
-          <StickerSheet.Row rowTitle="Selected (End)">
-            <CalendarRangeWrapper id="id__calendar-range__end--hover" />
-            <CalendarRangeWrapper id="id__calendar-range__end--focus" />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+        <StickerSheet.Row header="Selected (End)">
+          <CalendarRangeWrapper id="id__calendar-range__end--hover" />
+          <CalendarRangeWrapper id="id__calendar-range__end--focus" />
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),

package/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx

@@ -27,70 +27,70 @@ const CalendarSingleExample = (
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <>
-      <StickerSheet heading="Calendars - Day">
-        <StickerSheet.Header headings={["Hover", "Focus", "Disabled"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <CalendarSingleExample id="id--calendar--hover" />
-            <CalendarSingleExample id="id--calendar--focus" />
-            <CalendarSingleExample
-              disabled={[
-                new Date("2021-09-15"),
-                { after: new Date("2021-09-17") },
-              ]}
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        title="Calendars - Day"
+        headers={["Hover", "Focus", "Disabled"]}
+      >
+        <StickerSheet.Row>
+          <CalendarSingleExample id="id--calendar--hover" />
+          <CalendarSingleExample id="id--calendar--focus" />
+          <CalendarSingleExample
+            disabled={[
+              new Date("2021-09-15"),
+              { after: new Date("2021-09-17") },
+            ]}
+          />
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet heading="Calendars - Selected Day">
-        <StickerSheet.Header headings={["Default", "Hover", "Focus"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <CalendarSingleExample selected={new Date("2021-09-05")} />
-            <CalendarSingleExample
-              selected={new Date("2021-09-05")}
-              id="id--calendar-selected--hover"
-            />
-            <CalendarSingleExample
-              selected={new Date("2021-09-05")}
-              id="id--calendar-selected--focus"
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        title="Calendars - Selected Day"
+        headers={["Default", "Hover", "Focus"]}
+      >
+        <StickerSheet.Row>
+          <CalendarSingleExample selected={new Date("2021-09-05")} />
+          <CalendarSingleExample
+            selected={new Date("2021-09-05")}
+            id="id--calendar-selected--hover"
+          />
+          <CalendarSingleExample
+            selected={new Date("2021-09-05")}
+            id="id--calendar-selected--focus"
+          />
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet heading="Calendars - Today">
-        <StickerSheet.Header headings={["Default", "Selected", "Disabled"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <CalendarSingleExample
-              defaultMonth={new Date("2022-05-01")}
-              id="id--calendar-today--default"
-            />
-            <CalendarSingleExample
-              defaultMonth={new Date("2022-05-01")}
-              id="id--calendar-today--selected"
-              selected={new Date("2022-05-01")}
-            />
-            <CalendarSingleExample
-              defaultMonth={new Date("2022-05-01")}
-              id="id--calendar-today--disabled"
-              selected={new Date("2022-05-01")}
-              disabled={[new Date("2022-05-01")]}
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        title="Calendars - Today"
+        headers={["Default", "Selected", "Disabled"]}
+      >
+        <StickerSheet.Row>
+          <CalendarSingleExample
+            defaultMonth={new Date("2022-05-01")}
+            id="id--calendar-today--default"
+          />
+          <CalendarSingleExample
+            defaultMonth={new Date("2022-05-01")}
+            id="id--calendar-today--selected"
+            selected={new Date("2022-05-01")}
+          />
+          <CalendarSingleExample
+            defaultMonth={new Date("2022-05-01")}
+            id="id--calendar-today--disabled"
+            selected={new Date("2022-05-01")}
+            disabled={[new Date("2022-05-01")]}
+          />
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet heading="Calendars - Navigation Buttons">
-        <StickerSheet.Header headings={["Hover", "Focus"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <CalendarSingleExample id="id--calendar-navigation--hover" />
-            <CalendarSingleExample id="id--calendar-navigation--focus" />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        title="Calendars - Navigation Buttons"
+        headers={["Hover", "Focus"]}
+      >
+        <StickerSheet.Row>
+          <CalendarSingleExample id="id--calendar-navigation--hover" />
+          <CalendarSingleExample id="id--calendar-navigation--focus" />
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),

package/src/Card/_docs/Card.stickersheet.stories.tsx

@@ -41,23 +41,19 @@ const variants = [
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed, ...args }) => (
     <>
-      <StickerSheet isReversed={isReversed} heading="Colors">
-        <StickerSheet.Body>
-          {colors.map(color => (
-            <StickerSheet.Row key={color} rowTitle={color}>
-              <Card {...args} color={color} />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+      <StickerSheet isReversed={isReversed} title="Colors">
+        {colors.map(color => (
+          <StickerSheet.Row key={color} header={color}>
+            <Card {...args} color={color} />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
-      <StickerSheet isReversed={isReversed} heading="Variants (deprecated)">
-        <StickerSheet.Body>
-          {variants.map(variant => (
-            <StickerSheet.Row key={variant} rowTitle={variant}>
-              <Card {...args} variant={variant} />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+      <StickerSheet isReversed={isReversed} title="Variants (deprecated)">
+        {variants.map(variant => (
+          <StickerSheet.Row key={variant} header={variant}>
+            <Card {...args} variant={variant} />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
     </>
   ),

package/src/Checkbox/Checkbox/_docs/Checkbox.stickersheet.stories.tsx

@@ -42,33 +42,30 @@ const StickerSheetTemplate: StickerSheetStory = {
     }>
 
     return (
-      <StickerSheet isReversed={isReversed}>
-        <StickerSheet.Header
-          headings={["Default", "Hover", "Focus", "Disabled"]}
-          hasVerticalHeadings
-        />
-        <StickerSheet.Body>
-          {rows.map(({ title, checkedStatus }) => (
-            <StickerSheet.Row key={title} rowTitle={title}>
-              <Checkbox {...defaultProps} checkedStatus={checkedStatus} />
-              <Checkbox
-                {...defaultProps}
-                checkedStatus={checkedStatus}
-                data-sb-pseudo-styles="hover"
-              />
-              <Checkbox
-                {...defaultProps}
-                checkedStatus={checkedStatus}
-                data-sb-pseudo-styles="focus"
-              />
-              <Checkbox
-                {...defaultProps}
-                checkedStatus={checkedStatus}
-                disabled
-              />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+      <StickerSheet
+        isReversed={isReversed}
+        headers={["Default", "Hover", "Focus", "Disabled"]}
+      >
+        {rows.map(({ title, checkedStatus }) => (
+          <StickerSheet.Row key={title} header={title}>
+            <Checkbox {...defaultProps} checkedStatus={checkedStatus} />
+            <Checkbox
+              {...defaultProps}
+              checkedStatus={checkedStatus}
+              data-sb-pseudo-styles="hover"
+            />
+            <Checkbox
+              {...defaultProps}
+              checkedStatus={checkedStatus}
+              data-sb-pseudo-styles="focus"
+            />
+            <Checkbox
+              {...defaultProps}
+              checkedStatus={checkedStatus}
+              disabled
+            />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
     )
   },

package/src/Checkbox/CheckboxField/_docs/CheckboxField.stickersheet.stories.tsx

@@ -31,40 +31,37 @@ const StickerSheetTemplate: StickerSheetStory = {
     }>
 
     return (
-      <StickerSheet isReversed={isReversed}>
-        <StickerSheet.Header
-          headings={["Default", "Hover", "Focus", "Disabled"]}
-          hasVerticalHeadings
-        />
-        <StickerSheet.Body>
-          {rows.map(({ title, checkedStatus }) => (
-            <StickerSheet.Row key={title} rowTitle={title}>
-              <CheckboxField
-                {...defaultProps}
-                labelText="Checkbox"
-                checkedStatus={checkedStatus}
-              />
-              <CheckboxField
-                {...defaultProps}
-                labelText="Hover"
-                checkedStatus={checkedStatus}
-                data-sb-pseudo-styles="hover"
-              />
-              <CheckboxField
-                {...defaultProps}
-                labelText="Focus"
-                checkedStatus={checkedStatus}
-                data-sb-pseudo-styles="focus"
-              />
-              <CheckboxField
-                {...defaultProps}
-                labelText="Disabled"
-                checkedStatus={checkedStatus}
-                disabled
-              />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+      <StickerSheet
+        isReversed={isReversed}
+        headers={["Default", "Hover", "Focus", "Disabled"]}
+      >
+        {rows.map(({ title, checkedStatus }) => (
+          <StickerSheet.Row key={title} header={title}>
+            <CheckboxField
+              {...defaultProps}
+              labelText="Checkbox"
+              checkedStatus={checkedStatus}
+            />
+            <CheckboxField
+              {...defaultProps}
+              labelText="Hover"
+              checkedStatus={checkedStatus}
+              data-sb-pseudo-styles="hover"
+            />
+            <CheckboxField
+              {...defaultProps}
+              labelText="Focus"
+              checkedStatus={checkedStatus}
+              data-sb-pseudo-styles="focus"
+            />
+            <CheckboxField
+              {...defaultProps}
+              labelText="Disabled"
+              checkedStatus={checkedStatus}
+              disabled
+            />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
     )
   },

package/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.stickersheet.stories.tsx

@@ -38,31 +38,31 @@ const CheckboxGroupWrapped = ({
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header headings={["Default", "No Bottom Margin"]} />
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <>
-            <CheckboxGroupWrapped
-              reversed={isReversed}
-              labelText="CheckboxGroup"
-            />
-            <Text variant="body" color={isReversed ? "white" : "dark"}>
-              Next line
-            </Text>
-          </>
-          <>
-            <CheckboxGroupWrapped
-              reversed={isReversed}
-              labelText="CheckboxGroup"
-              noBottomMargin
-            />
-            <Text variant="body" color={isReversed ? "white" : "dark"}>
-              Next line
-            </Text>
-          </>
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Default", "No Bottom Margin"]}
+    >
+      <StickerSheet.Row>
+        <>
+          <CheckboxGroupWrapped
+            reversed={isReversed}
+            labelText="CheckboxGroup"
+          />
+          <Text variant="body" color={isReversed ? "white" : "dark"}>
+            Next line
+          </Text>
+        </>
+        <>
+          <CheckboxGroupWrapped
+            reversed={isReversed}
+            labelText="CheckboxGroup"
+            noBottomMargin
+          />
+          <Text variant="body" color={isReversed ? "white" : "dark"}>
+            Next line
+          </Text>
+        </>
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }
@@ -76,8 +76,6 @@ export const StickerSheetReversed: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Reversed)",
   parameters: {
-    /** @note: Only required if template has parameters, otherwise this spread can be removed */
-    ...StickerSheetTemplate.parameters,
     backgrounds: { default: "Purple 700" },
   },
   args: { isReversed: true },
@@ -87,8 +85,6 @@ export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",
   parameters: {
-    /** @note: Only required if template has parameters, otherwise this spread can be removed */
-    ...StickerSheetTemplate.parameters,
     textDirection: "rtl",
   },
 }

package/src/ClearButton/_docs/ClearButton.stickersheet.stories.tsx

@@ -16,15 +16,15 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header headings={["Default", "Hover", "Focus"]} />
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <ClearButton isReversed={isReversed} />
-          <ClearButton isReversed={isReversed} data-sb-pseudo-styles="hover" />
-          <ClearButton isReversed={isReversed} data-sb-pseudo-styles="focus" />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Default", "Hover", "Focus"]}
+    >
+      <StickerSheet.Row>
+        <ClearButton isReversed={isReversed} />
+        <ClearButton isReversed={isReversed} data-sb-pseudo-styles="hover" />
+        <ClearButton isReversed={isReversed} data-sb-pseudo-styles="focus" />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   parameters: {

package/src/Collapsible/Collapsible/_docs/Collapsible.stickersheet.stories.tsx

@@ -34,33 +34,31 @@ const CollapsibleWrapped = (
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <StickerSheet>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Open">
-          <CollapsibleWrapped title="Collapsible" />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Closed">
-          <CollapsibleWrapped title="Closed" open={false} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="noSectionPadding">
-          <CollapsibleWrapped title="No Padding" noSectionPadding />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="lazyLoad">
-          <CollapsibleWrapped title="Lazy load" lazyLoad />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="clear">
-          <CollapsibleWrapped title="Clear" variant="clear" />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="custom heading">
-          <CollapsibleWrapped
-            title="Custom header"
-            renderHeader={title => (
-              <Heading variant="heading-4" tag="span">
-                {title}
-              </Heading>
-            )}
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+      <StickerSheet.Row header="Open">
+        <CollapsibleWrapped title="Collapsible" />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Closed">
+        <CollapsibleWrapped title="Closed" open={false} />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="noSectionPadding">
+        <CollapsibleWrapped title="No Padding" noSectionPadding />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="lazyLoad">
+        <CollapsibleWrapped title="Lazy load" lazyLoad />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="clear">
+        <CollapsibleWrapped title="Clear" variant="clear" />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="custom heading">
+        <CollapsibleWrapped
+          title="Custom header"
+          renderHeader={title => (
+            <Heading variant="heading-4" tag="span">
+              {title}
+            </Heading>
+          )}
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }
@@ -79,41 +77,37 @@ export const StickerSheetRTL: StickerSheetStory = {
 export const Sticky: StickerSheetStory = {
   render: () => (
     <StickerSheet>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Sticky header">
-          <div style={{ height: "300px", overflow: "auto" }}>
-            <Collapsible
-              open
-              title="Sticky"
-              sticky={{ top: "-1px" }}
-              style={{ maxWidth: "300px" }}
-            >
-              <Text variant="body">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Phasellus ac scelerisque sem, vel ultricies justo. Donec eu
-                porttitor ante, nec gravida orci. Nulla facilisi. Cras varius
-                erat id fermentum mattis. Mauris bibendum vestibulum erat, quis
-                blandit metus viverra sit amet. Vivamus pretium vitae turpis ut
-                condimentum. Sed vulputate magna nisl, in cursus urna hendrerit
-                et. Aenean semper, est non feugiat sodales, nisl ligula aliquet
-                lorem, sit amet scelerisque arcu quam a sapien. Donec in viverra
-                urna.
-              </Text>
-              <Text variant="body" data-testid="bottom-content">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Phasellus ac scelerisque sem, vel ultricies justo. Donec eu
-                porttitor ante, nec gravida orci. Nulla facilisi. Cras varius
-                erat id fermentum mattis. Mauris bibendum vestibulum erat, quis
-                blandit metus viverra sit amet. Vivamus pretium vitae turpis ut
-                condimentum. Sed vulputate magna nisl, in cursus urna hendrerit
-                et. Aenean semper, est non feugiat sodales, nisl ligula aliquet
-                lorem, sit amet scelerisque arcu quam a sapien. Donec in viverra
-                urna.
-              </Text>
-            </Collapsible>
-          </div>
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+      <StickerSheet.Row header="Sticky header">
+        <div style={{ height: "300px", overflow: "auto" }}>
+          <Collapsible
+            open
+            title="Sticky"
+            sticky={{ top: "-1px" }}
+            style={{ maxWidth: "300px" }}
+          >
+            <Text variant="body">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+              ac scelerisque sem, vel ultricies justo. Donec eu porttitor ante,
+              nec gravida orci. Nulla facilisi. Cras varius erat id fermentum
+              mattis. Mauris bibendum vestibulum erat, quis blandit metus
+              viverra sit amet. Vivamus pretium vitae turpis ut condimentum. Sed
+              vulputate magna nisl, in cursus urna hendrerit et. Aenean semper,
+              est non feugiat sodales, nisl ligula aliquet lorem, sit amet
+              scelerisque arcu quam a sapien. Donec in viverra urna.
+            </Text>
+            <Text variant="body" data-testid="bottom-content">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
+              ac scelerisque sem, vel ultricies justo. Donec eu porttitor ante,
+              nec gravida orci. Nulla facilisi. Cras varius erat id fermentum
+              mattis. Mauris bibendum vestibulum erat, quis blandit metus
+              viverra sit amet. Vivamus pretium vitae turpis ut condimentum. Sed
+              vulputate magna nisl, in cursus urna hendrerit et. Aenean semper,
+              est non feugiat sodales, nisl ligula aliquet lorem, sit amet
+              scelerisque arcu quam a sapien. Donec in viverra urna.
+            </Text>
+          </Collapsible>
+        </div>
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   play: async ({ canvasElement }) => {