@bloom-housing/ui-components 12.7.6 → 13.0.0

package/src/global/lists.scss

@@ -13,8 +13,7 @@
 
   .header-hidden {
     @screen md {
-      @apply pt-0;
-      @apply pb-0;
+      padding-block: 0;
     }
   }
 }
@@ -28,13 +27,16 @@
   position: relative;
   display: block;
   counter-increment: list;
-  margin: 0 0 1rem 2rem;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-block-end: 1rem;
+  margin-inline-start: 2rem;
 }
 .numbered-list li:before {
   display: inline-block;
   position: absolute;
-  top: 0;
-  left: -2rem;
+  inset-block-start: 0;
+  inset-inline-start: -2rem;
   text-align: center;
   content: counter(list);
   border-radius: 50%;
@@ -49,7 +51,10 @@
 }
 @screen md {
   .numbered-list li {
-    margin: 0 0 1.5rem 2.5rem;
+    margin-block-start: 0;
+    margin-inline-end: 0;
+    margin-block-end: 1.5rem;
+    margin-inline-start: 2.5rem;
   }
   .numbered-list li:before {
     font-size: 1rem;
@@ -57,7 +62,7 @@
     width: 2rem;
     height: 2rem;
     line-height: 2rem;
-    top: -0.25rem;
-    left: -2.5rem;
+    inset-block-start: -0.25rem;
+    inset-inline-start: -2.5rem;
   }
 }

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/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.scss

@@ -33,11 +33,11 @@
     height: var(--circle-desktop-size);
   }
   padding: 0rem var(--circle-x-padding);
-  margin-right: var(--title-spacing);
+  margin-inline-end: var(--title-spacing);
   border-radius: 50%;
 }
 
 .step-header__title {
-  margin-left: var(--title-spacing);
+  margin-inline-start: var(--title-spacing);
   font-weight: var(--label-font-weight);
 }

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/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.scss

@@ -47,8 +47,8 @@
     width: var(--dot-size);
     background-color: var(--completed-step-color);
     border-radius: 50%;
-    top: 0;
-    left: 0.5rem;
+    inset-block-start: 0;
+    inset-inline-start: 0.5rem;
     content: "";
     transform: translateX(-50%);
     z-index: 2;
@@ -58,34 +58,34 @@
     position: absolute;
     background-color: var(--completed-step-color);
     width: 100%;
-    left: 0.5rem;
-    top: 0.4rem;
+    inset-inline-start: 0.9rem;
+    inset-block-start: 0.4rem;
     content: "";
     height: 1px;
   }
 
   &:first-of-type {
     &:after {
-      left: 20%;
+      inset-inline-start: 32%;
     }
   }
 
   &:last-of-type {
     &:after {
-      left: auto;
-      right: 80%;
+      inset-inline-start: auto;
+      inset-inline-end: 80%;
     }
   }
   .progress-nav__item-container {
-    padding-top: var(--dot-label-padding-top);
-    padding-left: var(--dot-label-padding-left);
+    padding-block-start: var(--dot-label-padding-top);
+    padding-inline-start: var(--dot-label-padding-left);
     color: var(--completed-step-font-color);
     display: block;
     position: relative;
     pointer-events: none;
     cursor: default;
     z-index: 3;
-    padding-right: var(--dot-label-padding-right);
+    padding-inline-end: var(--dot-label-padding-right);
   }
 
   &.is-active {
@@ -129,8 +129,8 @@
 .progress-nav__bar-item {
   // drop the labels on mobile view
   font-size: 0;
-  padding-top: var(--bar-label-padding-top);
-  padding-left: var(--bar-label-padding-left);
+  padding-block-start: var(--bar-label-padding-top);
+  padding-inline-start: var(--bar-label-padding-left);
   position: relative;
   display: table-cell;
   white-space: normal;

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.scss

@@ -102,7 +102,7 @@
 
 .alert-box__close {
   font-size: var(--body-close-font-size);
-  right: var(--horizontal-padding);
+  inset-inline-end: var(--horizontal-padding);
   margin-inline-start: var(--bloom-s3);
   padding: 0;
   line-height: var(--bloom-s4);
@@ -119,11 +119,11 @@
 
 .alert-box__sticky {
   position: sticky;
-  top: var(--bloom-s3);
+  inset-block-start: var(--bloom-s3);
   margin-block-start: var(--bloom-s3);
   margin-inline-end: var(--bloom-s3);
   z-index: 10;
-  margin-left: auto;
+  margin-inline-start: auto;
   width: fit-content;
 }
 

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