@bloom-housing/ui-components 7.3.2 → 8.0.0

package/src/notifications/AlertBox.docs.mdx

@@ -34,8 +34,8 @@ You can apply CSS variables to the `.alert-box` selector to customize the appear
 | `--success-invert-background-color` | Color       | Success invert theme background color | `--bloom-color-success`       |
 | `--warn-background-color`           | Color       | Warn theme background color           | `--bloom-color-warn-light`    |
 | `--warn-invert-background-color`    | Color       | Warn invert theme background color    | `--bloom-color-warn`          |
-| `--text-color`                      | Color       | Content text color                    | `--bloom-color-gray-900`      |
-| `--close-icon-color`                | Color       | Close icon color                      | `--bloom-color-gray-900`      |
+| `--text-color`                      | Color       | Content text color                    | `--bloom-color-gray-950`      |
+| `--close-icon-color`                | Color       | Close icon color                      | `--bloom-color-gray-950`      |
 | `--font-weight`                     | Font weight | Content text font weight              | `600`                         |
 | `--max-width`                       | Size        | Max width                             | `--bloom-width-5xl`           |
 | `--line-height`                     | Line height | Content text line height              | `1.375`                       |

package/src/notifications/AlertBox.scss

@@ -10,8 +10,8 @@
   --success-invert-background-color: var(--bloom-color-success);
   --warn-background-color: var(--bloom-color-warn-light);
   --warn-invert-background-color: var(--bloom-color-warn);
-  --text-color: var(--bloom-color-gray-900);
-  --close-icon-color: var(--bloom-color-gray-900);
+  --text-color: var(--bloom-color-gray-950);
+  --close-icon-color: var(--bloom-color-gray-950);
   --font-weight: 500;
   --max-width: var(--bloom-width-5xl);
   --line-height: 1.375;
@@ -91,11 +91,11 @@
 
 .alert-box__body {
   font-weight: var(--font-weight);
-  font-size: var(--bloom-font-size-tiny);
+  font-size: var(--bloom-font-size-sm);
 }
 
 .alert-box__close {
-  font-size: var(--bloom-font-size-3xl);
+  font-size: var(--bloom-font-size-2xl);
   right: var(--horizontal-padding);
   margin-left: var(--bloom-s3);
   padding: 0;

package/src/notifications/AlertNotice.scss

@@ -1,6 +1,6 @@
 // secondary alert messaging
 .alert-notice {
-  @apply text-sm;
+  @apply text-xs;
   @apply py-4;
   @apply px-8;
   @apply bg-gray-200;
@@ -33,12 +33,12 @@
   }
 
   p {
-    @apply text-sm;
+    @apply text-xs;
   }
 }
 
 .alert-notice__title {
-  @apply text-sm;
+  @apply text-xs;
   @apply mb-3;
   @apply font-semibold;
 
@@ -54,5 +54,5 @@
 }
 
 .alert-notice__body {
-  @apply text-sm;
+  @apply text-xs;
 }

package/src/notifications/ApplicationStatus.stories.tsx

@@ -1,37 +1,33 @@
-import * as React from "react";
-import dayjs from "dayjs";
-import advancedFormat from "dayjs/plugin/advancedFormat";
-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);
+import * as React from "react"
+import dayjs from "dayjs"
+import advancedFormat from "dayjs/plugin/advancedFormat"
+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)
 
 export default {
   component: ApplicationStatus,
   title: "Notifications/Application Status",
   decorators: [(storyFn: any) => <div>{storyFn()}</div>, withKnobs],
-};
+}
 
-const listing = Object.assign({}, Archer) as any;
-listing.applicationOpenDate = "";
-let days = 10;
-listing.applicationDueDate = dayjs().add(days, "days").format();
+const listing = Object.assign({}, Archer) as any
+listing.applicationOpenDate = ""
+let days = 10
+listing.applicationDueDate = dayjs().add(days, "days").format()
 
 export const dueSoonAndVivid = () => (
   <ApplicationStatus
-    content={
-      t("listings.applicationDeadline") +
-      ": " +
-      formatDateTime(listing.applicationDueDate)
-    }
+    content={t("listings.applicationDeadline") + ": " + formatDateTime(listing.applicationDueDate)}
     status={ApplicationStatusType.Open}
     vivid
   />
-);
+)
 
 export const withSubContent = () => (
   <ApplicationStatus
@@ -40,115 +36,93 @@ export const withSubContent = () => (
     status={ApplicationStatusType.Open}
     vivid
   />
-);
+)
 
 export const dueSoonWithTime = () => (
   <ApplicationStatus
     content={
-      t("listings.applicationDeadline") +
-      ": " +
-      formatDateTime(listing.applicationDueDate, true)
+      t("listings.applicationDeadline") + ": " + formatDateTime(listing.applicationDueDate, true)
     }
     status={ApplicationStatusType.Open}
   />
-);
+)
 
