@kaizen/components 1.68.1 → 1.68.3

package/src/Filter/FilterBar/_docs/FilterBar.stickersheet.stories.tsx

@@ -122,60 +122,46 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="Filter Bar" style={{ width: "100%" }}>
-          <StickerSheet.Body>
-            <StickerSheet.Row>
+        <StickerSheet title="Filter Bar" layout="stretch">
+          <StickerSheet.Row>
+            <FilterBar<Values>
+              filters={filters}
+              values={activeValues}
+              onValuesChange={setActiveValues}
+            />
+          </StickerSheet.Row>
+        </StickerSheet>
+
+        <StickerSheet title="Overflow (container 500px)" layout="stretch">
+          <StickerSheet.Row>
+            <div style={{ maxWidth: "500px" }}>
               <FilterBar<Values>
                 filters={filters}
-                values={activeValues}
-                onValuesChange={setActiveValues}
+                values={activeValuesOverflow}
+                onValuesChange={setActiveValuesOverflow}
               />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
-        </StickerSheet>
-
-        <StickerSheet
-          heading="Overflow (container 500px)"
-          style={{ width: "100%" }}
-        >
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <div style={{ maxWidth: "500px" }}>
-                <FilterBar<Values>
-                  filters={filters}
-                  values={activeValuesOverflow}
-                  onValuesChange={setActiveValuesOverflow}
-                />
-              </div>
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+            </div>
+          </StickerSheet.Row>
         </StickerSheet>
 
-        <StickerSheet heading="Removable; All active" style={{ width: "100%" }}>
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <FilterBar<ValuesRemovable>
-                filters={removableFilters}
-                values={valuesRemovableAllActive}
-                onValuesChange={setValuesRemovableAllActive}
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet title="Removable; All active" layout="stretch">
+          <StickerSheet.Row>
+            <FilterBar<ValuesRemovable>
+              filters={removableFilters}
+              values={valuesRemovableAllActive}
+              onValuesChange={setValuesRemovableAllActive}
+            />
+          </StickerSheet.Row>
         </StickerSheet>
 
-        <StickerSheet
-          heading="Removable; Partial active"
-          style={{ width: "100%" }}
-        >
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <FilterBar<ValuesRemovable>
-                filters={removableFilters}
-                values={valuesRemovablePartialActive}
-                onValuesChange={setValuesRemovablePartialActive}
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet title="Removable; Partial active" layout="stretch">
+          <StickerSheet.Row>
+            <FilterBar<ValuesRemovable>
+              filters={removableFilters}
+              values={valuesRemovablePartialActive}
+              onValuesChange={setValuesRemovablePartialActive}
+            />
+          </StickerSheet.Row>
         </StickerSheet>
       </>
     )

package/src/Filter/FilterButton/_docs/filter-buttons.stickersheet.stories.tsx

