@kaizen/components 1.68.7 → 1.68.8

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} />
 

package/src/__actions__/Button/v3/_docs/Button--api-specification.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Meta, Controls, ArgTypes, DocsStory } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as exampleStories from "./Button.docs.stories"
-import * as specStories from "./Button.spec.stories"
+import { Canvas, Meta, Controls, ArgTypes, DocsStory } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as exampleStories from './Button.docs.stories'
+import * as specStories from './Button.spec.stories'
 
 <Meta title="Actions/Button/Button (v3)/API Specification" />
 
@@ -15,7 +15,7 @@ Updated Nov 19, 2024
   designGuidelines="/?path=/docs/actions-button-button-v3-usage-guidelines--docs"
 />
 
-<KAIOInstallation exportNames={["Button" ]} family="actions" version="3" />
+<KAIOInstallation exportNames={['Button']} family="actions" version="3" />
 
 ## Overview
 
@@ -25,7 +25,26 @@ The following example and table showcases the essential props that enable the co
 
 <Canvas of={exampleStories.Playground} />
 
-<Controls of={exampleStories.Playground} className="mb-64" include={["children", "hasHiddenLabel", "className",  "size", "variant", "isReversed", "onPress", "icon", "iconPosition", "isFullWidth", "isDisabled", "isPending","pendingLabel", "hasHiddenPendingLabel" ]} />
+<Controls
+  of={exampleStories.Playground}
+  className="mb-64"
+  include={[
+    'children',
+    'hasHiddenLabel',
+    'className',
+    'size',
+    'variant',
+    'isReversed',
+    'onPress',
+    'icon',
+    'iconPosition',
+    'isFullWidth',
+    'isDisabled',
+    'isPending',
+    'pendingLabel',
+    'hasHiddenPendingLabel',
+  ]}
+/>
 
 ## Buttons and links
 
@@ -50,8 +69,8 @@ Reversed variants are handled via the `ReversedColors` Provider.
 To enable the reversed theme, you will need to wrap the component or application in the `ReversedColors` provider, ie:
 
 ```tsx
-import { Button } from "@kaizen/components/v3/actions"
-import { ReversedColors } from "@kaizen/components/v3/utilities"
+import { Button } from '@kaizen/components/v3/actions'
+import { ReversedColors } from '@kaizen/components/v3/utilities'
 // application code
 
 return (
@@ -74,15 +93,13 @@ One key change to the `Button`&apos;s API is the shift from `onClick` to React A
 Functionally this does not change the way we pass actions into `Button`. Consumers can safely replace `onClick` with `onPress` without any additional changes, ie:
 
 ```tsx
-<Button label="Submit" onClick={e => sumbit(e)}/>
+<Button label="Submit" onClick={(e) => sumbit(e)} />
 ```
 
 Can safely be replaced with the following:
 
 ```tsx
-<Button onPress={e => submit(e)}>
-  Submit
-</Button>
+<Button onPress={(e) => submit(e)}>Submit</Button>
 ```
 
 ### Button content and children
@@ -90,7 +107,7 @@ Can safely be replaced with the following:
 Labels and any button content can be passed into the `Button` as `children`. Content wrapped by the `Button` will be spaced evenly relative to the `size` prop.
 
 ```tsx
-<Button variant="secondary" onPress={e => submit(e)}>
+<Button variant="secondary" onPress={(e) => submit(e)}>
   Label
 </Button>
 ```
@@ -107,12 +124,11 @@ Set the position of the icon using the `iconPosition` prop. This will ensure con
 
 <Canvas of={exampleStories.ButtonWithIconEnd} />
 
-
 ### Icon-only `Button` and `hasHiddenLabel`
 
 To achieve an icon-only `Button` (previously: `IconButton`) use the `icon` prop and set `hasHiddenLabel` to `true`. This will visually hide the button's `children` and `pendingLabel`, while still announcing the content to screen readers.
 
-<Canvas of={exampleStories.IconButton} className="mb-32"  />
+<Canvas of={exampleStories.IconButton} className="mb-32" />
 
 This pattern ensures that the `Button`'s accessible name is determined by its children, which helps to announce relevant content to the screen readers, as with the [pending state](#pending-state). You can learn more about this [accessible pattern here](https://cultureamp.atlassian.net/wiki/spaces/PA/pages/3833331831/Accessible+button+and+link+labels).
 
@@ -132,7 +148,6 @@ As mentioned in the [previous section](#icon-only-button-and-hashiddenlabel), an
 
 <Canvas of={specStories.PendingIconButton} />
 
-
 ### Full width Buttons
 
 If a button is statically the full width of a container you can use the `isFullWidth` property.
@@ -147,4 +162,21 @@ The following table is a collection of additional React Aria and native HTML pro
 
 You can learn more about React Aria's Button API and advance configuration options [here](https://react-spectrum.adobe.com/react-aria/Button.html#props).
 
-<ArgTypes of={exampleStories.Playground} exclude={["children", "hasHiddenLabel", "className",  "size", "variant", "onPress", "icon", "iconPosition", "isFullWidth", "isDisabled", "isPending", "pendingLabel", "hasHiddenPendingLabel" ]} />
+<ArgTypes
+  of={exampleStories.Playground}
+  exclude={[
+    'children',
+    'hasHiddenLabel',
+    'className',
+    'size',
+    'variant',
+    'onPress',
+    'icon',
+    'iconPosition',
+    'isFullWidth',
+    'isDisabled',
+    'isPending',
+    'pendingLabel',
+    'hasHiddenPendingLabel',
+  ]}
+/>

package/src/__actions__/Button/v3/_docs/Button--usage-guidelines.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
-import * as Button from "./Button.docs.stories"
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import { ResourceLinks, Installation } from '~storybook/components'
+import * as Button from './Button.docs.stories'
 
 <Meta title="Actions/Button/Button (v3)/Usage Guidelines" />
 
@@ -25,6 +25,8 @@ Buttons allow users to perform an action. They have multiple styles for various
 
 <Canvas of={Button.Playground} />
 
-<Controls of={Button.Playground} include={["children", "variant", "size", "isDisabled", "icon", "iconPosition"]} className="mb-64" />
-
-
+<Controls
+  of={Button.Playground}
+  include={['children', 'variant', 'size', 'isDisabled', 'icon', 'iconPosition']}
+  className="mb-64"
+/>

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

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
-import * as MenuStories from "./Menu.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, Installation } from '~storybook/components'
+import * as MenuStories from './Menu.stories'
 
 <Meta of={MenuStories} />
 
@@ -26,4 +26,3 @@ A menu contains links to places or button actions. It does NOT show a selected i
 
 <Canvas of={MenuStories.Playground} />
 <Controls of={MenuStories.Playground} />
-

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

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as MenuStories from "./Menu.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as MenuStories from './Menu.stories'
 
 <Meta of={MenuStories} />
 
@@ -13,7 +13,11 @@ import * as MenuStories from "./Menu.stories"
 
 />
 
-<KAIOInstallation exportNames={["Menu", "MenuDropdown", "MenuList", "MenuItem"]} family="actions" version="2" />
+<KAIOInstallation
+  exportNames={['Menu', 'MenuDropdown', 'MenuList', 'MenuItem']}
+  family="actions"
+  version="2"
+/>
 
 ## Overview