wca-designsystem 0.0.28 → 0.0.29

package/package.json

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

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

@@ -24,6 +24,7 @@ const IconeBotao = ({
             <S.IconeBotaoDefault color={color} {...props} data-testid="round" />
           </HoverPopUp>
         ),
+
         table: (
           <HoverPopUp texto={toolTipInfo!} width={100}>
             <S.IconeBotaoTable color={color} {...props} data-testid="table" />

package/src/components/modules/Cabecalho/index.tsx

@@ -1,127 +1,44 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import Icone from '../../atomos/Icone';
 import * as S from './styles';
 import ajuda from '../../../assets/imagens/icons/Ajuda.svg';
-import ciclosEncerrados from '../../../assets/imagens/icons/CiclosEncerrados.svg';
-import desdobramento from '../../../assets/imagens/icons/Desdobramentos.svg';
-import carga from '../../../assets/imagens/icons/Carga.svg';
 import { theme } from '../../../styles/theme';
 import HoverPopUp from '../../atomos/HoverPopUp';
-import { useLocation } from 'react-router-dom';
 import UsuarioNotifications, {
   NotificationsProps,
 } from '../../atomos/UsuarioNotification';
-import usuario from '../../../assets/imagens/icons/Usuario.svg';
-
-type CabecalhoOption = {
-  icon: string;
-  titulo: string;
-  subTitulo: string;
-  info: string;
-};
-
-type OpcoesCabecalho = {
-  [key: string]: CabecalhoOption;
-};
 
 export interface CabecalhoProps {
   notificacoes: NotificationsProps;
   temNotificacoes?: boolean;
   color?: string;
+  icone: string;
+  titulo: string;
+  subTitulo: string;
+  info: string;
 }
 
 const Cabecalho = ({
   notificacoes,
   temNotificacoes,
+  icone,
+  info,
+  subTitulo,
+  titulo,
   color = theme.colors.blue,
 }: CabecalhoProps) => {
-  const rotaAcessada = useLocation();
-  const paginaAtual = rotaAcessada.pathname.replace('/', '');
-  const CabecalhoInfos = useCallback(
-    (info: string) => {
-      const opcoesCabecalho: OpcoesCabecalho = {
-        usuarios: {
-          icon: usuario,
-          titulo: 'Usuários',
-          subTitulo:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          info:
-            'Cadastre, edite, delete, ou consulte os usuários que iram poder acessar o sistema.',
-        },
-        desdobramento: {
-          icon: desdobramento,
-          titulo: 'Desdobramento',
-          subTitulo:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          info:
-            'Cadastre, edite, delete, ou consulte os desdobramentos de sua venda.',
-        },
-        carga: {
-          icon: carga,
-          titulo: 'Carga e importação',
-          subTitulo:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          info:
-            'Cadastre, edite, delete, ou consulte os desdorbramentos de sua venda.',
-        },
-        boasvindas: {
-          icon: usuario,
-          titulo: 'Boas Vindas',
-          subTitulo:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          info:
-            'Cadastre, edite, delete, ou consulte os desdobramentos de sua venda.',
-        },
-        planejamento: {
-          icon: desdobramento,
-          titulo: 'Planejamento',
-          subTitulo:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          info:
-            'Cadastre, edite, delete, ou consulte os desdobramentos de sua venda.',
-        },
-        ciclosEncerrados: {
-          icon: ciclosEncerrados,
-          titulo: 'Ciclos Encerrados',
-          subTitulo:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          info:
-            'Consulte ciclos que foram cancelados e descontinuados do seu histórico de desdobramentos.',
-        },
-      };
-
-      return (
-        opcoesCabecalho[info] ?? {
-          icon: usuario,
-          titulo: 'Boas Vindas',
-          subTitulo:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          info:
-            'Cadastre, edite, delete, ou consulte os desdorbramentos de sua venda.',
-        }
-      );
-    },
-    [paginaAtual]
-  );
-
   return (
     <S.CabecalhoContainer>
       <S.CabecalhoInfoWrapper color={color}>
         <div className="icon-wrapper">
-          <Icone
-            fill={theme.colors.white}
-            svg={CabecalhoInfos(paginaAtual).icon}
-          />
+          <Icone fill={theme.colors.white} svg={icone} />
         </div>
         <div className="info-wrapper">
-          <h1>{CabecalhoInfos(paginaAtual).titulo}</h1>
-          <p>{CabecalhoInfos(paginaAtual).subTitulo}</p>
+          <h1>{titulo}</h1>
+          <p>{subTitulo}</p>
         </div>
 
-        <HoverPopUp
-          texto={CabecalhoInfos(paginaAtual).info}
-          className="ajuda-wrapper"
-        >
+        <HoverPopUp texto={info} className="ajuda-wrapper">
           <Icone
             width={16}
             height={16}

package/src/components/modules/ConchaAplicacao/ConchaAplicacao.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ConchaAplicacao } from '.';
 import { NotificacaoProp } from '../../atomos/UsuarioNotification';
 import { LinksDinamicosMock } from '../Navbar/mocks';
+import { theme } from '../../../styles/theme';
 
 const meta: Meta<typeof ConchaAplicacao> = {
   component: ConchaAplicacao,
@@ -16,6 +17,10 @@ export const Primary: Story = {
     links: LinksDinamicosMock,
     isNavHover: true,
     temNotificacoes: false,
+    info:"exemplo",
+    subTitulo:"exemplo",
+    titulo:"exemplo",
+    color: theme.colors.blue,
     modulo: 'exemplo',
     notificacoes: {
       abre: true,

package/src/components/modules/ConchaAplicacao/ConchaAplicacao.test.tsx

@@ -6,6 +6,8 @@ import {
   NotificationsProps,
 } from '../../atomos/UsuarioNotification';
 import { LinksDinamicosMock } from '../Navbar/mocks';
+import carga from '../../../assets/imagens/icons/Carga.svg';
+import { theme } from '../../../styles/theme';
 
 describe('AppShelCollapsed rendering', () => {
   it('renders without crashing', () => {
@@ -27,7 +29,12 @@ describe('AppShelCollapsed rendering', () => {
       <ConchaAplicacao
         activeLink=""
         isNavHover={true}
+        info="exemplo"
+        subTitulo="exemplo"
+        titulo="exemplo"
+        color={theme.colors.blue}
         sairFunc={() => console.log('aqui')}
+        icone={carga}
         modulo="exemplo"
         notificacoes={mockNotifications}
         links={LinksDinamicosMock}

package/src/components/modules/ConchaAplicacao/index.tsx

@@ -3,7 +3,6 @@ import { Container } from '@mantine/core';
 import * as S from './styles';
 import Navbar from '../Navbar';
 import Cabecalho from '../Cabecalho';
-import { useLocation } from 'react-router-dom';
 import { NotificationsProps } from '../../atomos/UsuarioNotification';
 import { LinksProps } from '../../molecules/GrupoDeLinks';
 import { theme } from '../../../styles/theme';
@@ -19,12 +18,20 @@ type ConchaAplicacaolType = {
   sairFunc: () => void;
   activeLink: string;
   color?: string;
+  icone: string;
+  titulo: string;
+  subTitulo: string;
+  info: string;
 };
 export function ConchaAplicacao({
   children,
   modulo,
   temNotificacoes,
   isNavHover,
+  icone,
+  info,
+  subTitulo,
+  titulo,
   sairFunc,
   activeLink,
   color = theme.colors.blue,
@@ -32,9 +39,6 @@ export function ConchaAplicacao({
   links,
   navbarRef,
 }: ConchaAplicacaolType) {
-  const rotaAcessada = useLocation();
-  const paginaAtual = rotaAcessada.pathname.replace('/', '');
-
   return (
     <S.ConchaAplicacaoWrapper
       data-testid="app-shell-wrapper"
@@ -58,13 +62,16 @@ export function ConchaAplicacao({
       </S.NavbarWrapper>
       <S.ConchaAplicacaoMainWrapper>
         <Container fluid>
-          {paginaAtual.length > 0 && (
-            <Cabecalho
-              color={color}
-              temNotificacoes={temNotificacoes}
-              notificacoes={notificacoes}
-            />
-          )}
+          <Cabecalho
+            icone={icone}
+            info={info}
+            subTitulo={subTitulo}
+            titulo={titulo}
+            color={color}
+            temNotificacoes={temNotificacoes}
+            notificacoes={notificacoes}
+          />
+
           {children}
         </Container>
       </S.ConchaAplicacaoMainWrapper>

package/src/components/modules/ConchaAplicacao/styles.ts

@@ -26,7 +26,5 @@ export const NavbarWrapper = styled(AppShell.Navbar)<ConchaAplicacaoProps>`
   `}
 `;
 export const ConchaAplicacaoMainWrapper = styled(AppShell.Main)`
-  ${() => css`
-    max-width: 1500px;
-  `}
+  ${() => css``}
 `;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import Passos, { PassoProps, PassosProps } from './index';
 import { Meta } from '@storybook/react';
+import { theme } from '../../../styles/theme';
 
 export default {
   title: 'Components/moleculas/Passos',
@@ -41,6 +42,7 @@ const props: PassosProps = {
   passo: 1,
   setPasso: () => props.passo + 1,
   passos: passos,
+  color: theme.colors.blue,
 };
 
 const Template: any = (args: PassosProps) => <Passos {...args} />;

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Stepper } from '@mantine/core';
+import { ActionIcon, Stepper } from '@mantine/core';
 import * as S from './styles';
-import IconeBotao from '../../atomos/IconeBotao';
 import Icone from '../../atomos/Icone';
 import proximo from '../../../assets/imagens/icons/NavDireita.svg';
 import anterior from '../../../assets/imagens/icons/NavEsquerda.svg';
@@ -21,14 +20,21 @@ export type PassosProps = {
   passos: Array<PassoProps>;
   setPasso: React.Dispatch<React.SetStateAction<number>>;
   passo: number;
+  color?: string;
   ciclo: string;
 };
 
-function Passos({ passos, passo, setPasso, ciclo }: PassosProps) {
+function Passos({
+  passos,
+  passo,
+  setPasso,
+  ciclo,
+  color = theme.colors.blue,
+}: PassosProps) {
   const carrouselRef = useRef<HTMLDivElement>(null);
 
   const passoInfos = useMemo(
-    () => passos.filter((passoFilter) => passoFilter.id === passo)[0],
+    () => passos.filter(passoFilter => passoFilter.id === passo)[0],
     [passo]
   );
 
@@ -53,24 +59,23 @@ function Passos({ passos, passo, setPasso, ciclo }: PassosProps) {
     [passo]
   );
   return (
-    <S.PassosWrapper>
-      <S.PassosContainer ref={carrouselRef}>
+    <S.PassosWrapper color={color}>
+      <S.PassosContainer color={color} ref={carrouselRef}>
         <S.BotaoEsquerda className="sticky">
-          <IconeBotao
-            tipo="round"
+          <ActionIcon
             className="controlador esquerda"
-            color={theme.colors.gray['500']}
             onClick={() => (carrouselRef.current!.scrollLeft -= 128)}
           >
             <Icone svg={anterior} fill={theme.colors.white} />
-          </IconeBotao>
+          </ActionIcon>
         </S.BotaoEsquerda>
         <S.PassoSteep
+          color={color}
           active={passo}
-          onStepClick={(e) => setPasso(e)}
+          onStepClick={e => setPasso(e)}
           allowNextStepsSelect={true}
         >
-          {passos?.map((passoMap) => (
+          {passos?.map(passoMap => (
             <Stepper.Step
               completedIcon={<>{passoMap.id + 1}</>}
               disabled={passoMap.desabilitado}
@@ -120,17 +125,15 @@ function Passos({ passos, passo, setPasso, ciclo }: PassosProps) {
           ))}
         </S.PassoSteep>
         <S.BotaoDireita className="sticky">
-          <IconeBotao
-            tipo="round"
+          <ActionIcon
             onClick={() => (carrouselRef.current!.scrollLeft += 128)}
-            color={theme.colors.gray['500']}
             className="controlador"
           >
             <Icone svg={proximo} fill={theme.colors.white} />
-          </IconeBotao>
+          </ActionIcon>
         </S.BotaoDireita>
       </S.PassosContainer>
-      <S.PassoInfos>
+      <S.PassoInfos color={color}>
         <div className="infos">
           <p>Você está no Passo {passo + 1}:</p>
           <h3>{passoInfos?.titulo}</h3>
@@ -143,10 +146,10 @@ function Passos({ passos, passo, setPasso, ciclo }: PassosProps) {
 
           <Botao
             variant="outline"
-            color={theme.colors.blue}
+            color={color}
             radius={'8px'}
             disabled={passo === passos.length}
-            leftSection={<Icone svg={proximo} fill={theme.colors.blue} />}
+            leftSection={<Icone svg={proximo} fill={color} />}
             onClick={() => setPasso(passo + 1)}
             tipo="default"
           >

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

@@ -1,10 +1,14 @@
-import { Stepper } from "@mantine/core";
-import styled, { css } from "styled-components";
+import { Stepper } from '@mantine/core';
+import styled, { css } from 'styled-components';
 
-export const PassosWrapper = styled.div`
-  ${({ theme }) => css`
+type PassosWrapperProps = {
+  color?: string;
+};
+
+export const PassosWrapper = styled.div<PassosWrapperProps>`
+  ${({ color }) => css`
     .divider {
-      background-color: ${theme.colors.blue};
+      background-color: ${color};
       height: 1px;
       width: 100%;
       position: relative;
@@ -60,6 +64,14 @@ export const BotaoDireita = styled.div`
       rgba(255, 255, 255, 0) 100%
     );
     justify-content: end;
+
+    button {
+      background-color: transparent;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
   `}
 `;
 export const BotaoEsquerda = styled.div`
@@ -71,11 +83,18 @@ export const BotaoEsquerda = styled.div`
       #abb5be 29.37%,
       rgba(255, 255, 255, 0) 100%
     );
+
+     button {
+      background-color: transparent;
+
+      &:hover {
+        background-color: transparent;
+      }
   `}
 `;
 
-export const PassoSteep = styled(Stepper)`
-  ${({ theme }) => css`
+export const PassoSteep = styled(Stepper)<PassosWrapperProps>`
+  ${({ theme, color }) => css`
     padding: 0;
     margin-left: -55px;
 
@@ -89,7 +108,7 @@ export const PassoSteep = styled(Stepper)`
       align-items: end;
       p {
         font-size: ${theme.sizes.xSmall};
-        color: ${theme.colors.gray["500"]};
+        color: ${theme.colors.gray['500']};
         width: 128px;
         font-weight: light;
       }
@@ -107,7 +126,7 @@ export const PassoSteep = styled(Stepper)`
       .mantine-Stepper-stepIcon {
         height: 64px;
         width: 48px;
-        color: ${theme.colors.gray["700"]};
+        color: ${theme.colors.gray['700']};
         border-radius: 5px;
         font-size: ${theme.sizes.xxLarge};
         font-weight: bold;
@@ -117,7 +136,7 @@ export const PassoSteep = styled(Stepper)`
     .mantine-Stepper-stepLabel {
       h2 {
         font-size: ${theme.sizes.large};
-        color: ${theme.colors.gray["700"]};
+        color: ${theme.colors.gray['700']};
         line-height: 16px;
         font-weight: 700;
         width: 128px;
@@ -135,14 +154,14 @@ export const PassoSteep = styled(Stepper)`
 
     .ativo {
       .mantine-Stepper-stepIcon {
-        background-color: ${theme.colors.blue};
+        background-color: ${color};
         color: ${theme.colors.white};
       }
     }
     .desabilitado {
       cursor: not-allowed;
       .mantine-Stepper-stepIcon {
-        background-color: ${theme.colors.gray["500"]};
+        background-color: ${theme.colors.gray['500']};
       }
     }
 
@@ -154,8 +173,8 @@ export const PassoSteep = styled(Stepper)`
   `}
 `;
 
-export const PassoInfos = styled.div`
-  ${({ theme }) => css`
+export const PassoInfos = styled.div<PassosWrapperProps>`
+  ${({ theme, color }) => css`
     padding: 20px 0;
     display: block;
 
@@ -169,7 +188,7 @@ export const PassoInfos = styled.div`
     .infos {
       p {
         font-size: ${theme.sizes.small};
-        color: ${theme.colors.blue};
+        color: ${color};
         line-height: 12px;
         margin: 15px 0;
 
@@ -187,7 +206,7 @@ export const PassoInfos = styled.div`
         font-weight: 700;
         line-height: 16px;
         margin: 4px 0;
-        color: ${theme.colors.blue};
+        color: ${color};
       }
     }
 
@@ -197,10 +216,10 @@ export const PassoInfos = styled.div`
       gap: 24px;
 
       .ciclo {
-        border: 1px solid ${theme.colors.blue};
+        border: 1px solid ${color};
         padding: 4px;
         border-radius: 4px;
-        color: ${theme.colors.blue};
+        color: ${color};
 
         span {
           color: ${theme.colors.blackSti};

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

@@ -11,7 +11,7 @@ export const RelatorioCardWrapper = styled.div<RelatorioCardType>`
     border-style: solid;
     border-radius: 8px;
     border-color: ${color};
-    max-width: 320px;
+    width: 320px;
     padding: 24px 16px;
 
     h2 {
@@ -57,6 +57,7 @@ export const RelatorioCriarWrapper = styled.div<RelatorioCardType>`
       align-items: center;
       justify-content: end;
       flex-direction: column;
+      background-color: ${theme.colors.white};
 
       h2 {
         color: ${color};