@bloom-housing/ui-components 7.3.2 → 8.0.0

package/src/page_components/sign-in/FormSignInMFACode.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from "react"
 import {
   AppearanceStyleType,
   Button,
@@ -9,8 +9,8 @@ import {
   t,
   SiteAlert,
   FormSignInErrorBox,
-} from "../../..";
-import { NetworkStatus, FormSignInControl } from "./FormSignIn";
+} from "../../.."
+import { NetworkStatus, FormSignInControl } from "./FormSignIn"
 
 export enum RequestType {
   email = "email",
@@ -18,18 +18,18 @@ export enum RequestType {
 }
 
 export type FormSignInMFACodeProps = {
-  control: FormSignInControl;
-  onSubmit: (data: FormSignInMFACodeValues) => void;
-  networkError: NetworkStatus;
-  mfaType: RequestType;
-  allowPhoneNumberEdit: boolean;
-  phoneNumber: string;
-  goBackToPhone: () => void;
-};
+  control: FormSignInControl
+  onSubmit: (data: FormSignInMFACodeValues) => void
+  networkError: NetworkStatus
+  mfaType: RequestType
+  allowPhoneNumberEdit: boolean
+  phoneNumber: string
+  goBackToPhone: () => void
+}
 
 export type FormSignInMFACodeValues = {
-  mfaCode: string;
-};
+  mfaCode: string
+}
 
 const FormSignInMFACode = ({
   onSubmit,
@@ -41,10 +41,10 @@ const FormSignInMFACode = ({
   goBackToPhone,
 }: FormSignInMFACodeProps) => {
   const onError = () => {
-    window.scrollTo(0, 0);
-  };
+    window.scrollTo(0, 0)
+  }
 
-  let note;
+  let note
   if (allowPhoneNumberEdit) {
     note = (
       <>
@@ -58,16 +58,14 @@ const FormSignInMFACode = ({
           {t("nav.signInMFA.editPhoneNumber")}{" "}
         </Button>
       </>
-    );
+    )
   }
 
   return (
     <FormCard>
       <div className="form-card__lead text-center">
         <Icon size="2xl" symbol="profile" className="form-card__header-icon" />
-        <h2 className="form-card__title is-borderless">
-          {t("nav.signInMFA.verifyTitle")}
-        </h2>
+        <h2 className="form-card__title is-borderless">{t("nav.signInMFA.verifyTitle")}</h2>
         <p className="form-card__sub-title">
           {mfaType === RequestType.sms
             ? t("nav.signInMFA.haveSentCodeToPhone")
@@ -82,11 +80,7 @@ const FormSignInMFACode = ({
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">
-        <Form
-          id="sign-in-mfa"
-          className="mt-10"
-          onSubmit={handleSubmit(onSubmit, onError)}
-        >
+        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
           <Field
             caps={true}
             name="mfaCode"
@@ -99,17 +93,14 @@ const FormSignInMFACode = ({
             note={note}
           />
           <div className="text-center mt-10">
-            <Button
-              styleType={AppearanceStyleType.primary}
-              data-test-id="verify-and-sign-in"
-            >
+            <Button styleType={AppearanceStyleType.primary} data-test-id="verify-and-sign-in">
               {t("nav.signInMFA.signIn")}
             </Button>
           </div>
         </Form>
       </div>
     </FormCard>
-  );
-};
+  )
+}
 
-export { FormSignInMFACode as default, FormSignInMFACode };
+export { FormSignInMFACode as default, FormSignInMFACode }

package/src/page_components/sign-in/FormSignInMFAType.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from "react"
 import {
   AppearanceStyleType,
   Button,
@@ -9,24 +9,24 @@ import {
   t,
   SiteAlert,
   FormSignInErrorBox,
-} from "../../..";
-import type { UseFormMethods } from "react-hook-form";
-import { NetworkStatus } from "./FormSignIn";
+} from "../../.."
+import type { UseFormMethods } from "react-hook-form"
+import { NetworkStatus } from "./FormSignIn"
 
 export type FormSignInMFAProps = {
-  control: FormSignInMFAControl;
-  onSubmit: (data: unknown) => void;
-  networkError: NetworkStatus;
-  emailOnClick: () => void;
-  smsOnClick: () => void;
-};
+  control: FormSignInMFAControl
+  onSubmit: (data: unknown) => void
+  networkError: NetworkStatus
+  emailOnClick: () => void
+  smsOnClick: () => void
+}
 
 export type FormSignInMFAControl = {
-  errors: UseFormMethods["errors"];
-  handleSubmit: UseFormMethods["handleSubmit"];
-  register: UseFormMethods["register"];
-  setValue: UseFormMethods["setValue"];
-};
+  errors: UseFormMethods["errors"]
+  handleSubmit: UseFormMethods["handleSubmit"]
+  register: UseFormMethods["register"]
+  setValue: UseFormMethods["setValue"]
+}
 
 const FormSignInMFAType = ({
   onSubmit,
@@ -36,8 +36,8 @@ const FormSignInMFAType = ({
   smsOnClick,
 }: FormSignInMFAProps) => {
   const onError = () => {
-    window.scrollTo(0, 0);
-  };
+    window.scrollTo(0, 0)
+  }
 
   return (
     <FormCard>
@@ -58,11 +58,7 @@ const FormSignInMFAType = ({
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">
-        <Form
-          id="sign-in-mfa"
-          className="mt-10"
-          onSubmit={handleSubmit(onSubmit, onError)}
-        >
+        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
           <Field
             caps={true}
             name="mfaType"
@@ -96,7 +92,7 @@ const FormSignInMFAType = ({
         </Form>
       </div>
     </FormCard>
-  );
-};
+  )
+}
 
-export { FormSignInMFAType as default, FormSignInMFAType };
+export { FormSignInMFAType as default, FormSignInMFAType }

package/src/page_components/sign-in/FormTerms.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from "react"
 import {
   AppearanceStyleType,
   Button,
@@ -8,31 +8,29 @@ import {
   Icon,
   MarkdownSection,
   t,
-} from "../../..";
-import Markdown from "markdown-to-jsx";
-import { useForm } from "react-hook-form";
+} from "../../.."
+import Markdown from "markdown-to-jsx"
+import { useForm } from "react-hook-form"
 
 type FormTermsInValues = {
-  agree: boolean;
-};
+  agree: boolean
+}
 
 export type FormTermsProps = {
-  onSubmit: () => void;
-  terms?: string;
-};
+  onSubmit: () => void
+  terms?: string
+}
 
 const FormTerms = (props: FormTermsProps) => {
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { handleSubmit, register, errors } = useForm<FormTermsInValues>();
+  const { handleSubmit, register, errors } = useForm<FormTermsInValues>()
 
   return (
     <Form id="terms" className="mt-10" onSubmit={handleSubmit(props.onSubmit)}>
       <FormCard>
         <div className="form-card__lead text-center">
           <Icon size="2xl" symbol="settings" />
-          <h2 className="form-card__title">
-            {t(`authentication.terms.reviewToc`)}
-          </h2>
+          <h2 className="form-card__title">{t(`authentication.terms.reviewToc`)}</h2>
           <p className="field-note mt-4 text-center">
             {t(`authentication.terms.youMustAcceptToc`)}
           </p>
@@ -40,9 +38,7 @@ const FormTerms = (props: FormTermsProps) => {
           <div className="overflow-y-auto max-h-96 mt-5 pr-4 text-left">
             {props.terms && (
               <MarkdownSection padding={false} fullwidth={true}>
-                <Markdown options={{ disableParsingRawHTML: false }}>
-                  {props.terms}
-                </Markdown>
+                <Markdown options={{ disableParsingRawHTML: false }}>{props.terms}</Markdown>
               </MarkdownSection>
             )}
           </div>
@@ -67,17 +63,14 @@ const FormTerms = (props: FormTermsProps) => {
 
         <div className="form-card__pager">
           <div className="form-card__pager-row primary">
-            <Button
-              styleType={AppearanceStyleType.primary}
-              data-test-id="form-submit"
-            >
+            <Button styleType={AppearanceStyleType.primary} data-test-id="form-submit">
               {t("t.submit")}
             </Button>
           </div>
         </div>
       </FormCard>
     </Form>
-  );
-};
+  )
+}
 
-export { FormTerms as default, FormTerms };
+export { FormTerms as default, FormTerms }

package/src/page_components/sign-in/ResendConfirmationModal.tsx

@@ -7,21 +7,21 @@ import {
   Field,
   emailRegex,
   AppearanceSizeType,
-} from "../../..";
-import React, { useEffect, useMemo } from "react";
-import { useForm } from "react-hook-form";
+} from "../../.."
+import React, { useEffect, useMemo } from "react"
+import { useForm } from "react-hook-form"
 
 export type ResendConfirmationModalProps = {
-  isOpen: boolean;
-  initialEmailValue: string;
-  onClose: () => void;
-  onSubmit: (email: string) => void;
-  loading: boolean;
-};
+  isOpen: boolean
+  initialEmailValue: string
+  onClose: () => void
+  onSubmit: (email: string) => void
+  loading: boolean
+}
 
 export type ResendConfirmationModalForm = {
-  onSubmit: (email: string) => void;
-};
+  onSubmit: (email: string) => void
+}
 
 const ResendConfirmationModal = ({
   isOpen,
@@ -35,23 +35,23 @@ const ResendConfirmationModal = ({
     defaultValues: useMemo(() => {
       return {
         emailResend: initialEmailValue,
-      };
+      }
     }, [initialEmailValue]),
-  });
+  })
 
   useEffect(() => {
     reset({
       emailResend: initialEmailValue,
-    });
-  }, [initialEmailValue, reset]);
+    })
+  }, [initialEmailValue, reset])
 
   const onFormSubmit = async () => {
-    const isValid = await trigger();
-    if (!isValid) return;
+    const isValid = await trigger()
+    if (!isValid) return
 
-    const { emailResend } = getValues();
-    onSubmit(emailResend);
-  };
+    const { emailResend } = getValues()
+    onSubmit(emailResend)
+  }
 
   return (
     <Modal
@@ -59,8 +59,8 @@ const ResendConfirmationModal = ({
       title={t("authentication.signIn.yourAccountIsNotConfirmed")}
       ariaDescription={t("authentication.createAccount.linkExpired")}
       onClose={() => {
-        onClose();
-        window.scrollTo(0, 0);
+        onClose()
+        window.scrollTo(0, 0)
       }}
       actions={[
         <Button
@@ -76,8 +76,8 @@ const ResendConfirmationModal = ({
           type="button"
           styleType={AppearanceStyleType.alert}
           onClick={() => {
-            onClose();
-            window.scrollTo(0, 0);
+            onClose()
+            window.scrollTo(0, 0)
           }}
           size={AppearanceSizeType.small}
         >
@@ -100,12 +100,10 @@ const ResendConfirmationModal = ({
           />
         </Form>
 
-        <p className="pt-4">
-          {t("authentication.createAccount.resendEmailInfo")}
-        </p>
+        <p className="pt-4">{t("authentication.createAccount.resendEmailInfo")}</p>
       </>
     </Modal>
-  );
-};
+  )
+}
 
-export { ResendConfirmationModal as default, ResendConfirmationModal };
+export { ResendConfirmationModal as default, ResendConfirmationModal }

package/src/prototypes/AppCard.scss

@@ -30,7 +30,7 @@
 
 .app-card__back {
   @apply font-semibold;
-  @apply text-tiny;
+  @apply text-sm;
   @apply mb-4;
 }
 
@@ -42,7 +42,7 @@
 
 .app-card__note {
   @apply font-semibold;
-  @apply text-tiny;
+  @apply text-sm;
   @apply text-gray-700;
   @apply pb-4;
 }

package/src/prototypes/FieldSection.scss

@@ -18,7 +18,7 @@
 
 .field-group__title {
   @apply font-alt-sans;
-  @apply text-lg;
+  @apply text-xl;
   @apply mb-6;
 }
 

package/src/prototypes/SummaryCard.scss

@@ -18,7 +18,7 @@
 }
 
 .summary-card__title {
-  @apply text-lg;
+  @apply text-xl;
   @apply font-alt-sans;
 
   a {

package/src/prototypes/SummaryCard.stories.tsx

@@ -26,7 +26,7 @@ export const SummaryCardHeading = () => (
       <h2 className="summary-card__title">
         <a href="#">My Property</a>
       </h2>
-      <p className="text-sm mt-3">
+      <p className="text-xs mt-3">
         <span>1 Polk St, San Francisco, CA 94102</span>
         <span className="ml-4 pl-4 border-l border-gray-600">Waitlist: 353</span>
       </p>

package/src/sections/GridSection.scss

@@ -43,7 +43,7 @@
   @apply uppercase;
   @apply font-alt-sans;
   @apply font-bold;
-  @apply text-sm;
+  @apply text-xs;
   @apply tracking-widest;
   @apply w-full;
   @apply mt-4;

package/src/sections/InfoCardGrid.scss

@@ -9,7 +9,7 @@
 .info-cards__title {
   @apply font-alt-sans;
   @apply uppercase;
-  @apply text-tiny;
+  @apply text-sm;
   @apply mb-5;
   @apply pb-2;
   @apply border-0;
@@ -34,7 +34,7 @@
 
   .info-card {
     & > :not(.info-card__title) {
-      @apply text-tiny;
+      @apply text-sm;
     }
 
     @screen md {

package/src/sections/InfoCardGrid.tsx

@@ -11,7 +11,7 @@ export interface InfoCardGridProps {
 const InfoCardGrid = (props: InfoCardGridProps) => (
   <section className="info-cards">
     <header className="info-cards__header">
-      <Heading styleType={"underlineWeighted"} priority={2} className={"text-tiny"}>
+      <Heading styleType={"underlineWeighted"} priority={2} className={"text-sm"}>
         {props.title}
       </Heading>
       {props.subtitle && <p className="info-cards__subtitle">{props.subtitle}</p>}

package/src/tables/AgPagination.tsx

@@ -1,19 +1,19 @@
-import React from "react";
-import { Button, t } from "../..";
+import React from "react"
+import { Button, t } from "../.."
 
 type AgPaginationProps = {
-  totalItems: number;
-  totalPages: number;
-  currentPage: number;
-  itemsPerPage: number;
-  quantityLabel?: string;
-  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
-  setItemsPerPage: React.Dispatch<React.SetStateAction<number>>;
-  onPageChange?: (page: number) => void;
-  onPerPageChange?: (size: number) => void;
-};
+  totalItems: number
+  totalPages: number
+  currentPage: number
+  itemsPerPage: number
+  quantityLabel?: string
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>
+  setItemsPerPage: React.Dispatch<React.SetStateAction<number>>
+  onPageChange?: (page: number) => void
+  onPerPageChange?: (size: number) => void
+}
 
-const AG_PER_PAGE_OPTIONS = [8, 25, 50, 100];
+const AG_PER_PAGE_OPTIONS = [8, 25, 50, 100]
 
 const AgPagination = ({
   totalItems,
@@ -27,19 +27,19 @@ const AgPagination = ({
   onPerPageChange,
 }: AgPaginationProps) => {
   const onNextClick = () => {
-    setCurrentPage(currentPage + 1);
-    onPageChange && onPageChange(currentPage);
-  };
+    setCurrentPage(currentPage + 1)
+    onPageChange && onPageChange(currentPage)
+  }
 
   const onPrevClick = () => {
-    setCurrentPage(currentPage - 1);
-    onPageChange && onPageChange(currentPage);
-  };
+    setCurrentPage(currentPage - 1)
+    onPageChange && onPageChange(currentPage)
+  }
 
   const onRowLimitChange = (size: string) => {
-    setItemsPerPage(parseInt(size));
-    onPerPageChange && onPerPageChange(itemsPerPage);
-  };
+    setItemsPerPage(parseInt(size))
+    onPerPageChange && onPerPageChange(itemsPerPage)
+  }
 
   return (
     <div className="data-pager flex flex-col md:flex-row">
@@ -58,9 +58,7 @@ const AgPagination = ({
           <span className="field-label" id="lbTotalPages">
             {totalItems}
           </span>
-          {quantityLabel && (
-            <span className="field-label">{quantityLabel}</span>
-          )}
+          {quantityLabel && <span className="field-label">{quantityLabel}</span>}
         </div>
 
         <div className="flex mt-5 md:mt-0 md:items-center">
@@ -99,12 +97,12 @@ const AgPagination = ({
               {Array(totalPages)
                 .fill(totalPages)
                 .map((_, i) => {
-                  const value = i + 1;
+                  const value = i + 1
                   return (
                     <option key={value} value={value}>
                       {value}
                     </option>
-                  );
+                  )
                 })}
             </select>
           </div>
@@ -133,7 +131,7 @@ const AgPagination = ({
         </Button>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export { AgPagination as default, AgPagination, AG_PER_PAGE_OPTIONS };
+export { AgPagination as default, AgPagination, AG_PER_PAGE_OPTIONS }

package/src/tables/GroupedTable.tsx

@@ -68,7 +68,7 @@ export const GroupedTable = (props: GroupedTableProps) => {
     })
   })
 
-  const tableClasses = ["w-full", "text-sm"]
+  const tableClasses = ["w-full", "text-xs"]
   if (props.responsiveCollapse) {
     tableClasses.push("responsive-collapse")
   }

package/src/tables/StandardTable.tsx

@@ -222,7 +222,7 @@ export const StandardTable = (props: StandardTableProps) => {
     )
   })
 
-  const tableClasses = ["w-full", "text-sm"]
+  const tableClasses = ["w-full", "text-xs"]
   if (props.responsiveCollapse) {
     tableClasses.push("responsive-collapse")
   }

package/src/text/Description.scss

@@ -19,7 +19,7 @@
   @include clearfix;
 
   .description__title {
-    @apply text-lg;
+    @apply text-xl;
     @apply text-gray-800;
     @apply mb-3;
     clear: left;
@@ -36,7 +36,7 @@
   }
 
   .description__body {
-    @apply text-tiny;
+    @apply text-sm;
     @apply mb-5;
 
     @screen md {

package/src/text/Message.scss

@@ -5,7 +5,7 @@
   @apply font-semibold;
   @apply uppercase;
   @apply tracking-wider;
-  @apply text-sm;
+  @apply text-xs;
   @apply border-l-2;
   @apply border-primary;
 

package/src/text/Tag.docs.mdx

@@ -52,13 +52,13 @@ You can apply CSS variables to the `.tag` selector to customize the appearance o
 | ------------------------ | ----------- | ----------------------------------------------- | --------------------------------------------------- |
 | `--normal-padding`       | Size        | Padding of the normal (no variant) tag          | `--bloom-s3` (top/bottom) `--bloom-s5` (left/right) |
 | `--normal-rounded`       | Size        | The border radius of the normal tag             | `--bloom-rounded-md`                                |
-| `--normal-font-size`     | Size        | The font size of the normal tag                 | `--bloom-font-size-tiny`                            |
+| `--normal-font-size`     | Size        | The font size of the normal tag                 | `--bloom-font-size-sm`                              |
 | `--normal-font-weight`   | Font Weight | The font weight of the normal tag               | `normal`                                            |
 | `--pill-padding`         | Size        | Padding of the pill variant tag                 | `--bloom-s2` (top/bottom) `--bloom-s4` (left/right) |
 | `--pill-rounded`         | Size        | The border radius of the pill tag               | `--bloom-rounded-full`                              |
-| `--pill-font-size`       | Size        | The font size of the pill tag                   | `--bloom-font-size-tiny`                            |
+| `--pill-font-size`       | Size        | The font size of the pill tag                   | `--bloom-font-size-sm`                              |
 | `--pill-font-weight`     | Font Weight | The font weight of the pill tag                 | `600`                                               |
 | `--pill-text-transform`  | Case        | Text case of of the pill tag                    | `uppercase`                                         |
 | `--pill-letter-spacing`  | Size        | The average gap between letters of the pill tag | `--bloom-letter-spacing-ultrawide`                  |
 | `--small-pill-padding`   | Size        | Padding of the small-size pill tag              | `--bloom-s1` (top/bottom) `--bloom-s3` (left/right) |  |
-| `--small-pill-font-size` | Size        | The font size of the small-size pill tag        | `--bloom-font-size-2xs`                             |
+| `--small-pill-font-size` | Size        | The font size of the small-size pill tag        | `--bloom-font-size-3xs`                             |