@mailstep/design-system 0.7.23 → 0.7.24-beta.0
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/package.json +1 -1
- package/ui/Blocks/Stepper/Stepper.js +2 -1
- package/ui/Blocks/Stepper/components/StepItem/index.d.ts +1 -0
- package/ui/Blocks/Stepper/components/StepItem/index.js +2 -2
- package/ui/Blocks/Tabs/styles.js +8 -2
- package/ui/index.es.js +7394 -7400
- package/ui/index.umd.js +383 -390
package/package.json
CHANGED
|
@@ -14,7 +14,8 @@ export var Stepper = function (_a) {
|
|
|
14
14
|
if (!(items === null || items === void 0 ? void 0 : items.length))
|
|
15
15
|
return null;
|
|
16
16
|
return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { total: items.length, hasComponent: !!Component, children: items.map(function (_a, index) {
|
|
17
|
+
var _b;
|
|
17
18
|
var title = _a.title, disabled = _a.disabled, visible = _a.visible, completed = _a.completed, icon = _a.icon;
|
|
18
|
-
return (_jsx(StepItem, { onClick: handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(index), title: title, index: index, total: items.length, activeStep: activeStep, disabled: disabled, visible: visible, completed: completed, hasStepNumbering: hasStepNumbering, icon: icon }, title));
|
|
19
|
+
return (_jsx(StepItem, { isPrevStepCompleted: (_b = items[index - 1]) === null || _b === void 0 ? void 0 : _b.completed, onClick: handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(index), title: title, index: index, total: items.length, activeStep: activeStep, disabled: disabled, visible: visible, completed: completed, hasStepNumbering: hasStepNumbering, icon: icon }, title));
|
|
19
20
|
}) }), Component && _jsx(Component, { handleGoToNextStep: handleGoToNextStep, isLoading: isLoading })] }));
|
|
20
21
|
};
|
|
@@ -6,8 +6,8 @@ import { x } from '@xstyled/styled-components';
|
|
|
6
6
|
import isBoolean from 'lodash/isBoolean';
|
|
7
7
|
import { Line, StepItemContainer, ContentWrapper } from './styles';
|
|
8
8
|
export var StepItem = function (_a) {
|
|
9
|
-
var title = _a.title, index = _a.index, disabled = _a.disabled, activeStep = _a.activeStep, completed = _a.completed, icon = _a.icon, _b = _a.hasStepNumbering, hasStepNumbering = _b === void 0 ? true : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, total = _a.total, onClick = _a.onClick;
|
|
9
|
+
var title = _a.title, index = _a.index, disabled = _a.disabled, isPrevStepCompleted = _a.isPrevStepCompleted, activeStep = _a.activeStep, completed = _a.completed, icon = _a.icon, _b = _a.hasStepNumbering, hasStepNumbering = _b === void 0 ? true : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, total = _a.total, onClick = _a.onClick;
|
|
10
10
|
var isActiveStep = index === activeStep;
|
|
11
11
|
var isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
|
|
12
|
-
return (_jsxs(StepItemContainer, { onClick: !disabled && isCompletedStep ? onClick : undefined, isActiveStep: isActiveStep, isDisabled: disabled, isVisible: visible, total: total, children: [_jsx(Line, { isActiveStep: isActiveStep, isCompletedStep: isCompletedStep }), _jsxs(ContentWrapper, { children: [_jsx(StepCircle, { icon: isCompletedStep ? 'check' : icon, isCompleted: isCompletedStep, isActiveStep: isActiveStep, children: index + 1 }), _jsxs(x.div, { alignSelf: "center", children: [hasStepNumbering && (_jsx(x.span, { textTransform: "uppercase", children: _jsxs(H7, { color: isCompletedStep ? 'red1' : 'gray1', variant: "semiBold", mt: 0, mb: "4px", children: [_jsx(Trans, { id: "step", message: "Step" }), ": ", index + 1] }) })), _jsx(Paragraph2, { variant: "medium", children: title })] })] })] }));
|
|
12
|
+
return (_jsxs(StepItemContainer, { onClick: !disabled && (isCompletedStep || isPrevStepCompleted) ? onClick : undefined, isActiveStep: isActiveStep, isDisabled: disabled, isVisible: visible, total: total, children: [_jsx(Line, { isActiveStep: isActiveStep, isCompletedStep: isCompletedStep }), _jsxs(ContentWrapper, { children: [_jsx(StepCircle, { icon: isCompletedStep ? 'check' : icon, isCompleted: isCompletedStep, isActiveStep: isActiveStep, children: index + 1 }), _jsxs(x.div, { alignSelf: "center", children: [hasStepNumbering && (_jsx(x.span, { textTransform: "uppercase", children: _jsxs(H7, { color: isCompletedStep ? 'red1' : 'gray1', variant: "semiBold", mt: 0, mb: "4px", children: [_jsx(Trans, { id: "step", message: "Step" }), ": ", index + 1] }) })), _jsx(Paragraph2, { variant: "medium", children: title })] })] })] }));
|
|
13
13
|
};
|
package/ui/Blocks/Tabs/styles.js
CHANGED
|
@@ -7,14 +7,20 @@ export var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1
|
|
|
7
7
|
export var StyledTabWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n"])));
|
|
8
8
|
export var RoundedWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex !important;\n justify-content: center;\n align-items: center;\n height: 23px;\n background-color: ", ";\n border-radius: 29px;\n padding: 3px 10px;\n margin-left: 8px;\n"], ["\n display: flex !important;\n justify-content: center;\n align-items: center;\n height: 23px;\n background-color: ", ";\n border-radius: 29px;\n padding: 3px 10px;\n margin-left: 8px;\n"])), th.color('lightGray7'));
|
|
9
9
|
var activeTab = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n position: relative;\n &:after {\n content: '';\n position: absolute;\n bottom: 2;\n left: 0;\n right: 0;\n background-color: ", ";\n height: 4px;\n border-radius: 6px 6px 0px 0px;\n }\n & > div {\n display: inline;\n color: ", ";\n }\n"], ["\n color: ", ";\n position: relative;\n &:after {\n content: '';\n position: absolute;\n bottom: 2;\n left: 0;\n right: 0;\n background-color: ", ";\n height: 4px;\n border-radius: 6px 6px 0px 0px;\n }\n & > div {\n display: inline;\n color: ", ";\n }\n"])), th.color('red1'), th.color('red1'), th.color('typoPrimary'));
|
|
10
|
-
export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor:
|
|
10
|
+
export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: ", ";\n padding: 0 0.6rem;\n transition: 200ms;\n color: ", ";\n font-weight: bold;\n font-size: 14px;\n letter-spacing: 0.03em;\n min-width: 100px;\n\n & > div {\n display: none;\n }\n &:not(:last-child) {\n margin-right: 0.5rem;\n }\n\n :hover {\n color: ", ";\n }\n\n :active {\n ", ";\n }\n\n ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: ", ";\n padding: 0 0.6rem;\n transition: 200ms;\n color: ", ";\n font-weight: bold;\n font-size: 14px;\n letter-spacing: 0.03em;\n min-width: 100px;\n\n & > div {\n display: none;\n }\n &:not(:last-child) {\n margin-right: 0.5rem;\n }\n\n :hover {\n color: ", ";\n }\n\n :active {\n ", ";\n }\n\n ", ";\n"])), function (_a) {
|
|
11
|
+
var disabled = _a.disabled;
|
|
12
|
+
return (disabled ? 'auto' : 'pointer');
|
|
13
|
+
}, th.color('gray'), function (_a) {
|
|
14
|
+
var disabled = _a.disabled;
|
|
15
|
+
return th.color(disabled ? 'gray' : 'typoPrimary');
|
|
16
|
+
}, function (_a) {
|
|
11
17
|
var disabled = _a.disabled;
|
|
12
18
|
return !disabled && activeTab;
|
|
13
19
|
}, function (_a) {
|
|
14
20
|
var active = _a.active;
|
|
15
21
|
return (active ? activeTab : '');
|
|
16
22
|
});
|
|
17
|
-
export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n
|
|
23
|
+
export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n overflow: auto;\n width: fit-content;\n position: relative;\n margin-bottom: ", ";\n &:after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n height: 2px;\n }\n"], ["\n display: flex;\n align-items: flex-end;\n overflow: auto;\n width: fit-content;\n position: relative;\n margin-bottom: ", ";\n &:after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n height: 2px;\n }\n"])), function (_a) {
|
|
18
24
|
var _b = _a.$mb, $mb = _b === void 0 ? 0 : _b;
|
|
19
25
|
return $mb;
|
|
20
26
|
}, th.color('bgLightGray1'));
|