@kaizen/components 1.68.7 → 1.68.9

package/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.mdx

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

package/src/Container/_docs/Container.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 ContainerStories from "./Container.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { LinkTo } from '~storybook/components/LinkTo'
+import * as ContainerStories from './Container.stories'
 
 <Meta of={ContainerStories} />
 
@@ -23,5 +23,7 @@ Wraps your entire page.
 <Controls of={ContainerStories.Playground} />
 
 ## Use Case
+
 Usually wraps a <LinkTo pageId="components-content">Content</LinkTo> component.
+
 <Canvas of={ContainerStories.Example} />

package/src/Content/_docs/Content.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import { LinkTo } from "~storybook/components/LinkTo"
-import * as ContentStories from "./Content.stories"
+import { Canvas, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { LinkTo } from '~storybook/components/LinkTo'
+import * as ContentStories from './Content.stories'
 
 <Meta of={ContentStories} />
 
@@ -22,5 +22,7 @@ Wraps your content at a **page level** in the standard minimum width and margins
 <Canvas of={ContentStories.Playground} />
 
 ## Use Case
+
 Usually wrapped in a <LinkTo pageId="components-container">Container</LinkTo>
+
 <Canvas of={ContentStories.Example} />

package/src/DatePicker/_docs/DatePicker.mdx

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

package/src/DateRangePicker/_docs/DateRangePicker.mdx

@@ -1,6 +1,6 @@
-import { Canvas, DocsStory, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as DateRangePickerStories from "./DateRangePicker.stories"
+import { Canvas, DocsStory, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as DateRangePickerStories from './DateRangePicker.stories'
 
 <Meta of={DateRangePickerStories} />
 
@@ -24,7 +24,6 @@ Date range picker form field.
 <Canvas of={DateRangePickerStories.Playground} />
 <Controls of={DateRangePickerStories.Playground} />
 
-
 ## Responsive behaviour
 
 As both the `DatePicker` and `DateRangePicker` use the `CalendarPopover` component under the hood, they share the same responsive behaviour. You can read more on this [here](/docs/components-date-controls-datepicker--docs#responsive-behaviour).

package/src/Divider/_docs/Divider.mdx

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

package/src/EmptyState/_docs/EmptyState.mdx

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

package/src/ErrorPage/_docs/ErrorPage.mdx

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

package/src/FieldGroup/_docs/FieldGroup.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 FieldGroupStories from "./FieldGroup.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { LinkTo } from '~storybook/components/LinkTo'
+import * as FieldGroupStories from './FieldGroup.stories'
 
 <Meta of={FieldGroupStories} />
 
@@ -24,9 +24,11 @@ A simple wrapper to wrap form field components and their related siblings. This
 ## API
 
 ### Inline
+
 Changes the FieldGroup to an inline element with no bottom margin. This can be seen in the `Slider`<LinkTo pageId="components-slider--docs">component</LinkTo>. You can see inline vs block scope in the following stories:
 
 #### Inline
+
 <Canvas of={FieldGroupStories.Inline} />
 
 #### Default (block)

package/src/FieldMessage/_docs/FieldMessage.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as FieldMessageStories from "./FieldMessage.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as FieldMessageStories from './FieldMessage.stories'
 
 <Meta of={FieldMessageStories} />
 
@@ -36,7 +36,6 @@ Simple `string`s will be wrapped in a `p` tag with the default `small` text styl
 
 Note that when using this for helper text, the component should not recieve `status` - this is reserved for validation messages.
 
-
 ### Status
 
 `status` can used to create form validation message that provide additional context to a form field's state, ie: `error`, `caution` or `success`.

package/src/Filter/Filter/_docs/Filter.mdx

@@ -1,7 +1,7 @@
-import { Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
-import { LinkTo } from "~storybook/components/LinkTo"
-import * as FilterStories from "./Filter.stories"
+import { Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components'
+import { LinkTo } from '~storybook/components/LinkTo'
+import * as FilterStories from './Filter.stories'
 
 <Meta of={FilterStories} />
 
@@ -14,11 +14,12 @@ import * as FilterStories from "./Filter.stories"
 
 />
 
-<KAIOInstallation exportNames={["Filter", "FilterContents"]} />
+<KAIOInstallation exportNames={['Filter', 'FilterContents']} />
 
 ## Overview
 
 These components are mainly used for constructing Filter components (eg. <LinkTo pageId="components-filter-select">FilterSelect</LinkTo>):
+
 - <LinkTo pageId="components-filter-filter-buttons">FilterButton</LinkTo> for the renderTrigger
 - `FilterContents` to wrap the contents within a Filter
 
@@ -51,7 +52,6 @@ type TriggerButtonProps = {
   onClick: () => void // Calls `setIsOpen(!isOpen)`
   isOpen: boolean // The value from the `isOpen` prop
 }
-
 ```
 
 If a `ref` is provided to the FilterButton it will be used, otherwise a fallback `ref`
@@ -61,16 +61,14 @@ will be created (this is required to tie the trigger to the popover).
 type FilterTriggerRef = {
   ref: { triggerRef?: React.RefObject<HTMLButtonElement> }
 }
-
 ```
 
 #### Simple Filter
 
 ```tsx
-<Filter {...props}
-  renderTrigger={(triggerProps): JSX.Element => (
-    <FilterButton label="Label" {...triggerProps} />
-  )}
+<Filter
+  {...props}
+  renderTrigger={(triggerProps): JSX.Element => <FilterButton label="Label" {...triggerProps} />}
 />
 ```
 
@@ -79,11 +77,12 @@ type FilterTriggerRef = {
 #### Removable Filter
 
 ```tsx
-<Filter {...props}
+<Filter
+  {...props}
   renderTrigger={(triggerProps): JSX.Element => (
     <FilterButtonRemovable
-      triggerButtonProps={{ label: "Label", ...triggerProps }}
-      removeButtonProps={{ onClick: action("remove button clicked") }}
+      triggerButtonProps={{ label: 'Label', ...triggerProps }}
+      removeButtonProps={{ onClick: action('remove button clicked') }}
     />
   )}
 />

package/src/Filter/FilterBar/_docs/FilterBar.mdx

@@ -1,7 +1,7 @@
-import { Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
-import { LinkTo } from "~storybook/components/LinkTo"
-import * as FilterBarStories from "./FilterBar.stories"
+import { Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components'
+import { LinkTo } from '~storybook/components/LinkTo'
+import * as FilterBarStories from './FilterBar.stories'
 
 <Meta of={FilterBarStories} />
 
@@ -37,7 +37,7 @@ We also provide a `Filters` type which can accept the same generic to provide im
 `ValuesMap` should be in the shape of `{ [filterId]: filterValueType }`.
 
 ```tsx
-import { FilterBar, Filters } from "@kaizen/components"
+import { FilterBar, Filters } from '@kaizen/components'
 
 type ValuesMap = {
   filterId1: string
@@ -45,21 +45,15 @@ type ValuesMap = {
 }
 
 const [values, setValues] = useState<Partial<ValuesMap>>({
-  filterId1: "default-value"
+  filterId1: 'default-value',
 })
 
 const filters = [
-  { id: "filterId1", ...rest },
-  { id: "filterId2", ...rest },
+  { id: 'filterId1', ...rest },
+  { id: 'filterId2', ...rest },
 ] satisfies Filters<ValuesMap>
 
-return (
-  <FilterBar<ValuesMap>
-    filters={filters}
-    values={values}
-    onValuesChange={setValues}
-  />
-)
+return <FilterBar<ValuesMap> filters={filters} values={values} onValuesChange={setValues} />
 ```
 
 ### `filters`
@@ -71,7 +65,7 @@ The `filters` prop is an array of attributes used to create the list of filters.
 We provide a `Filters<ValuesMap>` type you can use for improved type safety.
 
 ```tsx
-import { FilterBar, Filters, DateRange, FilterMultiSelect } from "@kaizen/components"
+import { FilterBar, Filters, DateRange, FilterMultiSelect } from '@kaizen/components'
 
 type ValuesMap = {
   filterId1: string
@@ -81,13 +75,13 @@ type ValuesMap = {
 
 const filters = [
   {
-    id: "filterId1",
-    name: "Filter 1",
+    id: 'filterId1',
+    name: 'Filter 1',
     Component: <FilterBar.Select {...props} />,
   },
   {
-    id: "filterId2",
-    name: "Filter 2",
+    id: 'filterId2',
+    name: 'Filter 2',
     Component: (
       <FilterBar.MultiSelect {...props}>
         {/* Compose your structure using subcomponents of FilterMultiSelect */}
@@ -96,11 +90,11 @@ const filters = [
     ),
   },
   {
-    id: "filterId3",
-    name: "Filter 3",
+    id: 'filterId3',
+    name: 'Filter 3',
     Component: <FilterBar.DateRangePicker {...props} />,
     isRemovable: true,
-    isUsableWhen: state => state.filterId1.value !== undefined
+    isUsableWhen: (state) => state.filterId1.value !== undefined,
   },
 ] satisfies Filters<ValuesMap>
 ```
@@ -133,6 +127,7 @@ Provided Filter components are built on top of their base component, and have th
 If the component comes with an `onChange` (or similar) prop, it will be made optional and it can be used for additional actions (eg. adding analytics).
 
 Available Filter components:
+
 - `<FilterBar.DatePicker>` - extends <LinkTo pageId="components-filter-date-picker">FilterDatePicker</LinkTo>
   - `selectedDate` is omitted
   - `onDateChange` is now optional
@@ -176,23 +171,28 @@ type ValuesMap = {
 
 const filters = [
   {
-    id: "coffee",
-    name: "Coffee",
-    Component: <FilterBar.Select items={[
-      { value: "long-black", label: "Long Black" },
-      { value: "latte", label: "Latte" },
-    ]} />,
+    id: 'coffee',
+    name: 'Coffee',
+    Component: (
+      <FilterBar.Select
+        items={[
+          { value: 'long-black', label: 'Long Black' },
+          { value: 'latte', label: 'Latte' },
+        ]}
+      />
+    ),
   },
   {
-    id: "milk",
-    name: "Milk",
+    id: 'milk',
+    name: 'Milk',
     Component: <FilterBar.Select {...props} />,
-    isUsableWhen: state => state.coffee.value === "latte",
+    isUsableWhen: (state) => state.coffee.value === 'latte',
   },
 ] satisfies Filters<ValuesMap>
 ```
 
 The `state` arg will provide you with the following attributes for all the filters (mapped to the keys of the `ValuesMap`):
+
 ```
 id: keyof ValuesMap
 name: string
@@ -201,6 +201,7 @@ isActive: boolean
 ```
 
 When a dependent filter has not met its condition (not _Usable_):
+
 - it will be removed from the FilterBar
 - if it has a value, the value will be cleared
 
@@ -223,12 +224,10 @@ type ValuesMap = {
 // @note: Unless you are providing a default value for all the filters,
 // you will want to wrap it in Partial.
 const [values, setValues] = useState<Partial<ValuesMap>>({
-  filterId1: "default-value"
+  filterId1: 'default-value',
 })
 
-return (
-  <FilterBar<ValuesMap> values={values} {...rest} />
-)
+return <FilterBar<ValuesMap> values={values} {...rest} />
 ```
 
 ### `onValuesChange`
@@ -247,6 +246,7 @@ Filters that do not meet their condition will not be shown amongst the Active Fi
 See [filter attribute `isUsableWhen`](#isusablewhen-state-filtersstatevaluesmap--boolean) for api.
 
 This example shows the following dependencies:
+
 - **Milk** is only usable when **Coffee** _is Latte_
   - `isUsableWhen: state => state.coffee.value === "latte"`
   - An initial value of _Full Cream_ is passed in, but immediately cleared
@@ -283,10 +283,10 @@ type Values = {
  * Using `getFilterState` as dependency source is known
  */
 const ExampleDependentFilter = () => {
-  const { getFilterState } = useFilterBarContext<Values["dependent"], Values>()
-  const sourceFilter = getFilterState("source")
+  const { getFilterState } = useFilterBarContext<Values['dependent'], Values>()
+  const sourceFilter = getFilterState('source')
   const items = retrieveItems(sourceFilter.value)
-  return (<FilterBar.Select<Option> id="dependent" items={items} />)
+  return <FilterBar.Select<Option> id="dependent" items={items} />
 }
 
 /**
@@ -301,13 +301,13 @@ const ExampleDependentFilter = (props: {
   const { getActiveFilterValues } = useFilterBarContext<Values[Id], Values>()
   const activeValues = getActiveFilterValues()
   const items = props.retrieveItemsCallback(activeValues)
-  return (<FilterBar.Select<Option> id={props.id} items={items} />)
+  return <FilterBar.Select<Option> id={props.id} items={items} />
 }
 
 const CustomFilterBar = () => {
   const filters = [
-    { id: "source", ...rest },
-    { id: "dependent", Component: <ExampleDependentFilter />, ...rest },
+    { id: 'source', ...rest },
+    { id: 'dependent', Component: <ExampleDependentFilter />, ...rest },
   ] satisfies Filters<Values>
 
   return <FilterBar<Values> filters={filters} {...rest} />
@@ -331,6 +331,7 @@ Out of the box, we do not make assumptions about your state management tool, so
 the types to match the expected format of your chosen query param library.
 
 The following example uses the
+
 <a href="https://www.npmjs.com/package/serialize-query-params">serialize-query-params</a>
 and <a href="https://www.npmjs.com/package/query-string">query-string</a>
 packages.
@@ -357,14 +358,14 @@ type Values = {
 }
 
 const CycleFilter = () => {
-  const { openFilter } = useFilterBarContext<Values["cycle"], Values>()
+  const { openFilter } = useFilterBarContext<Values['cycle'], Values>()
 
   return (
     <FilterBar.Select
       id="cycle"
-      items={[{ value: "custom", label: "Custom Range" }]}
-      onSelectionChange={key => {
-        if (key === "custom") openFilter("customRange")
+      items={[{ value: 'custom', label: 'Custom Range' }]}
+      onSelectionChange={(key) => {
+        if (key === 'custom') openFilter('customRange')
       }}
     />
   )
@@ -372,8 +373,8 @@ const CycleFilter = () => {
 
 const CustomFilterBar = () => {
   const filters = [
-    { id: "cycle", Component: <CycleFilter />, ...rest },
-    { id: "customRange", isUsableWhen: state => state.cycle.value === "custom", ...rest },
+    { id: 'cycle', Component: <CycleFilter />, ...rest },
+    { id: 'customRange', isUsableWhen: (state) => state.cycle.value === 'custom', ...rest },
   ] satisfies Filters<Values>
 
   return <FilterBar<Values> filters={filters} {...rest} />

package/src/Filter/FilterButton/_docs/filter-buttons.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { KAIOInstallation, ResourceLinks } from "~storybook/components"
-import * as FilterButtonExamples from "./FilterButton.stories"
-import * as FilterButtonRemovableExamples from "./FilterButtonRemovable.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { KAIOInstallation, ResourceLinks } from '~storybook/components'
+import * as FilterButtonExamples from './FilterButton.stories'
+import * as FilterButtonRemovableExamples from './FilterButtonRemovable.stories'
 
 <Meta title="Components/Filter Base/Filter Buttons" />
 
@@ -14,7 +14,7 @@ import * as FilterButtonRemovableExamples from "./FilterButtonRemovable.stories"
 
 Trigger buttons for use by components using the `<Filter>` abstraction.
 
-<KAIOInstallation exportNames={["FilterButton", "FilterButtonRemovable"]} />
+<KAIOInstallation exportNames={['FilterButton', 'FilterButtonRemovable']} />
 
 ## Filter Button
 

package/src/Filter/FilterDatePicker/_docs/FilterDatePicker.mdx

@@ -1,6 +1,6 @@
-import { Controls, Description, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
-import * as FilterDPStories from "./FilterDatePicker.stories"
+import { Controls, Description, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components'
+import * as FilterDPStories from './FilterDatePicker.stories'
 
 <Meta of={FilterDPStories} />
 
@@ -18,23 +18,28 @@ Date Picker to use for Filtering by a single date.
 <KAIOInstallation exportNames="FilterDatePicker" />
 
 ## Playground
+
 <NoClipCanvas of={FilterDPStories.Playground} />
 <Controls of={FilterDPStories.Playground} />
 
 ## API
 
 ### Render Trigger
+
 <Description of={FilterDPStories.RenderTrigger} />
 <NoClipCanvas of={FilterDPStories.RenderTrigger} />
 
 ### Description
+
 <Description of={FilterDPStories.Description} />
 <NoClipCanvas of={FilterDPStories.Description} />
 
 ### Extend Input Props
+
 <Description of={FilterDPStories.ExtendInputProps} />
 <NoClipCanvas of={FilterDPStories.ExtendInputProps} />
 
 ### Validation
+
 <Description of={FilterDPStories.Validation} />
 <NoClipCanvas of={FilterDPStories.Validation} />

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx

@@ -1,6 +1,6 @@
-import { Controls, Description, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
-import * as FilterDRPStories from "./FilterDateRangePicker.stories"
+import { Controls, Description, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from '~storybook/components'
+import * as FilterDRPStories from './FilterDateRangePicker.stories'
 
 <Meta of={FilterDRPStories} />
 
@@ -18,27 +18,33 @@ Date Range Picker to use for Filtering.
 <KAIOInstallation exportNames="FilterDateRangePicker" />
 
 ## Playground
+
 <NoClipCanvas of={FilterDRPStories.Playground} />
 <Controls of={FilterDRPStories.Playground} />
 
 ## API
 
 ### Render Trigger
+
 <Description of={FilterDRPStories.RenderTrigger} />
 <NoClipCanvas of={FilterDRPStories.RenderTrigger} />
 
 ### Selected Range
+
 <Description of={FilterDRPStories.SelectedRange} />
 <NoClipCanvas of={FilterDRPStories.SelectedRange} />
 
 ### Description
+
 <Description of={FilterDRPStories.Description} />
 <NoClipCanvas of={FilterDRPStories.Description} />
 
 ### Extend Input Props
+
 <Description of={FilterDRPStories.ExtendInputProps} />
 <NoClipCanvas of={FilterDRPStories.ExtendInputProps} />
 
 ### Validation
+
 <Description of={FilterDRPStories.Validation} />
 <NoClipCanvas of={FilterDRPStories.Validation} />