@mailstep/design-system 0.6.67 → 0.6.69-beta.0

package/package.json

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

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

@@ -1,3 +1,3 @@
 import { type FC } from 'react';
-import { StepperProps } from './types';
+import type { StepperProps } from './types';
 export declare const Stepper: FC<StepperProps>;

package/ui/Blocks/Stepper/Stepper.js

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

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

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+type Props = {
+    icon?: string;
+    isCompleted?: boolean;
+    children?: React.ReactNode;
+    isActiveStep?: boolean;
+};
+export declare const StepCircle: FC<Props>;
+export {};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from '../../../../Elements/Icon';
+import { StepCircleContainer } from './styles';
+export var StepCircle = function (_a) {
+    var icon = _a.icon, isCompleted = _a.isCompleted, children = _a.children, isActiveStep = _a.isActiveStep;
+    return (_jsx(StepCircleContainer, { isCompleted: isCompleted, isActiveStep: isActiveStep, children: icon ? _jsx(Icon, { icon: icon, size: "12px", fill: isCompleted || isActiveStep ? 'red1' : 'lightGray6' }) : children }));
+};

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

@@ -0,0 +1,4 @@
+export declare const StepCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isCompleted?: boolean | undefined;
+    isActiveStep?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,19 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css, th } from '@xstyled/styled-components';
+export var StepCircleContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 600;\n  border-radius: 50%;\n  color: ", ";\n  border: ", ";\n  border-color: ", ";\n  background: white;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  flex: 0 0 36px;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"], ["\n  font-size: 16px;\n  font-weight: 600;\n  border-radius: 50%;\n  color: ", ";\n  border: ", ";\n  border-color: ", ";\n  background: white;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  flex: 0 0 36px;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
+    var isActiveStep = _a.isActiveStep;
+    return (isActiveStep ? th.color('red1') : th.color('lightGray6'));
+}, function (_a) {
+    var isCompleted = _a.isCompleted;
+    return "".concat(isCompleted ? 8 : 2, "px solid");
+}, function (_a) {
+    var isCompleted = _a.isCompleted, isActiveStep = _a.isActiveStep;
+    return th.color(isActiveStep || isCompleted ? 'red1' : 'lightGray6');
+}, function (_a) {
+    var isActiveStep = _a.isActiveStep;
+    return isActiveStep && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: 0 0 0 4px ", ";\n    "], ["\n      box-shadow: 0 0 0 4px ", ";\n    "])), th.color('red20'));
+});
+var templateObject_1, templateObject_2;

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

@@ -1,11 +1,14 @@
 import { type FC } from 'react';
 type StepItemProps = {
-    onClick: () => void;
+    onClick?: () => void;
     title: string;
     index: number;
     activeStep: number;
     disabled?: boolean;
     completed?: boolean;
+    icon?: string;
+    hasStepNumbering?: boolean;
+    total: number;
 };
 export declare const StepItem: FC<StepItemProps>;
 export {};

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Paragraph2, H7 } from '../../../../Elements/Typography/Typography';
-import { CheckedCircle } from '../CheckedCircle';
+import { StepCircle } from '../StepCircle';
 import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
 import isBoolean from 'lodash/isBoolean';
