@bloom-housing/ui-components 4.2.2-alpha.4 → 4.2.2-alpha.7

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.2.2-alpha.7](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.6...@bloom-housing/ui-components@4.2.2-alpha.7) (2022-04-20)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.6](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.5...@bloom-housing/ui-components@4.2.2-alpha.6) (2022-04-20)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [4.2.2-alpha.5](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.4...@bloom-housing/ui-components@4.2.2-alpha.5) (2022-04-19)
+
+
+### Bug Fixes
+
+* footer nav widths ([42aef6f](https://github.com/bloom-housing/bloom/commit/42aef6f74a8a7e27c6bdb870cb6c69c7569f41c0))
+
+
+
+
+
 ## [4.2.2-alpha.4](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.3...@bloom-housing/ui-components@4.2.2-alpha.4) (2022-04-18)
 
 

package/index.ts

@@ -98,6 +98,7 @@ export * from "./src/overlays/Drawer"
 export * from "./src/overlays/LoadingOverlay"
 
 /* Page Components */
+export * from "./src/page_components/ApplicationTimeline"
 export * from "./src/page_components/listing/AdditionalFees"
 export * from "./src/page_components/listing/ContentAccordion"
 export * from "./src/page_components/listing/ListingCard"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.2.2-alpha.4",
+  "version": "4.2.2-alpha.7",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -69,7 +69,7 @@
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^4.2.2-alpha.1",
+    "@bloom-housing/backend-core": "^4.2.2-alpha.2",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "7666295cf235fec42b226acd5c2468309af914b6"
+  "gitHead": "96865ec8d894f783ff7e66bfbf0629573ac05550"
 }

package/src/global/markdown.scss

@@ -30,4 +30,24 @@
     list-style: disc;
     @apply ml-6;
   }
+
+  &.markdown-informational {
+    font-size: 0.9em;
+    @apply text-gray-750;
+
+    h3 {
+      @apply font-sans;
+      @apply font-bold;
+      @apply text-base;
+      @apply text-black;
+    }
+
+    li {
+      @apply mb-4;
+    }
+
+    a {
+      @apply underline;
+    }
+  }
 }

package/src/locales/general.json

@@ -354,22 +354,28 @@
   "application.referralApplication.furtherInformation": "For further information",
   "application.referralApplication.instructions": "The permanent supportive housing units are referred directly through <JURISDICTION> Coordinated Entry System. Households experiencing homelessness can call <PHONE_NUMBER> in order to get connected to an Access Point to learn more about the coordinated entry system and access housing-related resources and information.",
   "application.referralApplication.phoneNumber": "211",
+  "application.review.confirmation.applicationReceived": "Application  \nreceived",
+  "application.review.confirmation.applicationsClosed": "Application  \nclosed",
+  "application.review.confirmation.applicationsRanked": "Application  \nranked",
   "application.review.confirmation.browseMore": "Browse more listings",
   "application.review.confirmation.createAccountParagraph": "Creating an account will save your information for future applications, and you can check the status of this application anytime.",
+  "application.review.confirmation.createAccount": "### Would you like to create an account?\n\nCreating an account will save your information for future applications, and you can check the status of this application anytime.",
   "application.review.confirmation.createAccountTitle": "Would you like to create an account?",
   "application.review.confirmation.doNotSubmitTitle": "Do not submit another application for this listing.",
   "application.review.confirmation.imdone": "No thanks, I'm done.",
-  "application.review.confirmation.lotteryNumber": "Here's your application confirmation number",
+  "application.review.confirmation.lotteryNumber": "Your confirmation number",
   "application.review.confirmation.needToUpdate": "If you need to update information on your application, do not apply again. Contact the agent if you did not receive an email confirmation.",
-  "application.review.confirmation.pleaseWriteNumber": "Please write down your application number and keep it in a safe place. We have also emailed this number to you if you provided an email address.",
+  "application.review.confirmation.pleaseWriteNumber": "Please write down your application number and keep it in a safe place. We have also emailed this number to you if you have provided an email address.",
   "application.review.confirmation.print": "View submitted application and print a copy.",
   "application.review.confirmation.title": "Thanks. We have received your application for ",
