wca-designsystem 1.0.99 → 1.0.102

package/package.json

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

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

@@ -82,7 +82,7 @@ function CardDestaque({
   );
   return (
     <S.CardDestaqueWrapper>
-      <S.CardDestaqueCabecalho cor={colorTitulo}>
+      <S.CardDestaqueCabecalho $cor={colorTitulo}>
         <h3 color={theme.colors.purpleSec}>{titulo}</h3>
         <div className="botoes">
           <IconeBotao

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

@@ -10,14 +10,14 @@ export const CardDestaqueWrapper = styled.div`
   `}
 `;
 
-export const CardDestaqueCabecalho = styled.div<{ cor: string | undefined }>`
-  ${({ theme, cor }) => css`
+export const CardDestaqueCabecalho = styled.div<{ $cor: string | undefined }>`
+  ${({ theme, $cor }) => css`
     display: flex;
     justify-content: space-between;
     align-items: center;
 
     h3 {
-      color: ${cor || theme.colors.blue};
+      color: ${$cor || theme.colors.blue};
       font-weight: bold;
     }
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { ActionIcon, CheckIcon, Stepper, StepperProps, Tooltip } from '@mantine/core'
+import { ActionIcon, 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,13 +16,6 @@ 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'> {
@@ -55,7 +48,7 @@ function Passos({
   onClickSteep,
   passoDisabled,
   moreButtons,
-  color = theme.colors.purpleSec,
+  color = theme.colors.blue,
   ...props
 }: PassosProps) {
   const carrouselRef = useRef<HTMLDivElement>(null)
@@ -67,18 +60,20 @@ function Passos({
   }, []); */
 
   const steepClasseChanger = useCallback(
-    (passoId: number, passoDesabilitado: boolean, configurado: boolean) => {
+    (passoId: number, passoDesabilitado: boolean) => {
       const classes = {
         desabilitado: 'desabilitado',
         ativo: 'ativo',
-        configurado: 'configurado',
         completo: 'completo',
       }
 
-      if (passoId === passo) return classes.ativo
-      if (passoDesabilitado) return classes.desabilitado
-      if (configurado) return classes.configurado
+      if (passoId === passo) {
+        return classes.ativo
+      }
 
+      if (passoDesabilitado) {
+        return classes.desabilitado
+      }
       return classes.completo
     },
     [passo]
@@ -127,14 +122,13 @@ function Passos({
               disabled={passoMap.desabilitado}
               className={steepClasseChanger(
                 passoMap.id,
-                passoMap.desabilitado!,
-                passoMap.configurado!
+                passoMap?.desabilitado!
               )}
               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,10 +108,7 @@ export const BotaoEsquerda = styled.div`
   `}
 `
 
-const COLOR_CONFIGURADO = "#B18BFF";
-const COLOR_PULADO = "#FFD666";
-
-export const PassoSteep = styled(Stepper) <PassosWrapperProps>`
+export const PassoSteep = styled(Stepper)<PassosWrapperProps>`
   ${({ theme, color }) => css`
     padding: 0;
     margin-left: -55px;
@@ -181,35 +178,26 @@ export const PassoSteep = styled(Stepper) <PassosWrapperProps>`
       font-size: ${theme.sizes.xSmall};
     }
 
-    .configurado {
-  .mantine-Stepper-stepIcon {
-    background-color: #b499ff; 
-    color: white;
-  }
-}
-
-.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: ${theme.colors.white};
+      }
+    }
 
-.ativo {
-  .mantine-Stepper-stepIcon {
-    background-color: ${color};
-    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: ${theme.colors.white};
+      }
+    }
   `}
 `