@kaizen/components 1.68.6 → 1.68.8

package/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx

@@ -1,16 +1,16 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Avatar } from "~components/Avatar"
-import { BrandMomentPositiveOutro, Informative } from "~components/Illustration"
-import { Icon } from "~components/__future__/Icon"
-import { StickerSheet } from "~storybook/components/StickerSheet"
-import { LoadingGraphic } from "../index"
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Avatar } from '~components/Avatar'
+import { BrandMomentPositiveOutro, Informative } from '~components/Illustration'
+import { Icon } from '~components/__future__/Icon'
+import { StickerSheet } from '~storybook/components/StickerSheet'
+import { LoadingGraphic } from '../index'
 
 const meta = {
-  title: "Components/Loading states/LoadingGraphic",
+  title: 'Components/Loading states/LoadingGraphic',
   component: LoadingGraphic,
   args: {
-    size: "xlarge",
+    size: 'xlarge',
   },
 } satisfies Meta<typeof LoadingGraphic>
 
@@ -22,7 +22,7 @@ export const Playground: Story = {
   parameters: {
     docs: {
       canvas: {
-        sourceState: "shown",
+        sourceState: 'shown',
       },
     },
   },
@@ -35,57 +35,36 @@ export const Animated: Story = {
 export const Reversed: Story = {
   args: { isReversed: true },
   parameters: {
-    backgrounds: { default: "Purple 700" },
+    backgrounds: { default: 'Purple 700' },
   },
 }
 
 export const Size: Story = {
   render: () => (
-    <StickerSheet headers={["Loading Skeleton", "Example"]}>
+    <StickerSheet headers={['Loading Skeleton', 'Example']}>
       <StickerSheet.Row header="Icon (small)">
         <LoadingGraphic size="small" />
         <Icon name="build" alt="Aliens approaching!" isFilled />
       </StickerSheet.Row>
       <StickerSheet.Row header="Avatar (medium)">
         <LoadingGraphic size="medium" />
-        <Avatar
-          fullName="Jane Doe"
-          disableInitials={false}
-          isCurrentUser
-          size="medium"
-        />
+        <Avatar fullName="Jane Doe" disableInitials={false} isCurrentUser size="medium" />
       </StickerSheet.Row>
       <StickerSheet.Row header="Avatar (large)">
         <LoadingGraphic size="large" />
-        <Avatar
-          fullName="Jane Doe"
-          disableInitials={false}
-          isCurrentUser
-          size="large"
-        />
+        <Avatar fullName="Jane Doe" disableInitials={false} isCurrentUser size="large" />
       </StickerSheet.Row>
       <StickerSheet.Row header="Avatar (x-large)">
         <LoadingGraphic size="xlarge" />
-        <Avatar
-          fullName="Jane Doe"
-          disableInitials={false}
-          isCurrentUser
-          size="xlarge"
-        />
+        <Avatar fullName="Jane Doe" disableInitials={false} isCurrentUser size="xlarge" />
       </StickerSheet.Row>
       <StickerSheet.Row header="Spot (xx-large)">
         <LoadingGraphic size="xxlarge" />
-        <Informative
-          alt="informative-spot-image"
-          classNameOverride="!w-[150px]"
-        />
+        <Informative alt="informative-spot-image" classNameOverride="!w-[150px]" />
       </StickerSheet.Row>
       <StickerSheet.Row header="Scene (scene)">
         <LoadingGraphic size="scene" />
-        <BrandMomentPositiveOutro
-          alt="positive-outro"
-          classNameOverride="!w-[400px]"
-        />
+        <BrandMomentPositiveOutro alt="positive-outro" classNameOverride="!w-[400px]" />
       </StickerSheet.Row>
     </StickerSheet>
   ),

package/src/Loading/LoadingGraphic/index.ts

@@ -1 +1 @@
-export * from "./LoadingGraphic"
+export * from './LoadingGraphic'

package/src/Loading/LoadingHeading/LoadingHeading.module.scss

@@ -1,6 +1,6 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/typography";
-@import "../mixins";
+@import '~@kaizen/design-tokens/sass/color';
+@import '~@kaizen/design-tokens/sass/typography';
+@import '../mixins';
 
 .loadingHeading {
   @extend %loadingBase;
@@ -14,51 +14,37 @@
 
 .display-0 {
   height: $typography-display-0-font-size;
-  margin-bottom: calc(
-    #{$typography-display-0-line-height} - #{$typography-display-0-font-size}
-  );
+  margin-bottom: calc(#{$typography-display-0-line-height} - #{$typography-display-0-font-size});
 }
 
 .heading-1 {
   height: $typography-heading-1-font-size;
-  margin-bottom: calc(
-    #{$typography-heading-1-line-height} - #{$typography-heading-1-font-size}
-  );
+  margin-bottom: calc(#{$typography-heading-1-line-height} - #{$typography-heading-1-font-size});
 }
 
 .heading-2 {
   height: $typography-heading-2-font-size;
-  margin-bottom: calc(
-    #{$typography-heading-2-line-height} - #{$typography-heading-2-font-size}
-  );
+  margin-bottom: calc(#{$typography-heading-2-line-height} - #{$typography-heading-2-font-size});
 }
 
 .heading-3 {
   height: $typography-heading-3-font-size;
-  margin-bottom: calc(
-    #{$typography-heading-3-line-height} - #{$typography-heading-3-font-size}
-  );
+  margin-bottom: calc(#{$typography-heading-3-line-height} - #{$typography-heading-3-font-size});
 }
 
 .heading-4 {
   height: $typography-heading-4-font-size;
-  margin-bottom: calc(
-    #{$typography-heading-4-line-height} - #{$typography-heading-4-font-size}
-  );
+  margin-bottom: calc(#{$typography-heading-4-line-height} - #{$typography-heading-4-font-size});
 }
 
 .heading-5 {
   height: $typography-heading-5-font-size;
-  margin-bottom: calc(
-    #{$typography-heading-5-line-height} - #{$typography-heading-5-font-size}
-  );
+  margin-bottom: calc(#{$typography-heading-5-line-height} - #{$typography-heading-5-font-size});
 }
 
 .heading-6 {
   height: $typography-heading-6-font-size;
-  margin-bottom: calc(
-    #{$typography-heading-6-line-height} - #{$typography-heading-6-font-size}
-  );
+  margin-bottom: calc(#{$typography-heading-6-line-height} - #{$typography-heading-6-font-size});
 }
 
 .isReversed {

package/src/Loading/LoadingHeading/LoadingHeading.tsx

@@ -1,8 +1,8 @@
-import React, { HTMLAttributes } from "react"
-import classnames from "classnames"
-import { HeadingVariants } from "~components/Heading"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./LoadingHeading.module.scss"
+import React, { HTMLAttributes } from 'react'
+import classnames from 'classnames'
+import { HeadingVariants } from '~components/Heading'
+import { OverrideClassName } from '~components/types/OverrideClassName'
+import styles from './LoadingHeading.module.scss'
 
 export type LoadingHeadingProps = {
   variant: HeadingVariants
@@ -35,11 +35,11 @@ export const LoadingHeading = ({
       styles[variant],
       isAnimated && styles.isAnimated,
       isReversed && styles.isReversed,
-      isLink && styles.link
+      isLink && styles.link,
     )}
     style={{ width: `${width}%` }}
     {...props}
   />
 )
 
-LoadingHeading.displayName = "LoadingHeading"
+LoadingHeading.displayName = 'LoadingHeading'

package/src/Loading/LoadingHeading/_docs/LoadingHeading.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
-import * as LoadingHeadingStories from "./LoadingHeading.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as LoadingHeadingStories from './LoadingHeading.stories'
 
 <Meta of={LoadingHeadingStories} />
 

package/src/Loading/LoadingHeading/_docs/LoadingHeading.stickersheet.stories.tsx

@@ -1,13 +1,10 @@
-import React from "react"
-import { Meta } from "@storybook/react"
-import {
-  StickerSheet,
-  StickerSheetStory,
-} from "~storybook/components/StickerSheet"
-import { LoadingHeading } from "../index"
+import React from 'react'
+import { Meta } from '@storybook/react'
+import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { LoadingHeading } from '../index'
 
 export default {
-  title: "Components/Loading states/LoadingHeading",
+  title: 'Components/Loading states/LoadingHeading',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -15,19 +12,19 @@ export default {
 } satisfies Meta
 
 const headingVariants = [
-  "display-0",
-  "heading-1",
-  "heading-2",
-  "heading-3",
-  "heading-4",
-  "heading-5",
-  "heading-6",
+  'display-0',
+  'heading-1',
+  'heading-2',
+  'heading-3',
+  'heading-4',
+  'heading-5',
+  'heading-6',
 ] as const
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
-      {headingVariants.map(variant => (
+      {headingVariants.map((variant) => (
         <StickerSheet.Row key={variant} header={variant}>
           <StickerSheet.Cell className="w-320">
             <LoadingHeading variant={variant} />
@@ -35,12 +32,7 @@ const StickerSheetTemplate: StickerSheetStory = {
         </StickerSheet.Row>
       ))}
       <StickerSheet.Row header="isLink">
-        <LoadingHeading
-          width={100}
-          variant="heading-1"
-          isLink
-          isReversed={isReversed}
-        />
+        <LoadingHeading width={100} variant="heading-1" isLink isReversed={isReversed} />
       </StickerSheet.Row>
     </StickerSheet>
   ),
@@ -48,14 +40,14 @@ const StickerSheetTemplate: StickerSheetStory = {
 
 export const StickerSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Default)",
+  name: 'Sticker Sheet (Default)',
 }
 
 export const StickerSheetReversed: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Reversed)",
+  name: 'Sticker Sheet (Reversed)',
   parameters: {
-    backgrounds: { default: "Purple 700" },
+    backgrounds: { default: 'Purple 700' },
   },
   args: { isReversed: true },
 }

package/src/Loading/LoadingHeading/_docs/LoadingHeading.stories.tsx

@@ -1,14 +1,14 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Heading } from "~components/Heading"
-import { StickerSheet } from "~storybook/components/StickerSheet"
-import { LoadingHeading } from "../index"
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Heading } from '~components/Heading'
+import { StickerSheet } from '~storybook/components/StickerSheet'
+import { LoadingHeading } from '../index'
 
 const meta = {
-  title: "Components/Loading states/LoadingHeading",
+  title: 'Components/Loading states/LoadingHeading',
   component: LoadingHeading,
   args: {
-    variant: "heading-1",
+    variant: 'heading-1',
   },
 } satisfies Meta<typeof LoadingHeading>
 
@@ -20,7 +20,7 @@ export const Playground: Story = {
   parameters: {
     docs: {
       canvas: {
-        sourceState: "shown",
+        sourceState: 'shown',
       },
     },
   },
@@ -33,24 +33,24 @@ export const Animated: Story = {
 export const Reversed: Story = {
   args: { isReversed: true },
   parameters: {
-    backgrounds: { default: "Purple 700" },
+    backgrounds: { default: 'Purple 700' },
   },
 }
 
 const headingVariants = [
-  "display-0",
-  "heading-1",
-  "heading-2",
-  "heading-3",
-  "heading-4",
-  "heading-5",
-  "heading-6",
+  'display-0',
+  'heading-1',
+  'heading-2',
+  'heading-3',
+  'heading-4',
+  'heading-5',
+  'heading-6',
 ] as const
 
 export const Variant: Story = {
   render: () => (
-    <StickerSheet headers={["<LoadingHeading />", "<Heading />"]}>
-      {headingVariants.map(variant => (
+    <StickerSheet headers={['<LoadingHeading />', '<Heading />']}>
+      {headingVariants.map((variant) => (
         <StickerSheet.Row key={variant} header={variant}>
           <LoadingHeading variant={variant} />
           <Heading variant={variant}>Heading</Heading>

package/src/Loading/LoadingHeading/index.ts

@@ -1 +1 @@
-export * from "./LoadingHeading"
+export * from './LoadingHeading'

package/src/Loading/LoadingInput/LoadingInput.module.scss

@@ -1,5 +1,5 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "../mixins";
+@import '~@kaizen/design-tokens/sass/color';
+@import '../mixins';
 
 .loadingInput {
   @extend %loadingBase;

package/src/Loading/LoadingInput/LoadingInput.tsx

@@ -1,7 +1,7 @@
-import React, { HTMLAttributes } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./LoadingInput.module.scss"
+import React, { HTMLAttributes } from 'react'
+import classnames from 'classnames'
+import { OverrideClassName } from '~components/types/OverrideClassName'
+import styles from './LoadingInput.module.scss'
 
 export type LoadingInputProps = {
   isAnimated?: boolean
@@ -33,11 +33,11 @@ export const LoadingInput = ({
       styles.loadingInput,
       isAnimated && styles.isAnimated,
       isReversed && styles.isReversed,
-      classNameOverride
+      classNameOverride,
     )}
     style={{ width: `${width}%`, height: `${height}px` }}
     {...props}
   />
 )
 
-LoadingInput.displayName = "LoadingInput"
+LoadingInput.displayName = 'LoadingInput'

package/src/Loading/LoadingInput/_docs/LoadingInput.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
-import * as LoadingInputStories from "./LoadingInput.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as LoadingInputStories from './LoadingInput.stories'
 
 <Meta of={LoadingInputStories} />
 

package/src/Loading/LoadingInput/_docs/LoadingInput.stories.tsx

@@ -1,10 +1,10 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { LoadingHeading } from "~components/Loading"
-import { LoadingInput } from "../index"
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { LoadingHeading } from '~components/Loading'
+import { LoadingInput } from '../index'
 
 const meta = {
-  title: "Components/Loading states/LoadingInput",
+  title: 'Components/Loading states/LoadingInput',
   component: LoadingInput,
 } satisfies Meta<typeof LoadingInput>
 
@@ -16,7 +16,7 @@ export const Playground: Story = {
   parameters: {
     docs: {
       canvas: {
-        sourceState: "shown",
+        sourceState: 'shown',
       },
     },
     chromatic: { disable: false },
@@ -30,13 +30,13 @@ export const Animated: Story = {
 export const Reversed: Story = {
   args: { isReversed: true },
   parameters: {
-    backgrounds: { default: "Purple 700" },
+    backgrounds: { default: 'Purple 700' },
     chromatic: { disable: false },
   },
 }
 
 const TextControlExampleTemplate: Story = {
-  render: args => (
+  render: (args) => (
     <>
       <LoadingHeading variant="heading-6" width={10} />
       <LoadingInput {...args} />
@@ -46,11 +46,11 @@ const TextControlExampleTemplate: Story = {
 
 export const TextFieldExample: Story = {
   ...TextControlExampleTemplate,
-  name: "TextField Example",
+  name: 'TextField Example',
 }
 
 export const TextAreaFieldExample: Story = {
   ...TextControlExampleTemplate,
-  name: "TextAreaField Example",
+  name: 'TextAreaField Example',
   args: { height: 100 },
 }

package/src/Loading/LoadingInput/index.ts

@@ -1 +1 @@
-export * from "./LoadingInput"
+export * from './LoadingInput'

package/src/Loading/LoadingParagraph/LoadingParagraph.module.scss

@@ -1,6 +1,6 @@
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "../mixins";
+@import '~@kaizen/design-tokens/sass/color';
+@import '~@kaizen/design-tokens/sass/spacing';
+@import '../mixins';
 
 .loadingParagraph {
   @extend %loadingBase;

package/src/Loading/LoadingParagraph/LoadingParagraph.tsx

@@ -1,7 +1,7 @@
-import React, { HTMLAttributes } from "react"
-import classnames from "classnames"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./LoadingParagraph.module.scss"
+import React, { HTMLAttributes } from 'react'
+import classnames from 'classnames'
+import { OverrideClassName } from '~components/types/OverrideClassName'
+import styles from './LoadingParagraph.module.scss'
 
 export type LoadingParagraphProps = {
   isAnimated?: boolean
@@ -43,11 +43,11 @@ export const LoadingParagraph = ({
       isLink && styles.isLink,
       inheritBaseline && styles.inheritBaseline,
       isInline && styles.isInline,
-      noBottomMargin && styles.noBottomMargin
+      noBottomMargin && styles.noBottomMargin,
     )}
     style={{ width: `${width}%` }}
     {...restProps}
   />
 )
 
-LoadingParagraph.displayName = "LoadingParagraph"
+LoadingParagraph.displayName = 'LoadingParagraph'

package/src/Loading/LoadingParagraph/_docs/LoadingParagraph.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
-import * as LoadingParagraphStories from "./LoadingParagraph.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as LoadingParagraphStories from './LoadingParagraph.stories'
 
 <Meta of={LoadingParagraphStories} />
 

package/src/Loading/LoadingParagraph/_docs/LoadingParagraph.stickersheet.stories.tsx

@@ -1,13 +1,10 @@
-import React from "react"
-import { Meta } from "@storybook/react"
-import {
-  StickerSheet,
-  StickerSheetStory,
-} from "~storybook/components/StickerSheet"
-import { LoadingParagraph } from "../index"
+import React from 'react'
+import { Meta } from '@storybook/react'
+import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { LoadingParagraph } from '../index'
 
 export default {
-  title: "Components/Loading states/LoadingParagraph",
+  title: 'Components/Loading states/LoadingParagraph',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -37,18 +34,18 @@ const StickerSheetTemplate: StickerSheetStory = {
 
 export const StickerSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Default)",
+  name: 'Sticker Sheet (Default)',
 }
 
 export const StickerSheetReversed: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Reversed)",
-  parameters: { backgrounds: { default: "Purple 700" } },
+  name: 'Sticker Sheet (Reversed)',
+  parameters: { backgrounds: { default: 'Purple 700' } },
   args: { isReversed: true },
 }
 
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (RTL)",
-  parameters: { textDirection: "rtl" },
+  name: 'Sticker Sheet (RTL)',
+  parameters: { textDirection: 'rtl' },
 }

package/src/Loading/LoadingParagraph/_docs/LoadingParagraph.stories.tsx

@@ -1,10 +1,10 @@
-import React from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { Text } from "~components/Text"
-import { LoadingParagraph } from "../index"
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Text } from '~components/Text'
+import { LoadingParagraph } from '../index'
 
 const meta = {
-  title: "Components/Loading states/LoadingParagraph",
+  title: 'Components/Loading states/LoadingParagraph',
   component: LoadingParagraph,
 } satisfies Meta<typeof LoadingParagraph>
 
@@ -16,7 +16,7 @@ export const Playground: Story = {
   parameters: {
     docs: {
       canvas: {
-        sourceState: "shown",
+        sourceState: 'shown',
       },
     },
   },
@@ -42,9 +42,9 @@ export const MultiLineExample: Story = {
         <LoadingParagraph />
       </div>
       <Text variant="body">
-        Kaizen is Culture Amp’s design system. It’s the single source of truth
-        for our UX guidelines, design assets, and front-end code to help Culture
-        Amp’s teams rapidly create a world-class experience.
+        Kaizen is Culture Amp’s design system. It’s the single source of truth for our UX
+        guidelines, design assets, and front-end code to help Culture Amp’s teams rapidly create a
+        world-class experience.
       </Text>
     </>
   ),
@@ -58,7 +58,7 @@ export const MultiColumnExample: Story = {
         <LoadingParagraph isInline width={30} />
         <LoadingParagraph isInline width={30} />
       </div>
-      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr" }}>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
         <Text variant="body">Kaizen is Culture Amp’s design system.</Text>
         <Text variant="body">Kaizen is Culture Amp’s design system.</Text>
         <Text variant="body">Kaizen is Culture Amp’s design system.</Text>

package/src/Loading/LoadingParagraph/index.ts

@@ -1 +1 @@
-export * from "./LoadingParagraph"
+export * from './LoadingParagraph'