+  "application.review.confirmation.needToMakeUpdates": "### Need to make updates?\n\nIf you need to update information on your application, do not apply again. Instead, contact the agent for this listing.\n\n**%{agentName}**  \n%{agentPhone}  \n%{agentEmail}\n\n**Office Hours**  \n%{agentOfficeHours}\n\nContact the agent if you did not receive an email confirmation.",
   "application.review.confirmation.whatExpectFirstParagraph.attend": " You do not need to attend the housing lottery. Results will be posted ",
   "application.review.confirmation.whatExpectFirstParagraph.held": "The lottery will be held on ",
   "application.review.confirmation.whatExpectFirstParagraph.listing": "on the listing. ",
   "application.review.confirmation.whatExpectFirstParagraph.refer": "Please refer to the listing for the lottery results date.",
   "application.review.confirmation.whatExpectSecondparagraph": "Applicants will be contacted in order until vacancies are filled. Should your application be chosen, be prepared to fill out a more detailed application and provide required supporting documents.",
   "application.review.confirmation.whatExpectTitle": "What to expect next",
+  "application.review.confirmation.whatHappensNext": "### What happens next?\n\n* After all applications are submitted, the property manager will begin processing applications.\n\n* Eligibile applicants will be contacted by on a **first come first serve** basis until vacancies are filled\n\n* If you are contacted for an interview, you will need to fill out a more detailed application and provide supporting documents.",
   "application.review.demographics.ethnicityLabel": "Which best describes your ethnicity?",
   "application.review.demographics.ethnicityOptions.hispanicLatino": "Hispanic / Latino",
   "application.review.demographics.ethnicityOptions.notHispanicLatino": "Not Hispanic / Latino",

package/src/navigation/FooterNav.scss

@@ -30,7 +30,8 @@
 
   .footer-copyright {
     @screen lg {
-      @apply w-full;
+      @apply w-6/12;
+      @apply text-left;
     }
   }
 

package/src/page_components/ApplicationTimeline.scss

@@ -0,0 +1,36 @@
+.markdown ul.application-timeline {
+  @apply mb-8;
+  @apply ml-0;
+}
+
+.application-timeline {
+  .progress-nav__item {
+    @apply pt-0;
+
+    text-transform: unset;
+
+    .absolute {
+      margin-top: 0.45rem;
+      z-index: 2;
+      margin-left: -0.4rem;
+    }
+
+    p {
+      padding-top: 3.8em;
+    }
+  }
+
+  .progress-nav__item.is-active::before,
+  .progress-nav__item.is-disabled::before {
+    height: 2rem;
+    width: 2rem;
+  }
+
+  .progress-nav__item.is-active::before {
+    @apply bg-green-700;
+  }
+
+  .progress-nav__item::after {
+    top: 1rem;
+  }
+}

package/src/page_components/ApplicationTimeline.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import Markdown from "markdown-to-jsx"
+import { Icon } from "../icons/Icon"
+import { t } from "../helpers/translator"
+import "./ApplicationTimeline.scss"
+
+const ApplicationTimeline = () => (
+  <ul
+    className="progress-nav application-timeline"
+    aria-label="Steps of processing your application"
+  >
+    <li className="progress-nav__item is-active" aria-current="step">
+      <span className="text-white absolute">
+        <Icon symbol="check" size="base" />
+      </span>
+      <Markdown className="font-bold" options={{ disableParsingRawHTML: true }}>
+        {t("application.review.confirmation.applicationReceived")}
+      </Markdown>
+    </li>
+    <li className="progress-nav__item is-disabled">
+      <Markdown options={{ disableParsingRawHTML: true }}>
+        {t("application.review.confirmation.applicationsClosed")}
+      </Markdown>
+    </li>
+    <li className="progress-nav__item is-disabled">
+      <Markdown options={{ disableParsingRawHTML: true }}>
+        {t("application.review.confirmation.applicationsRanked")}
+      </Markdown>
+    </li>
+  </ul>
+)
+
+export { ApplicationTimeline }