@pareto-engineering/design-system 4.0.0-alpha.22 → 4.0.0-alpha.24
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/a/AppContext/useTheme.js +0 -10
- package/dist/cjs/a/BlurOverlay/BlurOverlay.js +59 -0
- package/dist/cjs/a/BlurOverlay/index.js +13 -0
- package/dist/cjs/a/BlurOverlay/styles.scss +31 -0
- package/dist/cjs/a/ContentTree/styles.scss +2 -1
- package/dist/cjs/a/Conversation/common/Message/Message.js +7 -2
- package/dist/cjs/a/Conversation/styles.scss +23 -1
- package/dist/cjs/a/MetaCard/MetaCard.js +8 -3
- package/dist/cjs/a/MetaCard/styles.scss +15 -0
- package/dist/cjs/a/index.js +7 -0
- package/dist/cjs/b/Button/Button.js +1 -0
- package/dist/cjs/b/Button/common/WithLink/WithLink.js +60 -0
- package/dist/cjs/b/Button/common/WithLink/index.js +13 -0
- package/dist/cjs/b/Button/common/WithLink/styles.scss +9 -0
- package/dist/cjs/b/Button/common/index.js +8 -1
- package/dist/cjs/b/Button/styles.scss +4 -4
- package/dist/cjs/b/Card/common/Group/styles.scss +0 -4
- package/dist/cjs/b/Page/common/PageHelmet/PageHelmet.js +1 -1
- package/dist/cjs/b/ThemeSelector/ThemeSelector.js +3 -1
- package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js +5 -4
- package/dist/cjs/f/fields/ChoicesInput/styles.scss +6 -0
- package/dist/cjs/f/fields/SelectInput/styles.scss +4 -3
- package/dist/cjs/f/fields/TextInput/styles.scss +3 -2
- package/dist/es/a/AppContext/useTheme.js +0 -10
- package/dist/es/a/BlurOverlay/BlurOverlay.js +51 -0
- package/dist/es/a/BlurOverlay/index.js +2 -0
- package/dist/es/a/BlurOverlay/styles.scss +31 -0
- package/dist/es/a/ContentTree/styles.scss +2 -1
- package/dist/es/a/Conversation/common/Message/Message.js +7 -2
- package/dist/es/a/Conversation/styles.scss +23 -1
- package/dist/es/a/MetaCard/MetaCard.js +8 -3
- package/dist/es/a/MetaCard/styles.scss +15 -0
- package/dist/es/a/index.js +1 -0
- package/dist/es/b/Button/Button.js +2 -1
- package/dist/es/b/Button/common/WithLink/WithLink.js +52 -0
- package/dist/es/b/Button/common/WithLink/index.js +1 -0
- package/dist/es/b/Button/common/WithLink/styles.scss +9 -0
- package/dist/es/b/Button/common/index.js +2 -1
- package/dist/es/b/Button/styles.scss +4 -4
- package/dist/es/b/Card/common/Group/styles.scss +0 -4
- package/dist/es/b/Page/common/PageHelmet/PageHelmet.js +1 -1
- package/dist/es/b/ThemeSelector/ThemeSelector.js +3 -1
- package/dist/es/f/fields/ChoicesInput/ChoicesInput.js +5 -4
- package/dist/es/f/fields/ChoicesInput/styles.scss +6 -0
- package/dist/es/f/fields/SelectInput/styles.scss +4 -3
- package/dist/es/f/fields/TextInput/styles.scss +3 -2
- package/package.json +5 -4
- package/src/stories/a/BlurOverlay.stories.jsx +39 -0
- package/src/stories/b/Button/WithLink.stories.jsx +38 -0
- package/src/ui/a/AppContext/useTheme.js +0 -11
- package/src/ui/a/BlurOverlay/BlurOverlay.jsx +75 -0
- package/src/ui/a/BlurOverlay/index.js +2 -0
- package/src/ui/a/BlurOverlay/styles.scss +31 -0
- package/src/ui/a/ContentTree/styles.scss +2 -1
- package/src/ui/a/Conversation/common/Message/Message.jsx +10 -4
- package/src/ui/a/Conversation/styles.scss +23 -1
- package/src/ui/a/MetaCard/MetaCard.jsx +7 -0
- package/src/ui/a/MetaCard/styles.scss +15 -0
- package/src/ui/a/index.js +1 -0
- package/src/ui/b/Button/Button.jsx +2 -1
- package/src/ui/b/Button/common/WithLink/WithLink.jsx +80 -0
- package/src/ui/b/Button/common/WithLink/index.js +1 -0
- package/src/ui/b/Button/common/WithLink/styles.scss +9 -0
- package/src/ui/b/Button/common/index.js +1 -0
- package/src/ui/b/Button/styles.scss +4 -4
- package/src/ui/b/Card/common/Group/styles.scss +0 -4
- package/src/ui/b/Page/common/PageHelmet/PageHelmet.jsx +1 -1
- package/src/ui/b/ThemeSelector/ThemeSelector.jsx +3 -1
- package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx +4 -2
- package/src/ui/f/fields/ChoicesInput/styles.scss +6 -0
- package/src/ui/f/fields/SelectInput/styles.scss +4 -3
- package/src/ui/f/fields/TextInput/styles.scss +3 -2
- package/tests/__snapshots__/Storyshots.test.js.snap +672 -2
|
@@ -28,16 +28,6 @@ var _default = function _default(initialTheme) {
|
|
|
28
28
|
setUserTheme('light');
|
|
29
29
|
}
|
|
30
30
|
}, [preferredTheme, isClient]);
|
|
31
|
-
(0, _react.useEffect)(() => {
|
|
32
|
-
const fav_theme = userTheme === 'dark' ? 'favicon-dark' : 'favicon-light';
|
|
33
|
-
let link = document.querySelector("link[rel~='icon']");
|
|
34
|
-
if (!link) {
|
|
35
|
-
link = document.createElement('link');
|
|
36
|
-
link.rel = 'icon';
|
|
37
|
-
document.getElementsByTagName('head')[0].appendChild(link);
|
|
38
|
-
}
|
|
39
|
-
link.href = `/${fav_theme}.svg`;
|
|
40
|
-
}, [userTheme]);
|
|
41
31
|
const isTheme = (0, _react.useCallback)(theme => userTheme === theme || undefined, [userTheme]);
|
|
42
32
|
return {
|
|
43
33
|
userTheme,
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
12
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /* @pareto-engineering/generator-front 1.1.1-alpha.1 */
|
|
13
|
+
const baseClassName = _exports.default.base;
|
|
14
|
+
const componentClassName = 'blur-overlay';
|
|
15
|
+
const BlurOverlay = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
id,
|
|
18
|
+
className: userClassName,
|
|
19
|
+
style,
|
|
20
|
+
children,
|
|
21
|
+
blur
|
|
22
|
+
} = _ref;
|
|
23
|
+
(0, React.useInsertionEffect)(() => {
|
|
24
|
+
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
25
|
+
}, []);
|
|
26
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
27
|
+
id: id,
|
|
28
|
+
className: [baseClassName, componentClassName, userClassName, blur && _exports.default.modifierActive].filter(e => e).join(' '),
|
|
29
|
+
style: style
|
|
30
|
+
}, children);
|
|
31
|
+
};
|
|
32
|
+
BlurOverlay.propTypes = {
|
|
33
|
+
/**
|
|
34
|
+
* The HTML id for this element
|
|
35
|
+
*/
|
|
36
|
+
id: _propTypes.default.string,
|
|
37
|
+
/**
|
|
38
|
+
* The HTML class names for this element
|
|
39
|
+
*/
|
|
40
|
+
className: _propTypes.default.string,
|
|
41
|
+
/**
|
|
42
|
+
* The React-written, css properties for this element.
|
|
43
|
+
*/
|
|
44
|
+
style: _propTypes.default.objectOf(_propTypes.default.string),
|
|
45
|
+
/**
|
|
46
|
+
* The children JSX
|
|
47
|
+
*/
|
|
48
|
+
children: _propTypes.default.node,
|
|
49
|
+
/**
|
|
50
|
+
* Boolean to toggle blur effect
|
|
51
|
+
*/
|
|
52
|
+
blur: _propTypes.default.bool
|
|
53
|
+
};
|
|
54
|
+
BlurOverlay.defaultProps = {
|
|
55
|
+
blur: true
|
|
56
|
+
// someProp:false
|
|
57
|
+
};
|
|
58
|
+
var _default = BlurOverlay;
|
|
59
|
+
exports.default = _default;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "BlurOverlay", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _BlurOverlay.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _BlurOverlay = _interopRequireDefault(require("./BlurOverlay"));
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
|
|
2
|
+
|
|
3
|
+
@use "@pareto-engineering/bem";
|
|
4
|
+
|
|
5
|
+
.#{bem.$base}.blur-overlay {
|
|
6
|
+
background: inherit;
|
|
7
|
+
left: 0;
|
|
8
|
+
position: fixed;
|
|
9
|
+
top: 0;
|
|
10
|
+
width: 100%;
|
|
11
|
+
z-index: 3;
|
|
12
|
+
&.#{bem.$modifier-active} {
|
|
13
|
+
animation: blurAnimation .3s ease-in-out;
|
|
14
|
+
backdrop-filter: blur(5px);
|
|
15
|
+
height: 100%;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@keyframes blurAnimation {
|
|
20
|
+
0% {
|
|
21
|
+
transform: translateX(-100%);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
1% {
|
|
25
|
+
transform: translateX(0);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
100% {
|
|
29
|
+
transform: translateX(0);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -6,11 +6,12 @@
|
|
|
6
6
|
$default-dot-size: .5em;
|
|
7
7
|
$default-margin: 1em;
|
|
8
8
|
$default-padding: 1em;
|
|
9
|
+
$default-navigation-height: 3.64rem;
|
|
9
10
|
|
|
10
11
|
.#{bem.$base}.content-tree {
|
|
11
12
|
> .#{bem.$base}.tree {
|
|
12
13
|
position: sticky;
|
|
13
|
-
top: var(--spacing-2);
|
|
14
|
+
top: calc($default-navigation-height + var(--spacing-2));
|
|
14
15
|
|
|
15
16
|
ul {
|
|
16
17
|
list-style: none;
|
|
@@ -27,6 +27,7 @@ const Message = _ref => {
|
|
|
27
27
|
className: userClassName,
|
|
28
28
|
style,
|
|
29
29
|
message,
|
|
30
|
+
customMessage,
|
|
30
31
|
sender,
|
|
31
32
|
from,
|
|
32
33
|
attachment,
|
|
@@ -46,7 +47,7 @@ const Message = _ref => {
|
|
|
46
47
|
className: "sender"
|
|
47
48
|
}, sender, ":"), /*#__PURE__*/React.createElement("div", {
|
|
48
49
|
className: "message-content"
|
|
49
|
-
}, /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
|
|
50
|
+
}, customMessage || /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
|
|
50
51
|
className: `attachment y-${attachmentColor}`
|
|
51
52
|
}, /*#__PURE__*/React.createElement("span", {
|
|
52
53
|
className: "icon"
|
|
@@ -68,7 +69,11 @@ Message.propTypes = {
|
|
|
68
69
|
/**
|
|
69
70
|
* The message in the conversation
|
|
70
71
|
*/
|
|
71
|
-
message: _propTypes.default.string
|
|
72
|
+
message: _propTypes.default.string,
|
|
73
|
+
/**
|
|
74
|
+
* The custom message if it uses more complex html
|
|
75
|
+
*/
|
|
76
|
+
customMessage: _propTypes.default.node,
|
|
72
77
|
/**
|
|
73
78
|
* The sender of the message
|
|
74
79
|
*/
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/* @pareto-engineering/generator-front 1.0.12 */
|
|
2
2
|
/* stylelint-disable selector-max-compound-selectors -- Required here */
|
|
3
|
+
/* stylelint-disable max-nesting-depth -- Required here */
|
|
4
|
+
/* stylelint-disable selector-max-universal -- Required here */
|
|
3
5
|
|
|
4
6
|
@use "@pareto-engineering/bem";
|
|
5
7
|
@use "@pareto-engineering/styles/src/mixins";
|
|
@@ -33,6 +35,7 @@ $default-message-border: 1px solid var(--hard-background-cards);
|
|
|
33
35
|
|
|
34
36
|
> .sender {
|
|
35
37
|
margin: 0;
|
|
38
|
+
padding: 0 var(--gap);
|
|
36
39
|
}
|
|
37
40
|
|
|
38
41
|
> .message-content {
|
|
@@ -47,6 +50,21 @@ $default-message-border: 1px solid var(--hard-background-cards);
|
|
|
47
50
|
color: var(--on-x);
|
|
48
51
|
}
|
|
49
52
|
|
|
53
|
+
> ul {
|
|
54
|
+
padding: 0 var(--gap);
|
|
55
|
+
text-align: left;
|
|
56
|
+
|
|
57
|
+
> li {
|
|
58
|
+
color: var(--on-x);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
> * {
|
|
63
|
+
&:not(:last-child) {
|
|
64
|
+
margin-bottom: 0;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
50
68
|
> .attachment {
|
|
51
69
|
align-items: center;
|
|
52
70
|
align-self: flex-end;
|
|
@@ -56,8 +74,12 @@ $default-message-border: 1px solid var(--hard-background-cards);
|
|
|
56
74
|
}
|
|
57
75
|
}
|
|
58
76
|
|
|
59
|
-
&.#{bem.$base}.
|
|
77
|
+
&.#{bem.$base}.theirs {
|
|
60
78
|
align-self: flex-end;
|
|
79
|
+
|
|
80
|
+
> .sender {
|
|
81
|
+
text-align: end;
|
|
82
|
+
}
|
|
61
83
|
}
|
|
62
84
|
}
|
|
63
85
|
}
|
|
@@ -24,14 +24,15 @@ const MetaCard = _ref => {
|
|
|
24
24
|
className: userClassName,
|
|
25
25
|
style,
|
|
26
26
|
children,
|
|
27
|
-
hasBackgroundBlur
|
|
27
|
+
hasBackgroundBlur,
|
|
28
|
+
spaced
|
|
28
29
|
} = _ref;
|
|
29
30
|
(0, React.useInsertionEffect)(() => {
|
|
30
31
|
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
31
32
|
}, []);
|
|
32
33
|
return /*#__PURE__*/React.createElement("div", {
|
|
33
34
|
id: id,
|
|
34
|
-
className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && _exports.default.modifierBlur].filter(e => e).join(' '),
|
|
35
|
+
className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && _exports.default.modifierBlur, spaced && _exports.default.modifierSpaced].filter(e => e).join(' '),
|
|
35
36
|
style: style
|
|
36
37
|
}, children);
|
|
37
38
|
};
|
|
@@ -51,7 +52,11 @@ MetaCard.propTypes = {
|
|
|
51
52
|
/**
|
|
52
53
|
* Whether the card has a background blur
|
|
53
54
|
* */
|
|
54
|
-
hasBackgroundBlur: _propTypes.default.bool
|
|
55
|
+
hasBackgroundBlur: _propTypes.default.bool,
|
|
56
|
+
/**
|
|
57
|
+
* Whether to apply a gap to the top and bottom
|
|
58
|
+
* */
|
|
59
|
+
spaced: _propTypes.default.bool
|
|
55
60
|
};
|
|
56
61
|
MetaCard.defaultProps = {
|
|
57
62
|
// someProp:false
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/* @pareto-engineering/generator-front 1.0.12 */
|
|
2
|
+
/* stylelint-disable selector-max-universal -- exception */
|
|
2
3
|
|
|
3
4
|
@use "@pareto-engineering/bem";
|
|
4
5
|
@use "@pareto-engineering/styles/src/mixins";
|
|
@@ -26,5 +27,19 @@ $default-blur: var(--theme-default-blur);
|
|
|
26
27
|
margin-left: calc((var(--gap)) * -1);
|
|
27
28
|
margin-right: calc((var(--gap)) * -1);
|
|
28
29
|
padding: 0 var(--gap);
|
|
30
|
+
|
|
31
|
+
&.#{bem.$modifier-spaced} {
|
|
32
|
+
padding: var(--gap);
|
|
33
|
+
|
|
34
|
+
> * {
|
|
35
|
+
&:first-child {
|
|
36
|
+
margin-top: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:last-child {
|
|
40
|
+
margin-bottom: 0;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
29
44
|
}
|
|
30
45
|
}
|
package/dist/cjs/a/index.js
CHANGED
|
@@ -27,6 +27,12 @@ Object.defineProperty(exports, "AppContextProvider", {
|
|
|
27
27
|
return _AppContext.AppContextProvider;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
+
Object.defineProperty(exports, "BlurOverlay", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return _BlurOverlay.BlurOverlay;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
30
36
|
Object.defineProperty(exports, "ContentTree", {
|
|
31
37
|
enumerable: true,
|
|
32
38
|
get: function () {
|
|
@@ -154,6 +160,7 @@ Object.defineProperty(exports, "useTheme", {
|
|
|
154
160
|
}
|
|
155
161
|
});
|
|
156
162
|
var _AppContext = require("./AppContext");
|
|
163
|
+
var _BlurOverlay = require("./BlurOverlay");
|
|
157
164
|
var _ContentTree = require("./ContentTree");
|
|
158
165
|
var _Conversation = require("./Conversation");
|
|
159
166
|
var _DotInfo = require("./DotInfo");
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
|
|
10
|
+
var _reactRouterDom = require("react-router-dom");
|
|
11
|
+
var _index = require("../../index");
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
14
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /* @pareto-engineering/generator-front 1.0.12 */
|
|
15
|
+
// Local Definitions
|
|
16
|
+
|
|
17
|
+
const baseClassName = _exports.default.base;
|
|
18
|
+
const componentClassName = 'button-with-link';
|
|
19
|
+
const WithLink = _ref => {
|
|
20
|
+
let {
|
|
21
|
+
id,
|
|
22
|
+
className: userClassName,
|
|
23
|
+
children,
|
|
24
|
+
path,
|
|
25
|
+
...otherProps
|
|
26
|
+
} = _ref;
|
|
27
|
+
(0, React.useInsertionEffect)(() => {
|
|
28
|
+
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
29
|
+
}, []);
|
|
30
|
+
return /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
|
|
31
|
+
to: path,
|
|
32
|
+
id: id,
|
|
33
|
+
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
|
|
34
|
+
}, /*#__PURE__*/React.createElement(_index.Button, otherProps, children));
|
|
35
|
+
};
|
|
36
|
+
WithLink.propTypes = {
|
|
37
|
+
/**
|
|
38
|
+
* The HTML id for this element
|
|
39
|
+
*/
|
|
40
|
+
id: _propTypes.default.string,
|
|
41
|
+
/**
|
|
42
|
+
* The HTML class names for this element
|
|
43
|
+
*/
|
|
44
|
+
className: _propTypes.default.string,
|
|
45
|
+
/**
|
|
46
|
+
* The React-written, css properties for this element.
|
|
47
|
+
*/
|
|
48
|
+
style: _propTypes.default.objectOf(_propTypes.default.string),
|
|
49
|
+
/**
|
|
50
|
+
* The children JSX
|
|
51
|
+
*/
|
|
52
|
+
children: _propTypes.default.node,
|
|
53
|
+
/**
|
|
54
|
+
* The path that this link would point to
|
|
55
|
+
*/
|
|
56
|
+
path: _propTypes.default.string
|
|
57
|
+
};
|
|
58
|
+
WithLink.defaultProps = {};
|
|
59
|
+
var _default = WithLink;
|
|
60
|
+
exports.default = _default;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "WithLink", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _WithLink.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _WithLink = _interopRequireDefault(require("./WithLink"));
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -9,4 +9,11 @@ Object.defineProperty(exports, "Group", {
|
|
|
9
9
|
return _Group.Group;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
|
|
12
|
+
Object.defineProperty(exports, "WithLink", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _WithLink.WithLink;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
var _Group = require("./Group");
|
|
19
|
+
var _WithLink = require("./WithLink");
|
|
@@ -113,8 +113,8 @@ $default-animation-time: .31s;
|
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
&:disabled {
|
|
116
|
-
border: 1px solid var(--
|
|
117
|
-
color: var(--
|
|
116
|
+
border: 1px solid var(--hard-disabled, var(--#{$default-color}));
|
|
117
|
+
color: var(--hard-disabled, var(--#{$default-color}));
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
|
|
@@ -150,12 +150,12 @@ $default-animation-time: .31s;
|
|
|
150
150
|
}
|
|
151
151
|
|
|
152
152
|
&:disabled {
|
|
153
|
-
color: var(--
|
|
153
|
+
color: var(--hard-disabled, var(--#{$default-color}));
|
|
154
154
|
}
|
|
155
155
|
}
|
|
156
156
|
|
|
157
157
|
&:disabled {
|
|
158
|
-
background: var(--
|
|
158
|
+
background: var(--hard-disabled);
|
|
159
159
|
filter: brightness(125%);
|
|
160
160
|
}
|
|
161
161
|
}
|
|
@@ -37,7 +37,9 @@ const ThemeSelector = _ref => {
|
|
|
37
37
|
const current = themes.indexOf(userTheme);
|
|
38
38
|
setPreferredTheme(themes[(current + 1) % themes.length]);
|
|
39
39
|
}, [userTheme]);
|
|
40
|
-
const
|
|
40
|
+
const current = userTheme ? themes.indexOf(userTheme) : 0;
|
|
41
|
+
const nextTheme = themes[(current + 1) % themes.length];
|
|
42
|
+
const themeText = nextTheme && nextTheme.charAt(0).toUpperCase() + nextTheme.slice(1);
|
|
41
43
|
return (
|
|
42
44
|
/*#__PURE__*/
|
|
43
45
|
// eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/no-static-element-interactions
|
|
@@ -34,8 +34,9 @@ const ChoicesInput = _ref => {
|
|
|
34
34
|
label,
|
|
35
35
|
optional,
|
|
36
36
|
disabled,
|
|
37
|
-
description
|
|
38
|
-
|
|
37
|
+
description,
|
|
38
|
+
spaceBetween,
|
|
39
|
+
...otherProps
|
|
39
40
|
} = _ref;
|
|
40
41
|
(0, React.useInsertionEffect)(() => {
|
|
41
42
|
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
@@ -53,7 +54,7 @@ const ChoicesInput = _ref => {
|
|
|
53
54
|
as: "p",
|
|
54
55
|
optional: optional
|
|
55
56
|
}, label), /*#__PURE__*/React.createElement("div", {
|
|
56
|
-
className:
|
|
57
|
+
className: ['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')
|
|
57
58
|
}, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
|
|
58
59
|
labelClassName: "with-faded-border",
|
|
59
60
|
key: choice.value,
|
|
@@ -62,7 +63,7 @@ const ChoicesInput = _ref => {
|
|
|
62
63
|
multiple: multiple,
|
|
63
64
|
validate: validate,
|
|
64
65
|
disabled: disabled
|
|
65
|
-
}, choice)))), /*#__PURE__*/React.createElement(_common2.FormDescription, {
|
|
66
|
+
}, otherProps, choice)))), /*#__PURE__*/React.createElement(_common2.FormDescription, {
|
|
66
67
|
className: "v50 mt-v s-1",
|
|
67
68
|
description: description,
|
|
68
69
|
name: name
|
|
@@ -16,6 +16,10 @@ $default-label-height: .5em;
|
|
|
16
16
|
flex-wrap: wrap;
|
|
17
17
|
gap: $default-flex-separator;
|
|
18
18
|
|
|
19
|
+
&.space-between {
|
|
20
|
+
justify-content: space-between;
|
|
21
|
+
}
|
|
22
|
+
|
|
19
23
|
>.choice {
|
|
20
24
|
display: flex;
|
|
21
25
|
|
|
@@ -33,6 +37,7 @@ $default-label-height: .5em;
|
|
|
33
37
|
> label {
|
|
34
38
|
background-color: var(--background-inputs);
|
|
35
39
|
border-radius: var(--theme-default-border-radius);
|
|
40
|
+
color: var(--paragraph);
|
|
36
41
|
cursor: pointer;
|
|
37
42
|
display: block;
|
|
38
43
|
height: $default-label-height;
|
|
@@ -40,6 +45,7 @@ $default-label-height: .5em;
|
|
|
40
45
|
padding: $default-label-padding;
|
|
41
46
|
position: relative;
|
|
42
47
|
transition: $default-transition;
|
|
48
|
+
white-space: nowrap;
|
|
43
49
|
|
|
44
50
|
&:hover {
|
|
45
51
|
box-shadow: var(--theme-default-input-box-shadow);
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
$default-spacing-size: 1em;
|
|
9
|
-
$default-padding: .
|
|
9
|
+
$default-padding: .5em;
|
|
10
10
|
$default-bg-gradient: var(--background-far);
|
|
11
11
|
$default-input-border-radius: var(--theme-default-input-border-radius);
|
|
12
12
|
|
|
@@ -21,7 +21,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
|
|
|
21
21
|
>.select-wrapper {
|
|
22
22
|
background-color: var(--background-inputs);
|
|
23
23
|
border-radius: $default-input-border-radius;
|
|
24
|
-
padding: $default-padding;
|
|
24
|
+
padding: $default-padding 0 $default-padding calc($default-padding * 1.5);
|
|
25
25
|
position: relative;
|
|
26
26
|
|
|
27
27
|
&::after {
|
|
@@ -40,7 +40,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
|
|
|
40
40
|
|
|
41
41
|
select {
|
|
42
42
|
appearance: none;
|
|
43
|
-
background-color:
|
|
43
|
+
background-color: transparent;
|
|
44
44
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
|
|
45
45
|
background-position: calc(100% - $default-spacing-size);
|
|
46
46
|
background-repeat: no-repeat;
|
|
@@ -48,6 +48,7 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
|
|
|
48
48
|
padding-right: $default-spacing-size;
|
|
49
49
|
|
|
50
50
|
&.input {
|
|
51
|
+
color: var(--paragraph);
|
|
51
52
|
width: 100%;
|
|
52
53
|
|
|
53
54
|
&:disabled {
|
|
@@ -8,7 +8,7 @@ $default-symbol-left: 1em;
|
|
|
8
8
|
$default-padding-with-symbol:
|
|
9
9
|
.75em
|
|
10
10
|
calc($default-symbol-left - 1em)
|
|
11
|
-
.
|
|
11
|
+
.75em
|
|
12
12
|
calc($default-symbol-left + 1em);
|
|
13
13
|
$default-input-border-radius: var(--theme-default-input-border-radius);
|
|
14
14
|
|
|
@@ -30,7 +30,8 @@ $default-input-border-radius: var(--theme-default-input-border-radius);
|
|
|
30
30
|
content: var(--symbol);
|
|
31
31
|
left: $default-symbol-left;
|
|
32
32
|
position: absolute;
|
|
33
|
-
top:
|
|
33
|
+
top: 50%;
|
|
34
|
+
transform: translate(-50%, -50%);
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
input {
|
|
@@ -21,16 +21,6 @@ export default ((initialTheme, storageKey = 'theme') => {
|
|
|
21
21
|
setUserTheme('light');
|
|
22
22
|
}
|
|
23
23
|
}, [preferredTheme, isClient]);
|
|
24
|
-
useEffect(() => {
|
|
25
|
-
const fav_theme = userTheme === 'dark' ? 'favicon-dark' : 'favicon-light';
|
|
26
|
-
let link = document.querySelector("link[rel~='icon']");
|
|
27
|
-
if (!link) {
|
|
28
|
-
link = document.createElement('link');
|
|
29
|
-
link.rel = 'icon';
|
|
30
|
-
document.getElementsByTagName('head')[0].appendChild(link);
|
|
31
|
-
}
|
|
32
|
-
link.href = `/${fav_theme}.svg`;
|
|
33
|
-
}, [userTheme]);
|
|
34
24
|
const isTheme = useCallback(theme => userTheme === theme || undefined, [userTheme]);
|
|
35
25
|
return {
|
|
36
26
|
userTheme,
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { useInsertionEffect } from 'react';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import styleNames from '@pareto-engineering/bem/exports';
|
|
6
|
+
const baseClassName = styleNames.base;
|
|
7
|
+
const componentClassName = 'blur-overlay';
|
|
8
|
+
const BlurOverlay = ({
|
|
9
|
+
id,
|
|
10
|
+
className: userClassName,
|
|
11
|
+
style,
|
|
12
|
+
children,
|
|
13
|
+
blur
|
|
14
|
+
}) => {
|
|
15
|
+
useInsertionEffect(() => {
|
|
16
|
+
import("./styles.scss");
|
|
17
|
+
}, []);
|
|
18
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
19
|
+
id: id,
|
|
20
|
+
className: [baseClassName, componentClassName, userClassName, blur && styleNames.modifierActive].filter(e => e).join(' '),
|
|
21
|
+
style: style
|
|
22
|
+
}, children);
|
|
23
|
+
};
|
|
24
|
+
BlurOverlay.propTypes = {
|
|
25
|
+
/**
|
|
26
|
+
* The HTML id for this element
|
|
27
|
+
*/
|
|
28
|
+
id: PropTypes.string,
|
|
29
|
+
/**
|
|
30
|
+
* The HTML class names for this element
|
|
31
|
+
*/
|
|
32
|
+
className: PropTypes.string,
|
|
33
|
+
/**
|
|
34
|
+
* The React-written, css properties for this element.
|
|
35
|
+
*/
|
|
36
|
+
style: PropTypes.objectOf(PropTypes.string),
|
|
37
|
+
/**
|
|
38
|
+
* The children JSX
|
|
39
|
+
*/
|
|
40
|
+
children: PropTypes.node,
|
|
41
|
+
/**
|
|
42
|
+
* Boolean to toggle blur effect
|
|
43
|
+
*/
|
|
44
|
+
blur: PropTypes.bool
|
|
45
|
+
};
|
|
46
|
+
BlurOverlay.defaultProps = {
|
|
47
|
+
blur: true
|
|
48
|
+
// someProp:false
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export default BlurOverlay;
|