wca-designsystem 1.0.10 → 1.0.12

package/package.json

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

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import Passos, { PassoProps, PassosProps } from './index';
+import React, { useState } from 'react';
+import Passos, { PassoProps } from './index';
 import { Meta } from '@storybook/react';
 import { theme } from '../../../styles/theme';
 
@@ -8,7 +8,6 @@ export default {
   component: Passos,
 } as Meta;
 
-// const [passo, setPasso] = useState(1);
 const passos: PassoProps[] = [
   {
     titulo: 'Execução do Desdobramento adasdasdasdasdasdasdasd',
@@ -56,37 +55,37 @@ const passos: PassoProps[] = [
     titulo: 'Execução do Desdobramento',
     subTitulo: 'Duas linhas de resumo sobre este passo.',
     id: 7,
-    desabilitado: false,
+    desabilitado: true,
   },
   {
     titulo: 'Execução do Desdobramento',
     subTitulo: 'Duas linhas de resumo sobre este passo.',
     id: 8,
-    desabilitado: false,
+    desabilitado: true,
   },
 ];
 
-const props = {
-  ciclo: 'jan/23',
-  onStepClick: (e: number) => console.log(e),
-  passo: 4,
-  setPasso: () => props.passo + 1,
-  passos: passos,
-  color: theme.colors.blue,
-  moreButtons: [
-    {
-      label: 'Sincronizar Dados',
-      onClick: () => console.log('Sincronizado'),
-    },
-  ],
-};
-
-const Template: any = (args: PassosProps) => <Passos {...args} />;
-
-export const PassosStory = Template.bind({
-  ...props,
-});
+// Template com state funcional
+const Template = () => {
+  const [passo, setPasso] = useState(4);
 
-PassosStory.args = {
-  ...props,
+  return (
+    <Passos
+      ciclo="jan/23"
+      passo={passo}
+      setPasso={setPasso}
+      passos={passos}
+      color={theme.colors.blue}
+      onStepClick={e => setPasso(e)}
+      moreButtons={[
+        {
+          label: 'Sincronizar Dados',
+          onClick: () => console.log('Sincronizado'),
+        },
+      ]}
+      passoDisabled={false}
+    />
+  );
 };
+
+export const PassosStory = Template.bind({});

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

@@ -61,21 +61,20 @@ function Passos({
   }, []); */
 
   const steepClasseChanger = useCallback(
-    (passoId: number, passoAtivo: boolean) => {
+    (passoId: number, passoDesabilitado: boolean) => {
       const classes = {
         desabilitado: 'desabilitado',
         ativo: 'ativo',
         completo: 'completo',
       };
 
-      if (passoAtivo === true) {
-        return classes.desabilitado;
-      }
-
       if (passoId === passo) {
         return classes.ativo;
       }
 
+      if (passoDesabilitado) {
+        return classes.desabilitado;
+      }
       return classes.completo;
     },
     [passo]
@@ -119,6 +118,7 @@ function Passos({
             <Stepper.Step
               key={index}
               completedIcon={<>{passoMap.id + 1}</>}
+              allowStepSelect={!passoMap.desabilitado}
               onClick={() => onClickSteep!(passoMap.id)}
               disabled={passoMap.desabilitado}
               className={steepClasseChanger(
@@ -141,8 +141,11 @@ function Passos({
                 </HoverPopUp>
               }
               description={
-                passoMap.id === passo ? (
-                  <div className="flexa-ativo">
+                <div className="sub-titulo">
+                  <p style={{ opacity: passoMap.id === passo ? 0 : 1 }}>
+                    {passoMap.subTitulo}
+                  </p>
+                  <div className="flexa">
                     <Icone
                       svg={flexa}
                       fill={theme.colors.gray['700']}
@@ -150,19 +153,7 @@ function Passos({
                       height={18}
                     />
                   </div>
-                ) : (
-                  <div className="sub-titulo">
-                    <p>{passoMap.subTitulo}</p>
-                    <div className="flexa">
-                      <Icone
-                        svg={flexa}
-                        fill={theme.colors.gray['700']}
-                        width={40}
-                        height={18}
-                      />
-                    </div>
-                  </div>
-                )
+                </div>
               }
             />
           ))}

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

@@ -168,6 +168,7 @@ export const PassoSteep = styled(Stepper)<PassosWrapperProps>`
         color: ${theme.colors.white};
       }
     }
+
     .desabilitado {
       cursor: not-allowed;
       .mantine-Stepper-stepIcon {
@@ -178,6 +179,7 @@ export const PassoSteep = styled(Stepper)<PassosWrapperProps>`
     .completo {
       .mantine-Stepper-stepIcon {
         background-color: ${theme.colors.yellowWca};
+        color: ${theme.colors.white};
       }
     }
   `}

package/src/styles/theme.ts

@@ -12,6 +12,7 @@ export const commonColors = {
   blueNew: 'rgba(58, 151, 237, 1)',
   red: '#DE0015',
   white: '#fff',
+  graphite: '#353535',
   gray: {
     700: '#87868a',
     500: '#CBCBCB',