@@ -19,61 +19,55 @@ export default {
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <>
-      <StickerSheet heading="Filter Button Base">
-        <StickerSheet.Header
-          headings={["Default", "Hover", "Active", "Focus"]}
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <FilterButtonBase>Label</FilterButtonBase>
-            <FilterButtonBase
-              data-sb-pseudo-styles="hover"
-              data-sb-a11y-color-contrast-disable
-            >
-              Label
-            </FilterButtonBase>
-            <FilterButtonBase
-              data-sb-pseudo-styles="active"
-              data-sb-a11y-color-contrast-disable
-            >
-              Label
-            </FilterButtonBase>
-            <FilterButtonBase
-              data-sb-pseudo-styles="focus"
-              data-sb-a11y-color-contrast-disable
-            >
-              Label
-            </FilterButtonBase>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        title="Filter Button Base"
+        headers={["Default", "Hover", "Active", "Focus"]}
+      >
+        <StickerSheet.Row>
+          <FilterButtonBase>Label</FilterButtonBase>
+          <FilterButtonBase
+            data-sb-pseudo-styles="hover"
+            data-sb-a11y-color-contrast-disable
+          >
+            Label
+          </FilterButtonBase>
+          <FilterButtonBase
+            data-sb-pseudo-styles="active"
+            data-sb-a11y-color-contrast-disable
+          >
+            Label
+          </FilterButtonBase>
+          <FilterButtonBase
+            data-sb-pseudo-styles="focus"
+            data-sb-a11y-color-contrast-disable
+          >
+            Label
+          </FilterButtonBase>
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet heading="Filter Button">
-        <StickerSheet.Header
-          headings={["Closed", "Open", "Has selected value"]}
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <FilterButton label="Desserts" />
-            <FilterButton label="Desserts" isOpen />
-            <FilterButton label="Desserts" selectedValue="Cake" />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        title="Filter Button"
+        headers={["Closed", "Open", "Has selected value"]}
+      >
+        <StickerSheet.Row>
+          <FilterButton label="Desserts" />
+          <FilterButton label="Desserts" isOpen />
+          <FilterButton label="Desserts" selectedValue="Cake" />
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet heading="Filter Button Removable">
-        <StickerSheet.Body>
-          <StickerSheet.Row rowTitleWidth={70}>
-            <FilterButtonRemovable
-              triggerButtonProps={{
-                label: "Desserts",
-              }}
-              removeButtonProps={{
-                onClick: () => undefined,
-              }}
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet title="Filter Button Removable">
+        <StickerSheet.Row>
+          <FilterButtonRemovable
+            triggerButtonProps={{
+              label: "Desserts",
+            }}
+            removeButtonProps={{
+              onClick: () => undefined,
+            }}
+          />
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),

package/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx

