-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
253 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import * as React from "react"; | ||
| import { FC } from "react"; | ||
| import TextInput from "../atoms/input/TextInput"; | ||
| import { PatronSettingsV3, PatronV5 } from "../../core/fbs/model"; | ||
| import { useText } from "../../core/utils/text"; | ||
| import CheckBox from "../checkbox/Checkbox"; | ||
| import { ChangePatronProps } from "./types"; | ||
|
|
||
| export interface ContactInfoEmailProps { | ||
| className?: string; | ||
| patron: PatronV5 | PatronSettingsV3 | null; | ||
| changePatron: ChangePatronProps; | ||
| showCheckboxes: boolean; | ||
| isRequired?: boolean; | ||
| } | ||
|
|
||
| const ContactInfoEmail: FC<ContactInfoEmailProps> = ({ | ||
| className = "", | ||
| patron, | ||
| changePatron, | ||
| showCheckboxes, | ||
| isRequired = false | ||
| }) => { | ||
| const t = useText(); | ||
| return ( | ||
| <> | ||
| <TextInput | ||
| className={className} | ||
| id="email-address-input" | ||
| type="email" | ||
| required={isRequired} | ||
| onChange={(newEmail) => changePatron(newEmail, "emailAddress")} | ||
| value={patron?.emailAddress} | ||
| label={t("patronContactEmailLabelText")} | ||
| /> | ||
| {showCheckboxes && ( | ||
| <CheckBox | ||
| className="mt-8 mb-16" | ||
| onChecked={(newReceiveEmail: boolean) => | ||
| changePatron(newReceiveEmail, "receiveEmail") | ||
| } | ||
| id="email-messages" | ||
| selected={patron?.receiveEmail} | ||
| disabled={false} | ||
| label={t("patronContactEmailCheckboxText")} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ContactInfoEmail; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| // eslint-disable-next-line import/no-extraneous-dependencies | ||
| import { configure, render } from "@testing-library/react"; | ||
| import clsx from "clsx"; | ||
| import * as React from "react"; | ||
| import { FC } from "react"; | ||
|
|
||
| export interface ContactInfoInputsProps { | ||
| isInline: boolean; | ||
| children: React.ReactNode; | ||
| dataCy?: string; | ||
| className?: string; | ||
| } | ||
|
|
||
| // This component wraps the input fields for the contact info section | ||
| // depending on the isInline prop. | ||
| const ContactInfoInputs: FC<ContactInfoInputsProps> = ({ | ||
| isInline, | ||
| children, | ||
| dataCy = "contact-info-input", | ||
| className = undefined | ||
| }) => { | ||
| if (!isInline) { | ||
| return ( | ||
| <div className={className} data-cy={dataCy}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const renderableChildren = React.Children.toArray(children); | ||
| return ( | ||
| <div | ||
| className={clsx(className, { | ||
| "contact-info-flex": isInline | ||
| })} | ||
| data-cy={dataCy} | ||
| > | ||
| {renderableChildren.map((child, i) => { | ||
| const childClassName = clsx("patron__input--desktop", { | ||
| "mr-16": i < renderableChildren.length - 1 | ||
| }); | ||
| return <div className={childClassName}>{child}</div>; | ||
| })} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ContactInfoInputs; | ||
|
|
||
| /* ********************************* Vitest Section ********************************* */ | ||
| configure({ | ||
| testIdAttribute: "data-cy" | ||
| }); | ||
|
|
||
| if (import.meta.vitest) { | ||
| const { describe, expect, it } = import.meta.vitest; | ||
|
|
||
| describe("ContactInfoInputs", () => { | ||
| it("Should wrap the input fields if it is inline", async () => { | ||
| const { getByTestId } = render( | ||
| <ContactInfoInputs isInline> | ||
| <p>One input component</p> | ||
| <p>Another input component</p> | ||
| </ContactInfoInputs> | ||
| ); | ||
|
|
||
| const contactInfoInputs = getByTestId("contact-info-input"); | ||
|
|
||
| expect(contactInfoInputs).toMatchSnapshot(); | ||
| }); | ||
| it("Should NOT wrap the input fields if it is NOT inline", async () => { | ||
| const { getByTestId } = render( | ||
| <ContactInfoInputs dataCy="contact-info-input-inline" isInline={false}> | ||
| <p>One input component</p> | ||
| <p>Another input component</p> | ||
| </ContactInfoInputs> | ||
| ); | ||
|
|
||
| const contactInfoInputs = getByTestId("contact-info-input-inline"); | ||
|
|
||
| expect(contactInfoInputs).toMatchSnapshot(); | ||
| }); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import * as React from "react"; | ||
| import { FC } from "react"; | ||
| import TextInput from "../atoms/input/TextInput"; | ||
| import { PatronSettingsV3, PatronV5 } from "../../core/fbs/model"; | ||
| import CheckBox from "../checkbox/Checkbox"; | ||
| import { useText } from "../../core/utils/text"; | ||
| import { ChangePatronProps } from "./types"; | ||
|
|
||
| export interface ContactInfoPhoneProps { | ||
| patron: PatronV5 | PatronSettingsV3 | null; | ||
| changePatron: ChangePatronProps; | ||
| showCheckboxes: boolean; | ||
| className?: string; | ||
| } | ||
|
|
||
| const ContactInfoPhone: FC<ContactInfoPhoneProps> = ({ | ||
| patron, | ||
| changePatron, | ||
| showCheckboxes, | ||
| className = "" | ||
| }) => { | ||
| const t = useText(); | ||
| return ( | ||
| <> | ||
| <TextInput | ||
| className={className} | ||
| id="phone-input" | ||
| required | ||
| type="number" | ||
| onChange={(newPhoneNumber) => | ||
| changePatron(newPhoneNumber, "phoneNumber") | ||
| } | ||
| value={patron?.phoneNumber} | ||
| label={t("patronContactPhoneLabelText")} | ||
| /> | ||
| {showCheckboxes && ( | ||
| <CheckBox | ||
| className="mt-8 mb-16" | ||
| onChecked={(newReceiveSms: boolean) => | ||
| changePatron(newReceiveSms, "receiveSms") | ||
| } | ||
| id="phone-messages" | ||
| selected={patron?.receiveSms} | ||
| disabled={false} | ||
| label={t("patronContactPhoneCheckboxText")} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ContactInfoPhone; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
src/components/contact-info-section/__snapshots__/ContactInfoInputs.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| // Vitest Snapshot v1 | ||
|
|
||
| exports[`ContactInfoInputs > Should NOT wrap the input fields if it is NOT inline 1`] = ` | ||
| <div | ||
| data-cy="contact-info-input-inline" | ||
| > | ||
| <p> | ||
| One input component | ||
| </p> | ||
| <p> | ||
| Another input component | ||
| </p> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`ContactInfoInputs > Should wrap the input fields if it is inline 1`] = ` | ||
| <div | ||
| class="contact-info-flex" | ||
| data-cy="contact-info-input" | ||
| > | ||
| <div | ||
| class="patron__input--desktop mr-16" | ||
| > | ||
| <p> | ||
| One input component | ||
| </p> | ||
| </div> | ||
| <div | ||
| class="patron__input--desktop" | ||
| > | ||
| <p> | ||
| Another input component | ||
| </p> | ||
| </div> | ||
| </div> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export interface ChangePatronProps { | ||
| (newValue: string | boolean, key: string): void; | ||
| } |