@antscorp/antsomi-ui 1.7.8 → 1.7.9

package/es/components/atoms/Steps/Steps.js

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useEffect, useMemo, useState, memo } from 'react';
 import { isNumber } from 'lodash';
 // Styled
-import { SelectedIcon, StepsWrapper } from './styled';
+import { ErrorIcon, SelectedIcon, StepsWrapper } from './styled';
 export const Steps = memo(props => {
     const { items, saveHighestStep = true, className } = props, restOfProps = __rest(props, ["items", "saveHighestStep", "className"]);
     const { current, size = 'small' } = restOfProps;
@@ -33,8 +33,8 @@ export const Steps = memo(props => {
             }
             else {
                 if (index === current) {
-                    status = 'process';
-                    icon = undefined;
+                    status = props.status || 'process';
+                    icon = status === 'error' ? React.createElement(ErrorIcon, null, index + 1) : undefined;
                 }
                 else {
                     status = 'finish';
@@ -42,9 +42,24 @@ export const Steps = memo(props => {
                     className = `antsomi-steps-item-selectable${index === highestStep ? ' highest-step' : ''}`;
                 }
             }
+            // High Priority status from item
+            if (item.status) {
+                status = item.status;
+                switch (status) {
+                    case 'error':
+                        icon = React.createElement(ErrorIcon, null, index + 1);
+                        break;
+                    default:
+                        break;
+                }
+            }
+            // Check next step is error then add custom class
+            if (items[index + 1] && items[index + 1].status === 'error') {
+                className += ' antsomi-steps-next-error';
+            }
             return Object.assign({ status, icon, className }, item);
         })
-        : items, [current, saveHighestStep, highestStep, items]);
+        : items, [saveHighestStep, items, highestStep, props.status, current]);
     /** Check whether the user has reactivated the previous step or not */
     const isReactivate = saveHighestStep && isNumber(current) && current < highestStep;
     return (React.createElement(StepsWrapper, Object.assign({ items: customItems }, restOfProps, { size: size, isReactivate: isReactivate, highestStep: highestStep, className: `${className || ''}${saveHighestStep ? ' save-highest-step' : ''}` })));

package/es/components/atoms/Steps/styled.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const SelectedIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const StepsWrapper: import("styled-components").StyledComponent<import("react").FC<import("antd").StepsProps> & {
     Step: typeof import("rc-steps").Step;
 }, any, {

package/es/components/atoms/Steps/styled.js

@@ -1,8 +1,10 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
 import styled from 'styled-components';
 import { Steps } from 'antd';
+import { Flex } from '../Flex';
 // Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
+const { red6, bw0, colorError } = globalToken || {};
 const STEP_SIZE = {
     SMALL: 24,
     DEFAULT: 32,
@@ -20,6 +22,16 @@ export const SelectedIcon = styled.div `
   justify-content: center;
   align-items: center;
 `;
+export const ErrorIcon = styled(Flex) `
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-color: ${colorError};
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  font-size: 14px;
+`;
 export const StepsWrapper = styled(Steps) `
   &.save-highest-step {
     // * Steps Default
@@ -100,7 +112,7 @@ export const StepsWrapper = styled(Steps) `
           }
         }
 
-        &.antsomi-steps-item-process.antsomi-steps-item-active {
+        &.antsomi-steps-item-active {
           & > .antsomi-steps-item-container {
             & > .antsomi-steps-item-content > .antsomi-steps-item-title {
               &::after {
@@ -115,6 +127,26 @@ export const StepsWrapper = styled(Steps) `
             }
           }
         }
+
+        &.antsomi-steps-next-error {
+          > .antsomi-steps-item-container
+            > .antsomi-steps-item-content
+            > .antsomi-steps-item-title::after {
+            background-color: ${red6} !important;
+          }
+        }
+
+        &.antsomi-steps-item-error {
+          > .antsomi-steps-item-container {
+            > .antsomi-steps-item-icon .antsomi-steps-icon {
+              color: ${bw0} !important;
+            }
+
+            > .antsomi-steps-item-content .antsomi-steps-item-title {
+              color: ${colorError} !important;
+            }
+          }
+        }
       }
     }
 
@@ -183,7 +215,9 @@ export const StepsWrapper = styled(Steps) `
           background-color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw6};
         }
 
-        & > .antsomi-steps-item-container > .antsomi-steps-item-content {
+        &:not(.antsomi-steps-item-error)
+          > .antsomi-steps-item-container
+          > .antsomi-steps-item-content {
           .antsomi-steps-item-title,
           .antsomi-steps-item-description {
             color: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",