@kaizen/components 1.68.7 → 1.68.9

package/src/Tag/_docs/Tag.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls , Meta, Unstyled } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as TagStories from "./Tag.stories"
+import { Canvas, Controls, Meta, Unstyled } from '@storybook/blocks'
+import { InlineNotification } from '~components/Notification'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as TagStories from './Tag.stories'
 
 <Meta of={TagStories} />
 
@@ -17,7 +17,7 @@ import * as TagStories from "./Tag.stories"
 <Unstyled>
   <InlineNotification type="cautionary" persistent>
     {`This version of the Tag will soon be deprecated and will be removed in the next major release.
-    Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder` }
+    Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder`}
   </InlineNotification>
 </Unstyled>
 
@@ -33,48 +33,59 @@ Tags help users quickly recognize important information about items that organiz
 ## API
 
 ### Variants
+
 We have 3 different sets of combinations for various uses.
 
 #### Status
+
 Use status tags to show the status of surveys, reports, action plans, and performance feedback.
 
 <Canvas of={TagStories.Status} />
 
 #### Validation
+
 Use validation tags for indicating the validation state such as the Cautionary style for cautioning users that the item has a validation warning that could be addressed.
 
 <Canvas of={TagStories.Validation} />
 
 #### Sentiments
+
 Use sentiment tags only for sentiment or other employee feedback data.
 
 <Canvas of={TagStories.Sentiments} />
 
 ### Sizes
+
 **Note:** Icons and Avatars are not supported in `small` sizes.
 
 <Canvas of={TagStories.Sizes} />
 
 ### Avatar
+
 An Avatar can be added in two ways, either by importing the `<Avatar />` component and passing it in, or you can use the Avatar's props.
 
 **Note:** Avatar are not supported in `small` sizes.
 
 #### Import Avatar
+
 <Canvas of={TagStories.ProfileWithAvatarImport} />
 
 #### Avatar props
+
 <Canvas of={TagStories.ProfileWithAvatarProps} />
 
 ### Dismissable
+
 <Canvas of={TagStories.Dismissible} />
 
 ### TruncateWidth
+
 A pixel width which sets a limit for when the text starts to truncate.
 
 <Canvas of={TagStories.Truncate} />
 
 ### Inline
+
 Removes the default right-hand margin.
 
 <Canvas of={TagStories.Inline} />

package/src/Text/_docs/Text.mdx

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

package/src/TextArea/_docs/TextArea.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import { LinkTo } from "~storybook/components/LinkTo"
-import * as TextAreaStories from "./TextArea.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { LinkTo } from '~storybook/components/LinkTo'
+import * as TextAreaStories from './TextArea.stories'
 
 <Meta of={TextAreaStories} />
 
@@ -37,6 +37,7 @@ You can use our <LinkTo pageId="components-label">Label</LinkTo> component
 ```
 
 ### Connecting a custom element
