@kaizen/components 1.68.2 → 1.68.4

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

@@ -45,115 +45,91 @@ const StickerSheetTemplate: StickerSheetStory = {
       <>
         <StickerSheet
           isReversed={isReversed}
-          heading="MultiSelectToggle"
-          className="w-full"
+          title="MultiSelectToggle"
+          layout="stretch"
         >
-          <StickerSheet.Body>
-            <StickerSheet.Row rowTitle="Default" rowTitleWidth="10rem">
-              <MultiSelectToggle {...defaultProps} />
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Open">
-              <MultiSelectToggle {...defaultProps} isOpen />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+          <StickerSheet.Row header="Default">
+            <MultiSelectToggle {...defaultProps} />
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Open">
+            <MultiSelectToggle {...defaultProps} isOpen />
+          </StickerSheet.Row>
         </StickerSheet>
 
         <StickerSheet
           isReversed={isReversed}
-          heading="Pseudo states"
-          className="w-full"
+          title="Pseudo states"
+          layout="stretch"
+          headers={["Hover", "Focus"]}
         >
-          <StickerSheet.Header
-            headings={["Hover", "Focus"]}
-            hasVerticalHeadings
-            verticalHeadingsWidth="10rem"
-          />
-          <StickerSheet.Body>
-            <StickerSheet.Row rowTitle="Toggle">
-              <MultiSelectToggle
-                {...defaultProps}
-                data-sb-pseudo-styles="hover"
-              />
-              <MultiSelectToggle
-                {...defaultProps}
-                data-sb-pseudo-styles="focus"
-              />
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Toggle Button">
-              <MultiSelectToggle
-                {...defaultProps}
-                data-sb-pseudo-styles="hover--button"
-              />
-              <MultiSelectToggle
-                {...defaultProps}
-                data-sb-pseudo-styles="focus--button"
-              />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+          <StickerSheet.Row header="Toggle">
+            <MultiSelectToggle
+              {...defaultProps}
+              data-sb-pseudo-styles="hover"
+            />
+            <MultiSelectToggle
+              {...defaultProps}
+              data-sb-pseudo-styles="focus"
+            />
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Toggle Button">
+            <MultiSelectToggle
+              {...defaultProps}
+              data-sb-pseudo-styles="hover--button"
+            />
+            <MultiSelectToggle
+              {...defaultProps}
+              data-sb-pseudo-styles="focus--button"
+            />
+          </StickerSheet.Row>
         </StickerSheet>
 
         <StickerSheet
           isReversed={isReversed}
-          heading="Validation states"
-          className="w-full"
+          title="Validation states"
+          layout="stretch"
+          headers={["Error", "Caution"]}
         >
-          <StickerSheet.Header
-            headings={["Error", "Caution"]}
-            verticalHeadingsWidth="10rem"
-          />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <MultiSelectToggle status="error" {...defaultProps} />
-              <MultiSelectToggle status="caution" {...defaultProps} />
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+          <StickerSheet.Row>
+            <MultiSelectToggle status="error" {...defaultProps} />
+            <MultiSelectToggle status="caution" {...defaultProps} />
+          </StickerSheet.Row>
         </StickerSheet>
 
         <StickerSheet
           isReversed={isReversed}
-          heading="Has selected values"
-          className="w-full"
+          title="Has selected values"
+          layout="stretch"
+          headers={["Default", "Hover", "Multi-line"]}
         >
-          <StickerSheet.Header
-            headings={["Default", "Hover", "Multi-line"]}
-            headingsWidth="30%"
-          />
-          <StickerSheet.Body>
-            <StickerSheet.Row>
-              <StickerSheet.Cell className="align-top">
-                <MultiSelectToggle
-                  {...defaultProps}
-                  selectedOptions={[
-                    { value: "pancakes", label: "Pancakes" },
-                    { value: "waffles", label: "Waffles" },
-                  ]}
-                />
-              </StickerSheet.Cell>
-              <StickerSheet.Cell className="align-top">
-                <MultiSelectToggle
-                  {...defaultProps}
-                  selectedOptions={[
-                    { value: "pancakes", label: "Pancakes" },
-                    { value: "waffles", label: "Waffles" },
-                  ]}
-                  data-sb-pseudo-styles="hover"
-                />
-              </StickerSheet.Cell>
-              <StickerSheet.Cell className="align-top">
-                <MultiSelectToggle
-                  {...defaultProps}
-                  selectedOptions={[
-                    { value: "pancakes", label: "Pancakes" },
-                    { value: "toastie", label: "Toastie" },
-                    { value: "jaffle", label: "Jaffle" },
-                    { value: "pikelets", label: "Pikelets" },
-                    { value: "crumpets", label: "Crumpets" },
-                    { value: "waffles", label: "Waffles" },
-                  ]}
-                />
-              </StickerSheet.Cell>
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+          <StickerSheet.Row>
+            <MultiSelectToggle
+              {...defaultProps}
+              selectedOptions={[
+                { value: "pancakes", label: "Pancakes" },
+                { value: "waffles", label: "Waffles" },
+              ]}
+            />
+            <MultiSelectToggle
+              {...defaultProps}
+              selectedOptions={[
+                { value: "pancakes", label: "Pancakes" },
+                { value: "waffles", label: "Waffles" },
+              ]}
+              data-sb-pseudo-styles="hover"
+            />
+            <MultiSelectToggle
+              {...defaultProps}
+              selectedOptions={[
+                { value: "pancakes", label: "Pancakes" },
+                { value: "toastie", label: "Toastie" },
+                { value: "jaffle", label: "Jaffle" },
+                { value: "pikelets", label: "Pikelets" },
+                { value: "crumpets", label: "Crumpets" },
+                { value: "waffles", label: "Waffles" },
+              ]}
+            />
+          </StickerSheet.Row>
         </StickerSheet>
       </>
     )

