Skip to content

Commit 207596b

Browse files
author
Dave Ferris
committed
UIDS-16 create Form and related components
1 parent 5107e85 commit 207596b

25 files changed

+1305
-1
lines changed

‎lib/Form/Form.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = Form;
7+
8+
var _react = _interopRequireDefault(require("react"));
9+
10+
var _classnames = _interopRequireDefault(require("classnames"));
11+
12+
require("./Form.scss");
13+
14+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15+
16+
function Form(props) {
17+
return _react.default.createElement("form", {
18+
className: (0, _classnames.default)('Form', props.inline ? 'inline' : ''),
19+
id: props.id,
20+
onSubmit: props.onSubmit
21+
}, props.children);
22+
}
23+
24+
Form.defaultProps = {
25+
children: undefined,
26+
inline: false
27+
};

‎lib/Form/Form.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.Form {
2+
&.inline {
3+
.FormGroup {
4+
align-items: center;
5+
display: flex;
6+
flex-direction: row;
7+
8+
.FormControl {
9+
flex-basis: 25%;
10+
min-width: 12rem;
11+
order: 1;
12+
}
13+
14+
.FormLabel {
15+
flex-grow: 1;
16+
margin-left: 1rem;
17+
order: 2;
18+
}
19+
}
20+
}
21+
}

‎lib/FormControl/FormControl.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
"use strict";
2+
3+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4+
5+
Object.defineProperty(exports, "__esModule", {
6+
value: true
7+
});
8+
exports.default = FormControl;
9+
10+
var _react = _interopRequireWildcard(require("react"));
11+
12+
var _classnames = _interopRequireDefault(require("classnames"));
13+
14+
require("./FormControl.scss");
15+
16+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17+
18+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
19+
20+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21+
22+
function addErrorClass(child) {
23+
if (!child || !child.props) return child;
24+
var wrappedClassName = (0, _classnames.default)(child.props.className, {
25+
'is-invalid': this.hasErrors
26+
});
27+
return (0, _react.cloneElement)(child, {
28+
className: wrappedClassName
29+
});
30+
}
31+
32+
function renderErrors(errors) {
33+
if (typeof errors === 'string') {
34+
return errors;
35+
}
36+
37+
return _react.default.createElement("ol", {
38+
className: "invalid-feedback__list"
39+
}, // eslint-disable-next-line react/no-array-index-key
40+
errors.map(function (e, idx) {
41+
return _react.default.createElement("li", {
42+
key: idx
43+
}, e);
44+
}));
45+
}
46+
47+
function FormControl(props) {
48+
var errors = props.errors,
49+
inputKey = props.inputKey;
50+
var hasErrors = errors[inputKey] && errors[inputKey].length > 0;
51+
return _react.default.createElement("div", {
52+
className: (0, _classnames.default)('FormControl', props.inputClassName)
53+
}, _react.Children.map(props.children, addErrorClass, {
54+
hasErrors: hasErrors
55+
}), props.displayErrorText && hasErrors && _react.default.createElement("div", {
56+
className: "invalid-feedback"
57+
}, renderErrors(errors[inputKey])), props.description && _react.default.createElement("div", {
58+
className: "form-input__description"
59+
}, props.description));
60+
}
61+
62+
FormControl.defaultProps = {
63+
children: undefined,
64+
description: '',
65+
displayErrorText: true,
66+
errors: {},
67+
inputClassName: '',
68+
inputKey: null
69+
};

‎lib/FormControl/FormControl.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import '../../scss/theme';
2+
3+
.FormControl {
4+
.invalid-feedback {
5+
font-size: 100%;
6+
7+
&__list {
8+
@include ui-remove-list-styles();
9+
}
10+
11+
.is-invalid ~ & {
12+
display: block; // Don't require form-control to show invalid feedback next to is-invalid
13+
}
14+
}
15+
}