+
 For linking text that isn't in a `Label` you can use `aria-labelledBy`
 
 ```

package/src/TextAreaField/_docs/TextAreaField.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as TextAreaFieldStories from "./TextAreaField.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as TextAreaFieldStories from './TextAreaField.stories'
 
 <Meta of={TextAreaFieldStories} />
 
@@ -25,18 +25,23 @@ A text area includes a label and a longer area you can type multiple lines of te
 ## API
 
 ### Variant
+
 <Canvas of={TextAreaFieldStories.Variant} />
 
 ### Autogrow
-Autogrow expands the textarea as the user's typing exceeds the minimum height of  the text area.
+
+Autogrow expands the textarea as the user's typing exceeds the minimum height of the text area.
 
 <Canvas of={TextAreaFieldStories.Autogrow} />
 
 ### Description
+
 <Canvas of={TextAreaFieldStories.Description} />
 
 ### Validation
+
 <Canvas of={TextAreaFieldStories.Validation} />
 
 ### Reversed
+
 <Canvas of={TextAreaFieldStories.Reversed} />

package/src/TextField/_docs/TextField.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import { LinkTo } from "~storybook/components/LinkTo"
-import * as TextFieldStories from "./TextField.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { LinkTo } from '~storybook/components/LinkTo'
+import * as TextFieldStories from './TextField.stories'
 
 <Meta of={TextFieldStories} />
 
@@ -28,16 +28,21 @@ Composed of <LinkTo pageId="components-label">Label</LinkTo>, <LinkTo pageId="co
 ## API
 
 ### Types
+
 <Canvas of={TextFieldStories.Types} />
 
 ### Description
+
 <Canvas of={TextFieldStories.Description} />
 
 ### Icon
+
 <Canvas of={TextFieldStories.IconStory} />
 
 ### Validation
+
 <Canvas of={TextFieldStories.Validation} />
 
 ### Reversed
+
 <Canvas of={TextFieldStories.Reversed} />

package/src/Tile/InformationTile/_docs/InformationTile.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as InformationTileStories from "./InformationTile.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as InformationTileStories from './InformationTile.stories'
 
 <Meta of={InformationTileStories} />
 
@@ -29,8 +29,9 @@ A visually interesting item in a list consisting of a card, visual, title, metad
 <Canvas of={InformationTileStories.Variants} />
 
 ### Information
-<Canvas of={InformationTileStories.Information} />
 
+<Canvas of={InformationTileStories.Information} />
 
 ### Information Button Label
+
 <Canvas of={InformationTileStories.TileWithCustomInfoLabel} />

package/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as MultiActionTileStories from "./MultiActionTile.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as MultiActionTileStories from './MultiActionTile.stories'
 
 <Meta of={MultiActionTileStories} />
 
@@ -29,7 +29,9 @@ A visually interesting item in a list consisting of a card, visual, title, metad
 <Canvas of={MultiActionTileStories.Variants} />
 
 ### Secondary Action
+
 <Canvas of={MultiActionTileStories.SecondaryAction} />
 
 ### Information
+
 <Canvas of={MultiActionTileStories.Information} />

package/src/Tile/TileGrid/_docs/TileGrid.mdx

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

package/src/TimeField/_docs/TimeField.mdx

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

package/src/TitleBlockZen/_docs/TitleBlockZen.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as TitleBlockZenStories from "./TitleBlockZen.stories"
+import { Canvas, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as TitleBlockZenStories from './TitleBlockZen.stories'
 
 <Meta of={TitleBlockZenStories} />
 
@@ -48,6 +48,7 @@ in the dropdown menu when you click it. (`MenuItemProps` is a type imported from
 ## secondaryActions & secondaryOverflowMenuItems
 
 Secondary Actions sit below the Primary Actions, and consist of
+
 - actions/links (just a button),
 - menus (a menu button), and
 - the overflow menu (a menu button with a "meatballs" icon).
@@ -70,5 +71,6 @@ Each object can be a MenuGroup (see code snippet for `primaryAction` above) or a
 ```
 type SecondaryActionsProps = Array<MenuGroup | TitleBlockButtonProps>;
 ```
+
 The order of elements in the array will determine the visual order on the page, so
 please be aware of the intended order mentioned above.

package/src/ToggleSwitch/ToggleSwitch/_docs/ToggleSwitch.mdx

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

package/src/ToggleSwitch/ToggleSwitchField/_docs/ToggleSwitchField.mdx

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

package/src/VisuallyHidden/_docs/VisuallyHidden.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as VisuallyHiddenStories from "./VisuallyHidden.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as VisuallyHiddenStories from './VisuallyHidden.stories'
 
 <Meta of={VisuallyHiddenStories} />
 
@@ -31,5 +31,7 @@ Visual users can see the name of the survey to the left of the link, but screen
 The context can be added like so:
 
 ```jsx
