@kaizen/components 1.68.2 → 1.68.4

package/src/__actions__/Button/v1/Button/_docs/Button.stickersheet.stories.tsx

@@ -95,115 +95,85 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="Button" isReversed={isReversed}>
-          <StickerSheet.Header
-            headings={["Base", "Hover", "Active", "Focus", "Disabled"]}
-            headingsWidth="10rem"
-            hasVerticalHeadings
-            verticalHeadingsWidth="12rem"
-          />
-          <StickerSheet.Body>
-            {VARIANTS_PROPS.map(({ title, props }) => (
-              <StickerSheet.Row key={title} rowTitle={title}>
-                <Button reversed={isReversed} {...props} />
-                <Button
-                  reversed={isReversed}
-                  data-sb-pseudo-styles="hover"
-                  {...props}
-                />
-                <Button
-                  reversed={isReversed}
-                  data-sb-pseudo-styles="active"
-                  {...props}
-                />
-                <Button
-                  reversed={isReversed}
-                  data-sb-pseudo-styles="focus"
-                  {...props}
-                />
-                <Button reversed={isReversed} {...props} disabled />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+        <StickerSheet
+          isReversed={isReversed}
+          title="Button"
+          headers={["Base", "Hover", "Active", "Focus", "Disabled"]}
+        >
+          {VARIANTS_PROPS.map(({ title, props }) => (
+            <StickerSheet.Row key={title} header={title}>
+              <Button reversed={isReversed} {...props} />
+              <Button
+                reversed={isReversed}
+                data-sb-pseudo-styles="hover"
+                {...props}
+              />
+              <Button
+                reversed={isReversed}
+                data-sb-pseudo-styles="active"
+                {...props}
+              />
+              <Button
+                reversed={isReversed}
+                data-sb-pseudo-styles="focus"
+                {...props}
+              />
+              <Button reversed={isReversed} {...props} disabled />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
 
         <StickerSheet
           isReversed={isReversed}
-          heading="Size small (formerly form)"
+          title="Size small (formerly form)"
+          headers={["Base", "Hover", "Active", "Focus", "Disabled"]}
         >
-          <StickerSheet.Header
-            headings={["Base", "Hover", "Active", "Focus", "Disabled"]}
-            hasVerticalHeadings
-          />
-          <StickerSheet.Body>
-            {VARIANTS_PROPS.map(({ title, props }) => (
-              <StickerSheet.Row key={title} rowTitle={title}>
-                <Button reversed={isReversed} {...props} size="small" />
-                <Button
-                  reversed={isReversed}
-                  data-sb-pseudo-styles="hover"
-                  {...props}
-                  size="small"
-                />
-                <Button
-                  reversed={isReversed}
-                  data-sb-pseudo-styles="active"
-                  {...props}
-                  size="small"
-                />
-                <Button
-                  reversed={isReversed}
-                  data-sb-pseudo-styles="focus"
-                  {...props}
-                  size="small"
-                />
-                <Button
-                  reversed={isReversed}
-                  {...props}
-                  disabled
-                  size="small"
-                />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+          {VARIANTS_PROPS.map(({ title, props }) => (
+            <StickerSheet.Row key={title} header={title}>
+              <Button reversed={isReversed} {...props} size="small" />
+              <Button
+                reversed={isReversed}
+                data-sb-pseudo-styles="hover"
+                {...props}
+                size="small"
+              />
+              <Button
+                reversed={isReversed}
+                data-sb-pseudo-styles="active"
+                {...props}
+                size="small"
+              />
+              <Button
+                reversed={isReversed}
+                data-sb-pseudo-styles="focus"
+                {...props}
+                size="small"
+              />
+              <Button reversed={isReversed} {...props} disabled size="small" />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
 
-        <StickerSheet isReversed={isReversed} heading="With Icon / Badge">
-          <StickerSheet.Header
-            headings={[
-              "Icon Left",
-              "Icon Right",
-              "Icon Left with Badge",
-              "Icon Right with Badge",
-              "Badge Only",
-            ]}
-            headingsWidth="10rem"
-            hasVerticalHeadings
-            verticalHeadingsWidth="12rem"
-          />
-          <StickerSheet.Body>
-            {VARIANTS_PROPS.map(({ title, props }) => (
-              <StickerSheet.Row key={title} rowTitle={title}>
-                <Button reversed={isReversed} {...props} {...ICON_LEFT_PROPS} />
-                <Button
-                  reversed={isReversed}
-                  {...props}
-                  {...ICON_RIGHT_PROPS}
-                />
-                <Button
-                  reversed={isReversed}
-                  {...props}
-                  {...BADGE_LEFT_PROPS}
-                />
-                <Button
-                  reversed={isReversed}
-                  {...props}
-                  {...BADGE_RIGHT_PROPS}
-                />
-                <Button reversed={isReversed} {...props} {...BADGE_PROPS} />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+        <StickerSheet
+          isReversed={isReversed}
+          title="With Icon / Badge"
+          headers={[
+            "Icon Left",
+            "Icon Right",
+            "Icon Left with Badge",
+            "Icon Right with Badge",
+            "Badge Only",
+          ]}
+        >
+          {VARIANTS_PROPS.map(({ title, props }) => (
+            <StickerSheet.Row key={title} header={title}>
+              <Button reversed={isReversed} {...props} {...ICON_LEFT_PROPS} />
+              <Button reversed={isReversed} {...props} {...ICON_RIGHT_PROPS} />
+              <Button reversed={isReversed} {...props} {...BADGE_LEFT_PROPS} />
+              <Button reversed={isReversed} {...props} {...BADGE_RIGHT_PROPS} />
+              <Button reversed={isReversed} {...props} {...BADGE_PROPS} />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
       </>
     )
@@ -279,55 +249,46 @@ const WorkingStickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="Button" isReversed={isReversed}>
-          <StickerSheet.Header
-            headings={["Working", "Working (Focus)"]}
-            headingsWidth="10rem"
-            hasVerticalHeadings
-            verticalHeadingsWidth="12rem"
-          />
-          <StickerSheet.Body>
-            {VARIANTS_PROPS.map(({ title, props }) => (
-              <StickerSheet.Row key={title} rowTitle={title}>
-                <Button reversed={isReversed} {...props} {...WORKING_PROPS} />
-                <Button
-                  reversed={isReversed}
-                  data-sb-pseudo-styles="focus"
-                  {...props}
-                  {...WORKING_PROPS}
-                />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+        <StickerSheet
+          isReversed={isReversed}
+          title="Button"
+          headers={["Working", "Working (Focus)"]}
+        >
+          {VARIANTS_PROPS.map(({ title, props }) => (
+            <StickerSheet.Row key={title} header={title}>
+              <Button reversed={isReversed} {...props} {...WORKING_PROPS} />
+              <Button
+                reversed={isReversed}
+                data-sb-pseudo-styles="focus"
+                {...props}
+                {...WORKING_PROPS}
+              />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
 
         <StickerSheet
           isReversed={isReversed}
-          heading="Size small (formerly form)"
+          title="Size small (formerly form)"
+          headers={["Working", "Working Focus"]}
         >
-          <StickerSheet.Header
-            headings={["Working", "Working Focus"]}
-            hasVerticalHeadings
-          />
-          <StickerSheet.Body>
-            {VARIANTS_PROPS.map(({ title, props }) => (
-              <StickerSheet.Row key={title} rowTitle={title}>
-                <Button
-                  reversed={isReversed}
-                  {...props}
-                  size="small"
-                  {...WORKING_PROPS}
-                />
-                <Button
-                  reversed={isReversed}
-                  {...props}
-                  size="small"
-                  data-sb-pseudo-styles="focus"
-                  {...WORKING_PROPS}
-                />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+          {VARIANTS_PROPS.map(({ title, props }) => (
+            <StickerSheet.Row key={title} header={title}>
+              <Button
+                reversed={isReversed}
+                {...props}
+                size="small"
+                {...WORKING_PROPS}
+              />
+              <Button
+                reversed={isReversed}
+                {...props}
+                size="small"
+                data-sb-pseudo-styles="focus"
+                {...WORKING_PROPS}
+              />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
       </>
     )

package/src/__actions__/Button/v1/IconButton/_docs/IconButton.stickersheet.stories.tsx

@@ -79,35 +79,32 @@ const StickerSheetTemplate: StickerSheetStory = {
           },
         ]
     return (
-      <StickerSheet isReversed={isReversed}>
-        <StickerSheet.Header
-          headings={["Base", "Hover", "Active", "Focus", "Disabled", "Working"]}
-          hasVerticalHeadings
-        />
-        <StickerSheet.Body>
-          {VARIANTS_PROPS.map(({ title, props }) => (
-            <StickerSheet.Row key={title} rowTitle={title}>
-              <IconButton reversed={isReversed} {...props} />
-              <IconButton
-                reversed={isReversed}
-                data-sb-pseudo-styles="hover"
-                {...props}
-              />
-              <IconButton
-                reversed={isReversed}
-                data-sb-pseudo-styles="active"
-                {...props}
-              />
-              <IconButton
-                reversed={isReversed}
-                data-sb-pseudo-styles="focus"
-                {...props}
-              />
-              <IconButton reversed={isReversed} {...props} disabled />
-              <IconButton reversed={isReversed} {...props} {...WORKING_PROPS} />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+      <StickerSheet
+        isReversed={isReversed}
+        headers={["Base", "Hover", "Active", "Focus", "Disabled", "Working"]}
+      >
+        {VARIANTS_PROPS.map(({ title, props }) => (
+          <StickerSheet.Row key={title} header={title}>
+            <IconButton reversed={isReversed} {...props} />
+            <IconButton
+              reversed={isReversed}
+              data-sb-pseudo-styles="hover"
+              {...props}
+            />
+            <IconButton
+              reversed={isReversed}
+              data-sb-pseudo-styles="active"
+              {...props}
+            />
+            <IconButton
+              reversed={isReversed}
+              data-sb-pseudo-styles="focus"
+              {...props}
+            />
+            <IconButton reversed={isReversed} {...props} disabled />
+            <IconButton reversed={isReversed} {...props} {...WORKING_PROPS} />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
     )
   },

package/src/__actions__/Button/v3/_docs/Button.stickersheet.stories.tsx

@@ -19,178 +19,160 @@ export default {
 const variants = ["primary", "secondary", "tertiary"] satisfies ButtonVariants[]
 const sizes = ["small", "medium", "large"] satisfies ButtonSizes[]
 
-const RowTemplate = ({
-  isReversed = false,
-}: {
-  isReversed?: boolean
-}): JSX.Element => (
-  <>
-    {variants.map(variant =>
-      sizes.map(size => (
-        <StickerSheet.Row
-          key={size + variant}
-          isReversed={isReversed}
-          rowTitle={`${variant} (${size})`}
-        >
-          <Button variant={variant} size={size}>
-            Label
-          </Button>
-          <Button
-            icon={<Icon name="add" isPresentational />}
-            variant={variant}
-            size={size}
-          >
-            Label
-          </Button>
-          <Button
-            icon={
-              <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />
-            }
-            iconPosition="end"
-            variant={variant}
-            size={size}
-          >
-            Label
-          </Button>
-          <Button
-            icon={
-              <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />
-            }
-            iconPosition="end"
-            variant={variant}
-            isPending
-            pendingLabel="Submitting"
-            size={size}
-          >
-            Label
-          </Button>
-          <Button
-            icon={
-              <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />
-            }
-            iconPosition="end"
-            variant={variant}
-            isPending
-            pendingLabel="Submitting"
-            hasHiddenPendingLabel
-            size={size}
-          >
-            Label
-          </Button>
-          <Button
-            icon={
-              <Icon name="arrow_forward" shouldMirrorInRTL isPresentational />
-            }
-            iconPosition="end"
-            variant={variant}
-            size={size}
-            isDisabled
-          >
-            Label
-          </Button>
-        </StickerSheet.Row>
-      ))
-    )}
-  </>
-)
-
-const IconButtonRowTemplate = ({
-  isReversed = false,
-}: {
-  isReversed?: boolean
-}): JSX.Element => (
-  <>
-    {sizes.map(size => (
-      <StickerSheet.Row
-        isReversed={isReversed}
-        rowTitle={size}
-        key={size + variants}
-      >
-        {variants.map(variant => (
-          <span className="flex gap-8" key={variant}>
-            <Button
-              icon={<Icon name="delete" isPresentational />}
-              hasHiddenLabel
-              size={size}
-              variant={variant}
-            >
-              Label
-            </Button>
-            <Button
-              icon={<Icon name="delete" isPresentational />}
-              size={size}
-              isPending
-              hasHiddenLabel
-              pendingLabel="Submitting"
-              variant={variant}
-            >
-              Label
-            </Button>
-          </span>
-        ))}
-      </StickerSheet.Row>
-    ))}
-  </>
-)
-
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
-      <StickerSheet heading="Button" isReversed={isReversed}>
-        <StickerSheet.Header
-          headings={[
-            "Base",
-            "Icon start",
-            "Icon end",
-            "isPending",
-            "hasHiddenPendingLabel",
-            "isDisabled",
-          ]}
-          headingsWidth="10rem"
-          hasVerticalHeadings
-          verticalHeadingsWidth="12rem"
-        />
-        <StickerSheet.Body>
-          <RowTemplate isReversed={isReversed} />
-        </StickerSheet.Body>
-      </StickerSheet>
-      <StickerSheet heading="Icon only button" isReversed={isReversed}>
-        <StickerSheet.Header
-          headings={["primary", "secondary", "tertiary"]}
-          headingsWidth="10rem"
-          hasVerticalHeadings
-          verticalHeadingsWidth="12rem"
-        />
-        <StickerSheet.Body>
-          <IconButtonRowTemplate isReversed={isReversed} />
-        </StickerSheet.Body>
-      </StickerSheet>
-      <StickerSheet heading="Pseudo states" isReversed={isReversed}>
-        <StickerSheet.Header
-          headings={["isHovered", "isFocusVisible", "isPressed"]}
-          headingsWidth="10rem"
-          hasVerticalHeadings
-          verticalHeadingsWidth="12rem"
-        />
-        <StickerSheet.Body>
-          {variants.map(variant => (
+      <StickerSheet
+        title="Button"
+        isReversed={isReversed}
+        headers={[
+          "Base",
+          "Icon start",
+          "Icon end",
+          "isPending",
+          "hasHiddenPendingLabel",
+          "isDisabled",
+        ]}
+      >
+        {variants.map(variant =>
+          sizes.map(size => (
             <StickerSheet.Row
-              key={variant}
+              key={size + variant}
               isReversed={isReversed}
-              rowTitle={variant}
+              header={`${variant} (${size})`}
             >
-              <Button data-testid="testid__button-hover" variant={variant}>
+              <Button variant={variant} size={size}>
+                Label
+              </Button>
+              <Button
+                icon={<Icon name="add" isPresentational />}
+                variant={variant}
+                size={size}
+              >
                 Label
               </Button>
-              <Button data-testid="testid__button-focus" variant={variant}>
+              <Button
+                icon={
+                  <Icon
+                    name="arrow_forward"
+                    shouldMirrorInRTL
+                    isPresentational
+                  />
+                }
+                iconPosition="end"
+                variant={variant}
+                size={size}
+              >
                 Label
               </Button>
-              <Button data-testid="testid__button-pressed" variant={variant}>
+              <Button
+                icon={
+                  <Icon
+                    name="arrow_forward"
+                    shouldMirrorInRTL
+                    isPresentational
+                  />
+                }
+                iconPosition="end"
+                variant={variant}
+                isPending
+                pendingLabel="Submitting"
+                size={size}
+              >
+                Label
+              </Button>
+              <Button
+                icon={
+                  <Icon
+                    name="arrow_forward"
+                    shouldMirrorInRTL
+                    isPresentational
+                  />
+                }
+                iconPosition="end"
+                variant={variant}
+                isPending
+                pendingLabel="Submitting"
+                hasHiddenPendingLabel
+                size={size}
+              >
+                Label
+              </Button>
+              <Button
+                icon={
+                  <Icon
+                    name="arrow_forward"
+                    shouldMirrorInRTL
+                    isPresentational
+                  />
+                }
+                iconPosition="end"
+                variant={variant}
+                size={size}
+                isDisabled
+              >
                 Label
               </Button>
             </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+          ))
+        )}
+      </StickerSheet>
+
+      <StickerSheet
+        title="Icon only button"
+        isReversed={isReversed}
+        headers={["primary", "secondary", "tertiary"]}
+      >
+        {sizes.map(size => (
+          <StickerSheet.Row isReversed={isReversed} header={size} key={size}>
+            {variants.map(variant => (
+              <span className="flex gap-8" key={variant}>
+                <Button
+                  icon={<Icon name="delete" isPresentational />}
+                  hasHiddenLabel
+                  size={size}
+                  variant={variant}
+                >
+                  Label
+                </Button>
+                <Button
+                  icon={<Icon name="delete" isPresentational />}
+                  size={size}
+                  isPending
+                  hasHiddenLabel
+                  pendingLabel="Submitting"
+                  variant={variant}
+                >
+                  Label
+                </Button>
+              </span>
+            ))}
+          </StickerSheet.Row>
+        ))}
+      </StickerSheet>
+
+      <StickerSheet
+        title="Pseudo states"
+        isReversed={isReversed}
+        headers={["isHovered", "isFocusVisible", "isPressed"]}
+      >
+        {variants.map(variant => (
+          <StickerSheet.Row
+            key={variant}
+            isReversed={isReversed}
+            header={variant}
+          >
+            <Button data-testid="testid__button-hover" variant={variant}>
+              Label
+            </Button>
+            <Button data-testid="testid__button-focus" variant={variant}>
+              Label
+            </Button>
+            <Button data-testid="testid__button-pressed" variant={variant}>
+              Label
+            </Button>
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
     </>
   ),