@kaizen/components 1.68.1 → 1.68.3

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

@@ -16,52 +16,48 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
-    <>
-      <StickerSheet heading="Button Group">
-        <StickerSheet.Header
-          headings={["Default", "Hover", "Focus", "Focus visible"]}
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <RemovableTag
-              removeButtonProps={{
-                ariaLabel: "Remove tag",
-                onClick: () => alert("clicked"),
-              }}
-            >
-              My tag
-            </RemovableTag>
-            <RemovableTag
-              data-sb-pseudo-styles="hover"
-              removeButtonProps={{
-                ariaLabel: "Remove tag",
-                onClick: () => alert("clicked"),
-              }}
-            >
-              My tag
-            </RemovableTag>
-            <RemovableTag
-              data-sb-pseudo-styles="focus"
-              removeButtonProps={{
-                ariaLabel: "Remove tag",
-                onClick: () => alert("clicked"),
-              }}
-            >
-              My tag
-            </RemovableTag>
-            <RemovableTag
-              data-sb-pseudo-styles="focus-visible"
-              removeButtonProps={{
-                ariaLabel: "Remove tag",
-                onClick: () => alert("clicked"),
-              }}
-            >
-              My tag
-            </RemovableTag>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
-      </StickerSheet>
-    </>
+    <StickerSheet
+      title="RemovableTag"
+      headers={["Default", "Hover", "Focus", "Focus visible"]}
+    >
+      <StickerSheet.Row>
+        <RemovableTag
+          removeButtonProps={{
+            ariaLabel: "Remove tag",
+            onClick: () => alert("clicked"),
+          }}
+        >
+          My tag
+        </RemovableTag>
+        <RemovableTag
+          data-sb-pseudo-styles="hover"
+          removeButtonProps={{
+            ariaLabel: "Remove tag",
+            onClick: () => alert("clicked"),
+          }}
+        >
+          My tag
+        </RemovableTag>
+        <RemovableTag
+          data-sb-pseudo-styles="focus"
+          removeButtonProps={{
+            ariaLabel: "Remove tag",
+            onClick: () => alert("clicked"),
+          }}
+        >
+          My tag
+        </RemovableTag>
+        <RemovableTag
+          data-sb-pseudo-styles="focus-visible"
+          removeButtonProps={{
+            ariaLabel: "Remove tag",
+            onClick: () => alert("clicked"),
+          }}
+        >
+          My tag
+        </RemovableTag>
+      </StickerSheet.Row>
+    </StickerSheet>
   ),
   parameters: {
     pseudo: {

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

@@ -18,23 +18,20 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
-    <StickerSheet heading="Tag">
-      <StickerSheet.Header headings={["Label Only", "Icon"]} />
-      <StickerSheet.Body>
-        {TagColorKeys.map(color => (
-          <StickerSheet.Row key={color}>
-            <Tag color={color}>
-              {color.charAt(0).toUpperCase() + color.slice(1)}
-            </Tag>
-            <Tag
-              icon={<Icon name="label" isPresentational isFilled />}
-              color={color}
-            >
-              {color.charAt(0).toUpperCase() + color.slice(1)}
-            </Tag>
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
+    <StickerSheet title="Tag" headers={["Label Only", "Icon"]}>
+      {TagColorKeys.map(color => (
+        <StickerSheet.Row key={color}>
+          <Tag color={color}>
+            {color.charAt(0).toUpperCase() + color.slice(1)}
+          </Tag>
+          <Tag
+            icon={<Icon name="label" isPresentational isFilled />}
+            color={color}
+          >
+            {color.charAt(0).toUpperCase() + color.slice(1)}
+          </Tag>
+        </StickerSheet.Row>
+      ))}
     </StickerSheet>
   ),
 }

package/src/__overlays__/Tooltip/v1/_docs/Tooltip.stickersheet.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Decorator, Meta } from "@storybook/react"
+import { Meta } from "@storybook/react"
 import isChromatic from "chromatic/isChromatic"
 import { IconButton } from "~components/__actions__/v2"
 import { Icon } from "~components/__future__/Icon"
@@ -9,10 +9,7 @@ import {
 } from "~storybook/components/StickerSheet"
 import { Tooltip } from "../index"
 
-const openTooltipInChromatic: Decorator = (Story, { args }) => {
-  if (isChromatic()) args.isInitiallyVisible = true
-  return <Story />
-}
+const IS_CHROMATIC = isChromatic()
 
 export default {
   title: "Overlays/Tooltip/v1",
@@ -20,7 +17,9 @@ export default {
     chromatic: { disable: false },
     controls: { disable: true },
   },
-  decorators: [openTooltipInChromatic],
+  args: {
+    isInitiallyVisible: IS_CHROMATIC,
+  },
 } satisfies Meta
 
 const cellStyle = {
@@ -30,104 +29,103 @@ const cellStyle = {
 const StickerSheetTemplate: StickerSheetStory = {
   render: props => (
     <div style={{ padding: "50px 100px" }}>
-      <StickerSheet heading="Positions">
-        <StickerSheet.Header headings={["Top", "Bottom", "Left", "Right"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <StickerSheet.Cell style={cellStyle}>
-              <Tooltip {...props} position="above" text="Tooltip label">
-                <IconButton
-                  label="Label"
-                  icon={<Icon name="more_horiz" isPresentational />}
-                />
-              </Tooltip>
-            </StickerSheet.Cell>
-            <StickerSheet.Cell style={cellStyle}>
-              <Tooltip {...props} position="below" text="Tooltip label">
-                <IconButton
-                  label="Label"
-                  icon={<Icon name="more_horiz" isPresentational />}
-                />
-              </Tooltip>
-            </StickerSheet.Cell>
-            <StickerSheet.Cell style={cellStyle}>
-              <Tooltip {...props} position="left" text="Tooltip label">
-                <IconButton
-                  label="Label"
-                  icon={<Icon name="more_horiz" isPresentational />}
-                />
-              </Tooltip>
-            </StickerSheet.Cell>
-            <StickerSheet.Cell style={cellStyle}>
-              <Tooltip
-                {...props}
-                position="right"
-                text="Tooltip label"
-                mood="default"
-              >
-                <IconButton
-                  label="Label"
-                  icon={<Icon name="more_horiz" isPresentational />}
-                />
-              </Tooltip>
-            </StickerSheet.Cell>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        title="Positions"
+        headers={["Top", "Bottom", "Left", "Right"]}
+      >
+        <StickerSheet.Row>
+          <StickerSheet.Cell style={cellStyle}>
+            <Tooltip {...props} position="above" text="Tooltip label">
+              <IconButton
+                label="Label"
+                icon={<Icon name="more_horiz" isPresentational />}
+              />
+            </Tooltip>
+          </StickerSheet.Cell>
+          <StickerSheet.Cell style={cellStyle}>
+            <Tooltip {...props} position="below" text="Tooltip label">
+              <IconButton
+                label="Label"
+                icon={<Icon name="more_horiz" isPresentational />}
+              />
+            </Tooltip>
+          </StickerSheet.Cell>
+          <StickerSheet.Cell style={cellStyle}>
+            <Tooltip {...props} position="left" text="Tooltip label">
+              <IconButton
+                label="Label"
+                icon={<Icon name="more_horiz" isPresentational />}
+              />
+            </Tooltip>
+          </StickerSheet.Cell>
+          <StickerSheet.Cell style={cellStyle}>
+            <Tooltip
+              {...props}
+              position="right"
+              text="Tooltip label"
+              mood="default"
+            >
+              <IconButton
+                label="Label"
+                icon={<Icon name="more_horiz" isPresentational />}
+              />
+            </Tooltip>
+          </StickerSheet.Cell>
+        </StickerSheet.Row>
       </StickerSheet>
-      <StickerSheet heading="Moods">
-        <StickerSheet.Header
-          headings={[
-            "Default",
-            "Informative",
-            "Positive",
-            "Highlight",
-            "Cautionary",
-          ]}
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <StickerSheet.Cell style={cellStyle}>
-              <Tooltip {...props} text="Tooltip label" mood="default">
-                <IconButton
-                  label="Label"
-                  icon={<Icon name="more_horiz" isPresentational />}
-                />
-              </Tooltip>
-            </StickerSheet.Cell>
-            <StickerSheet.Cell style={cellStyle}>
-              <Tooltip {...props} text="Tooltip label" mood="informative">
-                <IconButton
-                  label="Label"
-                  icon={<Icon name="more_horiz" isPresentational />}
-                />
-              </Tooltip>
-            </StickerSheet.Cell>
-            <StickerSheet.Cell style={cellStyle}>
-              <Tooltip {...props} text="Tooltip label" mood="positive">
-                <IconButton
-                  label="Label"
-                  icon={<Icon name="more_horiz" isPresentational />}
-                />
-              </Tooltip>
-            </StickerSheet.Cell>
-            <StickerSheet.Cell style={cellStyle}>
-              <Tooltip {...props} text="Tooltip label" mood="highlight">
-                <IconButton
-                  label="Label"
-                  icon={<Icon name="more_horiz" isPresentational />}
-                />
-              </Tooltip>
-            </StickerSheet.Cell>
-            <StickerSheet.Cell style={cellStyle}>
-              <Tooltip {...props} text="Tooltip label" mood="cautionary">
-                <IconButton
-                  label="Label"
-                  icon={<Icon name="more_horiz" isPresentational />}
-                />
-              </Tooltip>
-            </StickerSheet.Cell>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+
+      <StickerSheet
+        title="Moods"
+        headers={[
+          "Default",
+          "Informative",
+          "Positive",
+          "Highlight",
+          "Cautionary",
+        ]}
+      >
+        <StickerSheet.Row>
+          <StickerSheet.Cell style={cellStyle}>
+            <Tooltip {...props} text="Tooltip label" mood="default">
+              <IconButton
+                label="Label"
+                icon={<Icon name="more_horiz" isPresentational />}
+              />
+            </Tooltip>
+          </StickerSheet.Cell>
+          <StickerSheet.Cell style={cellStyle}>
+            <Tooltip {...props} text="Tooltip label" mood="informative">
+              <IconButton
+                label="Label"
+                icon={<Icon name="more_horiz" isPresentational />}
+              />
+            </Tooltip>
+          </StickerSheet.Cell>
+          <StickerSheet.Cell style={cellStyle}>
+            <Tooltip {...props} text="Tooltip label" mood="positive">
+              <IconButton
+                label="Label"
+                icon={<Icon name="more_horiz" isPresentational />}
+              />
+            </Tooltip>
+          </StickerSheet.Cell>
+          <StickerSheet.Cell style={cellStyle}>
+            <Tooltip {...props} text="Tooltip label" mood="highlight">
+              <IconButton
+                label="Label"
+                icon={<Icon name="more_horiz" isPresentational />}
+              />
+            </Tooltip>
+          </StickerSheet.Cell>
+          <StickerSheet.Cell style={cellStyle}>
+            <Tooltip {...props} text="Tooltip label" mood="cautionary">
+              <IconButton
+                label="Label"
+                icon={<Icon name="more_horiz" isPresentational />}
+              />
+            </Tooltip>
+          </StickerSheet.Cell>
+        </StickerSheet.Row>
       </StickerSheet>
     </div>
   ),

package/src/__overlays__/Tooltip/v3/_docs/Tooltip.stickersheet.stories.tsx

@@ -1,8 +1,7 @@
 import React from "react"
-import { Meta, composeStories } from "@storybook/react"
+import { type Meta, type StoryObj, composeStories } from "@storybook/react"
 import { ReversedColors } from "~components/__utilities__/v3"
 import { mergeClassNames } from "~components/utils/mergeClassNames"
-import { StickerSheetStory } from "~storybook/components/StickerSheet"
 import * as testStories from "./Tooltip.spec.stories"
 
 export default {
@@ -15,7 +14,7 @@ export default {
 
 const Stories = composeStories(testStories)
 
-export const Standard: StickerSheetStory = {
+export const Standard: StoryObj = {
   name: "Sticker Sheet (Default)",
   render: args => (
     <div className="grid gap-x-128 gap-y-128 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
@@ -36,7 +35,7 @@ export const Standard: StickerSheetStory = {
   ),
 }
 
-export const StickerSheetRTL: StickerSheetStory = {
+export const StickerSheetRTL: StoryObj = {
   ...Standard,
   name: "Sticker Sheet (RTL)",
   parameters: {