‎lib/FormGroup/FormGroup.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = FormGroup;
7+
8+
var _react = _interopRequireDefault(require("react"));
9+
10+
var _classnames = _interopRequireDefault(require("classnames"));
11+
12+
var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
13+
14+
var _FormLabel = _interopRequireDefault(require("../FormLabel/FormLabel"));
15+
16+
require("./FormGroup.scss");
17+
18+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19+
20+
function FormGroup(props) {
21+
return _react.default.createElement("div", {
22+
className: (0, _classnames.default)('FormGroup', props.className),
23+
id: props.id
24+
}, props.label && _react.default.createElement(_FormLabel.default, {
25+
className: props.labelClassName,
26+
labelHtmlFor: props.labelHtmlFor,
27+
legend: props.legend,
28+
required: props.required,
29+
text: props.label
30+
}), _react.default.createElement(_FormControl.default, {
31+
description: props.description,
32+
displayErrorText: props.displayErrorText,
33+
errors: props.errors,
34+
inputClassName: props.inputClassName,
35+
inputKey: props.inputKey
36+
}, props.children));
37+
}
38+
39+
FormGroup.defaultProps = {
40+
children: undefined,
41+
className: '',
42+
description: '',
43+
displayErrorText: true,
44+
errors: {},
45+
inputClassName: '',
46+
inputKey: null,
47+
label: '',
48+
labelClassName: '',
49+
labelHtmlFor: '',
50+
legend: undefined,
51+
required: false
52+
};

‎lib/FormGroup/FormGroup.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.FormGroup {
2+
margin: 1rem 0 0.5rem;
3+
}

‎lib/FormLabel/FormLabel.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = FormLabel;
7+
8+
var _react = _interopRequireDefault(require("react"));
9+
10+
var _classnames = _interopRequireDefault(require("classnames"));
11+
12+
require("./FormLabel.scss");
13+
14+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15+
16+
function FormLabel(props) {
17+
var className = props.className,
18+
labelHtmlFor = props.labelHtmlFor,
19+
legend = props.legend,
20+
required = props.required,
21+
text = props.text;
22+
var label = labelHtmlFor ? _react.default.createElement("label", {
23+
htmlFor: labelHtmlFor
24+
}, text) : _react.default.createElement("span", null, text);
25+
return _react.default.createElement("div", {
26+
className: (0, _classnames.default)('FormLabel', className)
27+
}, label, required && _react.default.createElement("span", {
28+
className: "helper-text"
29+
}, "\xA0(required)"), legend);
30+
}
31+
32+
FormLabel.defaultProps = {
33+
className: '',
34+
labelHtmlFor: '',
35+
legend: undefined,
36+
required: false
37+
};

‎lib/FormLabel/FormLabel.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import '../../scss/theme';
2+
3+
.FormLabel {
4+
@include font-type-200;
5+
font-weight: $headings-font-weight;
6+
margin-bottom: 0.5rem;
7+
8+
.helper-text {
9+
color: $ux-gray-400;
10+
}
11+
12+
label {
13+
margin-bottom: 0;
14+
}
15+
}

‎lib/index.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,30 @@ Object.defineProperty(exports, "Card", {
99
return _Card.default;
1010
}
1111
});
12+
Object.defineProperty(exports, "Form", {
13+
enumerable: true,
14+
get: function get() {
15+
return _Form.default;
16+
}
17+
});
18+
Object.defineProperty(exports, "FormControl", {
19+
enumerable: true,
20+
get: function get() {
21+
return _FormControl.default;
22+
}
23+
});
24+
Object.defineProperty(exports, "FormGroup", {
25+
enumerable: true,
26+
get: function get() {
27+
return _FormGroup.default;
28+
}
29+
});
30+
Object.defineProperty(exports, "FormLabel", {
31+
enumerable: true,
32+
get: function get() {
33+
return _FormLabel.default;
34+
}
35+
});
1236
Object.defineProperty(exports, "Pill", {
1337
enumerable: true,
1438
get: function get() {
@@ -18,6 +42,14 @@ Object.defineProperty(exports, "Pill", {
1842

1943
var _Card = _interopRequireDefault(require("./Card/Card"));
2044

45+
var _Form = _interopRequireDefault(require("./Form/Form"));
46+
47+
var _FormControl = _interopRequireDefault(require("./FormControl/FormControl"));
48+
49+
var _FormGroup = _interopRequireDefault(require("./FormGroup/FormGroup"));
50+
51+
var _FormLabel = _interopRequireDefault(require("./FormLabel/FormLabel"));
52+
2153
var _Pill = _interopRequireDefault(require("./Pill/Pill"));
2254

2355
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

‎scss/lists.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// This should be included directly on the ul element
2+
@mixin ui-remove-list-styles() {
3+
list-style-type: none;
4+
margin: 0;
5+
padding: 0;
6+
7+
li {
8+
margin: 0;
9+
}
10+
}

0 commit comments

Comments
 (0)