@kaizen/components 1.68.2 → 1.68.3

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

@@ -28,93 +28,84 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="TimeField" className="w-full">
-          <StickerSheet.Header
-            headings={["Default", "Disabled", "Error"]}
-            headingsWidth="30%"
-          />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <StickerSheet.Cell className="align-top">
-                <TimeField
-                  label="Label (en-AU)"
-                  locale="en-AU"
-                  value={valueDefault}
-                  onChange={setValueDefault}
-                />
-              </StickerSheet.Cell>
-              <StickerSheet.Cell className="align-top">
-                <TimeField
-                  label="Label (en-AU)"
-                  locale="en-AU"
-                  value={{ hour: 1, minutes: 30 }}
-                  onChange={(): void => undefined}
-                  isDisabled
-                />
-              </StickerSheet.Cell>
-              <StickerSheet.Cell className="align-top">
-                <TimeField
-                  label="Label (en-AU)"
-                  locale="en-AU"
-                  value={valueError}
-                  onChange={setValueError}
-                  status="error"
-                  validationMessage="Date is invalid"
-                />
-              </StickerSheet.Cell>
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet
+          title="TimeField"
+          layout="stretch"
+          headers={["Default", "Disabled", "Error"]}
+        >
+          <StickerSheet.Row>
+            <TimeField
+              label="Label (en-AU)"
+              locale="en-AU"
+              value={valueDefault}
+              onChange={setValueDefault}
+            />
+            <TimeField
+              label="Label (en-AU)"
+              locale="en-AU"
+              value={{ hour: 1, minutes: 30 }}
+              onChange={(): void => undefined}
+              isDisabled
+            />
+            <TimeField
+              label="Label (en-AU)"
+              locale="en-AU"
+              value={valueError}
+              onChange={setValueError}
+              status="error"
+              validationMessage="Date is invalid"
+            />
+          </StickerSheet.Row>
         </StickerSheet>
 
-        <StickerSheet heading="Pseudo states" className="w-full">
-          <StickerSheet.Header headings={["Hover", "Focus"]} />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <TimeField
-                label="Label (hover on hour)"
-                locale="en-AU"
-                value={{ hour: 22, minutes: 30 }}
-                onChange={(): void => undefined}
-                data-sb-pseudo-styles="hover--segment"
-              />
-              <TimeField
-                label="Label (focus on hour)"
-                locale="en-AU"
-                value={{ hour: 22, minutes: 30 }}
-                onChange={(): void => undefined}
-                data-sb-pseudo-styles="focus--segment"
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet
+          title="Pseudo states"
+          layout="stretch"
+          headers={["Hover", "Focus"]}
+        >
+          <StickerSheet.Row>
+            <TimeField
+              label="Label (hover on hour)"
+              locale="en-AU"
+              value={{ hour: 22, minutes: 30 }}
+              onChange={(): void => undefined}
+              data-sb-pseudo-styles="hover--segment"
+            />
+            <TimeField
+              label="Label (focus on hour)"
+              locale="en-AU"
+              value={{ hour: 22, minutes: 30 }}
+              onChange={(): void => undefined}
+              data-sb-pseudo-styles="focus--segment"
+            />
+          </StickerSheet.Row>
         </StickerSheet>
 
-        <StickerSheet heading="Localisation" className="w-full">
-          <StickerSheet.Header
-            headings={["en-US", "en-GB", "zh-HANS-SG"]}
-            headingsWidth="30%"
-          />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <TimeField
-                label="Label"
-                locale="en-US"
-                value={valueEnUS}
-                onChange={setValueEnUS}
-              />
-              <TimeField
-                label="Label"
-                locale="en-GB"
-                value={valueEnGB}
-                onChange={setValueEnGB}
-              />
-              <TimeField
-                label="Label"
-                locale="zh-HANS-SG"
-                value={valueZh}
-                onChange={setValueZh}
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet
+          title="Localisation"
+          layout="stretch"
+          headers={["en-US", "en-GB", "zh-HANS-SG"]}
+        >
+          <StickerSheet.Row>
+            <TimeField
+              label="Label"
+              locale="en-US"
+              value={valueEnUS}
+              onChange={setValueEnUS}
+            />
+            <TimeField
+              label="Label"
+              locale="en-GB"
+              value={valueEnGB}
+              onChange={setValueEnGB}
+            />
+            <TimeField
+              label="Label"
+              locale="zh-HANS-SG"
+              value={valueZh}
+              onChange={setValueZh}
+            />
+          </StickerSheet.Row>
         </StickerSheet>
       </>
     )

