@kaizen/components 1.68.6 → 1.68.8

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

@@ -1,9 +1,9 @@
-import React from "react"
-import { action } from "@storybook/addon-actions"
-import { Meta, StoryObj } from "@storybook/react"
-import { Text } from "~components/Text"
-import { Icon } from "~components/__future__/Icon"
-import { StickerSheetStory } from "~storybook/components/StickerSheet"
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import { Meta, StoryObj } from '@storybook/react'
+import { Text } from '~components/Text'
+import { Icon } from '~components/__future__/Icon'
+import { StickerSheetStory } from '~storybook/components/StickerSheet'
 import {
   TableCard,
   TableContainer,
@@ -11,31 +11,31 @@ import {
   TableHeaderRowCell,
   TableRow,
   TableRowCell,
-} from "../index"
+} from '../index'
 
 export default {
-  title: "Components/Table",
+  title: 'Components/Table',
   parameters: {
     chromatic: { disable: false },
     docs: {
-      source: { type: "dynamic" },
+      source: { type: 'dynamic' },
     },
     a11y: {
       config: {
         rules: [
           {
             // Fixing this in a rebuild
-            id: "nested-interactive",
+            id: 'nested-interactive',
             enabled: false,
           },
           {
             // Fixing this in a rebuild
-            id: "aria-required-children",
+            id: 'aria-required-children',
             enabled: false,
           },
           {
             // Fixing this in a rebuild
-            id: "aria-required-parent",
+            id: 'aria-required-parent',
             enabled: false,
           },
         ],
@@ -43,7 +43,7 @@ export default {
     },
   },
   decorators: [
-    Story => (
+    (Story) => (
       <div className="w-full max-w-[60rem] flex flex-col gap-12 mx-auto">
         <Story />
       </div>
@@ -54,11 +54,7 @@ export default {
 const TableTemplate: StoryObj<StickerSheetStory> = {
   render: ({ isReversed }) => (
     <>
-      <Text
-        tag="div"
-        variant="intro-lede"
-        color={isReversed ? "white" : "dark"}
-      >
+      <Text tag="div" variant="intro-lede" color={isReversed ? 'white' : 'dark'}>
         TableHeaderRowCell with long titles
       </Text>
       <TableContainer>
@@ -68,13 +64,13 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               reversed={isReversed}
               labelText="Default"
               width={4 / 12}
-              onClick={action("header 1")}
+              onClick={action('header 1')}
             />
             <TableHeaderRowCell
               reversed={isReversed}
               labelText="Long title that should convert to ellipsis lorem ipsum thing"
               width={4 / 12}
-              onClick={action("header 3")}
+              onClick={action('header 3')}
             />
             <TableHeaderRowCell
               reversed={isReversed}
@@ -82,11 +78,11 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               width={4 / 12}
               wrapping="wrap"
               align="end"
-              onClick={action("header 2")}
+              onClick={action('header 2')}
             />
           </TableRow>
         </TableHeader>
-        <TableCard onClick={action("TableCard onClick")}>
+        <TableCard onClick={action('TableCard onClick')}>
           <TableRow>
             <TableRowCell width={4 / 12}>
               <Text tag="div" variant="body">
@@ -106,11 +102,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
           </TableRow>
         </TableCard>
       </TableContainer>
-      <Text
-        tag="div"
-        variant="intro-lede"
-        color={isReversed ? "white" : "dark"}
-      >
+      <Text tag="div" variant="intro-lede" color={isReversed ? 'white' : 'dark'}>
         TableHeaderRowCell onClick
       </Text>
       <TableContainer>
@@ -121,7 +113,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               labelText="Default"
               width={4 / 12}
               sorting="descending"
-              onClick={action("header 1")}
+              onClick={action('header 1')}
               data-sb-pseudo-styles="hover"
             />
             <TableHeaderRowCell
@@ -129,7 +121,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               labelText="Hover"
               width={4 / 12}
               sorting="ascending"
-              onClick={action("header 3")}
+              onClick={action('header 3')}
               data-sb-pseudo-styles="hover"
             />
             <TableHeaderRowCell
@@ -137,12 +129,12 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               labelText="Focus"
               width={4 / 12}
               sorting="ascending"
-              onClick={action("header 2")}
+              onClick={action('header 2')}
               data-sb-pseudo-styles="focus-visible"
             />
           </TableRow>
         </TableHeader>
-        <TableCard onClick={action("TableCard onClick")}>
+        <TableCard onClick={action('TableCard onClick')}>
           <TableRow>
             <TableRowCell width={4 / 12}>
               <Text tag="div" variant="body">
@@ -162,11 +154,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
           </TableRow>
         </TableCard>
       </TableContainer>
-      <Text
-        tag="div"
-        variant="intro-lede"
-        color={isReversed ? "white" : "dark"}
-      >
+      <Text tag="div" variant="intro-lede" color={isReversed ? 'white' : 'dark'}>
         TableHeaderRowCell icons with onClick
       </Text>
       <TableContainer>
@@ -177,7 +165,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               labelText="Default"
               width={4 / 12}
               sorting="descending"
-              onClick={action("header 1")}
+              onClick={action('header 1')}
               icon={<Icon name="potted_plant" alt="Focus" isFilled />}
             />
             <TableHeaderRowCell
@@ -185,7 +173,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               labelText="Hover"
               width={4 / 12}
               sorting="ascending"
-              onClick={action("header 3")}
+              onClick={action('header 3')}
               data-sb-pseudo-styles="hover"
               icon={<Icon name="potted_plant" alt="Focus" isFilled />}
             />
@@ -194,13 +182,13 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               labelText="Focus"
               width={4 / 12}
               sorting="ascending"
-              onClick={action("header 2")}
+              onClick={action('header 2')}
               data-sb-pseudo-styles="focus-visible"
               icon={<Icon name="potted_plant" alt="Focus" isFilled />}
             />
           </TableRow>
         </TableHeader>
-        <TableCard onClick={action("TableCard onClick")}>
+        <TableCard onClick={action('TableCard onClick')}>
           <TableRow>
             <TableRowCell width={4 / 12}>
               <Text tag="div" variant="body">
@@ -220,11 +208,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
           </TableRow>
         </TableCard>
       </TableContainer>
-      <Text
-        tag="div"
-        variant="intro-lede"
-        color={isReversed ? "white" : "dark"}
-      >
+      <Text tag="div" variant="intro-lede" color={isReversed ? 'white' : 'dark'}>
         TableHeaderRowCell tooltips
       </Text>
       <TableContainer>
@@ -235,7 +219,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               labelText="Default"
               width={4 / 12}
               sorting="descending"
-              onClick={action("header 1")}
+              onClick={action('header 1')}
               tooltipInfo="Default state"
             />
             <TableHeaderRowCell
@@ -243,7 +227,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               labelText="Hover"
               width={4 / 12}
               sorting="ascending"
-              onClick={action("header 3")}
+              onClick={action('header 3')}
               data-sb-pseudo-styles="hover"
               tooltipInfo="Hover state."
             />
@@ -252,13 +236,13 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               labelText="Focus"
               width={4 / 12}
               sorting="ascending"
-              onClick={action("header 2")}
+              onClick={action('header 2')}
               data-sb-pseudo-styles="focus-visible"
               tooltipInfo="focus state"
             />
           </TableRow>
         </TableHeader>
-        <TableCard onClick={action("TableCard onClick")}>
+        <TableCard onClick={action('TableCard onClick')}>
           <TableRow>
             <TableRowCell width={4 / 12}>
               <Text tag="div" variant="body">
@@ -278,11 +262,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
           </TableRow>
         </TableCard>
       </TableContainer>
-      <Text
-        tag="div"
-        variant="intro-lede"
-        color={isReversed ? "white" : "dark"}
-      >
+      <Text tag="div" variant="intro-lede" color={isReversed ? 'white' : 'dark'}>
         TableHeaderRowCell checkable
       </Text>
       <TableContainer>
@@ -313,7 +293,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
             />
           </TableRow>
         </TableHeader>
-        <TableCard onClick={action("TableCard onClick")}>
+        <TableCard onClick={action('TableCard onClick')}>
           <TableRow>
             <TableRowCell width={4 / 12}>
               <Text tag="div" variant="body">
@@ -333,34 +313,18 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
           </TableRow>
         </TableCard>
       </TableContainer>
-      <Text
-        tag="div"
-        variant="intro-lede"
-        color={isReversed ? "white" : "dark"}
-      >
+      <Text tag="div" variant="intro-lede" color={isReversed ? 'white' : 'dark'}>
         TableCard onClick
       </Text>
       <TableContainer>
         <TableHeader>
           <TableRow>
-            <TableHeaderRowCell
-              reversed={isReversed}
-              labelText="State"
-              width={4 / 12}
-            />
-            <TableHeaderRowCell
-              reversed={isReversed}
-              labelText="Second column"
-              width={4 / 12}
-            />
-            <TableHeaderRowCell
-              reversed={isReversed}
-              labelText="Third column"
-              width={4 / 12}
-            />
+            <TableHeaderRowCell reversed={isReversed} labelText="State" width={4 / 12} />
+            <TableHeaderRowCell reversed={isReversed} labelText="Second column" width={4 / 12} />
+            <TableHeaderRowCell reversed={isReversed} labelText="Third column" width={4 / 12} />
           </TableRow>
         </TableHeader>
-        <TableCard onClick={action("TableCard onClick")}>
+        <TableCard onClick={action('TableCard onClick')}>
           <TableRow>
             <TableRowCell width={4 / 12}>
               <Text tag="div" variant="body">
@@ -379,10 +343,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
             </TableRowCell>
           </TableRow>
         </TableCard>
-        <TableCard
-          data-sb-pseudo-styles="hover"
-          onClick={action("TableCard onClick")}
-        >
+        <TableCard data-sb-pseudo-styles="hover" onClick={action('TableCard onClick')}>
           <TableRow>
             <TableRowCell width={4 / 12}>
               <Text tag="div" variant="body">
@@ -401,10 +362,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
             </TableRowCell>
           </TableRow>
         </TableCard>
-        <TableCard
-          data-sb-pseudo-styles="focus-visible"
-          onClick={action("TableCard onClick")}
-        >
+        <TableCard data-sb-pseudo-styles="focus-visible" onClick={action('TableCard onClick')}>
           <TableRow>
             <TableRowCell width={4 / 12}>
               <Text tag="div" variant="body">
@@ -424,34 +382,18 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
           </TableRow>
         </TableCard>
       </TableContainer>
-      <Text
-        tag="div"
-        variant="intro-lede"
-        color={isReversed ? "white" : "dark"}
-      >
+      <Text tag="div" variant="intro-lede" color={isReversed ? 'white' : 'dark'}>
         TableCard popout
       </Text>
       <TableContainer>
         <TableHeader>
           <TableRow>
-            <TableHeaderRowCell
-              reversed={isReversed}
-              labelText="State"
-              width={4 / 12}
-            />
-            <TableHeaderRowCell
-              reversed={isReversed}
-              labelText="Second Colum"
-              width={4 / 12}
-            />
-            <TableHeaderRowCell
-              reversed={isReversed}
-              labelText="Third column"
-              width={4 / 12}
-            />
+            <TableHeaderRowCell reversed={isReversed} labelText="State" width={4 / 12} />
+            <TableHeaderRowCell reversed={isReversed} labelText="Second Colum" width={4 / 12} />
+            <TableHeaderRowCell reversed={isReversed} labelText="Third column" width={4 / 12} />
           </TableRow>
         </TableHeader>
-        <TableCard onClick={action("TableCard onClick")}>
+        <TableCard onClick={action('TableCard onClick')}>
           <TableRow>
             <TableRowCell width={4 / 12}>
               <Text tag="div" variant="body">
@@ -470,11 +412,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
             </TableRowCell>
           </TableRow>
         </TableCard>
-        <TableCard
-          onClick={action("TableCard onClick")}
-          expanded
-          expandedStyle="popout"
-        >
+        <TableCard onClick={action('TableCard onClick')} expanded expandedStyle="popout">
           <TableRow>
             <TableRowCell width={4 / 12}>
               <Text tag="div" variant="body">
@@ -495,7 +433,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
         </TableCard>
         <TableCard
           data-sb-pseudo-styles="hover"
-          onClick={action("TableCard onClick")}
+          onClick={action('TableCard onClick')}
           expanded
           expandedStyle="popout"
         >
@@ -519,7 +457,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
         </TableCard>
         <TableCard
           data-sb-pseudo-styles="focus-visible"
-          onClick={action("TableCard onClick")}
+          onClick={action('TableCard onClick')}
           expanded
           expandedStyle="popout"
         >
@@ -542,34 +480,18 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
           </TableRow>
         </TableCard>
       </TableContainer>
-      <Text
-        tag="div"
-        variant="intro-lede"
-        color={isReversed ? "white" : "dark"}
-      >
+      <Text tag="div" variant="intro-lede" color={isReversed ? 'white' : 'dark'}>
         TableCard well
       </Text>
       <TableContainer>
         <TableHeader>
           <TableRow>
-            <TableHeaderRowCell
-              reversed={isReversed}
-              labelText="State"
-              width={4 / 12}
-            />
-            <TableHeaderRowCell
-              reversed={isReversed}
-              labelText="Second Colum"
-              width={4 / 12}
-            />
-            <TableHeaderRowCell
-              reversed={isReversed}
-              labelText="Third column"
-              width={4 / 12}
-            />
+            <TableHeaderRowCell reversed={isReversed} labelText="State" width={4 / 12} />
+            <TableHeaderRowCell reversed={isReversed} labelText="Second Colum" width={4 / 12} />
+            <TableHeaderRowCell reversed={isReversed} labelText="Third column" width={4 / 12} />
           </TableRow>
         </TableHeader>
-        <TableCard onClick={action("TableCard onClick")}>
+        <TableCard onClick={action('TableCard onClick')}>
           <TableRow>
             <TableRowCell width={4 / 12}>
               <Text tag="div" variant="body">
@@ -588,7 +510,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
             </TableRowCell>
           </TableRow>
         </TableCard>
-        <TableCard onClick={action("TableCard onClick")} expanded>
+        <TableCard onClick={action('TableCard onClick')} expanded>
           <TableRow>
             <TableRowCell width={4 / 12}>
               <Text tag="div" variant="body">
@@ -608,7 +530,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
           </TableRow>
         </TableCard>
         <TableCard
-          onClick={action("TableCard onClick")}
+          onClick={action('TableCard onClick')}
           expanded
           expandedStyle="well"
           data-sb-pseudo-styles="hover"
@@ -632,7 +554,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
           </TableRow>
         </TableCard>
         <TableCard
-          onClick={action("TableCard onClick")}
+          onClick={action('TableCard onClick')}
           expanded
           expandedStyle="well"
           data-sb-pseudo-styles="focus-visible"
@@ -681,21 +603,21 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
 
 export const StickerSheetDefault: StoryObj<StickerSheetStory> = {
   ...TableTemplate,
-  name: "Sticker Sheet (Default)",
+  name: 'Sticker Sheet (Default)',
 }
 
 export const StickerSheetRTL: StoryObj<StickerSheetStory> = {
   ...TableTemplate,
-  name: "Sticker Sheet (RTL)",
-  parameters: { ...TableTemplate.parameters, textDirection: "rtl" },
+  name: 'Sticker Sheet (RTL)',
+  parameters: { ...TableTemplate.parameters, textDirection: 'rtl' },
 }
 
 export const StickerSheetReversed: StoryObj<StickerSheetStory> = {
   ...TableTemplate,
-  name: "Sticker Sheet (Reversed)",
+  name: 'Sticker Sheet (Reversed)',
   parameters: {
     ...TableTemplate.parameters,
-    backgrounds: { default: "Purple 700" },
+    backgrounds: { default: 'Purple 700' },
   },
   args: {
     isReversed: true,