@pareto-engineering/design-system 4.0.0-alpha.62 → 4.0.0-alpha.64
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/dist/cjs/f/common/Description/Description.js +6 -5
- package/dist/cjs/f/common/Label/Label.js +9 -22
- package/dist/cjs/f/common/Label/styles.scss +0 -5
- package/dist/cjs/f/common/index.js +1 -9
- package/dist/cjs/f/fields/Checkbox/Checkbox.js +16 -21
- package/dist/cjs/f/fields/Checkbox/styles.scss +7 -5
- package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js +13 -23
- package/dist/cjs/f/fields/ChoicesInput/styles.scss +44 -41
- package/dist/cjs/f/fields/EditorInput/EditorInput.js +11 -39
- package/dist/cjs/f/fields/EditorInput/styles.scss +92 -90
- package/dist/cjs/f/fields/LinkInput/LinkInput.js +14 -20
- package/dist/cjs/f/fields/LinkInput/styles.scss +52 -51
- package/dist/cjs/f/fields/QueryChoices/QueryChoices.js +2 -26
- package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js +4 -30
- package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +7 -16
- package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +9 -17
- package/dist/cjs/f/fields/QueryCombobox/styles.scss +38 -37
- package/dist/cjs/f/fields/QuerySelect/QuerySelect.js +2 -10
- package/dist/cjs/f/fields/RatingsInput/RatingsInput.js +14 -38
- package/dist/cjs/f/fields/RatingsInput/styles.scss +5 -1
- package/dist/cjs/f/fields/SelectInput/SelectInput.js +14 -36
- package/dist/cjs/f/fields/SelectInput/styles.scss +5 -2
- package/dist/cjs/f/fields/TextInput/TextInput.js +19 -37
- package/dist/cjs/f/fields/TextInput/styles.scss +37 -30
- package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +15 -37
- package/dist/cjs/f/fields/TextareaInput/styles.scss +30 -27
- package/dist/es/f/common/Description/Description.js +4 -1
- package/dist/es/f/common/Label/Label.js +15 -24
- package/dist/es/f/common/Label/styles.scss +0 -5
- package/dist/es/f/common/index.js +0 -1
- package/dist/es/f/fields/Checkbox/Checkbox.js +14 -19
- package/dist/es/f/fields/Checkbox/styles.scss +7 -5
- package/dist/es/f/fields/ChoicesInput/ChoicesInput.js +31 -39
- package/dist/es/f/fields/ChoicesInput/styles.scss +44 -41
- package/dist/es/f/fields/EditorInput/EditorInput.js +12 -35
- package/dist/es/f/fields/EditorInput/styles.scss +92 -90
- package/dist/es/f/fields/LinkInput/LinkInput.js +14 -20
- package/dist/es/f/fields/LinkInput/styles.scss +52 -51
- package/dist/es/f/fields/QueryChoices/QueryChoices.js +2 -26
- package/dist/es/f/fields/QueryCombobox/QueryCombobox.js +4 -26
- package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +8 -17
- package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +10 -18
- package/dist/es/f/fields/QueryCombobox/styles.scss +38 -37
- package/dist/es/f/fields/QuerySelect/QuerySelect.js +2 -10
- package/dist/es/f/fields/RatingsInput/RatingsInput.js +15 -35
- package/dist/es/f/fields/RatingsInput/styles.scss +5 -1
- package/dist/es/f/fields/SelectInput/SelectInput.js +14 -36
- package/dist/es/f/fields/SelectInput/styles.scss +5 -2
- package/dist/es/f/fields/TextInput/TextInput.js +19 -37
- package/dist/es/f/fields/TextInput/styles.scss +37 -30
- package/dist/es/f/fields/TextareaInput/TextareaInput.js +15 -37
- package/dist/es/f/fields/TextareaInput/styles.scss +30 -27
- package/package.json +3 -3
- package/src/stories/f/Checkbox.stories.jsx +13 -21
- package/src/stories/f/ChoicesInput.stories.jsx +12 -27
- package/src/stories/f/EditorInput.stories.jsx +7 -14
- package/src/stories/f/LinkInput.stories.jsx +15 -22
- package/src/stories/f/QueryChoices.stories.jsx +12 -19
- package/src/stories/f/QueryCombobox.stories.jsx +16 -24
- package/src/stories/f/QuerySelect.stories.jsx +12 -19
- package/src/stories/f/RatingsInput.stories.jsx +7 -14
- package/src/stories/f/SelectInput.stories.jsx +12 -19
- package/src/stories/f/TextInput.stories.jsx +16 -23
- package/src/stories/f/TextareaInput.stories.jsx +7 -14
- package/src/ui/f/common/Description/Description.jsx +6 -2
- package/src/ui/f/common/Label/Label.jsx +27 -37
- package/src/ui/f/common/Label/styles.scss +0 -5
- package/src/ui/f/common/index.js +0 -1
- package/src/ui/f/fields/Checkbox/Checkbox.jsx +27 -33
- package/src/ui/f/fields/Checkbox/styles.scss +7 -5
- package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx +29 -38
- package/src/ui/f/fields/ChoicesInput/styles.scss +44 -41
- package/src/ui/f/fields/EditorInput/EditorInput.jsx +16 -41
- package/src/ui/f/fields/EditorInput/styles.scss +92 -90
- package/src/ui/f/fields/LinkInput/LinkInput.jsx +38 -45
- package/src/ui/f/fields/LinkInput/styles.scss +52 -51
- package/src/ui/f/fields/QueryChoices/QueryChoices.jsx +0 -28
- package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx +5 -31
- package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx +35 -46
- package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx +63 -73
- package/src/ui/f/fields/QueryCombobox/styles.scss +38 -37
- package/src/ui/f/fields/QuerySelect/QuerySelect.jsx +0 -8
- package/src/ui/f/fields/RatingsInput/RatingsInput.jsx +20 -47
- package/src/ui/f/fields/RatingsInput/styles.scss +5 -1
- package/src/ui/f/fields/SelectInput/SelectInput.jsx +33 -61
- package/src/ui/f/fields/SelectInput/styles.scss +5 -2
- package/src/ui/f/fields/TextInput/TextInput.jsx +27 -50
- package/src/ui/f/fields/TextInput/styles.scss +37 -30
- package/src/ui/f/fields/TextareaInput/TextareaInput.jsx +32 -59
- package/src/ui/f/fields/TextareaInput/styles.scss +30 -27
- package/tests/__snapshots__/Storyshots.test.js.snap +5909 -0
- package/dist/cjs/f/common/InputWrapper/InputWrapper.js +0 -73
- package/dist/cjs/f/common/InputWrapper/index.js +0 -13
- package/dist/cjs/f/common/InputWrapper/styles.scss +0 -13
- package/dist/es/f/common/InputWrapper/InputWrapper.js +0 -61
- package/dist/es/f/common/InputWrapper/index.js +0 -2
- package/dist/es/f/common/InputWrapper/styles.scss +0 -13
- package/src/ui/f/common/InputWrapper/InputWrapper.jsx +0 -83
- package/src/ui/f/common/InputWrapper/index.js +0 -2
- package/src/ui/f/common/InputWrapper/styles.scss +0 -13
|
@@ -4,16 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var React = _react;
|
|
8
9
|
var _formik = require("formik");
|
|
9
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
11
|
var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
|
|
11
|
-
require("./styles.scss");
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
-
/* @pareto-engineering/generator-front 1.0.12 */
|
|
16
|
-
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /* @pareto-engineering/generator-front 1.0.12 */
|
|
17
15
|
// Local Definitions
|
|
18
16
|
|
|
19
17
|
const baseClassName = _exports.default.base;
|
|
@@ -32,6 +30,9 @@ const Description = _ref => {
|
|
|
32
30
|
color
|
|
33
31
|
// ...otherProps
|
|
34
32
|
} = _ref;
|
|
33
|
+
(0, _react.useInsertionEffect)(() => {
|
|
34
|
+
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
35
|
+
}, []);
|
|
35
36
|
const [, meta] = (0, _formik.useField)(name);
|
|
36
37
|
const hasError = meta.touched && meta.error;
|
|
37
38
|
if (hasError || description) {
|
|
@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var React = _react;
|
|
8
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
10
|
var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
|
|
10
|
-
require("./styles.scss");
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
-
/* @pareto-engineering/generator-front 1.0.12 */
|
|
15
|
-
|
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /* @pareto-engineering/generator-front 1.0.12 */
|
|
16
14
|
// Local Definitions
|
|
17
15
|
|
|
18
16
|
const baseClassName = _exports.default.base;
|
|
@@ -30,20 +28,17 @@ const Label = _ref => {
|
|
|
30
28
|
name,
|
|
31
29
|
color,
|
|
32
30
|
optional,
|
|
33
|
-
as: Wrapper
|
|
34
|
-
columnSpan,
|
|
35
|
-
desktopColumnSpan
|
|
31
|
+
as: Wrapper
|
|
36
32
|
// ...otherProps
|
|
37
33
|
} = _ref;
|
|
34
|
+
(0, _react.useInsertionEffect)(() => {
|
|
35
|
+
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
36
|
+
}, []);
|
|
38
37
|
return /*#__PURE__*/React.createElement(Wrapper, {
|
|
39
38
|
htmlFor: Wrapper === 'label' ? name : undefined,
|
|
40
39
|
id: id,
|
|
41
40
|
className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
|
|
42
|
-
style:
|
|
43
|
-
...style,
|
|
44
|
-
'--column-span': columnSpan || 'var(--columns)',
|
|
45
|
-
'--column-span-md': desktopColumnSpan || 'var(--columns)'
|
|
46
|
-
}
|
|
41
|
+
style: style
|
|
47
42
|
// {...otherProps}
|
|
48
43
|
}, children, optional && ' (Optional)');
|
|
49
44
|
};
|
|
@@ -79,15 +74,7 @@ Label.propTypes = {
|
|
|
79
74
|
/**
|
|
80
75
|
* Whether the input should have an optional tag
|
|
81
76
|
*/
|
|
82
|
-
optional: _propTypes.default.bool
|
|
83
|
-
/**
|
|
84
|
-
* How many columns the input should span
|
|
85
|
-
*/
|
|
86
|
-
columnSpan: _propTypes.default.number,
|
|
87
|
-
/**
|
|
88
|
-
* How many columns the input should span on desktop
|
|
89
|
-
*/
|
|
90
|
-
desktopColumnSpan: _propTypes.default.number
|
|
77
|
+
optional: _propTypes.default.bool
|
|
91
78
|
};
|
|
92
79
|
Label.defaultProps = {
|
|
93
80
|
as: 'label',
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
var _exportNames = {
|
|
7
7
|
FormLabel: true,
|
|
8
8
|
FormDescription: true,
|
|
9
|
-
FormDebugger: true
|
|
10
|
-
InputWrapper: true
|
|
9
|
+
FormDebugger: true
|
|
11
10
|
};
|
|
12
11
|
Object.defineProperty(exports, "FormDebugger", {
|
|
13
12
|
enumerable: true,
|
|
@@ -27,16 +26,9 @@ Object.defineProperty(exports, "FormLabel", {
|
|
|
27
26
|
return _Label.Label;
|
|
28
27
|
}
|
|
29
28
|
});
|
|
30
|
-
Object.defineProperty(exports, "InputWrapper", {
|
|
31
|
-
enumerable: true,
|
|
32
|
-
get: function () {
|
|
33
|
-
return _InputWrapper.InputWrapper;
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
29
|
var _Label = require("./Label");
|
|
37
30
|
var _Description = require("./Description");
|
|
38
31
|
var _Debugger = require("./Debugger");
|
|
39
|
-
var _InputWrapper = require("./InputWrapper");
|
|
40
32
|
var _utils = require("./utils");
|
|
41
33
|
Object.keys(_utils).forEach(function (key) {
|
|
42
34
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -4,16 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var React = _react;
|
|
8
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
10
|
var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
|
|
10
11
|
var _formik = require("formik");
|
|
11
12
|
var _common = require("../../common");
|
|
12
|
-
require("./styles.scss");
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
14
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* @pareto-engineering/generator-front 1.0.12 */
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /* @pareto-engineering/generator-front 1.0.12 */
|
|
17
17
|
// Local Definitions
|
|
18
18
|
|
|
19
19
|
const baseClassName = _exports.default.base;
|
|
@@ -32,31 +32,26 @@ const Checkbox = _ref => {
|
|
|
32
32
|
description,
|
|
33
33
|
disabled,
|
|
34
34
|
optional,
|
|
35
|
-
labelColor
|
|
36
|
-
labelSpan,
|
|
37
|
-
desktopLabelSpan,
|
|
38
|
-
inputSpan,
|
|
39
|
-
desktopInputSpan
|
|
35
|
+
labelColor
|
|
40
36
|
// ...otherProps
|
|
41
37
|
} = _ref;
|
|
38
|
+
(0, _react.useInsertionEffect)(() => {
|
|
39
|
+
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
40
|
+
}, []);
|
|
42
41
|
const [field] = (0, _formik.useField)({
|
|
43
42
|
name,
|
|
44
43
|
type: 'checkbox'
|
|
45
44
|
});
|
|
46
|
-
return /*#__PURE__*/React.createElement(
|
|
45
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
46
|
+
id: id,
|
|
47
|
+
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
|
|
48
|
+
style: style
|
|
49
|
+
}, label && /*#__PURE__*/React.createElement(_common.FormLabel, {
|
|
47
50
|
name: name,
|
|
48
51
|
color: labelColor,
|
|
49
|
-
optional: optional
|
|
50
|
-
columnSpan: labelSpan,
|
|
51
|
-
desktopColumnSpan: desktopLabelSpan
|
|
52
|
+
optional: optional
|
|
52
53
|
// {...otherProps}
|
|
53
|
-
}, label), /*#__PURE__*/React.createElement(
|
|
54
|
-
id: id,
|
|
55
|
-
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
|
|
56
|
-
style: style,
|
|
57
|
-
columnSpan: inputSpan,
|
|
58
|
-
desktopColumnSpan: desktopInputSpan
|
|
59
|
-
}, /*#__PURE__*/React.createElement("input", _extends({
|
|
54
|
+
}, label), /*#__PURE__*/React.createElement("input", _extends({
|
|
60
55
|
id: name,
|
|
61
56
|
className: "input",
|
|
62
57
|
type: "checkbox",
|
|
@@ -65,7 +60,7 @@ const Checkbox = _ref => {
|
|
|
65
60
|
className: "s-1",
|
|
66
61
|
description: description,
|
|
67
62
|
name: name
|
|
68
|
-
}))
|
|
63
|
+
}));
|
|
69
64
|
};
|
|
70
65
|
Checkbox.propTypes = {
|
|
71
66
|
/**
|
|
@@ -5,10 +5,12 @@
|
|
|
5
5
|
@use "@pareto-engineering/styles/src/globals" as *;
|
|
6
6
|
|
|
7
7
|
.#{bem.$base}.checkbox {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
align-items: flex-start;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
|
|
13
|
+
> .#{bem.$base}.form-label {
|
|
14
|
+
margin-bottom: var(--gap);
|
|
13
15
|
}
|
|
14
16
|
}
|
|
@@ -10,11 +10,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
10
10
|
var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
|
|
11
11
|
var _common = require("./common");
|
|
12
12
|
var _common2 = require("../../common");
|
|
13
|
-
require("./styles.scss");
|
|
14
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
15
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
16
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
|
|
18
17
|
const baseClassName = _exports.default.base;
|
|
19
18
|
const componentClassName = 'choices-input';
|
|
20
19
|
|
|
@@ -37,26 +36,21 @@ const ChoicesInput = _ref => {
|
|
|
37
36
|
disabled,
|
|
38
37
|
description,
|
|
39
38
|
spaceBetween,
|
|
40
|
-
labelSpan,
|
|
41
|
-
desktopLabelSpan,
|
|
42
|
-
inputSpan,
|
|
43
|
-
desktopInputSpan,
|
|
44
39
|
...otherProps
|
|
45
40
|
} = _ref;
|
|
46
|
-
|
|
41
|
+
(0, _react.useInsertionEffect)(() => {
|
|
42
|
+
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
43
|
+
}, []);
|
|
44
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
45
|
+
id: id,
|
|
46
|
+
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
|
|
47
|
+
style: style
|
|
48
|
+
}, label && /*#__PURE__*/React.createElement(_common2.FormLabel, {
|
|
47
49
|
name: name,
|
|
48
50
|
color: labelColor,
|
|
49
|
-
optional: optional
|
|
50
|
-
columnSpan: labelSpan,
|
|
51
|
-
desktopColumnSpan: desktopLabelSpan
|
|
51
|
+
optional: optional
|
|
52
52
|
// {...otherProps}
|
|
53
|
-
}, label), /*#__PURE__*/React.createElement(
|
|
54
|
-
id: id,
|
|
55
|
-
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
|
|
56
|
-
style: style,
|
|
57
|
-
columnSpan: inputSpan,
|
|
58
|
-
desktopColumnSpan: desktopInputSpan
|
|
59
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
}, label), /*#__PURE__*/React.createElement("div", {
|
|
60
54
|
className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
|
|
61
55
|
}, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
|
|
62
56
|
className: `x-${color}`,
|
|
@@ -70,7 +64,7 @@ const ChoicesInput = _ref => {
|
|
|
70
64
|
className: "s-1",
|
|
71
65
|
description: description,
|
|
72
66
|
name: name
|
|
73
|
-
}))
|
|
67
|
+
}));
|
|
74
68
|
};
|
|
75
69
|
ChoicesInput.propTypes = {
|
|
76
70
|
/**
|
|
@@ -108,10 +102,6 @@ ChoicesInput.propTypes = {
|
|
|
108
102
|
* how many columns should be displayed on the mobile grid
|
|
109
103
|
*/
|
|
110
104
|
gridColumnsMobile: _propTypes.default.number,
|
|
111
|
-
/**
|
|
112
|
-
* how many columns should be displayed on the desktop grid
|
|
113
|
-
*/
|
|
114
|
-
gridColumnsDesktop: _propTypes.default.number,
|
|
115
105
|
/**
|
|
116
106
|
* The choice color
|
|
117
107
|
*/
|
|
@@ -18,59 +18,62 @@ $default-background: var(--background-inputs);
|
|
|
18
18
|
$disabled-background: var(--background-inputs-30);
|
|
19
19
|
|
|
20
20
|
.#{bem.$base}.choices-input {
|
|
21
|
-
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
|
|
24
|
+
> .#{bem.$base}.form-label {
|
|
25
|
+
margin-bottom: var(--gap);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
> .choices {
|
|
22
29
|
display: flex;
|
|
23
|
-
flex-
|
|
30
|
+
flex-wrap: wrap;
|
|
31
|
+
gap: $default-flex-separator;
|
|
24
32
|
|
|
25
|
-
|
|
33
|
+
&.space-between {
|
|
34
|
+
justify-content: space-between;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
>.choice {
|
|
26
38
|
display: flex;
|
|
27
|
-
flex-wrap: wrap;
|
|
28
|
-
gap: $default-flex-separator;
|
|
29
39
|
|
|
30
|
-
|
|
31
|
-
|
|
40
|
+
input {
|
|
41
|
+
opacity: 0;
|
|
42
|
+
position: fixed;
|
|
43
|
+
visibility: none;
|
|
44
|
+
z-index: -1;
|
|
32
45
|
}
|
|
33
46
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
input {
|
|
38
|
-
opacity: 0;
|
|
39
|
-
position: fixed;
|
|
40
|
-
visibility: none;
|
|
41
|
-
z-index: -1;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
input:disabled + label {
|
|
45
|
-
background-color: $disabled-background;
|
|
46
|
-
}
|
|
47
|
+
input:disabled + label {
|
|
48
|
+
background-color: $disabled-background;
|
|
49
|
+
}
|
|
47
50
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
51
|
+
> label {
|
|
52
|
+
background-color: $default-background;
|
|
53
|
+
border: $default-border;
|
|
54
|
+
border-radius: $default-input-border-radius;
|
|
55
|
+
color: var(--paragraph);
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
display: block;
|
|
58
|
+
height: $default-label-height;
|
|
59
|
+
max-width: 100%;
|
|
60
|
+
padding: $default-label-padding;
|
|
61
|
+
position: relative;
|
|
62
|
+
transition: $default-transition;
|
|
63
|
+
white-space: nowrap;
|
|
61
64
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
65
|
+
&:not(.disabled) {
|
|
66
|
+
&:hover {
|
|
67
|
+
border: $hover-border;
|
|
66
68
|
}
|
|
67
69
|
}
|
|
70
|
+
}
|
|
68
71
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
72
|
+
input:checked + label {
|
|
73
|
+
background: var(--x);
|
|
74
|
+
color: var(--on-x);
|
|
73
75
|
}
|
|
74
76
|
}
|
|
75
77
|
}
|
|
76
78
|
}
|
|
79
|
+
|
|
@@ -19,17 +19,11 @@ var _link = require("@lexical/link");
|
|
|
19
19
|
var _list = require("@lexical/list");
|
|
20
20
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
21
21
|
var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
|
|
22
|
-
require("./styles.scss");
|
|
23
22
|
var _common = require("../../common");
|
|
24
23
|
var _common2 = require("./common");
|
|
25
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
26
25
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
27
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
28
|
-
/* @pareto-engineering/generator-front 1.0.12 */
|
|
29
|
-
/* eslint-disable import/no-extraneous-dependencies -- required here */
|
|
30
|
-
|
|
31
|
-
// Local Definitions
|
|
32
|
-
|
|
26
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /* @pareto-engineering/generator-front 1.0.12 */ /* eslint-disable import/no-extraneous-dependencies -- required here */ // Local Definitions
|
|
33
27
|
const baseClassName = _exports.default.base;
|
|
34
28
|
const componentClassName = 'editor-input';
|
|
35
29
|
|
|
@@ -51,13 +45,12 @@ const EditorInput = _ref => {
|
|
|
51
45
|
labelColor,
|
|
52
46
|
description,
|
|
53
47
|
disabled,
|
|
54
|
-
labelSpan,
|
|
55
|
-
desktopLabelSpan,
|
|
56
|
-
inputSpan,
|
|
57
|
-
desktopInputSpan,
|
|
58
48
|
showDebugger
|
|
59
49
|
// ...otherProps
|
|
60
50
|
} = _ref;
|
|
51
|
+
(0, _react.useInsertionEffect)(() => {
|
|
52
|
+
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
53
|
+
}, []);
|
|
61
54
|
const formik = (0, _formik.useFormikContext)();
|
|
62
55
|
const setInitialValue = () => {
|
|
63
56
|
const value = formik.values[name];
|
|
@@ -115,24 +108,19 @@ const EditorInput = _ref => {
|
|
|
115
108
|
};
|
|
116
109
|
return /*#__PURE__*/React.createElement(_LexicalComposer.LexicalComposer, {
|
|
117
110
|
initialConfig: initialConfig
|
|
118
|
-
}, /*#__PURE__*/React.createElement(
|
|
119
|
-
name: name,
|
|
120
|
-
color: labelColor,
|
|
121
|
-
optional: optional,
|
|
122
|
-
columnSpan: labelSpan,
|
|
123
|
-
desktopColumnSpan: desktopLabelSpan
|
|
124
|
-
// {...otherProps}
|
|
125
|
-
}, label), /*#__PURE__*/React.createElement(_common.InputWrapper, {
|
|
111
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
126
112
|
id: id,
|
|
127
113
|
className: [baseClassName, componentClassName, userClassName, `y-${color}`, disabled && 'disabled'].filter(e => e).join(' '),
|
|
128
114
|
style: {
|
|
129
115
|
...style,
|
|
130
116
|
'--resize': resize,
|
|
131
117
|
'--rows': `${rows}em`
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
118
|
+
}
|
|
119
|
+
}, /*#__PURE__*/React.createElement(_common.FormLabel, {
|
|
120
|
+
name: name,
|
|
121
|
+
color: labelColor,
|
|
122
|
+
optional: optional
|
|
123
|
+
}, label), !disabled && /*#__PURE__*/React.createElement(_common2.Toolbar, null), /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
|
|
136
124
|
contentEditable: /*#__PURE__*/React.createElement(_LexicalContentEditable.ContentEditable, {
|
|
137
125
|
id: name,
|
|
138
126
|
className: "content-editable"
|
|
@@ -195,22 +183,6 @@ EditorInput.propTypes = {
|
|
|
195
183
|
* Whether the input is optional or not
|
|
196
184
|
*/
|
|
197
185
|
optional: _propTypes.default.bool,
|
|
198
|
-
/**
|
|
199
|
-
* The number of columns the label should span
|
|
200
|
-
*/
|
|
201
|
-
labelSpan: _propTypes.default.number,
|
|
202
|
-
/**
|
|
203
|
-
* The number of columns the input should span
|
|
204
|
-
*/
|
|
205
|
-
inputSpan: _propTypes.default.number,
|
|
206
|
-
/**
|
|
207
|
-
* The number of columns the label should span on desktop
|
|
208
|
-
*/
|
|
209
|
-
desktopLabelSpan: _propTypes.default.number,
|
|
210
|
-
/**
|
|
211
|
-
* The number of columns the input should span on desktop
|
|
212
|
-
*/
|
|
213
|
-
desktopInputSpan: _propTypes.default.number,
|
|
214
186
|
/**
|
|
215
187
|
* The resize property of the text area
|
|
216
188
|
*/
|