refactor: uptake and merge card (#3922)

shared-helpers/index.ts

@@ -7,6 +7,7 @@ export * from "./src/auth/catchNetworkError"
 export * from "./src/utilities/blankApplication"
 export * from "./src/utilities/events"
 export * from "./src/utilities/formKeys"
+export * from "./src/utilities/getListingRedirectUrl"
 export * from "./src/utilities/gtm"
 export * from "./src/utilities/nextjs"
 export * from "./src/utilities/pdfs"
@@ -18,6 +19,7 @@ export * from "./src/utilities/unitTypes"
 export * from "./src/utilities/DateFormat"
 export * from "./src/utilities/constants"
 export * from "./src/utilities/maskData"
+export * from "./src/views/components/BloomCard"
 export * from "./src/views/multiselectQuestions"
 export * from "./src/views/occupancyFormatting"
 export * from "./src/views/summaryTables"

shared-helpers/src/types/scss.d.ts

@@ -0,0 +1 @@
+declare module "*.scss"

shared-helpers/src/views/components/BloomCard.module.scss

@@ -0,0 +1,30 @@
+.form-card {
+  --card-content-padding-inline: var(--seeds-s12);
+  --card-header-padding-inline: var(--seeds-s12);
+  @media (max-width: theme("screens.sm")) {
+    --card-content-padding-inline: var(--seeds-s4);
+    --card-header-padding-inline: var(--seeds-s4);
+    --card-border-radius: 0;
+    --card-content-padding-block: var(--seeds-s6);
+  }
+  width: 100%;
+}
+
+.block-card {
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  --subheading-color: var(--seeds-text-color-light);
+  --heading-margin: var(--seeds-s3);
+  @media (max-width: theme("screens.sm")) {
+    --card-spacing-lg: var(--seeds-s6);
+  }
+}
+
+.card-icon {
+  margin-bottom: var(--seeds-s3);
+}
+
+.card-heading-group {
+  --subheading-color: var(--seeds-text-color-light);
+}

shared-helpers/src/views/components/BloomCard.tsx

@@ -0,0 +1,68 @@
+import { Heading, HeadingGroup, Icon } from "@bloom-housing/ui-seeds"
+import Card from "@bloom-housing/ui-seeds/src/blocks/Card"
+import React from "react"
+import styles from "./BloomCard.module.scss"
+import { CustomIconMap, CustomIconType } from "../accounts/CustomIconMap"
+
+interface BloomCardProps {
+  iconSymbol?: CustomIconType
+  title?: string
+  subtitle?: string | React.ReactNode
+  children: React.ReactElement
+  id?: string
+  headingPriority?: 1 | 2 | 3 | 4 | 5 | 6
+  className?: string
+  variant?: "form" | "block"
+  headerLink?: React.ReactNode
+}
+
+const BloomCard = (props: BloomCardProps) => {
+  const classNames = [props.variant === "block" ? styles["block-card"] : styles["form-card"]]
+  if (props.className) classNames.push(props.className)
+
+  const customIcon = props.iconSymbol ? CustomIconMap[props.iconSymbol] : undefined
+
+  const getTitle = () => {
+    if (props.title) {
+      if (props.subtitle) {
+        return (
+          <HeadingGroup
+            size="2xl"
+            heading={props.title}
+            subheading={props.subtitle}
+            className={styles["card-heading-group"]}
+            headingPriority={props.headingPriority || 1}
+          />
+        )
+      }
+      return (
+        <Heading size="2xl" priority={props.headingPriority || 1}>
+          {props.title}
+        </Heading>
+      )
+    }
+    return null
+  }
+
+  const title = getTitle()
+
+  return (
+    <Card spacing="lg" className={classNames.join(" ")}>
+      {title && (
+        <Card.Header divider={props.variant === "block" ? undefined : "inset"}>
+          {customIcon && (
+            <Icon size="2xl" className={styles["card-icon"]}>
+              {customIcon}
+            </Icon>
+          )}
+          {props.headerLink && props.headerLink}
+          {title}
+        </Card.Header>
+      )}
+
+      {props.children}
+    </Card>
+  )
+}
+
+export { BloomCard as default, BloomCard }

shared-helpers/src/views/forgot-password/FormForgotPassword.module.scss

@@ -0,0 +1,3 @@
+.forgot-password-submit-button {
+  margin-top: var(--seeds-s1);
+}

shared-helpers/src/views/forgot-password/FormForgotPassword.tsx

@@ -3,8 +3,6 @@ import { Button } from "@bloom-housing/ui-seeds"
 import {
   Field,
   Form,
-  FormCard,
-  Icon,
   t,
   AlertBox,
   SiteAlert,
@@ -13,8 +11,11 @@ import {
   NavigationContext,
   emailRegex,
 } from "@bloom-housing/ui-components"
+import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import { NetworkErrorReset, NetworkStatusContent } from "../../auth/catchNetworkError"
 import type { UseFormMethods } from "react-hook-form"
+import BloomCard from "../components/BloomCard"
+import styles from "./FormForgotPassword.module.scss"
 
 export type FormForgotPasswordProps = {
   control: FormForgotPasswordControl
@@ -49,59 +50,58 @@ const FormForgotPassword = ({
   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>
-      </div>
+    <BloomCard title={t("authentication.forgotPassword.sendEmail")} iconSymbol={"profile"}>
+      <>
+        {Object.entries(errors).length > 0 && !networkError.error && (
+          <AlertBox type="alert" inverted closeable>
+            {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
+          </AlertBox>
+        )}
 
-      {Object.entries(errors).length > 0 && !networkError.error && (
-        <AlertBox type="alert" inverted closeable>
-          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
-        </AlertBox>
-      )}
+        {!!networkError.error?.error && Object.entries(errors).length === 0 && (
+          <ErrorMessage id={"forgotpasswordemail-error"} error={!!networkError.error}>
+            <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
+              {networkError.error.title}
+            </AlertBox>
 
-      {!!networkError.error?.error && Object.entries(errors).length === 0 && (
-        <ErrorMessage id={"forgotpasswordemail-error"} error={!!networkError.error}>
-          <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
-            {networkError.error.title}
-          </AlertBox>
+            <AlertNotice title="" type="alert" inverted>
+              {networkError.error.description}
+            </AlertNotice>
+          </ErrorMessage>
+        )}
 
-          <AlertNotice title="" type="alert" inverted>
-            {networkError.error.description}
-          </AlertNotice>
-        </ErrorMessage>
-      )}
+        <SiteAlert type="notice" dismissable />
 
-      <SiteAlert type="notice" dismissable />
+        <CardSection>
+          <Form id="sign-in" onSubmit={handleSubmit(onSubmit, onError)}>
+            <Field
+              name="email"
+              label={t("t.email")}
+              validation={{ required: true, pattern: emailRegex }}
+              error={errors.email}
+              errorMessage={errors.email ? t("authentication.signIn.loginError") : undefined}
+              register={register}
+              onChange={() => networkError.reset()}
+              labelClassName={"text__caps-spaced"}
+            />
 
-      <div className="form-card__group pt-0">
-        <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}
-            register={register}
-            onChange={() => networkError.reset()}
-          />
-          <section>
-            <div className="text-center mt-6">
-              <Button type="submit" variant="primary">
-                {t("authentication.forgotPassword.sendEmail")}
-              </Button>
-            </div>
-            <div className="text-center mt-6">
+            <Button
+              type="submit"
+              variant="primary"
+              className={styles["forgot-password-submit-button"]}
+            >
+              {t("authentication.forgotPassword.sendEmail")}
+            </Button>
+
+            <div className={"mt-4"}>
               <Button onClick={() => router.back()} variant="text">
                 {t("t.cancel")}
               </Button>
             </div>
-          </section>
-        </Form>
-      </div>
-    </FormCard>
+          </Form>
+        </CardSection>
+      </>
+    </BloomCard>
   )
 }
 

shared-helpers/src/views/sign-in/FormSignIn.module.scss

@@ -0,0 +1,19 @@
+.forgot-password {
+  float: right;
+  font-size: var(--seeds-font-size-sm);
+  text-decoration-line: underline;
+  color: var(--seeds-color-blue-900);
+}
+
+.sign-in-error-container {
+  margin-inline: var(--seeds-s4);
+
+  @media (min-width: theme("screens.sm")) {
+    margin-inline: var(--seeds-s12);
+  }
+}
+
+.sign-in-error {
+  margin-top: var(--seeds-s6);
+  width: 100%;
+}