@bloom-housing/ui-components 12.7.6 → 13.0.0

package/src/overlays/Overlay.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react"
+import React, { useRef, useState, useEffect } from "react"
 import "./Overlay.scss"
 import useKeyPress from "../helpers/useKeyPress"
 import { createPortal } from "react-dom"
@@ -18,6 +18,7 @@ export type OverlayProps = {
   slim?: boolean
   role?: string
   scrollable?: boolean
+  nodeRef?: React.MutableRefObject<null>
 }
 
 const OverlayInner = (props: OverlayProps) => {
@@ -33,6 +34,7 @@ const OverlayInner = (props: OverlayProps) => {
 
   return (
     <div
+      ref={props.nodeRef}
       className={classNames.join(" ")}
       role={props.role}
       aria-labelledby={props.ariaLabelledBy}
@@ -53,6 +55,7 @@ const OverlayInner = (props: OverlayProps) => {
 }
 
 export const Overlay = (props: OverlayProps): any => {
+  const nodeRef = useRef(null)
   const documentAvailable = typeof document !== "undefined"
   const overlayRoot = useState<Element | null>(
     documentAvailable ? document.querySelector("#__next") : null
@@ -76,6 +79,7 @@ export const Overlay = (props: OverlayProps): any => {
     elForPortal &&
     createPortal(
       <CSSTransition
+        nodeRef={nodeRef}
         in={props.open}
         timeout={250}
         classNames="overlay-effect"
@@ -83,7 +87,9 @@ export const Overlay = (props: OverlayProps): any => {
         unmountOnExit
       >
         <RemoveScroll>
-          <OverlayInner {...props}>{props.children}</OverlayInner>
+          <OverlayInner nodeRef={nodeRef} {...props}>
+            {props.children}
+          </OverlayInner>
         </RemoveScroll>
       </CSSTransition>,
       elForPortal

package/src/page_components/ApplicationTimeline.scss

@@ -1,6 +1,6 @@
 .markdown ul.application-timeline {
   @apply mb-8;
-  @apply ml-0;
+  @apply ms-0;
 }
 
 .application-timeline {
@@ -11,9 +11,9 @@
     text-transform: unset;
 
     .absolute {
-      margin-top: 0.25rem;
+      margin-block-start: 0.25rem;
       z-index: 2;
-      margin-left: -0.4rem;
+      margin-inline-start: -0.4rem;
     }
 
     p {
@@ -21,23 +21,23 @@
     }
 
     &:before {
-      left: 50%;
+      inset-inline-start: 50%;
     }
 
     &:after {
-      left: 0;
+      inset-inline-start: 0;
     }
 
     &:first-of-type {
       &:after {
-        left: 50%;
+        inset-inline-start: 50%;
       }
     }
 
     &:last-of-type {
       &:after {
-        left: auto;
-        right: 50%;
+        inset-inline-start: auto;
+        inset-inline-end: 50%;
       }
     }
 
@@ -67,6 +67,6 @@
   }
 
   .progress-nav__dot-item::after {
-    top: 1rem;
+    inset-block-start: 1rem;
   }
 }

package/src/page_components/listing/ListingCard.docs.mdx

@@ -1,15 +1,17 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { ListingCard } from "./ListingCard"
+import * as ListingCardStories from './ListingCard.stories';
+
+<Meta of={ListingCardStories} />
 
 # ListingCard
 
 The listing card component renders an image with optional status bars below it, and a content section associated with the image which can include titles, a table, and custom content.
 
-<Canvas>
-  <Story id="page-components-listing-card--with-tags-and-headers" />
-</Canvas>
+<Canvas of={ListingCardStories.WithTagsAndHeaders} />
 
 <br />
+
 <br />
 
 ## Variants
@@ -20,15 +22,13 @@ Many of the display variations of the card are enabled by the interior content p
 
 By setting `stackedTable` to true, the interior table component switches from `StandardTable` to `StackedTable` for a different UI presentation.
 
-<Canvas>
-  <Story id="page-components-listing-card--with-stacked-table" />
-</Canvas>
+<Canvas of={ListingCardStories.withStackedTable} />
 
 ## Component Properties
 
-<ArgsTable of={ListingCard} />
+<ArgTypes of={ListingCard} />
 
-**Note:** for accessbility reasons, if you have a link that should apply to the card as a whole, pass an `href` prop to the `contentHeader` key of `contentProps`. (If you previously passed `href` to `imageCardProps`, you should remove that.) You'll also want to pass `ariaHidden: true` as a prop for the footer button.
+**Note:** for accessibility reasons, if you have a link that should apply to the card as a whole, pass an `href` prop to the `contentHeader` key of `contentProps`. (If you previously passed `href` to `imageCardProps`, you should remove that.) You'll also want to pass `ariaHidden: true` as a prop for the footer button.
 
 ## Theming Variables
 

package/src/text/Heading.docs.mdx

@@ -1,18 +1,20 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { Swatch } from "../prototypes/Swatch"
 import { Heading } from "./Heading"
+import * as HeadingStories from './Heading.stories';
+
+<Meta of={HeadingStories} />
 
 # Heading
 
 The heading component renders an HTML heading with a flexible priority and style. Each style available maps to a [Typography](?path=/story/theming-typography--page) variant.
 
-<Canvas>
-  <Story id="text-heading--large-header" />
-</Canvas>
+<Canvas of={HeadingStories.largeHeader} />
 
 <br />
+
 <br />
 
 ## Component Properties
 
-<ArgsTable of={Heading} />
+<ArgTypes of={Heading} />

package/src/text/Tag.docs.mdx

@@ -1,15 +1,17 @@
-import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { Tag } from "./Tag"
+import * as TagStories from './Tag.stories';
+
+<Meta of={TagStories} />
 
 # Tag
 
 The tag component offers a simple way to present a content label or status indicator.
 
-<Canvas>
-  <Story id="text-tag--pill-colors" />
-</Canvas>
+<Canvas of={TagStories.pillColors} />
 
 <br />
+
 <br />
 
 ## Variants
@@ -20,29 +22,23 @@ There are several props which accept enums to adjust style type and size. For ex
 
 (Default, no prop required.)
 
-<Canvas>
-  <Story id="text-tag--standard" />
-</Canvas>
+<Canvas of={TagStories.standard} />
 
 ### Pill
 
 Set the `pillStyle` property to `true`.
 
-<Canvas>
-  <Story id="text-tag--pill" />
-</Canvas>
+<Canvas of={TagStories.pill} />
 
 ### Fill Container
 
 Set the `fillContainer` property to `true` for a block tag which spans the entire width of its container.
 
-<Canvas>
-  <Story id="text-tag--pill-listings" />
-</Canvas>
+<Canvas of={TagStories.pillListings} />
 
 ## Component Properties
 
-<ArgsTable of={Tag} />
+<ArgTypes of={Tag} />
 
 ## Theming Variables