-const listingPast = Object.assign({}, Archer) as any;
-listingPast.applicationOpenDate = "";
-days = 10;
+const listingPast = Object.assign({}, Archer) as any
+listingPast.applicationOpenDate = ""
+days = 10
 
 export const pastDue = () => (
   <ApplicationStatus
     content={
-      t("listings.applicationsClosed") +
-      ": " +
-      formatDateTime(listingPast.applicationDueDate)
+      t("listings.applicationsClosed") + ": " + formatDateTime(listingPast.applicationDueDate)
     }
     status={ApplicationStatusType.Closed}
   />
-);
+)
 
-listingPast.applicationDueDate = dayjs().subtract(days, "days").format();
+listingPast.applicationDueDate = dayjs().subtract(days, "days").format()
 
 export const pastDueAndVivid = () => (
   <ApplicationStatus
     content={
-      t("listings.applicationsClosed") +
-      ": " +
-      formatDateTime(listingPast.applicationDueDate)
+      t("listings.applicationsClosed") + ": " + formatDateTime(listingPast.applicationDueDate)
     }
     status={ApplicationStatusType.Closed}
     vivid={true}
   />
-);
+)
 
 export const pastDueWithStyles = () => (
   <ApplicationStatus
     className={text("className", "place-content-center")}
     content={
-      t("listings.applicationsClosed") +
-      ": " +
-      formatDateTime(listingPast.applicationDueDate)
+      t("listings.applicationsClosed") + ": " + formatDateTime(listingPast.applicationDueDate)
     }
     status={ApplicationStatusType.Closed}
   />
-);
+)
 
 export const pastDueWithIconColor = () => (
   <ApplicationStatus
     content={
-      t("listings.applicationsClosed") +
-      ": " +
-      formatDateTime(listingPast.applicationDueDate)
+      t("listings.applicationsClosed") + ": " + formatDateTime(listingPast.applicationDueDate)
     }
     iconColor={text("Icon Color", "#ff0000")}
     status={ApplicationStatusType.Closed}
   />
-);
+)
 
-const listing2 = Object.assign({}, Archer) as any;
-days = 10;
-listing2.applicationDueDate = dayjs().add(days, "days").format();
+const listing2 = Object.assign({}, Archer) as any
+days = 10
+listing2.applicationDueDate = dayjs().add(days, "days").format()
 
 export const openSoon = () => (
   <ApplicationStatus
     content={
-      t("listings.applicationOpenPeriod") +
-      ": " +
-      formatDateTime(listing2.applicationDueDate)
+      t("listings.applicationOpenPeriod") + ": " + formatDateTime(listing2.applicationDueDate)
     }
     status={ApplicationStatusType.Open}
   />
-);
+)
 
-const listing3 = Object.assign({}, Archer) as any;
-days = 10;
-listing3.applicationDueDate = dayjs().add(days, "days").format();
+const listing3 = Object.assign({}, Archer) as any
+days = 10
+listing3.applicationDueDate = dayjs().add(days, "days").format()
 
 export const openedAlready = () => (
   <ApplicationStatus
-    content={
-      t("listings.applicationDeadline") +
-      ": " +
-      formatDateTime(listing3.applicationDueDate)
-    }
+    content={t("listings.applicationDeadline") + ": " + formatDateTime(listing3.applicationDueDate)}
     status={ApplicationStatusType.Open}
   />
-);
+)
 
 export const openedWithNoDue = () => (
-  <ApplicationStatus
-    content={t("listings.applicationFCFS")}
-    status={ApplicationStatusType.Open}
-  />
-);
+  <ApplicationStatus content={t("listings.applicationFCFS")} status={ApplicationStatusType.Open} />
+)
 
 export const openedWithFCFS = () => (
-  <ApplicationStatus
-    content={t("listings.applicationFCFS")}
-    status={ApplicationStatusType.Open}
-  />
-);
+  <ApplicationStatus content={t("listings.applicationFCFS")} status={ApplicationStatusType.Open} />
+)
 
 export const openedWithFCFSVivid = () => (
   <ApplicationStatus
@@ -156,7 +130,7 @@ export const openedWithFCFSVivid = () => (
     status={ApplicationStatusType.Open}
     vivid
   />
-);
+)
 
 export const postLottery = () => (
   <ApplicationStatus
@@ -164,7 +138,7 @@ export const postLottery = () => (
     status={ApplicationStatusType.PostLottery}
     withIcon={false}
   />
-);
+)
 
 export const matched = () => (
   <ApplicationStatus
@@ -173,4 +147,4 @@ export const matched = () => (
     withIcon={true}
     iconType={"check"}
   />
-);
+)

