@mailstep/design-system 0.6.57-beta.3 → 0.6.57
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/SideMenu/MenuItem.js +6 -4
- package/ui/Blocks/SideMenu/styles.d.ts +0 -2
- package/ui/Blocks/SideMenu/styles.js +15 -15
- package/ui/Blocks/Stepper/Stepper.js +1 -1
- package/ui/Blocks/Stepper/stories/Stepper.stories.js +8 -8
- package/ui/Blocks/Stepper/types.d.ts +1 -1
- package/ui/index.es.js +7998 -7995
- package/ui/index.umd.js +393 -391
- package/ui/utils/translations.d.ts +0 -1
- package/ui/utils/translations.js +0 -6
package/package.json
CHANGED
|
@@ -12,12 +12,12 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
13
|
import { memo, useCallback, useMemo, useRef } from 'react';
|
|
14
14
|
import { matchPath } from 'react-router';
|
|
15
|
-
import
|
|
16
|
-
import { Paragraph3, Paragraph5 } from '../../Elements/Typography/Typography';
|
|
15
|
+
import { ItemLinkWrap, ItemIcon, ItemDropdownArrow, SubItemsWrap, OverflowWithEllipsis, MenuItemContainer, ItemLabel, ItemsSeparator } from './styles';
|
|
17
16
|
import SubitemTooltip from './components/SubitemTooltip';
|
|
18
17
|
import { useLeftMenuContext } from './context/useLeftMenuContext';
|
|
18
|
+
import { Paragraph3, Paragraph5 } from '../../Elements/Typography/Typography';
|
|
19
|
+
import Icon from '../../Elements/Icon/Icon';
|
|
19
20
|
import useOutSideHover from './hooks/useOutsideHover';
|
|
20
|
-
import { ItemLinkWrap, ItemIcon, ItemDropdownArrow, SubItemsWrap, OverflowWithEllipsis, MenuItemContainer, ItemLabel, ItemsSeparator } from './styles';
|
|
21
21
|
var removeOptionalEnd = /\?$/;
|
|
22
22
|
var MenuItem = function (_a) {
|
|
23
23
|
var icon = _a.icon, title = _a.title, _b = _a.link, link = _b === void 0 ? '' : _b, items = _a.items, id = _a.id, isSubitem = _a.isSubitem, isCompact = _a.isCompact, _c = _a.lightMode, lightMode = _c === void 0 ? false : _c, _d = _a.separator, separator = _d === void 0 ? false : _d, isLeftMenuOpen = _a.isLeftMenuOpen, onCloseLeftMenu = _a.onCloseLeftMenu;
|
|
@@ -47,6 +47,8 @@ var MenuItem = function (_a) {
|
|
|
47
47
|
var partialMatch = location.pathname.startsWith(link.slice(0, -1)) && location.pathname.includes('/settings/');
|
|
48
48
|
return isActive || childSelected || partialMatch;
|
|
49
49
|
}, [items, link]);
|
|
50
|
-
return (_jsxs(_Fragment, { children: [separator && _jsx(ItemsSeparator, {}), _jsxs(MenuItemContainer, { ref: parentRef, "$isCompact": isCompact, "$lightMode": lightMode, hasChildren: hasChildren, isHovering: isHovering, children: [_jsxs(ItemLinkWrap, __assign({}, linkProps, { onMouseOver: handleMouseOver,
|
|
50
|
+
return (_jsxs(_Fragment, { children: [separator && _jsx(ItemsSeparator, {}), _jsxs(MenuItemContainer, { ref: parentRef, "$isCompact": isCompact, "$lightMode": lightMode, hasChildren: hasChildren, isHovering: isHovering, children: [_jsxs(ItemLinkWrap, __assign({}, linkProps, { onMouseOver: handleMouseOver, exact: true, activeClassName: hasChildren ? 'selected' : undefined, onClick: toggleChildren, "$isCompact": isCompact, className: itemLinkWrapClassName,
|
|
51
|
+
// @ts-ignore
|
|
52
|
+
isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
|
|
51
53
|
};
|
|
52
54
|
export default memo(MenuItem);
|
|
@@ -16,8 +16,6 @@ export declare const TooltipItemLabel: import("styled-components").StyledCompone
|
|
|
16
16
|
export declare const ItemLinkWrap: import("styled-components").StyledComponent<typeof NavLink, import("@xstyled/system").Theme, {
|
|
17
17
|
$isCompact?: boolean | undefined;
|
|
18
18
|
$lightMode?: boolean | undefined;
|
|
19
|
-
$isActive?: boolean | undefined;
|
|
20
|
-
$hasChildren?: boolean | undefined;
|
|
21
19
|
appearance?: "default" | "gray" | undefined;
|
|
22
20
|
}, never>;
|
|
23
21
|
export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
|
|
@@ -31,7 +31,7 @@ export var ItemDropdownArrow = styled(Icon)(templateObject_7 || (templateObject_
|
|
|
31
31
|
return ($lightMode ? th.color('typoPrimary') : 'white');
|
|
32
32
|
});
|
|
33
33
|
export var TooltipItemLabel = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n line-height: 1.5;\n letter-spacing: 0.4px;\n"], ["\n line-height: 1.5;\n letter-spacing: 0.4px;\n"])));
|
|
34
|
-
export var ItemLinkWrap = styled(NavLink)(
|
|
34
|
+
export var ItemLinkWrap = styled(NavLink)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n height: ", ";\n border-radius: ", ";\n font-weight: 600;\n letter-spacing: 0.4px;\n position: relative;\n color: ", ";\n transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-property: transform;\n\n &.toplevel {\n margin: ", ";\n padding: ", ";\n gap: ", ";\n justify-content: ", ";\n &.active {\n color: ", ";\n }\n }\n\n &.nestedlevel {\n padding: 0;\n :hover {\n color: ", ";\n }\n }\n\n &.active > ", " {\n background-color: ", ";\n color: ", ";\n width: 100%;\n border-left: 4px solid ", ";\n :last-child {\n border-bottom-right-radius: 10px;\n }\n :first-child {\n border-top-right-radius: 10px;\n }\n }\n\n ", " {\n color: ", ";\n padding-left: 10px;\n width: -webkit-fill-available;\n height: -webkit-fill-available;\n }\n\n &.active,\n &.selected {\n ", " {\n color: ", ";\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n height: ", ";\n border-radius: ", ";\n font-weight: 600;\n letter-spacing: 0.4px;\n position: relative;\n color: ", ";\n transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-property: transform;\n\n &.toplevel {\n margin: ", ";\n padding: ", ";\n gap: ", ";\n justify-content: ", ";\n &.active {\n color: ", ";\n }\n }\n\n &.nestedlevel {\n padding: 0;\n :hover {\n color: ", ";\n }\n }\n\n &.active > ", " {\n background-color: ", ";\n color: ", ";\n width: 100%;\n border-left: 4px solid ", ";\n :last-child {\n border-bottom-right-radius: 10px;\n }\n :first-child {\n border-top-right-radius: 10px;\n }\n }\n\n ", " {\n color: ", ";\n padding-left: 10px;\n width: -webkit-fill-available;\n height: -webkit-fill-available;\n }\n\n &.active,\n &.selected {\n ", " {\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
35
35
|
var $isCompact = _a.$isCompact;
|
|
36
36
|
return ($isCompact ? 'column' : 'row');
|
|
37
37
|
}, function (_a) {
|
|
@@ -56,8 +56,8 @@ export var ItemLinkWrap = styled(NavLink)(templateObject_10 || (templateObject_1
|
|
|
56
56
|
var $isCompact = _a.$isCompact;
|
|
57
57
|
return ($isCompact ? 'center' : 'space-between');
|
|
58
58
|
}, function (_a) {
|
|
59
|
-
var
|
|
60
|
-
return
|
|
59
|
+
var $lightMode = _a.$lightMode;
|
|
60
|
+
return ($lightMode ? th('colors.red1') : 'white');
|
|
61
61
|
}, function (_a) {
|
|
62
62
|
var $lightMode = _a.$lightMode;
|
|
63
63
|
return ($lightMode ? th('colors.red1') : 'white');
|
|
@@ -74,7 +74,7 @@ export var ItemLinkWrap = styled(NavLink)(templateObject_10 || (templateObject_1
|
|
|
74
74
|
var $lightMode = _a.$lightMode;
|
|
75
75
|
return ($lightMode ? th.color('red1') : th.color('white'));
|
|
76
76
|
});
|
|
77
|
-
export var MenuItemContainer = styled.div(
|
|
77
|
+
export var MenuItemContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n z-index: 1;\n stroke: ", ";\n .selected > ", ", .active > ", " {\n color: ", ";\n stroke: ", ";\n }\n\n .toplevel {\n ", "\n\n ", "\n\n &.active, &.selected {\n ", "\n \n background-color: ", ";\n svg {\n stroke: ", ";\n }\n }\n\n &.expanded > ", " {\n visibility: visible;\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &:hover {\n ", ".toplevel {\n background-color: ", ";\n }\n ", ".toplevel.active, ", ".toplevel.selected {\n background-color: ", ";\n }\n ", ".nestedlevel {\n background-color: inherit;\n }\n }\n }\n"], ["\n z-index: 1;\n stroke: ", ";\n .selected > ", ", .active > ", " {\n color: ", ";\n stroke: ", ";\n }\n\n .toplevel {\n ", "\n\n ", "\n\n &.active, &.selected {\n ", "\n \n background-color: ", ";\n svg {\n stroke: ", ";\n }\n }\n\n &.expanded > ", " {\n visibility: visible;\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &:hover {\n ", ".toplevel {\n background-color: ", ";\n }\n ", ".toplevel.active, ", ".toplevel.selected {\n background-color: ", ";\n }\n ", ".nestedlevel {\n background-color: inherit;\n }\n }\n }\n"])), function (_a) {
|
|
78
78
|
var $lightMode = _a.$lightMode;
|
|
79
79
|
return ($lightMode ? th.color('blue2') : undefined);
|
|
80
80
|
}, ItemLabel, ItemLabel, function (_a) {
|
|
@@ -87,17 +87,17 @@ export var MenuItemContainer = styled.div(templateObject_15 || (templateObject_1
|
|
|
87
87
|
var $isCompact = _a.$isCompact, hasChildren = _a.hasChildren, isHovering = _a.isHovering;
|
|
88
88
|
return $isCompact &&
|
|
89
89
|
hasChildren &&
|
|
90
|
-
isHovering && css(
|
|
90
|
+
isHovering && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n & ", " {\n ", "\n ::after {\n background-color: ", ";\n }\n }\n "], ["\n & ", " {\n ", "\n ::after {\n background-color: ", ";\n }\n }\n "])), ItemIcon, leftMenuAfter, function (_a) {
|
|
91
91
|
var $lightMode = _a.$lightMode;
|
|
92
92
|
return ($lightMode ? th.color('neutral20') : th.color('neutral500'));
|
|
93
93
|
});
|
|
94
94
|
}, function (_a) {
|
|
95
95
|
var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode, hasChildren = _a.hasChildren;
|
|
96
|
-
return $isCompact && css(
|
|
96
|
+
return $isCompact && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n & ", " {\n ", "\n :hover {\n background-color: ", ";\n }\n }\n "], ["\n & ", " {\n ", "\n :hover {\n background-color: ", ";\n }\n }\n "])), ItemIcon, compactMenuItem, hasChildren ? 'transparent' : $lightMode ? th.color('neutral20') : th.color('neutral500'));
|
|
97
97
|
}, function (_a) {
|
|
98
98
|
var $isCompact = _a.$isCompact, hasChildren = _a.hasChildren, isHovering = _a.isHovering, $lightMode = _a.$lightMode;
|
|
99
99
|
return $isCompact && hasChildren && isHovering
|
|
100
|
-
? css(
|
|
100
|
+
? css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n & ", " {\n ", "\n ::after {\n background-color: ", ";\n }\n }\n "], ["\n & ", " {\n ", "\n ::after {\n background-color: ", ";\n }\n }\n "])), ItemIcon, leftMenuAfter, $lightMode ? th.color('red20') : th.color('neutral500')) : css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n & ", " {\n background-color: ", ";\n :hover {\n background-color: ", ";\n }\n }\n "], ["\n & ", " {\n background-color: ", ";\n :hover {\n background-color: ", ";\n }\n }\n "])), ItemIcon, !$isCompact ? 'transparent' : $lightMode ? th.color('red20') : th.color('red1'), $lightMode ? th.color('red20') : 'none');
|
|
101
101
|
}, function (_a) {
|
|
102
102
|
var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode;
|
|
103
103
|
if ($isCompact)
|
|
@@ -119,14 +119,14 @@ export var MenuItemContainer = styled.div(templateObject_15 || (templateObject_1
|
|
|
119
119
|
return th.color('red20');
|
|
120
120
|
return th.color('red70');
|
|
121
121
|
}, ItemLinkWrap);
|
|
122
|
-
export var ItemIcon = styled.span(
|
|
122
|
+
export var ItemIcon = styled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n flex-shrink: 0;\n margin-right: ", ";\n margin-bottom: ", ";\n"], ["\n display: flex;\n justify-content: center;\n flex-shrink: 0;\n margin-right: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
|
|
123
123
|
var $isCompact = _a.$isCompact;
|
|
124
124
|
return ($isCompact ? '0' : '11px');
|
|
125
125
|
}, function (_a) {
|
|
126
126
|
var $isCompact = _a.$isCompact;
|
|
127
127
|
return ($isCompact ? '4px' : '0');
|
|
128
128
|
});
|
|
129
|
-
export var TooltipWrap = styled.div(
|
|
129
|
+
export var TooltipWrap = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n background-color: ", ";\n white-space: nowrap;\n transform: translateX(8px);\n width: 248px;\n border-radius: 0 10px 10px 0;\n z-index: 5;\n &::before {\n content: '';\n position: absolute;\n border-radius: 10px;\n width: calc(100% + 80px);\n height: calc(100% + 100px);\n left: -16px;\n top: -50px;\n }\n\n & :not(:last-child) {\n border-radius: 0;\n border-bottom: 0.5px solid ", ";\n }\n\n &:first-child > {\n :hover {\n border-top-right-radius: 10px;\n background-color: ", ";\n }\n }\n\n & :not(:first-child) {\n :hover {\n border-top-right-radius: 0;\n }\n }\n\n & :last-child > {\n :hover {\n border-bottom-right-radius: 10px;\n background-color: ", ";\n }\n }\n"], ["\n position: absolute;\n background-color: ", ";\n white-space: nowrap;\n transform: translateX(8px);\n width: 248px;\n border-radius: 0 10px 10px 0;\n z-index: 5;\n &::before {\n content: '';\n position: absolute;\n border-radius: 10px;\n width: calc(100% + 80px);\n height: calc(100% + 100px);\n left: -16px;\n top: -50px;\n }\n\n & :not(:last-child) {\n border-radius: 0;\n border-bottom: 0.5px solid ", ";\n }\n\n &:first-child > {\n :hover {\n border-top-right-radius: 10px;\n background-color: ", ";\n }\n }\n\n & :not(:first-child) {\n :hover {\n border-top-right-radius: 0;\n }\n }\n\n & :last-child > {\n :hover {\n border-bottom-right-radius: 10px;\n background-color: ", ";\n }\n }\n"])), function (_a) {
|
|
130
130
|
var $lightMode = _a.$lightMode;
|
|
131
131
|
return ($lightMode ? th.color('white') : th.color('neutral500'));
|
|
132
132
|
}, function (_a) {
|
|
@@ -139,8 +139,8 @@ export var TooltipWrap = styled.div(templateObject_17 || (templateObject_17 = __
|
|
|
139
139
|
var $lightMode = _a.$lightMode;
|
|
140
140
|
return ($lightMode ? th.color('red20') : th.color('blue2'));
|
|
141
141
|
});
|
|
142
|
-
export var OverflowWithEllipsis = styled.span(
|
|
143
|
-
export var TopLevelWrap = styled.div(
|
|
142
|
+
export var OverflowWithEllipsis = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n max-width: 140px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n max-width: 140px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
|
|
143
|
+
export var TopLevelWrap = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background-color: ", ";\n border-right: 1px solid ", ";\n height: -webkit-fill-available;\n transition: width 0.5s ease;\n width: ", ";\n\n z-index: 5;\n position: absolute;\n top: ", ";\n height: ", ";\n\n display: flex;\n flex-direction: column;\n\n @media (min-width: 1024px) {\n top: inherit;\n z-index: 2;\n }\n"], ["\n background-color: ", ";\n border-right: 1px solid ", ";\n height: -webkit-fill-available;\n transition: width 0.5s ease;\n width: ", ";\n\n z-index: 5;\n position: absolute;\n top: ", ";\n height: ", ";\n\n display: flex;\n flex-direction: column;\n\n @media (min-width: 1024px) {\n top: inherit;\n z-index: 2;\n }\n"])), function (_a) {
|
|
144
144
|
var lightMode = _a.lightMode;
|
|
145
145
|
return (lightMode ? 'white' : th('colors.blue3'));
|
|
146
146
|
}, th('colors.lightGray6'), function (_a) {
|
|
@@ -153,10 +153,10 @@ export var TopLevelWrap = styled.div(templateObject_19 || (templateObject_19 = _
|
|
|
153
153
|
var isLeftMenuOpen = _a.isLeftMenuOpen;
|
|
154
154
|
return (isLeftMenuOpen ? '100%' : 'calc(100% - 52px)');
|
|
155
155
|
});
|
|
156
|
-
export var ScrollWrap = styled.div(
|
|
157
|
-
export var BodyWrap = styled.div(
|
|
156
|
+
export var ScrollWrap = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n overflow-y: auto;\n flex-grow: 1;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"], ["\n overflow-y: auto;\n flex-grow: 1;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"])));
|
|
157
|
+
export var BodyWrap = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n width: 100%;\n text-align: center;\n padding: ", ";\n height: calc(100% - 52px);\n"], ["\n width: 100%;\n text-align: center;\n padding: ", ";\n height: calc(100% - 52px);\n"])), function (_a) {
|
|
158
158
|
var isCompact = _a.isCompact;
|
|
159
159
|
return (isCompact ? '24px 9px' : '24px 22px');
|
|
160
160
|
});
|
|
161
|
-
export var Overlay = styled.div(
|
|
162
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21
|
|
161
|
+
export var Overlay = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n z-index: 4;\n height: 100%;\n width: 100%;\n background-color: ", ";\n @media (min-width: 1024px) {\n display: none;\n }\n"], ["\n position: fixed;\n top: 0;\n z-index: 4;\n height: 100%;\n width: 100%;\n background-color: ", ";\n @media (min-width: 1024px) {\n display: none;\n }\n"])), createRgba('blue2', 0.6));
|
|
162
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
|
|
@@ -10,5 +10,5 @@ export var Stepper = function (_a) {
|
|
|
10
10
|
return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { children: items.map(function (_a, index) {
|
|
11
11
|
var title = _a.title, disabled = _a.disabled, completed = _a.completed;
|
|
12
12
|
return (_jsx(StepItem, { onClick: handleChangeStep(index), title: title, index: index, activeStep: activeStep, disabled: disabled, completed: completed }, title));
|
|
13
|
-
}) }), _jsx(Component, {
|
|
13
|
+
}) }), _jsx(Component, { handleGoNext: handleChangeStep(activeStep + 1) })] }));
|
|
14
14
|
};
|
|
@@ -18,29 +18,29 @@ var items = [
|
|
|
18
18
|
{
|
|
19
19
|
title: 'Scan product',
|
|
20
20
|
component: function (_a) {
|
|
21
|
-
var
|
|
22
|
-
return (_jsxs("div", { children: ["Scan product ", _jsx(Button, { onClick:
|
|
21
|
+
var handleGoNext = _a.handleGoNext;
|
|
22
|
+
return (_jsxs("div", { children: ["Scan product ", _jsx(Button, { onClick: handleGoNext, children: "Go next" })] }));
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
26
|
title: 'Measurement',
|
|
27
27
|
component: function (_a) {
|
|
28
|
-
var
|
|
29
|
-
return (_jsxs("div", { children: ["Measurement page ", _jsx(Button, { onClick:
|
|
28
|
+
var handleGoNext = _a.handleGoNext;
|
|
29
|
+
return (_jsxs("div", { children: ["Measurement page ", _jsx(Button, { onClick: handleGoNext, children: "Go next" })] }));
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
title: 'Logistic info',
|
|
34
34
|
component: function (_a) {
|
|
35
|
-
var
|
|
36
|
-
return (_jsxs("div", { children: ["Logistic info ", _jsx(Button, { onClick:
|
|
35
|
+
var handleGoNext = _a.handleGoNext;
|
|
36
|
+
return (_jsxs("div", { children: ["Logistic info ", _jsx(Button, { onClick: handleGoNext, children: "Go next" })] }));
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
title: 'Color',
|
|
41
41
|
component: function (_a) {
|
|
42
|
-
var
|
|
43
|
-
return (_jsxs("div", { children: ["Select color ", _jsx(Button, { onClick:
|
|
42
|
+
var handleGoNext = _a.handleGoNext;
|
|
43
|
+
return (_jsxs("div", { children: ["Select color ", _jsx(Button, { onClick: handleGoNext, children: "Finish" })] }));
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
];
|