@kaizen/components 1.68.2 → 1.68.4

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

@@ -40,39 +40,40 @@ const StickerSheetTemplate: StickerSheetStory = {
       <>
         {variants.map(({ heading, variantProps }) => (
           <React.Fragment key={heading}>
-            <StickerSheet isReversed={isReversed} heading={heading}>
-              <StickerSheet.Header headings={["Base", "Filled", "Loading"]} />
-              <StickerSheet.Body>
-                <StickerSheet.Row>
-                  <SearchField {...variantProps} {...COMMON_PROPS} value="" />
-                  <SearchField {...variantProps} {...COMMON_PROPS} />
-                  <SearchField {...variantProps} {...COMMON_PROPS} loading />
-                </StickerSheet.Row>
-              </StickerSheet.Body>
+            <StickerSheet
+              isReversed={isReversed}
+              title={heading}
+              headers={["Base", "Filled", "Loading"]}
+            >
+              <StickerSheet.Row>
+                <SearchField {...variantProps} {...COMMON_PROPS} value="" />
+                <SearchField {...variantProps} {...COMMON_PROPS} />
+                <SearchField {...variantProps} {...COMMON_PROPS} loading />
+              </StickerSheet.Row>
             </StickerSheet>
 
-            <StickerSheet isReversed={isReversed}>
-              <StickerSheet.Header headings={["Disabled", "Hover", "Focus"]} />
-              <StickerSheet.Body>
-                <StickerSheet.Row>
-                  <SearchField
-                    {...variantProps}
-                    {...COMMON_PROPS}
-                    value=""
-                    disabled
-                  />
-                  <SearchField
-                    {...variantProps}
-                    {...COMMON_PROPS}
-                    classNameOverride="story__input-search-hover"
-                  />
-                  <SearchField
-                    {...variantProps}
-                    {...COMMON_PROPS}
-                    classNameOverride="story__input-search-focus"
-                  />
-                </StickerSheet.Row>
-              </StickerSheet.Body>
+            <StickerSheet
+              isReversed={isReversed}
+              headers={["Disabled", "Hover", "Focus"]}
+            >
+              <StickerSheet.Row>
+                <SearchField
+                  {...variantProps}
+                  {...COMMON_PROPS}
+                  value=""
+                  disabled
+                />
+                <SearchField
+                  {...variantProps}
+                  {...COMMON_PROPS}
+                  classNameOverride="story__input-search-hover"
+                />
+                <SearchField
+                  {...variantProps}
+                  {...COMMON_PROPS}
+                  classNameOverride="story__input-search-focus"
+                />
+              </StickerSheet.Row>
             </StickerSheet>
           </React.Fragment>
         ))}

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

@@ -45,136 +45,137 @@ const OPTIONS = [
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
-      <StickerSheet isReversed={isReversed} heading="Default Select">
-        <StickerSheet.Header
-          headings={["Base", "Clearable", "Disabled"]}
-          hasVerticalHeadings
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row rowTitle="Default">
-            <Select options={OPTIONS} reversed={isReversed} label="Select" />
-            <Select
-              options={OPTIONS}
-              reversed={isReversed}
-              defaultValue={OPTIONS[0]}
-              isClearable
-              label="Select"
-            />
-            <Select
-              options={OPTIONS}
-              reversed={isReversed}
-              label="Select"
-              isDisabled
-            />
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Ellipsis">
-            <Select
-              options={OPTIONS}
-              reversed={isReversed}
-              defaultValue={OPTIONS[9]}
-              label="Select"
-            />
-            <Select
-              options={OPTIONS}
-              reversed={isReversed}
-              defaultValue={OPTIONS[9]}
-              label="Select"
-              isClearable
-            />
-            <Select
-              options={OPTIONS}
-              reversed={isReversed}
-              defaultValue={OPTIONS[9]}
-              label="Select"
-              isDisabled
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        isReversed={isReversed}
+        title="Default Select"
+        headers={["Base", "Clearable", "Disabled"]}
+      >
+        <StickerSheet.Row header="Default">
+          <Select options={OPTIONS} reversed={isReversed} label="Select" />
+          <Select
+            options={OPTIONS}
+            reversed={isReversed}
+            defaultValue={OPTIONS[0]}
+            isClearable
+            label="Select"
+          />
+          <Select
+            options={OPTIONS}
+            reversed={isReversed}
+            label="Select"
+            isDisabled
+          />
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Ellipsis">
+          <Select
+            options={OPTIONS}
+            reversed={isReversed}
+            defaultValue={OPTIONS[9]}
+            label="Select"
+          />
+          <Select
+            options={OPTIONS}
+            reversed={isReversed}
+            defaultValue={OPTIONS[9]}
+            label="Select"
+            isClearable
+          />
+          <Select
+            options={OPTIONS}
+            reversed={isReversed}
+            defaultValue={OPTIONS[9]}
+            label="Select"
+            isDisabled
+          />
+        </StickerSheet.Row>
       </StickerSheet>
-      <StickerSheet isReversed={isReversed} heading="Multi Select">
-        <StickerSheet.Header headings={["Base", "Disabled"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <Select
-              options={OPTIONS}
-              reversed={isReversed}
-              isMulti={true}
-              defaultValue={OPTIONS[0]}
-              label="Select"
-            />
-            <Select
-              options={OPTIONS}
-              reversed={isReversed}
-              defaultValue={OPTIONS[0]}
-              isDisabled
-              isMulti
-              label="Select"
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+
+      <StickerSheet
+        isReversed={isReversed}
+        title="Multi Select"
+        headers={["Base", "Disabled"]}
+      >
+        <StickerSheet.Row>
+          <Select
+            options={OPTIONS}
+            reversed={isReversed}
+            isMulti={true}
+            defaultValue={OPTIONS[0]}
+            label="Select"
+          />
+          <Select
+            options={OPTIONS}
+            reversed={isReversed}
+            defaultValue={OPTIONS[0]}
+            isDisabled
+            isMulti
+            label="Select"
+          />
+        </StickerSheet.Row>
       </StickerSheet>
-      <StickerSheet isReversed={isReversed} heading="Secondary">
-        <StickerSheet.Header
-          headings={["Base", "Disabled"]}
-          hasVerticalHeadings
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row rowTitle="Default">
-            <Select
-              reversed={isReversed}
-              variant="secondary"
-              options={OPTIONS}
-              defaultValue={OPTIONS[0]}
-              label="Select"
-            />
-            <Select
-              reversed={isReversed}
-              variant="secondary"
-              options={OPTIONS}
-              defaultValue={OPTIONS[0]}
-              isDisabled
-              label="Select"
-            />
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Small">
-            <Select
-              reversed={isReversed}
-              variant="secondary-small"
-              options={OPTIONS}
-              defaultValue={OPTIONS[0]}
-              label="Select"
-            />
-            <Select
-              reversed={isReversed}
-              variant="secondary-small"
-              options={OPTIONS}
-              defaultValue={OPTIONS[0]}
-              isDisabled
-              label="Select"
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+
+      <StickerSheet
+        isReversed={isReversed}
+        title="Secondary"
+        headers={["Base", "Disabled"]}
+      >
+        <StickerSheet.Row header="Default">
+          <Select
+            reversed={isReversed}
+            variant="secondary"
+            options={OPTIONS}
+            defaultValue={OPTIONS[0]}
+            label="Select"
+          />
+          <Select
+            reversed={isReversed}
+            variant="secondary"
+            options={OPTIONS}
+            defaultValue={OPTIONS[0]}
+            isDisabled
+            label="Select"
+          />
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Small">
+          <Select
+            reversed={isReversed}
+            variant="secondary-small"
+            options={OPTIONS}
+            defaultValue={OPTIONS[0]}
+            label="Select"
+          />
+          <Select
+            reversed={isReversed}
+            variant="secondary-small"
+            options={OPTIONS}
+            defaultValue={OPTIONS[0]}
+            isDisabled
+            label="Select"
+          />
+        </StickerSheet.Row>
       </StickerSheet>
-      <StickerSheet isReversed={isReversed} heading="Menu">
-        <StickerSheet.Header headings={["Base", "Disabled"]} />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <Select
-              reversed={isReversed}
-              variant="secondary"
-              options={OPTIONS}
-              menuIsOpen
-              label="Select"
-            />
-            <Select
-              reversed={isReversed}
-              variant="secondary"
-              options={[]}
-              menuIsOpen
-              label="Select"
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+
+      <StickerSheet
+        isReversed={isReversed}
+        title="Menu"
+        headers={["Base", "Disabled"]}
+      >
+        <StickerSheet.Row>
+          <Select
+            reversed={isReversed}
+            variant="secondary"
+            options={OPTIONS}
+            menuIsOpen
+            label="Select"
+          />
+          <Select
+            reversed={isReversed}
+            variant="secondary"
+            options={[]}
+            menuIsOpen
+            label="Select"
+          />
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),

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

@@ -16,102 +16,91 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
-    <StickerSheet>
-      <StickerSheet.Header
-        headings={[
-          "Default",
-          "Default (Disabled)",
-          "Prominant",
-          "Prominant (Disabled)",
-        ]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Label Left">
-          <Slider
-            labelText="Slider"
-            description="Example Description"
-            minLabel="Min"
-            maxLabel="Max"
-          />
-          <Slider
-            labelText="Slider"
-            description={
-              <span data-sb-a11y-color-contrast-disable>
-                Example Description
-              </span>
-            }
-            minLabel={<span data-sb-a11y-color-contrast-disable>Min</span>}
-            maxLabel={<span data-sb-a11y-color-contrast-disable>Max</span>}
-            disabled
-            data-sb-a11y-color-contrast-disable
-          />
-          <Slider
-            labelText="Slider"
-            description="Example Description"
-            minLabel="Min"
-            maxLabel="Max"
-            variant="prominent"
-          />
-          <Slider
-            labelText="Slider"
-            description={
-              <span data-sb-a11y-color-contrast-disable>
-                Example Description
-              </span>
-            }
-            minLabel={<span data-sb-a11y-color-contrast-disable>Min</span>}
-            maxLabel={<span data-sb-a11y-color-contrast-disable>Max</span>}
-            variant="prominent"
-            disabled
-            data-sb-a11y-color-contrast-disable
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Label Top">
-          <Slider
-            labelText="Slider"
-            description="Example Description"
-            minLabel="Min"
-            maxLabel="Max"
-            labelPosition="block"
-          />
-          <Slider
-            labelText="Slider"
-            description={
-              <span data-sb-a11y-color-contrast-disable>
-                Example Description
-              </span>
-            }
-            minLabel={<span data-sb-a11y-color-contrast-disable>Min</span>}
-            maxLabel={<span data-sb-a11y-color-contrast-disable>Max</span>}
-            labelPosition="block"
-            disabled
-            data-sb-a11y-color-contrast-disable
-          />
-          <Slider
-            labelText="Slider"
-            description="Example Description"
-            minLabel={<span data-sb-a11y-color-contrast-disable>Min</span>}
-            maxLabel={<span data-sb-a11y-color-contrast-disable>Max</span>}
-            labelPosition="block"
-            variant="prominent"
-          />
-          <Slider
-            labelText="Slider"
-            description={
-              <span data-sb-a11y-color-contrast-disable>
-                Example Description
-              </span>
-            }
-            minLabel={<span data-sb-a11y-color-contrast-disable>Min</span>}
-            maxLabel={<span data-sb-a11y-color-contrast-disable>Max</span>}
-            variant="prominent"
-            labelPosition="block"
-            disabled
-            data-sb-a11y-color-contrast-disable
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      title="Slider"
+      headers={[
+        "Default",
+        "Default (Disabled)",
+        "Prominent",
+        "Prominent (Disabled)",
+      ]}
+    >
+      <StickerSheet.Row header="Label Left">
+        <Slider
+          labelText="Slider"
+          description="Example Description"
+          minLabel="Min"
+          maxLabel="Max"
+        />
+        <Slider
+          labelText="Slider"
+          description={
+            <span data-sb-a11y-color-contrast-disable>Example Description</span>
+          }
+          minLabel={<span data-sb-a11y-color-contrast-disable>Min</span>}
+          maxLabel={<span data-sb-a11y-color-contrast-disable>Max</span>}
+          disabled
+          data-sb-a11y-color-contrast-disable
+        />
+        <Slider
+          labelText="Slider"
+          description="Example Description"
+          minLabel="Min"
+          maxLabel="Max"
+          variant="prominent"
+        />
+        <Slider
+          labelText="Slider"
+          description={
+            <span data-sb-a11y-color-contrast-disable>Example Description</span>
+          }
+          minLabel={<span data-sb-a11y-color-contrast-disable>Min</span>}
+          maxLabel={<span data-sb-a11y-color-contrast-disable>Max</span>}
+          variant="prominent"
+          disabled
+          data-sb-a11y-color-contrast-disable
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Label Top">
+        <Slider
+          labelText="Slider"
+          description="Example Description"
+          minLabel="Min"
+          maxLabel="Max"
+          labelPosition="block"
+        />
+        <Slider
+          labelText="Slider"
+          description={
+            <span data-sb-a11y-color-contrast-disable>Example Description</span>
+          }
+          minLabel={<span data-sb-a11y-color-contrast-disable>Min</span>}
+          maxLabel={<span data-sb-a11y-color-contrast-disable>Max</span>}
+          labelPosition="block"
+          disabled
+          data-sb-a11y-color-contrast-disable
+        />
+        <Slider
+          labelText="Slider"
+          description="Example Description"
+          minLabel={<span data-sb-a11y-color-contrast-disable>Min</span>}
+          maxLabel={<span data-sb-a11y-color-contrast-disable>Max</span>}
+          labelPosition="block"
+          variant="prominent"
+        />
+        <Slider
+          labelText="Slider"
+          description={
+            <span data-sb-a11y-color-contrast-disable>Example Description</span>
+          }
+          minLabel={<span data-sb-a11y-color-contrast-disable>Min</span>}
+          maxLabel={<span data-sb-a11y-color-contrast-disable>Max</span>}
+          variant="prominent"
+          labelPosition="block"
+          disabled
+          data-sb-a11y-color-contrast-disable
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }