wca-designsystem 1.0.52 → 1.0.53

package/package.json

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

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

@@ -18,7 +18,6 @@ export const Primary: Story = {
       'Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,' +
       'when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
     temNotificacoes: false,
-    temChatBot: true,
     icone: iconExample,
     notificacoes: {
       abre: false,

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

@@ -1,32 +1,26 @@
-import React from 'react';
-import Icone from '../../atomos/Icone';
-import * as S from './styles';
-import ajuda from '../../../assets/imagens/icons/Ajuda.svg';
-import chat from '../../../assets/imagens/icons/Chat.svg';
-import { theme } from '../../../styles/theme';
-import HoverPopUp from '../../atomos/HoverPopUp';
+import React from 'react'
+import Icone from '../../atomos/Icone'
+import * as S from './styles'
+import ajuda from '../../../assets/imagens/icons/Ajuda.svg'
+import { theme } from '../../../styles/theme'
+import HoverPopUp from '../../atomos/HoverPopUp'
 import UsuarioNotifications, {
   NotificationsProps,
-} from '../../atomos/UsuarioNotification';
-import { Flex } from '@mantine/core';
+} from '../../atomos/UsuarioNotification'
 
 export interface CabecalhoProps {
-  notificacoes: NotificationsProps;
-  temNotificacoes?: boolean;
-  temChatBot?: boolean;
-  openChatBot?: () => void;
-  color?: string;
-  icone: string;
-  titulo: string;
-  subTitulo: string;
-  info: string;
+  notificacoes: NotificationsProps
+  temNotificacoes?: boolean
+  color?: string
+  icone: string
+  titulo: string
+  subTitulo: string
+  info: string
 }
 
 const Cabecalho = ({
   notificacoes,
   temNotificacoes,
-  temChatBot = false,
-  openChatBot,
   icone,
   info,
   subTitulo,
@@ -54,23 +48,9 @@ const Cabecalho = ({
         </HoverPopUp>
       </S.CabecalhoInfoWrapper>
 
-      <Flex gap={10} align={'center'}>
-        {temChatBot && (
-          <HoverPopUp texto={'CHATBOT'}>
-            <S.ChatBotAnchor
-              onClick={openChatBot}
-              color={theme.colors.yellowWca}
-            >
-              <Icone fill="#fff" svg={chat} />
-            </S.ChatBotAnchor>
-          </HoverPopUp>
-        )}
-        {temNotificacoes && (
-          <UsuarioNotifications notificacoes={notificacoes} />
-        )}
-      </Flex>
+      {temNotificacoes && <UsuarioNotifications notificacoes={notificacoes} />}
     </S.CabecalhoContainer>
-  );
-};
+  )
+}
 
-export default Cabecalho;
+export default Cabecalho

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

@@ -1,8 +1,8 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components'
 
 type CabecalhoProps = {
-  color?: string;
-};
+  color?: string
+}
 
 export const CabecalhoContainer = styled.header`
   display: flex;
@@ -11,7 +11,7 @@ export const CabecalhoContainer = styled.header`
   width: 100%;
   margin-bottom: 35px;
   position: relative;
-`;
+`
 
 export const CabecalhoInfoWrapper = styled.div<CabecalhoProps>`
   ${({ theme, color }) => css`
@@ -80,17 +80,4 @@ export const CabecalhoInfoWrapper = styled.div<CabecalhoProps>`
       display: flex;
     }
   `}
-`;
-
-export const ChatBotAnchor = styled.div<{ color?: string }>`
-  ${({ color }) => css`
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${color};
-  `}
-`;
+`

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

@@ -58,20 +58,20 @@ export function ConchaAplicacao({
     >
       <S.NavbarWrapper color={color} ref={navbarRef} data-active={isNavHover}>
         <Navbar
+          links={links}
           color={color}
-          sairFunc={sairFunc}
-          activeLink={activeLink}
           modulo={modulo}
+          sairFunc={sairFunc}
           isHover={isNavHover}
-          links={links}
+          activeLink={activeLink}
+          temChatBot={temChatBot}
+          openChatBot={openChatBot}
           onTrocarModulos={onTrocarModulos!}
         />
       </S.NavbarWrapper>
       <S.ConchaAplicacaoMainWrapper>
         <Container size={1500}>
           <Cabecalho
-            temChatBot={temChatBot}
-            openChatBot={openChatBot}
             icone={icone}
             info={info}
             subTitulo={subTitulo}
@@ -80,7 +80,6 @@ export function ConchaAplicacao({
             temNotificacoes={temNotificacoes}
             notificacoes={notificacoes}
           />
-
           {children}
         </Container>
       </S.ConchaAplicacaoMainWrapper>

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

@@ -1,31 +1,32 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Navbar, { NavbarType } from '.';
-import { LinksDinamicosMock } from './mocks';
+import React from 'react'
+import { Meta } from '@storybook/react'
+import Navbar, { NavbarType } from '.'
+import { LinksDinamicosMock } from './mocks'
 
 export default {
   title: 'Components/modules/Navbar',
   component: Navbar,
-} as Meta;
+} as Meta
 
 const props = {
   isHover: true,
   links: LinksDinamicosMock,
+  temChatBot: true,
   module: 'Exemplo',
   activeLink: 'Usuários',
   onTrocarModulos: () => console.log('aqui'),
-};
+}
 
 const Template: any = (args: NavbarType) => (
   <div style={{ maxWidth: args.isHover ? 280 : 80 }}>
     <Navbar {...args} />
   </div>
-);
+)
 
 export const NavbarStory = Template.bind({
   ...props,
-});
+})
 
 NavbarStory.args = {
   ...props,
-};
+}

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