package/src/notifications/ApplicationStatus.tsx

@@ -29,7 +29,7 @@ const ApplicationStatus = (props: ApplicationStatusProps) => {
 
   // determine styling
   let textColor = vivid ? "text-white" : "text-gray-800"
-  const textSize = vivid ? "text-xs" : "text-sm"
+  const textSize = vivid ? "text-2xs" : "text-xs"
 
   const icon = withIcon && (
     <Icon
@@ -51,7 +51,7 @@ const ApplicationStatus = (props: ApplicationStatusProps) => {
       textColor = "text-white"
       break
     case ApplicationStatusType.Matched:
-      bgColor = "bg-green-700"
+      bgColor = "bg-green-500"
       textColor = "text-white"
       break
     default:

package/src/notifications/StatusAside.scss

@@ -6,6 +6,6 @@
 
 .status-aside__title {
   @apply font-alt-sans;
-  @apply text-lg;
+  @apply text-xl;
   @apply pt-4;
 }

package/src/notifications/StatusMessage.scss

@@ -2,7 +2,7 @@
   @apply flex;
   @apply flex-col;
   @apply py-4;
-  @apply text-sm;
+  @apply text-xs;
   @apply text-gray-800;
   @apply border-b;
 
@@ -21,5 +21,5 @@
 }
 
 .status-message__note {
-  @apply text-sm;
+  @apply text-xs;
 }

package/src/overlays/Modal.docs.mdx

@@ -23,12 +23,12 @@ You can apply CSS variables to the `.modal` selector to customize the appearance
 
 | Name                        | Type               | Description                     | Default                                                   |
 | --------------------------- | ------------------ | ------------------------------- | --------------------------------------------------------- |
-| `--title-color`             | Color              | Title text color                | <Swatch colorVar="--bloom-color-gray-900" />              |
-| `--title-font-size`         | Size               | Title text size                 | `--bloom-font-size-base-alt`                              |
+| `--title-color`             | Color              | Title text color                | <Swatch colorVar="--bloom-color-gray-950" />              |
+| `--title-font-size`         | Size               | Title text size                 | `--bloom-font-size-lg`                                    |
 | `--title-font-family`       | Font               | Title font family               | `--bloom-font-sans`                                       |
 | `--content-font-color`      | Color              | Title text color                | <Swatch colorVar="--bloom-color-gray-700" />              |
 | `--max-width`               | Size               | Modal max width                 | `--bloom-width-5xl`                                       |
-| `--desktop-min-width`       | Size               | Modal min width on desktop      | `--bloom-width-lg`                                        |
+| `--desktop-min-width`       | Size               | Modal min width on desktop      | `--bloom-width-xl`                                        |
 | `--footer-background-color` | Color              | Footer background color         | <Swatch colorVar="--bloom-color-primary-lighter" />       |
 | `--border-radius`           | Size               | Border radius of modal, content | `--bloom-rounded`                                         |
 | `--background-color`        | Color              | Background color of modal       | <Swatch colorVar="--bloom-color-white" />                 |

package/src/overlays/Modal.scss

@@ -1,12 +1,12 @@
 .modal {
   /* Component Variables */
-  --title-color: var(--bloom-color-gray-900);
-  --title-font-size: var(--bloom-font-size-base-alt);
+  --title-color: var(--bloom-color-gray-950);
+  --title-font-size: var(--bloom-font-size-lg);
   --title-font-family: var(--bloom-font-sans);
   --content-font-color: var(--bloom-color-gray-700);
   --content-padding: var(--bloom-s6);
   --max-width: var(--bloom-width-5xl);
-  --desktop-min-width: var(--bloom-width-lg);
+  --desktop-min-width: var(--bloom-width-xl);
   --footer-background-color: var(--bloom-color-primary-lighter);
   --border-radius: var(--bloom-rounded);
   --mobile-border-radius: 0;

package/src/overlays/Overlay.scss

@@ -1,7 +1,7 @@
 @import "../global/mixins.scss";
 
 .fixed-overlay {
-  --overlay-background-color: var(--bloom-color-gray-900);
+  --overlay-background-color: var(--bloom-color-gray-950);
   --overlay-opacity: 0.5;
 
   position: fixed;

package/src/page_components/ApplicationTimeline.scss

@@ -27,7 +27,7 @@
   }
 
   .progress-nav__dot-item.is-active::before {
-    @apply bg-green-700;
+    @apply bg-green-500;
   }
 
   .progress-nav__dot-item::after {

package/src/page_components/NavigationHeader.tsx

@@ -1,30 +1,30 @@
-import React, { useMemo, useContext } from "react";
-import { PageHeader, TabNav, TabNavItem, AppearanceSizeType } from "../..";
-import { NavigationContext } from "../config/NavigationContext";
-import "./NavigationHeader.scss";
+import React, { useMemo, useContext } from "react"
+import { PageHeader, TabNav, TabNavItem, AppearanceSizeType } from "../.."
+import { NavigationContext } from "../config/NavigationContext"
+import "./NavigationHeader.scss"
 
 type NavigationHeaderProps = {
-  className?: string;
-  title: React.ReactNode;
-  listingId?: string;
-  tabs?: NavigationHeaderTabs;
-  breadcrumbs?: React.ReactNode;
-  children?: React.ReactChild;
-};
+  className?: string
+  title: React.ReactNode
+  listingId?: string
+  tabs?: NavigationHeaderTabs
+  breadcrumbs?: React.ReactNode
+  children?: React.ReactNode
+}
 
 type NavigationHeaderTabs = {
-  show?: boolean;
-  flagsQty?: number;
-  listingLabel: string;
-  applicationsLabel: string;
-};
+  show?: boolean
+  flagsQty?: number
+  listingLabel: string
+  applicationsLabel: string
+}
 
 type NavigationHeaderTabsElement = {
-  label: string;
-  path: string;
-  activePaths: string[];
-  content: React.ReactNode | undefined;
-};
+  label: string
+  path: string
+  activePaths: string[]
+  content: React.ReactNode | undefined
+}
 
 const NavigationHeader = ({
   className,
@@ -34,8 +34,8 @@ const NavigationHeader = ({
   children,
   breadcrumbs,
 }: NavigationHeaderProps) => {
-  const navigation = useContext(NavigationContext);
-  const currentPath = navigation.router.asPath;
+  const navigation = useContext(NavigationContext)
+  const currentPath = navigation.router.asPath
 
   const tabNavElements = useMemo(() => {
     const elements: NavigationHeaderTabsElement[] = [
@@ -57,10 +57,10 @@ const NavigationHeader = ({
         ],
         content: undefined,
       },
-    ];
+    ]
 
-    return elements;
-  }, [tabs, listingId]);
+    return elements
+  }, [tabs, listingId])
 
   const tabNavItems = useMemo(() => {
     return (
@@ -77,8 +77,8 @@ const NavigationHeader = ({
           </TabNavItem>
         ))}
       </TabNav>
-    );
-  }, [currentPath, tabNavElements]);
+    )
+  }, [currentPath, tabNavElements])
 
   return (
     <PageHeader
@@ -89,7 +89,7 @@ const NavigationHeader = ({
     >
       {children}
     </PageHeader>
-  );
-};
+  )
+}
 
