akeneo-design-system 0.1.166 → 0.1.167
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/lib/components/Input/SelectInput/SelectInput.js +14 -9
- package/lib/components/Input/SelectInput/SelectInput.js.map +1 -1
- package/lib/components/Locale/Locale.js +22 -3
- package/lib/components/Locale/Locale.js.map +1 -1
- package/lib/components/ProgressIndicator/ProgressIndicator.d.ts +5 -4
- package/lib/components/ProgressIndicator/ProgressIndicator.js +18 -10
- package/lib/components/ProgressIndicator/ProgressIndicator.js.map +1 -1
- package/lib/components/SwitcherButton/SwitcherButton.js +10 -11
- package/lib/components/SwitcherButton/SwitcherButton.js.map +1 -1
- package/package.json +1 -1
- package/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-progress-indicator-disabled-correctly-1-snap.png +0 -0
- package/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-switcher-button-deletable-correctly-1-snap.png +0 -0
- package/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-switcher-button-flag-correctly-1-snap.png +0 -0
- package/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-switcher-button-inline-correctly-1-snap.png +0 -0
- package/src/components/Input/SelectInput/SelectInput.tsx +13 -5
- package/src/components/Locale/Locale.tsx +3 -2
- package/src/components/Modal/Modal.unit.tsx +13 -12
- package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx +18 -10
- package/src/components/ProgressIndicator/ProgressIndicator.tsx +32 -21
- package/src/components/ProgressIndicator/ProgressIndicator.unit.tsx +9 -6
- package/src/components/SwitcherButton/SwitcherButton.tsx +5 -12
|
@@ -54,6 +54,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
54
54
|
var shared_1 = require("../../../shared");
|
|
55
55
|
var common_1 = require("../common");
|
|
56
56
|
var components_1 = require("../../../components");
|
|
57
|
+
var TextInput_1 = require("../../../components/Input/TextInput/TextInput");
|
|
57
58
|
var hooks_1 = require("../../../hooks");
|
|
58
59
|
var theme_1 = require("../../../theme");
|
|
59
60
|
var icons_1 = require("../../../icons");
|
|
@@ -66,8 +67,12 @@ var SelectInputContainer = styled_components_1.default.div(templateObject_1 || (
|
|
|
66
67
|
return (null === value && readOnly ? (0, theme_1.getColor)('grey', 20) : 'transparent');
|
|
67
68
|
});
|
|
68
69
|
var InputContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n background: ", ";\n"], ["\n position: relative;\n background: ", ";\n"])), (0, theme_1.getColor)('white'));
|
|
69
|
-
var
|
|
70
|
-
var
|
|
70
|
+
var SearchInput = (0, styled_components_1.default)(TextInput_1.TextInput)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &::placeholder {\n opacity: ", ";\n }\n"], ["\n &::placeholder {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
71
|
+
var isPlaceholderVisible = _a.isPlaceholderVisible;
|
|
72
|
+
return (isPlaceholderVisible ? 1 : 0);
|
|
73
|
+
});
|
|
74
|
+
var ActionContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: 0;\n height: 100%;\n display: flex;\n align-items: center;\n gap: 10px;\n z-index: 2;\n"], ["\n position: absolute;\n right: 8px;\n top: 0;\n height: 100%;\n display: flex;\n align-items: center;\n gap: 10px;\n z-index: 2;\n"])));
|
|
75
|
+
var SelectedOptionContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 ", "px 0 16px;\n background: ", ";\n box-sizing: border-box;\n color: ", ";\n"], ["\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 ", "px 0 16px;\n background: ", ";\n box-sizing: border-box;\n color: ", ";\n"])), function (_a) {
|
|
71
76
|
var clearable = _a.clearable;
|
|
72
77
|
return (clearable ? 68 : 38);
|
|
73
78
|
}, function (_a) {
|
|
@@ -77,10 +82,10 @@ var SelectedOptionContainer = styled_components_1.default.div(templateObject_4 |
|
|
|
77
82
|
var readOnly = _a.readOnly;
|
|
78
83
|
return (readOnly ? (0, theme_1.getColor)('grey', 100) : (0, theme_1.getColor)('grey', 140));
|
|
79
84
|
});
|
|
80
|
-
var OptionContainer = styled_components_1.default.div(
|
|
81
|
-
var EmptyResultContainer = styled_components_1.default.div(
|
|
82
|
-
var OptionCollection = styled_components_1.default.div(
|
|
83
|
-
var Option = styled_components_1.default.span(
|
|
85
|
+
var OptionContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: ", ";\n height: 34px;\n padding: 0 20px;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n line-height: 34px;\n\n &:focus {\n background: ", ";\n color: ", ";\n }\n &:hover {\n background: ", ";\n color: ", ";\n }\n &:active {\n color: ", ";\n font-weight: 700;\n }\n &:disabled {\n color: ", ";\n }\n"], ["\n background: ", ";\n height: 34px;\n padding: 0 20px;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n line-height: 34px;\n\n &:focus {\n background: ", ";\n color: ", ";\n }\n &:hover {\n background: ", ";\n color: ", ";\n }\n &:active {\n color: ", ";\n font-weight: 700;\n }\n &:disabled {\n color: ", ";\n }\n"])), (0, theme_1.getColor)('white'), (0, theme_1.getColor)('grey', 120), (0, theme_1.getColor)('grey', 20), (0, theme_1.getColor)('brand', 140), (0, theme_1.getColor)('grey', 20), (0, theme_1.getColor)('brand', 140), (0, theme_1.getColor)('brand', 100), (0, theme_1.getColor)('grey', 100));
|
|
86
|
+
var EmptyResultContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background: ", ";\n height: 20px;\n padding: 0 20px;\n align-items: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n line-height: 20px;\n text-align: center;\n"], ["\n background: ", ";\n height: 20px;\n padding: 0 20px;\n align-items: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n line-height: 20px;\n text-align: center;\n"])), (0, theme_1.getColor)('white'), (0, theme_1.getColor)('grey', 100));
|
|
87
|
+
var OptionCollection = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n max-height: 320px;\n overflow-y: auto;\n"], ["\n max-height: 320px;\n overflow-y: auto;\n"])));
|
|
88
|
+
var Option = styled_components_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: block;\n line-height: 34px;\n min-height: 34px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"], ["\n display: block;\n line-height: 34px;\n min-height: 34px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
|
|
84
89
|
var SelectInput = function (_a) {
|
|
85
90
|
var _b;
|
|
86
91
|
var id = _a.id, placeholder = _a.placeholder, invalid = _a.invalid, value = _a.value, emptyResultLabel = _a.emptyResultLabel, children = _a.children, onChange = _a.onChange, _c = _a.clearable, clearable = _c === void 0 ? true : _c, _d = _a.clearLabel, clearLabel = _d === void 0 ? '' : _d, openLabel = _a.openLabel, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, verticalPosition = _a.verticalPosition, onNextPage = _a.onNextPage, onSearchChange = _a.onSearchChange, ariaLabelledby = _a["aria-labelledby"], rest = __rest(_a, ["id", "placeholder", "invalid", "value", "emptyResultLabel", "children", "onChange", "clearable", "clearLabel", "openLabel", "readOnly", "verticalPosition", "onNextPage", "onSearchChange", 'aria-labelledby']);
|
|
@@ -205,9 +210,9 @@ var SelectInput = function (_a) {
|
|
|
205
210
|
return (react_1.default.createElement(SelectInputContainer, __assign({ readOnly: readOnly, value: value }, rest),
|
|
206
211
|
react_1.default.createElement(InputContainer, null,
|
|
207
212
|
null !== value && '' === searchValue && (react_1.default.createElement(SelectedOptionContainer, { readOnly: readOnly, clearable: clearable }, currentValueElement)),
|
|
208
|
-
react_1.default.createElement(
|
|
213
|
+
react_1.default.createElement(SearchInput, { id: id, ref: inputRef, value: searchValue, readOnly: readOnly, invalid: invalid, placeholder: placeholder, isPlaceholderVisible: null === value, onChange: handleSearch, onClick: function (event) {
|
|
209
214
|
openOverlay();
|
|
210
|
-
|
|
215
|
+
event.preventDefault();
|
|
211
216
|
}, "aria-labelledby": ariaLabelledby, onKeyDown: handleInputKeyDown }),
|
|
212
217
|
!readOnly && (react_1.default.createElement(ActionContainer, null,
|
|
213
218
|
!dropdownIsOpen && null !== value && clearable && (react_1.default.createElement(components_1.IconButton, { ghost: "borderless", level: "tertiary", size: "small", icon: react_1.default.createElement(icons_1.CloseIcon, null), title: clearLabel, onClick: handleClear, tabIndex: 0 })),
|
|
@@ -233,5 +238,5 @@ var SelectInput = function (_a) {
|
|
|
233
238
|
exports.SelectInput = SelectInput;
|
|
234
239
|
Option.displayName = 'SelectInput.Option';
|
|
235
240
|
SelectInput.Option = Option;
|
|
236
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
241
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
237
242
|
//# sourceMappingURL=SelectInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInput.js","sourceRoot":"","sources":["../../../../src/components/Input/SelectInput/SelectInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CASe;AACf,wEAAuC;AACvC,0CAA8C;AAC9C,oCAA8C;AAC9C,
|
|
1
|
+
{"version":3,"file":"SelectInput.js","sourceRoot":"","sources":["../../../../src/components/Input/SelectInput/SelectInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -14,6 +14,25 @@ var __assign = (this && this.__assign) || function () {
|
|
|
14
14
|
};
|
|
15
15
|
return __assign.apply(this, arguments);
|
|
16
16
|
};
|
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
+
if (k2 === undefined) k2 = k;
|
|
19
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
17
36
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
18
37
|
var t = {};
|
|
19
38
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -30,13 +49,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
30
49
|
};
|
|
31
50
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
32
51
|
exports.Locale = void 0;
|
|
33
|
-
var react_1 =
|
|
52
|
+
var react_1 = __importStar(require("react"));
|
|
34
53
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
35
54
|
var shared_1 = require("../../shared");
|
|
36
55
|
var theme_1 = require("../../theme");
|
|
37
|
-
var LocaleContainer = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n"], ["\n display: inline-flex;\n align-items: center;\n"])));
|
|
56
|
+
var LocaleContainer = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n"], ["\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n"])));
|
|
38
57
|
var Emoji = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: ", ";\n margin-right: 3px;\n"], ["\n font-size: ", ";\n margin-right: 3px;\n"])), (0, theme_1.getFontSize)('bigger'));
|
|
39
|
-
var Locale = react_1.
|
|
58
|
+
var Locale = (0, react_1.forwardRef)(function (_a, forwardedRef) {
|
|
40
59
|
var code = _a.code, languageLabel = _a.languageLabel, rest = __rest(_a, ["code", "languageLabel"]);
|
|
41
60
|
var _b = code.split('_'), languageCode = _b[0], length = _b.length, _c = length - 1, countryCode = _b[_c];
|
|
42
61
|
return (react_1.default.createElement(LocaleContainer, __assign({ ref: forwardedRef }, rest),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Locale.js","sourceRoot":"","sources":["../../../src/components/Locale/Locale.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Locale.js","sourceRoot":"","sources":["../../../src/components/Locale/Locale.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA6C;AAC7C,wEAAuC;AACvC,uCAAsC;AACtC,qCAAwC;AAExC,IAAM,eAAe,GAAG,2BAAM,CAAC,IAAI,gJAAA,6EAIlC,IAAA,CAAC;AAEF,IAAM,KAAK,GAAG,2BAAM,CAAC,IAAI,iHAAA,iBACV,EAAqB,2BAEnC,KAFc,IAAA,mBAAW,EAAC,QAAQ,CAAC,CAEnC,CAAC;AAiBF,IAAM,MAAM,GAAG,IAAA,kBAAU,EACvB,UAAC,EAA2C,EAAE,YAAkC;IAA9E,IAAA,IAAI,UAAA,EAAE,aAAa,mBAAA,EAAK,IAAI,cAA7B,yBAA8B,CAAD;IACrB,IAAsD,KAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAlE,YAAY,QAAA,EAAE,MAAM,YAAA,EAAE,KAAC,MAAM,GAAG,CAAE,EAAE,WAAW,SAAmB,CAAC;IAE7E,OAAO,CACL,8BAAC,eAAe,aAAC,GAAG,EAAE,YAAY,IAAM,IAAI;QAC1C,8BAAC,KAAK,IAAC,IAAI,EAAC,KAAK,gBAAa,WAAW,IACtC,IAAA,iBAAQ,EAAC,WAAW,CAAC,CAChB;QACP,aAAa,IAAI,YAAY,CACd,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,wBAAM"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
1
|
+
import React, { ReactNode, HTMLAttributes } from 'react';
|
|
2
2
|
import { Override } from '../../shared';
|
|
3
3
|
declare type StepState = 'done' | 'inprogress' | 'todo';
|
|
4
|
-
declare type ProgressIndicatorProps = Override<
|
|
4
|
+
declare type ProgressIndicatorProps = Override<HTMLAttributes<HTMLUListElement>, {
|
|
5
5
|
children?: ReactNode;
|
|
6
6
|
}>;
|
|
7
7
|
declare const ProgressIndicator: {
|
|
8
8
|
({ children, ...rest }: ProgressIndicatorProps): JSX.Element;
|
|
9
|
-
Step: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLLIElement>, "children" | "current" | "state"> & {
|
|
9
|
+
Step: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLLIElement>, "disabled" | "children" | "current" | "state"> & {
|
|
10
10
|
current?: boolean | undefined;
|
|
11
11
|
state?: StepState | undefined;
|
|
12
|
-
|
|
12
|
+
disabled?: boolean | undefined;
|
|
13
|
+
children?: ReactNode;
|
|
13
14
|
} & React.RefAttributes<HTMLLIElement>>;
|
|
14
15
|
};
|
|
15
16
|
export { ProgressIndicator };
|
|
@@ -61,7 +61,13 @@ var StepCircle = styled_components_1.default.div(templateObject_1 || (templateOb
|
|
|
61
61
|
return (state !== 'todo' ? 'transparent' : (0, theme_1.getColor)('grey', 80));
|
|
62
62
|
});
|
|
63
63
|
var StepLabel = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: normal;\n color: ", ";\n text-transform: uppercase;\n"], ["\n font-size: ", ";\n font-weight: normal;\n color: ", ";\n text-transform: uppercase;\n"])), (0, theme_1.getFontSize)('small'), (0, theme_1.getColor)('grey', 120));
|
|
64
|
-
var StepContainer = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n\n &:before {\n display: block;\n content: ' ';\n width: calc(100% - 34px);\n border-bottom-width: 1px;\n border-bottom-style: ", ";\n border-bottom-color: ", ";\n position: relative;\n left: -50%;\n top: 17px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n\n &:before {\n display: block;\n content: ' ';\n width: calc(100% - 34px);\n border-bottom-width: 1px;\n border-bottom-style: ", ";\n border-bottom-color: ", ";\n position: relative;\n left: -50%;\n top: 17px;\n }\n"])), function (_a) {
|
|
64
|
+
var StepContainer = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n cursor: ", ";\n opacity: ", ";\n\n &:before {\n display: block;\n content: ' ';\n width: calc(100% - 34px);\n border-bottom-width: 1px;\n border-bottom-style: ", ";\n border-bottom-color: ", ";\n position: relative;\n left: -50%;\n top: 17px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n cursor: ", ";\n opacity: ", ";\n\n &:before {\n display: block;\n content: ' ';\n width: calc(100% - 34px);\n border-bottom-width: 1px;\n border-bottom-style: ", ";\n border-bottom-color: ", ";\n position: relative;\n left: -50%;\n top: 17px;\n }\n"])), function (_a) {
|
|
65
|
+
var disabled = _a.disabled;
|
|
66
|
+
return (disabled ? 'not-allowed' : 'pointer');
|
|
67
|
+
}, function (_a) {
|
|
68
|
+
var disabled = _a.disabled;
|
|
69
|
+
return (disabled ? 0.6 : 1);
|
|
70
|
+
}, function (_a) {
|
|
65
71
|
var state = _a.state;
|
|
66
72
|
return ('todo' === state ? 'dashed' : 'solid');
|
|
67
73
|
}, function (_a) {
|
|
@@ -69,27 +75,29 @@ var StepContainer = styled_components_1.default.li(templateObject_3 || (template
|
|
|
69
75
|
return ('todo' !== state ? (0, theme_1.getColor)('green', 100) : (0, theme_1.getColor)('grey', 80));
|
|
70
76
|
});
|
|
71
77
|
var ProgressIndicatorContainer = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n\n ", ":first-child:before {\n display: none;\n border: none;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n\n ", ":first-child:before {\n display: none;\n border: none;\n }\n"])), StepContainer);
|
|
72
|
-
var Step = react_1.
|
|
73
|
-
var state = _a.state, children = _a.children, rest = __rest(_a, ["state", "children"]);
|
|
78
|
+
var Step = (0, react_1.forwardRef)(function (_a, forwardedRef) {
|
|
79
|
+
var state = _a.state, children = _a.children, disabled = _a.disabled, onClick = _a.onClick, rest = __rest(_a, ["state", "children", "disabled", "onClick"]);
|
|
74
80
|
if (undefined === state) {
|
|
75
81
|
throw new Error('ProgressIndicator.Step cannot be used outside a ProgressIndicator component');
|
|
76
82
|
}
|
|
77
|
-
return (react_1.default.createElement(StepContainer, __assign({ "aria-current": 'inprogress' === state ? 'step' : undefined, state: state, ref: forwardedRef }, rest),
|
|
83
|
+
return (react_1.default.createElement(StepContainer, __assign({ "aria-current": 'inprogress' === state ? 'step' : undefined, state: state, ref: forwardedRef, "aria-disabled": disabled, onClick: disabled ? undefined : onClick, disabled: disabled }, rest),
|
|
78
84
|
react_1.default.createElement(StepCircle, { "aria-hidden": true, state: state }, 'done' === state && react_1.default.createElement(icons_1.CheckIcon, { size: 24 })),
|
|
79
85
|
react_1.default.createElement(StepLabel, null, children)));
|
|
80
86
|
});
|
|
81
87
|
var ProgressIndicator = function (_a) {
|
|
82
88
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
83
|
-
var currentStepIndex = react_1.
|
|
89
|
+
var currentStepIndex = react_1.Children.toArray(children).reduce(function (result, child, index) {
|
|
84
90
|
return (0, react_1.isValidElement)(child) && child.type === Step && child.props.current === true ? index : result;
|
|
85
91
|
}, 0);
|
|
86
|
-
var decoratedChildren = react_1.
|
|
92
|
+
var decoratedChildren = react_1.Children.map(children, function (child, index) {
|
|
87
93
|
if (!((0, react_1.isValidElement)(child) && child.type === Step)) {
|
|
88
|
-
|
|
94
|
+
return child;
|
|
89
95
|
}
|
|
90
|
-
return
|
|
91
|
-
|
|
92
|
-
|
|
96
|
+
return undefined === child.props.state
|
|
97
|
+
? (0, react_1.cloneElement)(child, {
|
|
98
|
+
state: index > currentStepIndex ? 'todo' : index < currentStepIndex ? 'done' : 'inprogress',
|
|
99
|
+
})
|
|
100
|
+
: child;
|
|
93
101
|
});
|
|
94
102
|
return (react_1.default.createElement(ProgressIndicatorContainer, __assign({ "aria-label": "progress" }, rest), decoratedChildren));
|
|
95
103
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressIndicator.js","sourceRoot":"","sources":["../../../src/components/ProgressIndicator/ProgressIndicator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"ProgressIndicator.js","sourceRoot":"","sources":["../../../src/components/ProgressIndicator/ProgressIndicator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgH;AAChH,wEAAuC;AACvC,qCAAqE;AAErE,qCAAsC;AAItC,IAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,2QAAwC,oHAM1D,EAAiB,yBACN,EAC6F,gDAE7F,EAAsE,KAC3F,KALU,IAAA,gBAAQ,EAAC,OAAO,CAAC,EACN,UAAC,EAAO;QAAN,KAAK,WAAA;IACzB,OAAA,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,IAAA,gBAAQ,EAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,IAAA,gBAAQ,EAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAA,gBAAQ,EAAC,OAAO,EAAE,GAAG,CAAC;AAA/G,CAA+G,EAE7F,UAAC,EAAO;QAAN,KAAK,WAAA;IAAM,OAAA,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAAzD,CAAyD,CAC3F,CAAC;AAEF,IAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,iKAAA,iBACb,EAAoB,sCAExB,EAAqB,mCAE/B,KAJc,IAAA,mBAAW,EAAC,OAAO,CAAC,EAExB,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,CAE/B,CAAC;AAEF,IAAM,aAAa,GAAG,2BAAM,CAAC,EAAE,obAA+B,mGAKlD,EAAsD,gBACrD,EAAoC,oJAOtB,EAAoD,8BACpD,EAA+E,oEAKzG,KAdW,UAAC,EAAU;QAAT,QAAQ,cAAA;IAAM,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;AAAtC,CAAsC,EACrD,UAAC,EAAU;QAAT,QAAQ,cAAA;IAAM,OAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAApB,CAAoB,EAOtB,UAAC,EAAO;QAAN,KAAK,WAAA;IAAM,OAAA,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;AAAvC,CAAuC,EACpD,UAAC,EAAO;QAAN,KAAK,WAAA;IAAM,OAAA,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,IAAA,gBAAQ,EAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAA,gBAAQ,EAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAAlE,CAAkE,CAKzG,CAAC;AAEF,IAAM,0BAA0B,GAAG,2BAAM,CAAC,EAAE,uMAAA,6DAIxC,EAAa,qEAIhB,KAJG,aAAa,CAIhB,CAAC;AA4BF,IAAM,IAAI,GAAG,IAAA,kBAAU,EACrB,UAAC,EAAwD,EAAE,YAAgC;IAAzF,IAAA,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAK,IAAI,cAA5C,4CAA6C,CAAD;IAC3C,IAAI,SAAS,KAAK,KAAK,EAAE;QACvB,MAAM,IAAI,KAAK,CAAC,6EAA6E,CAAC,CAAC;KAChG;IAED,OAAO,CACL,8BAAC,aAAa,6BACE,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACzD,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,YAAY,mBACF,QAAQ,EACvB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACvC,QAAQ,EAAE,QAAQ,IACd,IAAI;QAER,8BAAC,UAAU,yBAAa,KAAK,EAAE,KAAK,IACjC,MAAM,KAAK,KAAK,IAAI,8BAAC,iBAAS,IAAC,IAAI,EAAE,EAAE,GAAI,CACjC;QACb,8BAAC,SAAS,QAAE,QAAQ,CAAa,CACnB,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAeF,IAAM,iBAAiB,GAAG,UAAC,EAA2C;IAA1C,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAlB,YAAmB,CAAD;IAC3C,IAAM,gBAAgB,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,UAAC,MAAM,EAAE,KAAK,EAAE,KAAK;QAC9E,OAAO,IAAA,sBAAc,EAAY,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;IAClH,CAAC,EAAE,CAAC,CAAC,CAAC;IAEN,IAAM,iBAAiB,GAAG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,KAAK;QAC5D,IAAI,CAAC,CAAC,IAAA,sBAAc,EAAY,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE;YAC9D,OAAO,KAAK,CAAC;SACd;QAED,OAAO,SAAS,KAAK,KAAK,CAAC,KAAK,CAAC,KAAK;YACpC,CAAC,CAAC,IAAA,oBAAY,EAAC,KAAK,EAAE;gBAClB,KAAK,EAAE,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY;aAC5F,CAAC;YACJ,CAAC,CAAC,KAAK,CAAC;IACZ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,8BAAC,0BAA0B,2BAAY,UAAU,IAAK,IAAI,GACvD,iBAAiB,CACS,CAC9B,CAAC;AACJ,CAAC,CAAC;AAKM,8CAAiB;AAHzB,IAAI,CAAC,WAAW,GAAG,wBAAwB,CAAC;AAC5C,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC"}
|
|
@@ -52,29 +52,28 @@ var icons_1 = require("../../icons");
|
|
|
52
52
|
var theme_1 = require("../../theme");
|
|
53
53
|
var hooks_1 = require("../../hooks");
|
|
54
54
|
var SwitcherButtonContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n > *:nth-child(2) {\n opacity: 0;\n transition: opacity 0.2s;\n }\n &:hover > *:nth-child(2) {\n opacity: 1;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n > *:nth-child(2) {\n opacity: 0;\n transition: opacity 0.2s;\n }\n &:hover > *:nth-child(2) {\n opacity: 1;\n }\n"])));
|
|
55
|
-
var LabelAndValueContainer = styled_components_1.default.button(
|
|
55
|
+
var LabelAndValueContainer = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n border: none;\n background: none;\n cursor: pointer;\n padding: 0;\n display: flex;\n align-items: baseline;\n flex-direction: ", ";\n"], ["\n ", ";\n border: none;\n background: none;\n cursor: pointer;\n padding: 0;\n display: flex;\n align-items: baseline;\n flex-direction: ", ";\n"])), theme_1.CommonStyle, function (_a) {
|
|
56
56
|
var $inline = _a.$inline;
|
|
57
|
-
return $inline
|
|
58
|
-
? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: baseline;\n "], ["\n align-items: baseline;\n "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-direction: column;\n "], ["\n flex-direction: column;\n "])));
|
|
57
|
+
return ($inline ? 'row' : 'column');
|
|
59
58
|
});
|
|
60
|
-
var Label = styled_components_1.default.label(
|
|
59
|
+
var Label = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n cursor: pointer;\n white-space: nowrap;\n ", "\n"], ["\n cursor: pointer;\n white-space: nowrap;\n ", "\n"])), function (_a) {
|
|
61
60
|
var $inline = _a.$inline;
|
|
62
61
|
return $inline
|
|
63
|
-
? (0, styled_components_1.css)(
|
|
62
|
+
? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-right: 3px;\n color: ", ";\n "], ["\n margin-right: 3px;\n color: ", ";\n "])), (0, theme_1.getColor)('grey', 140)) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n text-transform: uppercase;\n font-size: ", ";\n "], ["\n color: ", ";\n text-transform: uppercase;\n font-size: ", ";\n "])), (0, theme_1.getColor)('grey', 100), (0, theme_1.getFontSize)('small'));
|
|
64
63
|
});
|
|
65
|
-
var LabelAndArrow = styled_components_1.default.div(
|
|
66
|
-
var Value = styled_components_1.default.span(
|
|
64
|
+
var LabelAndArrow = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n"], ["\n display: inline-flex;\n align-items: center;\n"])));
|
|
65
|
+
var Value = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: ", ";\n margin-right: 5px;\n text-align: left;\n"], ["\n color: ", ";\n margin-right: 5px;\n text-align: left;\n"])), function (_a) {
|
|
67
66
|
var $inline = _a.$inline;
|
|
68
|
-
return ($inline ? (0, theme_1.getColor)('
|
|
67
|
+
return ($inline ? (0, theme_1.getColor)('brand', 100) : (0, theme_1.getColor)('grey', 140));
|
|
69
68
|
});
|
|
70
|
-
var CloseButton = styled_components_1.default.button(
|
|
69
|
+
var CloseButton = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: none;\n background: none;\n width: 20px;\n height: 20px;\n cursor: pointer;\n padding: 0;\n flex-shrink: 0;\n"], ["\n border: none;\n background: none;\n width: 20px;\n height: 20px;\n cursor: pointer;\n padding: 0;\n flex-shrink: 0;\n"])));
|
|
71
70
|
var SwitcherButton = (0, react_1.forwardRef)(function (_a, forwardedRef) {
|
|
72
71
|
var label = _a.label, children = _a.children, onClick = _a.onClick, _b = _a.deletable, deletable = _b === void 0 ? false : _b, onDelete = _a.onDelete, _c = _a.inline, inline = _c === void 0 ? true : _c, rest = __rest(_a, ["label", "children", "onClick", "deletable", "onDelete", "inline"]);
|
|
73
72
|
var buttonId = (0, hooks_1.useId)('button_');
|
|
74
73
|
var handleDelete = function () { return deletable && (onDelete === null || onDelete === void 0 ? void 0 : onDelete()); };
|
|
75
74
|
return (react_1.default.createElement(SwitcherButtonContainer, __assign({ ref: forwardedRef }, rest),
|
|
76
75
|
react_1.default.createElement(LabelAndValueContainer, { id: buttonId, onClick: onClick, "$inline": inline },
|
|
77
|
-
react_1.default.createElement(Label, { htmlFor: buttonId, "$inline": inline }, label
|
|
76
|
+
react_1.default.createElement(Label, { htmlFor: buttonId, "$inline": inline }, label ? (inline ? label + ":" : label) : ''),
|
|
78
77
|
react_1.default.createElement(LabelAndArrow, null,
|
|
79
78
|
react_1.default.createElement(Value, { "$inline": inline }, children),
|
|
80
79
|
react_1.default.createElement(icons_1.ArrowDownIcon, { size: inline ? 16 : 10 }))),
|
|
@@ -82,5 +81,5 @@ var SwitcherButton = (0, react_1.forwardRef)(function (_a, forwardedRef) {
|
|
|
82
81
|
react_1.default.createElement(icons_1.CloseIcon, { size: 10 })))));
|
|
83
82
|
});
|
|
84
83
|
exports.SwitcherButton = SwitcherButton;
|
|
85
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8
|
|
84
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
86
85
|
//# sourceMappingURL=SwitcherButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwitcherButton.js","sourceRoot":"","sources":["../../../src/components/SwitcherButton/SwitcherButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwE;AACxE,qEAA8C;AAC9C,qCAAqD;AACrD,qCAAkF;AAElF,qCAAkC;AAElC,IAAM,uBAAuB,GAAG,2BAAM,CAAC,GAAG,mRAAA,gNAWzC,IAAA,CAAC;AAEF,IAAM,sBAAsB,GAAG,2BAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"SwitcherButton.js","sourceRoot":"","sources":["../../../src/components/SwitcherButton/SwitcherButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwE;AACxE,qEAA8C;AAC9C,qCAAqD;AACrD,qCAAkF;AAElF,qCAAkC;AAElC,IAAM,uBAAuB,GAAG,2BAAM,CAAC,GAAG,mRAAA,gNAWzC,IAAA,CAAC;AAEF,IAAM,sBAAsB,GAAG,2BAAM,CAAC,MAAM,8NAAwC,MAChF,EAAW,4IAOK,EAA2C,KAC9D,KARG,mBAAW,EAOK,UAAC,EAAS;QAAR,OAAO,aAAA;IAAM,OAAA,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;AAA5B,CAA4B,CAC9D,CAAC;AAEF,IAAM,KAAK,GAAG,2BAAM,CAAC,KAAK,2HAAwC,kDAG9D,EAUK,IACR,KAXG,UAAC,EAAS;QAAR,OAAO,aAAA;IACT,OAAA,OAAO;QACL,CAAC,KAAC,uBAAG,sIAAA,mDAEQ,EAAqB,aAC/B,KADU,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAElC,CAAC,KAAC,uBAAG,0KAAA,qBACQ,EAAqB,gEAEjB,EAAoB,aAClC,KAHU,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAEjB,IAAA,mBAAW,EAAC,OAAO,CAAC,CAClC;AATL,CASK,CACR,CAAC;AAEF,IAAM,aAAa,GAAG,2BAAM,CAAC,GAAG,wHAAA,qDAG/B,IAAA,CAAC;AAEF,IAAM,KAAK,GAAG,2BAAM,CAAC,IAAI,kIAAwC,aACtD,EAAyE,gDAGnF,KAHU,UAAC,EAAS;QAAR,OAAO,aAAA;IAAM,OAAA,CAAC,OAAO,CAAC,CAAC,CAAC,IAAA,gBAAQ,EAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAA1D,CAA0D,CAGnF,CAAC;AAEF,IAAM,WAAW,GAAG,2BAAM,CAAC,MAAM,oMAAA,iIAQhC,IAAA,CAAC;AAqCF,IAAM,cAAc,GAAG,IAAA,kBAAU,EAC/B,UACE,EAAoG,EACpG,YAAiC;IADhC,IAAA,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAE,cAAa,EAAb,MAAM,mBAAG,IAAI,KAAA,EAAK,IAAI,cAA9E,mEAA+E,CAAD;IAG9E,IAAM,QAAQ,GAAG,IAAA,aAAK,EAAC,SAAS,CAAC,CAAC;IAElC,IAAM,YAAY,GAAG,cAAM,OAAA,SAAS,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA,EAAzB,CAAyB,CAAC;IAErD,OAAO,CACL,8BAAC,uBAAuB,aAAC,GAAG,EAAE,YAAY,IAAM,IAAI;QAClD,8BAAC,sBAAsB,IAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,aAAW,MAAM;YACrE,8BAAC,KAAK,IAAC,OAAO,EAAE,QAAQ,aAAW,MAAM,IACtC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAI,KAAK,MAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CACtC;YACR,8BAAC,aAAa;gBACZ,8BAAC,KAAK,eAAU,MAAM,IAAG,QAAQ,CAAS;gBAC1C,8BAAC,qBAAa,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAI,CAC3B,CACO;QACxB,SAAS,IAAI,CACZ,8BAAC,WAAW,IAAC,OAAO,EAAE,YAAY;YAChC,8BAAC,iBAAS,IAAC,IAAI,EAAE,EAAE,GAAI,CACX,CACf,CACuB,CAC3B,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,wCAAc"}
|
package/package.json
CHANGED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -11,7 +11,8 @@ import React, {
|
|
|
11
11
|
import styled from 'styled-components';
|
|
12
12
|
import {Key, Override} from '../../../shared';
|
|
13
13
|
import {InputProps, Overlay} from '../common';
|
|
14
|
-
import {IconButton
|
|
14
|
+
import {IconButton} from '../../../components';
|
|
15
|
+
import {TextInput} from '../../../components/Input/TextInput/TextInput';
|
|
15
16
|
import {useBooleanState, useShortcut, VerticalPosition} from '../../../hooks';
|
|
16
17
|
import {AkeneoThemedProps, getColor} from '../../../theme';
|
|
17
18
|
import {ArrowDownIcon, CloseIcon} from '../../../icons';
|
|
@@ -35,6 +36,12 @@ const InputContainer = styled.div`
|
|
|
35
36
|
background: ${getColor('white')};
|
|
36
37
|
`;
|
|
37
38
|
|
|
39
|
+
const SearchInput = styled(TextInput)<{isPlaceholderVisible: boolean}>`
|
|
40
|
+
&::placeholder {
|
|
41
|
+
opacity: ${({isPlaceholderVisible}) => (isPlaceholderVisible ? 1 : 0)};
|
|
42
|
+
}
|
|
43
|
+
`;
|
|
44
|
+
|
|
38
45
|
const ActionContainer = styled.div`
|
|
39
46
|
position: absolute;
|
|
40
47
|
right: 8px;
|
|
@@ -349,17 +356,18 @@ const SelectInput = ({
|
|
|
349
356
|
{currentValueElement}
|
|
350
357
|
</SelectedOptionContainer>
|
|
351
358
|
)}
|
|
352
|
-
<
|
|
359
|
+
<SearchInput
|
|
353
360
|
id={id}
|
|
354
361
|
ref={inputRef}
|
|
355
362
|
value={searchValue}
|
|
356
363
|
readOnly={readOnly}
|
|
357
364
|
invalid={invalid}
|
|
358
|
-
placeholder={
|
|
365
|
+
placeholder={placeholder}
|
|
366
|
+
isPlaceholderVisible={null === value}
|
|
359
367
|
onChange={handleSearch}
|
|
360
|
-
onClick={
|
|
368
|
+
onClick={event => {
|
|
361
369
|
openOverlay();
|
|
362
|
-
|
|
370
|
+
event.preventDefault();
|
|
363
371
|
}}
|
|
364
372
|
aria-labelledby={ariaLabelledby}
|
|
365
373
|
onKeyDown={handleInputKeyDown}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {Ref} from 'react';
|
|
1
|
+
import React, {forwardRef, Ref} from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import {getEmoji} from '../../shared';
|
|
4
4
|
import {getFontSize} from '../../theme';
|
|
@@ -6,6 +6,7 @@ import {getFontSize} from '../../theme';
|
|
|
6
6
|
const LocaleContainer = styled.span`
|
|
7
7
|
display: inline-flex;
|
|
8
8
|
align-items: center;
|
|
9
|
+
white-space: nowrap;
|
|
9
10
|
`;
|
|
10
11
|
|
|
11
12
|
const Emoji = styled.span`
|
|
@@ -28,7 +29,7 @@ type LocaleProps = {
|
|
|
28
29
|
/**
|
|
29
30
|
* Component to display a locale (country and language).
|
|
30
31
|
*/
|
|
31
|
-
const Locale =
|
|
32
|
+
const Locale = forwardRef<HTMLSpanElement, LocaleProps>(
|
|
32
33
|
({code, languageLabel, ...rest}: LocaleProps, forwardedRef: Ref<HTMLSpanElement>) => {
|
|
33
34
|
const {0: languageCode, length, [length - 1]: countryCode} = code.split('_');
|
|
34
35
|
|
|
@@ -61,16 +61,19 @@ test('it calls the onClose handler when hitting the Escape key', () => {
|
|
|
61
61
|
test('it does not forward click on parent node by default', () => {
|
|
62
62
|
const handleRowClick = jest.fn();
|
|
63
63
|
const handleButtonClick = jest.fn();
|
|
64
|
+
|
|
64
65
|
render(
|
|
65
66
|
<Table>
|
|
66
|
-
<Table.
|
|
67
|
-
<Table.
|
|
68
|
-
<
|
|
69
|
-
Modal
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
67
|
+
<Table.Body>
|
|
68
|
+
<Table.Row>
|
|
69
|
+
<Table.Cell onClick={handleRowClick}>
|
|
70
|
+
<Modal closeTitle="Close" onClose={jest.fn()}>
|
|
71
|
+
Modal content
|
|
72
|
+
<Button onClick={handleButtonClick}>Button</Button>
|
|
73
|
+
</Modal>
|
|
74
|
+
</Table.Cell>
|
|
75
|
+
</Table.Row>
|
|
76
|
+
</Table.Body>
|
|
74
77
|
</Table>
|
|
75
78
|
);
|
|
76
79
|
|
|
@@ -86,9 +89,8 @@ const Component = () => {
|
|
|
86
89
|
};
|
|
87
90
|
|
|
88
91
|
test('it provides a hook to know if an element is inside a modal', () => {
|
|
89
|
-
const onClose = jest.fn();
|
|
90
92
|
render(
|
|
91
|
-
<Modal closeTitle="Close" onClose={
|
|
93
|
+
<Modal closeTitle="Close" onClose={jest.fn()}>
|
|
92
94
|
<Component />
|
|
93
95
|
</Modal>
|
|
94
96
|
);
|
|
@@ -98,10 +100,9 @@ test('it provides a hook to know if an element is inside a modal', () => {
|
|
|
98
100
|
});
|
|
99
101
|
|
|
100
102
|
test('it provides a hook to know if an element is outside a modal', () => {
|
|
101
|
-
const onClose = jest.fn();
|
|
102
103
|
render(
|
|
103
104
|
<>
|
|
104
|
-
<Modal closeTitle="Close" onClose={
|
|
105
|
+
<Modal closeTitle="Close" onClose={jest.fn()}></Modal>
|
|
105
106
|
<Component />
|
|
106
107
|
</>
|
|
107
108
|
);
|
|
@@ -21,7 +21,7 @@ import {useProgress} from '../../hooks';
|
|
|
21
21
|
|
|
22
22
|
## Usage
|
|
23
23
|
|
|
24
|
-
Progress indicator display progress through a sequence of logical and numbered steps
|
|
24
|
+
Progress indicator display progress through a sequence of logical and numbered steps.
|
|
25
25
|
|
|
26
26
|
## Playground
|
|
27
27
|
|
|
@@ -68,7 +68,7 @@ return (
|
|
|
68
68
|
</Button>
|
|
69
69
|
</div>
|
|
70
70
|
<ProgressIndicator>
|
|
71
|
-
{steps.map(
|
|
71
|
+
{steps.map(step => {
|
|
72
72
|
return (
|
|
73
73
|
<ProgressIndicator.Step key={step} current={isCurrent(step)}>
|
|
74
74
|
{step}
|
|
@@ -89,15 +89,23 @@ return (
|
|
|
89
89
|
<Canvas>
|
|
90
90
|
<Story name="States">
|
|
91
91
|
<ProgressIndicator>
|
|
92
|
-
<ProgressIndicator.Step>
|
|
93
|
-
|
|
94
|
-
</ProgressIndicator.Step>
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
92
|
+
<ProgressIndicator.Step>Before current step</ProgressIndicator.Step>
|
|
93
|
+
<ProgressIndicator.Step current={true}>Current step</ProgressIndicator.Step>
|
|
94
|
+
<ProgressIndicator.Step>After current step</ProgressIndicator.Step>
|
|
95
|
+
</ProgressIndicator>
|
|
96
|
+
</Story>
|
|
97
|
+
</Canvas>
|
|
98
|
+
|
|
99
|
+
## Disabled
|
|
100
|
+
|
|
101
|
+
<Canvas>
|
|
102
|
+
<Story name="Disabled">
|
|
103
|
+
<ProgressIndicator>
|
|
104
|
+
<ProgressIndicator.Step disabled={true}>Disabled step</ProgressIndicator.Step>
|
|
105
|
+
<ProgressIndicator.Step disabled={false} current={true}>
|
|
106
|
+
Current step enabled
|
|
100
107
|
</ProgressIndicator.Step>
|
|
108
|
+
<ProgressIndicator.Step disabled={true}>Next disabled step</ProgressIndicator.Step>
|
|
101
109
|
</ProgressIndicator>
|
|
102
110
|
</Story>
|
|
103
111
|
</Canvas>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {Ref, ReactNode, isValidElement} from 'react';
|
|
1
|
+
import React, {Ref, ReactNode, isValidElement, HTMLAttributes, forwardRef, Children, cloneElement} from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import {AkeneoThemedProps, getColor, getFontSize} from '../../theme';
|
|
4
4
|
import {Override} from '../../shared';
|
|
@@ -19,7 +19,6 @@ const StepCircle = styled.div<{state: StepState} & AkeneoThemedProps>`
|
|
|
19
19
|
border: 1px solid ${({state}) => (state !== 'todo' ? 'transparent' : getColor('grey', 80))};
|
|
20
20
|
`;
|
|
21
21
|
|
|
22
|
-
// TODO RAC-331: Typography caption in uppercase
|
|
23
22
|
const StepLabel = styled.div`
|
|
24
23
|
font-size: ${getFontSize('small')};
|
|
25
24
|
font-weight: normal;
|
|
@@ -27,11 +26,13 @@ const StepLabel = styled.div`
|
|
|
27
26
|
text-transform: uppercase;
|
|
28
27
|
`;
|
|
29
28
|
|
|
30
|
-
const StepContainer = styled.li<
|
|
29
|
+
const StepContainer = styled.li<StepProps & AkeneoThemedProps>`
|
|
31
30
|
display: flex;
|
|
32
31
|
flex-direction: column;
|
|
33
32
|
align-items: center;
|
|
34
33
|
width: 100%;
|
|
34
|
+
cursor: ${({disabled}) => (disabled ? 'not-allowed' : 'pointer')};
|
|
35
|
+
opacity: ${({disabled}) => (disabled ? 0.6 : 1)};
|
|
35
36
|
|
|
36
37
|
&:before {
|
|
37
38
|
display: block;
|
|
@@ -57,28 +58,33 @@ const ProgressIndicatorContainer = styled.ul`
|
|
|
57
58
|
`;
|
|
58
59
|
|
|
59
60
|
type StepProps = Override<
|
|
60
|
-
|
|
61
|
+
HTMLAttributes<HTMLLIElement>,
|
|
61
62
|
{
|
|
62
63
|
/**
|
|
63
|
-
* Set to true if the step is the current step in the progress indicator
|
|
64
|
+
* Set to true if the step is the current step in the progress indicator.
|
|
64
65
|
*/
|
|
65
66
|
current?: boolean;
|
|
66
67
|
|
|
67
68
|
/**
|
|
68
|
-
*
|
|
69
|
-
*
|
|
69
|
+
* The state of the step.
|
|
70
|
+
* This prop is not mandatory as the component can calculate its state based on the `current` prop.
|
|
70
71
|
*/
|
|
71
72
|
state?: StepState;
|
|
72
73
|
|
|
73
74
|
/**
|
|
74
|
-
*
|
|
75
|
+
* Define if the step is disabled.
|
|
75
76
|
*/
|
|
76
|
-
|
|
77
|
+
disabled?: boolean;
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* The label of the step.
|
|
81
|
+
*/
|
|
82
|
+
children?: ReactNode;
|
|
77
83
|
}
|
|
78
84
|
>;
|
|
79
85
|
|
|
80
|
-
const Step =
|
|
81
|
-
({state, children, ...rest}: StepProps, forwardedRef: Ref<HTMLLIElement>) => {
|
|
86
|
+
const Step = forwardRef<HTMLLIElement, StepProps>(
|
|
87
|
+
({state, children, disabled, onClick, ...rest}: StepProps, forwardedRef: Ref<HTMLLIElement>) => {
|
|
82
88
|
if (undefined === state) {
|
|
83
89
|
throw new Error('ProgressIndicator.Step cannot be used outside a ProgressIndicator component');
|
|
84
90
|
}
|
|
@@ -88,6 +94,9 @@ const Step = React.forwardRef<HTMLLIElement, StepProps>(
|
|
|
88
94
|
aria-current={'inprogress' === state ? 'step' : undefined}
|
|
89
95
|
state={state}
|
|
90
96
|
ref={forwardedRef}
|
|
97
|
+
aria-disabled={disabled}
|
|
98
|
+
onClick={disabled ? undefined : onClick}
|
|
99
|
+
disabled={disabled}
|
|
91
100
|
{...rest}
|
|
92
101
|
>
|
|
93
102
|
<StepCircle aria-hidden state={state}>
|
|
@@ -100,31 +109,33 @@ const Step = React.forwardRef<HTMLLIElement, StepProps>(
|
|
|
100
109
|
);
|
|
101
110
|
|
|
102
111
|
type ProgressIndicatorProps = Override<
|
|
103
|
-
|
|
112
|
+
HTMLAttributes<HTMLUListElement>,
|
|
104
113
|
{
|
|
105
114
|
/**
|
|
106
|
-
* The progress steps
|
|
115
|
+
* The progress steps.
|
|
107
116
|
*/
|
|
108
117
|
children?: ReactNode;
|
|
109
118
|
}
|
|
110
119
|
>;
|
|
111
120
|
|
|
112
121
|
/**
|
|
113
|
-
* Progress indicator display progress through a sequence of logical and numbered steps
|
|
122
|
+
* Progress indicator display progress through a sequence of logical and numbered steps.
|
|
114
123
|
*/
|
|
115
124
|
const ProgressIndicator = ({children, ...rest}: ProgressIndicatorProps) => {
|
|
116
|
-
const currentStepIndex =
|
|
125
|
+
const currentStepIndex = Children.toArray(children).reduce((result, child, index) => {
|
|
117
126
|
return isValidElement<StepProps>(child) && child.type === Step && child.props.current === true ? index : result;
|
|
118
127
|
}, 0);
|
|
119
128
|
|
|
120
|
-
const decoratedChildren =
|
|
121
|
-
if (!(isValidElement(child) && child.type === Step)) {
|
|
122
|
-
|
|
129
|
+
const decoratedChildren = Children.map(children, (child, index) => {
|
|
130
|
+
if (!(isValidElement<StepProps>(child) && child.type === Step)) {
|
|
131
|
+
return child;
|
|
123
132
|
}
|
|
124
133
|
|
|
125
|
-
return
|
|
126
|
-
|
|
127
|
-
|
|
134
|
+
return undefined === child.props.state
|
|
135
|
+
? cloneElement(child, {
|
|
136
|
+
state: index > currentStepIndex ? 'todo' : index < currentStepIndex ? 'done' : 'inprogress',
|
|
137
|
+
})
|
|
138
|
+
: child;
|
|
128
139
|
});
|
|
129
140
|
|
|
130
141
|
return (
|
|
@@ -16,15 +16,17 @@ test('it renders its children properly', () => {
|
|
|
16
16
|
expect(screen.getByText('Third step')).toBeInTheDocument();
|
|
17
17
|
expect(screen.getByText('Second step').parentElement).toHaveAttribute('aria-current', 'step');
|
|
18
18
|
});
|
|
19
|
-
test('it cannot render random childrens', () => {
|
|
20
|
-
const mockConsole = jest.spyOn(console, 'error').mockImplementation();
|
|
21
19
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
test('it can render custom children', () => {
|
|
21
|
+
render(
|
|
22
|
+
<ProgressIndicator>
|
|
23
|
+
<span>Custom child</span>
|
|
24
|
+
</ProgressIndicator>
|
|
25
|
+
);
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
expect(screen.getByText('Custom child')).toBeInTheDocument();
|
|
27
28
|
});
|
|
29
|
+
|
|
28
30
|
test('a step cannot be used outside of a component', () => {
|
|
29
31
|
const mockConsole = jest.spyOn(console, 'error').mockImplementation();
|
|
30
32
|
|
|
@@ -37,5 +39,6 @@ test('a step cannot be used outside of a component', () => {
|
|
|
37
39
|
|
|
38
40
|
test('ProgressIndicator supports ...rest props', () => {
|
|
39
41
|
render(<ProgressIndicator data-testid="my_value" />);
|
|
42
|
+
|
|
40
43
|
expect(screen.getByTestId('my_value')).toBeInTheDocument();
|
|
41
44
|
});
|
|
@@ -25,14 +25,8 @@ const LabelAndValueContainer = styled.button<{$inline: boolean} & AkeneoThemedPr
|
|
|
25
25
|
cursor: pointer;
|
|
26
26
|
padding: 0;
|
|
27
27
|
display: flex;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
? css`
|
|
31
|
-
align-items: baseline;
|
|
32
|
-
`
|
|
33
|
-
: css`
|
|
34
|
-
flex-direction: column;
|
|
35
|
-
`}
|
|
28
|
+
align-items: baseline;
|
|
29
|
+
flex-direction: ${({$inline}) => ($inline ? 'row' : 'column')};
|
|
36
30
|
`;
|
|
37
31
|
|
|
38
32
|
const Label = styled.label<{$inline: boolean} & AkeneoThemedProps>`
|
|
@@ -48,8 +42,6 @@ const Label = styled.label<{$inline: boolean} & AkeneoThemedProps>`
|
|
|
48
42
|
color: ${getColor('grey', 100)};
|
|
49
43
|
text-transform: uppercase;
|
|
50
44
|
font-size: ${getFontSize('small')};
|
|
51
|
-
line-height: ${getFontSize('small')};
|
|
52
|
-
margin-bottom: -2px;
|
|
53
45
|
`}
|
|
54
46
|
`;
|
|
55
47
|
|
|
@@ -59,8 +51,9 @@ const LabelAndArrow = styled.div`
|
|
|
59
51
|
`;
|
|
60
52
|
|
|
61
53
|
const Value = styled.span<{$inline: boolean} & AkeneoThemedProps>`
|
|
62
|
-
color: ${({$inline}) => ($inline ? getColor('
|
|
54
|
+
color: ${({$inline}) => ($inline ? getColor('brand', 100) : getColor('grey', 140))};
|
|
63
55
|
margin-right: 5px;
|
|
56
|
+
text-align: left;
|
|
64
57
|
`;
|
|
65
58
|
|
|
66
59
|
const CloseButton = styled.button`
|
|
@@ -121,7 +114,7 @@ const SwitcherButton = forwardRef<HTMLDivElement, SwitcherButtonProps>(
|
|
|
121
114
|
<SwitcherButtonContainer ref={forwardedRef} {...rest}>
|
|
122
115
|
<LabelAndValueContainer id={buttonId} onClick={onClick} $inline={inline}>
|
|
123
116
|
<Label htmlFor={buttonId} $inline={inline}>
|
|
124
|
-
{label
|
|
117
|
+
{label ? (inline ? `${label}:` : label) : ''}
|
|
125
118
|
</Label>
|
|
126
119
|
<LabelAndArrow>
|
|
127
120
|
<Value $inline={inline}>{children}</Value>
|