@@ -1,37 +1,42 @@
-import React from 'react';
-import * as S from './styles';
-import IconeBotao from '../../atomos/IconeBotao';
-import Icone from '../../atomos/Icone';
-import { theme } from '../../../styles/theme';
-import Version from '../../atomos/Versao';
-import GrupoDeLinks, { LinksProps } from '../../molecules/GrupoDeLinks';
-import NavbarTituloHeader from '../../atomos/NavbarTituloHeader';
-import Sair from '../../../assets/imagens/icons/RecolheMenu.svg';
-import CiclosEncerrados from '../../../assets/imagens/icons/CiclosEncerrados.svg';
-import Logo from '../../../assets/imagens/novos-icones/STI_nomeCor.svg';
-import LogoInitial from '../../../assets/imagens/novos-icones/STI_iconeBranco.svg';
-import { useMemo } from 'react';
-import AjudaIcone from '../../atomos/AjudaIcone';
+import React from 'react'
+import * as S from './styles'
+import IconeBotao from '../../atomos/IconeBotao'
+import Icone from '../../atomos/Icone'
+import { theme } from '../../../styles/theme'
+import Version from '../../atomos/Versao'
+import chat from '../../../assets/imagens/icons/Chat.svg'
+import GrupoDeLinks, { LinksProps } from '../../molecules/GrupoDeLinks'
+import NavbarTituloHeader from '../../atomos/NavbarTituloHeader'
+import Sair from '../../../assets/imagens/icons/RecolheMenu.svg'
+import CiclosEncerrados from '../../../assets/imagens/icons/CiclosEncerrados.svg'
+import Logo from '../../../assets/imagens/novos-icones/STI_nomeCor.svg'
+import LogoInitial from '../../../assets/imagens/novos-icones/STI_iconeBranco.svg'
+import { useMemo } from 'react'
+import HoverPopUp from '../../atomos/HoverPopUp'
 
 export type NavbarType = {
-  isHover: boolean;
-  modulo: string;
-  links?: LinksProps[];
-  activeLink: string;
-  sairFunc: () => void;
-  color?: string;
-  onTrocarModulos?: (() => void) | undefined;
-};
+  isHover: boolean
+  modulo: string
+  links?: LinksProps[]
+  activeLink: string
+  sairFunc: () => void
+  color?: string
+  temChatBot?: boolean
+  openChatBot?: () => void
+  onTrocarModulos?: (() => void) | undefined
+}
 const Navbar = ({
   isHover,
   sairFunc,
   links,
   onTrocarModulos,
+  openChatBot,
+  temChatBot = false,
   modulo,
   activeLink,
   color = theme.colors.blue,
 }: NavbarType) => {
-  const LogoHeader = useMemo(() => (isHover ? Logo : LogoInitial), [isHover]);
+  const LogoHeader = useMemo(() => (isHover ? Logo : LogoInitial), [isHover])
 
   return (
     <S.NavbarWrapper
@@ -91,7 +96,16 @@ const Navbar = ({
         data-testid="footer-navbar"
         style={{ width: isHover ? '280px' : '80px' }}
       >
-        <AjudaIcone tipo="navbar" isHover={isHover} />
+        {temChatBot && (
+          <HoverPopUp texto={'CHATBOT'}>
+            <S.ChatBotAnchor
+              onClick={openChatBot}
+              color={theme.colors.yellowWca}
+            >
+              <Icone fill="#fff" svg={chat} />
+            </S.ChatBotAnchor>
+          </HoverPopUp>
+        )}
 
         <Version
           isNavHover={isHover}
@@ -100,7 +114,7 @@ const Navbar = ({
         />
       </S.NavbarFooter>
     </S.NavbarWrapper>
-  );
-};
+  )
+}
 
-export default Navbar;
+export default Navbar

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

@@ -1,8 +1,8 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components'
 
 type NavbarWrapperProps = {
-  color?: string;
-};
+  color?: string
+}
 
 export const NavbarWrapper = styled.div<NavbarWrapperProps>`
   ${({ color }) => css`
@@ -26,7 +26,7 @@ export const NavbarWrapper = styled.div<NavbarWrapperProps>`
       }
     }
   `}
-`;
+`
 
 export const NavbarHeader = styled.div`
   ${() => css`
@@ -40,7 +40,7 @@ export const NavbarHeader = styled.div`
       margin-top: 15px;
     }
   `}
-`;
+`
 
 export const NabarBody = styled.div<NavbarWrapperProps>`
   ${({ theme, color }) => css`
@@ -57,7 +57,7 @@ export const NabarBody = styled.div<NavbarWrapperProps>`
       }
     }
   `}
-`;
+`
 
 export const NavbarFooter = styled.div`
   ${({ theme }) => css`
@@ -65,4 +65,18 @@ export const NavbarFooter = styled.div`
     color: ${theme.colors.gray['700']};
     margin-bottom: 30px;
   `}
-`;
+`
+
+export const ChatBotAnchor = styled.div<{ color?: string }>`
+  ${({ color }) => css`
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    background-color: ${color};
+  `}
+`