@elliemae/ds-form-layout-blocks 1.60.0 → 2.0.0-alpha.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/form-layout-block-item/DSFormLayoutBlockItem.js +30 -35
- package/cjs/form-layout-block-item/index.d.js +0 -1
- package/cjs/form-layout-block-item/index.js +3 -10
- package/cjs/form-layout-block-item/propTypes.js +1 -2
- package/cjs/form-layout-block-item/styles.js +55 -34
- package/cjs/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js +14 -17
- package/cjs/form-layout-checkbox-group/config/useValidateProps.js +6 -9
- package/cjs/form-layout-checkbox-group/defaultProps.js +1 -2
- package/cjs/form-layout-checkbox-group/index.d.js +0 -1
- package/cjs/form-layout-checkbox-group/index.js +3 -13
- package/cjs/form-layout-checkbox-group/propTypes.js +1 -2
- package/cjs/form-layout-checkbox-group/styles.js +26 -15
- package/cjs/index.d.js +0 -1
- package/cjs/index.js +6 -19
- package/esm/form-layout-block-item/DSFormLayoutBlockItem.js +27 -32
- package/esm/form-layout-block-item/index.d.js +0 -1
- package/esm/form-layout-block-item/index.js +0 -7
- package/esm/form-layout-block-item/propTypes.js +1 -2
- package/esm/form-layout-block-item/styles.js +55 -34
- package/esm/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js +7 -10
- package/esm/form-layout-checkbox-group/config/useValidateProps.js +5 -7
- package/esm/form-layout-checkbox-group/defaultProps.js +1 -2
- package/esm/form-layout-checkbox-group/index.d.js +0 -1
- package/esm/form-layout-checkbox-group/index.js +0 -10
- package/esm/form-layout-checkbox-group/propTypes.js +1 -2
- package/esm/form-layout-checkbox-group/styles.js +26 -15
- package/esm/index.d.js +0 -1
- package/esm/index.js +0 -13
- package/package.json +69 -11
- package/types/form-layout-block-item/DSFormLayoutBlockItem.d.ts +77 -0
- package/types/form-layout-block-item/index.d.d.ts +35 -0
- package/types/form-layout-block-item/index.d.ts +1 -0
- package/types/form-layout-block-item/propTypes.d.ts +66 -0
- package/types/form-layout-block-item/styles.d.ts +6 -0
- package/types/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.d.ts +20 -0
- package/types/form-layout-checkbox-group/config/useValidateProps.d.ts +2 -0
- package/types/form-layout-checkbox-group/defaultProps.d.ts +3 -0
- package/types/form-layout-checkbox-group/index.d.d.ts +10 -0
- package/types/form-layout-checkbox-group/index.d.ts +1 -0
- package/types/form-layout-checkbox-group/propTypes.d.ts +9 -0
- package/types/form-layout-checkbox-group/styles.d.ts +2 -0
- package/types/index.d.ts +2 -0
- package/cjs/form-layout-block-item/DSFormLayoutBlockItem.js.map +0 -1
- package/cjs/form-layout-block-item/index.d.js.map +0 -1
- package/cjs/form-layout-block-item/index.js.map +0 -1
- package/cjs/form-layout-block-item/propTypes.js.map +0 -1
- package/cjs/form-layout-block-item/styles.js.map +0 -1
- package/cjs/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js.map +0 -1
- package/cjs/form-layout-checkbox-group/config/useValidateProps.js.map +0 -1
- package/cjs/form-layout-checkbox-group/defaultProps.js.map +0 -1
- package/cjs/form-layout-checkbox-group/index.d.js.map +0 -1
- package/cjs/form-layout-checkbox-group/index.js.map +0 -1
- package/cjs/form-layout-checkbox-group/propTypes.js.map +0 -1
- package/cjs/form-layout-checkbox-group/styles.js.map +0 -1
- package/cjs/index.d.js.map +0 -1
- package/cjs/index.js.map +0 -1
- package/esm/form-layout-block-item/DSFormLayoutBlockItem.js.map +0 -1
- package/esm/form-layout-block-item/index.d.js.map +0 -1
- package/esm/form-layout-block-item/index.js.map +0 -1
- package/esm/form-layout-block-item/propTypes.js.map +0 -1
- package/esm/form-layout-block-item/styles.js.map +0 -1
- package/esm/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js.map +0 -1
- package/esm/form-layout-checkbox-group/config/useValidateProps.js.map +0 -1
- package/esm/form-layout-checkbox-group/defaultProps.js.map +0 -1
- package/esm/form-layout-checkbox-group/index.d.js.map +0 -1
- package/esm/form-layout-checkbox-group/index.js.map +0 -1
- package/esm/form-layout-checkbox-group/propTypes.js.map +0 -1
- package/esm/form-layout-checkbox-group/styles.js.map +0 -1
- package/esm/index.d.js.map +0 -1
- package/esm/index.js.map +0 -1
- package/form-layout-block-item/DSFormLayoutBlockItem/package.json +0 -10
- package/form-layout-block-item/package.json +0 -10
- package/form-layout-block-item/propTypes/package.json +0 -10
- package/form-layout-block-item/styles/package.json +0 -10
- package/form-layout-checkbox-group/DSFormLayoutCheckboxGroup/package.json +0 -10
- package/form-layout-checkbox-group/config/useValidateProps/package.json +0 -10
- package/form-layout-checkbox-group/defaultProps/package.json +0 -10
- package/form-layout-checkbox-group/package.json +0 -10
- package/form-layout-checkbox-group/propTypes/package.json +0 -10
- package/form-layout-checkbox-group/styles/package.json +0 -10
|
@@ -2,38 +2,35 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
5
6
|
var React = require('react');
|
|
6
7
|
var reactDesc = require('react-desc');
|
|
7
8
|
var uid = require('uid');
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
require('styled-components');
|
|
9
|
+
var propTypes = require('./propTypes.js');
|
|
10
|
+
var styles = require('./styles.js');
|
|
11
11
|
|
|
12
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return uid.uid(6);
|
|
35
|
-
}, []);
|
|
36
|
-
return /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.StyledContainer, {
|
|
16
|
+
const DSFormLayoutBlockItem = props => {
|
|
17
|
+
const {
|
|
18
|
+
label,
|
|
19
|
+
feedbackMessage,
|
|
20
|
+
validationMessage,
|
|
21
|
+
inputID,
|
|
22
|
+
children,
|
|
23
|
+
hasError,
|
|
24
|
+
leftLabel,
|
|
25
|
+
required,
|
|
26
|
+
optional,
|
|
27
|
+
hideLabel,
|
|
28
|
+
fitContent,
|
|
29
|
+
withHighlight,
|
|
30
|
+
isGroup = false
|
|
31
|
+
} = props;
|
|
32
|
+
const instanceUID = React.useMemo(() => uid.uid(6), []);
|
|
33
|
+
return /*#__PURE__*/_jsx__default["default"](styles.StyledContainer, {
|
|
37
34
|
leftLabel: leftLabel,
|
|
38
35
|
fitContent: fitContent,
|
|
39
36
|
hideLabel: hideLabel,
|
|
@@ -41,32 +38,30 @@ var DSFormLayoutBlockItem = function DSFormLayoutBlockItem(props) {
|
|
|
41
38
|
as: isGroup ? 'fieldset' : 'div',
|
|
42
39
|
isGroup: isGroup,
|
|
43
40
|
"aria-describedby": "".concat(inputID || instanceUID, "_feedback_message")
|
|
44
|
-
}, /*#__PURE__*/
|
|
41
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledLabel, {
|
|
45
42
|
htmlFor: inputID,
|
|
46
43
|
leftLabel: leftLabel,
|
|
47
44
|
hideLabel: hideLabel,
|
|
48
45
|
"aria-hidden": isGroup
|
|
49
|
-
}, label, (required || optional) && /*#__PURE__*/
|
|
46
|
+
}, void 0, label, (required || optional) && /*#__PURE__*/_jsx__default["default"](styles.StyledMark, {
|
|
50
47
|
required: required
|
|
51
|
-
})), isGroup && /*#__PURE__*/
|
|
48
|
+
})), isGroup && /*#__PURE__*/_jsx__default["default"](styles.ScreenReaderOnly, {
|
|
52
49
|
as: "legend"
|
|
53
|
-
}, label), children, feedbackMessage && !hasError && /*#__PURE__*/
|
|
50
|
+
}, void 0, label), children, feedbackMessage && !hasError && /*#__PURE__*/_jsx__default["default"](styles.StyledMessage, {
|
|
54
51
|
leftLabel: leftLabel,
|
|
55
52
|
hideLabel: hideLabel,
|
|
56
53
|
"aria-hidden": isGroup,
|
|
57
54
|
id: "".concat(inputID || instanceUID, "_feedback_message")
|
|
58
|
-
}, feedbackMessage), validationMessage && hasError && /*#__PURE__*/
|
|
55
|
+
}, void 0, feedbackMessage), validationMessage && hasError && /*#__PURE__*/_jsx__default["default"](styles.StyledMessage, {
|
|
59
56
|
hasError: hasError,
|
|
60
57
|
leftLabel: leftLabel,
|
|
61
58
|
hideLabel: hideLabel,
|
|
62
59
|
role: "alert"
|
|
63
|
-
}, validationMessage));
|
|
60
|
+
}, void 0, validationMessage));
|
|
64
61
|
};
|
|
65
62
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
DSFormLayoutBlockItemWithSchema.propTypes = formLayoutBlockItem_propTypes.propTypes;
|
|
63
|
+
const DSFormLayoutBlockItemWithSchema = reactDesc.describe(DSFormLayoutBlockItem);
|
|
64
|
+
DSFormLayoutBlockItemWithSchema.propTypes = propTypes.propTypes;
|
|
69
65
|
|
|
70
66
|
exports.DSFormLayoutBlockItem = DSFormLayoutBlockItem;
|
|
71
67
|
exports.DSFormLayoutBlockItemWithSchema = DSFormLayoutBlockItemWithSchema;
|
|
72
|
-
//# sourceMappingURL=DSFormLayoutBlockItem.js.map
|
|
@@ -2,16 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
require('react');
|
|
7
|
-
require('react-desc');
|
|
8
|
-
require('uid');
|
|
9
|
-
require('./propTypes.js');
|
|
10
|
-
require('./styles.js');
|
|
11
|
-
require('styled-components');
|
|
5
|
+
var DSFormLayoutBlockItem = require('./DSFormLayoutBlockItem.js');
|
|
12
6
|
|
|
13
7
|
|
|
14
8
|
|
|
15
|
-
exports.DSFormLayoutBlockItem =
|
|
16
|
-
exports.DSFormLayoutBlockItemWithSchema =
|
|
17
|
-
//# sourceMappingURL=index.js.map
|
|
9
|
+
exports.DSFormLayoutBlockItem = DSFormLayoutBlockItem.DSFormLayoutBlockItem;
|
|
10
|
+
exports.DSFormLayoutBlockItemWithSchema = DSFormLayoutBlockItem.DSFormLayoutBlockItemWithSchema;
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var reactDesc = require('react-desc');
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
const propTypes = {
|
|
8
8
|
children: reactDesc.PropTypes.node.isRequired.description('Input component. '),
|
|
9
9
|
label: reactDesc.PropTypes.string.isRequired.description('Label property for the input component. This property is required for accesibility purposes.'),
|
|
10
10
|
inputID: reactDesc.PropTypes.string.isRequired.description("String that matches the input component's id. This property is required for accesibility purposes."),
|
|
@@ -21,4 +21,3 @@ var propTypes = {
|
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
exports.propTypes = propTypes;
|
|
24
|
-
//# sourceMappingURL=propTypes.js.map
|
|
@@ -8,58 +8,80 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
8
8
|
|
|
9
9
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
12
12
|
componentId: "sc-196zgtg-0"
|
|
13
|
-
})(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""],
|
|
14
|
-
|
|
13
|
+
})(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""], _ref => {
|
|
14
|
+
let {
|
|
15
|
+
fitContent
|
|
16
|
+
} = _ref;
|
|
15
17
|
return fitContent ? 'width: fit-content;' : undefined;
|
|
16
|
-
},
|
|
17
|
-
|
|
18
|
+
}, _ref2 => {
|
|
19
|
+
let {
|
|
20
|
+
isGroup
|
|
21
|
+
} = _ref2;
|
|
18
22
|
return isGroup ? 'border: none' : '';
|
|
19
|
-
},
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
}, _ref3 => {
|
|
24
|
+
let {
|
|
25
|
+
leftLabel,
|
|
26
|
+
hideLabel
|
|
27
|
+
} = _ref3;
|
|
22
28
|
return leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined;
|
|
23
|
-
},
|
|
24
|
-
|
|
25
|
-
|
|
29
|
+
}, _ref4 => {
|
|
30
|
+
let {
|
|
31
|
+
theme,
|
|
32
|
+
withHighlight
|
|
33
|
+
} = _ref4;
|
|
26
34
|
return withHighlight ? "\n &::after {\n position: absolute;\n content: '';\n left: -".concat(theme.space.xxs, ";\n top: -").concat(theme.space.xxxs, ";\n z-index: -1;\n width: calc(100% + ").concat(theme.space.xs, ");\n height: calc(100% + ").concat(theme.space.xxs, ");\n background-color: #FEFBEE;\n border : 1px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 1px 3px 0 rgba(0,0,0,0.35);\n }\n &:hover, \n &:focus-within {\n &::after {\n position: absolute;\n content: '';\n left: -").concat(theme.space.xxs, ";\n top: -").concat(theme.space.xxxs, ";\n z-index: -1;\n width: calc(100% + ").concat(theme.space.xs, ");\n height: calc(100% + ").concat(theme.space.xxs, ");\n background-color: #FFF9D3;\n border : 1px solid #8F6326;\n border-radius : 4px;\n box-shadow: 0 6px 10px 0 rgba(0,0,0,0.30);\n }\n }\n ") : undefined;
|
|
27
35
|
});
|
|
28
|
-
|
|
36
|
+
const StyledLabel = /*#__PURE__*/styled__default["default"].label.withConfig({
|
|
29
37
|
componentId: "sc-196zgtg-1"
|
|
30
|
-
})(["display:flex;", " ", ""],
|
|
31
|
-
|
|
32
|
-
|
|
38
|
+
})(["display:flex;", " ", ""], _ref5 => {
|
|
39
|
+
let {
|
|
40
|
+
theme,
|
|
41
|
+
leftLabel
|
|
42
|
+
} = _ref5;
|
|
33
43
|
return leftLabel ? "padding-right: ".concat(theme.space.xxs, ";") : undefined;
|
|
34
|
-
},
|
|
35
|
-
|
|
44
|
+
}, _ref6 => {
|
|
45
|
+
let {
|
|
46
|
+
hideLabel
|
|
47
|
+
} = _ref6;
|
|
36
48
|
return hideLabel ? "position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n " : undefined;
|
|
37
49
|
});
|
|
38
|
-
|
|
50
|
+
const StyledMessage = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
39
51
|
componentId: "sc-196zgtg-2"
|
|
40
|
-
})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""],
|
|
41
|
-
|
|
52
|
+
})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], _ref7 => {
|
|
53
|
+
let {
|
|
54
|
+
theme
|
|
55
|
+
} = _ref7;
|
|
42
56
|
return theme.fontSizes.microText[200];
|
|
43
|
-
},
|
|
44
|
-
|
|
45
|
-
|
|
57
|
+
}, _ref8 => {
|
|
58
|
+
let {
|
|
59
|
+
theme,
|
|
60
|
+
hasError
|
|
61
|
+
} = _ref8;
|
|
46
62
|
return hasError ? theme.colors.danger[900] : theme.colors.neutral[500];
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
|
|
63
|
+
}, _ref9 => {
|
|
64
|
+
let {
|
|
65
|
+
leftLabel,
|
|
66
|
+
hideLabel
|
|
67
|
+
} = _ref9;
|
|
50
68
|
return leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined;
|
|
51
69
|
});
|
|
52
|
-
|
|
70
|
+
const StyledMark = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
53
71
|
componentId: "sc-196zgtg-3"
|
|
54
|
-
})(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""],
|
|
55
|
-
|
|
72
|
+
})(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], _ref10 => {
|
|
73
|
+
let {
|
|
74
|
+
theme
|
|
75
|
+
} = _ref10;
|
|
56
76
|
return theme.space.xxxs;
|
|
57
|
-
},
|
|
58
|
-
|
|
59
|
-
|
|
77
|
+
}, _ref11 => {
|
|
78
|
+
let {
|
|
79
|
+
theme,
|
|
80
|
+
required
|
|
81
|
+
} = _ref11;
|
|
60
82
|
return required ? "\n background-color: ".concat(theme.colors.danger[900], ";\n ") : "\n border: 1px solid ".concat(theme.colors.brand[600], ";\n ");
|
|
61
83
|
});
|
|
62
|
-
|
|
84
|
+
const ScreenReaderOnly = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
63
85
|
componentId: "sc-196zgtg-4"
|
|
64
86
|
})(["clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;"]);
|
|
65
87
|
|
|
@@ -68,4 +90,3 @@ exports.StyledContainer = StyledContainer;
|
|
|
68
90
|
exports.StyledLabel = StyledLabel;
|
|
69
91
|
exports.StyledMark = StyledMark;
|
|
70
92
|
exports.StyledMessage = StyledMessage;
|
|
71
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -2,32 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('react');
|
|
6
7
|
var reactDesc = require('react-desc');
|
|
7
8
|
var dsPropsHelpers = require('@elliemae/ds-props-helpers');
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
require('styled-components');
|
|
13
|
-
require('@babel/runtime/helpers/typeof');
|
|
9
|
+
var propTypes = require('./propTypes.js');
|
|
10
|
+
var styles = require('./styles.js');
|
|
11
|
+
var defaultProps = require('./defaultProps.js');
|
|
12
|
+
var useValidateProps = require('./config/useValidateProps.js');
|
|
14
13
|
|
|
15
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
15
|
|
|
17
|
-
var
|
|
16
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
18
17
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
return /*#__PURE__*/
|
|
18
|
+
const DSFormLayoutCheckboxGroup = props => {
|
|
19
|
+
useValidateProps.useValidateProps(props);
|
|
20
|
+
const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
|
|
21
|
+
return /*#__PURE__*/_jsx__default["default"](styles.StyledContainer, {
|
|
23
22
|
direction: propsWithDefault.direction
|
|
24
|
-
}, propsWithDefault.children);
|
|
23
|
+
}, void 0, propsWithDefault.children);
|
|
25
24
|
};
|
|
26
25
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
DSFormLayoutCheckboxGroupWithSchema.propTypes = formLayoutCheckboxGroup_propTypes.propTypes;
|
|
26
|
+
const DSFormLayoutCheckboxGroupWithSchema = reactDesc.describe(DSFormLayoutCheckboxGroup);
|
|
27
|
+
DSFormLayoutCheckboxGroupWithSchema.propTypes = propTypes.propTypes;
|
|
30
28
|
|
|
31
29
|
exports.DSFormLayoutCheckboxGroup = DSFormLayoutCheckboxGroup;
|
|
32
30
|
exports.DSFormLayoutCheckboxGroupWithSchema = DSFormLayoutCheckboxGroupWithSchema;
|
|
33
|
-
//# sourceMappingURL=DSFormLayoutCheckboxGroup.js.map
|
|
@@ -2,38 +2,35 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var _typeof = require('@babel/runtime/helpers/typeof');
|
|
6
5
|
var React = require('react');
|
|
7
6
|
|
|
8
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
8
|
|
|
10
|
-
var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
|
|
11
9
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
10
|
|
|
13
|
-
|
|
11
|
+
const getVariableType = arg => {
|
|
14
12
|
if (Array.isArray(arg)) return 'array';
|
|
15
13
|
if (arg === null) return 'null';
|
|
16
14
|
if (arg === undefined) return 'undefined';
|
|
17
|
-
return
|
|
15
|
+
return typeof arg;
|
|
18
16
|
};
|
|
19
17
|
|
|
20
|
-
|
|
18
|
+
const throwCheckboxGroupDirectionError = invalidProp => {
|
|
21
19
|
throw new Error("You are trying to pass a not valid \"direction\" property value for a checkbox group, please provide a valid type.\n\n Received: ".concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n Expected: \"horizontal\" or \"vertical\" (string)\n "));
|
|
22
20
|
};
|
|
23
21
|
|
|
24
|
-
|
|
22
|
+
const throwCheckboxGroupChildrenError = () => {
|
|
25
23
|
throw new Error("You are trying to use a checkbox group without any React children, please provide at least one children to use.\n \n Received: (null)\n Expected: React children\n ");
|
|
26
24
|
};
|
|
27
25
|
|
|
28
|
-
|
|
26
|
+
const useValidateProps = props => {
|
|
29
27
|
if (props.direction !== undefined && props.direction !== 'vertical' && props.direction !== 'horizontal') {
|
|
30
28
|
throwCheckboxGroupDirectionError(props.direction);
|
|
31
29
|
}
|
|
32
30
|
|
|
33
|
-
if (!React__default[
|
|
31
|
+
if (!React__default["default"].Children.count(props.children)) {
|
|
34
32
|
throwCheckboxGroupChildrenError();
|
|
35
33
|
}
|
|
36
34
|
};
|
|
37
35
|
|
|
38
36
|
exports.useValidateProps = useValidateProps;
|
|
39
|
-
//# sourceMappingURL=useValidateProps.js.map
|
|
@@ -2,19 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
require('react');
|
|
7
|
-
require('react-desc');
|
|
8
|
-
require('@elliemae/ds-props-helpers');
|
|
9
|
-
require('./propTypes.js');
|
|
10
|
-
require('./styles.js');
|
|
11
|
-
require('styled-components');
|
|
12
|
-
require('./defaultProps.js');
|
|
13
|
-
require('./config/useValidateProps.js');
|
|
14
|
-
require('@babel/runtime/helpers/typeof');
|
|
5
|
+
var DSFormLayoutCheckboxGroup = require('./DSFormLayoutCheckboxGroup.js');
|
|
15
6
|
|
|
16
7
|
|
|
17
8
|
|
|
18
|
-
exports.DSFormLayoutCheckboxGroup =
|
|
19
|
-
exports.DSFormLayoutCheckboxGroupWithSchema =
|
|
20
|
-
//# sourceMappingURL=index.js.map
|
|
9
|
+
exports.DSFormLayoutCheckboxGroup = DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroup;
|
|
10
|
+
exports.DSFormLayoutCheckboxGroupWithSchema = DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroupWithSchema;
|
|
@@ -4,9 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var reactDesc = require('react-desc');
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
const propTypes = {
|
|
8
8
|
direction: reactDesc.PropTypes.oneOf(['horizontal', 'vertical']).description('Set direction for the checkbox group.')
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
exports.propTypes = propTypes;
|
|
12
|
-
//# sourceMappingURL=propTypes.js.map
|
|
@@ -8,28 +8,39 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
8
8
|
|
|
9
9
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
12
12
|
componentId: "sc-1wopk9q-0"
|
|
13
|
-
})(["display:inline-flex;flex-wrap:wrap;flex-direction:", ";margin-left:", ";margin-right:", ";margin-top:", ";& div{padding:0;margin-bottom:", ";}& div:not(:last-child){margin-right:", ";}"],
|
|
14
|
-
|
|
13
|
+
})(["display:inline-flex;flex-wrap:wrap;flex-direction:", ";margin-left:", ";margin-right:", ";margin-top:", ";& div{padding:0;margin-bottom:", ";}& div:not(:last-child){margin-right:", ";}"], _ref => {
|
|
14
|
+
let {
|
|
15
|
+
direction
|
|
16
|
+
} = _ref;
|
|
15
17
|
return direction === 'horizontal' ? 'row' : 'column';
|
|
16
|
-
},
|
|
17
|
-
|
|
18
|
+
}, _ref2 => {
|
|
19
|
+
let {
|
|
20
|
+
theme
|
|
21
|
+
} = _ref2;
|
|
18
22
|
return theme.space.xs;
|
|
19
|
-
},
|
|
20
|
-
|
|
23
|
+
}, _ref3 => {
|
|
24
|
+
let {
|
|
25
|
+
theme
|
|
26
|
+
} = _ref3;
|
|
21
27
|
return theme.space.xs;
|
|
22
|
-
},
|
|
23
|
-
|
|
28
|
+
}, _ref4 => {
|
|
29
|
+
let {
|
|
30
|
+
theme
|
|
31
|
+
} = _ref4;
|
|
24
32
|
return theme.space.xxs;
|
|
25
|
-
},
|
|
26
|
-
|
|
33
|
+
}, _ref5 => {
|
|
34
|
+
let {
|
|
35
|
+
theme
|
|
36
|
+
} = _ref5;
|
|
27
37
|
return theme.space.xxs;
|
|
28
|
-
},
|
|
29
|
-
|
|
30
|
-
|
|
38
|
+
}, _ref6 => {
|
|
39
|
+
let {
|
|
40
|
+
theme,
|
|
41
|
+
direction
|
|
42
|
+
} = _ref6;
|
|
31
43
|
return direction === 'horizontal' ? theme.space.s : '0';
|
|
32
44
|
});
|
|
33
45
|
|
|
34
46
|
exports.StyledContainer = StyledContainer;
|
|
35
|
-
//# sourceMappingURL=styles.js.map
|
package/cjs/index.d.js
CHANGED
package/cjs/index.js
CHANGED
|
@@ -2,25 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
require('react');
|
|
8
|
-
require('react-desc');
|
|
9
|
-
require('uid');
|
|
10
|
-
require('./form-layout-block-item/propTypes.js');
|
|
11
|
-
require('./form-layout-block-item/styles.js');
|
|
12
|
-
require('styled-components');
|
|
13
|
-
require('@elliemae/ds-props-helpers');
|
|
14
|
-
require('./form-layout-checkbox-group/propTypes.js');
|
|
15
|
-
require('./form-layout-checkbox-group/styles.js');
|
|
16
|
-
require('./form-layout-checkbox-group/defaultProps.js');
|
|
17
|
-
require('./form-layout-checkbox-group/config/useValidateProps.js');
|
|
18
|
-
require('@babel/runtime/helpers/typeof');
|
|
5
|
+
var DSFormLayoutBlockItem = require('./form-layout-block-item/DSFormLayoutBlockItem.js');
|
|
6
|
+
var DSFormLayoutCheckboxGroup = require('./form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js');
|
|
19
7
|
|
|
20
8
|
|
|
21
9
|
|
|
22
|
-
exports.DSFormLayoutBlockItem =
|
|
23
|
-
exports.DSFormLayoutBlockItemWithSchema =
|
|
24
|
-
exports.DSFormLayoutCheckboxGroup =
|
|
25
|
-
exports.DSFormLayoutCheckboxGroupWithSchema =
|
|
26
|
-
//# sourceMappingURL=index.js.map
|
|
10
|
+
exports.DSFormLayoutBlockItem = DSFormLayoutBlockItem.DSFormLayoutBlockItem;
|
|
11
|
+
exports.DSFormLayoutBlockItemWithSchema = DSFormLayoutBlockItem.DSFormLayoutBlockItemWithSchema;
|
|
12
|
+
exports.DSFormLayoutCheckboxGroup = DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroup;
|
|
13
|
+
exports.DSFormLayoutCheckboxGroupWithSchema = DSFormLayoutCheckboxGroup.DSFormLayoutCheckboxGroupWithSchema;
|
|
@@ -1,31 +1,28 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import { useMemo } from 'react';
|
|
2
3
|
import { describe } from 'react-desc';
|
|
3
4
|
import { uid } from 'uid';
|
|
4
5
|
import { propTypes } from './propTypes.js';
|
|
5
6
|
import { StyledContainer, StyledLabel, StyledMark, ScreenReaderOnly, StyledMessage } from './styles.js';
|
|
6
|
-
import 'styled-components';
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
return uid(6);
|
|
27
|
-
}, []);
|
|
28
|
-
return /*#__PURE__*/React.createElement(StyledContainer, {
|
|
8
|
+
const DSFormLayoutBlockItem = props => {
|
|
9
|
+
const {
|
|
10
|
+
label,
|
|
11
|
+
feedbackMessage,
|
|
12
|
+
validationMessage,
|
|
13
|
+
inputID,
|
|
14
|
+
children,
|
|
15
|
+
hasError,
|
|
16
|
+
leftLabel,
|
|
17
|
+
required,
|
|
18
|
+
optional,
|
|
19
|
+
hideLabel,
|
|
20
|
+
fitContent,
|
|
21
|
+
withHighlight,
|
|
22
|
+
isGroup = false
|
|
23
|
+
} = props;
|
|
24
|
+
const instanceUID = useMemo(() => uid(6), []);
|
|
25
|
+
return /*#__PURE__*/_jsx(StyledContainer, {
|
|
29
26
|
leftLabel: leftLabel,
|
|
30
27
|
fitContent: fitContent,
|
|
31
28
|
hideLabel: hideLabel,
|
|
@@ -33,31 +30,29 @@ var DSFormLayoutBlockItem = function DSFormLayoutBlockItem(props) {
|
|
|
33
30
|
as: isGroup ? 'fieldset' : 'div',
|
|
34
31
|
isGroup: isGroup,
|
|
35
32
|
"aria-describedby": "".concat(inputID || instanceUID, "_feedback_message")
|
|
36
|
-
}, /*#__PURE__*/
|
|
33
|
+
}, void 0, /*#__PURE__*/_jsx(StyledLabel, {
|
|
37
34
|
htmlFor: inputID,
|
|
38
35
|
leftLabel: leftLabel,
|
|
39
36
|
hideLabel: hideLabel,
|
|
40
37
|
"aria-hidden": isGroup
|
|
41
|
-
}, label, (required || optional) && /*#__PURE__*/
|
|
38
|
+
}, void 0, label, (required || optional) && /*#__PURE__*/_jsx(StyledMark, {
|
|
42
39
|
required: required
|
|
43
|
-
})), isGroup && /*#__PURE__*/
|
|
40
|
+
})), isGroup && /*#__PURE__*/_jsx(ScreenReaderOnly, {
|
|
44
41
|
as: "legend"
|
|
45
|
-
}, label), children, feedbackMessage && !hasError && /*#__PURE__*/
|
|
42
|
+
}, void 0, label), children, feedbackMessage && !hasError && /*#__PURE__*/_jsx(StyledMessage, {
|
|
46
43
|
leftLabel: leftLabel,
|
|
47
44
|
hideLabel: hideLabel,
|
|
48
45
|
"aria-hidden": isGroup,
|
|
49
46
|
id: "".concat(inputID || instanceUID, "_feedback_message")
|
|
50
|
-
}, feedbackMessage), validationMessage && hasError && /*#__PURE__*/
|
|
47
|
+
}, void 0, feedbackMessage), validationMessage && hasError && /*#__PURE__*/_jsx(StyledMessage, {
|
|
51
48
|
hasError: hasError,
|
|
52
49
|
leftLabel: leftLabel,
|
|
53
50
|
hideLabel: hideLabel,
|
|
54
51
|
role: "alert"
|
|
55
|
-
}, validationMessage));
|
|
52
|
+
}, void 0, validationMessage));
|
|
56
53
|
};
|
|
57
54
|
|
|
58
|
-
|
|
59
|
-
var DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);
|
|
55
|
+
const DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);
|
|
60
56
|
DSFormLayoutBlockItemWithSchema.propTypes = propTypes;
|
|
61
57
|
|
|
62
58
|
export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };
|
|
63
|
-
//# sourceMappingURL=DSFormLayoutBlockItem.js.map
|
|
@@ -1,8 +1 @@
|
|
|
1
1
|
export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema } from './DSFormLayoutBlockItem.js';
|
|
2
|
-
import 'react';
|
|
3
|
-
import 'react-desc';
|
|
4
|
-
import 'uid';
|
|
5
|
-
import './propTypes.js';
|
|
6
|
-
import './styles.js';
|
|
7
|
-
import 'styled-components';
|
|
8
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { PropTypes } from 'react-desc';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
const propTypes = {
|
|
4
4
|
children: PropTypes.node.isRequired.description('Input component. '),
|
|
5
5
|
label: PropTypes.string.isRequired.description('Label property for the input component. This property is required for accesibility purposes.'),
|
|
6
6
|
inputID: PropTypes.string.isRequired.description("String that matches the input component's id. This property is required for accesibility purposes."),
|
|
@@ -17,4 +17,3 @@ var propTypes = {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
export { propTypes };
|
|
20
|
-
//# sourceMappingURL=propTypes.js.map
|