Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor / form fields and control elements #183

Closed
wants to merge 3 commits into from
Closed

Refactor / form fields and control elements #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fbdbd13
refactor(project): form fields and control elements
ChristiaanScheermeijer Feb 13, 2024
fa6ae81
chore(project): apply aria-hidden and update e2e tests
MelissaDTH Apr 18, 2024
3d2fa46
chore(project): update test, snapshots and remove unused props
MelissaDTH Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/common/types/form.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export type UseFormChangeHandler = React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
export type UseFormBlurHandler = React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
export type UseFormChangeHandler = React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
export type UseFormBlurHandler = React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
export type UseFormSubmitHandler = React.FormEventHandler<HTMLFormElement>;

export type GenericFormErrors = { form: string };
Expand Down
7 changes: 4 additions & 3 deletions packages/ui-react/src/components/Account/Account.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ import Alert from '../Alert/Alert';
import Button from '../Button/Button';
import Form from '../Form/Form';
import IconButton from '../IconButton/IconButton';
import TextField from '../TextField/TextField';
import Checkbox from '../Checkbox/Checkbox';
import FormFeedback from '../FormFeedback/FormFeedback';
import TextField from '../form-fields/TextField/TextField';
import Checkbox from '../form-fields/Checkbox/Checkbox';
import CustomRegisterField from '../CustomRegisterField/CustomRegisterField';
import Icon from '../Icon/Icon';
import { modalURLFromLocation } from '../../utils/location';
Expand Down Expand Up @@ -351,8 +351,9 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
name={`consentsValues.${consent.name}`}
checked={isTruthyCustomParamValue(section.values.consentsValues?.[consent.name])}
onChange={section.onChange}
label={formatConsentLabel(consent.label)}
checkboxLabel={formatConsentLabel(consent.label)}
disabled={consent.required || section.isBusy}
required={consent.required}
lang={htmlLang}
/>
))}
Expand Down
32 changes: 16 additions & 16 deletions packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,19 +25,20 @@ exports[`<Account> > renders and matches snapshot 1`] = `
novalidate=""
>
<div
class="_textField_e16c1b"
class="_formField_86f2f5 _textField_c799b0"
>
<label
class="_label_e16c1b"
class="_label_86f2f5"
for="text-field_1235_firstname"
>
account.firstname
</label>
<input
aria-describedby="helper_text_1235_firstname"
aria-invalid="false"
aria-required="false"
autocomplete="given-name"
class="_input_e16c1b"
class="_input_859b20"
id="text-field_1235_firstname"
lang="en"
name="firstName"
Expand All @@ -47,19 +48,20 @@ exports[`<Account> > renders and matches snapshot 1`] = `
/>
</div>
<div
class="_textField_e16c1b"
class="_formField_86f2f5 _textField_c799b0"
>
<label
class="_label_e16c1b"
class="_label_86f2f5"
for="text-field_1235_lastname"
>
account.lastname
</label>
<input
aria-describedby="helper_text_1235_lastname"
aria-invalid="false"
aria-required="false"
autocomplete="family-name"
class="_input_e16c1b"
class="_input_859b20"
id="text-field_1235_lastname"
lang="en"
name="lastName"
Expand Down Expand Up @@ -100,19 +102,20 @@ exports[`<Account> > renders and matches snapshot 1`] = `
novalidate=""
>
<div
class="_textField_e16c1b"
class="_formField_86f2f5 _textField_c799b0"
>
<label
class="_label_e16c1b"
class="_label_86f2f5"
for="text-field_1235_email"
>
account.email
</label>
<input
aria-describedby="helper_text_1235_email"
aria-invalid="false"
aria-required="true"
autocomplete="email"
class="_input_e16c1b"
class="_input_859b20"
id="text-field_1235_email"
name="email"
readonly=""
Expand Down Expand Up @@ -183,25 +186,22 @@ exports[`<Account> > renders and matches snapshot 1`] = `
novalidate=""
>
<div
class="_checkbox_531f07"
class="_formField_86f2f5 _checkbox_a98c3a"
>
<div
class="_row_531f07"
class="_row_a98c3a"
>
<input
aria-describedby="helper_text_1235_consentsvalues_marketing"
id="check-box_1235_consentsvalues_marketing"
id="text-field_1235_consentsvalues_marketing"
name="consentsValues.marketing"
type="checkbox"
value=""
/>
<label
for="check-box_1235_consentsvalues_marketing"
for="text-field_1235_consentsvalues_marketing"
lang="en"
>
<span
aria-hidden="true"
/>
Receive Marketing Emails
</label>
</div>
Expand Down
18 changes: 0 additions & 18 deletions packages/ui-react/src/components/Checkbox/Checkbox.test.tsx
View file
Open in desktop

