@kaizen/components 1.68.2 → 1.68.4

package/src/Collapsible/CollapsibleGroup/_docs/CollapsibleGroup.stickersheet.stories.tsx

@@ -45,27 +45,25 @@ const CollapsibleGroupWrapped = (
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Open">
-          <CollapsibleGroupWrapped />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Closed">
-          <CollapsibleGroup>
-            <CollapsibleWrapped open={false} />
-            <CollapsibleWrapped open={false} />
-            <CollapsibleWrapped open={false} />
-          </CollapsibleGroup>
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="noSectionPadding">
-          <CollapsibleGroupWrapped noSectionPadding />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="lazyLoad">
-          <CollapsibleGroupWrapped lazyLoad />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="separated">
-          <CollapsibleGroupWrapped separated />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+      <StickerSheet.Row header="Open">
+        <CollapsibleGroupWrapped />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Closed">
+        <CollapsibleGroup>
+          <CollapsibleWrapped open={false} />
+          <CollapsibleWrapped open={false} />
+          <CollapsibleWrapped open={false} />
+        </CollapsibleGroup>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="noSectionPadding">
+        <CollapsibleGroupWrapped noSectionPadding />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="lazyLoad">
+        <CollapsibleGroupWrapped lazyLoad />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="separated">
+        <CollapsibleGroupWrapped separated />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

package/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.stickersheets.stories.tsx

@@ -31,14 +31,12 @@ const ExpertAdviceCollapsibleWrapped = (
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <StickerSheet>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Default">
-          <ExpertAdviceCollapsibleWrapped title="Collapsible" />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="lazyLoad">
-          <ExpertAdviceCollapsibleWrapped title="Lazy load" lazyLoad />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+      <StickerSheet.Row header="Default">
+        <ExpertAdviceCollapsibleWrapped title="Collapsible" />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="lazyLoad">
+        <ExpertAdviceCollapsibleWrapped title="Lazy load" lazyLoad />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

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

@@ -22,119 +22,117 @@ const StickerSheetTemplate: StickerSheetStory = {
     const [selectedDate, setValueDate] = useState<Date | undefined>()
     return (
       <>
-        <StickerSheet isReversed={isReversed} heading="DatePicker">
-          <StickerSheet.Header
-            headings={[
-              "Default",
-              "Selected Value",
-              "Custom Description",
-              "Disabled",
-            ]}
-          />
-          <StickerSheet.Body>
-            <StickerSheet.Row style={{ verticalAlign: "top" }}>
-              <DatePicker
-                labelText="Label"
-                selectedDay={selectedDate}
-                onDayChange={setValueDate}
-                isReversed={isReversed}
-              />
-              <DatePicker
-                labelText="Label"
-                selectedDay={new Date(2022, 1, 5)}
-                onDayChange={() => undefined}
-                isReversed={isReversed}
-              />
-              <DatePicker
-                labelText="Label"
-                selectedDay={undefined}
-                onDayChange={() => undefined}
-                isReversed={isReversed}
-                description={
-                  <>
-                    <Text
-                      tag="span"
-                      variant="small"
-                      color={isReversed ? "white" : "dark"}
-                    >
-                      My <strong>Custom</strong> Description
-                    </Text>
-                  </>
-                }
-              />
-              <DatePicker
-                labelText="Label"
-                selectedDay={undefined}
-                onDayChange={() => undefined}
-                isReversed={isReversed}
-                disabled
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet
+          isReversed={isReversed}
+          title="DatePicker"
+          headers={[
+            "Default",
+            "Selected Value",
+            "Custom Description",
+            "Disabled",
+          ]}
+        >
+          <StickerSheet.Row style={{ verticalAlign: "top" }}>
+            <DatePicker
+              labelText="Label"
+              selectedDay={selectedDate}
+              onDayChange={setValueDate}
+              isReversed={isReversed}
+            />
+            <DatePicker
+              labelText="Label"
+              selectedDay={new Date(2022, 1, 5)}
+              onDayChange={() => undefined}
+              isReversed={isReversed}
+            />
+            <DatePicker
+              labelText="Label"
+              selectedDay={undefined}
+              onDayChange={() => undefined}
+              isReversed={isReversed}
+              description={
+                <>
+                  <Text
+                    tag="span"
+                    variant="small"
+                    color={isReversed ? "white" : "dark"}
+                  >
+                    My <strong>Custom</strong> Description
+                  </Text>
+                </>
+              }
+            />
+            <DatePicker
+              labelText="Label"
+              selectedDay={undefined}
+              onDayChange={() => undefined}
+              isReversed={isReversed}
+              disabled
+            />
+          </StickerSheet.Row>
         </StickerSheet>
 
-        <StickerSheet isReversed={isReversed} heading="Pseudo states">
-          <StickerSheet.Header
-            headings={["Hover", "Focus"]}
-            hasVerticalHeadings
-          />
-          <StickerSheet.Body>
-            <StickerSheet.Row rowTitle="Container">
-              <DatePicker
-                isReversed={isReversed}
-                labelText="Date"
-                selectedDay={undefined}
-                onDayChange={() => undefined}
-                data-sb-pseudo-styles="hover"
-              />
-              <DatePicker
-                isReversed={isReversed}
-                labelText="Date"
-                selectedDay={undefined}
-                onDayChange={() => undefined}
-                data-sb-pseudo-styles="focus"
-              />
-            </StickerSheet.Row>
+        <StickerSheet
+          isReversed={isReversed}
+          title="Pseudo states"
+          headers={["Hover", "Focus"]}
+        >
+          <StickerSheet.Row header="Container">
+            <DatePicker
+              isReversed={isReversed}
+              labelText="Date"
+              selectedDay={undefined}
+              onDayChange={() => undefined}
+              data-sb-pseudo-styles="hover"
+            />
+            <DatePicker
+              isReversed={isReversed}
+              labelText="Date"
+              selectedDay={undefined}
+              onDayChange={() => undefined}
+              data-sb-pseudo-styles="focus"
+            />
+          </StickerSheet.Row>
 
-            <StickerSheet.Row rowTitle="Icon button">
-              <DatePicker
-                isReversed={isReversed}
-                labelText="Date"
-                selectedDay={undefined}
-                onDayChange={() => undefined}
-                classNameOverride="story__date-input-single-field--hover"
-              />
-              <DatePicker
-                isReversed={isReversed}
-                labelText="Date"
-                selectedDay={undefined}
-                onDayChange={() => undefined}
-                classNameOverride="story__date-input-single-field--focus"
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+          <StickerSheet.Row header="Icon button">
+            <DatePicker
+              isReversed={isReversed}
+              labelText="Date"
+              selectedDay={undefined}
+              onDayChange={() => undefined}
+              classNameOverride="story__date-input-single-field--hover"
+            />
+            <DatePicker
+              isReversed={isReversed}
+              labelText="Date"
+              selectedDay={undefined}
+              onDayChange={() => undefined}
+              classNameOverride="story__date-input-single-field--focus"
+            />
+          </StickerSheet.Row>
         </StickerSheet>
 
-        <StickerSheet isReversed={isReversed} heading="Validation">
-          <StickerSheet.Header headings={["Error", "Caution"]} />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <DatePicker
-                labelText="Label"
-                selectedDay={new Date("potato")}
-                onDayChange={() => undefined}
-                isReversed={isReversed}
-              />
-              <DatePicker
-                labelText="Label"
-                selectedDay={undefined}
-                onDayChange={() => undefined}
-                isReversed={isReversed}
-                status="caution"
-                validationMessage="Custom cautionary message"
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet
+          isReversed={isReversed}
+          title="Validation"
+          headers={["Error", "Caution"]}
+        >
+          <StickerSheet.Row>
+            <DatePicker
+              labelText="Label"
+              selectedDay={new Date("potato")}
+              onDayChange={() => undefined}
+              isReversed={isReversed}
+            />
+            <DatePicker
+              labelText="Label"
+              selectedDay={undefined}
+              onDayChange={() => undefined}
+              isReversed={isReversed}
+              status="caution"
+              validationMessage="Custom cautionary message"
+            />
+          </StickerSheet.Row>
         </StickerSheet>
       </>
     )
@@ -185,50 +183,37 @@ export const StickerSheetLocales: StickerSheetStory = {
   name: "Sticker Sheet (Locales)",
   render: () => (
     <>
-      <StickerSheet heading="Localisation">
-        <StickerSheet.Header headings={["en-AU", "en-US"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <DatePicker
-              labelText="Label"
-              selectedDay={new Date("2022, 1, 5")}
-              onDayChange={() => undefined}
-            />
+      <StickerSheet title="Localisation" headers={["en-AU", "en-US"]}>
+        <StickerSheet.Row>
+          <DatePicker
+            labelText="Label"
+            selectedDay={new Date("2022, 1, 5")}
+            onDayChange={() => undefined}
+          />
+          <DatePicker
+            labelText="Label"
+            selectedDay={new Date("2022, 1, 5")}
+            onDayChange={() => undefined}
+            locale="en-US"
+          />
+        </StickerSheet.Row>
+      </StickerSheet>
+
+      <StickerSheet headers={["fr-CA"]} className="mt-32 pb-[400px]">
+        <StickerSheet.Row>
+          <StaticIntlProvider locale="fr-CA">
             <DatePicker
               labelText="Label"
               selectedDay={new Date("2022, 1, 5")}
               onDayChange={() => undefined}
-              locale="en-US"
+              locale="fr-CA"
+              data-testid="id--dp-fr-ca"
             />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
-      </StickerSheet>
-
-      <StickerSheet>
-        <StickerSheet.Header headings={["fr-CA"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <StaticIntlProvider locale="fr-CA">
-              <DatePicker
-                labelText="Label"
-                selectedDay={new Date("2022, 1, 5")}
-                onDayChange={() => undefined}
-                locale="fr-CA"
-                data-testid="id--dp-fr-ca"
-              />
-            </StaticIntlProvider>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+          </StaticIntlProvider>
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),
-  decorators: [
-    Story => (
-      <div className="mb-[400px]">
-        <Story />
-      </div>
-    ),
-  ],
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     await userEvent.click(canvas.getByTestId("id--dp-fr-ca"))

package/src/DatePicker/_docs/getLocale.stickersheet.stories.tsx

@@ -32,17 +32,15 @@ export const UtilGetLocale: StickerSheetStory = {
     ]
 
     return (
-      <StickerSheet heading="Util - getLocale">
-        <StickerSheet.Body>
-          {locales.map(locale => (
-            <StickerSheet.Row key={locale} rowTitle={locale}>
-              <CalendarSingle
-                defaultMonth={new Date("2021-09-05")}
-                locale={getLocale(locale)}
-              />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+      <StickerSheet title="Util - getLocale">
+        {locales.map(locale => (
+          <StickerSheet.Row key={locale} header={locale}>
+            <CalendarSingle
+              defaultMonth={new Date("2021-09-05")}
+              locale={getLocale(locale)}
+            />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
     )
   },

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

@@ -43,15 +43,13 @@ const DateRangePickerTemplate = (
   }, [selectedDateRange])
 
   return (
-    <>
-      <DateRangePicker
-        labelText="Label"
-        onChange={onDateRangeChange}
-        value={value}
-        selectedDateRange={selectedDateRange}
-        {...props}
-      />
-    </>
+    <DateRangePicker
+      labelText="Label"
+      onChange={onDateRangeChange}
+      value={value}
+      selectedDateRange={selectedDateRange}
+      {...props}
+    />
   )
 }
 
@@ -83,28 +81,28 @@ const selectedDateRange = {
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <>
-      <StickerSheet>
-        <StickerSheet.Header
-          headings={["Default", "Selected Value", "Disabled"]}
-          hasVerticalHeadings
-          headingsWidth={250}
-        />
-        <StickerSheet.Row rowTitle="Date Range Picker Input">
-          <DateRangePickerTemplate />
-          <DateRangePickerTemplate
-            selectedDateRange={selectedDateRange}
-            value="Mar 6 – Mar 2, 2022"
-          />
-          <DateRangePickerTemplate isDisabled />
+      <StickerSheet headers={["Default", "Selected Value", "Disabled"]}>
+        <StickerSheet.Row header="Date Range Picker Input">
+          <StickerSheet.Cell className="w-[250px]">
+            <DateRangePickerTemplate />
+          </StickerSheet.Cell>
+          <StickerSheet.Cell className="w-[250px]">
+            <DateRangePickerTemplate
+              selectedDateRange={selectedDateRange}
+              value="Mar 6 – Mar 2, 2022"
+            />
+          </StickerSheet.Cell>
+          <StickerSheet.Cell className="w-[250px]">
+            <DateRangePickerTemplate isDisabled />
+          </StickerSheet.Cell>
         </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet>
-        <StickerSheet.Header
-          headings={["Selected Range Dates", "Disabled Dates"]}
-          hasVerticalHeadings
-        />
-        <StickerSheet.Row rowTitle="Date Range Calendar (Legacy)">
+      <StickerSheet
+        headers={["Selected Range Dates", "Disabled Dates"]}
+        className="mt-32"
+      >
+        <StickerSheet.Row header="Date Range Calendar (Legacy)">
           <LegacyCalendarRangeTemplate selectedRange={selectedDateRange} />
           <LegacyCalendarRangeTemplate
             disabledDays={[

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

@@ -16,19 +16,22 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header headings={["Variant", "Example"]} />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Content">
+    <StickerSheet isReversed={isReversed} title="Divider" layout="stretch">
+      <StickerSheet.Row header="Content">
+        <StickerSheet.Cell className="grid items-center">
           <Divider variant="content" isReversed={isReversed} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Canvas">
+        </StickerSheet.Cell>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Canvas">
+        <StickerSheet.Cell className="grid items-center">
           <Divider variant="canvas" isReversed={isReversed} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Menu Separator">
+        </StickerSheet.Cell>
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Menu Separator">
+        <StickerSheet.Cell className="grid items-center">
           <Divider variant="menuSeparator" isReversed={isReversed} />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+        </StickerSheet.Cell>
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

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

@@ -6,7 +6,7 @@ import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
-} from "~storybook/components/_future/StickerSheet"
+} from "~storybook/components/StickerSheet"
 import { EmptyState, EmptyStateProps } from "../index"
 
 export default {
@@ -56,7 +56,11 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet isReversed={isReversed} title="EmptyState">
+        <StickerSheet
+          isReversed={isReversed}
+          title="EmptyState"
+          layout="stretch"
+        >
           {variants.map(variant => (
             <StickerSheet.Row key={variant} header={variant}>
               <EmptyStateWrapper {...defaultProps} variant={variant} />
@@ -93,6 +97,7 @@ const StickerSheetTemplate: StickerSheetStory = {
         <StickerSheet
           isReversed={isReversed}
           title="Illustration type (deprecated)"
+          layout="stretch"
         >
           {illustrationTypes.map(illustrationType => (
             <StickerSheet.Row key={illustrationType} header={illustrationType}>

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

@@ -33,28 +33,24 @@ export default {
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
-      <StickerSheet heading="ErrorPage" isReversed={isReversed}>
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <ErrorPage code="400" />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet title="ErrorPage" isReversed={isReversed}>
+        <StickerSheet.Row>
+          <ErrorPage code="400" />
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet heading="Custom error" isReversed={isReversed}>
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <ErrorPage
-              code="400"
-              title="This is a 400 custom title"
-              message="This is a custom 400 message"
-              callToAction={{
-                onContactSupport: () => alert("Custom handler"),
-                homeHref: "/anewhome",
-              }}
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet title="Custom error" isReversed={isReversed}>
+        <StickerSheet.Row>
+          <ErrorPage
+            code="400"
+            title="This is a 400 custom title"
+            message="This is a custom 400 message"
+            callToAction={{
+              onContactSupport: () => alert("Custom handler"),
+              homeHref: "/anewhome",
+            }}
+          />
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),

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

@@ -36,14 +36,11 @@ const FieldGroupTemplate = ({
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header headings={["Default", "Inline"]} />
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <FieldGroupTemplate id="1" />
-          <FieldGroupTemplate id="2" inline={true} />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet isReversed={isReversed} headers={["Default", "Inline"]}>
+      <StickerSheet.Row>
+        <FieldGroupTemplate id="1" />
+        <FieldGroupTemplate id="2" inline={true} />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

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

@@ -20,26 +20,16 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed, ...otherProps }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Default", "Success", "Error", "Caution"]}
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <FieldMessage {...otherProps} reversed={isReversed} />
-          <FieldMessage
-            {...otherProps}
-            reversed={isReversed}
-            status="success"
-          />
-          <FieldMessage {...otherProps} reversed={isReversed} status="error" />
-          <FieldMessage
-            {...otherProps}
-            reversed={isReversed}
-            status="caution"
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Default", "Success", "Error", "Caution"]}
+    >
+      <StickerSheet.Row>
+        <FieldMessage {...otherProps} reversed={isReversed} />
+        <FieldMessage {...otherProps} reversed={isReversed} status="success" />
+        <FieldMessage {...otherProps} reversed={isReversed} status="error" />
+        <FieldMessage {...otherProps} reversed={isReversed} status="caution" />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }