@kaizen/components 1.68.1 → 1.68.3

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

@@ -92,105 +92,98 @@ const BlockControl = ({ labelText, ...props }: WrapperProps): JSX.Element => (
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={[
-          "Default",
-          "Default (disabled)",
-          "Prominent",
-          "Prominent (disabled)",
-        ]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Base">
-          <DefaultLabelWrapper reversed={isReversed} labelText="Label" />
-          <DefaultLabelWrapper
+    <StickerSheet
+      isReversed={isReversed}
+      headers={[
+        "Default",
+        "Default (disabled)",
+        "Prominent",
+        "Prominent (disabled)",
+      ]}
+    >
+      <StickerSheet.Row header="Base">
+        <DefaultLabelWrapper reversed={isReversed} labelText="Label" />
+        <DefaultLabelWrapper
+          reversed={isReversed}
+          labelText="Label"
+          disabled
+          data-sb-a11y-color-contrast-disable
+        />
+        <DefaultLabelWrapper
+          reversed={isReversed}
+          labelText="Label"
+          variant="prominent"
+        />
+        <DefaultLabelWrapper
+          reversed={isReversed}
+          labelText="Label"
+          variant="prominent"
+          disabled
+          data-sb-a11y-color-contrast-disable
+        />
+      </StickerSheet.Row>
+
+      {InlineLabelTypes.map(type => (
+        <StickerSheet.Row key={type} header={type}>
+          <InlineControl
+            reversed={isReversed}
+            labelText={type}
+            labelType={type}
+          />
+          <InlineControl
             reversed={isReversed}
-            labelText="Label"
+            labelText={type}
+            labelType={type}
             disabled
             data-sb-a11y-color-contrast-disable
           />
-          <DefaultLabelWrapper
+          <InlineControl
             reversed={isReversed}
-            labelText="Label"
+            labelText={type}
+            labelType={type}
             variant="prominent"
           />
-          <DefaultLabelWrapper
+          <InlineControl
             reversed={isReversed}
-            labelText="Label"
+            labelText={type}
+            labelType={type}
             variant="prominent"
             disabled
             data-sb-a11y-color-contrast-disable
           />
         </StickerSheet.Row>
-      </StickerSheet.Body>
+      ))}
 
-      <StickerSheet.Body>
-        {InlineLabelTypes.map(type => (
-          <StickerSheet.Row key={type} rowTitle={type}>
-            <InlineControl
-              reversed={isReversed}
-              labelText={type}
-              labelType={type}
-            />
-            <InlineControl
-              reversed={isReversed}
-              labelText={type}
-              labelType={type}
-              disabled
-              data-sb-a11y-color-contrast-disable
-            />
-            <InlineControl
-              reversed={isReversed}
-              labelText={type}
-              labelType={type}
-              variant="prominent"
-            />
-            <InlineControl
-              reversed={isReversed}
-              labelText={type}
-              labelType={type}
-              variant="prominent"
-              disabled
-              data-sb-a11y-color-contrast-disable
-            />
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
-
-      <StickerSheet.Body>
-        {BlockLabelTypes.map(type => (
-          <StickerSheet.Row key={type} rowTitle={type}>
-            <BlockControl
-              reversed={isReversed}
-              labelText={type}
-              labelType={type}
-            />
-            <BlockControl
-              reversed={isReversed}
-              labelText={type}
-              labelType={type}
-              disabled
-              data-sb-a11y-color-contrast-disable
-            />
-            <BlockControl
-              reversed={isReversed}
-              labelText={type}
-              labelType={type}
-              variant="prominent"
-            />
-            <BlockControl
-              reversed={isReversed}
-              labelText={type}
-              labelType={type}
-              variant="prominent"
-              disabled
-              data-sb-a11y-color-contrast-disable
-            />
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
+      {BlockLabelTypes.map(type => (
+        <StickerSheet.Row key={type} header={type}>
+          <BlockControl
+            reversed={isReversed}
+            labelText={type}
+            labelType={type}
+          />
+          <BlockControl
+            reversed={isReversed}
+            labelText={type}
+            labelType={type}
+            disabled
+            data-sb-a11y-color-contrast-disable
+          />
+          <BlockControl
+            reversed={isReversed}
+            labelText={type}
+            labelType={type}
+            variant="prominent"
+          />
+          <BlockControl
+            reversed={isReversed}
+            labelText={type}
+            labelType={type}
+            variant="prominent"
+            disabled
+            data-sb-a11y-color-contrast-disable
+          />
+        </StickerSheet.Row>
+      ))}
     </StickerSheet>
   ),
 }

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

@@ -17,11 +17,9 @@ export default {
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <StickerSheet>
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <LabelledMessage label="Label" message="Custom message here" />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+      <StickerSheet.Row>
+        <LabelledMessage label="Label" message="Custom message here" />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

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

@@ -4,7 +4,7 @@ import {
   StickerSheet,
   StickerSheetStory,
 } from "~storybook/components/StickerSheet"
-import { LikertScaleLegacy } from "../index"
+import { LikertScaleLegacy, LikertScaleProps } from "../index"
 import { Scale } from "../types"
 
 export default {
@@ -42,99 +42,99 @@ const scale: Scale = [
   },
 ]
 
-const StickerSheetTemplate: StickerSheetStory = {
+type Story = StickerSheetStory<{ colorSchema: LikertScaleProps["colorSchema"] }>
+
+const StickerSheetTemplate: Story = {
   render: ({ isReversed, colorSchema }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Not rated">
-          <LikertScaleLegacy
-            scale={scale}
-            labelId=""
-            selectedItem={scale[0]}
-            onSelect={(): void => undefined}
-            reversed={isReversed}
-            colorSchema={colorSchema}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Strongly disagree">
-          <LikertScaleLegacy
-            scale={scale}
-            labelId=""
-            selectedItem={scale[1]}
-            onSelect={(): void => undefined}
-            reversed={isReversed}
-            colorSchema={colorSchema}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Disagree">
-          <LikertScaleLegacy
-            scale={scale}
-            labelId=""
-            selectedItem={scale[2]}
-            onSelect={(): void => undefined}
-            reversed={isReversed}
-            colorSchema={colorSchema}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Neither agree or disagree">
-          <LikertScaleLegacy
-            scale={scale}
-            labelId=""
-            selectedItem={scale[3]}
-            onSelect={(): void => undefined}
-            reversed={isReversed}
-            colorSchema={colorSchema}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Agree">
-          <LikertScaleLegacy
-            scale={scale}
-            labelId=""
-            selectedItem={scale[4]}
-            onSelect={(): void => undefined}
-            reversed={isReversed}
-            colorSchema={colorSchema}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Strongly agree">
-          <LikertScaleLegacy
-            scale={scale}
-            labelId=""
-            selectedItem={scale[5]}
-            onSelect={(): void => undefined}
-            reversed={isReversed}
-            colorSchema={colorSchema}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Validation">
-          <LikertScaleLegacy
-            scale={scale}
-            labelId=""
-            selectedItem={scale[0]}
-            onSelect={(): void => undefined}
-            reversed={isReversed}
-            colorSchema={colorSchema}
-            validationMessage="Error message here"
-            status="error"
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet title="LikertScaleLegacy" isReversed={isReversed}>
+      <StickerSheet.Row header="Not rated">
+        <LikertScaleLegacy
+          scale={scale}
+          labelId=""
+          selectedItem={scale[0]}
+          onSelect={(): void => undefined}
+          reversed={isReversed}
+          colorSchema={colorSchema}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Strongly disagree">
+        <LikertScaleLegacy
+          scale={scale}
+          labelId=""
+          selectedItem={scale[1]}
+          onSelect={(): void => undefined}
+          reversed={isReversed}
+          colorSchema={colorSchema}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Disagree">
+        <LikertScaleLegacy
+          scale={scale}
+          labelId=""
+          selectedItem={scale[2]}
+          onSelect={(): void => undefined}
+          reversed={isReversed}
+          colorSchema={colorSchema}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Neither agree or disagree">
+        <LikertScaleLegacy
+          scale={scale}
+          labelId=""
+          selectedItem={scale[3]}
+          onSelect={(): void => undefined}
+          reversed={isReversed}
+          colorSchema={colorSchema}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Agree">
+        <LikertScaleLegacy
+          scale={scale}
+          labelId=""
+          selectedItem={scale[4]}
+          onSelect={(): void => undefined}
+          reversed={isReversed}
+          colorSchema={colorSchema}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Strongly agree">
+        <LikertScaleLegacy
+          scale={scale}
+          labelId=""
+          selectedItem={scale[5]}
+          onSelect={(): void => undefined}
+          reversed={isReversed}
+          colorSchema={colorSchema}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Validation">
+        <LikertScaleLegacy
+          scale={scale}
+          labelId=""
+          selectedItem={scale[0]}
+          onSelect={(): void => undefined}
+          reversed={isReversed}
+          colorSchema={colorSchema}
+          validationMessage="Error message here"
+          status="error"
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }
 
-export const StickerSheetDefault: StickerSheetStory = {
+export const StickerSheetDefault: Story = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Default - Classical)",
 }
 
-export const StickerBlueSheetDefault: StickerSheetStory = {
+export const StickerBlueSheetDefault: Story = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Blue)",
   args: { colorSchema: "blue" },
 }
 
-export const StickerSheetClassicalReversed: StickerSheetStory = {
+export const StickerSheetClassicalReversed: Story = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Classical Reversed)",
   parameters: {
@@ -143,7 +143,7 @@ export const StickerSheetClassicalReversed: StickerSheetStory = {
   args: { isReversed: true },
 }
 
-export const StickerSheetBlueReversed: StickerSheetStory = {
+export const StickerSheetBlueReversed: Story = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (Blue Reversed)",
   parameters: {
@@ -152,7 +152,7 @@ export const StickerSheetBlueReversed: StickerSheetStory = {
   args: { isReversed: true, colorSchema: "blue" },
 }
 
-export const StickerSheetRTL: StickerSheetStory = {
+export const StickerSheetRTL: Story = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",
   parameters: {

package/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stickersheet.stories.tsx

@@ -17,26 +17,24 @@ export default {
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Small">
-          <LoadingGraphic isReversed={isReversed} size="small" />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Medium">
-          <LoadingGraphic isReversed={isReversed} size="medium" />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Large">
-          <LoadingGraphic isReversed={isReversed} size="large" />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="X-large">
-          <LoadingGraphic isReversed={isReversed} size="xlarge" />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Xx-large">
-          <LoadingGraphic isReversed={isReversed} size="xxlarge" />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Scene">
-          <LoadingGraphic isReversed={isReversed} size="scene" />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+      <StickerSheet.Row header="Small">
+        <LoadingGraphic isReversed={isReversed} size="small" />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Medium">
+        <LoadingGraphic isReversed={isReversed} size="medium" />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Large">
+        <LoadingGraphic isReversed={isReversed} size="large" />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="X-large">
+        <LoadingGraphic isReversed={isReversed} size="xlarge" />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Xx-large">
+        <LoadingGraphic isReversed={isReversed} size="xxlarge" />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Scene">
+        <LoadingGraphic isReversed={isReversed} size="scene" />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

package/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx

@@ -41,58 +41,52 @@ export const Reversed: Story = {
 
 export const Size: Story = {
   render: () => (
-    <StickerSheet>
-      <StickerSheet.Header
-        headings={["Loading Skeleton", "Example"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Icon (small)">
-          <LoadingGraphic size="small" />
-          <Icon name="build" alt="Aliens approaching!" isFilled />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Avatar (medium)">
-          <LoadingGraphic size="medium" />
-          <Avatar
-            fullName="Jane Doe"
-            disableInitials={false}
-            isCurrentUser
-            size="medium"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Avatar (large)">
-          <LoadingGraphic size="large" />
-          <Avatar
-            fullName="Jane Doe"
-            disableInitials={false}
-            isCurrentUser
-            size="large"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Avatar (x-large)">
-          <LoadingGraphic size="xlarge" />
-          <Avatar
-            fullName="Jane Doe"
-            disableInitials={false}
-            isCurrentUser
-            size="xlarge"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Spot (xx-large)">
-          <LoadingGraphic size="xxlarge" />
-          <Informative
-            alt="informative-spot-image"
-            classNameOverride="!w-[150px]"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Scene (scene)">
-          <LoadingGraphic size="scene" />
-          <BrandMomentPositiveOutro
-            alt="positive-outro"
-            classNameOverride="!w-[400px]"
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet headers={["Loading Skeleton", "Example"]}>
+      <StickerSheet.Row header="Icon (small)">
+        <LoadingGraphic size="small" />
+        <Icon name="build" alt="Aliens approaching!" isFilled />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Avatar (medium)">
+        <LoadingGraphic size="medium" />
+        <Avatar
+          fullName="Jane Doe"
+          disableInitials={false}
+          isCurrentUser
+          size="medium"
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Avatar (large)">
+        <LoadingGraphic size="large" />
+        <Avatar
+          fullName="Jane Doe"
+          disableInitials={false}
+          isCurrentUser
+          size="large"
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Avatar (x-large)">
+        <LoadingGraphic size="xlarge" />
+        <Avatar
+          fullName="Jane Doe"
+          disableInitials={false}
+          isCurrentUser
+          size="xlarge"
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Spot (xx-large)">
+        <LoadingGraphic size="xxlarge" />
+        <Informative
+          alt="informative-spot-image"
+          classNameOverride="!w-[150px]"
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Scene (scene)">
+        <LoadingGraphic size="scene" />
+        <BrandMomentPositiveOutro
+          alt="positive-outro"
+          classNameOverride="!w-[400px]"
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

package/src/Loading/LoadingHeading/_docs/LoadingHeading.stickersheet.stories.tsx

@@ -27,25 +27,21 @@ const headingVariants = [
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        {headingVariants.map(variant => (
-          <StickerSheet.Row key={variant} rowTitle={variant}>
-            <StickerSheet.Cell className="w-320">
-              <LoadingHeading variant={variant} />
-            </StickerSheet.Cell>
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="isLink">
-          <LoadingHeading
-            width={100}
-            variant="heading-1"
-            isLink
-            isReversed={isReversed}
-          />
+      {headingVariants.map(variant => (
+        <StickerSheet.Row key={variant} header={variant}>
+          <StickerSheet.Cell className="w-320">
+            <LoadingHeading variant={variant} />
+          </StickerSheet.Cell>
         </StickerSheet.Row>
-      </StickerSheet.Body>
+      ))}
+      <StickerSheet.Row header="isLink">
+        <LoadingHeading
+          width={100}
+          variant="heading-1"
+          isLink
+          isReversed={isReversed}
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

package/src/Loading/LoadingHeading/_docs/LoadingHeading.stories.tsx

@@ -49,19 +49,13 @@ const headingVariants = [
 
 export const Variant: Story = {
   render: () => (
-    <StickerSheet>
-      <StickerSheet.Header
-        headings={["<LoadingHeading />", "<Heading />"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        {headingVariants.map(variant => (
-          <StickerSheet.Row key={variant} rowTitle={variant}>
-            <LoadingHeading variant={variant} />
-            <Heading variant={variant}>Heading</Heading>
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
+    <StickerSheet headers={["<LoadingHeading />", "<Heading />"]}>
+      {headingVariants.map(variant => (
+        <StickerSheet.Row key={variant} header={variant}>
+          <LoadingHeading variant={variant} />
+          <Heading variant={variant}>Heading</Heading>
+        </StickerSheet.Row>
+      ))}
     </StickerSheet>
   ),
 }