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.

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

Update to uswds v2 #359

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft
Changes from all commits
Commits
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,682 changes: 1,972 additions & 2,710 deletions package-lock.json

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@
},
"homepage": "https://github.com/usds/us-forms-system#readme",
"devDependencies": {
"autoprefixer": "^8.6.5",
"autoprefixer": "^9.8.6",
"axe-core": "^2.4.2",
"babel-cli": "^6.26.0",
"babel-core": "^6.24.1",
@@ -68,26 +68,26 @@
"isomorphic-fetch": "http://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
"jsdom": "^13.2.0",
"jsonschema": "^1.1.1",
"lodash": "^4.17.15",
"lodash": "^4.17.20",
"lodash-deep": "^2.0.0",
"markdown-link-check": "^3.7.2",
"markdown-link-check": "^3.8.1",
"mocha": "^5.2.0",
"node-sass": "^4.12.0",
"node-sass": "^4.14.1",
"null-loader": "^0.1.1",
"postcss-cli": "^5.0.1",
"postcss-cli": "^7.1.2",
"react": "^15.6.2",
"react-dom": "^15.6.2",
"react-test-renderer": "^15.5.4",
"redux-thunk": "^2.3.0",
"sass-lint": "^1.13.1",
"sinon": "^6.3.5",
"skin-deep": "^1.0.0",
"uswds": "^1.6.9"
"uswds": "^2.8.1"
},
"peerDependencies": {
"react": "^15.5.4",
"react-dom": "^15.6.2",
"uswds": "^1.6.3"
"uswds": "^2.8.1"
},
"dependencies": {
"@department-of-veterans-affairs/react-jsonschema-form": "^1.0.0",
9 changes: 5 additions & 4 deletions src/js/components/ErrorableCheckbox.jsx
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@ class ErrorableCheckbox extends React.Component {
if (this.props.errorMessage) {
errorSpanId = `${this.inputId}-error-message`;
errorSpan = (
<span className="usa-input-error-message" role="alert" id={errorSpanId}>
<span className="usa-error-message" role="alert" id={errorSpanId}>
<span className="sr-only">Error</span> {this.props.errorMessage}
</span>
);
@@ -36,8 +36,8 @@ class ErrorableCheckbox extends React.Component {
requiredSpan = <span className="form-required-span">*</span>;
}

let className = `form-checkbox${
this.props.errorMessage ? ' usa-input-error' : ''
let className = `usa-checkbox${
this.props.errorMessage ? ' usa-input--error' : ''
}`;
if (!_.isUndefined(this.props.className)) {
className = `${className} ${this.props.className}`;
@@ -51,10 +51,11 @@ class ErrorableCheckbox extends React.Component {
id={this.inputId}
name={this.props.name}
type="checkbox"
className="usa-checkbox__input"
onChange={this.handleChange}/>
<label
className={
this.props.errorMessage ? 'usa-input-error-label' : undefined
this.props.errorMessage ? 'usa-checkbox__label usa-label--error' : 'usa-checkbox__label'
}
name={`${this.props.name}-label`}
htmlFor={this.inputId}>
10 changes: 5 additions & 5 deletions src/js/components/FieldTemplate.jsx
Original file line number Diff line number Diff line change
@@ -42,26 +42,26 @@ export default function FieldTemplate(props) {
let errorSpan;
let errorClass;
if (hasErrors) {
errorClass = isDateField ? 'input-error-date' : 'usa-input-error';
errorClass = isDateField ? 'input-error-date' : 'usa-input--error';
errorSpanId = `${id}-error-message`;
errorSpan = (
<span className="usa-input-error-message" role="alert" id={errorSpanId}>
<span className="usa-error-message" role="alert" id={errorSpanId}>
<span className="sr-only">Error</span> {rawErrors[0]}
</span>
);
}

const containerClassNames = classNames(
'schemaform-field-template',
'usa-fieldset schemaform-field-template',
_.get(['ui:options', 'classNames'], uiSchema)
);
const labelClassNames = classNames({
'usa-input-error-label': hasErrors && !isDateField,
'usa-label--error': hasErrors && !isDateField,
'schemaform-label': true
});

const inputWrapperClassNames = classNames('schemaform-widget-wrapper', {
'usa-input-error form-error-date': isDateField && hasErrors
'usa-input--error form-error-date': isDateField && hasErrors
});

const noWrapperContent = !showFieldLabel &&
18 changes: 10 additions & 8 deletions src/js/containers/FormApp.jsx
Original file line number Diff line number Diff line change
@@ -61,16 +61,18 @@ class FormApp extends React.Component {

return (
<div>
<div className="row">
<div className="usa-width-two-thirds medium-8 columns">
<Element name="topScrollElement"/>
{formTitle}
{formNav}
{renderedChildren}
<div className="grid-container">
<div className="grid-row grid-gap">
<div className="grid-col-8">
<Element name="topScrollElement"/>
{formTitle}
{formNav}
{renderedChildren}
</div>
</div>
{footer}
<span className="js-test-location hidden" data-location={trimmedPathname} hidden></span>
</div>
{footer}
<span className="js-test-location hidden" data-location={trimmedPathname} hidden></span>
</div>
);
}
11 changes: 6 additions & 5 deletions src/js/containers/FormPage.jsx
Original file line number Diff line number Diff line change
@@ -108,6 +108,7 @@ class FormPage extends React.Component {
<SchemaForm
name={route.pageConfig.pageKey}
title={route.pageConfig.title}
className="usa-form"
data={data}
schema={schema}
uiSchema={uiSchema}
@@ -116,20 +117,20 @@ class FormPage extends React.Component {
uploadFile={this.props.uploadFile}
onChange={this.onChange}
onSubmit={this.onSubmit}>
<div className="row form-progress-buttons schemaform-buttons">
<div className="small-6 medium-5 columns">
<div className="grid-row grid-gap form-progress-buttons schemaform-buttons">
<div className="grid-col-6">
{ !isFirstRoutePage &&
<ProgressButton
onButtonClick={this.goBack}
buttonText="Back"
buttonClass="usa-button-secondary"
buttonClass="usa-button usa-button--outline"
beforeText="«"/> }
</div>
<div className="small-6 medium-5 end columns">
<div className="grid-col-6">
<ProgressButton
submitButton
buttonText="Continue"
buttonClass="usa-button-primary"
buttonClass="usa-button usa-button--primary"
afterText="»"/>
</div>
</div>
18 changes: 9 additions & 9 deletions src/js/review/ArrayField.jsx
Original file line number Diff line number Diff line change
@@ -187,7 +187,7 @@ class ArrayField extends React.Component {
<h5 className="form-review-panel-page-header">{title}</h5>
{itemsNeeded && <span className="schemaform-review-array-warning-icon"/>}
{!itemCountLocked &&
<button type="button" className="edit-btn primary-outline" onClick={() => this.handleAdd()}>Add Another</button>
<button type="button" className="usa-button usa-button--outline edit-btn" onClick={() => this.handleAdd()}>Add Another</button>
}
</div>}
<div className="usfs-growable usfs-growable-review">
@@ -203,8 +203,8 @@ class ArrayField extends React.Component {
return (
<div key={index} className="usfs-growable-background">
<Element name={`table_${fieldName}_${index}`}/>
<div className="row small-collapse schemaform-array-row" id={`table_${fieldName}_${index}`}>
<div className="small-12 columns usfs-growable-expanded">
<div className="grid-row small-collapse schemaform-array-row" id={`table_${fieldName}_${index}`}>
<div className="grid-col-fill usfs-growable-expanded">
{isLast && uiOptions.itemName && items.length > 1
? <h5>New {uiOptions.itemName}</h5>
: null}
@@ -220,11 +220,11 @@ class ArrayField extends React.Component {
onChange={(data) => this.handleSetData(index, data)}
onEdit={() => this.handleEdit(index, !isEditing)}
onSubmit={() => this.handleSave(index)}>
<div className="row small-collapse">
<div className="small-6 left columns">
<div className="grid-row small-collapse">
<div className="grid-col-6">
<button className="float-left">Update</button>
</div>
<div className="small-6 right columns">
<div className="grid-col-6">
{showReviewButton && <button type="button" className="usa-button-secondary float-right" onClick={() => this.handleRemove(index)}>Remove</button>}
</div>
</div>
@@ -236,7 +236,7 @@ class ArrayField extends React.Component {
}
return (
<div key={index} className="usfs-growable-background">
<div className="row small-collapse">
<div className="grid-row small-collapse">
<SchemaForm
reviewMode
data={item}
@@ -254,8 +254,8 @@ class ArrayField extends React.Component {
);
})}
{itemsNeeded &&
<div className="usa-alert usa-alert-warning usa-alert-no-color usa-alert-mini">
<div className="usa-alert-body">
<div className="usa-alert usa-alert--warning usa-alert--slim">
<div className="usa-alert__body">
{_.get('ui:errorMessages.minItems', uiSchema) || 'You need to add at least one item.'}
</div>
</div>}
36 changes: 16 additions & 20 deletions src/js/review/ReviewCollapsibleChapter.jsx
Original file line number Diff line number Diff line change
@@ -91,7 +91,7 @@ export default class ReviewCollapsibleChapter extends React.Component {

if (this.props.open) {
pageContent = (
<div className="usa-accordion-content schemaform-chapter-accordion-content" aria-hidden="false">
<div>
{ChapterDescription &&
<ChapterDescription
viewedPages={viewedPages}
@@ -156,7 +156,7 @@ export default class ReviewCollapsibleChapter extends React.Component {
{!editing ? <div/> : <ProgressButton
submitButton
buttonText="Update Page"
buttonClass="usa-button-primary"/>}
buttonClass="usa-button usa-button--primary"/>}
</SchemaForm>}
{arrayFields.map(arrayField => (
<div key={arrayField.path} className="form-review-array">
@@ -181,30 +181,26 @@ export default class ReviewCollapsibleChapter extends React.Component {
);
}

const classes = classNames('usa-accordion-bordered', 'form-review-panel', {
const classes = classNames('usa-accordion usa-accordion--bordered', 'form-review-panel', {
'schemaform-review-chapter-warning': showUnviewedPageWarning
});

return (
<div id={`${this.id}-collapsiblePanel`} className={classes}>
<Element name={`chapter${this.props.chapterKey}ScrollElement`}/>
<ul className="usa-unstyled-list">
<li>
<div className="accordion-header clearfix schemaform-chapter-accordion-header">
<button
className="usa-button-unstyled"
aria-expanded={this.props.open ? 'true' : 'false'}
aria-controls={`collapsible-${this.id}`}
onClick={this.props.toggleButtonClicked}>
{chapterTitle}
</button>
{showUnviewedPageWarning && <span className="schemaform-review-chapter-warning-icon"/>}
</div>
<div id={`collapsible-${this.id}`}>
{pageContent}
</div>
</li>
</ul>
<div className="usa-accordion__heading clearfix schemaform-chapter-accordion-header">
<button
className="usa-accordion__button"
aria-expanded={this.props.open ? 'true' : 'false'}
aria-controls={`collapsible-${this.id}`}
onClick={this.props.toggleButtonClicked}>
{chapterTitle}
</button>
{showUnviewedPageWarning && <span className="schemaform-review-chapter-warning-icon"/>}
</div>
<div id={`collapsible-${this.id}`} className="usa-accordion__content schemaform-chapter-accordion-content" aria-hidden="false">
{pageContent}
</div>
</div>
);
}
Loading