wca-designsystem 1.0.97 → 1.0.99

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.97",
+  "version": "1.0.99",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/Passos/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { ActionIcon, Stepper, StepperProps, Tooltip } from '@mantine/core'
+import { ActionIcon, CheckIcon, Stepper, StepperProps, Tooltip } from '@mantine/core'
 import * as S from './styles'
 import Icone from '../../atomos/Icone'
 import proximo from '../../../assets/imagens/icons/NavDireita.svg'
@@ -16,6 +16,13 @@ export type PassoProps = {
   subTitulo: string
   id: number
   desabilitado?: boolean
+  configurado?: boolean
+}
+
+export interface HoverPopUpProps {
+  texto: string;
+  children: React.ReactNode;
+  disabled?: boolean;
 }
 
 export interface PassosProps extends Omit<StepperProps, 'children' | 'active'> {
@@ -48,7 +55,7 @@ function Passos({
   onClickSteep,
   passoDisabled,
   moreButtons,
-  color = theme.colors.blue,
+  color = theme.colors.purpleSec,
   ...props
 }: PassosProps) {
   const carrouselRef = useRef<HTMLDivElement>(null)
@@ -60,20 +67,18 @@ function Passos({
   }, []); */
 
   const steepClasseChanger = useCallback(
-    (passoId: number, passoDesabilitado: boolean) => {
+    (passoId: number, passoDesabilitado: boolean, configurado: boolean) => {
       const classes = {
         desabilitado: 'desabilitado',
         ativo: 'ativo',
+        configurado: 'configurado',
         completo: 'completo',
       }
 
-      if (passoId === passo) {
-        return classes.ativo
-      }
+      if (passoId === passo) return classes.ativo
+      if (passoDesabilitado) return classes.desabilitado
+      if (configurado) return classes.configurado
 
-      if (passoDesabilitado) {
-        return classes.desabilitado
-      }
       return classes.completo
     },
     [passo]
@@ -122,13 +127,14 @@ function Passos({
               disabled={passoMap.desabilitado}
               className={steepClasseChanger(
                 passoMap.id,
-                passoMap?.desabilitado!
+                passoMap.desabilitado!,
+                passoMap.configurado!
               )}
               label={
-                <HoverPopUp 
-                  texto={passoMap.titulo} 
+                <HoverPopUp
+                  texto={passoMap.titulo}
                   key={passoMap.id}
-                  disabled={passo === passoMap.id}
+                // disabled={passo === passoMap.id}
                 >
                   <h2
                     className={passo === passoMap.id ? 'label-fixo' : ''}

package/src/components/molecules/Passos/styles.ts

@@ -108,7 +108,10 @@ export const BotaoEsquerda = styled.div`
   `}
 `
 
-export const PassoSteep = styled(Stepper)<PassosWrapperProps>`
+const COLOR_CONFIGURADO = "#B18BFF";
+const COLOR_PULADO = "#FFD666";
+
+export const PassoSteep = styled(Stepper) <PassosWrapperProps>`
   ${({ theme, color }) => css`
     padding: 0;
     margin-left: -55px;
@@ -178,26 +181,35 @@ export const PassoSteep = styled(Stepper)<PassosWrapperProps>`
       font-size: ${theme.sizes.xSmall};
     }
 
-    .ativo {
-      .mantine-Stepper-stepIcon {
-        background-color: ${color};
-        color: ${theme.colors.white};
-      }
-    }
+    .configurado {
+  .mantine-Stepper-stepIcon {
+    background-color: #b499ff; 
+    color: white;
+  }
+}
 
-    .desabilitado {
-      cursor: not-allowed;
-      .mantine-Stepper-stepIcon {
-        background-color: ${theme.colors.gray['500']};
-      }
-    }
+.completo {
+  .mantine-Stepper-stepIcon {
+    background-color: ${theme.colors.yellowWca};
+    color: white;
+  }
+}
+
+.desabilitado {
+  cursor: not-allowed;
+  .mantine-Stepper-stepIcon {
+    background-color: ${theme.colors.gray['500']};
+    color: white;
+  }
+}
+
+.ativo {
+  .mantine-Stepper-stepIcon {
+    background-color: ${color};
+    color: white;
+  }
+}
 
-    .completo {
-      .mantine-Stepper-stepIcon {
-        background-color: ${theme.colors.yellowWca};
-        color: ${theme.colors.white};
-      }
-    }
   `}
 `