@kaizen/components 1.68.2 → 1.68.4

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

@@ -84,38 +84,27 @@ const StickerSheetTemplate: StickerSheetStory = {
     return (
       <>
         <StickerSheet
-          className="w-full"
-          heading="ProgressBar"
           isReversed={isReversed}
+          title="ProgressBar"
+          layout="stretch"
         >
-          <StickerSheet.Body>
-            {colors.map(({ title, props }) => (
-              <StickerSheet.Row
-                key={title}
-                rowTitle={title}
-                rowTitleWidth="100px"
-              >
-                <ProgressBar {...defaultProps} {...props} />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+          {colors.map(({ title, props }) => (
+            <StickerSheet.Row key={title} header={title}>
+              <ProgressBar {...defaultProps} {...props} />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
+
         <StickerSheet
-          className="w-full"
-          heading="ProgressBar Moods (deprecated)"
           isReversed={isReversed}
+          title="ProgressBar Moods (deprecated)"
+          layout="stretch"
         >
-          <StickerSheet.Body>
-            {moods.map(({ title, props }) => (
-              <StickerSheet.Row
-                key={title}
-                rowTitle={title}
-                rowTitleWidth="100px"
-              >
-                <ProgressBar {...defaultProps} {...props} />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+          {moods.map(({ title, props }) => (
+            <StickerSheet.Row key={title} header={title}>
+              <ProgressBar {...defaultProps} {...props} />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
       </>
     )

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

@@ -27,60 +27,52 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Default", "Focus", "Hover"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Off">
-          <Radio
-            id="radio1"
-            name="radio1"
-            value="radio1"
-            reversed={isReversed}
-          />
-          <Radio
-            id="radio2"
-            name="radio2"
-            value="radio2"
-            reversed={isReversed}
-            data-sb-pseudo-styles="focus"
-          />
-          <Radio
-            id="radio3"
-            name="radio3"
-            value="radio3"
-            reversed={isReversed}
-            data-sb-pseudo-styles="hover"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="On">
-          <Radio
-            id="radio11"
-            name="radio11"
-            value="radio11"
-            reversed={isReversed}
-            selectedStatus
-          />
-          <Radio
-            id="radio22"
-            name="radio22"
-            value="radio22"
-            reversed={isReversed}
-            selectedStatus
-            data-sb-pseudo-styles="focus"
-          />
-          <Radio
-            id="radio33"
-            name="radio33"
-            value="radio33"
-            reversed={isReversed}
-            selectedStatus
-            data-sb-pseudo-styles="hover"
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Default", "Focus", "Hover"]}
+    >
+      <StickerSheet.Row header="Off">
+        <Radio id="radio1" name="radio1" value="radio1" reversed={isReversed} />
+        <Radio
+          id="radio2"
+          name="radio2"
+          value="radio2"
+          reversed={isReversed}
+          data-sb-pseudo-styles="focus"
+        />
+        <Radio
+          id="radio3"
+          name="radio3"
+          value="radio3"
+          reversed={isReversed}
+          data-sb-pseudo-styles="hover"
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="On">
+        <Radio
+          id="radio11"
+          name="radio11"
+          value="radio11"
+          reversed={isReversed}
+          selectedStatus
+        />
+        <Radio
+          id="radio22"
+          name="radio22"
+          value="radio22"
+          reversed={isReversed}
+          selectedStatus
+          data-sb-pseudo-styles="focus"
+        />
+        <Radio
+          id="radio33"
+          name="radio33"
+          value="radio33"
+          reversed={isReversed}
+          selectedStatus
+          data-sb-pseudo-styles="hover"
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   parameters: {

package/src/Radio/RadioField/_docs/RadioField.stickersheet.stories.tsx

@@ -16,60 +16,57 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Base", "Disabled", "Hover"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="On">
-          <RadioField
-            name="radio"
-            labelText="Label"
-            selectedStatus
-            value="radio-1"
-            reversed={isReversed}
-          />
-          <RadioField
-            name="radio"
-            labelText="Label"
-            selectedStatus
-            disabled
-            value="radio-2"
-            reversed={isReversed}
-          />
-          <RadioField
-            name="radio"
-            labelText="Label"
-            selectedStatus
-            value="radio-3"
-            reversed={isReversed}
-            classNameOverride="story__radio-field--hover"
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Off">
-          <RadioField
-            name="radio"
-            labelText="Label"
-            value="radio-1"
-            reversed={isReversed}
-          />
-          <RadioField
-            name="radio"
-            labelText="Label"
-            disabled
-            value="radio-2"
-            reversed={isReversed}
-          />
-          <RadioField
-            name="radio"
-            labelText="Label"
-            value="radio-3"
-            reversed={isReversed}
-            classNameOverride="story__radio-field--hover"
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Base", "Disabled", "Hover"]}
+    >
+      <StickerSheet.Row header="On">
+        <RadioField
+          name="radio"
+          labelText="Label"
+          selectedStatus
+          value="radio-1"
+          reversed={isReversed}
+        />
+        <RadioField
+          name="radio"
+          labelText="Label"
+          selectedStatus
+          disabled
+          value="radio-2"
+          reversed={isReversed}
+        />
+        <RadioField
+          name="radio"
+          labelText="Label"
+          selectedStatus
+          value="radio-3"
+          reversed={isReversed}
+          classNameOverride="story__radio-field--hover"
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Off">
+        <RadioField
+          name="radio"
+          labelText="Label"
+          value="radio-1"
+          reversed={isReversed}
+        />
+        <RadioField
+          name="radio"
+          labelText="Label"
+          disabled
+          value="radio-2"
+          reversed={isReversed}
+        />
+        <RadioField
+          name="radio"
+          labelText="Label"
+          value="radio-3"
+          reversed={isReversed}
+          classNameOverride="story__radio-field--hover"
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   parameters: {

package/src/Radio/RadioGroup/_docs/RadioGroup.stickersheet.stories.tsx

@@ -18,93 +18,87 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Base", "Disabled"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Default">
-          <>
-            <RadioGroup labelText="Radio group label" reversed={isReversed}>
-              <RadioField
-                labelText="Label"
-                name="radio"
-                value="radio-1"
-                reversed={isReversed}
-              />
-              <RadioField
-                labelText="Label"
-                name="radio"
-                value="radio-2"
-                reversed={isReversed}
-              />
-              <RadioField
-                labelText="Label"
-                name="radio"
-                value="radio-3"
-                reversed={isReversed}
-              />
-            </RadioGroup>
-            <Text variant="body" color={isReversed ? "white" : "dark"}>
-              Next line
-            </Text>
-          </>
-          <>
-            <RadioGroup labelText="Radio group label" reversed={isReversed}>
-              <RadioField
-                labelText="Label"
-                name="radio"
-                value="radio-1"
-                disabled
-                reversed={isReversed}
-              />
-              <RadioField
-                labelText="Label"
-                name="radio"
-                value="radio-2"
-                disabled
-                reversed={isReversed}
-              />
-              <RadioField
-                labelText="Label"
-                name="radio"
-                value="radio-3"
-                disabled
-                reversed={isReversed}
-              />
-            </RadioGroup>
-            <Text variant="body" color={isReversed ? "white" : "dark"}>
-              Next line
-            </Text>
-          </>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="No Bottom Margin">
-          <div>
-            <RadioGroup
-              labelText="Radio group label"
+    <StickerSheet isReversed={isReversed} headers={["Base", "Disabled"]}>
+      <StickerSheet.Row header="Default">
+        <>
+          <RadioGroup labelText="Radio group label" reversed={isReversed}>
+            <RadioField
+              labelText="Label"
+              name="radio"
+              value="radio-1"
               reversed={isReversed}
-              noBottomMargin
-            >
-              <RadioField
-                labelText="Label"
-                name="radio"
-                value="radio-1"
-                reversed={isReversed}
-              />
-              <RadioField
-                labelText="Label"
-                name="radio"
-                value="radio-2"
-                reversed={isReversed}
-              />
-            </RadioGroup>
-            <Text variant="body" color={isReversed ? "white" : "dark"}>
-              Next line
-            </Text>
-          </div>
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+            />
+            <RadioField
+              labelText="Label"
+              name="radio"
+              value="radio-2"
+              reversed={isReversed}
+            />
+            <RadioField
+              labelText="Label"
+              name="radio"
+              value="radio-3"
+              reversed={isReversed}
+            />
+          </RadioGroup>
+          <Text variant="body" color={isReversed ? "white" : "dark"}>
+            Next line
+          </Text>
+        </>
+        <>
+          <RadioGroup labelText="Radio group label" reversed={isReversed}>
+            <RadioField
+              labelText="Label"
+              name="radio"
+              value="radio-1"
+              disabled
+              reversed={isReversed}
+            />
+            <RadioField
+              labelText="Label"
+              name="radio"
+              value="radio-2"
+              disabled
+              reversed={isReversed}
+            />
+            <RadioField
+              labelText="Label"
+              name="radio"
+              value="radio-3"
+              disabled
+              reversed={isReversed}
+            />
+          </RadioGroup>
+          <Text variant="body" color={isReversed ? "white" : "dark"}>
+            Next line
+          </Text>
+        </>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="No Bottom Margin">
+        <div>
+          <RadioGroup
+            labelText="Radio group label"
+            reversed={isReversed}
+            noBottomMargin
+          >
+            <RadioField
+              labelText="Label"
+              name="radio"
+              value="radio-1"
+              reversed={isReversed}
+            />
+            <RadioField
+              labelText="Label"
+              name="radio"
+              value="radio-2"
+              reversed={isReversed}
+            />
+          </RadioGroup>
+          <Text variant="body" color={isReversed ? "white" : "dark"}>
+            Next line
+          </Text>
+        </div>
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

package/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.stickersheet.stories.tsx

@@ -17,64 +17,48 @@ export default meta
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
-    <div>
-      <StickerSheet className="" heading="Pseudo states">
-        <StickerSheet.Body>
-          <StickerSheet.Row rowTitle="Default">
-            <StickerSheet.Cell className=" w-1/2">
-              <EditableRichTextContent
-                onClick={action("Toggle RTE")}
-                content={[]}
-                labelText="Label"
-              />
-            </StickerSheet.Cell>
-            <StickerSheet.Cell className=" w-1/2">
-              <EditableRichTextContent
-                onClick={action("Toggle RTE")}
-                content={defaultContent}
-                labelText="Label"
-              />
-            </StickerSheet.Cell>
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Hover">
-            <StickerSheet.Cell className=" w-1/2">
-              <EditableRichTextContent
-                onClick={action("Toggle RTE")}
-                data-sb-pseudo-styles="hover"
-                content={[]}
-                labelText="Label"
-              />
-            </StickerSheet.Cell>
-            <StickerSheet.Cell className=" w-1/2">
-              <EditableRichTextContent
-                onClick={action("Toggle RTE")}
-                data-sb-pseudo-styles="hover"
-                content={defaultContent}
-                labelText="Label"
-              />
-            </StickerSheet.Cell>
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Focus">
-            <StickerSheet.Cell className=" w-1/2">
-              <EditableRichTextContent
-                onClick={action("Toggle RTE")}
-                data-sb-pseudo-styles="focusWithin"
-                content={[]}
-                labelText="Label"
-              />
-            </StickerSheet.Cell>
-            <StickerSheet.Cell className=" w-1/2">
-              <EditableRichTextContent
-                onClick={action("Toggle RTE")}
-                data-sb-pseudo-styles="focusWithin"
-                content={defaultContent}
-                labelText="Label"
-              />
-            </StickerSheet.Cell>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
-      </StickerSheet>
-    </div>
+    <StickerSheet title="EditableRichTextContent" layout="stretch">
+      <StickerSheet.Row header="Default">
+        <EditableRichTextContent
+          onClick={action("Toggle RTE")}
+          content={[]}
+          labelText="Label"
+        />
+        <EditableRichTextContent
+          onClick={action("Toggle RTE")}
+          content={defaultContent}
+          labelText="Label"
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Hover">
+        <EditableRichTextContent
+          onClick={action("Toggle RTE")}
+          data-sb-pseudo-styles="hover"
+          content={[]}
+          labelText="Label"
+        />
+        <EditableRichTextContent
+          onClick={action("Toggle RTE")}
+          data-sb-pseudo-styles="hover"
+          content={defaultContent}
+          labelText="Label"
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Focus">
+        <EditableRichTextContent
+          onClick={action("Toggle RTE")}
+          data-sb-pseudo-styles="focusWithin"
+          content={[]}
+          labelText="Label"
+        />
+        <EditableRichTextContent
+          onClick={action("Toggle RTE")}
+          data-sb-pseudo-styles="focusWithin"
+          content={defaultContent}
+          labelText="Label"
+        />
+      </StickerSheet.Row>
+    </StickerSheet>
   ),
   parameters: {
     pseudo: {

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx

@@ -16,57 +16,16 @@ export default {
   },
 } satisfies Meta
 
-const ToggleIconButtonGroup = ({
-  rowTitle,
-  ...props
-}: Omit<ToggleIconButtonProps, "label" | "icon"> & {
-  rowTitle: string
-}): JSX.Element => (
-  <StickerSheet.Row rowTitle={rowTitle}>
-    <ToggleIconButton
-      label="bold"
-      icon={<Icon name="format_bold" isPresentational />}
-      {...props}
-    />
-    <ToggleIconButton
-      label="bold"
-      icon={<Icon name="format_bold" isPresentational />}
-      {...props}
-      data-sb-pseudo-styles="hover"
-    />
-    <ToggleIconButton
-      label="bold"
-      icon={<Icon name="format_bold" isPresentational />}
-      {...props}
-      isActive
-    />
-    <ToggleIconButton
-      label="bold"
-      icon={<Icon name="format_bold" isPresentational />}
-      {...props}
-      data-sb-pseudo-styles="focus"
-    />
-    <ToggleIconButton
-      label="bold"
-      icon={<Icon name="format_bold" isPresentational />}
-      {...props}
-      disabled
-    />
-    <ToggleIconButton
-      label="bold"
-      icon={<Icon name="format_bold" isPresentational />}
-      {...props}
-      disabled
-      data-sb-pseudo-styles="focus"
-    />
-  </StickerSheet.Row>
-)
-
 const StickerSheetTemplate: StickerSheetStory = {
-  render: () => (
-    <StickerSheet>
-      <StickerSheet.Header
-        headings={[
+  render: () => {
+    const defaultProps = {
+      label: "bold",
+      icon: <Icon name="format_bold" isPresentational />,
+    } satisfies ToggleIconButtonProps
+
+    return (
+      <StickerSheet
+        headers={[
           "Default",
           "Hover",
           "Active",
@@ -74,15 +33,33 @@ const StickerSheetTemplate: StickerSheetStory = {
           "Disabled",
           "Disabled (Focus)",
         ]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
+      >
         {moodsList.map(mood => (
-          <ToggleIconButtonGroup key={mood} rowTitle={mood} mood={mood} />
+          <StickerSheet.Row key={mood} header={mood}>
+            <ToggleIconButton {...defaultProps} mood={mood} />
+            <ToggleIconButton
+              {...defaultProps}
+              mood={mood}
+              data-sb-pseudo-styles="hover"
+            />
+            <ToggleIconButton {...defaultProps} mood={mood} isActive />
+            <ToggleIconButton
+              {...defaultProps}
+              mood={mood}
+              data-sb-pseudo-styles="focus"
+            />
+            <ToggleIconButton {...defaultProps} mood={mood} disabled />
+            <ToggleIconButton
+              {...defaultProps}
+              mood={mood}
+              disabled
+              data-sb-pseudo-styles="focus"
+            />
+          </StickerSheet.Row>
         ))}
-      </StickerSheet.Body>
-    </StickerSheet>
-  ),
+      </StickerSheet>
+    )
+  },
   parameters: {
     pseudo: {
       hover: '[data-sb-pseudo-styles="hover"]',