package/src/Notification/GlobalNotification/_docs/GlobalNotification.stickersheet.stories.tsx

@@ -85,23 +85,20 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     return (
       <>
-        <StickerSheet heading="GlobalNotification" isReversed={isReversed}>
-          <StickerSheet.Body>
-            {variants.map(({ title, props }) => (
-              <StickerSheet.Row key={title} rowTitle={title}>
-                <GlobalNotification {...defaultProps} {...props} />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+        <StickerSheet title="GlobalNotification" isReversed={isReversed}>
+          {variants.map(({ title, props }) => (
+            <StickerSheet.Row key={title} header={title}>
+              <GlobalNotification {...defaultProps} {...props} />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
-        <StickerSheet heading="Type (deprecated)" isReversed={isReversed}>
-          <StickerSheet.Body>
-            {types.map(({ title, props }) => (
-              <StickerSheet.Row key={title} rowTitle={title}>
-                <GlobalNotification {...defaultProps} {...props} />
-              </StickerSheet.Row>
-            ))}
-          </StickerSheet.Body>
+
+        <StickerSheet title="Type (deprecated)" isReversed={isReversed}>
+          {types.map(({ title, props }) => (
+            <StickerSheet.Row key={title} header={title}>
+              <GlobalNotification {...defaultProps} {...props} />
+            </StickerSheet.Row>
+          ))}
         </StickerSheet>
       </>
     )

package/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx

@@ -199,23 +199,20 @@ const TYPE_PROPS: Array<{
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
-      <StickerSheet heading="InlineNotification" isReversed={isReversed}>
-        <StickerSheet.Body>
-          {VARIANTS_PROPS.map(({ title, props }) => (
-            <StickerSheet.Row key={title} rowTitle={title}>
-              <InlineNotification {...DEFAULT_PROPS} {...props} />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+      <StickerSheet title="InlineNotification" isReversed={isReversed}>
+        {VARIANTS_PROPS.map(({ title, props }) => (
+          <StickerSheet.Row key={title} header={title}>
+            <InlineNotification {...DEFAULT_PROPS} {...props} />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
-      <StickerSheet heading="Type (deprecated)" isReversed={isReversed}>
-        <StickerSheet.Body>
-          {TYPE_PROPS.map(({ title, props }) => (
-            <StickerSheet.Row key={title} rowTitle={title}>
-              <InlineNotification {...DEFAULT_PROPS} {...props} />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+
+      <StickerSheet title="Type (deprecated)" isReversed={isReversed}>
+        {TYPE_PROPS.map(({ title, props }) => (
+          <StickerSheet.Row key={title} header={title}>
+            <InlineNotification {...DEFAULT_PROPS} {...props} />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
     </>
   ),

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

@@ -17,80 +17,66 @@ export default {
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <StickerSheet>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Default">
-          <Pagination
-            currentPage={2}
-            pageCount={5}
-            ariaLabelNextPage="Next Page"
-            ariaLabelPreviousPage="Previous Page"
-            ariaLabelPage="Page"
-            onPageChange={() => {
-              alert("Page Change")
-            }}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Truncated (right)">
-          <Pagination
-            currentPage={2}
-            pageCount={10}
-            ariaLabelNextPage="Next Page"
-            ariaLabelPreviousPage="Previous Page"
-            ariaLabelPage="Page"
-            onPageChange={() => {
-              alert("Page Change")
-            }}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Truncated (left &amp; right)">
-          <Pagination
-            currentPage={5}
-            pageCount={10}
-            ariaLabelNextPage="Next Page"
-            ariaLabelPreviousPage="Previous Page"
-            ariaLabelPage="Page"
-            onPageChange={() => {
-              alert("Page Change")
-            }}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Truncated (left)">
-          <Pagination
-            currentPage={8}
-            pageCount={10}
-            ariaLabelNextPage="Next Page"
-            ariaLabelPreviousPage="Previous Page"
-            ariaLabelPage="Page"
-            onPageChange={() => {
-              alert("Page Change")
-            }}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Disabled prev direction">
-          <Pagination
-            currentPage={0}
-            pageCount={10}
-            ariaLabelNextPage="Next Page"
-            ariaLabelPreviousPage="Previous Page"
-            ariaLabelPage="Page"
-            onPageChange={() => {
-              alert("Page Change")
-            }}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Disabled next direction">
-          <Pagination
-            currentPage={10}
-            pageCount={10}
-            ariaLabelNextPage="Next Page"
-            ariaLabelPreviousPage="Previous Page"
-            ariaLabelPage="Page"
-            onPageChange={() => {
-              alert("Page Change")
-            }}
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+      <StickerSheet.Row header="Default">
+        <Pagination
+          currentPage={2}
+          pageCount={5}
+          ariaLabelNextPage="Next Page"
+          ariaLabelPreviousPage="Previous Page"
+          ariaLabelPage="Page"
+          onPageChange={() => alert("Page Change")}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Truncated (right)">
+        <Pagination
+          currentPage={2}
+          pageCount={10}
+          ariaLabelNextPage="Next Page"
+          ariaLabelPreviousPage="Previous Page"
+          ariaLabelPage="Page"
+          onPageChange={() => alert("Page Change")}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Truncated (left &amp; right)">
+        <Pagination
+          currentPage={5}
+          pageCount={10}
+          ariaLabelNextPage="Next Page"
+          ariaLabelPreviousPage="Previous Page"
+          ariaLabelPage="Page"
+          onPageChange={() => alert("Page Change")}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Truncated (left)">
+        <Pagination
+          currentPage={8}
+          pageCount={10}
+          ariaLabelNextPage="Next Page"
+          ariaLabelPreviousPage="Previous Page"
+          ariaLabelPage="Page"
+          onPageChange={() => alert("Page Change")}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Disabled prev direction">
+        <Pagination
+          currentPage={0}
+          pageCount={10}
+          ariaLabelNextPage="Next Page"
+          ariaLabelPreviousPage="Previous Page"
+          ariaLabelPage="Page"
+          onPageChange={() => alert("Page Change")}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Disabled next direction">
+        <Pagination
+          currentPage={10}
+          pageCount={10}
+          ariaLabelNextPage="Next Page"
+          ariaLabelPreviousPage="Previous Page"
+          ariaLabelPage="Page"
+          onPageChange={() => alert("Page Change")}
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

package/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx

@@ -51,29 +51,27 @@ const DIRECTIONAL_LINK_PROPS: Array<{
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        {DIRECTIONAL_LINK_PROPS.map(({ title, props }) => (
-          <StickerSheet.Row key={title} rowTitle={title}>
-            <DirectionalLink {...props} reversed={isReversed} />
-            <DirectionalLink
-              {...props}
-              reversed={isReversed}
-              data-sb-pseudo-styles="hover"
-            />
-            <DirectionalLink
-              {...props}
-              reversed={isReversed}
-              data-sb-pseudo-styles="active"
-            />
-            <DirectionalLink
-              {...props}
-              reversed={isReversed}
-              data-sb-pseudo-styles="focus"
-            />
-            <DirectionalLink {...props} reversed={isReversed} disabled />
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
+      {DIRECTIONAL_LINK_PROPS.map(({ title, props }) => (
+        <StickerSheet.Row key={title} header={title}>
+          <DirectionalLink {...props} reversed={isReversed} />
+          <DirectionalLink
+            {...props}
+            reversed={isReversed}
+            data-sb-pseudo-styles="hover"
+          />
+          <DirectionalLink
+            {...props}
+            reversed={isReversed}
+            data-sb-pseudo-styles="active"
+          />
+          <DirectionalLink
+            {...props}
+            reversed={isReversed}
+            data-sb-pseudo-styles="focus"
+          />
+          <DirectionalLink {...props} reversed={isReversed} disabled />
+        </StickerSheet.Row>
+      ))}
     </StickerSheet>
   ),
   parameters: {

package/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx

@@ -37,34 +37,30 @@ const PAGINATION_LINK_PROPS: Array<{
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Base", "Hover", "Active", "Focus"]}
-        hasVerticalHeadings
-        verticalHeadingsWidth="10rem"
-      />
-      <StickerSheet.Body>
-        {PAGINATION_LINK_PROPS.map(({ title, props }) => (
-          <StickerSheet.Row key={title} rowTitle={title}>
-            <PaginationLink {...props} reversed={isReversed} />
-            <PaginationLink
-              {...props}
-              reversed={isReversed}
-              data-sb-pseudo-styles="hover"
-            />
-            <PaginationLink
-              {...props}
-              reversed={isReversed}
-              data-sb-pseudo-styles="active"
-            />
-            <PaginationLink
-              {...props}
-              reversed={isReversed}
-              data-sb-pseudo-styles="focus"
-            />
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Base", "Hover", "Active", "Focus"]}
+    >
+      {PAGINATION_LINK_PROPS.map(({ title, props }) => (
+        <StickerSheet.Row key={title} header={title}>
+          <PaginationLink {...props} reversed={isReversed} />
+          <PaginationLink
+            {...props}
+            reversed={isReversed}
+            data-sb-pseudo-styles="hover"
+          />
+          <PaginationLink
+            {...props}
+            reversed={isReversed}
+            data-sb-pseudo-styles="active"
+          />
+          <PaginationLink
+            {...props}
+            reversed={isReversed}
+            data-sb-pseudo-styles="focus"
+          />
+        </StickerSheet.Row>
+      ))}
     </StickerSheet>
   ),
   parameters: {

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

@@ -30,57 +30,45 @@ const PopoverWrapper = (
   )
 }
 
-const cellStyle = { width: "400px", height: "250px" }
-
-const PopoverRow = ({
-  placement,
-}: {
-  placement?: PopoverProps["placement"]
-}): JSX.Element => (
-  <StickerSheet.Row rowTitle={placement}>
-    <StickerSheet.Cell style={cellStyle}>
-      <PopoverWrapper placement={placement} />
-    </StickerSheet.Cell>
-  </StickerSheet.Row>
-)
+const cellStyle = {
+  display: "grid",
+  placeContent: "center",
+  width: "220px",
+  height: "250px",
+}
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={[
-          "Default",
-          "Positive",
-          "Informative",
-          "Negative",
-          "Cautionary",
-        ]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Variants (deprecated)">
-          <StickerSheet.Cell style={cellStyle}>
-            <PopoverWrapper />
-          </StickerSheet.Cell>
-          <StickerSheet.Cell style={cellStyle}>
-            <PopoverWrapper variant="positive" heading="Positive" />
-          </StickerSheet.Cell>
-          <StickerSheet.Cell style={cellStyle}>
-            <PopoverWrapper variant="informative" heading="Informative" />
-          </StickerSheet.Cell>
-          <StickerSheet.Cell style={cellStyle}>
-            <PopoverWrapper variant="negative" heading="Negative" />
-          </StickerSheet.Cell>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Default", "Positive", "Informative", "Negative", "Cautionary"]}
+      className="min-w-fit"
+    >
+      <StickerSheet.Row header="Variants (deprecated)">
+        <StickerSheet.Cell style={cellStyle}>
+          <PopoverWrapper />
+        </StickerSheet.Cell>
+        <StickerSheet.Cell style={cellStyle}>
+          <PopoverWrapper variant="positive" heading="Positive" />
+        </StickerSheet.Cell>
+        <StickerSheet.Cell style={cellStyle}>
+          <PopoverWrapper variant="informative" heading="Informative" />
+        </StickerSheet.Cell>
+        <StickerSheet.Cell style={cellStyle}>
+          <PopoverWrapper variant="negative" heading="Negative" />
+        </StickerSheet.Cell>
+        <StickerSheet.Cell style={cellStyle}>
+          <PopoverWrapper variant="cautionary" heading="Cautionary" />
+        </StickerSheet.Cell>
+      </StickerSheet.Row>
+
+      {popoverPlacements.map(placement => (
+        <StickerSheet.Row key={placement} header={placement}>
           <StickerSheet.Cell style={cellStyle}>
-            <PopoverWrapper variant="cautionary" heading="Cautionary" />
+            <PopoverWrapper placement={placement} />
           </StickerSheet.Cell>
         </StickerSheet.Row>
-        <>
-          {popoverPlacements.map(placement => (
-            <PopoverRow key={placement} placement={placement} />
-          ))}
-        </>
-      </StickerSheet.Body>
+      ))}
     </StickerSheet>
   ),
 }