@bloom-housing/ui-components 12.7.6 → 13.0.0

package/src/actions/Button.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { withKnobs, text, select } from "@storybook/addon-knobs"
+import { useArgs } from "@storybook/preview-api"
 import { BADGES } from "../../.storybook/constants"
 import { Button } from "../actions/Button"
 import {
@@ -7,18 +7,37 @@ import {
   AppearanceSizeType,
   AppearanceStyleType,
 } from "../global/AppearanceTypes"
-import ButtonDocumentation from "./Button.docs.mdx"
 import { faArrowsRotate, faCoffee, faTable } from "@fortawesome/free-solid-svg-icons"
 
 export default {
   title: "Actions/Button 🚩",
-  id: "actions-button",
-  decorators: [(storyFn: any) => <div>{storyFn()}</div>, withKnobs],
+  decorators: [(storyFn: any) => <div>{storyFn()}</div>],
   parameters: {
-    docs: {
-      page: ButtonDocumentation,
-    },
     badges: [BADGES.GEN2],
+    controls: {
+      disable: true,
+    },
+  },
+  argTypes: {
+    label: {
+      control: "text",
+    },
+    styleType: {
+      options: AppearanceStyleType,
+      control: "select",
+    },
+    border: {
+      options: AppearanceBorderType,
+      control: "select",
+    },
+    icon: {
+      options: { arrowBack: "arrowBack", arrowForward: "arrowForward", coffee: faCoffee, rotate: faArrowsRotate, table: faTable },
+      control: "select",
+    },
+    iconPlacement: {
+      options: { left: "left", right: "right" },
+      control: "select",
+    },
   },
 }
 
@@ -26,63 +45,55 @@ const handleClick = (e: React.MouseEvent) => {
   alert(`You clicked me! Event: ${e.type}`)
 }
 
-const StyleTypeStory = { ...AppearanceStyleType, default: undefined }
-const BorderTypeStory = { ...AppearanceBorderType, default: undefined }
-
-export const standard = () => {
-  const styleSelect = select("Appearance Style", StyleTypeStory, undefined)
-  const borderSelect = select("Appearance Border", BorderTypeStory, undefined)
-  const iconSelect = select(
-    "Icon",
-    { arrowBack: "arrowBack", arrowForward: "arrowForward", default: undefined },
-    undefined
-  )
-  const iconPlacementSelect = select(
-    "Icon Placement",
-    { left: "left", right: "right", default: undefined },
-    undefined
-  )
-
-  return (
-    <>
-      <Button
-        styleType={styleSelect}
-        border={borderSelect}
-        icon={iconSelect}
-        iconPlacement={iconPlacementSelect}
-        onClick={handleClick}
-      >
-        {text("Label", "Hello Storybook")}
-      </Button>
-
-      <p className="mt-10">Try out different styles with the Knobs below.</p>
-    </>
-  )
+export const standard = {
+  parameters: {
+    controls: {
+      disable: false,
+    },
+  },
+  args: {
+    label: "Hello Storybook",
+  },
+  render: (args: Record<string, any>) => {
+    return (
+      <>
+        <Button
+          styleType={args.styleType}
+          border={args.border}
+          icon={args.icon}
+          iconPlacement={args.iconPlacement}
+          onClick={handleClick}
+        >
+          {args.label}
+        </Button>
+
+        <p className="mt-10">Try out different styles with the controls below.</p>
+      </>
+    )
+  },
 }
 
-export const withFontAwesomeIcon = () => {
-  const iconSelect = select("Icon", ["coffee", "rotate", "table"], "rotate")
-
-  const iconsMap = {
-    coffee: faCoffee,
-    rotate: faArrowsRotate,
-    table: faTable,
-  }
-
-  return (
-    <>
-      <Button
-        icon={iconSelect ? iconsMap[iconSelect] : undefined}
-        iconSize="medium"
-        iconPlacement="left"
-        onClick={handleClick}
-      >
-        FontAwesome is awesome
-      </Button>
-
-      <p className="mt-10">Try out different icons with the Knobs below.</p>
-    </>
-  )
+export const withFontAwesomeIcon = {
+  parameters: {
+    controls: {
+      disable: false,
+      include: ["icon"]
+    },
+  },
+  args: {
+    icon: faArrowsRotate,
+  },
+  render: (args: Record<string, any>) => {
+    return (
+      <>
+        <Button icon={args.icon} iconSize="medium" iconPlacement="left" onClick={handleClick}>
+          FontAwesome is awesome
+        </Button>
+
+        <p className="mt-10">Try out different icons with the controls below.</p>
+      </>
+    )
+  },
 }
 
 export const small = () => (

package/src/actions/ButtonGroup.docs.mdx

@@ -1,21 +1,23 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta, Story } from "@storybook/blocks"
 import { Swatch } from "../prototypes/Swatch"
 import { ButtonGroup } from "./ButtonGroup"
+import * as ButtonGroupStories from './ButtonGroup.stories';
+
+<Meta of={ButtonGroupStories} />
 
 # ButtonGroup
 
 The button group component lets you place multiple buttons along a horizontal or vertical (mobile primarily) axis and group/space buttons according to some simple flex rules.
 
-<Canvas>
-  <Story id="actions-button-group--two-columns" />
-</Canvas>
+<Canvas of={ButtonGroupStories.twoColumns} />
 
 <br />
+
 <br />
 
 ## Component Properties
 
-<ArgsTable of={ButtonGroup} />
+<ArgTypes of={ButtonGroup} />
 
 ## Theming Variables
 

package/src/actions/ButtonGroup.stories.tsx

@@ -2,7 +2,6 @@ import * as React from "react"
 import { BADGES } from "../../.storybook/constants"
 import { AppearanceStyleType } from "../.."
 import Button from "./Button"
-import ButtonGroupDocumentation from "./ButtonGroup.docs.mdx"
 
 import { ButtonGroup, ButtonGroupSpacing } from "./ButtonGroup"
 
@@ -10,9 +9,6 @@ export default {
   title: "Actions/Button Group 🚩",
   id: "actions-button-group",
   parameters: {
-    docs: {
-      page: ButtonGroupDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/blocks/Card.docs.mdx

@@ -1,12 +1,13 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { Swatch } from "../prototypes/Swatch"
 import { Card } from "./Card"
+import * as CardStories from './Card.stories';
+
+<Meta of={CardStories} />
 
 # Card
 
-<Canvas>
-  <Story id="blocks-card--text-content" />
-</Canvas>
+<Canvas of={CardStories.TextContent} />
 
 The 2nd-generation Card component is intended to serve as a flexible content container with a header, optional content sections, and a footer. Over time our intention is to "port" some other card types and content blocks in the system to use Card as their underlying structure.
 
@@ -20,25 +21,23 @@ The `<Card.Header>` subcomponent will typically be paired with a child `<Heading
 
 You can browse through the various stories for different examples of how you'd pattern a card with various subcomponents. Many of the visual aspects of a Card can be customized using the CSS variables listed below. For example, this "Detroit style" example:
 
-<Canvas>
-  <Story id="blocks-card--detroit-style" />
-</Canvas>
+<Canvas of={CardStories.DetroitStyle} />
 
 ## Card Properties
 
-<ArgsTable of={Card} />
+<ArgTypes of={Card} />
 
 ## Card.Header Properties
 
-<ArgsTable of={Card.Header} />
+<ArgTypes of={Card.Header} />
 
 ## Card.Section Properties
 
-<ArgsTable of={Card.Section} />
+<ArgTypes of={Card.Section} />
 
 ## Card.Footer Properties
 
-<ArgsTable of={Card.Footer} />
+<ArgTypes of={Card.Footer} />
 
 ## Theming Variables
 

package/src/blocks/Card.stories.tsx

@@ -3,15 +3,11 @@ import { BADGES } from "../../.storybook/constants"
 import { AppearanceStyleType, Button, ButtonGroup, ButtonGroupSpacing, LinkButton } from "../.."
 import { HeadingGroup } from "../headers/HeadingGroup"
 import Card from "./Card"
-import CardDocumentation from "./Card.docs.mdx"
 
 export default {
   title: "Blocks/Card 🚩",
   id: "blocks/card",
   parameters: {
-    docs: {
-      page: CardDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/blocks/ImageCard.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 { ImageCard, ImageItem } from "./ImageCard"
+import * as ImageCardStories from './ImageCard.stories';
+
+<Meta of={ImageCardStories} />
 
 # Image Card
 
-The image card component renders an image with optional tags at top and status bars below it. You can optionally pass multiple images in which will faciliate a popup gallery modal automatically.
+The image card component renders an image with optional tags at top and status bars below it. You can optionally pass multiple images in which will facilitate a popup gallery modal automatically.
 
-<Canvas>
-  <Story id="blocks-image-card--with-one-status-and-tag" />
-</Canvas>
+<Canvas of={ImageCardStories.withOneStatusAndTag} />
 
 <br />
+
 <br />
 
 ## Component Properties
 
-<ArgsTable of={ImageCard} />
+<ArgTypes of={ImageCard} />
 
 ## Theming Variables
 

package/src/blocks/ImageCard.stories.tsx

@@ -4,16 +4,12 @@ import { ImageCard } from "./ImageCard"
 import { t } from "../helpers/translator"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
 import { IconFillColors, UniversalIconType } from "../icons/Icon"
-import ImageCardDocumentation from "./ImageCard.docs.mdx"
 
 export default {
   title: "Blocks/Image Card 🚩",
   id: "blocks/image-card",
   decorators: [(storyFn: any) => <div style={{ maxWidth: "700px" }}>{storyFn()}</div>],
   parameters: {
-    docs: {
-      page: ImageCardDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/blocks/InfoCard.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 { InfoCard } from "./InfoCard"
+import * as InfoCardStories from './InfoCard.stories';
+
+<Meta of={InfoCardStories} />
 
 # Info Card
 
 The Info Card component renders a box with a title, which can optionally be a hyperlink. Beneath the title is an optional subtitle. Beneath the subtitle can be a string, a component, or markdown.
 
-<Canvas>
-  <Story id="blocks-info-card" />
-</Canvas>
+<Canvas of={InfoCardStories.Default} />
 
 <br />
+
 <br />
 
 ## Component Properties
 
-<ArgsTable of={InfoCard} />
+<ArgTypes of={InfoCard} />
 
 ## Theming Variables
 
@@ -26,7 +28,7 @@ You can apply CSS variables to the `.info-card` selector to customize the appear
 | `--padding`                 | Size                                                | Padding around card                                                    | `--bloom-s6`                                              |
 | `--margin-bottom`           | Size                                                | Margin beneath card                                                    | `--bloom-s4`                                              |
 | `--border-color`            | <Swatch colorVar="--bloom-color-gray-450" />        | Color of border around card                                            | `--bloom-color-gray-450`                                  |
-| `--background-color`        | <Swatch colorVar="--bloom-color-primary-lighter"/>  | Background color of card                                               | `--bloom-color-primary-lighter`                           |
+| `--background-color`        | <Swatch colorVar="--bloom-color-primary-lighter" />  | Background color of card                                               | `--bloom-color-primary-lighter`                           |
 | `--title-color`             | <Swatch colorVar="--bloom-color-gray-800" />        | Color of title text                                                    | `--bloom-color-gray-800`                                  |
 | `--title-font-size`         | Size                                                | Size of title text                                                     | `--bloom-font-size-base`                                  |
 | `--title-font-family`       | Font                                                | Font family of title text                                              | `--bloom-font-sans`                                       |

package/src/blocks/InfoCard.stories.tsx

@@ -2,16 +2,12 @@ import React from "react"
 import { BADGES } from "../../.storybook/constants"
 import { InfoCard } from "../blocks/InfoCard"
 import { ExpandableText } from "../actions/ExpandableText"
-import InfoCardDocumentation from "./InfoCard.docs.mdx"
 
 export default {
   title: "blocks/Info Card  🚩",
   decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
   id: "blocks/info-card",
   parameters: {
-    docs: {
-      page: InfoCardDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/blocks/MediaCard.docs.mdx

@@ -1,23 +1,22 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { MediaCard } from "./MediaCard"
+import * as MediaCardStories from './MediaCard.stories';
+
+<Meta of={MediaCardStories} />
 
 # Media Card
 
 The media card component is used to describe the title and, optionally, subtitle of a corresponding piece of media. The header section and title of the media card is clickable and displays the media via the required handleClick prop.
 
-<Canvas>
-  <Story id="blocks-media-card--with-title-and-subtitle" />
-</Canvas>
-<Canvas>
-  <Story id="blocks-media-card--with-just-title" />
-</Canvas>
-<Canvas>
-  <Story id="blocks-media-card--with-custom-icon" />
-</Canvas>
+<Canvas of={MediaCardStories.withTitleAndSubtitle} />
+
+<Canvas of={MediaCardStories.withJustTitle} />
+
+<Canvas of={MediaCardStories.withCustomIcon} />
 
 ## Component Properties
 
-<ArgsTable of={MediaCard} />
+<ArgTypes of={MediaCard} />
 
 ## Theming Variables
 

package/src/blocks/MediaCard.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from "react"
 import { MediaCard } from "./MediaCard"
 import { faCirclePlay } from "@fortawesome/free-solid-svg-icons"
-import MediaCardDocumentation from "./MediaCard.docs.mdx"
 import { BADGES } from "../../.storybook/constants"
 
 export default {
@@ -9,9 +8,6 @@ export default {
   id: "blocks/media-card",
   decorators: [(storyFn: any) => <div style={{ maxWidth: "313px" }}>{storyFn()}</div>],
   parameters: {
-    docs: {
-      page: MediaCardDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

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/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,7 +5,6 @@ import MultiSelectField, {
   MultiSelectFieldItem,
 } from "./MultiSelectField"
 import { useForm } from "react-hook-form"
-import MultiSelectFieldDocumentation from "./MultiSelectField.docs.mdx"
 
 export default {
   title: "Forms/MultiSelect Field 🚩",
@@ -16,9 +15,6 @@ export default {
     ),
   ],
   parameters: {
-    docs: {
-      page: MultiSelectFieldDocumentation,
-    },
     badges: [BADGES.GEN2],
   },
 }

package/src/global/forms.scss

@@ -38,9 +38,9 @@
   .field-border {
     label {
       background-color: var(--bloom-color-white);
-      padding-top: var(--bordered-vertical-padding);
-      padding-bottom: var(--bordered-vertical-padding);
-      padding-left: var(--bordered-leftward-padding);
+      padding-block-start: var(--bordered-vertical-padding);
+      padding-block-end: var(--bordered-vertical-padding);
+      padding-inline-start: var(--bordered-leftward-padding);
       border-width: var(--bordered-border-width);
       border-radius: var(--bordered-border-radius);
       border-color: var(--bloom-color-gray-450);
@@ -80,8 +80,8 @@
     }
 
     select.input {
-      @apply pl-3;
-      @apply pr-8;
+      @apply ps-3;
+      @apply pe-8;
     }
 
     input.input {
@@ -98,11 +98,11 @@
     }
 
     .prepend + input[aria-invalid="false"] {
-      @apply pl-8;
+      @apply ps-8;
     }
 
     .prepend + input[aria-invalid="true"] {
-      @apply pl-12;
+      @apply ps-12;
     }
 
     &.control-narrower {
@@ -114,7 +114,7 @@
   input[type="radio"] {
     opacity: 0;
     position: absolute;
-    margin-left: -20px;
+    margin-inline-start: -20px;
 
     &:focus {
       text-decoration: none;
@@ -287,7 +287,7 @@ input[type="number"] {
   @apply flex;
 
   .field {
-    @apply mr-5;
+    @apply me-5;
     @apply mb-0;
   }
 }
@@ -303,23 +303,23 @@ input[type="number"] {
 }
 
 .field--inline + .field--inline {
-  margin-left: 1.5rem;
+  margin-inline-start: 1.5rem;
 }
 
 .flex > .field,
 .field-group--date .field {
   @apply flex-auto;
-  margin-left: 0.325rem;
-  margin-right: 0.325rem;
+  margin-inline-start: 0.325rem;
+  margin-inline-end: 0.325rem;
 }
 
 .flex > .field,
 .field-group--date .field {
   &:first-of-type {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   &:last-of-type {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }