@kaizen/components 1.68.2 → 1.68.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.68.2",
+  "version": "1.68.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

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

@@ -71,39 +71,37 @@ const ROWS: Array<{ title: string; size: AvatarSizes }> = [
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
-      <StickerSheet isReversed={isReversed}>
-        <StickerSheet.Header
-          headings={[
-            "Photo Personal",
-            "Initials Personal",
-            "Initials Generic",
-            "Default User",
-          ]}
-        />
-        <StickerSheet.Body>
-          {ROWS.map(({ title, size }) => (
-            <StickerSheet.Row key={title} rowTitle={title}>
-              <Avatar {...PROPS_PHOTO_PERSONAL} size={size} />
-              <Avatar {...PROPS_INITIALS_PERSONAL} size={size} />
-              <Avatar {...PROPS_INITIALS_GENERIC} size={size} />
-              <Avatar {...PROPS_INITIALS_GENERIC} disableInitials size={size} />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+      <StickerSheet
+        isReversed={isReversed}
+        headers={[
+          "Photo Personal",
+          "Initials Personal",
+          "Initials Generic",
+          "Default User",
+        ]}
+      >
+        {ROWS.map(({ title, size }) => (
+          <StickerSheet.Row key={title} header={title}>
+            <Avatar {...PROPS_PHOTO_PERSONAL} size={size} />
+            <Avatar {...PROPS_INITIALS_PERSONAL} size={size} />
+            <Avatar {...PROPS_INITIALS_GENERIC} size={size} />
+            <Avatar {...PROPS_INITIALS_GENERIC} disableInitials size={size} />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
-      <StickerSheet isReversed={isReversed}>
-        <StickerSheet.Header
-          headings={["Initials Unicode", "Initials Long", "Company Avatar"]}
-        />
-        <StickerSheet.Body>
-          {ROWS.map(({ title, size }) => (
-            <StickerSheet.Row key={title} rowTitle={title}>
-              <Avatar {...PROPS_INITIALS_UNICODE} size={size} />
-              <Avatar {...PROPS_INITIALS_LONG} size={size} />
-              <Avatar {...PROPS_COMPANY} size={size} />
-            </StickerSheet.Row>
-          ))}
-        </StickerSheet.Body>
+
+      <StickerSheet
+        isReversed={isReversed}
+        headers={["Initials Unicode", "Initials Long", "Company Avatar"]}
+        className="mt-64"
+      >
+        {ROWS.map(({ title, size }) => (
+          <StickerSheet.Row key={title} header={title}>
+            <Avatar {...PROPS_INITIALS_UNICODE} size={size} />
+            <Avatar {...PROPS_INITIALS_LONG} size={size} />
+            <Avatar {...PROPS_COMPANY} size={size} />
+          </StickerSheet.Row>
+        ))}
       </StickerSheet>
     </>
   ),

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

@@ -23,22 +23,20 @@ const ROWS: Array<{ title: string; size: AvatarGroupSize }> = [
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Size", "With counter", "Without counter"]}
-      />
-      <StickerSheet.Body>
-        {ROWS.map(({ title, size }) => (
-          <StickerSheet.Row key={title} rowTitle={title}>
-            <AvatarGroup maxVisible={2} avatars={AVATARS} size={size} />
-            <AvatarGroup
-              maxVisible={2}
-              avatars={[EXAMPLE_USER_1, EXAMPLE_USER_2]}
-              size={size}
-            />
-          </StickerSheet.Row>
-        ))}
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["With counter", "Without counter"]}
+    >
+      {ROWS.map(({ title, size }) => (
+        <StickerSheet.Row key={title} header={title}>
+          <AvatarGroup maxVisible={2} avatars={AVATARS} size={size} />
+          <AvatarGroup
+            maxVisible={2}
+            avatars={[EXAMPLE_USER_1, EXAMPLE_USER_2]}
+            size={size}
+          />
+        </StickerSheet.Row>
+      ))}
     </StickerSheet>
   ),
 }

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

@@ -16,28 +16,28 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header headings={["Size", "Default", "Active", "Dot"]} />
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Small">
-          <Badge size="small" variant="default" reversed={isReversed}>
-            3
-          </Badge>
-          <Badge size="small" variant="active" reversed={isReversed}>
-            3
-          </Badge>
-          <Badge size="small" variant="dot" reversed={isReversed} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Large">
-          <Badge size="large" variant="default" reversed={isReversed}>
-            3
-          </Badge>
-          <Badge size="large" variant="active" reversed={isReversed}>
-            3
-          </Badge>
-          <Badge size="large" variant="dot" reversed={isReversed} />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Default", "Active", "Dot"]}
+    >
+      <StickerSheet.Row header="Small">
+        <Badge size="small" variant="default" reversed={isReversed}>
+          3
+        </Badge>
+        <Badge size="small" variant="active" reversed={isReversed}>
+          3
+        </Badge>
+        <Badge size="small" variant="dot" reversed={isReversed} />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Large">
+        <Badge size="large" variant="default" reversed={isReversed}>
+          3
+        </Badge>
+        <Badge size="large" variant="active" reversed={isReversed}>
+          3
+        </Badge>
+        <Badge size="large" variant="dot" reversed={isReversed} />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

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

@@ -17,32 +17,30 @@ export default {
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        <StickerSheet.Row rowTitle="Logo Horizontal">
-          <Brand
-            alt="Culture Amp"
-            variant="logo-horizontal"
-            reversed={isReversed}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Logo Vertical">
-          <Brand
-            alt="Culture Amp"
-            variant="logo-vertical"
-            reversed={isReversed}
-          />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Enso">
-          <Brand alt="Culture Amp" variant="enso" reversed={isReversed} />
-        </StickerSheet.Row>
-        <StickerSheet.Row rowTitle="Collective Intelligence">
-          <Brand
-            alt="Collective Intelligence"
-            variant="collective-intelligence"
-            reversed={isReversed}
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+      <StickerSheet.Row header="Logo Horizontal">
+        <Brand
+          alt="Culture Amp"
+          variant="logo-horizontal"
+          reversed={isReversed}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Logo Vertical">
+        <Brand
+          alt="Culture Amp"
+          variant="logo-vertical"
+          reversed={isReversed}
+        />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Enso">
+        <Brand alt="Culture Amp" variant="enso" reversed={isReversed} />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Collective Intelligence">
+        <Brand
+          alt="Collective Intelligence"
+          variant="collective-intelligence"
+          reversed={isReversed}
+        />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }

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

@@ -44,47 +44,43 @@ export default {
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
-      <StickerSheet isReversed={isReversed} heading="Variant">
-        <StickerSheet.Body>
-          <StickerSheet.Row rowTitle="Informative">
-            <BrandMoment {...Informative.args} />
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Success">
-            <BrandMoment {...Success.args} />
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Warning">
-            <BrandMoment {...Warning.args} />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet isReversed={isReversed} title="Variant">
+        <StickerSheet.Row header="Informative">
+          <BrandMoment {...Informative.args} />
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Success">
+          <BrandMoment {...Success.args} />
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Warning">
+          <BrandMoment {...Warning.args} />
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet isReversed={isReversed} heading="Mood (deprecated)">
-        <StickerSheet.Body>
-          <StickerSheet.Row rowTitle="Informative">
-            <BrandMoment
-              {...Informative.args}
-              illustration={<BrandMomentCaptureIntro />}
-              variant={undefined}
-              mood="informative"
-            />
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Positive">
-            <BrandMoment
-              {...Success.args}
-              illustration={<BrandMomentPositiveOutro />}
-              variant={undefined}
-              mood="positive"
-            />
-          </StickerSheet.Row>
-          <StickerSheet.Row rowTitle="Negative">
-            <BrandMoment
-              {...Warning.args}
-              illustration={<BrandMomentError />}
-              variant={undefined}
-              mood="negative"
-            />
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet isReversed={isReversed} title="Mood (deprecated)">
+        <StickerSheet.Row header="Informative">
+          <BrandMoment
+            {...Informative.args}
+            illustration={<BrandMomentCaptureIntro />}
+            variant={undefined}
+            mood="informative"
+          />
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Positive">
+          <BrandMoment
+            {...Success.args}
+            illustration={<BrandMomentPositiveOutro />}
+            variant={undefined}
+            mood="positive"
+          />
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Negative">
+          <BrandMoment
+            {...Warning.args}
+            illustration={<BrandMomentError />}
+            variant={undefined}
+            mood="negative"
+          />
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),

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

@@ -19,132 +19,127 @@ export default {
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
     <>
-      <StickerSheet heading="Button Group">
-        <StickerSheet.Header
-          headings={["Group of 2", "Group of 3", "With tooltip"]}
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row>
-            <ButtonGroup>
-              <FilterButtonBase>First</FilterButtonBase>
-              <FilterButtonBase>Last</FilterButtonBase>
-            </ButtonGroup>
-            <ButtonGroup>
-              <FilterButtonBase>First</FilterButtonBase>
-              <FilterButtonBase>Middle</FilterButtonBase>
-              <FilterButtonBase>Last</FilterButtonBase>
-            </ButtonGroup>
-            <ButtonGroup>
-              <Tooltip text="Hello!">
-                <FilterButtonBase>Tooltips here</FilterButtonBase>
-              </Tooltip>
-              <Tooltip text="Pancakes!">
-                <FilterButtonBase>Styles should still work</FilterButtonBase>
-              </Tooltip>
-            </ButtonGroup>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+      <StickerSheet
+        title="Button Group"
+        headers={["Group of 2", "Group of 3", "With tooltip"]}
+      >
+        <StickerSheet.Row>
+          <ButtonGroup>
+            <FilterButtonBase>First</FilterButtonBase>
+            <FilterButtonBase>Last</FilterButtonBase>
+          </ButtonGroup>
+          <ButtonGroup>
+            <FilterButtonBase>First</FilterButtonBase>
+            <FilterButtonBase>Middle</FilterButtonBase>
+            <FilterButtonBase>Last</FilterButtonBase>
+          </ButtonGroup>
+          <ButtonGroup>
+            <Tooltip text="Hello!">
+              <FilterButtonBase>Tooltips here</FilterButtonBase>
+            </Tooltip>
+            <Tooltip text="Pancakes!">
+              <FilterButtonBase>Styles should still work</FilterButtonBase>
+            </Tooltip>
+          </ButtonGroup>
+        </StickerSheet.Row>
       </StickerSheet>
 
-      <StickerSheet heading="Pseudo states">
-        <StickerSheet.Header
-          headings={["Hover", "Active", "Focus"]}
-          hasVerticalHeadings
-        />
-        <StickerSheet.Body>
-          <StickerSheet.Row rowTitle="First">
-            <ButtonGroup>
-              <FilterButtonBase
-                data-sb-pseudo-styles="hover"
-                data-sb-a11y-color-contrast-disable
-              >
-                First
-              </FilterButtonBase>
-              <FilterButtonBase>Last</FilterButtonBase>
-            </ButtonGroup>
-            <ButtonGroup>
-              <FilterButtonBase
-                data-sb-pseudo-styles="active"
-                data-sb-a11y-color-contrast-disable
-              >
-                First
-              </FilterButtonBase>
-              <FilterButtonBase>Last</FilterButtonBase>
-            </ButtonGroup>
-            <ButtonGroup>
-              <FilterButtonBase
-                data-sb-pseudo-styles="focus"
-                data-sb-a11y-color-contrast-disable
-              >
-                First
-              </FilterButtonBase>
-              <FilterButtonBase>Last</FilterButtonBase>
-            </ButtonGroup>
-          </StickerSheet.Row>
+      <StickerSheet
+        title="Pseudo states"
+        headers={["Hover", "Active", "Focus"]}
+      >
+        <StickerSheet.Row header="First">
+          <ButtonGroup>
+            <FilterButtonBase
+              data-sb-pseudo-styles="hover"
+              data-sb-a11y-color-contrast-disable
+            >
+              First
+            </FilterButtonBase>
+            <FilterButtonBase>Last</FilterButtonBase>
+          </ButtonGroup>
+          <ButtonGroup>
+            <FilterButtonBase
+              data-sb-pseudo-styles="active"
+              data-sb-a11y-color-contrast-disable
+            >
+              First
+            </FilterButtonBase>
+            <FilterButtonBase>Last</FilterButtonBase>
+          </ButtonGroup>
+          <ButtonGroup>
+            <FilterButtonBase
+              data-sb-pseudo-styles="focus"
+              data-sb-a11y-color-contrast-disable
+            >
+              First
+            </FilterButtonBase>
+            <FilterButtonBase>Last</FilterButtonBase>
+          </ButtonGroup>
+        </StickerSheet.Row>
 
-          <StickerSheet.Row rowTitle="Last">
-            <ButtonGroup>
-              <FilterButtonBase>First</FilterButtonBase>
-              <FilterButtonBase
-                data-sb-pseudo-styles="hover"
-                data-sb-a11y-color-contrast-disable
-              >
-                Last
-              </FilterButtonBase>
-            </ButtonGroup>
-            <ButtonGroup>
-              <FilterButtonBase>First</FilterButtonBase>
-              <FilterButtonBase
-                data-sb-pseudo-styles="active"
-                data-sb-a11y-color-contrast-disable
-              >
-                Last
-              </FilterButtonBase>
-            </ButtonGroup>
-            <ButtonGroup>
-              <FilterButtonBase>First</FilterButtonBase>
-              <FilterButtonBase
-                data-sb-pseudo-styles="focus"
-                data-sb-a11y-color-contrast-disable
-              >
-                Last
-              </FilterButtonBase>
-            </ButtonGroup>
-          </StickerSheet.Row>
+        <StickerSheet.Row header="Last">
+          <ButtonGroup>
+            <FilterButtonBase>First</FilterButtonBase>
+            <FilterButtonBase
+              data-sb-pseudo-styles="hover"
+              data-sb-a11y-color-contrast-disable
+            >
+              Last
+            </FilterButtonBase>
+          </ButtonGroup>
+          <ButtonGroup>
+            <FilterButtonBase>First</FilterButtonBase>
+            <FilterButtonBase
+              data-sb-pseudo-styles="active"
+              data-sb-a11y-color-contrast-disable
+            >
+              Last
+            </FilterButtonBase>
+          </ButtonGroup>
+          <ButtonGroup>
+            <FilterButtonBase>First</FilterButtonBase>
+            <FilterButtonBase
+              data-sb-pseudo-styles="focus"
+              data-sb-a11y-color-contrast-disable
+            >
+              Last
+            </FilterButtonBase>
+          </ButtonGroup>
+        </StickerSheet.Row>
 
-          <StickerSheet.Row rowTitle="Middle">
-            <ButtonGroup>
-              <FilterButtonBase>First</FilterButtonBase>
-              <FilterButtonBase
-                data-sb-pseudo-styles="hover"
-                data-sb-a11y-color-contrast-disable
-              >
-                Middle
-              </FilterButtonBase>
-              <FilterButtonBase>Last</FilterButtonBase>
-            </ButtonGroup>
-            <ButtonGroup>
-              <FilterButtonBase>First</FilterButtonBase>
-              <FilterButtonBase
-                data-sb-pseudo-styles="active"
-                data-sb-a11y-color-contrast-disable
-              >
-                Middle
-              </FilterButtonBase>
-              <FilterButtonBase>Last</FilterButtonBase>
-            </ButtonGroup>
-            <ButtonGroup>
-              <FilterButtonBase>First</FilterButtonBase>
-              <FilterButtonBase
-                data-sb-pseudo-styles="focus"
-                data-sb-a11y-color-contrast-disable
-              >
-                Middle
-              </FilterButtonBase>
-              <FilterButtonBase>Last</FilterButtonBase>
-            </ButtonGroup>
-          </StickerSheet.Row>
-        </StickerSheet.Body>
+        <StickerSheet.Row header="Middle">
+          <ButtonGroup>
+            <FilterButtonBase>First</FilterButtonBase>
+            <FilterButtonBase
+              data-sb-pseudo-styles="hover"
+              data-sb-a11y-color-contrast-disable
+            >
+              Middle
+            </FilterButtonBase>
+            <FilterButtonBase>Last</FilterButtonBase>
+          </ButtonGroup>
+          <ButtonGroup>
+            <FilterButtonBase>First</FilterButtonBase>
+            <FilterButtonBase
+              data-sb-pseudo-styles="active"
+              data-sb-a11y-color-contrast-disable
+            >
+              Middle
+            </FilterButtonBase>
+            <FilterButtonBase>Last</FilterButtonBase>
+          </ButtonGroup>
+          <ButtonGroup>
+            <FilterButtonBase>First</FilterButtonBase>
+            <FilterButtonBase
+              data-sb-pseudo-styles="focus"
+              data-sb-a11y-color-contrast-disable
+            >
+              Middle
+            </FilterButtonBase>
+            <FilterButtonBase>Last</FilterButtonBase>
+          </ButtonGroup>
+        </StickerSheet.Row>
       </StickerSheet>
     </>
   ),

package/src/Calendar/CalendarPopover/_docs/CalendarPopover.stickersheet.stories.tsx

@@ -99,7 +99,7 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <>
       <StickerSheet isReversed={isReversed}>
-        <StickerSheet.Row rowTitle="Default">
+        <StickerSheet.Row header="Default">
           <CalendarPopoverExample rowHeight={102}>
             CalendarPopover
             <br />
@@ -107,13 +107,13 @@ const StickerSheetTemplate: StickerSheetStory = {
           </CalendarPopoverExample>
         </StickerSheet.Row>
 
-        <StickerSheet.Row rowTitle="CalendarSingle">
+        <StickerSheet.Row header="CalendarSingle">
           <CalendarPopoverExample rowHeight={350}>
             <CalendarSingle selected={new Date("2022-02-19")} />
           </CalendarPopoverExample>
         </StickerSheet.Row>
 
-        <StickerSheet.Row rowTitle="CalendarRange">
+        <StickerSheet.Row header="CalendarRange">
           <CalendarPopoverExample rowHeight={350}>
             <CalendarRange
               selected={{
@@ -124,7 +124,7 @@ const StickerSheetTemplate: StickerSheetStory = {
           </CalendarPopoverExample>
         </StickerSheet.Row>
 
-        <StickerSheet.Row rowTitle="CalendarRange with divider">
+        <StickerSheet.Row header="CalendarRange with divider">
           <CalendarPopoverExample rowHeight={350}>
             <CalendarRange
               data-testid="sb-final-calendar"