wca-designsystem 1.0.102 → 1.0.104

package/package.json

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

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

@@ -1,4 +1,5 @@
 import React, { useState, memo, useMemo, useEffect } from 'react';
+import { Tooltip } from '@mantine/core';
 import { Collapse } from '@mantine/core';
 import Icone from '../Icone';
 import Arrow from '../../../assets/imagens/icons/NavDireita.svg';
@@ -54,7 +55,7 @@ const LinkNavbar = ({
     }
   }, [navHoverIsOpen]);
 
-  return (
+  const content = (
     <>
       <S.LinksControl
         data-active={navHoverIsOpen}
@@ -68,10 +69,11 @@ const LinkNavbar = ({
           <S.LinkSvg data-active={navHoverIsOpen}>
             <Icone fill={color} width={25} height={25} svg={icon} />
           </S.LinkSvg>
+
           <p>{label}</p>
         </S.LinkWrapper>
 
-        {hasLinks && (
+        {hasLinks && navHoverIsOpen && (
           <Icone
             svg={Arrow}
             className="chevron"
@@ -83,9 +85,36 @@ const LinkNavbar = ({
           />
         )}
       </S.LinksControl>
+
       {hasLinks ? <Collapse in={opened}>{items}</Collapse> : null}
     </>
   );
+
+  return navHoverIsOpen ? (
+    content
+  ) : (
+    <Tooltip
+      label={label}
+      position="right"
+      withArrow
+      offset={12}
+      transitionProps={{ transition: 'fade', duration: 150 }}
+      styles={{
+        tooltip: {
+          backgroundColor: '#fff',
+          color: '#1a1a1a',
+          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+          fontSize: '14px',
+          fontWeight: 500,
+        },
+        arrow: {
+          backgroundColor: '#fff',
+        },
+      }}
+    >
+      <div>{content}</div>
+    </Tooltip>
+  );
 };
 
 export default memo(LinkNavbar);

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

@@ -12,10 +12,7 @@ export const LinksControl = styled(Link)`
     cursor: pointer;
     border: none;
     padding: 0;
-    box-shadow: 0px 2px 0px 0px #c2dff9;
-
- 
-
+    
     :hover {
       opacity: 0.7;
     }
@@ -31,6 +28,7 @@ export const LinkWrapper = styled.div`
     display: block;
     width: 100%;
 
+
     p {
       font-size: ${theme.sizes.small};
       font-weight: 400;
@@ -91,8 +89,6 @@ export const Links = styled(Link)`
     font-weight: 400;
     color: ${theme.colors.blackSti};
     margin-left: 20px;
-    border-left: 2px solid #c2dff9;
-    border-bottom: 2px solid #c2dff9;
     text-align: start;
     color: ${theme.colors.blackWca};
     background-color: ${theme.colors.white};
@@ -105,7 +101,6 @@ export const Links = styled(Link)`
     }
 
     &[data-active='true'] {
-      background-color: ${theme.colors.blue};
       color: ${theme.colors.white};
 
       svg {

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Container } from '@mantine/core'
 import * as S from './styles'
 import Navbar from '../Navbar'
@@ -13,7 +13,7 @@ type ConchaAplicacaolType = {
   notificacoes: NotificationsProps
   links?: LinksProps[]
   modulo: string
-  isNavHover: boolean
+  // isNavHover: boolean
   navbarRef?: React.RefObject<HTMLDivElement>
   temNotificacoes?: boolean
   temChatBot?: boolean
@@ -34,7 +34,7 @@ export function ConchaAplicacao({
   temNotificacoes,
   temChatBot,
   openChatBot,
-  isNavHover,
+  // isNavHover,
   icone,
   info,
   subTitulo,
@@ -47,6 +47,8 @@ export function ConchaAplicacao({
   links,
   navbarRef,
 }: ConchaAplicacaolType) {
+  const [isNavHover, setisNavHover] = useState(true);
+
   return (
     <S.ConchaAplicacaoWrapper
       data-testid="app-shell-wrapper"
@@ -69,6 +71,7 @@ export function ConchaAplicacao({
           temChatBot={temChatBot}
           openChatBot={openChatBot}
           onTrocarModulos={onTrocarModulos!}
+          setisNavHover={setisNavHover}
         />
       </S.NavbarWrapper>
 

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

@@ -9,7 +9,7 @@ export default {
 } as Meta
 
 const props = {
-  isHover: true,
+  isHover: false,
   links: LinksDinamicosMock,
   temChatBot: true,
   module: 'Exemplo',

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

@@ -24,6 +24,7 @@ export type NavbarType = {
   temChatBot?: boolean
   openChatBot?: () => void
   onTrocarModulos?: (() => void) | undefined
+  setisNavHover: (prev: boolean | any) => void;
 }
 const Navbar = ({
   isHover,
@@ -31,6 +32,7 @@ const Navbar = ({
   links,
   onTrocarModulos,
   openChatBot,
+  setisNavHover,
   temChatBot = false,
   modulo,
   activeLink,
@@ -46,12 +48,34 @@ const Navbar = ({
     >
       <div>
         <S.NavbarHeader className={isHover ? 'nav-hover' : ''}>
-          <Icone
-            svg={LogoHeader}
-            className="logo"
-            width={isHover ? 200 : 50}
-            height={80}
-          />
+          <Tooltip
+            label={isHover ? 'Fechar menu' : 'Abrir menu'}
+            position="right"
+            withArrow
+            offset={10}
+            styles={{
+              tooltip: {
+                backgroundColor: '#fff',
+                color: '#1a1a1a',
+                boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+                fontSize: '14px',
+                fontWeight: 500,
+              },
+              arrow: {
+                backgroundColor: '#fff',
+              },
+            }}
+          >
+            <div>
+              <Icone
+                svg={LogoHeader}
+                className="logo"
+                width={isHover ? 200 : 50}
+                height={80}
+                onClick={() => setisNavHover((prev: boolean) => !prev)}
+              />
+            </div>
+          </Tooltip>
 
           <IconeBotao
             tipo="round"
@@ -81,6 +105,7 @@ const Navbar = ({
               modulo={modulo}
               icon={CiclosEncerrados}
             />
+
             <GrupoDeLinks
               color={color}
               activeLink={activeLink}

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

@@ -19,11 +19,7 @@ export const NavbarWrapper = styled.div<NavbarWrapperProps>`
     flex-direction: column;
 
     .logo {
-      margin: 30px 0;
-
-      &[data-active='true'] {
-        border-right: 5px solid ${color};
-      }
+        cursor: pointer;
     }
   `}
 `

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

@@ -36,7 +36,9 @@ const GrupoDeLinks = ({
     </S.LinkActive>
   ));
 
-  return <S.LinkGroupWrapper color={color}>{LinkToRender}</S.LinkGroupWrapper>;
+  return <S.LinkGroupWrapper color={color}>
+    {LinkToRender}
+  </S.LinkGroupWrapper>;
 };
 
 export default GrupoDeLinks;

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

@@ -6,6 +6,9 @@ type LinkProps = {
 
 export const LinkGroupWrapper = styled.div<LinkProps>`
   ${({ theme, color }) => css`
+
+    padding: 10px;
+
     .link {
       p {
         color: ${theme.colors.white};
@@ -16,8 +19,19 @@ export const LinkGroupWrapper = styled.div<LinkProps>`
       }
 
       &[data-active] {
-        background-color: ${theme.colors.white};
-        border-right: 5px solid ${color};
+        color: ${theme.colors.white};
+        background-color: #ffffff0d;
+        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
+        border-radius: 8px;
+
+        svg {
+        fill: white !important;
+      }
+
+      p {
+        color: white !important;
+        
+      }
 
         p {
           color: ${color};
@@ -32,6 +46,8 @@ export const LinkGroupWrapper = styled.div<LinkProps>`
     .link.nav-hover {
       background-color: ${theme.colors.white};
 
+      
+
       p {
         color: ${color};
       }
@@ -41,15 +57,14 @@ export const LinkGroupWrapper = styled.div<LinkProps>`
       }
 
       &[data-active] {
-        background-color: ${color};
-        border-right: 5px solid ${theme.colors.white};
-
+        background-color: #ffffff0d !important;
+       
         p {
-          color: ${theme.colors.white};
+          color: ${color} !important;
         }
 
         svg {
-          fill: ${theme.colors.white};
+          fill: ${color} !important;
         }
       }
     }
@@ -59,7 +74,8 @@ export const LinkGroupWrapper = styled.div<LinkProps>`
 export const LinkActive = styled.div<LinkProps>`
   ${({ color }) => css`
     background-color: ${color};
-    border-left: 5px solid ${color};
-    padding: 3px 0;
+    padding: 2px 0;
+    margin-top: 2px;
+
   `}
 `;

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

@@ -9,60 +9,69 @@ export default {
 } as Meta
 
 const passos: PassoProps[] = [
-  {
-    titulo: 'Execução do Desdobramento',
-    subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 0,
-    desabilitado: false,
-  },
-  {
-    titulo: 'Execução do Desdobramento',
-    subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 1,
-    desabilitado: false,
-  },
-  {
-    titulo: 'Execução do Desdobramento',
-    subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 2,
-    desabilitado: false,
-  },
-  {
-    titulo: 'Execução do Desdobramento',
-    subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 3,
-    desabilitado: false,
-  },
-  {
-    titulo: 'Execução do Desdobramento',
-    subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 4,
-    desabilitado: false,
-  },
-  {
-    titulo: 'Execução do Desdobramento',
-    subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 5,
-    desabilitado: false,
-  },
-  {
-    titulo: 'Execução do Desdobramento',
-    subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 6,
-    desabilitado: false,
-  },
-  {
-    titulo: 'Execução do Desdobramento',
-    subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 7,
-    desabilitado: true,
-  },
-  {
-    titulo: 'Execução do Desdobramento',
-    subTitulo: 'Duas linhas de resumo sobre este passo.',
-    id: 8,
-    desabilitado: true,
-  },
+    {
+        titulo: "Configuração Cálculos",
+        subTitulo: "Configurações básicas para execução do cálculo de desdobramento de metas.",
+        id: 0,
+        desabilitado: false,
+        configurado: false
+    },
+    {
+        titulo: "Configuração de Histórico Referência",
+        subTitulo: "Configure produtos de referência para os materiais que não possuem histórico de vendas nos meses considerados na configuração do cálculo de representatividade histórica.",
+        id: 1,
+        desabilitado: false,
+        configurado: true
+    },
+    {
+        titulo: "Meta Mínima Obrigatória",
+        subTitulo: "Defina os materiais (ou família de produto) que precisam estar em todos os clientes, independente do histórico de vendas real ou fictício, e configure o valor mínimo obrigatório.",
+        id: 2,
+        desabilitado: false,
+        configurado: false
+    },
+    {
+        titulo: "Execução Desdobramento",
+        subTitulo: "Inicie o processamento dos cálculos configurados, acompanhe e confira os resultados gerados.",
+        id: 3,
+        desabilitado: false,
+        configurado: true
+    },
+    {
+        titulo: "Meta Fixa",
+        subTitulo: "Bloqueie materiais ou famílias que tem metas desdobradas para qualquer movimentação durante a execução crítica.",
+        id: 4,
+        desabilitado: false,
+        configurado: true
+    },
+    {
+        titulo: "Bloqueio Filial",
+        subTitulo: "Configure regras de bloqueio filial para restringir a movimentação de volume entre elas. Ainda que o executor de crítica seja hierarquicamente responsável pelas filiais, a movimentação vai respeitar o bloqueio configurado.",
+        id: 5,
+        desabilitado: false,
+        configurado: true
+    },
+    {
+        titulo: "Trava Movimentação",
+        subTitulo: "Configure limites para a retirada e alocação dos volumes pelos usuários executores de crítica.",
+        id: 6,
+        desabilitado: false,
+        configurado: false
+    },
+    {
+        titulo: "Trava Segmentação",
+        subTitulo: "Configure grupos de segmentação tática para restringir a movimentação entre eles durante a execução crítica.",
+        id: 7,
+        desabilitado: false,
+        configurado: false
+    },
+    {
+        titulo: "Agenda da Crítica",
+        subTitulo: "Defina os períodos de execução das críticas por nível hierárquico e exceções específicas pessoa, controlando a liberação e encerramento de críticas dentro de um ciclo.",
+        id: 8,
+        desabilitado: false,
+        configurado: false
+    }
 ]
 
 // Template com state funcional

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};
-      }
-    }
   `}
 `