package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx

@@ -146,6 +146,7 @@ export const HasLongTitle: Story = {
 }
 
 export const StickerSheetBreadcrumbs: Story = {
+  name: "Sticker Sheet (Breadcrumb)",
   parameters: {
     docs: {
       canvas: {
@@ -179,103 +180,100 @@ export const StickerSheetBreadcrumbs: Story = {
   },
   render: args => (
     <StickerSheet>
-      <StickerSheet.Row rowTitle="Tab hover">
+      <StickerSheet.Row header="Tab hover">
         <div className="px-12 bg-purple-600">
           <TitleBlockZen {...args} id="tab-hover-example" />
         </div>
       </StickerSheet.Row>
-      <StickerSheet.Row rowTitle="Tab focus">
+      <StickerSheet.Row header="Tab focus">
         <div className="px-12 bg-purple-600">
           <TitleBlockZen {...args} id="tab-focus-example" />
         </div>
       </StickerSheet.Row>
-      <StickerSheet.Row rowTitle="Breadcrumbs hover">
+      <StickerSheet.Row header="Breadcrumbs hover">
         <div className="px-12 bg-purple-600">
           <TitleBlockZen {...args} id="Breadcrumbs-hover-example" />
         </div>
       </StickerSheet.Row>
-      <StickerSheet.Row rowTitle="Breadcrumbs focus">
+      <StickerSheet.Row header="Breadcrumbs focus">
         <div className="px-12 bg-purple-600">
           <TitleBlockZen {...args} id="Breadcrumbs-focus-example" />
         </div>
       </StickerSheet.Row>
     </StickerSheet>
   ),
-  name: "Sticker Sheet (Breadcrumb)",
 }
 
-export const StickerSheetDefault: Story = {
+export const StickerSheetSurveyStatus: Story = {
+  name: "Sticker Sheet (Survey Status)",
   render: () => (
     <StickerSheet title="Survey Status">
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Draft">
-          <TitleBlockZen
-            title="Draft Title"
-            surveyStatus={{
-              text: "draft text",
-              status: "draft",
-            }}
-          >
-            Draft
-          </TitleBlockZen>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Default">
-          <TitleBlockZen
-            title="Default Title"
-            surveyStatus={{
-              text: "default text",
-              status: "default",
-            }}
-          >
-            Default
-          </TitleBlockZen>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Scheduled">
-          <TitleBlockZen
-            title="Scheduled Title"
-            surveyStatus={{
-              text: "scheduled text",
-              status: "scheduled",
-            }}
-          >
-            Due
-          </TitleBlockZen>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Live">
-          <TitleBlockZen
-            title="Live Title"
-            surveyStatus={{
-              text: "live text",
-              status: "live",
-            }}
-          >
-            Overdue
-          </TitleBlockZen>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Closed">
-          <TitleBlockZen
-            title="Closed Title"
-            surveyStatus={{
-              text: "closed text",
-              status: "closed",
-            }}
-          >
-            Completed
-          </TitleBlockZen>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Sentiment Positive">
-          <TitleBlockZen
-            title="Sentiment Positive Title"
-            surveyStatus={{
-              text: "sentimentPositive text",
-              status: "sentimentPositive",
-            }}
-          >
-            Completed
-          </TitleBlockZen>
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+      <StickerSheet.Row header="Draft">
+        <TitleBlockZen
+          title="Draft Title"
+          surveyStatus={{
+            text: "draft text",
+            status: "draft",
+          }}
+        >
+          Draft
+        </TitleBlockZen>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Default">
+        <TitleBlockZen
+          title="Default Title"
+          surveyStatus={{
+            text: "default text",
+            status: "default",
+          }}
+        >
+          Default
+        </TitleBlockZen>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Scheduled">
+        <TitleBlockZen
+          title="Scheduled Title"
+          surveyStatus={{
+            text: "scheduled text",
+            status: "scheduled",
+          }}
+        >
+          Due
+        </TitleBlockZen>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Live">
+        <TitleBlockZen
+          title="Live Title"
+          surveyStatus={{
+            text: "live text",
+            status: "live",
+          }}
+        >
+          Overdue
+        </TitleBlockZen>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Closed">
+        <TitleBlockZen
+          title="Closed Title"
+          surveyStatus={{
+            text: "closed text",
+            status: "closed",
+          }}
+        >
+          Completed
+        </TitleBlockZen>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Sentiment Positive">
+        <TitleBlockZen
+          title="Sentiment Positive Title"
+          surveyStatus={{
+            text: "sentimentPositive text",
+            status: "sentimentPositive",
+          }}
+        >
+          Completed
+        </TitleBlockZen>
+      </StickerSheet.Row>
     </StickerSheet>
   ),
-  name: "Sticker Sheet (Survey Status)",
 }

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

@@ -27,33 +27,30 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Default", "Hover", "Focus", "Disabled"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="off">
-          <ToggleSwitch reversed={isReversed} />
-          <ToggleSwitch reversed={isReversed} data-sb-pseudo-styles="hover" />
-          <ToggleSwitch reversed={isReversed} data-sb-pseudo-styles="focus" />
-          <ToggleSwitch reversed={isReversed} disabled />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="on">
-          <ToggleSwitch reversed={isReversed} toggledStatus="on" />
-          <ToggleSwitch
-            reversed={isReversed}
-            toggledStatus="on"
-            data-sb-pseudo-styles="hover"
-          />
-          <ToggleSwitch
-            reversed={isReversed}
-            toggledStatus="on"
-            data-sb-pseudo-styles="focus"
-          />
-          <ToggleSwitch reversed={isReversed} toggledStatus="on" disabled />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Default", "Hover", "Focus", "Disabled"]}
+    >
+      <StickerSheet.Row header="off">
+        <ToggleSwitch reversed={isReversed} />
+        <ToggleSwitch reversed={isReversed} data-sb-pseudo-styles="hover" />
+        <ToggleSwitch reversed={isReversed} data-sb-pseudo-styles="focus" />
+        <ToggleSwitch reversed={isReversed} disabled />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="on">
+        <ToggleSwitch reversed={isReversed} toggledStatus="on" />
+        <ToggleSwitch
+          reversed={isReversed}
+          toggledStatus="on"
+          data-sb-pseudo-styles="hover"
+        />
+        <ToggleSwitch
+          reversed={isReversed}
+          toggledStatus="on"
+          data-sb-pseudo-styles="focus"
+        />
+        <ToggleSwitch reversed={isReversed} toggledStatus="on" disabled />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   parameters: {

package/src/ToggleSwitch/ToggleSwitchField/_docs/ToggleSwitchField.stickersheet.stories.tsx

@@ -16,56 +16,53 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Default", "Hover", "Focus", "Disabled"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="off">
-          <ToggleSwitchField labelText="Toggle me" reversed={isReversed} />
-          <ToggleSwitchField
-            labelText="Toggle me"
-            reversed={isReversed}
-            data-sb-pseudo-styles="hover"
-          />
-          <ToggleSwitchField
-            labelText="Toggle me"
-            reversed={isReversed}
-            data-sb-pseudo-styles="focus"
-          />
-          <ToggleSwitchField
-            labelText="Toggle me"
-            reversed={isReversed}
-            disabled
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="on">
-          <ToggleSwitchField
-            labelText="Toggle me"
-            toggledStatus="on"
-            reversed={isReversed}
-          />
-          <ToggleSwitchField
-            labelText="Toggle me"
-            toggledStatus="on"
-            reversed={isReversed}
-            data-sb-pseudo-styles="hover"
-          />
-          <ToggleSwitchField
-            labelText="Toggle me"
-            toggledStatus="on"
-            reversed={isReversed}
-            data-sb-pseudo-styles="focus"
-          />
-          <ToggleSwitchField
-            labelText="Toggle me"
-            toggledStatus="on"
-            reversed={isReversed}
-            disabled
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Default", "Hover", "Focus", "Disabled"]}
+    >
+      <StickerSheet.Row header="off">
+        <ToggleSwitchField labelText="Toggle me" reversed={isReversed} />
+        <ToggleSwitchField
+          labelText="Toggle me"
+          reversed={isReversed}
+          data-sb-pseudo-styles="hover"
+        />
+        <ToggleSwitchField
+          labelText="Toggle me"
+          reversed={isReversed}
+          data-sb-pseudo-styles="focus"
+        />
+        <ToggleSwitchField
+          labelText="Toggle me"
+          reversed={isReversed}
+          disabled
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="on">
+        <ToggleSwitchField
+          labelText="Toggle me"
+          toggledStatus="on"
+          reversed={isReversed}
+        />
+        <ToggleSwitchField
+          labelText="Toggle me"
+          toggledStatus="on"
+          reversed={isReversed}
+          data-sb-pseudo-styles="hover"
+        />
+        <ToggleSwitchField
+          labelText="Toggle me"
+          toggledStatus="on"
+          reversed={isReversed}
+          data-sb-pseudo-styles="focus"
+        />
+        <ToggleSwitchField
+          labelText="Toggle me"
+          toggledStatus="on"
+          reversed={isReversed}
+          disabled
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   parameters: {

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

@@ -30,48 +30,38 @@ const WellWrapped = (props: WellProps): JSX.Element => (
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <>
-      <StickerSheet>
-        <StickerSheet.Header
-          headings={["Solid Border", "Dashed Border", "None"]}
-          hasVerticalHeadings
-        />
-        <StickerSheet.Body>
-          {variantTypes.map(variant => (
-            <StickerSheet.Row key={variant} rowTitle={variant}>
-              {borderStyleTypes.map(border => (
-                <WellWrapped
-                  key={border}
-                  variant={variant}
-                  borderStyle={border}
-                />
-              ))}
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
-        <StickerSheet.Body>
-          {wellColors.map(color => (
-            <StickerSheet.Row key={color} rowTitle={color}>
-              {borderStyleTypes.map(border => (
-                <WellWrapped key={border} color={color} borderStyle={border} />
-              ))}
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
-      </StickerSheet>
-      <StickerSheet>
-        <StickerSheet.Header headings={["Margin", "No Margin"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <StickerSheet.Cell>
-              <WellWrapped />
-              <WellWrapped />
-            </StickerSheet.Cell>
-            <StickerSheet.Cell>
-              <WellWrapped noMargin />
-              <WellWrapped />
-            </StickerSheet.Cell>
+      <StickerSheet headers={["Solid Border", "Dashed Border", "None"]}>
+        {variantTypes.map(variant => (
+          <StickerSheet.Row key={variant} header={variant}>
+            {borderStyleTypes.map(border => (
+              <WellWrapped
+                key={border}
+                variant={variant}
+                borderStyle={border}
+              />
+            ))}
+          </StickerSheet.Row>
+        ))}
+        {wellColors.map(color => (
+          <StickerSheet.Row key={color} header={color}>
+            {borderStyleTypes.map(border => (
+              <WellWrapped key={border} color={color} borderStyle={border} />
+            ))}
           </StickerSheet.Row>
-        </StickerSheet.Body>
+        ))}
+      </StickerSheet>
+
+      <StickerSheet headers={["Margin", "No Margin"]}>
+        <StickerSheet.Row>
+          <StickerSheet.Cell>
+            <WellWrapped />
+            <WellWrapped />
+          </StickerSheet.Cell>
+          <StickerSheet.Cell>
+            <WellWrapped noMargin />
+            <WellWrapped />
+          </StickerSheet.Cell>
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),