This file was deleted.

61 changes: 0 additions & 61 deletions packages/ui-react/src/components/Checkbox/Checkbox.tsx
View file
Open in desktop

This file was deleted.

56 changes: 40 additions & 16 deletions packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,22 +85,28 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
>
<div>
<div
class="_textField_e16c1b"
class="_formField_86f2f5 _textField_c799b0"
>
<label
class="_label_e16c1b"
class="_label_86f2f5"
for="text-field_1235_cardholdername"
>
checkout.card_holder_name
<span
aria-hidden="true"
>
*
</span>
</label>
<div
class="_container_e16c1b"
class="_container_859b20"
>
<input
aria-describedby="helper_text_1235_cardholdername"
aria-invalid="false"
aria-required="true"
autocomplete="cc-name"
class="_input_e16c1b"
class="_input_859b20"
id="text-field_1235_cardholdername"
name="cardholderName"
placeholder="checkout.credit_card_name"
Expand All @@ -113,22 +119,28 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
</div>
<div>
<div
class="_textField_e16c1b directPostCreditCardNumber"
class="_formField_86f2f5 _textField_c799b0 directPostCreditCardNumber"
>
<label
class="_label_e16c1b"
class="_label_86f2f5"
for="text-field_1235_cardnumber"
>
Card number
<span
aria-hidden="true"
>
*
</span>
</label>
<div
class="_container_e16c1b"
class="_container_859b20"
>
<input
aria-describedby="helper_text_1235_cardnumber"
aria-invalid="false"
aria-required="true"
autocomplete="cc-number"
class="_input_e16c1b"
class="_input_859b20"
id="text-field_1235_cardnumber"
name="cardNumber"
pattern="\\d*"
Expand All @@ -145,22 +157,28 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
>
<div>
<div
class="_textField_e16c1b directPostExpiryDate"
class="_formField_86f2f5 _textField_c799b0 directPostExpiryDate"
>
<label
class="_label_e16c1b"
class="_label_86f2f5"
for="text-field_1235_cardexpiry"
>
Expiry date
<span
aria-hidden="true"
>
*
</span>
</label>
<div
class="_container_e16c1b"
class="_container_859b20"
>
<input
aria-describedby="helper_text_1235_cardexpiry"
aria-invalid="false"
aria-required="true"
autocomplete="cc-exp"
class="_input_e16c1b"
class="_input_859b20"
id="text-field_1235_cardexpiry"
name="cardExpiry"
pattern="\\d*"
Expand All @@ -174,23 +192,29 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
</div>
<div>
<div
class="_textField_e16c1b directPostSecurityCode"
class="_formField_86f2f5 _textField_c799b0 directPostSecurityCode"
>
<label
class="_label_e16c1b"
class="_label_86f2f5"
for="text-field_1235_cardcvc"
>
payment.security_code
<span
aria-hidden="true"
>
*
</span>
</label>
<div
class="_container_e16c1b"
class="_container_859b20"
>
<input
aria-describedby="helper_text_1235_cardcvc"
aria-invalid="false"
aria-label="payment.security_code"
aria-required="true"
autocomplete="cc-csc"
class="_input_e16c1b"
class="_input_859b20"
id="text-field_1235_cardcvc"
name="cardCVC"
pattern="\\d*"
Expand Down
Loading
Loading