-import { Line, StepItemContainer, StepNumber, ContentWrapper } from './styles';
+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, 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, 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, children: [_jsx(Line, { isActiveStep: isActiveStep, isCompletedStep: isCompletedStep }), _jsxs(ContentWrapper, { children: [isCompletedStep ? _jsx(CheckedCircle, {}) : _jsx(StepNumber, { isActiveStep: isActiveStep, children: index + 1 }), _jsxs("div", { children: [_jsx(x.span, { textTransform: "uppercase", children: _jsxs(H7, { color: "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, 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("div", { children: [hasStepNumbering && (_jsx(x.span, { textTransform: "uppercase", children: _jsxs(H7, { color: "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,12 +1,11 @@
 export declare const StepItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isActiveStep: boolean;
     isDisabled?: boolean | undefined;
+    total: number;
+    onClick?: (() => void) | undefined;
 }, never>;
 export declare const Line: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isActiveStep: boolean;
     isCompletedStep: boolean;
 }, never>;
-export declare const StepNumber: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    isActiveStep: boolean;
-}, never>;
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

@@ -2,15 +2,26 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+import { StepCircleContainer } from '../StepCircle/styles';
 import styled, { css, th } from '@xstyled/styled-components';
-export var StepItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n"], ["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n"])), function (_a) {
+var responsiveCss = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n\n  h6 {\n    font-size: 10px;\n  }\n\n  p {\n    font-size: 12px;\n  }\n\n  ", " {\n    display: flex;\n  }\n\n  @media (min-width: ", "px) {\n    width: 150px;\n\n    ", " {\n      display: none;\n    }\n  }\n\n  @media (min-width: ", "px) {\n    width: 200px;\n\n    ", " {\n      display: flex;\n    }\n  }\n\n  @media (min-width: ", "px) {\n    width: 240px;\n\n    p {\n      font-size: 16px;\n    }\n    h6 {\n      font-size: 12px;\n    }\n\n    ", " {\n      display: flex;\n    }\n  }\n"], ["\n  width: 100%;\n\n  h6 {\n    font-size: 10px;\n  }\n\n  p {\n    font-size: 12px;\n  }\n\n  ", " {\n    display: flex;\n  }\n\n  @media (min-width: ", "px) {\n    width: 150px;\n\n    ", " {\n      display: none;\n    }\n  }\n\n  @media (min-width: ", "px) {\n    width: 200px;\n\n    ", " {\n      display: flex;\n    }\n  }\n\n  @media (min-width: ", "px) {\n    width: 240px;\n\n    p {\n      font-size: 16px;\n    }\n    h6 {\n      font-size: 12px;\n    }\n\n    ", " {\n      display: flex;\n    }\n  }\n"])), StepCircleContainer, function (_a) {
+    var total = _a.total;
+    return total * 150;
+}, StepCircleContainer, function (_a) {
+    var total = _a.total;
+    return total * 200;
+}, StepCircleContainer, function (_a) {
+    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) {
     var isActiveStep = _a.isActiveStep;
     return (isActiveStep ? th.color('bgLightGray1') : 'transparent');
 }, function (_a) {
-    var isDisabled = _a.isDisabled;
-    return (isDisabled ? 'not-allowed' : 'pointer');
-});
-export var Line = styled.div(templateObject_2 || (templateObject_2 = __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 isDisabled = _a.isDisabled, onClick = _a.onClick;
+    return (isDisabled ? 'not-allowed' : onClick ? 'pointer' : 'auto');
+}, 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;
     if (isActiveStep)
         return th.color('red1');
@@ -18,15 +29,5 @@ export var Line = styled.div(templateObject_2 || (templateObject_2 = __makeTempl
         return th.color('red20');
     return th.color('lightGray7');
 });
-export var StepNumber = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 600;\n  margin-bottom: 16px;\n  color: ", ";\n  border: 2px solid ", ";\n  border-radius: 50%;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"], ["\n  font-size: 16px;\n  font-weight: 600;\n  margin-bottom: 16px;\n  color: ", ";\n  border: 2px solid ", ";\n  border-radius: 50%;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
-    var isActiveStep = _a.isActiveStep;
-    return (isActiveStep ? th.color('red1') : th.color('lightGray6'));
-}, function (_a) {
-    var isActiveStep = _a.isActiveStep;
-    return (isActiveStep ? th.color('red1') : th.color('lightGray6'));
-}, function (_a) {
-    var isActiveStep = _a.isActiveStep;
-    return isActiveStep && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      box-shadow: 0 0 0 4px ", ";\n    "], ["\n      box-shadow: 0 0 0 4px ", ";\n    "])), th.color('red20'));
-});
-export var ContentWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  column-gap: 16px;\n"], ["\n  display: flex;\n  column-gap: 16px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+export var ContentWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  column-gap: 16px;\n  align-items: center;\n"], ["\n  display: flex;\n  column-gap: 16px;\n  align-items: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,4 +1,4 @@
 export { Stepper as default } from './Stepper';
 export { useStepper } from './hooks/useStepper';
-export { CheckedCircle } from './components/CheckedCircle';
+export { StepCircle } from './components/StepCircle';
 export type { StepperItem, StepperPassedDownProps } from './types';

package/ui/Blocks/Stepper/index.js

@@ -1,3 +1,3 @@
 export { Stepper as default } from './Stepper';
 export { useStepper } from './hooks/useStepper';
-export { CheckedCircle } from './components/CheckedCircle';
+export { StepCircle } from './components/StepCircle';

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

@@ -1,7 +1,9 @@
+import { type FC } from 'react';
 declare const meta: {
     title: string;
     tags: string[];
 };
 export default meta;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
-export declare const AllStepsCompleted: () => import("react/jsx-runtime").JSX.Element;
+export declare const Default: FC;
+export declare const WithIcons: FC;
+export declare const AllStepsCompleted: FC;

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

@@ -44,6 +44,29 @@ var items = [
         }
     }
 ];
+var iconItems = [
+    {
+        title: 'Order created',
+        icon: 'peopleCarry',
+        completed: true
+    },
+    {
+        title: 'Processed in stock',
+        icon: 'boxRamp'
+    },
+    {
+        title: 'Log Processed in stock',
+        icon: 'flatBox'
+    },
+    {
+        title: 'PPL parcelshop',
+        icon: 'truck'
+    },
+    {
+        title: 'Delivered',
+        icon: 'circleCheck'
+    }
+];
 var completedItems = items.map(function (item) { return (__assign(__assign({}, item), { completed: true })); });
 var meta = {
     title: 'Blocks/Stepper',
@@ -54,6 +77,9 @@ export var Default = function () {
     var _a = useStepper({ totalSteps: items.length }), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep;
     return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: items, activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep }) }));
 };