@@ -38,79 +38,73 @@ const StickerSheetTemplate: StickerSheetStory = {
     return (
       <StaticIntlProvider locale="en">
         <StickerSheet
-          heading="Filter Date Picker"
+          title="Filter Date Picker"
           style={{ paddingBottom: IS_CHROMATIC ? "33rem" : undefined }}
+          headers={["No value display", "Value display"]}
         >
-          <StickerSheet.Header
-            headings={["No value display", "Value display"]}
-          />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <FilterDatePicker
-                isOpen={isOpenNoValue}
-                setIsOpen={setIsOpenNoValue}
-                renderTrigger={(triggerButtonProps): JSX.Element => (
-                  <FilterButton {...triggerButtonProps} />
-                )}
-                label="Start day"
-                locale="en-AU"
-                defaultMonth={new Date("2022-05-01")}
-                selectedDate={noDateValue}
-                onDateChange={setNoDateValue}
-              />
-              <FilterDatePicker
-                isOpen={isOpenValue}
-                setIsOpen={setIsOpenValue}
-                renderTrigger={(triggerButtonProps): JSX.Element => (
-                  <FilterButton {...triggerButtonProps} />
-                )}
-                label="Start day"
-                locale="en-AU"
-                selectedDate={dateValue}
-                onDateChange={setDateValue}
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+          <StickerSheet.Row>
+            <FilterDatePicker
+              isOpen={isOpenNoValue}
+              setIsOpen={setIsOpenNoValue}
+              renderTrigger={(triggerButtonProps): JSX.Element => (
+                <FilterButton {...triggerButtonProps} />
+              )}
+              label="Start day"
+              locale="en-AU"
+              defaultMonth={new Date("2022-05-01")}
+              selectedDate={noDateValue}
+              onDateChange={setNoDateValue}
+            />
+            <FilterDatePicker
+              isOpen={isOpenValue}
+              setIsOpen={setIsOpenValue}
+              renderTrigger={(triggerButtonProps): JSX.Element => (
+                <FilterButton {...triggerButtonProps} />
+              )}
+              label="Start day"
+              locale="en-AU"
+              selectedDate={dateValue}
+              onDateChange={setDateValue}
+            />
+          </StickerSheet.Row>
         </StickerSheet>
 
-        <StickerSheet heading="Filter Date Picker Field">
-          <StickerSheet.Body>
-            <StickerSheet.Row rowTitle="Default">
-              <FilterDatePickerField
-                id="stickersheet--filter-dp-field--default"
-                inputProps={{ labelText: "Date" }}
-                locale="en-AU"
-                defaultMonth={new Date("2022-05-01")}
-                selectedDate={noDateValue}
-                onDateChange={setNoDateValue}
-              />
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Existing value">
-              <FilterDatePickerField
-                id="stickersheet--filter-dp-field--existing"
-                inputProps={{ labelText: "Date" }}
-                locale="en-AU"
-                selectedDate={dateValue}
-                onDateChange={setDateValue}
-              />
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Validation">
-              <FilterDatePickerField
-                id="stickersheet--filter-dp-field--validation"
-                inputProps={{ labelText: "Date" }}
-                locale="en-AU"
-                selectedDate={dateValueValidation}
-                defaultMonth={new Date("01-01-2022")}
-                onDateChange={setDateValueValidation}
-                onValidate={action("Validation story: date start onValidate")}
-                validationMessage={{
-                  status: "error",
-                  message:
-                    "(Date custom message) Jelly-filled doughnuts are my favourite!",
-                }}
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet title="Filter Date Picker Field">
+          <StickerSheet.Row header="Default">
+            <FilterDatePickerField
+              id="stickersheet--filter-dp-field--default"
+              inputProps={{ labelText: "Date" }}
+              locale="en-AU"
+              defaultMonth={new Date("2022-05-01")}
+              selectedDate={noDateValue}
+              onDateChange={setNoDateValue}
+            />
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Existing value">
+            <FilterDatePickerField
+              id="stickersheet--filter-dp-field--existing"
+              inputProps={{ labelText: "Date" }}
+              locale="en-AU"
+              selectedDate={dateValue}
+              onDateChange={setDateValue}
+            />
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Validation">
+            <FilterDatePickerField
+              id="stickersheet--filter-dp-field--validation"
+              inputProps={{ labelText: "Date" }}
+              locale="en-AU"
+              selectedDate={dateValueValidation}
+              defaultMonth={new Date("01-01-2022")}
+              onDateChange={setDateValueValidation}
+              onValidate={action("Validation story: date start onValidate")}
+              validationMessage={{
+                status: "error",
+                message:
+                  "(Date custom message) Jelly-filled doughnuts are my favourite!",
+              }}
+            />
+          </StickerSheet.Row>
         </StickerSheet>
       </StaticIntlProvider>
     )
@@ -148,36 +142,23 @@ export const StickerSheetLocales: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="Localisation">
-          <StickerSheet.Header headings={["en-AU", "en-US"]} />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <FilterDatePicker {...props} locale="en-AU" />
-              <FilterDatePicker {...props} locale="en-US" />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet title="Localisation" headers={["en-AU", "en-US"]}>
+          <StickerSheet.Row>
+            <FilterDatePicker {...props} locale="en-AU" />
+            <FilterDatePicker {...props} locale="en-US" />
+          </StickerSheet.Row>
         </StickerSheet>
 
-        <StickerSheet>
-          <StickerSheet.Header headings={["fr-CA"]} />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <StaticIntlProvider locale="fr-CA">
-                <FilterDatePicker {...props} locale="fr-CA" isOpen />
-              </StaticIntlProvider>
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+        <StickerSheet headers={["fr-CA"]} className="mt-32 pb-[500px]">
+          <StickerSheet.Row>
+            <StaticIntlProvider locale="fr-CA">
+              <FilterDatePicker {...props} locale="fr-CA" isOpen />
+            </StaticIntlProvider>
+          </StickerSheet.Row>
         </StickerSheet>
       </>
     )
   },
-  decorators: [
-    Story => (
-      <div className="mb-[500px]">
-        <Story />
-      </div>
-    ),
-  ],
   parameters: {
     a11y: {
       // Wait for translations to load