Skip to content

feat(app-rfi): remove duplicate require icon code #1648

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

Open
scott-williams-az wants to merge 1 commit into
base: dev
Choose a base branch
from
+24 −29
Open

feat(app-rfi): remove duplicate require icon code #1648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 4 additions & 2 deletions packages/app-rfi/src/components/AsuRfi/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,10 @@ form.uds-form.uds-rfi .rfi-input-select input:focus {
}

/* For instances where FontAwesome SVG conversion doesn't happen, we need to
provide rules for i tags */
form.uds-form.uds-rfi label i.uds-field-required {
provide rules for i tags, keeping "label" and "i" incase the weight of the
style is the same strength */
form.uds-form.uds-rfi label i.uds-field-required,
form.uds-form.uds-rfi .uds-field-required {
font-size: 0.5rem;
margin-right: 0.25rem;
margin-bottom: 0.125rem;
Expand Down
13 changes: 3 additions & 10 deletions packages/app-rfi/src/components/appVariants/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
ZipCode,
validation,
} from "../steps/questions";
import { RfiRequiredIndicator } from "../controls/controls-helpers";

const Step = ({ children }) => children;

Expand Down Expand Up @@ -52,11 +53,7 @@ const variants = {
then check your email.
</p>
<p>
<i
title="Required"
className="fa fa-icon fa-circle uds-field-required"
aria-hidden="true"
/>
<RfiRequiredIndicator required={true} />
Indicates required field
</p>
<br />
Expand Down Expand Up @@ -93,11 +90,7 @@ const variants = {
then check your email.
</p>
<p>
<i
title="Required"
className="fa fa-icon fa-circle uds-field-required"
aria-hidden="true"
/>
<RfiRequiredIndicator required={true} />
Indicates required field
</p>
<br />
Expand Down
34 changes: 17 additions & 17 deletions packages/app-rfi/src/components/controls/controls-helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,26 @@ const GaEventPropTypes = {
text: PropTypes.string,
};

const RfiRequiredIndicator = ({ required = false }) =>
required && (
<>
<span title="Required">
<i className="fas fa-circle uds-field-required" aria-hidden="true" />
</span>
&nbsp;
</>
);

const RfiLabel = ({ label, name, id = undefined, requiredIcon = undefined }) => (
<label htmlFor={id || name}>
{requiredIcon && (
<>
<span title="Required">
<i className="fas fa-circle uds-field-required" aria-hidden="true" />
</span>
&nbsp;
</>
)}
<RfiRequiredIndicator required={requiredIcon} />
{label}
</label>
);

const RfiLegend = ({ label = undefined, requiredIcon = undefined }) => (
<legend className="fw-bold">
{requiredIcon && (
<>
<span title="Required">
<i className="fas fa-circle uds-field-required" aria-hidden="true" />
</span>
&nbsp;
</>
)}
<RfiRequiredIndicator required={requiredIcon} />
{label}
</legend>
);
Expand All @@ -59,6 +55,10 @@ const RfiError = ({ isError = undefined, metaError = undefined }) => (
// duplicate the setting in our props got displaying the required icon until
// Formik has a better way to do it.

RfiRequiredIndicator.propTypes = {
required: PropTypes.bool,
};

RfiLabel.propTypes = {
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
Expand All @@ -75,4 +75,4 @@ RfiError.propTypes = {
isError: PropTypes.bool,
metaError: PropTypes.string,
};
export { RfiLabel, RfiLegend, RfiError, GaEventPropTypes };
export { RfiRequiredIndicator, RfiLabel, RfiLegend, RfiError, GaEventPropTypes };