Skip to content

Feature/form input 253 #268

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

Merged
Ibabalola merged 4 commits into from
Feb 10, 2022
Merged

Feature/form input 253 #268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a96c994
fix: label arrangement
Ibabalola Feb 10, 2022
3ae93e5
feat: update package
daniele-zurico Feb 10, 2022
9f4e0f9
fix: adding prefix correctly
Ibabalola Feb 10, 2022
4c057c0
Merge branch 'feature/form-input-253' of https://github.com/Capgemini…
Ibabalola Feb 10, 2022
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"bugs": {
"url": "https://github.com/Capgemini/dcx-react-library/issues"
},
"homepage": "https://github.com/Capgemini/dcx-react-library#readme",
"homepage": "https://main--6069a6f47f4b9f002171f8e1.chromatic.com",
"scripts": {
"build": "microbundle --jsx React.createElement --css-modules true",
"dev": "microbundle watch --jsx React.createElement",
Expand Down
40 changes: 26 additions & 14 deletions src/formInput/FormInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,16 +152,31 @@ export const FormInput = ({
return (
<div className={containerClassName}>
{errorPosition && errorPosition === ErrorPosition.TOP && <ErrorMessage />}
<div {...inputDivProps}>
<Label
label={label}
labelProperties={labelProps}
htmlFor={inputProps?.id}
className={labelClassName}
/>
{prefix && !isEmpty(prefix) && (
<div {...prefix.properties}>{prefix.content}</div>
)}
<Label
label={label}
labelProperties={labelProps}
htmlFor={inputProps?.id}
className={labelClassName}
/>
{prefix || suffix ? (
<div {...inputDivProps}>
{prefix && !isEmpty(prefix) && (
<div {...prefix.properties}>{prefix.content}</div>
)}
<input
name={name}
type={type}
value={value}
onChange={handleChange}
className={inputClassName}
aria-label={ariaLabel || name}
{...inputProps}
/>
{suffix && !isEmpty(suffix) && (
<div {...suffix.properties}>{suffix.content}</div>
)}
</div>
) : (
<input
name={name}
type={type}
Expand All @@ -171,10 +186,7 @@ export const FormInput = ({
aria-label={ariaLabel || name}
{...inputProps}
/>
{suffix && !isEmpty(suffix) && (
<div {...suffix.properties}>{suffix.content}</div>
)}
</div>
)}
{errorPosition && errorPosition === ErrorPosition.BOTTOM && (
<ErrorMessage />
)}
Expand Down
5 changes: 3 additions & 2 deletions stories/Input/Styled.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ In this section we're using the formInput component providing the GovUk style pa
name="text"
type="text"
label="User Reference (Optional)"
containerClassName="govuk-label"
inputProps={{ id: 'user-reference', className: 'govuk-input' }}
labelProps={{ htmlFor: 'user-reference', className: 'govuk-label' }}
value={value}
Expand Down Expand Up @@ -97,7 +98,7 @@ In this section we're using the formInput component providing the GovUk style pa
onChange={handleChange}
prefix={{
properties: {
className: "govuk-input__suffix",
className: "govuk-input__prefix",
'aria-hidden': "true"
},
content: '£'
Expand Down Expand Up @@ -132,7 +133,7 @@ In this section we're using the formInput component providing the GovUk style pa
}}
prefix={{
properties: {
className: "govuk-input__suffix",
className: "govuk-input__prefix",
'aria-hidden': "true"
},
content: '£'
Expand Down