@elliemae/ds-form-layout-blocks 1.54.0-rc.6 → 1.55.0-next.10
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 +28 -8
- package/cjs/form-layout-block-item/DSFormLayoutBlockItem.js.map +1 -1
- package/cjs/form-layout-block-item/index.js +1 -0
- package/cjs/form-layout-block-item/index.js.map +1 -1
- package/cjs/form-layout-block-item/propTypes.js +3 -2
- package/cjs/form-layout-block-item/propTypes.js.map +1 -1
- package/cjs/form-layout-block-item/styles.js +31 -24
- package/cjs/form-layout-block-item/styles.js.map +1 -1
- package/cjs/index.js +1 -0
- package/cjs/index.js.map +1 -1
- package/esm/form-layout-block-item/DSFormLayoutBlockItem.js +30 -10
- package/esm/form-layout-block-item/DSFormLayoutBlockItem.js.map +1 -1
- package/esm/form-layout-block-item/index.js +1 -0
- package/esm/form-layout-block-item/index.js.map +1 -1
- package/esm/form-layout-block-item/propTypes.js +3 -2
- package/esm/form-layout-block-item/propTypes.js.map +1 -1
- package/esm/form-layout-block-item/styles.js +31 -25
- package/esm/form-layout-block-item/styles.js.map +1 -1
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var reactDesc = require('react-desc');
|
|
7
|
+
var uid = require('uid');
|
|
7
8
|
var formLayoutBlockItem_propTypes = require('./propTypes.js');
|
|
8
9
|
var formLayoutBlockItem_styles = require('./styles.js');
|
|
9
10
|
require('styled-components');
|
|
@@ -12,11 +13,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
13
|
|
|
13
14
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
15
|
|
|
16
|
+
/* eslint-disable complexity */
|
|
17
|
+
|
|
15
18
|
var DSFormLayoutBlockItem = function DSFormLayoutBlockItem(props) {
|
|
16
19
|
var label = props.label,
|
|
17
20
|
feedbackMessage = props.feedbackMessage,
|
|
18
21
|
validationMessage = props.validationMessage,
|
|
19
|
-
|
|
22
|
+
inputID = props.inputID,
|
|
20
23
|
children = props.children,
|
|
21
24
|
hasError = props.hasError,
|
|
22
25
|
leftLabel = props.leftLabel,
|
|
@@ -24,23 +27,40 @@ var DSFormLayoutBlockItem = function DSFormLayoutBlockItem(props) {
|
|
|
24
27
|
optional = props.optional,
|
|
25
28
|
hideLabel = props.hideLabel,
|
|
26
29
|
fitContent = props.fitContent,
|
|
27
|
-
withHighlight = props.withHighlight
|
|
30
|
+
withHighlight = props.withHighlight,
|
|
31
|
+
_props$isGroup = props.isGroup,
|
|
32
|
+
isGroup = _props$isGroup === void 0 ? false : _props$isGroup;
|
|
33
|
+
var instanceUID = React.useMemo(function () {
|
|
34
|
+
return uid.uid(6);
|
|
35
|
+
}, []);
|
|
28
36
|
return /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.StyledContainer, {
|
|
29
37
|
leftLabel: leftLabel,
|
|
30
38
|
fitContent: fitContent,
|
|
31
39
|
hideLabel: hideLabel,
|
|
32
|
-
withHighlight: withHighlight
|
|
40
|
+
withHighlight: withHighlight,
|
|
41
|
+
as: isGroup ? 'fieldset' : 'div',
|
|
42
|
+
isGroup: isGroup,
|
|
43
|
+
"aria-describedby": "".concat(inputID || instanceUID, "_feedback_message")
|
|
33
44
|
}, /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.StyledLabel, {
|
|
34
|
-
htmlFor:
|
|
45
|
+
htmlFor: inputID,
|
|
35
46
|
leftLabel: leftLabel,
|
|
36
|
-
hideLabel: hideLabel
|
|
47
|
+
hideLabel: hideLabel,
|
|
48
|
+
"aria-hidden": isGroup
|
|
37
49
|
}, label, (required || optional) && /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.StyledMark, {
|
|
38
50
|
required: required
|
|
39
|
-
})),
|
|
51
|
+
})), isGroup && /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.ScreenReaderOnly, {
|
|
52
|
+
as: "legend"
|
|
53
|
+
}, label), children, feedbackMessage && !hasError && /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.StyledMessage, {
|
|
54
|
+
leftLabel: leftLabel,
|
|
55
|
+
hideLabel: hideLabel,
|
|
56
|
+
"aria-hidden": isGroup,
|
|
57
|
+
id: "".concat(inputID || instanceUID, "_feedback_message")
|
|
58
|
+
}, feedbackMessage), validationMessage && hasError && /*#__PURE__*/React__default['default'].createElement(formLayoutBlockItem_styles.StyledMessage, {
|
|
40
59
|
hasError: hasError,
|
|
41
60
|
leftLabel: leftLabel,
|
|
42
|
-
hideLabel: hideLabel
|
|
43
|
-
|
|
61
|
+
hideLabel: hideLabel,
|
|
62
|
+
role: "alert"
|
|
63
|
+
}, validationMessage));
|
|
44
64
|
};
|
|
45
65
|
|
|
46
66
|
DSFormLayoutBlockItem.propTypes = formLayoutBlockItem_propTypes.propTypes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DSFormLayoutBlockItem.js","sources":["../../../src/form-layout-block-item/DSFormLayoutBlockItem.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"DSFormLayoutBlockItem.js","sources":["../../../src/form-layout-block-item/DSFormLayoutBlockItem.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { useMemo } from 'react';\nimport { describe } from 'react-desc';\nimport { uid } from 'uid';\nimport type { DSFormLayoutBlockItemPropsT as Props } from './index.d';\nimport { propTypes } from './propTypes';\nimport { StyledMessage, StyledLabel, StyledContainer, StyledMark, ScreenReaderOnly } from './styles';\n\nconst DSFormLayoutBlockItem = (props: Props): JSX.Element => {\n const {\n label,\n feedbackMessage,\n validationMessage,\n inputID,\n children,\n hasError,\n leftLabel,\n required,\n optional,\n hideLabel,\n fitContent,\n withHighlight,\n isGroup = false,\n } = props;\n\n const instanceUID = useMemo(() => uid(6), []);\n\n return (\n <StyledContainer\n leftLabel={leftLabel}\n fitContent={fitContent}\n hideLabel={hideLabel}\n withHighlight={withHighlight}\n as={isGroup ? 'fieldset' : 'div'}\n isGroup={isGroup}\n aria-describedby={`${inputID || instanceUID}_feedback_message`}\n >\n <StyledLabel htmlFor={inputID} leftLabel={leftLabel} hideLabel={hideLabel} aria-hidden={isGroup}>\n {label}\n {(required || optional) && <StyledMark required={required} />}\n </StyledLabel>\n {isGroup && <ScreenReaderOnly as=\"legend\">{label}</ScreenReaderOnly>}\n {children}\n {feedbackMessage && !hasError && (\n <StyledMessage\n leftLabel={leftLabel}\n hideLabel={hideLabel}\n aria-hidden={isGroup}\n id={`${inputID || instanceUID}_feedback_message`}\n >\n {feedbackMessage}\n </StyledMessage>\n )}\n {validationMessage && hasError && (\n <StyledMessage hasError={hasError} leftLabel={leftLabel} hideLabel={hideLabel} role=\"alert\">\n {validationMessage}\n </StyledMessage>\n )}\n </StyledContainer>\n );\n};\n\nDSFormLayoutBlockItem.propTypes = propTypes;\nconst DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);\nDSFormLayoutBlockItemWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };\n"],"names":["DSFormLayoutBlockItem","props","label","feedbackMessage","validationMessage","inputID","children","hasError","leftLabel","required","optional","hideLabel","fitContent","withHighlight","isGroup","instanceUID","useMemo","uid","React","StyledContainer","StyledLabel","StyledMark","ScreenReaderOnly","StyledMessage","propTypes","DSFormLayoutBlockItemWithSchema","describe"],"mappings":";;;;;;;;;;;;;;;AAAA;;IAQMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,KAAD,EAA+B;AAC3D,MACEC,KADF,GAcID,KAdJ,CACEC,KADF;AAAA,MAEEC,eAFF,GAcIF,KAdJ,CAEEE,eAFF;AAAA,MAGEC,iBAHF,GAcIH,KAdJ,CAGEG,iBAHF;AAAA,MAIEC,OAJF,GAcIJ,KAdJ,CAIEI,OAJF;AAAA,MAKEC,QALF,GAcIL,KAdJ,CAKEK,QALF;AAAA,MAMEC,QANF,GAcIN,KAdJ,CAMEM,QANF;AAAA,MAOEC,SAPF,GAcIP,KAdJ,CAOEO,SAPF;AAAA,MAQEC,QARF,GAcIR,KAdJ,CAQEQ,QARF;AAAA,MASEC,QATF,GAcIT,KAdJ,CASES,QATF;AAAA,MAUEC,SAVF,GAcIV,KAdJ,CAUEU,SAVF;AAAA,MAWEC,UAXF,GAcIX,KAdJ,CAWEW,UAXF;AAAA,MAYEC,aAZF,GAcIZ,KAdJ,CAYEY,aAZF;AAAA,uBAcIZ,KAdJ,CAaEa,OAbF;AAAA,MAaEA,OAbF,+BAaY,KAbZ;AAgBA,MAAMC,WAAW,GAAGC,aAAO,CAAC;AAAA,WAAMC,OAAG,CAAC,CAAD,CAAT;AAAA,GAAD,EAAe,EAAf,CAA3B;AAEA,sBACEC,wCAACC,0CAAD;AACE,IAAA,SAAS,EAAEX,SADb;AAEE,IAAA,UAAU,EAAEI,UAFd;AAGE,IAAA,SAAS,EAAED,SAHb;AAIE,IAAA,aAAa,EAAEE,aAJjB;AAKE,IAAA,EAAE,EAAEC,OAAO,GAAG,UAAH,GAAgB,KAL7B;AAME,IAAA,OAAO,EAAEA,OANX;AAOE,kCAAqBT,OAAO,IAAIU,WAAhC;AAPF,kBASEG,wCAACE,sCAAD;AAAa,IAAA,OAAO,EAAEf,OAAtB;AAA+B,IAAA,SAAS,EAAEG,SAA1C;AAAqD,IAAA,SAAS,EAAEG,SAAhE;AAA2E,mBAAaG;AAAxF,KACGZ,KADH,EAEG,CAACO,QAAQ,IAAIC,QAAb,kBAA0BQ,wCAACG,qCAAD;AAAY,IAAA,QAAQ,EAAEZ;AAAtB,IAF7B,CATF,EAaGK,OAAO,iBAAII,wCAACI,2CAAD;AAAkB,IAAA,EAAE,EAAC;AAArB,KAA+BpB,KAA/B,CAbd,EAcGI,QAdH,EAeGH,eAAe,IAAI,CAACI,QAApB,iBACCW,wCAACK,wCAAD;AACE,IAAA,SAAS,EAAEf,SADb;AAEE,IAAA,SAAS,EAAEG,SAFb;AAGE,mBAAaG,OAHf;AAIE,IAAA,EAAE,YAAKT,OAAO,IAAIU,WAAhB;AAJJ,KAMGZ,eANH,CAhBJ,EAyBGC,iBAAiB,IAAIG,QAArB,iBACCW,wCAACK,wCAAD;AAAe,IAAA,QAAQ,EAAEhB,QAAzB;AAAmC,IAAA,SAAS,EAAEC,SAA9C;AAAyD,IAAA,SAAS,EAAEG,SAApE;AAA+E,IAAA,IAAI,EAAC;AAApF,KACGP,iBADH,CA1BJ,CADF;AAiCD;;AAEDJ,qBAAqB,CAACwB,SAAtB,GAAkCA,uCAAlC;IACMC,+BAA+B,GAAGC,kBAAQ,CAAC1B,qBAAD;AAChDyB,+BAA+B,CAACD,SAAhC,GAA4CA,uCAA5C;;;;;"}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var formLayoutBlockItem_DSFormLayoutBlockItem = require('./DSFormLayoutBlockItem.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('react-desc');
|
|
8
|
+
require('uid');
|
|
8
9
|
require('./propTypes.js');
|
|
9
10
|
require('./styles.js');
|
|
10
11
|
require('styled-components');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
|
|
@@ -7,7 +7,7 @@ var reactDesc = require('react-desc');
|
|
|
7
7
|
var 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."),
|
|
11
11
|
feedbackMessage: reactDesc.PropTypes.string.description('Feedback message to show below the input component.'),
|
|
12
12
|
validationMessage: reactDesc.PropTypes.string.description('Validation message to show below the input component. It requires hasError property set to true to be visible.'),
|
|
13
13
|
hasError: reactDesc.PropTypes.bool.description('Helper boolean property for the validation message.'),
|
|
@@ -16,7 +16,8 @@ var propTypes = {
|
|
|
16
16
|
fitContent: reactDesc.PropTypes.bool.description('Set the width of the layout to the input component.'),
|
|
17
17
|
leftLabel: reactDesc.PropTypes.bool.description('Adds the label at the left of the input component.'),
|
|
18
18
|
hideLabel: reactDesc.PropTypes.bool.description('Hides the input label. It still requires label and labelFor property for accesibility purposes'),
|
|
19
|
-
withHighlight: reactDesc.PropTypes.bool.description('Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.')
|
|
19
|
+
withHighlight: reactDesc.PropTypes.bool.description('Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.'),
|
|
20
|
+
isGroup: reactDesc.PropTypes.bool.description('Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.')
|
|
20
21
|
};
|
|
21
22
|
|
|
22
23
|
exports.propTypes = propTypes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"propTypes.js","sources":["../../../src/form-layout-block-item/propTypes.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n children: PropTypes.node.isRequired.description('Input component. '),\n label: PropTypes.string.isRequired.description(\n 'Label property for the input component. This property is required for accesibility purposes.',\n ),\n
|
|
1
|
+
{"version":3,"file":"propTypes.js","sources":["../../../src/form-layout-block-item/propTypes.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n children: PropTypes.node.isRequired.description('Input component. '),\n label: PropTypes.string.isRequired.description(\n 'Label property for the input component. This property is required for accesibility purposes.',\n ),\n inputID: PropTypes.string.isRequired.description(\n \"String that matches the input component's id. This property is required for accesibility purposes.\",\n ),\n feedbackMessage: PropTypes.string.description('Feedback message to show below the input component.'),\n validationMessage: PropTypes.string.description(\n 'Validation message to show below the input component. It requires hasError property set to true to be visible.',\n ),\n hasError: PropTypes.bool.description('Helper boolean property for the validation message.'),\n required: PropTypes.bool.description('Adds required extra styling.'),\n optional: PropTypes.bool.description('Adds optional extra styling.'),\n fitContent: PropTypes.bool.description('Set the width of the layout to the input component.'),\n leftLabel: PropTypes.bool.description('Adds the label at the left of the input component.'),\n hideLabel: PropTypes.bool.description(\n 'Hides the input label. It still requires label and labelFor property for accesibility purposes',\n ),\n withHighlight: PropTypes.bool.description(\n 'Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.',\n ),\n isGroup: PropTypes.bool.description(\n 'Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.',\n ),\n};\n"],"names":["propTypes","children","PropTypes","node","isRequired","description","label","string","inputID","feedbackMessage","validationMessage","hasError","bool","required","optional","fitContent","leftLabel","hideLabel","withHighlight","isGroup"],"mappings":";;;;;;IAEaA,SAAS,GAAG;AACvBC,EAAAA,QAAQ,EAAEC,mBAAS,CAACC,IAAV,CAAeC,UAAf,CAA0BC,WAA1B,CAAsC,mBAAtC,CADa;AAEvBC,EAAAA,KAAK,EAAEJ,mBAAS,CAACK,MAAV,CAAiBH,UAAjB,CAA4BC,WAA5B,CACL,8FADK,CAFgB;AAKvBG,EAAAA,OAAO,EAAEN,mBAAS,CAACK,MAAV,CAAiBH,UAAjB,CAA4BC,WAA5B,CACP,oGADO,CALc;AAQvBI,EAAAA,eAAe,EAAEP,mBAAS,CAACK,MAAV,CAAiBF,WAAjB,CAA6B,qDAA7B,CARM;AASvBK,EAAAA,iBAAiB,EAAER,mBAAS,CAACK,MAAV,CAAiBF,WAAjB,CACjB,gHADiB,CATI;AAYvBM,EAAAA,QAAQ,EAAET,mBAAS,CAACU,IAAV,CAAeP,WAAf,CAA2B,qDAA3B,CAZa;AAavBQ,EAAAA,QAAQ,EAAEX,mBAAS,CAACU,IAAV,CAAeP,WAAf,CAA2B,8BAA3B,CAba;AAcvBS,EAAAA,QAAQ,EAAEZ,mBAAS,CAACU,IAAV,CAAeP,WAAf,CAA2B,8BAA3B,CAda;AAevBU,EAAAA,UAAU,EAAEb,mBAAS,CAACU,IAAV,CAAeP,WAAf,CAA2B,qDAA3B,CAfW;AAgBvBW,EAAAA,SAAS,EAAEd,mBAAS,CAACU,IAAV,CAAeP,WAAf,CAA2B,oDAA3B,CAhBY;AAiBvBY,EAAAA,SAAS,EAAEf,mBAAS,CAACU,IAAV,CAAeP,WAAf,CACT,gGADS,CAjBY;AAoBvBa,EAAAA,aAAa,EAAEhB,mBAAS,CAACU,IAAV,CAAeP,WAAf,CACb,sGADa,CApBQ;AAuBvBc,EAAAA,OAAO,EAAEjB,mBAAS,CAACU,IAAV,CAAeP,WAAf,CACP,gHADO;AAvBc;;;;"}
|
|
@@ -10,53 +10,60 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
10
10
|
|
|
11
11
|
var StyledContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
|
|
12
12
|
componentId: "sc-196zgtg-0"
|
|
13
|
-
})(["position:relative;", "
|
|
13
|
+
})(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""], function (_ref) {
|
|
14
14
|
var fitContent = _ref.fitContent;
|
|
15
15
|
return fitContent ? 'width: fit-content;' : undefined;
|
|
16
16
|
}, function (_ref2) {
|
|
17
|
-
var
|
|
18
|
-
|
|
19
|
-
return leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined;
|
|
17
|
+
var isGroup = _ref2.isGroup;
|
|
18
|
+
return isGroup ? 'border: none' : '';
|
|
20
19
|
}, function (_ref3) {
|
|
21
|
-
var
|
|
22
|
-
|
|
20
|
+
var leftLabel = _ref3.leftLabel,
|
|
21
|
+
hideLabel = _ref3.hideLabel;
|
|
22
|
+
return leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined;
|
|
23
|
+
}, function (_ref4) {
|
|
24
|
+
var theme = _ref4.theme,
|
|
25
|
+
withHighlight = _ref4.withHighlight;
|
|
23
26
|
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;
|
|
24
27
|
});
|
|
25
28
|
var StyledLabel = /*#__PURE__*/styled__default['default'].label.withConfig({
|
|
26
29
|
componentId: "sc-196zgtg-1"
|
|
27
|
-
})(["display:flex;", " ", ""], function (
|
|
28
|
-
var theme =
|
|
29
|
-
leftLabel =
|
|
30
|
+
})(["display:flex;", " ", ""], function (_ref5) {
|
|
31
|
+
var theme = _ref5.theme,
|
|
32
|
+
leftLabel = _ref5.leftLabel;
|
|
30
33
|
return leftLabel ? "padding-right: ".concat(theme.space.xxs, ";") : undefined;
|
|
31
|
-
}, function (
|
|
32
|
-
var hideLabel =
|
|
34
|
+
}, function (_ref6) {
|
|
35
|
+
var hideLabel = _ref6.hideLabel;
|
|
33
36
|
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;
|
|
34
37
|
});
|
|
35
38
|
var StyledMessage = /*#__PURE__*/styled__default['default'].div.withConfig({
|
|
36
39
|
componentId: "sc-196zgtg-2"
|
|
37
|
-
})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], function (
|
|
38
|
-
var theme =
|
|
40
|
+
})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], function (_ref7) {
|
|
41
|
+
var theme = _ref7.theme;
|
|
39
42
|
return theme.fontSizes.microText[200];
|
|
40
|
-
}, function (_ref7) {
|
|
41
|
-
var theme = _ref7.theme,
|
|
42
|
-
hasError = _ref7.hasError;
|
|
43
|
-
return hasError ? theme.colors.danger[900] : theme.colors.neutral[500];
|
|
44
43
|
}, function (_ref8) {
|
|
45
|
-
var
|
|
46
|
-
|
|
44
|
+
var theme = _ref8.theme,
|
|
45
|
+
hasError = _ref8.hasError;
|
|
46
|
+
return hasError ? theme.colors.danger[900] : theme.colors.neutral[500];
|
|
47
|
+
}, function (_ref9) {
|
|
48
|
+
var leftLabel = _ref9.leftLabel,
|
|
49
|
+
hideLabel = _ref9.hideLabel;
|
|
47
50
|
return leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined;
|
|
48
51
|
});
|
|
49
52
|
var StyledMark = /*#__PURE__*/styled__default['default'].span.withConfig({
|
|
50
53
|
componentId: "sc-196zgtg-3"
|
|
51
|
-
})(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], function (
|
|
52
|
-
var theme =
|
|
54
|
+
})(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], function (_ref10) {
|
|
55
|
+
var theme = _ref10.theme;
|
|
53
56
|
return theme.space.xxxs;
|
|
54
|
-
}, function (
|
|
55
|
-
var theme =
|
|
56
|
-
required =
|
|
57
|
+
}, function (_ref11) {
|
|
58
|
+
var theme = _ref11.theme,
|
|
59
|
+
required = _ref11.required;
|
|
57
60
|
return required ? "\n background-color: ".concat(theme.colors.danger[900], ";\n ") : "\n border: 1px solid ".concat(theme.colors.brand[600], ";\n ");
|
|
58
61
|
});
|
|
62
|
+
var ScreenReaderOnly = /*#__PURE__*/styled__default['default'].div.withConfig({
|
|
63
|
+
componentId: "sc-196zgtg-4"
|
|
64
|
+
})(["clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;"]);
|
|
59
65
|
|
|
66
|
+
exports.ScreenReaderOnly = ScreenReaderOnly;
|
|
60
67
|
exports.StyledContainer = StyledContainer;
|
|
61
68
|
exports.StyledLabel = StyledLabel;
|
|
62
69
|
exports.StyledMark = StyledMark;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../src/form-layout-block-item/styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type {\n DSFormLayoutBlockItemStyledContainerT,\n DSFormLayoutBlockItemStyledLabelT,\n DSFormLayoutBlockItemStyledMessageT,\n DSFormLayoutBlockItemStyledMarkT,\n} from './index.d';\n\nexport const StyledContainer = styled.div<DSFormLayoutBlockItemStyledContainerT>`\n position: relative;\n ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../src/form-layout-block-item/styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type {\n DSFormLayoutBlockItemStyledContainerT,\n DSFormLayoutBlockItemStyledLabelT,\n DSFormLayoutBlockItemStyledMessageT,\n DSFormLayoutBlockItemStyledMarkT,\n} from './index.d';\n\nexport const StyledContainer = styled.div<DSFormLayoutBlockItemStyledContainerT>`\n position: relative;\n padding: 0;\n margin: 0;\n display: grid;\n ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n ${({ isGroup }) => (isGroup ? 'border: none' : '')};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined)}\n align-items: center;\n ${({ theme, withHighlight }) =>\n withHighlight\n ? `\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${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: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${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 `\n : undefined}\n`;\n\nexport const StyledLabel = styled.label<DSFormLayoutBlockItemStyledLabelT>`\n display: flex;\n ${({ theme, leftLabel }) => (leftLabel ? `padding-right: ${theme.space.xxs};` : undefined)}\n ${({ hideLabel }) =>\n hideLabel\n ? `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 `\n : undefined}\n`;\n\nexport const StyledMessage = styled.div<DSFormLayoutBlockItemStyledMessageT>`\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n font-style: italic;\n text-align: right;\n line-height: 15px;\n height: 15px;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined)}\n`;\n\nexport const StyledMark = styled.span<DSFormLayoutBlockItemStyledMarkT>`\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-left: ${({ theme }) => theme.space.xxxs};\n ${({ theme, required }) =>\n required\n ? `\n background-color: ${theme.colors.danger[900]};\n `\n : `\n border: 1px solid ${theme.colors.brand[600]};\n `}\n`;\n\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\n"],"names":["StyledContainer","styled","div","fitContent","undefined","isGroup","leftLabel","hideLabel","theme","withHighlight","space","xxs","xxxs","xs","StyledLabel","label","StyledMessage","fontSizes","microText","hasError","colors","danger","neutral","StyledMark","span","required","brand","ScreenReaderOnly"],"mappings":";;;;;;;;;;IAQaA,eAAe,gBAAGC,0BAAM,CAACC,GAAV;AAAA;AAAA,iGAKxB;AAAA,MAAGC,UAAH,QAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,qBAAH,GAA2BC,SAA1D;AAAA,CALwB,EAMxB;AAAA,MAAGC,OAAH,SAAGA,OAAH;AAAA,SAAkBA,OAAO,GAAG,cAAH,GAAoB,EAA7C;AAAA,CANwB,EAOxB;AAAA,MAAGC,SAAH,SAAGA,SAAH;AAAA,MAAcC,SAAd,SAAcA,SAAd;AAAA,SAA+BD,SAAS,IAAI,CAACC,SAAd,GAA0B,0CAA1B,GAAuEH,SAAtG;AAAA,CAPwB,EASxB;AAAA,MAAGI,KAAH,SAAGA,KAAH;AAAA,MAAUC,aAAV,SAAUA,aAAV;AAAA,SACAA,aAAa,+FAKAD,KAAK,CAACE,KAAN,CAAYC,GALZ,8BAMDH,KAAK,CAACE,KAAN,CAAYE,IANX,iEAQYJ,KAAK,CAACE,KAAN,CAAYG,EARxB,8CAScL,KAAK,CAACE,KAAN,CAAYC,GAT1B,uUAoBIH,KAAK,CAACE,KAAN,CAAYC,GApBhB,kCAqBGH,KAAK,CAACE,KAAN,CAAYE,IArBf,yEAuBgBJ,KAAK,CAACE,KAAN,CAAYG,EAvB5B,kDAwBkBL,KAAK,CAACE,KAAN,CAAYC,GAxB9B,iNAgCTP,SAjCJ;AAAA,CATwB;IA6CfU,WAAW,gBAAGb,0BAAM,CAACc,KAAV;AAAA;AAAA,+BAEpB;AAAA,MAAGP,KAAH,SAAGA,KAAH;AAAA,MAAUF,SAAV,SAAUA,SAAV;AAAA,SAA2BA,SAAS,4BAAqBE,KAAK,CAACE,KAAN,CAAYC,GAAjC,SAA0CP,SAA9E;AAAA,CAFoB,EAGpB;AAAA,MAAGG,SAAH,SAAGA,SAAH;AAAA,SACAA,SAAS,oNAWLH,SAZJ;AAAA,CAHoB;IAkBXY,aAAa,gBAAGf,0BAAM,CAACC,GAAV;AAAA;AAAA,8IACX;AAAA,MAAGM,KAAH,SAAGA,KAAH;AAAA,SAAeA,KAAK,CAACS,SAAN,CAAgBC,SAAhB,CAA0B,GAA1B,CAAf;AAAA,CADW,EAQf;AAAA,MAAGV,KAAH,SAAGA,KAAH;AAAA,MAAUW,QAAV,SAAUA,QAAV;AAAA,SAA0BA,QAAQ,GAAGX,KAAK,CAACY,MAAN,CAAaC,MAAb,CAAoB,GAApB,CAAH,GAA8Bb,KAAK,CAACY,MAAN,CAAaE,OAAb,CAAqB,GAArB,CAAhE;AAAA,CARe,EAStB;AAAA,MAAGhB,SAAH,SAAGA,SAAH;AAAA,MAAcC,SAAd,SAAcA,SAAd;AAAA,SAA+BD,SAAS,IAAI,CAACC,SAAd,GAA0B,mBAA1B,GAAgDH,SAA/E;AAAA,CATsB;IAYbmB,UAAU,gBAAGtB,0BAAM,CAACuB,IAAV;AAAA;AAAA,qEAIN;AAAA,MAAGhB,KAAH,UAAGA,KAAH;AAAA,SAAeA,KAAK,CAACE,KAAN,CAAYE,IAA3B;AAAA,CAJM,EAKnB;AAAA,MAAGJ,KAAH,UAAGA,KAAH;AAAA,MAAUiB,QAAV,UAAUA,QAAV;AAAA,SACAA,QAAQ,mCAEUjB,KAAK,CAACY,MAAN,CAAaC,MAAb,CAAoB,GAApB,CAFV,6CAKUb,KAAK,CAACY,MAAN,CAAaM,KAAb,CAAmB,GAAnB,CALV,UADR;AAAA,CALmB;IAeVC,gBAAgB,gBAAG1B,0BAAM,CAACC,GAAV;AAAA;AAAA;;;;;;;;"}
|
package/cjs/index.js
CHANGED
|
@@ -6,6 +6,7 @@ var formLayoutBlockItem_DSFormLayoutBlockItem = require('./form-layout-block-ite
|
|
|
6
6
|
var formLayoutCheckboxGroup_DSFormLayoutCheckboxGroup = require('./form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js');
|
|
7
7
|
require('react');
|
|
8
8
|
require('react-desc');
|
|
9
|
+
require('uid');
|
|
9
10
|
require('./form-layout-block-item/propTypes.js');
|
|
10
11
|
require('./form-layout-block-item/styles.js');
|
|
11
12
|
require('styled-components');
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,14 +1,17 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
2
|
import { describe } from 'react-desc';
|
|
3
|
+
import { uid } from 'uid';
|
|
3
4
|
import { propTypes } from './propTypes.js';
|
|
4
|
-
import { StyledContainer, StyledLabel, StyledMark, StyledMessage } from './styles.js';
|
|
5
|
+
import { StyledContainer, StyledLabel, StyledMark, ScreenReaderOnly, StyledMessage } from './styles.js';
|
|
5
6
|
import 'styled-components';
|
|
6
7
|
|
|
8
|
+
/* eslint-disable complexity */
|
|
9
|
+
|
|
7
10
|
var DSFormLayoutBlockItem = function DSFormLayoutBlockItem(props) {
|
|
8
11
|
var label = props.label,
|
|
9
12
|
feedbackMessage = props.feedbackMessage,
|
|
10
13
|
validationMessage = props.validationMessage,
|
|
11
|
-
|
|
14
|
+
inputID = props.inputID,
|
|
12
15
|
children = props.children,
|
|
13
16
|
hasError = props.hasError,
|
|
14
17
|
leftLabel = props.leftLabel,
|
|
@@ -16,23 +19,40 @@ var DSFormLayoutBlockItem = function DSFormLayoutBlockItem(props) {
|
|
|
16
19
|
optional = props.optional,
|
|
17
20
|
hideLabel = props.hideLabel,
|
|
18
21
|
fitContent = props.fitContent,
|
|
19
|
-
withHighlight = props.withHighlight
|
|
22
|
+
withHighlight = props.withHighlight,
|
|
23
|
+
_props$isGroup = props.isGroup,
|
|
24
|
+
isGroup = _props$isGroup === void 0 ? false : _props$isGroup;
|
|
25
|
+
var instanceUID = useMemo(function () {
|
|
26
|
+
return uid(6);
|
|
27
|
+
}, []);
|
|
20
28
|
return /*#__PURE__*/React.createElement(StyledContainer, {
|
|
21
29
|
leftLabel: leftLabel,
|
|
22
30
|
fitContent: fitContent,
|
|
23
31
|
hideLabel: hideLabel,
|
|
24
|
-
withHighlight: withHighlight
|
|
32
|
+
withHighlight: withHighlight,
|
|
33
|
+
as: isGroup ? 'fieldset' : 'div',
|
|
34
|
+
isGroup: isGroup,
|
|
35
|
+
"aria-describedby": "".concat(inputID || instanceUID, "_feedback_message")
|
|
25
36
|
}, /*#__PURE__*/React.createElement(StyledLabel, {
|
|
26
|
-
htmlFor:
|
|
37
|
+
htmlFor: inputID,
|
|
27
38
|
leftLabel: leftLabel,
|
|
28
|
-
hideLabel: hideLabel
|
|
39
|
+
hideLabel: hideLabel,
|
|
40
|
+
"aria-hidden": isGroup
|
|
29
41
|
}, label, (required || optional) && /*#__PURE__*/React.createElement(StyledMark, {
|
|
30
42
|
required: required
|
|
31
|
-
})),
|
|
43
|
+
})), isGroup && /*#__PURE__*/React.createElement(ScreenReaderOnly, {
|
|
44
|
+
as: "legend"
|
|
45
|
+
}, label), children, feedbackMessage && !hasError && /*#__PURE__*/React.createElement(StyledMessage, {
|
|
46
|
+
leftLabel: leftLabel,
|
|
47
|
+
hideLabel: hideLabel,
|
|
48
|
+
"aria-hidden": isGroup,
|
|
49
|
+
id: "".concat(inputID || instanceUID, "_feedback_message")
|
|
50
|
+
}, feedbackMessage), validationMessage && hasError && /*#__PURE__*/React.createElement(StyledMessage, {
|
|
32
51
|
hasError: hasError,
|
|
33
52
|
leftLabel: leftLabel,
|
|
34
|
-
hideLabel: hideLabel
|
|
35
|
-
|
|
53
|
+
hideLabel: hideLabel,
|
|
54
|
+
role: "alert"
|
|
55
|
+
}, validationMessage));
|
|
36
56
|
};
|
|
37
57
|
|
|
38
58
|
DSFormLayoutBlockItem.propTypes = propTypes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DSFormLayoutBlockItem.js","sources":["../../../src/form-layout-block-item/DSFormLayoutBlockItem.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"DSFormLayoutBlockItem.js","sources":["../../../src/form-layout-block-item/DSFormLayoutBlockItem.tsx"],"sourcesContent":["/* eslint-disable complexity */\nimport React, { useMemo } from 'react';\nimport { describe } from 'react-desc';\nimport { uid } from 'uid';\nimport type { DSFormLayoutBlockItemPropsT as Props } from './index.d';\nimport { propTypes } from './propTypes';\nimport { StyledMessage, StyledLabel, StyledContainer, StyledMark, ScreenReaderOnly } from './styles';\n\nconst DSFormLayoutBlockItem = (props: Props): JSX.Element => {\n const {\n label,\n feedbackMessage,\n validationMessage,\n inputID,\n children,\n hasError,\n leftLabel,\n required,\n optional,\n hideLabel,\n fitContent,\n withHighlight,\n isGroup = false,\n } = props;\n\n const instanceUID = useMemo(() => uid(6), []);\n\n return (\n <StyledContainer\n leftLabel={leftLabel}\n fitContent={fitContent}\n hideLabel={hideLabel}\n withHighlight={withHighlight}\n as={isGroup ? 'fieldset' : 'div'}\n isGroup={isGroup}\n aria-describedby={`${inputID || instanceUID}_feedback_message`}\n >\n <StyledLabel htmlFor={inputID} leftLabel={leftLabel} hideLabel={hideLabel} aria-hidden={isGroup}>\n {label}\n {(required || optional) && <StyledMark required={required} />}\n </StyledLabel>\n {isGroup && <ScreenReaderOnly as=\"legend\">{label}</ScreenReaderOnly>}\n {children}\n {feedbackMessage && !hasError && (\n <StyledMessage\n leftLabel={leftLabel}\n hideLabel={hideLabel}\n aria-hidden={isGroup}\n id={`${inputID || instanceUID}_feedback_message`}\n >\n {feedbackMessage}\n </StyledMessage>\n )}\n {validationMessage && hasError && (\n <StyledMessage hasError={hasError} leftLabel={leftLabel} hideLabel={hideLabel} role=\"alert\">\n {validationMessage}\n </StyledMessage>\n )}\n </StyledContainer>\n );\n};\n\nDSFormLayoutBlockItem.propTypes = propTypes;\nconst DSFormLayoutBlockItemWithSchema = describe(DSFormLayoutBlockItem);\nDSFormLayoutBlockItemWithSchema.propTypes = propTypes;\n\nexport { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema };\n"],"names":["DSFormLayoutBlockItem","props","label","feedbackMessage","validationMessage","inputID","children","hasError","leftLabel","required","optional","hideLabel","fitContent","withHighlight","isGroup","instanceUID","useMemo","uid","propTypes","DSFormLayoutBlockItemWithSchema","describe"],"mappings":";;;;;;;AAAA;;IAQMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,KAAD,EAA+B;AAC3D,MACEC,KADF,GAcID,KAdJ,CACEC,KADF;AAAA,MAEEC,eAFF,GAcIF,KAdJ,CAEEE,eAFF;AAAA,MAGEC,iBAHF,GAcIH,KAdJ,CAGEG,iBAHF;AAAA,MAIEC,OAJF,GAcIJ,KAdJ,CAIEI,OAJF;AAAA,MAKEC,QALF,GAcIL,KAdJ,CAKEK,QALF;AAAA,MAMEC,QANF,GAcIN,KAdJ,CAMEM,QANF;AAAA,MAOEC,SAPF,GAcIP,KAdJ,CAOEO,SAPF;AAAA,MAQEC,QARF,GAcIR,KAdJ,CAQEQ,QARF;AAAA,MASEC,QATF,GAcIT,KAdJ,CASES,QATF;AAAA,MAUEC,SAVF,GAcIV,KAdJ,CAUEU,SAVF;AAAA,MAWEC,UAXF,GAcIX,KAdJ,CAWEW,UAXF;AAAA,MAYEC,aAZF,GAcIZ,KAdJ,CAYEY,aAZF;AAAA,uBAcIZ,KAdJ,CAaEa,OAbF;AAAA,MAaEA,OAbF,+BAaY,KAbZ;AAgBA,MAAMC,WAAW,GAAGC,OAAO,CAAC;AAAA,WAAMC,GAAG,CAAC,CAAD,CAAT;AAAA,GAAD,EAAe,EAAf,CAA3B;AAEA,sBACE,oBAAC,eAAD;AACE,IAAA,SAAS,EAAET,SADb;AAEE,IAAA,UAAU,EAAEI,UAFd;AAGE,IAAA,SAAS,EAAED,SAHb;AAIE,IAAA,aAAa,EAAEE,aAJjB;AAKE,IAAA,EAAE,EAAEC,OAAO,GAAG,UAAH,GAAgB,KAL7B;AAME,IAAA,OAAO,EAAEA,OANX;AAOE,kCAAqBT,OAAO,IAAIU,WAAhC;AAPF,kBASE,oBAAC,WAAD;AAAa,IAAA,OAAO,EAAEV,OAAtB;AAA+B,IAAA,SAAS,EAAEG,SAA1C;AAAqD,IAAA,SAAS,EAAEG,SAAhE;AAA2E,mBAAaG;AAAxF,KACGZ,KADH,EAEG,CAACO,QAAQ,IAAIC,QAAb,kBAA0B,oBAAC,UAAD;AAAY,IAAA,QAAQ,EAAED;AAAtB,IAF7B,CATF,EAaGK,OAAO,iBAAI,oBAAC,gBAAD;AAAkB,IAAA,EAAE,EAAC;AAArB,KAA+BZ,KAA/B,CAbd,EAcGI,QAdH,EAeGH,eAAe,IAAI,CAACI,QAApB,iBACC,oBAAC,aAAD;AACE,IAAA,SAAS,EAAEC,SADb;AAEE,IAAA,SAAS,EAAEG,SAFb;AAGE,mBAAaG,OAHf;AAIE,IAAA,EAAE,YAAKT,OAAO,IAAIU,WAAhB;AAJJ,KAMGZ,eANH,CAhBJ,EAyBGC,iBAAiB,IAAIG,QAArB,iBACC,oBAAC,aAAD;AAAe,IAAA,QAAQ,EAAEA,QAAzB;AAAmC,IAAA,SAAS,EAAEC,SAA9C;AAAyD,IAAA,SAAS,EAAEG,SAApE;AAA+E,IAAA,IAAI,EAAC;AAApF,KACGP,iBADH,CA1BJ,CADF;AAiCD;;AAEDJ,qBAAqB,CAACkB,SAAtB,GAAkCA,SAAlC;IACMC,+BAA+B,GAAGC,QAAQ,CAACpB,qBAAD;AAChDmB,+BAA+B,CAACD,SAAhC,GAA4CA,SAA5C;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -3,7 +3,7 @@ import { PropTypes } from 'react-desc';
|
|
|
3
3
|
var 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."),
|
|
7
7
|
feedbackMessage: PropTypes.string.description('Feedback message to show below the input component.'),
|
|
8
8
|
validationMessage: PropTypes.string.description('Validation message to show below the input component. It requires hasError property set to true to be visible.'),
|
|
9
9
|
hasError: PropTypes.bool.description('Helper boolean property for the validation message.'),
|
|
@@ -12,7 +12,8 @@ var propTypes = {
|
|
|
12
12
|
fitContent: PropTypes.bool.description('Set the width of the layout to the input component.'),
|
|
13
13
|
leftLabel: PropTypes.bool.description('Adds the label at the left of the input component.'),
|
|
14
14
|
hideLabel: PropTypes.bool.description('Hides the input label. It still requires label and labelFor property for accesibility purposes'),
|
|
15
|
-
withHighlight: PropTypes.bool.description('Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.')
|
|
15
|
+
withHighlight: PropTypes.bool.description('Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.'),
|
|
16
|
+
isGroup: PropTypes.bool.description('Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.')
|
|
16
17
|
};
|
|
17
18
|
|
|
18
19
|
export { propTypes };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"propTypes.js","sources":["../../../src/form-layout-block-item/propTypes.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n children: PropTypes.node.isRequired.description('Input component. '),\n label: PropTypes.string.isRequired.description(\n 'Label property for the input component. This property is required for accesibility purposes.',\n ),\n
|
|
1
|
+
{"version":3,"file":"propTypes.js","sources":["../../../src/form-layout-block-item/propTypes.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\n\nexport const propTypes = {\n children: PropTypes.node.isRequired.description('Input component. '),\n label: PropTypes.string.isRequired.description(\n 'Label property for the input component. This property is required for accesibility purposes.',\n ),\n inputID: PropTypes.string.isRequired.description(\n \"String that matches the input component's id. This property is required for accesibility purposes.\",\n ),\n feedbackMessage: PropTypes.string.description('Feedback message to show below the input component.'),\n validationMessage: PropTypes.string.description(\n 'Validation message to show below the input component. It requires hasError property set to true to be visible.',\n ),\n hasError: PropTypes.bool.description('Helper boolean property for the validation message.'),\n required: PropTypes.bool.description('Adds required extra styling.'),\n optional: PropTypes.bool.description('Adds optional extra styling.'),\n fitContent: PropTypes.bool.description('Set the width of the layout to the input component.'),\n leftLabel: PropTypes.bool.description('Adds the label at the left of the input component.'),\n hideLabel: PropTypes.bool.description(\n 'Hides the input label. It still requires label and labelFor property for accesibility purposes',\n ),\n withHighlight: PropTypes.bool.description(\n 'Adds highlight extra styling. It requires extra spacing, please check withHighlight explanation tab.',\n ),\n isGroup: PropTypes.bool.description(\n 'Sets the HTML elements as fieldset and legend. This should be used when you want to group more than one input.',\n ),\n};\n"],"names":["propTypes","children","PropTypes","node","isRequired","description","label","string","inputID","feedbackMessage","validationMessage","hasError","bool","required","optional","fitContent","leftLabel","hideLabel","withHighlight","isGroup"],"mappings":";;IAEaA,SAAS,GAAG;AACvBC,EAAAA,QAAQ,EAAEC,SAAS,CAACC,IAAV,CAAeC,UAAf,CAA0BC,WAA1B,CAAsC,mBAAtC,CADa;AAEvBC,EAAAA,KAAK,EAAEJ,SAAS,CAACK,MAAV,CAAiBH,UAAjB,CAA4BC,WAA5B,CACL,8FADK,CAFgB;AAKvBG,EAAAA,OAAO,EAAEN,SAAS,CAACK,MAAV,CAAiBH,UAAjB,CAA4BC,WAA5B,CACP,oGADO,CALc;AAQvBI,EAAAA,eAAe,EAAEP,SAAS,CAACK,MAAV,CAAiBF,WAAjB,CAA6B,qDAA7B,CARM;AASvBK,EAAAA,iBAAiB,EAAER,SAAS,CAACK,MAAV,CAAiBF,WAAjB,CACjB,gHADiB,CATI;AAYvBM,EAAAA,QAAQ,EAAET,SAAS,CAACU,IAAV,CAAeP,WAAf,CAA2B,qDAA3B,CAZa;AAavBQ,EAAAA,QAAQ,EAAEX,SAAS,CAACU,IAAV,CAAeP,WAAf,CAA2B,8BAA3B,CAba;AAcvBS,EAAAA,QAAQ,EAAEZ,SAAS,CAACU,IAAV,CAAeP,WAAf,CAA2B,8BAA3B,CAda;AAevBU,EAAAA,UAAU,EAAEb,SAAS,CAACU,IAAV,CAAeP,WAAf,CAA2B,qDAA3B,CAfW;AAgBvBW,EAAAA,SAAS,EAAEd,SAAS,CAACU,IAAV,CAAeP,WAAf,CAA2B,oDAA3B,CAhBY;AAiBvBY,EAAAA,SAAS,EAAEf,SAAS,CAACU,IAAV,CAAeP,WAAf,CACT,gGADS,CAjBY;AAoBvBa,EAAAA,aAAa,EAAEhB,SAAS,CAACU,IAAV,CAAeP,WAAf,CACb,sGADa,CApBQ;AAuBvBc,EAAAA,OAAO,EAAEjB,SAAS,CAACU,IAAV,CAAeP,WAAf,CACP,gHADO;AAvBc;;;;"}
|
|
@@ -2,52 +2,58 @@ import styled from 'styled-components';
|
|
|
2
2
|
|
|
3
3
|
var StyledContainer = /*#__PURE__*/styled.div.withConfig({
|
|
4
4
|
componentId: "sc-196zgtg-0"
|
|
5
|
-
})(["position:relative;", "
|
|
5
|
+
})(["position:relative;padding:0;margin:0;display:grid;", " ", ";", " align-items:center;", ""], function (_ref) {
|
|
6
6
|
var fitContent = _ref.fitContent;
|
|
7
7
|
return fitContent ? 'width: fit-content;' : undefined;
|
|
8
8
|
}, function (_ref2) {
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
return leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined;
|
|
9
|
+
var isGroup = _ref2.isGroup;
|
|
10
|
+
return isGroup ? 'border: none' : '';
|
|
12
11
|
}, function (_ref3) {
|
|
13
|
-
var
|
|
14
|
-
|
|
12
|
+
var leftLabel = _ref3.leftLabel,
|
|
13
|
+
hideLabel = _ref3.hideLabel;
|
|
14
|
+
return leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined;
|
|
15
|
+
}, function (_ref4) {
|
|
16
|
+
var theme = _ref4.theme,
|
|
17
|
+
withHighlight = _ref4.withHighlight;
|
|
15
18
|
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;
|
|
16
19
|
});
|
|
17
20
|
var StyledLabel = /*#__PURE__*/styled.label.withConfig({
|
|
18
21
|
componentId: "sc-196zgtg-1"
|
|
19
|
-
})(["display:flex;", " ", ""], function (
|
|
20
|
-
var theme =
|
|
21
|
-
leftLabel =
|
|
22
|
+
})(["display:flex;", " ", ""], function (_ref5) {
|
|
23
|
+
var theme = _ref5.theme,
|
|
24
|
+
leftLabel = _ref5.leftLabel;
|
|
22
25
|
return leftLabel ? "padding-right: ".concat(theme.space.xxs, ";") : undefined;
|
|
23
|
-
}, function (
|
|
24
|
-
var hideLabel =
|
|
26
|
+
}, function (_ref6) {
|
|
27
|
+
var hideLabel = _ref6.hideLabel;
|
|
25
28
|
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;
|
|
26
29
|
});
|
|
27
30
|
var StyledMessage = /*#__PURE__*/styled.div.withConfig({
|
|
28
31
|
componentId: "sc-196zgtg-2"
|
|
29
|
-
})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], function (
|
|
30
|
-
var theme =
|
|
32
|
+
})(["font-size:", ";font-style:italic;text-align:right;line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;color:", ";", ""], function (_ref7) {
|
|
33
|
+
var theme = _ref7.theme;
|
|
31
34
|
return theme.fontSizes.microText[200];
|
|
32
|
-
}, function (_ref7) {
|
|
33
|
-
var theme = _ref7.theme,
|
|
34
|
-
hasError = _ref7.hasError;
|
|
35
|
-
return hasError ? theme.colors.danger[900] : theme.colors.neutral[500];
|
|
36
35
|
}, function (_ref8) {
|
|
37
|
-
var
|
|
38
|
-
|
|
36
|
+
var theme = _ref8.theme,
|
|
37
|
+
hasError = _ref8.hasError;
|
|
38
|
+
return hasError ? theme.colors.danger[900] : theme.colors.neutral[500];
|
|
39
|
+
}, function (_ref9) {
|
|
40
|
+
var leftLabel = _ref9.leftLabel,
|
|
41
|
+
hideLabel = _ref9.hideLabel;
|
|
39
42
|
return leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined;
|
|
40
43
|
});
|
|
41
44
|
var StyledMark = /*#__PURE__*/styled.span.withConfig({
|
|
42
45
|
componentId: "sc-196zgtg-3"
|
|
43
|
-
})(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], function (
|
|
44
|
-
var theme =
|
|
46
|
+
})(["width:6px;height:6px;border-radius:50%;margin-left:", ";", ""], function (_ref10) {
|
|
47
|
+
var theme = _ref10.theme;
|
|
45
48
|
return theme.space.xxxs;
|
|
46
|
-
}, function (
|
|
47
|
-
var theme =
|
|
48
|
-
required =
|
|
49
|
+
}, function (_ref11) {
|
|
50
|
+
var theme = _ref11.theme,
|
|
51
|
+
required = _ref11.required;
|
|
49
52
|
return required ? "\n background-color: ".concat(theme.colors.danger[900], ";\n ") : "\n border: 1px solid ".concat(theme.colors.brand[600], ";\n ");
|
|
50
53
|
});
|
|
54
|
+
var ScreenReaderOnly = /*#__PURE__*/styled.div.withConfig({
|
|
55
|
+
componentId: "sc-196zgtg-4"
|
|
56
|
+
})(["clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;"]);
|
|
51
57
|
|
|
52
|
-
export { StyledContainer, StyledLabel, StyledMark, StyledMessage };
|
|
58
|
+
export { ScreenReaderOnly, StyledContainer, StyledLabel, StyledMark, StyledMessage };
|
|
53
59
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../src/form-layout-block-item/styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type {\n DSFormLayoutBlockItemStyledContainerT,\n DSFormLayoutBlockItemStyledLabelT,\n DSFormLayoutBlockItemStyledMessageT,\n DSFormLayoutBlockItemStyledMarkT,\n} from './index.d';\n\nexport const StyledContainer = styled.div<DSFormLayoutBlockItemStyledContainerT>`\n position: relative;\n ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../src/form-layout-block-item/styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type {\n DSFormLayoutBlockItemStyledContainerT,\n DSFormLayoutBlockItemStyledLabelT,\n DSFormLayoutBlockItemStyledMessageT,\n DSFormLayoutBlockItemStyledMarkT,\n} from './index.d';\n\nexport const StyledContainer = styled.div<DSFormLayoutBlockItemStyledContainerT>`\n position: relative;\n padding: 0;\n margin: 0;\n display: grid;\n ${({ fitContent }) => (fitContent ? 'width: fit-content;' : undefined)}\n ${({ isGroup }) => (isGroup ? 'border: none' : '')};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-template-columns: max-content auto;' : undefined)}\n align-items: center;\n ${({ theme, withHighlight }) =>\n withHighlight\n ? `\n &::after {\n position: absolute;\n content: '';\n left: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${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: -${theme.space.xxs};\n top: -${theme.space.xxxs};\n z-index: -1;\n width: calc(100% + ${theme.space.xs});\n height: calc(100% + ${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 `\n : undefined}\n`;\n\nexport const StyledLabel = styled.label<DSFormLayoutBlockItemStyledLabelT>`\n display: flex;\n ${({ theme, leftLabel }) => (leftLabel ? `padding-right: ${theme.space.xxs};` : undefined)}\n ${({ hideLabel }) =>\n hideLabel\n ? `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 `\n : undefined}\n`;\n\nexport const StyledMessage = styled.div<DSFormLayoutBlockItemStyledMessageT>`\n font-size: ${({ theme }) => theme.fontSizes.microText[200]};\n font-style: italic;\n text-align: right;\n line-height: 15px;\n height: 15px;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme, hasError }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[500])};\n ${({ leftLabel, hideLabel }) => (leftLabel && !hideLabel ? 'grid-column: 1/3;' : undefined)}\n`;\n\nexport const StyledMark = styled.span<DSFormLayoutBlockItemStyledMarkT>`\n width: 6px;\n height: 6px;\n border-radius: 50%;\n margin-left: ${({ theme }) => theme.space.xxxs};\n ${({ theme, required }) =>\n required\n ? `\n background-color: ${theme.colors.danger[900]};\n `\n : `\n border: 1px solid ${theme.colors.brand[600]};\n `}\n`;\n\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\n"],"names":["StyledContainer","styled","div","fitContent","undefined","isGroup","leftLabel","hideLabel","theme","withHighlight","space","xxs","xxxs","xs","StyledLabel","label","StyledMessage","fontSizes","microText","hasError","colors","danger","neutral","StyledMark","span","required","brand","ScreenReaderOnly"],"mappings":";;IAQaA,eAAe,gBAAGC,MAAM,CAACC,GAAV;AAAA;AAAA,iGAKxB;AAAA,MAAGC,UAAH,QAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,qBAAH,GAA2BC,SAA1D;AAAA,CALwB,EAMxB;AAAA,MAAGC,OAAH,SAAGA,OAAH;AAAA,SAAkBA,OAAO,GAAG,cAAH,GAAoB,EAA7C;AAAA,CANwB,EAOxB;AAAA,MAAGC,SAAH,SAAGA,SAAH;AAAA,MAAcC,SAAd,SAAcA,SAAd;AAAA,SAA+BD,SAAS,IAAI,CAACC,SAAd,GAA0B,0CAA1B,GAAuEH,SAAtG;AAAA,CAPwB,EASxB;AAAA,MAAGI,KAAH,SAAGA,KAAH;AAAA,MAAUC,aAAV,SAAUA,aAAV;AAAA,SACAA,aAAa,+FAKAD,KAAK,CAACE,KAAN,CAAYC,GALZ,8BAMDH,KAAK,CAACE,KAAN,CAAYE,IANX,iEAQYJ,KAAK,CAACE,KAAN,CAAYG,EARxB,8CAScL,KAAK,CAACE,KAAN,CAAYC,GAT1B,uUAoBIH,KAAK,CAACE,KAAN,CAAYC,GApBhB,kCAqBGH,KAAK,CAACE,KAAN,CAAYE,IArBf,yEAuBgBJ,KAAK,CAACE,KAAN,CAAYG,EAvB5B,kDAwBkBL,KAAK,CAACE,KAAN,CAAYC,GAxB9B,iNAgCTP,SAjCJ;AAAA,CATwB;IA6CfU,WAAW,gBAAGb,MAAM,CAACc,KAAV;AAAA;AAAA,+BAEpB;AAAA,MAAGP,KAAH,SAAGA,KAAH;AAAA,MAAUF,SAAV,SAAUA,SAAV;AAAA,SAA2BA,SAAS,4BAAqBE,KAAK,CAACE,KAAN,CAAYC,GAAjC,SAA0CP,SAA9E;AAAA,CAFoB,EAGpB;AAAA,MAAGG,SAAH,SAAGA,SAAH;AAAA,SACAA,SAAS,oNAWLH,SAZJ;AAAA,CAHoB;IAkBXY,aAAa,gBAAGf,MAAM,CAACC,GAAV;AAAA;AAAA,8IACX;AAAA,MAAGM,KAAH,SAAGA,KAAH;AAAA,SAAeA,KAAK,CAACS,SAAN,CAAgBC,SAAhB,CAA0B,GAA1B,CAAf;AAAA,CADW,EAQf;AAAA,MAAGV,KAAH,SAAGA,KAAH;AAAA,MAAUW,QAAV,SAAUA,QAAV;AAAA,SAA0BA,QAAQ,GAAGX,KAAK,CAACY,MAAN,CAAaC,MAAb,CAAoB,GAApB,CAAH,GAA8Bb,KAAK,CAACY,MAAN,CAAaE,OAAb,CAAqB,GAArB,CAAhE;AAAA,CARe,EAStB;AAAA,MAAGhB,SAAH,SAAGA,SAAH;AAAA,MAAcC,SAAd,SAAcA,SAAd;AAAA,SAA+BD,SAAS,IAAI,CAACC,SAAd,GAA0B,mBAA1B,GAAgDH,SAA/E;AAAA,CATsB;IAYbmB,UAAU,gBAAGtB,MAAM,CAACuB,IAAV;AAAA;AAAA,qEAIN;AAAA,MAAGhB,KAAH,UAAGA,KAAH;AAAA,SAAeA,KAAK,CAACE,KAAN,CAAYE,IAA3B;AAAA,CAJM,EAKnB;AAAA,MAAGJ,KAAH,UAAGA,KAAH;AAAA,MAAUiB,QAAV,UAAUA,QAAV;AAAA,SACAA,QAAQ,mCAEUjB,KAAK,CAACY,MAAN,CAAaC,MAAb,CAAoB,GAApB,CAFV,6CAKUb,KAAK,CAACY,MAAN,CAAaM,KAAb,CAAmB,GAAnB,CALV,UADR;AAAA,CALmB;IAeVC,gBAAgB,gBAAG1B,MAAM,CAACC,GAAV;AAAA;AAAA;;;;"}
|
package/esm/index.js
CHANGED
|
@@ -2,6 +2,7 @@ export { DSFormLayoutBlockItem, DSFormLayoutBlockItemWithSchema } from './form-l
|
|
|
2
2
|
export { DSFormLayoutCheckboxGroup, DSFormLayoutCheckboxGroupWithSchema } from './form-layout-checkbox-group/DSFormLayoutCheckboxGroup.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'react-desc';
|
|
5
|
+
import 'uid';
|
|
5
6
|
import './form-layout-block-item/propTypes.js';
|
|
6
7
|
import './form-layout-block-item/styles.js';
|
|
7
8
|
import 'styled-components';
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-layout-blocks",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.55.0-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Ellie Mae - Dim Sum - Form Layout Blocks",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"build": "node ../../scripts/build/build.js"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@elliemae/ds-props-helpers": "1.
|
|
19
|
+
"@elliemae/ds-props-helpers": "1.55.0-next.10",
|
|
20
20
|
"react-desc": "^4.1.2"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|