@bloom-housing/ui-components 12.7.7 → 13.0.1

package/src/blocks/StandardCard.docs.mdx

@@ -1,23 +1,22 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { StandardCard } from "./StandardCard"
+import * as StandardCardStories from './StandardCard.stories';
+
+<Meta of={StandardCardStories} />
 
 # Standard Card
 
 The standard card component displays a title with a child element (e.g table) and optional footer.
 
-<Canvas>
-  <Story id="blocks-standard-card" />
-</Canvas>
+<Canvas of={StandardCardStories.Blank} />
 
 ## Component Properties
 
-<ArgsTable of={StandardCard} />
+<ArgTypes of={StandardCard} />
 
 ## Theming Variables
 
-<Canvas>
-  <Story id="blocks-standard-card--style-overrides" />
-</Canvas>
+<Canvas of={StandardCardStories.styleOverrides} />
 
 You can apply CSS variables to the `.standard-card` selector to customize the appearance of the component.
 

package/src/blocks/StandardCard.stories.tsx

@@ -6,7 +6,6 @@ import { MinimalTable } from "../tables/MinimalTable"
 import { mockDataWithStyling, mockHeadersWithStyling } from "../tables/MinimalTable.stories"
 
 import { Button } from "../actions/Button"
-import StandardCardDocumentation from "./StandardCard.docs.mdx"
 
 export default {
   title: "Blocks/StandardCard  🚩",
@@ -14,9 +13,6 @@ export default {
   decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
   component: StandardCard,
   parameters: {
-    docs: {
-      page: StandardCardDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/documentation/{Utilities.stories.mdx → Utilities.docs.mdx}

@@ -1,4 +1,4 @@
-import { Canvas, Story, Meta, DocsContainer, Source } from "@storybook/addon-docs"
+import { Meta, DocsContainer, Unstyled } from "@storybook/addon-docs"
 import { LargeHeader, LargeHeaderSource, Typography } from "./Utilities"
 
 <Meta
@@ -22,4 +22,6 @@ These styles are component agnostic and can be used to ensure UI consistency acr
 
 These classes can be added to any text element in order to give it visual identity and hierarchy.
 
-<Typography />
+<Unstyled>
+  <Typography />
+</Unstyled>

package/src/forms/Dropzone.stories.tsx

@@ -1,10 +1,9 @@
 import * as React from "react"
-import { withKnobs } from "@storybook/addon-knobs"
 import { Dropzone } from "./Dropzone"
 
 export default {
   title: "Forms/Dropzone",
-  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>, withKnobs],
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
 }
 
 export const defaultDropzone = () => {

package/src/forms/Field.tsx

@@ -5,7 +5,7 @@ import { httpsRegex, urlRegex } from "../helpers/validators"
 
 export interface FieldProps {
   error?: boolean
-  errorMessage?: string | JSX.Element
+  errorMessage?: string | React.JSX.Element
   className?: string
   controlClassName?: string
   caps?: boolean
@@ -14,7 +14,7 @@ export interface FieldProps {
   type?: string
   id?: string
   name: string
-  note?: string | JSX.Element
+  note?: string | React.JSX.Element
   subNote?: string
   label?: string | React.ReactNode
   defaultValue?: string | number
@@ -35,7 +35,7 @@ export interface FieldProps {
   hidden?: boolean
   labelClassName?: string
   bordered?: boolean
-  postInputContent?: JSX.Element
+  postInputContent?: React.JSX.Element
 }
 
 const Field = (props: FieldProps) => {

package/src/forms/MultiSelectField.docs.mdx

@@ -1,13 +1,14 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { MultiSelectField } from "./MultiSelectField"
+import * as MultiSelectFieldStories from './MultiSelectField.stories';
+
+<Meta of={MultiSelectFieldStories} />
 
 # Multi-Select Field
 
 The multi-select field component lets you type to autocomplete and select from a list of options which possibly are lazy-loaded from an API. Selected options show as tags below the text input, and those options can also be removed.
 
-<Canvas>
-  <Story id="forms-multi-select-field--standard" />
-</Canvas>
+<Canvas of={MultiSelectFieldStories.standard} />
 
 ## Data Source and Default Values
 
@@ -64,7 +65,7 @@ return [
 
 ## Component Properties
 
-<ArgsTable of={MultiSelectField} />
+<ArgTypes of={MultiSelectField} />
 
 ## Theming Variables
 

package/src/forms/MultiSelectField.stories.tsx

@@ -5,20 +5,16 @@ import MultiSelectField, {
   MultiSelectFieldItem,
 } from "./MultiSelectField"
 import { useForm } from "react-hook-form"
-import MultiSelectFieldDocumentation from "./MultiSelectField.docs.mdx"
 
 export default {
   title: "Forms/MultiSelect Field 🚩",
   id: "forms/multi-select-field",
   decorators: [
-    (storyFn: () => JSX.Element) => (
+    (storyFn: () => React.JSX.Element) => (
       <div style={{ padding: "30px", maxWidth: "600px" }}>{storyFn()}</div>
     ),
   ],
   parameters: {
-    docs: {
-      page: MultiSelectFieldDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/forms/PhoneField.tsx

@@ -18,7 +18,7 @@ export const PhoneField = (props: {
   control?: any
   disabled?: boolean
   required?: boolean
-  mask?: (args: any) => JSX.Element
+  mask?: (args: any) => React.JSX.Element
   dataTestId?: string
 }) => {
   const labelClasses = []

package/src/forms/checkbox.stories.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 
 export default {
   title: "Forms/Checkbox",
-  decorators: [(storyFn: () => JSX.Element) => <div style={{ padding: "30px" }}>{storyFn()}</div>],
+  decorators: [(storyFn: () => React.JSX.Element) => <div style={{ padding: "30px" }}>{storyFn()}</div>],
 }
 
 export const standard = () => (

package/src/forms/radio.stories.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 
 export default {
   title: "Forms/Radio",
-  decorators: [(storyFn: () => JSX.Element) => <div style={{ padding: "30px" }}>{storyFn()}</div>],
+  decorators: [(storyFn: () => React.JSX.Element) => <div style={{ padding: "30px" }}>{storyFn()}</div>],
 }
 
 export const standard = () => (

package/src/headers/HeadingGroup.docs.mdx

@@ -1,17 +1,18 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { HeadingGroup } from "./HeadingGroup"
+import * as HeadingGroupStories from './HeadingGroup.stories';
+
+<Meta of={HeadingGroupStories} />
 
 # Heading Group
 
-<Canvas>
-  <Story id="headers-heading-group--with-content" />
-</Canvas>
+<Canvas of={HeadingGroupStories.withContent} />
 
 The HeadingGroup component provides a heading tag (h1-h6) combined with a paragraph tag as a subheading in an aria-minded fashion. Good for use in Card header components and other headers.
 
 ## Heading Group Properties
 
-<ArgsTable of={HeadingGroup} />
+<ArgTypes of={HeadingGroup} />
 
 ## Theming Variables
 

package/src/headers/HeadingGroup.stories.tsx

@@ -1,15 +1,11 @@
 import React from "react"
 import { BADGES } from "../../.storybook/constants"
 import HeadingGroup from "./HeadingGroup"
-import HeadingGroupDocumentation from "./HeadingGroup.docs.mdx"
 
 export default {
   title: "Headers/Heading Group 🚩",
   id: "headers/heading-group",
   parameters: {
-    docs: {
-      page: HeadingGroupDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/headers/PageHeader.docs.mdx

@@ -1,15 +1,17 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { PageHeader } from "./PageHeader"
+import * as PageHeaderStories from './PageHeader.stories';
+
+<Meta of={PageHeaderStories} />
 
 # Page Header
 
-The page header component displays a title, with an optional subtitle and/or arbitary children elements.
+The page header component displays a title, with an optional subtitle and/or arbitrary children elements.
 
-<Canvas>
-  <Story id="headers-page-header--with-content" />
-</Canvas>
+<Canvas of={PageHeaderStories.withContent} />
 
 <br />
+
 <br />
 
 ## Variants
@@ -18,19 +20,15 @@ The page header component displays a title, with an optional subtitle and/or arb
 
 Set the `inverse` property to `true`.
 
-<Canvas>
-  <Story id="headers-page-header--inversed" />
-</Canvas>
+<Canvas of={PageHeaderStories.inversed} />
 
 ## Component Properties
 
-<ArgsTable of={PageHeader} />
+<ArgTypes of={PageHeader} />
 
 ## Theming Variables
 
-<Canvas>
-  <Story id="headers-page-header--style-overrides" />
-</Canvas>
+<Canvas of={PageHeaderStories.styleOverrides} />
 
 You can apply CSS variables to the `.page-header` selector to customize the appearance of the component.
 

package/src/headers/PageHeader.stories.tsx

@@ -1,15 +1,11 @@
 import * as React from "react"
 import { BADGES } from "../../.storybook/constants"
 import { PageHeader } from "./PageHeader"
-import PageHeaderDocumentation from "./PageHeader.docs.mdx"
 
 export default {
   title: "Headers/Page Header 🚩",
   id: "headers/page-header",
   parameters: {
-    docs: {
-      page: PageHeaderDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/headers/SiteHeader.tsx

@@ -343,7 +343,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
     return (
       <>
         {props.menuLinks.map((menuLink, index) => {
-          let menuContent: JSX.Element
+          let menuContent: React.JSX.Element
           if (menuLink.subMenuLinks) {
             menuContent = getDesktopDropdown(menuLink.title, menuLink.subMenuLinks)
           } else {

package/src/headers/StepHeader.docs.mdx

@@ -1,27 +1,28 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { StepHeader } from "./StepHeader"
+import * as StepHeaderStories from './StepHeader.stories';
+
+<Meta of={StepHeaderStories} />
 
 # Step Header
 
 The step header component is used to quickly describe progress in a multi-step process. It displays the current step number, the total steps in the process, and the name of the current step. The component also requires the step preposition to be passed in along with any custom css classes if the use case requires customization.
 
-<Canvas>
-  <Story id="headers-step-header--basic-dynamic" />
-</Canvas>
+<Canvas of={StepHeaderStories.basicDynamic} />
 
 ## Varying Process Lengths
 
-<Canvas>
-  <Story id="headers-step-header--final-step" />
-</Canvas>
+<Canvas of={StepHeaderStories.finalStep} />
+
+<Canvas of={StepHeaderStories.doubleDigits} />
+
+<Canvas of={StepHeaderStories.tripleDigits} />
+
+## Component Properties
 
-<Canvas>
-  <Story id="headers-step-header--double-digits" />
-</Canvas>
+<ArgTypes of={StepHeader} />
 
-<Canvas>
-  <Story id="headers-step-header--triple-digits" />
-</Canvas>
+## Theming Variables
 
 You can apply CSS variables to the `.step-header` selector to customize the appearance of the component.
 

package/src/headers/StepHeader.stories.tsx

@@ -1,5 +1,4 @@
-import { useState } from "@storybook/addons"
-import * as React from "react"
+import React, { useState } from "react"
 import { BADGES } from "../../.storybook/constants"
 import { StepHeader } from "./StepHeader"
 import { Button } from "../actions/Button"

package/src/headers/StepHeader.tsx

@@ -18,7 +18,7 @@ const StepHeader = ({
   className,
   priority,
 }: StepHeaderProps) => {
-  const Tag = `h${priority || 2}` as keyof JSX.IntrinsicElements
+  const Tag = `h${priority || 2}` as keyof React.JSX.IntrinsicElements
 
   return (
     <Tag className={`step-header ${className || ""}`}>

package/src/lists/PreferencesList.docs.mdx

@@ -1,21 +1,23 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { Swatch } from "../prototypes/Swatch"
 import { PreferencesList } from "./PreferencesList"
+import * as PreferencesListStories from './PreferencesList.stories';
+
+<Meta of={PreferencesListStories} />
 
 # Preferences List
 
 The Preferences List component renders a list of cards that contain a title, an optional subtitle, an optional description, and an optional list of hyperlinks. Each card has an ordinal which indicates the position in the list the card is in.
 
-<Canvas>
-  <Story id="lists-preferences-list" />
-</Canvas>
+<Canvas of={PreferencesListStories.preferences} />
 
 <br />
+
 <br />
 
 ## Component Properties
 
-<ArgsTable of={PreferencesList} />
+<ArgTypes of={PreferencesList} />
 
 ## Theming Variables
 
@@ -25,7 +27,7 @@ You can apply CSS variables to the `.preferences-list` selector to customize the
 | --------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------- |
 | `--title-color`             | <Swatch colorVar="--bloom-color-gray-800" />        | Font color of title                                                    | `--bloom-color-gray-800`                                  |
 | `--title-text-transform`    | Font                                                | Capitalization of title                                                | `uppercase`                                               |
-| `--ordinal-bg-color`        | <Swatch colorVar="--bloom-color-white"  />          | Ordinal background color                                               | `--bloom-color-white`                                     |
+| `--ordinal-bg-color`        | <Swatch colorVar="--bloom-color-white" />          | Ordinal background color                                               | `--bloom-color-white`                                     |
 | `--ordinal-border-width`    | Border                                              | Ordinal border width                                                   | `--bloom-border-2;`                                       |
 | `--ordinal-border-color`    | <Swatch colorVar="--bloom-color-primary" />         | Ordinal border color                                                   | `--bloom-color-primary`                                   |
 | `--ordinal-color`           | <Swatch colorVar="--bloom-color-primary" />         | Ordinal font color                                                     | `--bloom-color-primary`                                   |

package/src/navigation/LanguageNav.stories.tsx

@@ -1,11 +1,10 @@
 import React from "react"
 import { BADGES } from "../../.storybook/constants"
 import { LanguageNav } from "./LanguageNav"
-import { text, withKnobs } from "@storybook/addon-knobs"
 
 export default {
   title: "Navigation/LanguageNav 🚩",
-  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>, withKnobs],
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
   parameters: {
     badges: [BADGES.GEN2],
   },
@@ -13,7 +12,6 @@ export default {
 
 export const Default = () => (
   <LanguageNav
-    ariaLabel={text("ariaLabel", "")}
     languages={[
       {
         label: "English",

package/src/navigation/ProgressNav.docs.mdx

@@ -1,5 +1,8 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { ProgressNav } from "./ProgressNav"
+import * as ProgressNavStories from './ProgressNav.stories';
+
+<Meta of={ProgressNavStories} />
 
 # Progress Nav
 
@@ -7,17 +10,19 @@ The progress nav component is used to illustrate progress in a multi-step proces
 
 ## Dot Style
 
-<Canvas>
-  <Story id="navigation-progress-nav--default" />
-</Canvas>
+<Canvas of={ProgressNavStories.Default} />
 
 ## Bar Style
 
-<Canvas>
-  <Story id="navigation-progress-nav--bar-style" />
-</Canvas>
+<Canvas of={ProgressNavStories.barStyle} />
+
+## Component Properties
+
+<ArgTypes of={ProgressNav} />
+
+## Theming Variables
 
-You can apply CSS variables to the `.progrss-nav` selector to customize the appearance of the component.
+You can apply CSS variables to the `.progress-nav` selector to customize the appearance of the component.
 
 | Name                          | Type  | Description                                 | Default                        |
 | ----------------------------- | ----- | ------------------------------------------- | ------------------------------ |

package/src/navigation/ProgressNav.stories.tsx

@@ -1,15 +1,11 @@
 import React from "react"
 import { BADGES } from "../../.storybook/constants"
 import { ProgressNav } from "./ProgressNav"
-import ProgressNavDocs from "./ProgressNav.docs.mdx"
 
 export default {
   title: "Navigation/Progress Nav 🚩",
   decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
   parameters: {
-    docs: {
-      page: ProgressNavDocs,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/navigation/SideNav.docs.mdx

@@ -1,21 +1,23 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { Swatch } from "../prototypes/Swatch"
 import { SideNav } from "./SideNav"
+import * as SideNavStories from './SideNav.stories';
+
+<Meta of={SideNavStories} />
 
 # Side Navigation
 
 The side nav component renders a list of navigation links, any of which can optionally have children links for a hierarchical list.
 
-<Canvas>
-  <Story id="navigation-side-nav--current" />
-</Canvas>
+<Canvas of={SideNavStories.Current} />
 
 <br />
+
 <br />
 
 ## Component Properties
 
-<ArgsTable of={SideNav} />
+<ArgTypes of={SideNav} />
 
 ## Theming Variables
 

package/src/navigation/SideNav.stories.tsx

@@ -3,16 +3,12 @@ import { BADGES } from "../../.storybook/constants"
 import { StandardTable } from "../tables/StandardTable"
 import { SideNav } from "./SideNav"
 import { mockHeaders, mockData } from "../tables/StandardTable.stories"
-import SideNavDocumentation from "./SideNav.docs.mdx"
 
 export default {
   title: "Navigation/Side Nav 🚩",
   id: "navigation/side-nav",
   decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
   parameters: {
-    docs: {
-      page: SideNavDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/notifications/AlertBox.docs.mdx

@@ -1,23 +1,22 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { AlertBox } from "./AlertBox"
+import * as AlertBoxStories from './AlertBox.stories';
+
+<Meta of={AlertBoxStories} />
 
 # Alert Box
 
 The alert box component displays a themed notice with text.
 
-<Canvas>
-  <Story id="notifications-alert-box" />
-</Canvas>
+<Canvas of={AlertBoxStories.AlertBoxAlert} />
 
 ## Component Properties
 
-<ArgsTable of={AlertBox} />
+<ArgTypes of={AlertBox} />
 
 ## Theming Variables
 
-<Canvas>
-  <Story id="notifications-alert-box--style-overrides" />
-</Canvas>
+<Canvas of={AlertBoxStories.styleOverrides} />
 
 You can apply CSS variables to the `.alert-box` selector to customize the appearance of the component.
 

package/src/notifications/AlertBox.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react"
 import { AlertBox } from "./AlertBox"
-import AlertBoxDocumentation from "./AlertBox.docs.mdx"
 import { BADGES } from "../../.storybook/constants"
 import { withMenuLinks } from "../headers/SiteHeader.stories"
 
@@ -10,9 +9,6 @@ export default {
   decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
   component: AlertBox,
   parameters: {
-    docs: {
-      page: AlertBoxDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/notifications/ApplicationStatus.stories.tsx

@@ -5,7 +5,6 @@ import { ApplicationStatus } from "./ApplicationStatus"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
 import { t } from "../helpers/translator"
 import Archer from "../../__tests__/fixtures/archer.json"
-import { text, withKnobs } from "@storybook/addon-knobs"
 import formatDateTime from "../helpers/DateFormat"
 
 dayjs.extend(advancedFormat)
@@ -13,7 +12,7 @@ dayjs.extend(advancedFormat)
 export default {
   component: ApplicationStatus,
   title: "Notifications/Application Status",
-  decorators: [(storyFn: any) => <div>{storyFn()}</div>, withKnobs],
+  decorators: [(storyFn: any) => <div>{storyFn()}</div>],
 }
 
 const listing = Object.assign({}, Archer) as any
@@ -74,7 +73,7 @@ export const pastDueAndVivid = () => (
 
 export const pastDueWithStyles = () => (
   <ApplicationStatus
-    className={text("className", "place-content-center")}
+    className={"place-content-center"}
     content={
       t("listings.applicationsClosed") + ": " + formatDateTime(listingPast.applicationDueDate)
     }
@@ -87,7 +86,7 @@ export const pastDueWithIconColor = () => (
     content={
       t("listings.applicationsClosed") + ": " + formatDateTime(listingPast.applicationDueDate)
     }
-    iconColor={text("Icon Color", "#ff0000")}
+    iconColor={"#ff0000"}
     status={ApplicationStatusType.Closed}
   />
 )

package/src/overlays/Modal.docs.mdx

@@ -1,21 +1,23 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { Swatch } from "../prototypes/Swatch"
 import { Modal } from "./Modal"
+import * as ModalStories from './Modal.stories';
+
+<Meta of={ModalStories} />
 
 # Modal
 
 The modal component displays a modal with a title and optional children typed as either a string or JSX. The modal includes a number of other optional settings.
 
-<Canvas>
-  <Story id="overlays-modal--basic-modal" />
-</Canvas>
+<Canvas of={ModalStories.BasicModal} />
 
 <br />
+
 <br />
 
 ## Component Properties
 
-<ArgsTable of={Modal} />
+<ArgTypes of={Modal} />
 
 ## Theming Variables