@kaizen/components 1.68.1 → 1.68.3

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 }) => {

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

@@ -45,27 +45,25 @@ const CollapsibleGroupWrapped = (
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Open">
-          <CollapsibleGroupWrapped />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Closed">
-          <CollapsibleGroup>
-            <CollapsibleWrapped open={false} />
-            <CollapsibleWrapped open={false} />
-            <CollapsibleWrapped open={false} />
-          </CollapsibleGroup>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="noSectionPadding">
-          <CollapsibleGroupWrapped noSectionPadding />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="lazyLoad">
-          <CollapsibleGroupWrapped lazyLoad />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="separated">
-          <CollapsibleGroupWrapped separated />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+      <StickerSheet.Row header="Open">
+        <CollapsibleGroupWrapped />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Closed">
+        <CollapsibleGroup>
+          <CollapsibleWrapped open={false} />
+          <CollapsibleWrapped open={false} />
+          <CollapsibleWrapped open={false} />
+        </CollapsibleGroup>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="noSectionPadding">
+        <CollapsibleGroupWrapped noSectionPadding />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="lazyLoad">
+        <CollapsibleGroupWrapped lazyLoad />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="separated">
+        <CollapsibleGroupWrapped separated />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

package/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.stickersheets.stories.tsx

@@ -31,14 +31,12 @@ const ExpertAdviceCollapsibleWrapped = (
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <StickerSheet>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Default">
-          <ExpertAdviceCollapsibleWrapped title="Collapsible" />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="lazyLoad">
-          <ExpertAdviceCollapsibleWrapped title="Lazy load" lazyLoad />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+      <StickerSheet.Row header="Default">
+        <ExpertAdviceCollapsibleWrapped title="Collapsible" />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="lazyLoad">
+        <ExpertAdviceCollapsibleWrapped title="Lazy load" lazyLoad />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }