@bloom-housing/ui-components 6.0.0 → 6.0.1-alpha.0

package/CHANGELOG.md

@@ -3,22 +3,227 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [6.0.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.0...@bloom-housing/ui-components@6.0.0) (2022-08-25)
+## [6.0.1-alpha.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.35...@bloom-housing/ui-components@6.0.1-alpha.0) (2022-09-28)
 
+**Note:** Version bump only for package @bloom-housing/ui-components
 
-* 2022-08-24 release (#2993) ([6f1deac](https://github.com/bloom-housing/bloom/commit/6f1deac5370fa8286b051b09431d153d22901b3a)), closes [#2993](https://github.com/bloom-housing/bloom/issues/2993) [#2821](https://github.com/bloom-housing/bloom/issues/2821) [#2764](https://github.com/bloom-housing/bloom/issues/2764) [#2767](https://github.com/bloom-housing/bloom/issues/2767) [#2787](https://github.com/bloom-housing/bloom/issues/2787) [#2769](https://github.com/bloom-housing/bloom/issues/2769) [#2781](https://github.com/bloom-housing/bloom/issues/2781) [#2827](https://github.com/bloom-housing/bloom/issues/2827) [Issue#2827](https://github.com/Issue/issues/2827) [#2788](https://github.com/bloom-housing/bloom/issues/2788) [#2842](https://github.com/bloom-housing/bloom/issues/2842) [#2822](https://github.com/bloom-housing/bloom/issues/2822) [#2847](https://github.com/bloom-housing/bloom/issues/2847) [#2830](https://github.com/bloom-housing/bloom/issues/2830) [#2788](https://github.com/bloom-housing/bloom/issues/2788) [#2842](https://github.com/bloom-housing/bloom/issues/2842) [#2827](https://github.com/bloom-housing/bloom/issues/2827) [Issue#2827](https://github.com/Issue/issues/2827) [#2822](https://github.com/bloom-housing/bloom/issues/2822) [#2846](https://github.com/bloom-housing/bloom/issues/2846) [#2851](https://github.com/bloom-housing/bloom/issues/2851) [#2594](https://github.com/bloom-housing/bloom/issues/2594) [#2812](https://github.com/bloom-housing/bloom/issues/2812) [#2799](https://github.com/bloom-housing/bloom/issues/2799) [#2828](https://github.com/bloom-housing/bloom/issues/2828) [#2843](https://github.com/bloom-housing/bloom/issues/2843) [#2827](https://github.com/bloom-housing/bloom/issues/2827) [#2875](https://github.com/bloom-housing/bloom/issues/2875) [#2859](https://github.com/bloom-housing/bloom/issues/2859) [#2848](https://github.com/bloom-housing/bloom/issues/2848) [#2785](https://github.com/bloom-housing/bloom/issues/2785)
 
 
-### BREAKING CHANGES
 
-* prop name change for header from "text" to "content"
 
-* chore(release): version
+## [5.1.1-alpha.35](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.34...@bloom-housing/ui-components@5.1.1-alpha.35) (2022-09-28)
 
- - @bloom-housing/shared-helpers@5.0.1-alpha.2
- - @bloom-housing/partners@5.0.1-alpha.2
- - @bloom-housing/public@5.0.1-alpha.2
- - @bloom-housing/ui-components@5.0.1-alpha.1
+
+### Bug Fixes
+
+* email tests ([#3095](https://github.com/bloom-housing/bloom/issues/3095)) ([a663dfd](https://github.com/bloom-housing/bloom/commit/a663dfd3df457f88130e59c37ea30d70ae2b6d0b))
+* heading size issues on resources page ([#3090](https://github.com/bloom-housing/bloom/issues/3090)) ([d7492a2](https://github.com/bloom-housing/bloom/commit/d7492a2b0fc6ec877fa99d7234a373cca7fd86ac))
+
+
+
+
+
+## [5.1.1-alpha.34](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.33...@bloom-housing/ui-components@5.1.1-alpha.34) (2022-09-28)
+
+
+### Features
+
+* **preferences:** add delete preference button ([#3075](https://github.com/bloom-housing/bloom/issues/3075)) ([29a079e](https://github.com/bloom-housing/bloom/commit/29a079e23ecc5cd31589993fef0c9de661c6e8c8))
+
+
+
+
+
+## [5.1.1-alpha.33](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.32...@bloom-housing/ui-components@5.1.1-alpha.33) (2022-09-26)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.32](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.31...@bloom-housing/ui-components@5.1.1-alpha.32) (2022-09-26)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.31](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.30...@bloom-housing/ui-components@5.1.1-alpha.31) (2022-09-26)
+
+
+### Bug Fixes
+
+* make pill style on listing card optional ([#3088](https://github.com/bloom-housing/bloom/issues/3088)) ([e574010](https://github.com/bloom-housing/bloom/commit/e57401067639e3e05a426f61dd0c3dc18dcda35d))
+
+
+
+
+
+## [5.1.1-alpha.30](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.29...@bloom-housing/ui-components@5.1.1-alpha.30) (2022-09-26)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.29](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.28...@bloom-housing/ui-components@5.1.1-alpha.29) (2022-09-23)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.28](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.27...@bloom-housing/ui-components@5.1.1-alpha.28) (2022-09-19)
+
+
+### Features
+
+* add confirm modal when copying a preference ([#3041](https://github.com/bloom-housing/bloom/issues/3041)) ([b3d69e9](https://github.com/bloom-housing/bloom/commit/b3d69e9b557998489c828c86ff742c91feca799f))
+
+
+
+
+
+## [5.1.1-alpha.27](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.26...@bloom-housing/ui-components@5.1.1-alpha.27) (2022-09-16)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.26](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.25...@bloom-housing/ui-components@5.1.1-alpha.26) (2022-09-16)
+
+
+### Bug Fixes
+
+* updated css class naming ([#483](https://github.com/bloom-housing/bloom/issues/483)) ([#3073](https://github.com/bloom-housing/bloom/issues/3073)) ([bfd68de](https://github.com/bloom-housing/bloom/commit/bfd68de406b1785676e6453afd1536159096d080))
+
+
+
+
+
+## [5.1.1-alpha.25](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.24...@bloom-housing/ui-components@5.1.1-alpha.25) (2022-09-14)
+
+
+### Features
+
+* allow alerts to be sticky under page header ([#3050](https://github.com/bloom-housing/bloom/issues/3050)) ([d776e84](https://github.com/bloom-housing/bloom/commit/d776e84f76a8bde3f24d1c6706ed35dd777dc66b))
+
+
+
+
+
+## [5.1.1-alpha.24](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.23...@bloom-housing/ui-components@5.1.1-alpha.24) (2022-09-13)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.23](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.22...@bloom-housing/ui-components@5.1.1-alpha.23) (2022-09-12)
+
+
+### Bug Fixes
+
+* add unit tests to partners ([#3023](https://github.com/bloom-housing/bloom/issues/3023)) ([92889f5](https://github.com/bloom-housing/bloom/commit/92889f56f1fc6dc54be207ca0cf3dd9ce58176d1))
+
+
+
+
+
+## [5.1.1-alpha.22](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.21...@bloom-housing/ui-components@5.1.1-alpha.22) (2022-08-31)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.21](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.20...@bloom-housing/ui-components@5.1.1-alpha.21) (2022-08-31)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.20](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.19...@bloom-housing/ui-components@5.1.1-alpha.20) (2022-08-31)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.19](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.18...@bloom-housing/ui-components@5.1.1-alpha.19) (2022-08-31)
+
+
+### Bug Fixes
+
+* table columns should take up full width ([#3005](https://github.com/bloom-housing/bloom/issues/3005)) ([5524049](https://github.com/bloom-housing/bloom/commit/5524049f248151b1d3510feb1ea73a7775f7f4d5))
+
+
+
+
+
+## [5.1.1-alpha.18](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.17...@bloom-housing/ui-components@5.1.1-alpha.18) (2022-08-31)
+
+
+### Bug Fixes
+
+* null app fee showing null string ([#3016](https://github.com/bloom-housing/bloom/issues/3016)) ([05e28ad](https://github.com/bloom-housing/bloom/commit/05e28ad9f887dcfff5567af96e97be50c86b2109))
+
+
+
+
+
+## [5.1.1-alpha.17](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.16...@bloom-housing/ui-components@5.1.1-alpha.17) (2022-08-30)
+
+
+### Bug Fixes
+
+* **login:** too many login attempts fix ([#2988](https://github.com/bloom-housing/bloom/issues/2988)) ([4323e1c](https://github.com/bloom-housing/bloom/commit/4323e1c4cee18d8ee805378b32ae35826013d5c4))
+
+
+
+
+
+## [5.1.1-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.15...@bloom-housing/ui-components@5.1.1-alpha.16) (2022-08-30)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.15](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.14...@bloom-housing/ui-components@5.1.1-alpha.15) (2022-08-29)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.14](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.13...@bloom-housing/ui-components@5.1.1-alpha.14) (2022-08-29)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.1.1-alpha.13](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.12...@bloom-housing/ui-components@5.1.1-alpha.13) (2022-08-26)
+
+
+### Bug Fixes
+
+* add margin in contact section ([#2999](https://github.com/bloom-housing/bloom/issues/2999)) ([4acb49a](https://github.com/bloom-housing/bloom/commit/4acb49acf17ebabb7a0a34160d992cb5f63eeb02))
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "6.0.0",
+  "version": "6.0.1-alpha.0",
   "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",
@@ -66,7 +66,7 @@
     "style-loader": "^1.1.3",
     "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.4",
-    "typescript": "^4.5.5",
+    "typescript": "4.6.4",
     "webpack": "^4.44.2"
   },
   "dependencies": {
@@ -85,7 +85,6 @@
     "@types/react-dom": "^16.9.5",
     "@types/react-text-mask": "^5.4.6",
     "@types/react-transition-group": "^4.4.0",
-    "@types/sanitize-html": "^2.6.2",
     "ag-grid-community": "^26.0.0",
     "ag-grid-react": "^26.0.0",
     "aria-autocomplete": "^1.4.0",
@@ -107,10 +106,9 @@
     "react-tabs": "^3.2.2",
     "react-text-mask": "^5.4.3",
     "react-transition-group": "^4.4.1",
-    "sanitize-html": "^2.7.1",
     "tailwindcss": "2.2.10",
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "4144d01ef184f31f6fd2c943ee2487025170126c"
+  "gitHead": "2cfc84763d17fad62ed2675f85a046e05bdf91e2"
 }

package/src/actions/Button.tsx

@@ -79,6 +79,7 @@ const Button = (props: ButtonProps) => {
       onClick={props.onClick}
       disabled={props.disabled || props.loading}
       aria-hidden={props.ariaHidden}
+      tabIndex={props.ariaHidden ? -1 : 0}
       aria-label={props.ariaLabel}
       data-test-id={props.dataTestId || props["data-test-id"]}
     >

package/src/actions/LinkButton.tsx

@@ -39,6 +39,7 @@ const LinkButton = (props: LinkButtonProps) => {
       <LinkComponent
         href={props.href}
         aria-hidden={props.ariaHidden}
+        tabIndex={props.ariaHidden ? -1 : 0}
         className={buttonClasses.join(" ")}
         data-test-id={props.dataTestId}
       >

package/src/blocks/FormCard.scss

@@ -32,6 +32,7 @@
   @apply border-t-4;
   @apply border-primary;
   @apply leading-tight;
+  @apply text-3xl;
 
   @screen md {
     @apply mx-auto;

package/src/blocks/HousingCounselor.tsx

@@ -9,6 +9,11 @@ export interface HousingCounselorProps {
   name: string
   phone?: string
   website?: string
+  strings?: {
+    callNumber?: string
+    languageServices?: string
+    website?: string
+  }
 }
 
 const LanguageLabel = (language: string) => {
@@ -24,7 +29,7 @@ const HousingCounselor = (props: HousingCounselorProps) => {
     <div className="resource-item text-base">
       <h3 className="font-sans text-lg">{props.name}</h3>
       <p className="text-sm text-gray-800 pb-2">
-        {t("housingCounselors.languageServices")}
+        {props.strings?.languageServices ?? t("housingCounselors.languageServices")}
         {props.languages.map((language) => LanguageLabel(language))}
       </p>
       {props.addressStreet && (
@@ -35,13 +40,13 @@ const HousingCounselor = (props: HousingCounselorProps) => {
       {props.phone && (
         <a className="icon-item pb-1" href={`tel:+1${props.phone}`}>
           <Icon symbol="phone" size="medium" fill={IconFillColors.primary} />
-          {` ${t("housingCounselors.call", { number: props.phone })}`}
+          {` ${props.strings?.callNumber ?? t("housingCounselors.call", { number: props.phone })}`}
         </a>
       )}
       {props.website && (
         <a className="icon-item" href={props.website}>
           <Icon symbol="globe" size="medium" fill={IconFillColors.primary} />
-          {` ${t("t.website")}`}
+          {` ${props.strings?.website ?? t("t.website")}`}
         </a>
       )}
     </div>

package/src/blocks/ImageCard.tsx

@@ -5,10 +5,10 @@ import "./ImageCard.scss"
 import { Tag } from "../text/Tag"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
 import { AppearanceStyleType } from "../global/AppearanceTypes"
-import { t } from "../helpers/translator"
 import { Icon, IconFillColors, UniversalIconType } from "../icons/Icon"
 import { Modal } from "../overlays/Modal"
 import { Button } from "../actions/Button"
+import { t } from "../helpers/translator"
 
 export interface StatusBarType {
   status?: ApplicationStatusType
@@ -53,6 +53,9 @@ export interface ImageCardProps {
   moreImagesLabel?: string
   /** The aria label of the clickable region of the images grid */
   moreImagesDescription?: string
+  strings?: {
+    defaultImageAltText?: string
+  }
 }
 
 /**
@@ -64,20 +67,24 @@ const ImageCard = (props: ImageCardProps) => {
   const [showModal, setShowModal] = useState(false)
 
   const getStatuses = () => {
-    return props.statuses?.map((status, index) => {
+    const statuses = props.statuses?.map((status, index) => {
       return (
-        <aside className="image-card__status" aria-label={status.content} key={index}>
-          <ApplicationStatus
-            status={status.status}
-            content={status.content}
-            subContent={status.subContent}
-            withIcon={!status.hideIcon}
-            iconType={status.iconType}
-            vivid
-          />
-        </aside>
+        <ApplicationStatus
+          status={status.status}
+          content={status.content}
+          subContent={status.subContent}
+          withIcon={!status.hideIcon}
+          iconType={status.iconType}
+          vivid
+          key={index}
+        />
       )
     })
+    return (
+      <aside className="image-card__status" aria-label={`${props.description} Statuses`}>
+        {statuses}
+      </aside>
+    )
   }
 
   const innerClasses = ["image-card__inner"]
@@ -119,7 +126,11 @@ const ImageCard = (props: ImageCardProps) => {
           {props.imageUrl ? (
             <img
               src={props.imageUrl}
-              alt={props.description || t("listings.buildingImageAltText")}
+              alt={
+                props.description ??
+                props.strings?.defaultImageAltText ??
+                t("listings.buildingImageAltText")
+              }
             />
           ) : props.images && displayedImages ? (
             displayedImages.map((image, index) => (

package/src/blocks/MediaCard.docs.mdx

@@ -0,0 +1,37 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { MediaCard } from "./MediaCard"
+
+# Media Card
+
+The media card component is used to describe the title and, optionally, subtitle of a corresponding piece of media. The header section and title of the media card is clickable and displays the media via the required handleClick prop.
+
+<Canvas>
+  <Story id="blocks-media-card--with-title-and-subtitle" />
+</Canvas>
+<Canvas>
+  <Story id="blocks-media-card--with-just-title" />
+</Canvas>
+<Canvas>
+  <Story id="blocks-media-card--with-custom-icon" />
+</Canvas>
+
+## Component Properties
+
+<ArgsTable of={MediaCard} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.media-card` selector to customize the appearance of the component.
+
+| Name                    | Type  | Description                                              | Default                                         |
+| ----------------------- | ----- | -------------------------------------------------------- | ----------------------------------------------- |
+| `--header-height`       | Size  | The height of the header section                         | `--bloom-s24`                                   |
+| `--title-color`         | Color | The color of media title and header section              | `--bloom-color-primary-dark`                    |
+| `--title-font-size`     | Size  | The font size of media title                             | `--bloom-font-size-base`                        |
+| `--title-font-family`   | Size  | The font family of the media title                       | `--bloom-font-sans`                             |
+| `--title-font-spacing`  | Size  | The letter spacing of media title                        | `--bloom-letter-spacing-wide`                   |
+| `--subtitle-font-size`  | Size  | The font size of the media subtitle                      | `--bloom-font-size-tiny`                        |
+| `--content-bg-color`    | Color | The background color of card body                        | `--bloom-color-gray-200`                        |
+| `--card-border`         | Size  | The card border settings (thickness, border type, color) | `--bloom-border-1 solid --bloom-color-gray-450` |
+| `--card-border-rounded` | Size  | The card corner radius                                   | `--bloom-rounded`                               |
+| `--card-padding`        | Size  | The padding of the card body                             | `--bloom-s6`                                    |

package/src/blocks/MediaCard.scss

@@ -1,4 +1,5 @@
 .media-card {
+  --header-height: var(--bloom-s24);
   --title-color: var(--bloom-color-primary-dark);
   --title-font-size: var(--bloom-font-size-base);
   --title-font-family: var(--bloom-font-sans);
@@ -8,33 +9,30 @@
   --card-border: var(--bloom-border-1) solid var(--bloom-color-gray-450);
   --card-border-rounded: var(--bloom-rounded);
   --card-padding: var(--bloom-s6);
-  --max-width: var(--bloom-width-lg);
-  --background-color: var(--bloom-color-white);
-  max-width: var(--max-width);
   border: var(--card-border);
   border-radius: var(--card-border-rounded);
   background-color: var(--content-bg-color);
-  max-width: var(--max-width);
 }
 
 .media-card__header {
-  padding-top: var(--card-padding);
-  padding-bottom: var(--card-padding);
+  height: var(--header-height);
   border-top-right-radius: calc(var(--card-border-rounded) - var(--bloom-border-1));
   border-top-left-radius: calc(var(--card-border-rounded) - var(--bloom-border-1));
   background-color: var(--title-color);
   cursor: pointer;
+  position: relative;
+  svg {
+    position: absolute;
+    // Explicit values since reflective of icon size
+    top: calc(50% - 1.5rem);
+    left: calc(50% - 1.5rem);
+  }
 }
 
 .media-card__header-container {
   width: 100%;
 }
 
-.media-card__icon-container {
-  display: flex;
-  justify-content: center;
-}
-
 .media-card__body {
   padding: var(--card-padding);
 }
@@ -44,6 +42,7 @@
   font-size: var(--title-font-size);
   font-family: var(--title-font-family);
   letter-spacing: var(--title-font-spacing);
+  text-align: left;
   font-weight: 700;
 }
 

package/src/blocks/MediaCard.tsx

@@ -22,13 +22,13 @@ const MediaCard = (props: MediaCardProps) => {
         aria-label={"Launch video"}
       >
         <div className="media-card__header">
-          <div className="media-card__icon-container">
-            <Icon symbol={props.icon ?? faCirclePlay} size="2xl" fill="white" />
-          </div>
+          <Icon symbol={props.icon ?? faCirclePlay} size="2xl" fill="white" />
         </div>
       </button>
       <div className="media-card__body">
-        <h3 className="media-card__title">{props.title}</h3>
+        <button onClick={props.handleClick}>
+          <h3 className="media-card__title">{props.title}</h3>
+        </button>
         <div className={"media-card__subtitle"}>{props.subtitle}</div>
       </div>
     </div>

package/src/blocks/StandardCard.tsx

@@ -21,7 +21,7 @@ const StandardCard = ({
     <div className={`standard-card ${className}`}>
       <div className="standard-card__inner">
         {title && (
-          <Heading className="standard-card__title" priority={3}>
+          <Heading className="standard-card__title" priority={2}>
             {title}
           </Heading>
         )}

package/src/blocks/StatusItem.tsx

@@ -10,6 +10,15 @@ interface StatusItemProps {
   confirmationNumber?: string
   listingName: string
   listingURL: string
+  strings?: {
+    applicationDeadline?: string
+    edited?: string
+    seeListing?: string
+    status?: string
+    submittedStatus?: string
+    viewApplication?: string
+    yourNumber?: string
+  }
 }
 
 const StatusItem = (props: StatusItemProps) => {
@@ -22,7 +31,8 @@ const StatusItem = (props: StatusItemProps) => {
           <h3 className="status-item__title">{props.listingName}</h3>
           {props.applicationDueDate && (
             <p className="status-item__due">
-              {t("listings.applicationDeadline")}: {props.applicationDueDate}
+              {props.strings?.applicationDeadline ?? t("listings.applicationDeadline")}:{" "}
+              {props.applicationDueDate}
             </p>
           )}
         </header>
@@ -32,7 +42,7 @@ const StatusItem = (props: StatusItemProps) => {
             {props.confirmationNumber && (
               <>
                 <span className="status-item__confirm-text">
-                  {t("application.yourLotteryNumber")}:
+                  {props.strings?.yourNumber ?? t("application.yourLotteryNumber")}:
                 </span>
                 <br />
                 <span className="status-item__confirm-number">{props.confirmationNumber}</span>
@@ -43,11 +53,12 @@ const StatusItem = (props: StatusItemProps) => {
           <div className="status-item__action">
             <p className="status-item__status">
               <span className={"status-item__label"}>
-                {t("application.status")}: {t("application.statuses.submitted")}
+                {props.strings?.status ?? t("application.status")}:{" "}
+                {props.strings?.submittedStatus ?? t("application.statuses.submitted")}
               </span>
             </p>
             <a href={props.applicationURL} className="button is-small">
-              {t("application.viewApplication")}
+              {props.strings?.viewApplication ?? t("application.viewApplication")}
             </a>
           </div>
         </section>
@@ -55,13 +66,13 @@ const StatusItem = (props: StatusItemProps) => {
         <footer className="status-item__footer">
           <div className="status-item_links">
             <LinkComponent className="status-item__link lined" href={props.listingURL}>
-              {t("t.seeListing")}
+              {props.strings?.seeListing ?? t("t.seeListing")}
             </LinkComponent>
           </div>
 
           <div className="status-item__meta">
             <p className="status-item__date">
-              {t("application.edited")}: {props.applicationUpdatedAt}
+              {props.strings?.edited ?? t("application.edited")}: {props.applicationUpdatedAt}
             </p>
           </div>
         </footer>