+export var WithIcons = function () {
+    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: iconItems, activeStep: 1, hasStepNumbering: false }) }));
+};
 export var AllStepsCompleted = function () {
     var _a = useStepper({ totalSteps: completedItems.length }), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep;
     return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: completedItems, activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep }) }));

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

@@ -1,2 +1,4 @@
 export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const ItemsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const ItemsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    total: number;
+}, never>;

package/ui/Blocks/Stepper/styles.js

@@ -3,6 +3,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n"])));
-export var ItemsWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 36px;\n"], ["\n  display: flex;\n  margin-bottom: 36px;\n"])));
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  flex-direction: column;\n"])));
+export var ItemsWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 36px;\n  flex-direction: column;\n  width: 100%;\n\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    width: auto;\n  }\n"], ["\n  display: flex;\n  margin-bottom: 36px;\n  flex-direction: column;\n  width: 100%;\n\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    width: auto;\n  }\n"])), function (_a) {
+    var total = _a.total;
+    return total * 150;
+});
 var templateObject_1, templateObject_2;

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

@@ -1,18 +1,20 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 export type StepperProps = {
     items: StepperItem[];
     activeStep: number;
-    handleChangeStep: (step: number) => () => void;
-    handleGoToNextStep: () => void;
+    handleChangeStep?: (step: number) => () => void;
+    handleGoToNextStep?: () => void;
     isLoading?: boolean;
+    hasStepNumbering?: boolean;
 };
 export type StepperPassedDownProps = {
-    handleGoToNextStep: () => void;
+    handleGoToNextStep?: () => void;
     isLoading?: boolean;
 };
 export type StepperItem = {
     title: string;
+    icon?: string;
     completed?: boolean;
     disabled?: boolean;
-    component: FC<StepperPassedDownProps>;
+    component?: FC<StepperPassedDownProps>;
 };

package/ui/Elements/Portal/index.js

@@ -4,19 +4,9 @@ export var Portal = function (_a) {
     var children = _a.children;
     var container = useState(function () { return document.createElement('div'); })[0];
     useEffect(function () {
-        try {
-            document.body.appendChild(container);
-        }
-        catch (e) {
-            console.log(e);
-        }
+        document.body.appendChild(container);
         return function () {
-            try {
-                document.body.removeChild(container);
-            }
-            catch (e) {
-                console.log(e);
-            }
+            document.body.removeChild(container);
         };
     }, []);
     return ReactDom.createPortal(children, container);