-<a href="/path">View report<VisuallyHidden> for Camper Check-in 2023</VisuallyHidden></a>
+<a href="/path">
+  View report<VisuallyHidden> for Camper Check-in 2023</VisuallyHidden>
+</a>
 ```

package/src/Well/_docs/Well.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as WellStories from "./Well.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as WellStories from './Well.stories'
 
 <Meta of={WellStories} />
 
@@ -32,10 +32,10 @@ All `variant`s have a corresponding `color` value, with some minor update to ens
 
 <Canvas of={WellStories.Colors} />
 
-
 ### Border Styles
+
 <Canvas of={WellStories.BorderStyles} />
 
 ### No Margin
-<Canvas of={WellStories.NoMargin} />
 
+<Canvas of={WellStories.NoMargin} />

package/src/Workflow/_docs/ProgressStepper.mdx

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

package/src/Workflow/_docs/Workflow.mdx

@@ -1,8 +1,8 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
-import { Installation, ResourceLinks } from "~storybook/components"
-import * as Workflow from "./Workflow.stories"
-import * as WorkflowFooter from "./WorkflowFooter.stories"
-import * as WorkflowHeader from "./WorkflowHeader.stories"
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks'
+import { Installation, ResourceLinks } from '~storybook/components'
+import * as Workflow from './Workflow.stories'
+import * as WorkflowFooter from './WorkflowFooter.stories'
+import * as WorkflowHeader from './WorkflowHeader.stories'
 
 <Meta of={Workflow} />
 
@@ -30,14 +30,15 @@ To ensure at readability at 400% zoom (See WCAG's [Reflow criteria](https://www.
 
 ## Header actions
 
-The `headerActions` prop  takes array of JSX elements that will render in the top right of the `Header` component.
+The `headerActions` prop takes array of JSX elements that will render in the top right of the `Header` component.
 
 While the number of JSX elements is not limited, is important to consider the real estate in the `Header` and how larger strings or components may be rendered on smaller screen sizes.
 
 <Canvas
   layout="fullscreen"
   of={WorkflowHeader.MultipleActions}
-  source={{code: `<Workflow
+  source={{
+    code: `<Workflow
     headerActions={[
       <Button
         key="would-use-uui-1"
@@ -57,10 +58,10 @@ While the number of JSX elements is not limited, is important to consider the re
     {...otherProps}
   >
     <MockContent />
-  </Workflow>`}}
+  </Workflow>`,
+  }}
 />
 
-
 ## Handling a Workflow exit
 
 A common pattern identified is a Workflow Exit button. An implementation of this component should be passed to the `headerActions` an array to handle a user leaving a Workflow. We've provided an example below that combines a Kaizen `Button` with the `ConfirmationModal` component.
@@ -68,7 +69,8 @@ A common pattern identified is a Workflow Exit button. An implementation of this
 <Canvas
   layout="fullscreen"
   of={WorkflowHeader.Playground}
-  source={{code: `
+  source={{
+    code: `
   const [showModal, setShowModal] = useState<boolean>(false)
   ...
   return (
@@ -97,7 +99,7 @@ A common pattern identified is a Workflow Exit button. An implementation of this
         </div>
       </ConfirmationModal>
     </>
-  )`
+  )`,
   }}
 />
 
@@ -108,7 +110,8 @@ The Footer tracks the progress of the form by using finding the index of the `cu
 <Canvas
   layout="fullscreen"
   of={WorkflowFooter.FirstStep}
-  source={{code: `<Workflow
+  source={{
+    code: `<Workflow
     currentStepId="settings-step"
     steps={[
       { label: "Settings", id: "settings-step" },
@@ -120,24 +123,26 @@ The Footer tracks the progress of the form by using finding the index of the `cu
     {...otherProps}
   >
     <MockContent />
-  </Workflow>`}}
+  </Workflow>`,
+  }}
 />
 
 The Footer is agnostic to the JSX elements that are used in the `previousAction` and `nextAction`. While we recommend using the Kaizen Button, a button-like component can be used in its place to satisfy project-specific requirements.
 
-
 To hide, disable or change the appearance of the Footer buttons you can leverage the props available for the `@kaizen/button` or pass in undefined to not render the component.
 
 <Canvas
   layout="fullscreen"
   of={WorkflowFooter.LastStep}
-  source={{code: `<Workflow
+  source={{
+    code: `<Workflow
     nextAction={<Button disabled label="Finish" primary />}
     previousAction={<Button label="Back" />}
     {...otherProps}
   >
     <MockContent />
-  </Workflow>`}}
+  </Workflow>`,
+  }}
 />
 
 In Instances where users are returning to a completed workflow you can pass the `isComplete` prop to set the indicators to their "complete" status. This will also be reflected in their Aria title.
@@ -145,12 +150,14 @@ In Instances where users are returning to a completed workflow you can pass the
 <Canvas
   layout="fullscreen"
   of={WorkflowFooter.AllStepsComplete}
-  source={{code: `<Workflow
+  source={{
+    code: `<Workflow
     isComplete
     {...otherProps}
   >
     <MockContent />
-  </Workflow>`}}
+  </Workflow>`,
+  }}
 />
 
 ## Composable Worflow
@@ -159,7 +166,6 @@ While we do not advise this path, a composable Workflow may be created if requir
 
 <Canvas layout="fullscreen" of={Workflow.ComposableWorkflow} />
 
-
 ## Worflow API at a glance
 
 <ArgTypes of={Workflow.Playground} />

package/src/Workflow/_docs/WorkflowFooter.mdx

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

package/src/Workflow/_docs/WorkflowHeader.mdx

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

package/src/__actions__/Button/v1/Button/_docs/Button.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
-import * as ButtonStories from "./Button.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as ButtonStories from './Button.stories'
 
 <Meta of={ButtonStories} />
 
@@ -13,7 +13,6 @@ import * as ButtonStories from "./Button.stories"
 
 />
 
-
 <KAIOInstallation exportNames="Button" family="actions" version="1" />
 
 ## Overview
@@ -79,6 +78,7 @@ Alternatively use the `workingLabelHidden` prop to hide the button label all tog
 <Canvas of={ButtonStories.Working} />
 
 ### Controlling the working state
+
 Here is an example of controlling whether the button is 'working' or not, using state.
 
 <Canvas of={ButtonStories.ResolveWorking} />

package/src/__actions__/Button/v1/IconButton/_docs/IconButton.mdx

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

package/src/__actions__/Button/v2/Button/_docs/Button.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
-import * as ButtonStories from "./Button.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as ButtonStories from './Button.stories'
 
 <Meta of={ButtonStories} />
 
@@ -13,7 +13,6 @@ import * as ButtonStories from "./Button.stories"
 
 />
 
-
 <KAIOInstallation exportNames="Button" family="actions" version="2" />
 
 ## Overview
@@ -79,6 +78,7 @@ Alternatively use the `workingLabelHidden` prop to hide the button label all tog
 <Canvas of={ButtonStories.Working} />
 
 ### Controlling the working state
+
 Here is an example of controlling whether the button is 'working' or not, using state.
 
 <Canvas of={ButtonStories.ResolveWorking} />

package/src/__actions__/Button/v2/IconButton/_docs/IconButton.mdx

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