@kaizen/components 1.68.2 → 1.68.3

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

@@ -35,76 +35,70 @@ const ROWS_MAP = [
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
-      <StickerSheet isReversed={isReversed} heading="Split Button">
-        <StickerSheet.Header
-          headings={["Base", "Disabled"]}
-          hasVerticalHeadings
-          verticalHeadingsWidth="10rem"
-        />
-        <StickerSheet.Body>
-          {ROWS_MAP.map(({ rowTitle, ...props }) => (
-            <StickerSheet.Row key={rowTitle} rowTitle={rowTitle}>
-              <SplitButton isReversed={isReversed} {...props} />
-              <SplitButton isReversed={isReversed} disabled {...props} />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+      <StickerSheet
+        isReversed={isReversed}
+        title="Split Button"
+        headers={["Base", "Disabled"]}
+      >
+        {ROWS_MAP.map(({ rowTitle, ...props }) => (
+          <StickerSheet.Row key={rowTitle} header={rowTitle}>
+            <SplitButton isReversed={isReversed} {...props} />
+            <SplitButton isReversed={isReversed} disabled {...props} />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
 
-      <StickerSheet isReversed={isReversed} heading="Pseudo states">
-        <StickerSheet.Header
-          headings={["Hover", "Active", "Focus"]}
-          hasVerticalHeadings
-          verticalHeadingsWidth="10rem"
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row rowTitle="Action button">
-            <SplitButton
-              isReversed={isReversed}
-              actionButtonProps={{
-                ...exampleActionButtonPropsButton,
-                "data-sb-pseudo-styles": "hover",
-              }}
-              dropdownContent={exampleDropdownContentEnabled}
-            />
-            <SplitButton
-              isReversed={isReversed}
-              actionButtonProps={{
-                ...exampleActionButtonPropsButton,
-                "data-sb-pseudo-styles": "active",
-              }}
-              dropdownContent={exampleDropdownContentEnabled}
-            />
-            <SplitButton
-              isReversed={isReversed}
-              actionButtonProps={{
-                ...exampleActionButtonPropsButton,
-                "data-sb-pseudo-styles": "focus",
-              }}
-              dropdownContent={exampleDropdownContentEnabled}
-            />
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Dropdown button">
-            <SplitButton
-              isReversed={isReversed}
-              actionButtonProps={exampleActionButtonPropsButton}
-              dropdownContent={exampleDropdownContentEnabled}
-              dropdownButtonProps={{ "data-sb-pseudo-styles": "hover" }}
-            />
-            <SplitButton
-              isReversed={isReversed}
-              actionButtonProps={exampleActionButtonPropsButton}
-              dropdownContent={exampleDropdownContentEnabled}
-              dropdownButtonProps={{ "data-sb-pseudo-styles": "active" }}
-            />
-            <SplitButton
-              isReversed={isReversed}
-              actionButtonProps={exampleActionButtonPropsButton}
-              dropdownContent={exampleDropdownContentEnabled}
-              dropdownButtonProps={{ "data-sb-pseudo-styles": "focus" }}
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        isReversed={isReversed}
+        title="Pseudo states"
+        headers={["Hover", "Active", "Focus"]}
+      >
+        <StickerSheet.Row header="Action button">
+          <SplitButton
+            isReversed={isReversed}
+            actionButtonProps={{
+              ...exampleActionButtonPropsButton,
+              "data-sb-pseudo-styles": "hover",
+            }}
+            dropdownContent={exampleDropdownContentEnabled}
+          />
+          <SplitButton
+            isReversed={isReversed}
+            actionButtonProps={{
+              ...exampleActionButtonPropsButton,
+              "data-sb-pseudo-styles": "active",
+            }}
+            dropdownContent={exampleDropdownContentEnabled}
+          />
+          <SplitButton
+            isReversed={isReversed}
+            actionButtonProps={{
+              ...exampleActionButtonPropsButton,
+              "data-sb-pseudo-styles": "focus",
+            }}
+            dropdownContent={exampleDropdownContentEnabled}
+          />
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Dropdown button">
+          <SplitButton
+            isReversed={isReversed}
+            actionButtonProps={exampleActionButtonPropsButton}
+            dropdownContent={exampleDropdownContentEnabled}
+            dropdownButtonProps={{ "data-sb-pseudo-styles": "hover" }}
+          />
+          <SplitButton
+            isReversed={isReversed}
+            actionButtonProps={exampleActionButtonPropsButton}
+            dropdownContent={exampleDropdownContentEnabled}
+            dropdownButtonProps={{ "data-sb-pseudo-styles": "active" }}
+          />
+          <SplitButton
+            isReversed={isReversed}
+            actionButtonProps={exampleActionButtonPropsButton}
+            dropdownContent={exampleDropdownContentEnabled}
+            dropdownButtonProps={{ "data-sb-pseudo-styles": "focus" }}
+          />
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),

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

@@ -30,64 +30,56 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Default", "Dismissable"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        {TagVariants.map(variant => (
-          <StickerSheet.Row key={variant} rowTitle={variant}>
-            <>
-              <Tag variant={variant}>Tag</Tag>
-              <Tag variant={variant} size="small">
-                Small
-              </Tag>
-            </>
-            <>
-              <Tag variant={variant} dismissible={variant !== "statusLive"}>
-                Tag
-              </Tag>
-              <Tag
-                variant={variant}
-                size="small"
-                dismissible={variant !== "statusLive"}
-              >
-                Small
-              </Tag>
-            </>
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Avatar">
-          <Tag
-            variant="profile"
-            avatar={
-              <Avatar
-                size="small"
-                avatarSrc="https://www.cultureampcom-preview-1.usw2.wp-dev-us.cultureamp-cdn.com/assets/slices/main/assets/public/media/chapters-card-1@2x.05e547444387f29f14df0b82634bf2b6.png"
-                fullName="Jane Doe"
-              />
-            }
-          >
-            Jane Doe
-          </Tag>
-          <Tag
-            variant="profile"
-            avatar={
-              <Avatar
-                size="small"
-                avatarSrc="https://www.cultureampcom-preview-1.usw2.wp-dev-us.cultureamp-cdn.com/assets/slices/main/assets/public/media/chapters-card-1@2x.05e547444387f29f14df0b82634bf2b6.png"
-                fullName="Jane Doe"
-              />
-            }
-            dismissible
-          >
-            Jane Doe
-          </Tag>
+    <StickerSheet isReversed={isReversed} headers={["Default", "Dismissable"]}>
+      {TagVariants.map(variant => (
+        <StickerSheet.Row key={variant} header={variant}>
+          <>
+            <Tag variant={variant}>Tag</Tag>
+            <Tag variant={variant} size="small">
+              Small
+            </Tag>
+          </>
+          <>
+            <Tag variant={variant} dismissible={variant !== "statusLive"}>
+              Tag
+            </Tag>
+            <Tag
+              variant={variant}
+              size="small"
+              dismissible={variant !== "statusLive"}
+            >
+              Small
+            </Tag>
+          </>
         </StickerSheet.Row>
-      </StickerSheet.Body>
+      ))}
+      <StickerSheet.Row header="Avatar">
+        <Tag
+          variant="profile"
+          avatar={
+            <Avatar
+              size="small"
+              avatarSrc="https://www.cultureampcom-preview-1.usw2.wp-dev-us.cultureamp-cdn.com/assets/slices/main/assets/public/media/chapters-card-1@2x.05e547444387f29f14df0b82634bf2b6.png"
+              fullName="Jane Doe"
+            />
+          }
+        >
+          Jane Doe
+        </Tag>
+        <Tag
+          variant="profile"
+          avatar={
+            <Avatar
+              size="small"
+              avatarSrc="https://www.cultureampcom-preview-1.usw2.wp-dev-us.cultureamp-cdn.com/assets/slices/main/assets/public/media/chapters-card-1@2x.05e547444387f29f14df0b82634bf2b6.png"
+              fullName="Jane Doe"
+            />
+          }
+          dismissible
+        >
+          Jane Doe
+        </Tag>
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

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

@@ -19,62 +19,58 @@ const StickerSheetTemplate: StickerSheetStory = {
     const fontColour = isReversed ? "white" : "dark"
 
     return (
-      <>
-        <StickerSheet isReversed={isReversed}>
-          <StickerSheet.Body>
-            <StickerSheet.Row rowTitle="Intro Lede">
-              <Text variant="intro-lede" color={fontColour}>
+      <StickerSheet title="Text" isReversed={isReversed}>
+        <StickerSheet.Row header="Intro Lede">
+          <Text variant="intro-lede" color={fontColour}>
+            The quick brown fox jumps over the lazy dog.
+          </Text>
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Body">
+          <Text variant="body" color={fontColour}>
+            The quick brown fox jumps over the lazy dog.
+          </Text>
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Body strong">
+          <Text variant="body" color={fontColour}>
+            <strong>The quick brown fox jumps over the lazy dog.</strong>
+          </Text>
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Small">
+          <Text variant="small" color={fontColour}>
+            The quick brown fox jumps over the lazy dog.
+          </Text>
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Extra small">
+          <Text variant="extra-small" color={fontColour}>
+            The quick brown fox jumps over the lazy dog.
+          </Text>
+        </StickerSheet.Row>
+        {!isReversed ? (
+          <>
+            <StickerSheet.Row header="Dark Reduced Opacity">
+              <Text variant="intro-lede" color="dark-reduced-opacity">
                 The quick brown fox jumps over the lazy dog.
               </Text>
             </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Body">
-              <Text variant="body" color={fontColour}>
+            <StickerSheet.Row header="Positive">
+              <Text variant="intro-lede" color="positive">
                 The quick brown fox jumps over the lazy dog.
               </Text>
             </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Body strong">
-              <Text variant="body" color={fontColour}>
-                <strong>The quick brown fox jumps over the lazy dog.</strong>
-              </Text>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Small">
-              <Text variant="small" color={fontColour}>
-                The quick brown fox jumps over the lazy dog.
-              </Text>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Extra small">
-              <Text variant="extra-small" color={fontColour}>
+            <StickerSheet.Row header="Negative">
+              <Text variant="intro-lede" color="negative">
                 The quick brown fox jumps over the lazy dog.
               </Text>
             </StickerSheet.Row>
-            {!isReversed ? (
-              <>
-                <StickerSheet.Row rowTitle="Dark Reduced Opacity">
-                  <Text variant="intro-lede" color="dark-reduced-opacity">
-                    The quick brown fox jumps over the lazy dog.
-                  </Text>
-                </StickerSheet.Row>
-                <StickerSheet.Row rowTitle="Positive">
-                  <Text variant="intro-lede" color="positive">
-                    The quick brown fox jumps over the lazy dog.
-                  </Text>
-                </StickerSheet.Row>
-                <StickerSheet.Row rowTitle="Negative">
-                  <Text variant="intro-lede" color="negative">
-                    The quick brown fox jumps over the lazy dog.
-                  </Text>
-                </StickerSheet.Row>
-              </>
-            ) : (
-              <StickerSheet.Row rowTitle="White Reduced Opacity">
-                <Text variant="intro-lede" color="white-reduced-opacity">
-                  The quick brown fox jumps over the lazy dog.
-                </Text>
-              </StickerSheet.Row>
-            )}
-          </StickerSheet.Body>
-        </StickerSheet>
-      </>
+          </>
+        ) : (
+          <StickerSheet.Row header="White Reduced Opacity">
+            <Text variant="intro-lede" color="white-reduced-opacity">
+              The quick brown fox jumps over the lazy dog.
+            </Text>
+          </StickerSheet.Row>
+        )}
+      </StickerSheet>
     )
   },
 }

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

@@ -27,37 +27,34 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Enabled">
-          <TextArea reversed={isReversed} />
-          <TextArea reversed={isReversed} data-sb-pseudo-styles="hover" />
-          <TextArea reversed={isReversed} data-sb-pseudo-styles="active" />
-          <TextArea reversed={isReversed} data-sb-pseudo-styles="focus" />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Disabled">
-          <TextArea reversed={isReversed} disabled />
-          <TextArea
-            reversed={isReversed}
-            disabled
-            data-sb-pseudo-styles="hover"
-          />
-          <TextArea
-            reversed={isReversed}
-            disabled
-            data-sb-pseudo-styles="active"
-          />
-          <TextArea
-            reversed={isReversed}
-            disabled
-            data-sb-pseudo-styles="focus"
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Default", "Hover", "Active", "Focus"]}
+    >
+      <StickerSheet.Row header="Enabled">
+        <TextArea reversed={isReversed} />
+        <TextArea reversed={isReversed} data-sb-pseudo-styles="hover" />
+        <TextArea reversed={isReversed} data-sb-pseudo-styles="active" />
+        <TextArea reversed={isReversed} data-sb-pseudo-styles="focus" />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Disabled">
+        <TextArea reversed={isReversed} disabled />
+        <TextArea
+          reversed={isReversed}
+          disabled
+          data-sb-pseudo-styles="hover"
+        />
+        <TextArea
+          reversed={isReversed}
+          disabled
+          data-sb-pseudo-styles="active"
+        />
+        <TextArea
+          reversed={isReversed}
+          disabled
+          data-sb-pseudo-styles="focus"
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   parameters: {

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

@@ -1,6 +1,5 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { Heading } from "~components/Heading"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -15,96 +14,79 @@ export default {
   },
 } satisfies Meta
 
-const TAFieldStatus = ["default", "error", "caution"] as const
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => {
+    const defaultProps = {
+      labelText: "Label",
+      description: "A short description",
+      reversed: isReversed,
+    } satisfies TextAreaFieldProps
 
-const TAFieldStatusGroup = ({
-  isReversed,
-  ...props
-}: Omit<TextAreaFieldProps, "labelText"> & {
-  isReversed?: boolean
-}): JSX.Element => (
-  <>
-    {TAFieldStatus.map(status => (
-      <StickerSheet.Row key={status} rowTitle={status} isReversed={isReversed}>
-        <TextAreaField
-          labelText={`Variant: ${props.variant}`}
-          reversed={isReversed}
-          status={status}
-          validationMessage="A valid question"
-          description="A short description"
-          {...props}
-        />
-        <TextAreaField
-          labelText={`Variant: ${props.variant}`}
-          reversed={isReversed}
-          status={status}
-          validationMessage="A valid question"
-          description="A short description"
-          data-sb-pseudo-styles="hover"
-          {...props}
-        />
-        <TextAreaField
-          labelText={`Variant: ${props.variant}`}
-          reversed={isReversed}
-          status={status}
-          validationMessage="A valid question"
-          description="A short description"
-          data-sb-pseudo-styles="active"
-          {...props}
-        />
-        <TextAreaField
-          labelText={`Variant: ${props.variant}`}
-          reversed={isReversed}
-          status={status}
-          validationMessage="A valid question"
-          description="A short description"
-          data-sb-pseudo-styles="focus"
-          {...props}
-        />
-      </StickerSheet.Row>
-    ))}
-  </>
-)
+    const variants = ["default", "prominent"] as const
 
-const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
-    <>
-      <Heading variant="heading-2" color={isReversed ? "white" : "dark"}>
-        Enabled
-      </Heading>
-      <StickerSheet isReversed={isReversed}>
-        <StickerSheet.Header
-          headings={["Default", "Hover", "Active", "Focus"]}
-          hasVerticalHeadings
-        />
-        <StickerSheet.Body>
-          <TAFieldStatusGroup isReversed={isReversed} variant="default" />
-          <TAFieldStatusGroup isReversed={isReversed} variant="prominent" />
-        </StickerSheet.Body>
-      </StickerSheet>
-      <Heading variant="heading-2" color={isReversed ? "white" : "dark"}>
-        Disabled
-      </Heading>
-      <StickerSheet isReversed={isReversed}>
-        <StickerSheet.Header
-          headings={["Default", "Hover", "Active", "Focus"]}
-          hasVerticalHeadings
-        />
-        <StickerSheet.Body>
-          <TAFieldStatusGroup
-            isReversed={isReversed}
-            disabled
-            variant="default"
-          />
-          <TAFieldStatusGroup
-            isReversed={isReversed}
-            disabled
-            variant="prominent"
-          />
-        </StickerSheet.Body>
-      </StickerSheet>
-    </>
-  ),
+    return (
+      <>
+        <StickerSheet
+          title="TextAreaField"
+          isReversed={isReversed}
+          headers={["Default", "Hover", "Active", "Focus", "Disabled"]}
+        >
+          {variants.map(variant => (
+            <StickerSheet.Row
+              key={variant}
+              header={variant}
+              isReversed={isReversed}
+            >
+              <TextAreaField {...defaultProps} variant={variant} />
+              <TextAreaField
+                {...defaultProps}
+                variant={variant}
+                data-sb-pseudo-styles="hover"
+              />
+              <TextAreaField
+                {...defaultProps}
+                variant={variant}
+                data-sb-pseudo-styles="active"
+              />
+              <TextAreaField
+                {...defaultProps}
+                variant={variant}
+                data-sb-pseudo-styles="focus"
+              />
+              <TextAreaField {...defaultProps} variant={variant} disabled />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet>
+
+        <StickerSheet
+          title="Validation"
+          isReversed={isReversed}
+          headers={["Error", "Caution"]}
+        >
+          {variants.map(variant => (
+            <StickerSheet.Row
+              key={variant}
+              header={variant}
+              isReversed={isReversed}
+            >
+              <TextAreaField
+                {...defaultProps}
+                variant={variant}
+                status="error"
+                validationMessage="A valid question"
+              />
+              <TextAreaField
+                {...defaultProps}
+                variant={variant}
+                status="caution"
+                validationMessage="A valid question"
+              />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet>
+      </>
+    )
+  },
   parameters: {
     pseudo: {
       hover: '[data-sb-pseudo-styles="hover"]',