Skip to content

Commit

Permalink
Update buttons to use VA web components and uswds (#28215)
Browse files Browse the repository at this point in the history
* Button Group Updates for FSR

* Fixed back/cancel and add/continue text and also fixed mobile stacking styles

* Button group cypress updates

---------

Co-authored-by: Joseph Lee <joseph@cityfriends.tech>
  • Loading branch information
amponce and josephrlee committed Feb 28, 2024
1 parent b2cf351 commit ff199a7
Show file tree
Hide file tree
Showing 21 changed files with 268 additions and 316 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,6 @@ const BankruptcyDetails = ({
/>
</fieldset>
{contentBeforeButtons}

<ButtonGroup
buttons={[
{
Expand All @@ -196,7 +195,6 @@ const BankruptcyDetails = ({
},
]}
/>

{contentAfterButtons}
</form>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ const EmploymentHistoryWidget = props => {
const {
goToPath,
goForward,
onReviewPage,
contentBeforeButtons,
contentAfterButtons,
} = props;
Expand All @@ -40,7 +39,6 @@ const EmploymentHistoryWidget = props => {
const navButtons = (
<FormNavButtons goBack={handlers.onBackClick} goForward={goForward} />
);
const updateButton = <button type="submit">Review update button</button>;

return (
<form onSubmit={handlers.onSubmit}>
Expand Down Expand Up @@ -73,7 +71,7 @@ const EmploymentHistoryWidget = props => {
</Link>
</fieldset>
{contentBeforeButtons}
{onReviewPage ? updateButton : navButtons}
{navButtons}
{contentAfterButtons}{' '}
</form>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
jobButtonConstants,
} from '../../utils/session';
import { BASE_EMPLOYMENT_RECORD } from '../../constants/index';
import ButtonGroup from '../shared/ButtonGroup';

const RETURN_PATH = '/employment-history';

Expand Down Expand Up @@ -142,28 +143,15 @@ const EmploymentRecord = props => {
handleChange('isCurrent', value === 'true');
setCurrentlyWorksHere(value === 'true');
},
getContinueButtonText: () => {
if (
employmentRecord.isCurrent ||
getJobButton() === jobButtonConstants.FIRST_JOB
) {
return 'Continue';
}

if (getJobButton() === jobButtonConstants.EDIT_JOB) {
return 'Update employment record';
}
return 'Add employment record';
},
getCancelButtonText: () => {
if (getJobButton() === jobButtonConstants.FIRST_JOB) {
return 'Back';
}

if (getJobButton() === jobButtonConstants.EDIT_JOB) {
return 'Cancel Edit Entry';
return 'Cancel edit entry';
}
return 'Cancel Add Entry';
return 'Cancel add entry';
},
};

Expand Down Expand Up @@ -233,24 +221,21 @@ const EmploymentRecord = props => {
uswds
/>
</VaRadio>
<p>
<button
type="button"
id="cancel"
className="usa-button-secondary vads-u-width--auto"
onClick={handlers.onCancel}
>
{handlers.getCancelButtonText()}
</button>
<button
type="submit"
id="submit"
className="vads-u-width--auto"
onClick={updateFormData}
>
Continue
</button>
</p>

<ButtonGroup
buttons={[
{
label: handlers.getCancelButtonText(),
onClick: handlers.onCancel,
isSecondary: true,
},
{
label: 'Continue',
onClick: updateFormData,
isSubmitting: true,
},
]}
/>
</fieldset>
</form>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -143,28 +143,15 @@ const EmploymentRecord = props => {
handleChange('isCurrent', value === 'true');
setCurrentlyWorksHere(value === 'true');
},
getContinueButtonText: () => {
if (
employmentRecord.isCurrent ||
getJobButton() === jobButtonConstants.FIRST_JOB
) {
return 'Continue';
}

if (getJobButton() === jobButtonConstants.EDIT_JOB) {
return 'Update employment record';
}
return 'Add employment record';
},
getCancelButtonText: () => {
if (getJobButton() === jobButtonConstants.FIRST_JOB) {
return 'Back';
}

if (getJobButton() === jobButtonConstants.EDIT_JOB) {
return 'Cancel Edit Entry';
return 'Cancel edit entry';
}
return 'Cancel Add Entry';
return 'Cancel add entry';
},
};

Expand Down Expand Up @@ -244,7 +231,7 @@ const EmploymentRecord = props => {
isSecondary: true,
},
{
label: handlers.getContinueButtonText(),
label: 'Continue',
onClick: updateFormData,
isSubmitting: true,
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ const SpouseEmploymentHistoryWidget = props => {
const {
goToPath,
goForward,
onReviewPage,
contentBeforeButtons,
contentAfterButtons,
} = props;
Expand All @@ -38,7 +37,7 @@ const SpouseEmploymentHistoryWidget = props => {
const navButtons = (
<FormNavButtons goBack={handlers.onBackClick} goForward={goForward} />
);
const updateButton = <button type="submit">Review update button</button>;

const emptyPrompt = `Select the ‘add additional job link to add another job. Select the continue button to move on to the next question.`;

return (
Expand Down Expand Up @@ -76,7 +75,7 @@ const SpouseEmploymentHistoryWidget = props => {
</Link>
</fieldset>
{contentBeforeButtons}
{onReviewPage ? updateButton : navButtons}
{navButtons}
{contentAfterButtons}
</form>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { setData } from 'platform/forms-system/src/js/actions';
import { isValidCurrency } from '../../utils/validations';
import ButtonGroup from '../shared/ButtonGroup';

const defaultRecord = [
{
Expand Down Expand Up @@ -151,50 +152,47 @@ const CreditCardBill = props => {
},
};

const addCancelButtonsText =
creditCardBills.length === index ? 'Add' : 'Update';

const renderAddCancelButtons = () => {
return (
<>
<button
type="button"
id="cancel"
className="usa-button-secondary vads-u-width--auto"
onClick={handlers.onCancel}
>
Cancel
</button>
<button
type="button"
id="submit"
className="vads-u-width--auto usa-button-primary"
onClick={handlers.onUpdate}
>
{`${
creditCardBills.length === index ? 'Add' : 'Update'
} a credit card bill`}
</button>
<ButtonGroup
buttons={[
{
label: 'Cancel',
onClick: handlers.onCancel,
isSecondary: true,
},
{
label: `${addCancelButtonsText} credit card bill`,
onClick: handlers.onUpdate,
isSubmitting: true,
},
]}
/>
</>
);
};

const renderContinueBackButtons = () => {
return (
<>
<button
type="button"
id="cancel"
className="usa-button-secondary vads-u-width--auto"
onClick={handlers.onCancel}
>
Back
</button>
<button
type="button"
id="submit"
className="vads-u-width--auto"
onClick={updateFormData}
>
Continue
</button>
<ButtonGroup
buttons={[
{
label: 'Back',
onClick: handlers.onCancel,
isSecondary: true,
},
{
label: 'Continue',
onClick: updateFormData,
isSubmitting: true,
},
]}
/>
</>
);
};
Expand All @@ -206,7 +204,7 @@ const CreditCardBill = props => {
<h3 className="vads-u-margin--0">
{`${
creditCardBills.length === index ? 'Add' : 'Update'
} a credit card bill`}
} credit card bill`}
</h3>
<p className="vads-u-margin-bottom--neg1 vads-u-margin-top--3 vads-u-padding-bottom--0p25 vads-u-font-family--sans vads-u-font-weight--normal vads-u-font-size--base">
Enter your credit card bill’s information.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
import { parseISODate } from 'platform/forms-system/src/js/helpers';
import { isValidCurrency } from '../../utils/validations';
import ContractsExplainer from './ContractsExplainer';
import ButtonGroup from '../shared/ButtonGroup';

const defaultRecord = [
{
Expand Down Expand Up @@ -187,50 +188,47 @@ const InstallmentContract = props => {
},
};

const addUpdateButtonsText =
installmentContracts.length === index ? 'Add' : 'Update';

const renderAddCancelButtons = () => {
return (
<>
<button
type="button"
id="cancel"
className="usa-button-secondary vads-u-width--auto"
onClick={handlers.onCancel}
>
Cancel
</button>
<button
type="submit"
id="submit"
className="vads-u-width--auto"
onClick={handlers.onUpdate}
>
{`${
installmentContracts.length === index ? 'Add' : 'Update'
} an installment contract`}
</button>
<ButtonGroup
buttons={[
{
label: 'Cancel',
onClick: handlers.onCancel,
isSecondary: true,
},
{
label: `${addUpdateButtonsText} installment contract`,
onClick: handlers.onUpdate,
isSubmitting: true,
},
]}
/>
</>
);
};

const renderContinueBackButtons = () => {
return (
<>
<button
type="button"
id="cancel"
className="usa-button-secondary vads-u-width--auto"
onClick={handlers.onCancel}
>
Back
</button>
<button
type="button"
id="submit"
className="vads-u-width--auto"
onClick={updateFormData}
>
Continue
</button>
<ButtonGroup
buttons={[
{
label: 'Back',
onClick: handlers.onCancel,
isSecondary: true,
},
{
label: 'Continue',
onClick: updateFormData,
isSubmitting: true,
},
]}
/>
</>
);
};
Expand Down

0 comments on commit ff199a7

Please sign in to comment.