@mailstep/design-system 0.6.73-beta.3 → 0.6.73-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.73-beta.3",
+  "version": "0.6.73-beta.5",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Stepper/Stepper.js

@@ -4,7 +4,7 @@ import { StepItem } from './components/StepItem';
 import { Container, ItemsWrapper } from './styles';
 export var Stepper = function (_a) {
     var items = _a.items, activeStep = _a.activeStep, hasStepNumbering = _a.hasStepNumbering, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep, isLoading = _a.isLoading;
-    var Component = useMemo(function () { return items[activeStep].component; }, [items, activeStep]);
+    var Component = useMemo(function () { var _a; return (_a = items[activeStep]) === null || _a === void 0 ? void 0 : _a.component; }, [items, activeStep]);
     useEffect(function () {
         var _a;
         if (!!activeStep && !((_a = items[activeStep - 1]) === null || _a === void 0 ? void 0 : _a.completed)) {
@@ -14,7 +14,7 @@ export var Stepper = function (_a) {
     if (!(items === null || items === void 0 ? void 0 : items.length))
         return null;
     return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { total: items.length, hasComponent: !!Component, children: items.map(function (_a, index) {
-                    var title = _a.title, disabled = _a.disabled, completed = _a.completed, icon = _a.icon;
-                    return (_jsx(StepItem, { onClick: handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(index), title: title, index: index, total: items.length, activeStep: activeStep, disabled: disabled, completed: completed, hasStepNumbering: hasStepNumbering, icon: icon }, title));
+                    var title = _a.title, disabled = _a.disabled, visible = _a.visible, completed = _a.completed, icon = _a.icon;
+                    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));
                 }) }), Component && _jsx(Component, { handleGoToNextStep: handleGoToNextStep, isLoading: isLoading })] }));
 };

package/ui/Blocks/Stepper/components/StepItem/index.d.ts

@@ -5,6 +5,7 @@ type StepItemProps = {
     index: number;
     activeStep: number;
     disabled?: boolean;
+    visible?: boolean;
     completed?: boolean;
     icon?: string;
     hasStepNumbering?: boolean;

package/ui/Blocks/Stepper/components/StepItem/index.js

@@ -6,8 +6,8 @@ import { x } from '@xstyled/styled-components';
 import isBoolean from 'lodash/isBoolean';
 import { Line, StepItemContainer, ContentWrapper } from './styles';
 export var StepItem = function (_a) {
-    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, total = _a.total, onClick = _a.onClick;
+    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;
     var isActiveStep = index === activeStep;
     var isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
-    return (_jsxs(StepItemContainer, { onClick: !disabled && isCompletedStep ? onClick : undefined, isActiveStep: isActiveStep, isDisabled: disabled, 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 })] })] })] }));
+    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 })] })] })] }));
 };

package/ui/Blocks/Stepper/components/StepItem/styles.d.ts

@@ -1,6 +1,7 @@
 export declare const StepItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isActiveStep: boolean;
     isDisabled?: boolean | undefined;
+    isVisible?: boolean | undefined;
     total: number;
     onClick?: (() => void) | undefined;
 }, never>;

package/ui/Blocks/Stepper/components/StepItem/styles.js

@@ -14,12 +14,15 @@ var responsiveCss = css(templateObject_1 || (templateObject_1 = __makeTemplateOb
     var total = _a.total;
     return total * 240;
 }, StepCircleContainer);
-export var StepItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n  ", "\n"], ["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n  ", "\n"])), function (_a) {
+export var StepItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n  display: ", ";\n  ", "\n"], ["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n  display: ", ";\n  ", "\n"])), function (_a) {
     var isActiveStep = _a.isActiveStep;
     return (isActiveStep ? th.color('bgLightGray1') : 'transparent');
 }, function (_a) {
     var isDisabled = _a.isDisabled, onClick = _a.onClick;
     return (isDisabled ? 'not-allowed' : onClick ? 'pointer' : 'auto');
+}, function (_a) {
+    var isVisible = _a.isVisible;
+    return (isVisible ? 'block' : 'none');
 }, responsiveCss);
 export var Line = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 4px;\n  border-radius: 8px;\n  width: 100%;\n  background-color: ", ";\n  margin-bottom: 16px;\n"], ["\n  height: 4px;\n  border-radius: 8px;\n  width: 100%;\n  background-color: ", ";\n  margin-bottom: 16px;\n"])), function (_a) {
     var isActiveStep = _a.isActiveStep, isCompletedStep = _a.isCompletedStep;

package/ui/Blocks/Stepper/stories/Stepper.stories.js

@@ -52,7 +52,7 @@ var iconItems = [
     },
     {
         title: 'Processed in stock',
-        icon: 'boxRamp'
+        icon: 'boxRamp',
     },
     {
         title: 'Log Processed in stock',

package/ui/Blocks/Stepper/types.d.ts

@@ -16,5 +16,6 @@ export type StepperItem = {
     icon?: string;
     completed?: boolean;
     disabled?: boolean;
+    visible?: boolean;
     component?: FC<StepperPassedDownProps>;
 };