wca-designsystem 0.0.58 → 0.0.59

package/package.json

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

package/src/components/atomos/BarraDeProgresso/index.tsx

@@ -4,16 +4,22 @@ import { Progress, ProgressSectionProps } from '@mantine/core';
 
 export interface BarraDeProgressoProps extends ProgressSectionProps {
   duracao: number;
+  height?: string;
   animated?: boolean;
 }
 
 const BarraDeProgresso = ({
   duracao,
   animated = false,
+  height,
   ...props
 }: BarraDeProgressoProps) => {
   return (
-    <S.BarraDeProgressoContainer transitionDuration={duracao} size="xl">
+    <S.BarraDeProgressoContainer
+      height={height}
+      transitionDuration={duracao}
+      size="xl"
+    >
       <Progress.Section
         // {...props}
         {...props}

package/src/components/atomos/BarraDeProgresso/styles.ts

@@ -1,10 +1,16 @@
 import { Progress } from '@mantine/core';
 import styled, { css } from 'styled-components';
 
-export const BarraDeProgressoContainer = styled(Progress.Root)`
-  ${({ theme }) => css`
+interface BarraDeProgressoContainerProps {
+  height?: string;
+}
+
+export const BarraDeProgressoContainer = styled(Progress.Root)<
+  BarraDeProgressoContainerProps
+>`
+  ${({ theme, height }) => css`
     border-radius: 4px;
-    height: 60px;
+    height: ${height || '40px'};
     width: 100%;
     padding: 0;
     background-color: ${theme.colors.gray['500']};

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

@@ -1,21 +1,37 @@
 import React from 'react';
 import { theme } from '../../../styles/theme';
-import CardInicial, { CardInicialProps } from './index';
+import CardInicial, { avisoInfoProps, CardInicialProps } from './index';
 import { Meta } from '@storybook/react';
 import remuneracao from '../../../assets/imagens/icons/Lucratividade.svg';
+import alerta from '../../../assets/imagens/icons/Alerta.svg';
+import sucessoIcon from '../../../assets/imagens/icons/EscolheModulo.svg';
 
 export default {
   title: 'Components/moleculas/CardInicial',
   component: CardInicial,
 } as Meta;
 
+const warning: avisoInfoProps = {
+  mensagem: 'Configuração Obrigatória',
+  icone: alerta,
+  corIcone: '#FFD638',
+};
+
+const sucesso: avisoInfoProps = {
+  mensagem: 'Configuração realizada com sucesso!',
+  icone: sucessoIcon,
+  corIcone: '#03C668',
+};
+
 const props: CardInicialProps = {
   color: theme.colors.blue,
   descricao: 'exemplo descrição',
   icone: remuneracao,
   titulo: 'exemplo titulo',
   onEntrar: () => console.log('test'),
-  acessoPermitido: false,
+  acessoPermitido: true,
+  children: 'Entrar',
+  avisoInfo: warning,
 };
 
 const Template: any = (args: CardInicialProps) => (

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

@@ -4,13 +4,22 @@ import * as S from './styles';
 import { theme } from '../../../styles/theme';
 import Botao from '../../atomos/Botao';
 
+export type avisoInfoProps = {
+  mensagem: string;
+  icone: string;
+  corIcone: string;
+};
+
 export type CardInicialProps = {
   titulo: string;
   icone: string;
   descricao: string;
   color: string;
+  children: React.ReactNode;
   acessoPermitido: boolean;
-  onEntrar: () => void
+  onEntrar: () => void;
+  aviso?: boolean;
+  avisoInfo?: avisoInfoProps;
 };
 const CardInicial = ({
   descricao,
@@ -19,8 +28,10 @@ const CardInicial = ({
   acessoPermitido,
   titulo,
   color,
+  children,
+  avisoInfo,
+  aviso = false,
 }: CardInicialProps) => {
-
   return (
     <S.CardInicialWrapper>
       <S.CardInicialHeader
@@ -46,10 +57,23 @@ const CardInicial = ({
           onClick={() => onEntrar()}
           disabled={!acessoPermitido}
           color={color}
-        >
-          Entrar
-        </Botao>
+          children={children}
+        />
       </S.CardInicialFooter>
+
+      {aviso && (
+        <S.CardInicialWarning>
+          <Icone
+            width={20}
+            height={20}
+            svg={avisoInfo?.icone ?? ''}
+            fill={avisoInfo?.corIcone}
+          />
+          <S.CardInicialWarningText>
+            {avisoInfo?.mensagem}
+          </S.CardInicialWarningText>
+        </S.CardInicialWarning>
+      )}
     </S.CardInicialWrapper>
   );
 };

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

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 export const CardInicialWrapper = styled.div`
   ${({ theme }) => css`
     width: 320px;
-    height: 325px;
+    height: min-content;
     border-radius: 8px;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     background-color: ${theme.colors.white};
@@ -25,7 +25,7 @@ export const CardInicialBody = styled.div`
   ${({ theme }) => css`
     text-align: center;
     background-color: ${theme.colors.white};
-    padding: 32px 16px;
+    padding: 25px 16px;
 
     h2 {
       font-size: ${theme.sizes.large};
@@ -52,3 +52,20 @@ export const CardInicialFooter = styled.div`
     }
   `}
 `;
+
+export const CardInicialWarning = styled.div`
+  ${() => css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 20px;
+  `}
+`;
+
+export const CardInicialWarningText = styled.span`
+  ${({ theme }) => css`
+    font-size: ${theme.sizes.xSmall};
+    color: ${theme.colors.gray[700]};
+  `}
+`;

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

@@ -13,36 +13,48 @@ const passos: PassoProps[] = [
   {
     titulo: 'Execução do Desdobramento',
     subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 1,
+    id: 0,
+    desabilitado: false,
   },
   {
     titulo: 'Execução do Desdobramento',
     subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 2,
+    id: 1,
+    desabilitado: true,
   },
   {
     titulo: 'Execução do Desdobramento',
     subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 3,
+    id: 2,
+    desabilitado: true,
   },
   {
     titulo: 'Execução do Desdobramento',
     subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 4,
+    id: 3,
+    desabilitado: true,
   },
   {
     titulo: 'Execução do Desdobramento',
     subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 5,
+    id: 4,
+    desabilitado: true,
   },
 ];
 
 const props = {
   ciclo: 'jan/23',
+  onStepClick: () => console.log('aqui'),
   passo: 1,
   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} />;

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

@@ -23,6 +23,13 @@ export interface PassosProps extends Omit<StepperProps, 'children' | 'active'> {
   onClickSteep?: (id: number) => void;
   ciclo: string;
   color?: string;
+  moreButtons?: Array<{
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    variant?: string;
+    color?: string;
+  }>;
 }
 
 function Passos({
@@ -31,6 +38,7 @@ function Passos({
   setPasso,
   ciclo,
   onClickSteep,
+  moreButtons,
   color = theme.colors.blue,
   ...props
 }: PassosProps) {
@@ -41,6 +49,10 @@ function Passos({
     [passo]
   );
 
+  const verificaProximoPasso = useCallback((passo: number) => {
+    return passos[passo + 1]?.desabilitado === true;
+  }, []);
+
   const steepClasseChanger = useCallback(
     (passoId: number, passoAtivo: boolean) => {
       const classes = {
@@ -72,16 +84,7 @@ function Passos({
             <Icone svg={anterior} fill={theme.colors.white} />
           </ActionIcon>
         </S.BotaoEsquerda>
-        <S.PassoSteep
-          {...props}
-          color={color}
-          active={passo}
-          onStepClick={e => {
-            setPasso(e);
-            onClickSteep!(e);
-          }}
-          allowNextStepsSelect={true}
-        >
+        <S.PassoSteep {...props} color={color} active={passo}>
           {passos?.map(passoMap => (
             <Stepper.Step
               completedIcon={<>{passoMap.id + 1}</>}
@@ -151,11 +154,25 @@ function Passos({
             Ciclo:<span>{ciclo}</span>{' '}
           </p>
 
+          {moreButtons?.map((button, index) => (
+            <Botao
+              key={index}
+              tipo="default"
+              variant={button.variant || 'outline'}
+              color={button.color || color}
+              disabled={button.disabled || false}
+              onClick={button.onClick}
+              radius={'8px'}
+            >
+              {button.label}
+            </Botao>
+          ))}
+
           <Botao
             variant="outline"
             color={color}
             radius={'8px'}
-            disabled={passo === passos.length}
+            disabled={passo === passos.length || verificaProximoPasso(passo)}
             leftSection={<Icone svg={proximo} fill={color} />}
             onClick={() => setPasso(passo + 1)}
             tipo="default"