@kaizen/components 1.68.2 → 1.68.4

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

@@ -17,22 +17,20 @@ export default {
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Default">
-          <StickerSheet.Cell className="w-320">
-            <LoadingParagraph isReversed={isReversed} />
-          </StickerSheet.Cell>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="isLink">
-          <LoadingParagraph isLink isReversed={isReversed} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="isInline + isInline">
-          <StickerSheet.Cell>
-            <LoadingParagraph isInline width={40} isReversed={isReversed} />
-            <LoadingParagraph isInline width={40} isReversed={isReversed} />
-          </StickerSheet.Cell>
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+      <StickerSheet.Row header="Default">
+        <StickerSheet.Cell className="w-320">
+          <LoadingParagraph isReversed={isReversed} />
+        </StickerSheet.Cell>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="isLink">
+        <LoadingParagraph isLink isReversed={isReversed} />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="isInline + isInline">
+        <StickerSheet.Cell>
+          <LoadingParagraph isInline width={40} isReversed={isReversed} />
+          <LoadingParagraph isInline width={40} isReversed={isReversed} />
+        </StickerSheet.Cell>
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

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

@@ -16,21 +16,19 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={['Size "xs"', 'Size "sm"', 'Size "md"', "Custom color"]}
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <LoadingSpinner accessibilityLabel="Loading" size="xs" />
-          <LoadingSpinner accessibilityLabel="Loading" size="sm" />
-          <LoadingSpinner accessibilityLabel="Loading" size="md" />
-          <LoadingSpinner
-            accessibilityLabel="Loading"
-            classNameOverride="text-purple-400"
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={['Size "xs"', 'Size "sm"', 'Size "md"', "Custom color"]}
+    >
+      <StickerSheet.Row>
+        <LoadingSpinner accessibilityLabel="Loading" size="xs" />
+        <LoadingSpinner accessibilityLabel="Loading" size="sm" />
+        <LoadingSpinner accessibilityLabel="Loading" size="md" />
+        <LoadingSpinner
+          accessibilityLabel="Loading"
+          classNameOverride="text-purple-400"
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

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

@@ -1,7 +1,6 @@
 import React, { useState } from "react"
 import { Meta } from "@storybook/react"
 import isChromatic from "chromatic"
-import classnames from "classnames"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -53,83 +52,79 @@ const StickerSheetTemplate: StickerSheetStory = {
     return (
       <>
         <StickerSheet
-          heading="MultiSelect"
-          className={classnames("w-full", IS_CHROMATIC && "pb-160")}
+          title="MultiSelect"
+          className={IS_CHROMATIC ? "pb-160" : undefined}
+          headers={["Closed", "Open", "No items"]}
+          layout="stretch"
         >
-          <StickerSheet.Header
-            headings={["Closed", "Open", "No items"]}
-            headingsWidth="30%"
-          />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <MultiSelect
-                id="id--multi-select-options--closed"
-                label="Label"
-                description="A short description"
-                isOpen={isOpenClosed}
-                onOpenChange={setIsOpenClosed}
-                onSelectedValuesChange={setSelectedValuesClosed}
-                selectedValues={selectedValuesClosed}
-                items={options}
-              />
-              <MultiSelect
-                id="id--multi-select-options--open"
-                label="Label"
-                description="A short description"
-                isOpen={isOpenOpen}
-                onOpenChange={setIsOpenOpen}
-                onSelectedValuesChange={setSelectedValuesOpen}
-                selectedValues={selectedValuesOpen}
-                items={options}
-              />
-              <MultiSelect
-                id="id--multi-select-options--no-items"
-                label="Label"
-                description="A short description"
-                isOpen={isOpenNoItems}
-                onOpenChange={setIsOpenNoItems}
-                selectedValues={selectedValuesNoItems}
-                onSelectedValuesChange={setSelectedValuesNoItems}
-                items={[]}
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+          <StickerSheet.Row>
+            <MultiSelect
+              id="id--multi-select-options--closed"
+              label="Label"
+              description="A short description"
+              isOpen={isOpenClosed}
+              onOpenChange={setIsOpenClosed}
+              onSelectedValuesChange={setSelectedValuesClosed}
+              selectedValues={selectedValuesClosed}
+              items={options}
+            />
+            <MultiSelect
+              id="id--multi-select-options--open"
+              label="Label"
+              description="A short description"
+              isOpen={isOpenOpen}
+              onOpenChange={setIsOpenOpen}
+              onSelectedValuesChange={setSelectedValuesOpen}
+              selectedValues={selectedValuesOpen}
+              items={options}
+            />
+            <MultiSelect
+              id="id--multi-select-options--no-items"
+              label="Label"
+              description="A short description"
+              isOpen={isOpenNoItems}
+              onOpenChange={setIsOpenNoItems}
+              selectedValues={selectedValuesNoItems}
+              onSelectedValuesChange={setSelectedValuesNoItems}
+              items={[]}
+            />
+          </StickerSheet.Row>
         </StickerSheet>
+
         <StickerSheet
-          heading="Validation"
-          className={classnames("w-full", IS_CHROMATIC && "pb-160")}
+          title="Validation"
+          className={IS_CHROMATIC ? "pb-160" : undefined}
+          headers={["Error", "Caution"]}
+          layout="stretch"
         >
-          <StickerSheet.Header headings={["Error", "Caution"]} />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <MultiSelect
-                id="id--multi-select--error"
-                label="Label"
-                isOpen={false}
-                onOpenChange={() => undefined}
-                onSelectedValuesChange={() => undefined}
-                selectedValues={selectedValuesOpen}
-                items={options}
-                validationMessage={{
-                  status: "error",
-                  message: "There are no waffles left.",
-                }}
-              />
-              <MultiSelect
-                id="id--multi-select--caution"
-                label="Label"
-                isOpen={false}
-                onOpenChange={() => undefined}
-                onSelectedValuesChange={() => undefined}
-                selectedValues={selectedValuesNoItems}
-                items={options}
-                validationMessage={{
-                  status: "error",
-                  message: "There are only four pancakes left.",
-                }}
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+          <StickerSheet.Row>
+            <MultiSelect
+              id="id--multi-select--error"
+              label="Label"
+              isOpen={false}
+              onOpenChange={() => undefined}
+              onSelectedValuesChange={() => undefined}
+              selectedValues={selectedValuesOpen}
+              items={options}
+              validationMessage={{
+                status: "error",
+                message: "There are no waffles left.",
+              }}
+            />
+            <MultiSelect
+              id="id--multi-select--caution"
+              label="Label"
+              isOpen={false}
+              onOpenChange={() => undefined}
+              onSelectedValuesChange={() => undefined}
+              selectedValues={selectedValuesNoItems}
+              items={options}
+              validationMessage={{
+                status: "caution",
+                message: "There are only four pancakes left.",
+              }}
+            />
+          </StickerSheet.Row>
         </StickerSheet>
       </>
     )

package/src/MultiSelect/subcomponents/Checkbox/_docs/Checkbox.stickersheet.stories.tsx

@@ -22,34 +22,28 @@ const STATUS_ROWS = [
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
-    <StickerSheet>
-      <StickerSheet.Header
-        headings={["Default", "Hover", "Focus"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        {STATUS_ROWS.map(({ title, status }) => (
-          <StickerSheet.Row key={title} rowTitle={title}>
-            <Checkbox
-              aria-label="Read only label"
-              checkedStatus={status}
-              readOnly
-            />
-            <Checkbox
-              aria-label="Hover label"
-              classNameOverride="story__checkbox--hover"
-              checkedStatus={status}
-              readOnly
-            />
-            <Checkbox
-              aria-label="Focus label"
-              classNameOverride="story__checkbox--focus"
-              checkedStatus={status}
-              readOnly
-            />
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
+    <StickerSheet headers={["Default", "Hover", "Focus"]}>
+      {STATUS_ROWS.map(({ title, status }) => (
+        <StickerSheet.Row key={title} header={title}>
+          <Checkbox
+            aria-label="Read only label"
+            checkedStatus={status}
+            readOnly
+          />
+          <Checkbox
+            aria-label="Hover label"
+            classNameOverride="story__checkbox--hover"
+            checkedStatus={status}
+            readOnly
+          />
+          <Checkbox
+            aria-label="Focus label"
+            classNameOverride="story__checkbox--focus"
+            checkedStatus={status}
+            readOnly
+          />
+        </StickerSheet.Row>
+      ))}
     </StickerSheet>
   ),
   parameters: {

package/src/MultiSelect/subcomponents/MultiSelectOptionField/_docs/MultiSelectOptionField.stickersheet.stories.tsx

@@ -28,75 +28,70 @@ const STATUS_ROWS = [
 const StickerSheetTemplate: Story = {
   render: () => (
     <>
-      <StickerSheet heading="MultiSelectOptionField">
-        <StickerSheet.Header
-          headings={["Default", "Hover", "Focus"]}
-          hasVerticalHeadings
-        />
-        <StickerSheet.Body>
-          {STATUS_ROWS.map(({ title, status }) => (
-            <StickerSheet.Row key={title} rowTitle={title}>
-              <MultiSelectOptionField
-                id="id--jaffle"
-                onChange={action("jaffle clicked")}
-                option={{
-                  label: "Jaffle",
-                  value: "jaffle",
-                }}
-                checkedStatus={status}
-              />
-              <MultiSelectOptionField
-                id="id--waffle"
-                onChange={action("waffle clicked")}
-                option={{
-                  label: "Waffle",
-                  value: "waffle",
-                }}
-                data-sb-pseudo-styles="hover"
-                checkedStatus={status}
-              />
-              <MultiSelectOptionField
-                id="id--flapjack"
-                onChange={action("flapjack clicked")}
-                option={{
-                  label: "Flapjack",
-                  value: "flapjack",
-                }}
-                data-sb-pseudo-styles="focus"
-                checkedStatus={status}
-              />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+      <StickerSheet
+        title="MultiSelectOptionField"
+        headers={["Default", "Hover", "Focus"]}
+      >
+        {STATUS_ROWS.map(({ title, status }) => (
+          <StickerSheet.Row key={title} header={title}>
+            <MultiSelectOptionField
+              id="id--jaffle"
+              onChange={action("jaffle clicked")}
+              option={{
+                label: "Jaffle",
+                value: "jaffle",
+              }}
+              checkedStatus={status}
+            />
+            <MultiSelectOptionField
+              id="id--waffle"
+              onChange={action("waffle clicked")}
+              option={{
+                label: "Waffle",
+                value: "waffle",
+              }}
+              data-sb-pseudo-styles="hover"
+              checkedStatus={status}
+            />
+            <MultiSelectOptionField
+              id="id--flapjack"
+              onChange={action("flapjack clicked")}
+              option={{
+                label: "Flapjack",
+                value: "flapjack",
+              }}
+              data-sb-pseudo-styles="focus"
+              checkedStatus={status}
+            />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
 
-      <StickerSheet heading="Long text wrap">
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <div className=" w-280 border-solid border-gray-500 border">
-              <MultiSelectOptionField
-                id="id--john-long-name"
-                onChange={action("long name option clicked")}
-                option={{
-                  label:
-                    "johnTheJaffleEaterAndDevourerOfPancakesWithBlackPuddingAndASideOfBeans@yahoo.com",
-                  value: "email",
-                }}
-                checkedStatus="unchecked"
-              />
-              <MultiSelectOptionField
-                id="id--long-sentence"
-                onChange={action("long sentence option clicked")}
-                option={{
-                  label:
-                    "John was a jaffle eater and devourer of pancakes with black pudding and a side of beans",
-                  value: "sentence",
-                }}
-                checkedStatus="unchecked"
-              />
-            </div>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet title="Long text wrap">
+        <StickerSheet.Row>
+          <div className=" w-280 border-solid border-gray-500 border">
+            <MultiSelectOptionField
+              id="id--john-long-name"
+              onChange={action("long name option clicked")}
+              option={{
+                label:
+                  "johnTheJaffleEaterAndDevourerOfPancakesWithBlackPuddingAndASideOfBeans@yahoo.com",
+                value: "email",
+              }}
+              checkedStatus="unchecked"
+            />
+            <MultiSelectOptionField
+              id="id--long-sentence"
+              onChange={action("long sentence option clicked")}
+              option={{
+                label:
+                  "John was a jaffle eater and devourer of pancakes with black pudding and a side of beans",
+                value: "sentence",
+              }}
+              checkedStatus="unchecked"
+            />
+          </div>
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),

package/src/MultiSelect/subcomponents/MultiSelectOptions/_docs/MultiSelectOptions.stickersheet.stories.tsx

@@ -31,34 +31,27 @@ const options = [
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
-    <StickerSheet>
-      <StickerSheet.Header
-        headings={["Default", "Focus + Hover", "Empty state"]}
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <MultiSelectOptions
-            id="id--multi-select-options--default"
-            options={options}
-            selectedValues={new Set()}
-            onChange={() => undefined}
-          />
-          <MultiSelectOptions
-            id="id--multi-select-options--pseudo"
-            options={options}
-            selectedValues={new Set(["pancakes"])}
-            onChange={() => undefined}
-          />
-          <StickerSheet.Cell className="align-top">
-            <MultiSelectOptions
-              id="id--multi-select-options--empty-state"
-              options={[]}
-              selectedValues={new Set()}
-              onChange={() => undefined}
-            />
-          </StickerSheet.Cell>
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet headers={["Default", "Focus + Hover", "Empty state"]}>
+      <StickerSheet.Row>
+        <MultiSelectOptions
+          id="id--multi-select-options--default"
+          options={options}
+          selectedValues={new Set()}
+          onChange={() => undefined}
+        />
+        <MultiSelectOptions
+          id="id--multi-select-options--pseudo"
+          options={options}
+          selectedValues={new Set(["pancakes"])}
+          onChange={() => undefined}
+        />
+        <MultiSelectOptions
+          id="id--multi-select-options--empty-state"
+          options={[]}
+          selectedValues={new Set()}
+          onChange={() => undefined}
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   parameters: {