-export { NavigationHeader as default, NavigationHeader };
+export { NavigationHeader as default, NavigationHeader }

package/src/page_components/forgot-password/FormForgotPassword.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext } from "react"
 import {
   AppearanceStyleType,
   Button,
@@ -12,31 +12,31 @@ import {
   AlertNotice,
   ErrorMessage,
   emailRegex,
-} from "../../..";
-import { NetworkErrorReset, NetworkStatusContent } from "../sign-in/FormSignIn";
-import { NavigationContext } from "../../config/NavigationContext";
-import type { UseFormMethods } from "react-hook-form";
+} from "../../.."
+import { NetworkErrorReset, NetworkStatusContent } from "../sign-in/FormSignIn"
+import { NavigationContext } from "../../config/NavigationContext"
+import type { UseFormMethods } from "react-hook-form"
 
 export type FormForgotPasswordProps = {
-  control: FormForgotPasswordControl;
-  onSubmit: (data: FormForgotPasswordValues) => void;
-  networkError: FormForgotPasswordNetworkError;
-};
+  control: FormForgotPasswordControl
+  onSubmit: (data: FormForgotPasswordValues) => void
+  networkError: FormForgotPasswordNetworkError
+}
 
 export type FormForgotPasswordNetworkError = {
-  error: NetworkStatusContent;
-  reset: NetworkErrorReset;
-};
+  error: NetworkStatusContent
+  reset: NetworkErrorReset
+}
 
 export type FormForgotPasswordControl = {
-  errors: UseFormMethods["errors"];
-  handleSubmit: UseFormMethods["handleSubmit"];
-  register: UseFormMethods["register"];
-};
+  errors: UseFormMethods["errors"]
+  handleSubmit: UseFormMethods["handleSubmit"]
+  register: UseFormMethods["register"]
+}
 
 export type FormForgotPasswordValues = {
-  email: string;
-};
+  email: string
+}
 
 const FormForgotPassword = ({
   onSubmit,
@@ -44,33 +44,26 @@ const FormForgotPassword = ({
   control: { errors, register, handleSubmit },
 }: FormForgotPasswordProps) => {
   const onError = () => {
-    window.scrollTo(0, 0);
-  };
+    window.scrollTo(0, 0)
+  }
 
-  const { router } = useContext(NavigationContext);
+  const { router } = useContext(NavigationContext)
 
   return (
     <FormCard>
       <div className="form-card__lead text-center border-b mx-0">
         <Icon size="2xl" symbol="profile" />
-        <h1 className="form-card__title">
-          {t("authentication.forgotPassword.sendEmail")}
-        </h1>
+        <h1 className="form-card__title">{t("authentication.forgotPassword.sendEmail")}</h1>
       </div>
 
       {Object.entries(errors).length > 0 && !networkError.error && (
         <AlertBox type="alert" inverted closeable>
-          {errors.authentication
-            ? errors.authentication.message
-            : t("errors.errorsToResolve")}
+          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
         </AlertBox>
       )}
 
       {!!networkError.error?.error && Object.entries(errors).length === 0 && (
-        <ErrorMessage
-          id={"forgotpasswordemail-error"}
-          error={!!networkError.error}
-        >
+        <ErrorMessage id={"forgotpasswordemail-error"} error={!!networkError.error}>
           <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
             {networkError.error.title}
           </AlertBox>
@@ -84,20 +77,14 @@ const FormForgotPassword = ({
       <SiteAlert type="notice" dismissable />
 
       <div className="form-card__group pt-0">
-        <Form
-          id="sign-in"
-          className="mt-10"
-          onSubmit={handleSubmit(onSubmit, onError)}
-        >
+        <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
           <Field
             caps={true}
             name="email"
             label={t("t.email")}
             validation={{ required: true, pattern: emailRegex }}
             error={errors.email}
-            errorMessage={
-              errors.email ? t("authentication.signIn.loginError") : undefined
-            }
+            errorMessage={errors.email ? t("authentication.signIn.loginError") : undefined}
             register={register}
             onChange={() => networkError.reset()}
           />
@@ -116,7 +103,7 @@ const FormForgotPassword = ({
         </Form>
       </div>
     </FormCard>
-  );
-};
+  )
+}
 
-export { FormForgotPassword as default, FormForgotPassword };
+export { FormForgotPassword as default, FormForgotPassword }

package/src/page_components/listing/AdditionalFees.tsx

@@ -49,7 +49,7 @@ const AdditionalFees = ({
         )}
       </GridSection>
       {hasFooter && (
-        <div className="info-card__columns text-sm">
+        <div className="info-card__columns text-xs">
           {footerContent?.map((elem, idx) => (
             <div key={`footer_info_${idx}`} className="info-card__column-2">
               {elem}

package/src/page_components/listing/ContentAccordion.scss

@@ -6,7 +6,7 @@
   @apply flex;
   @apply justify-between;
   @apply font-sans;
-  @apply text-tiny;
+  @apply text-sm;
   @apply text-gray-800;
 }
 
@@ -22,7 +22,7 @@
   @apply justify-between;
   @apply font-sans;
   @apply text-base;
-  @apply text-gray-950;
+  @apply text-gray-900;
 
   svg {
     fill: #1f2937; // gray-800

package/src/page_components/listing/ContentAccordion.stories.tsx

@@ -76,7 +76,7 @@ export const grayThemeFilled = () => {
     return (
       <span className={"flex w-full justify-between items-center"}>
         <span className={"flex items-center"}>
-          <span className={"font-serif text-3xl font-medium leading-4 pr-2"}>1</span> person in
+          <span className={"font-serif text-2xl font-medium leading-4 pr-2"}>1</span> person in
           household
         </span>
         <span className={"flex pr-4 items-center"}>