diff --git a/__tests__/forms/PhoneField.test.tsx b/__tests__/forms/PhoneField.test.tsx index 376672f..7a2741d 100644 --- a/__tests__/forms/PhoneField.test.tsx +++ b/__tests__/forms/PhoneField.test.tsx @@ -40,14 +40,12 @@ const ErrorPhoneField = () => { describe("", () => { it("renders default state", () => { - const { getByText, getByPlaceholderText } = render() + const { getByText } = render() expect(getByText("Your Second Phone Number")).toBeTruthy() - expect(getByPlaceholderText("(555) 555-5555")).toBeTruthy() }) it("renders error state", () => { - const { getByText, getByPlaceholderText } = render() + const { getByText } = render() expect(getByText("Your Second Phone Number")).toBeTruthy() - expect(getByPlaceholderText("(555) 555-5555")).toBeTruthy() expect(getByText("Uh oh!")).toBeTruthy() }) }) diff --git a/src/forms/DOBField.tsx b/src/forms/DOBField.tsx index 800a69f..8910d76 100644 --- a/src/forms/DOBField.tsx +++ b/src/forms/DOBField.tsx @@ -69,8 +69,7 @@ const DOBField = (props: DOBFieldProps) => { name={getFieldName("birthMonth")} label={props.strings?.month ?? t("t.month")} disabled={props.disabled} - readerOnly={true} - placeholder={props.strings?.monthPlaceholder ?? t("account.settings.placeholders.month")} + placeholder={props.strings?.monthPlaceholder ?? ""} defaultValue={defaultDOB?.birthMonth ? defaultDOB.birthMonth : ""} error={error?.birthMonth !== undefined} validation={{ @@ -91,8 +90,7 @@ const DOBField = (props: DOBFieldProps) => { name={getFieldName("birthDay")} label={props.strings?.day ?? t("t.day")} disabled={props.disabled} - readerOnly={true} - placeholder={props.strings?.dayPlaceholder ?? t("account.settings.placeholders.day")} + placeholder={props.strings?.dayPlaceholder ?? ""} defaultValue={defaultDOB?.birthDay ? defaultDOB.birthDay : ""} error={error?.birthDay !== undefined} validation={{ @@ -113,8 +111,7 @@ const DOBField = (props: DOBFieldProps) => { name={getFieldName("birthYear")} label={props.strings?.year ?? t("t.year")} disabled={props.disabled} - readerOnly={true} - placeholder={props.strings?.yearPlaceholder ?? t("account.settings.placeholders.year")} + placeholder={props.strings?.yearPlaceholder ?? ""} defaultValue={defaultDOB?.birthYear ? defaultDOB.birthYear : ""} error={error?.birthYear !== undefined} validation={{ @@ -137,7 +134,7 @@ const DOBField = (props: DOBFieldProps) => { {hasError && (
- + {errorMessage ? errorMessage : props.strings?.dateError ?? t("errors.dateOfBirthError")}
diff --git a/src/forms/PhoneField.tsx b/src/forms/PhoneField.tsx index 838de20..c958b6f 100644 --- a/src/forms/PhoneField.tsx +++ b/src/forms/PhoneField.tsx @@ -21,7 +21,7 @@ export const PhoneField = (props: { mask?: (args: any) => JSX.Element dataTestId?: string }) => { - const labelClasses = ["label"] + const labelClasses = [] if (props.caps) labelClasses.push("text__caps-spaced") if (props.readerOnly) labelClasses.push("sr-only") /** diff --git a/src/forms/PhoneMask.tsx b/src/forms/PhoneMask.tsx index 4f9bd37..5f6634f 100644 --- a/src/forms/PhoneMask.tsx +++ b/src/forms/PhoneMask.tsx @@ -10,7 +10,7 @@ export const PhoneMask = React.forwardRef((props: any, ref: any) => { mask={["(", /[1-9]/, /\d/, /\d/, ")", " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/]} className="input" type="tel" - placeholder={placeholder || "(555) 555-5555"} + placeholder={placeholder ?? ""} guide={false} id={name} value={value} diff --git a/src/global/forms.scss b/src/global/forms.scss index e8f6cae..1afbaa9 100644 --- a/src/global/forms.scss +++ b/src/global/forms.scss @@ -16,7 +16,6 @@ .label { @apply pb-2; @apply text-sm; - @apply text-gray-800; } label + .control { diff --git a/src/global/text.scss b/src/global/text.scss index 087318d..6d68886 100644 --- a/src/global/text.scss +++ b/src/global/text.scss @@ -93,7 +93,6 @@ h1.title { @apply underline; @apply font-alt-sans; @apply text-sm; - @apply uppercase; @apply block; @apply text-primary; @apply font-semibold; diff --git a/src/helpers/MultiLineAddress.tsx b/src/helpers/MultiLineAddress.tsx index dac0f48..5d388fd 100644 --- a/src/helpers/MultiLineAddress.tsx +++ b/src/helpers/MultiLineAddress.tsx @@ -31,7 +31,9 @@ const MultiLineAddress = ({ address }: MultiLineAddressProps) => { } if (address.city || address.state || address.zipCode) { - str += `${address.city && `${address.city} ,`} ${address.state} ${address.zipCode}` + str += `${address.city ? `${address.city},` : ""} ${address.state || ""} ${ + address.zipCode || "" + }` } return str diff --git a/src/navigation/ProgressNav.scss b/src/navigation/ProgressNav.scss index 14789a8..9feab27 100644 --- a/src/navigation/ProgressNav.scss +++ b/src/navigation/ProgressNav.scss @@ -1,5 +1,5 @@ .progress-nav { - --completed-step-color: var(--bloom-color-gray-850); + --completed-step-color: var(--bloom-color-primary); --completed-step-font-color: var(--bloom-color-gray-850); --active-step-color: var(--bloom-color-primary); --active-step-font-color: var(--bloom-color-gray-950); @@ -7,11 +7,10 @@ --future-step-font-color: var(--bloom-text-color); --dot-size: var(--bloom-s3); - --dot-padding-left-mobile: var(--bloom-s2); --dot-label-padding-top: var(--bloom-s4); --dot-label-padding-left: var(--bloom-s1); - --dot-font-size-desktop: var(--bloom-font-size-base); - --dot-font-size-mobile: var(--bloom-font-size-3xs); + --dot-label-padding-right: var(--bloom-s4); + --dot-font-size: var(--bloom-font-size-sm); --dot-line-color: var(--bloom-color-gray-450); --dot-active-font-weight: bold; --dot-text-transform: capitalize; @@ -24,13 +23,14 @@ --bar-active-font-weight: bold; --bar-text-transform: capitalize; + --nav-width: initial; + display: table; - width: 100%; + width: var(--nav-width); } .progress-nav__dot-item { - font-size: var(--dot-font-size-mobile); - padding: var(--dot-size) var(--dot-padding-left-mobile); + font-size: var(--dot-font-size); position: relative; text-align: center; text-transform: var(--dot-text-transform); @@ -38,7 +38,6 @@ white-space: normal; float: none; @media (min-width: $screen-md) { - font-size: var(--dot-font-size-desktop); padding: 0rem; } @@ -49,7 +48,7 @@ background-color: var(--completed-step-color); border-radius: 50%; top: 0; - left: 50%; + left: 0.5rem; content: ""; transform: translateX(-50%); z-index: 2; @@ -57,9 +56,9 @@ &:after { position: absolute; - background-color: var(--dot-line-color); + background-color: var(--completed-step-color); width: 100%; - left: 0; + left: 0.5rem; top: 0.4rem; content: ""; height: 1px; @@ -67,14 +66,14 @@ &:first-of-type { &:after { - left: 50%; + left: 20%; } } &:last-of-type { &:after { left: auto; - right: 50%; + right: 80%; } } .progress-nav__item-container { @@ -86,12 +85,16 @@ pointer-events: none; cursor: default; z-index: 3; + padding-right: var(--dot-label-padding-right); } &.is-active { &:before { background-color: var(--active-step-color); } + &:after { + background-color: var(--completed-step-color); + } .progress-nav__item-container { color: var(--active-step-font-color); font-weight: var(--dot-active-font-weight); @@ -105,12 +108,22 @@ .progress-nav__item-container { color: var(--future-step-font-color); } + + &:after { + background-color: var(--future-step-color); + } + &:last-of-type { + &:after { + z-index: -1; + } + } } } .progress-nav__bar { border-spacing: var(--bar-spacing); table-layout: fixed; + width: 100%; } .progress-nav__bar-item { diff --git a/src/page_components/ApplicationTimeline.scss b/src/page_components/ApplicationTimeline.scss index f7cc82e..9a3db8a 100644 --- a/src/page_components/ApplicationTimeline.scss +++ b/src/page_components/ApplicationTimeline.scss @@ -4,6 +4,7 @@ } .application-timeline { + width: 100%; .progress-nav__dot-item { @apply pt-0; @@ -18,6 +19,41 @@ p { padding-top: 3.8em; } + + &:before { + left: 50%; + } + + &:after { + left: 0; + } + + &:first-of-type { + &:after { + left: 50%; + } + } + + &:last-of-type { + &:after { + left: auto; + right: 50%; + } + } + + &.is-disabled { + &:last-of-type { + &:after { + z-index: 0; + } + } + } + + &.is-active { + &:after { + background-color: var(--future-step-color); + } + } } .progress-nav__dot-item.is-active::before,