wca-designsystem 1.0.99 → 1.0.104

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.99",
+  "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/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/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