wca-designsystem 0.0.53 → 0.0.55

package/package.json

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

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

@@ -9,12 +9,14 @@ export type NavbarTituloHeaderProps = {
   icon: string;
   isNavHover: boolean;
   color?: string;
+  onTrocarModulos?: () => void;
 };
 const NavbarTituloHeader = ({
   modulo,
   color = theme.colors.blue,
   icon,
   isNavHover,
+  onTrocarModulos,
 }: NavbarTituloHeaderProps) => {
   return (
     <S.NavbarTituloHeaderWrapper data-active={isNavHover} color={color}>
@@ -25,7 +27,13 @@ const NavbarTituloHeader = ({
           <h3>{modulo}</h3>
         </S.LinkText>
       </S.LinkInfo>
-      <Icone fill={theme.colors.white} svg={trocarModulo} />
+      <button
+        className="acessar-modulos"
+        title="Acessar Modulos"
+        onClick={onTrocarModulos}
+      >
+        <Icone fill={theme.colors.white} svg={trocarModulo} />
+      </button>
     </S.NavbarTituloHeaderWrapper>
   );
 };

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

@@ -14,6 +14,11 @@ export const NavbarTituloHeaderWrapper = styled.div<NavbarTTituloType>`
     justify-content: space-around;
     padding: 10px;
 
+    .acessar-modulos {
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+    }
     &[data-active='true'] {
       display: flex;
       opacity: 1;

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

@@ -22,6 +22,7 @@ export const Primary: Story = {
     titulo:"exemplo",
     color: theme.colors.blue,
     modulo: 'exemplo',
+    onTrocarModulos:() => console.log('trocar modulos'),
     notificacoes: {
       abre: true,
       notificacao: {

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

@@ -22,6 +22,7 @@ type ConchaAplicacaolType = {
   titulo: string;
   subTitulo: string;
   info: string;
+  onTrocarModulos?: () => void;
 };
 export function ConchaAplicacao({
   children,
@@ -31,6 +32,7 @@ export function ConchaAplicacao({
   icone,
   info,
   subTitulo,
+  onTrocarModulos,
   titulo,
   sairFunc,
   activeLink,
@@ -58,6 +60,7 @@ export function ConchaAplicacao({
           modulo={modulo}
           isHover={isNavHover}
           links={links}
+          onTrocarModulos={onTrocarModulos!}
         />
       </S.NavbarWrapper>
       <S.ConchaAplicacaoMainWrapper>

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

@@ -13,6 +13,7 @@ const props = {
   links: LinksDinamicosMock,
   module: 'Exemplo',
   activeLink: 'Usuários',
+  onTrocarModulos: () => console.log('aqui'),
 };
 
 const Template: any = (args: NavbarType) => (

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

@@ -20,11 +20,13 @@ export type NavbarType = {
   activeLink: string;
   sairFunc: () => void;
   color?: string;
+  onTrocarModulos?: (() => void) | undefined;
 };
 const Navbar = ({
   isHover,
   sairFunc,
   links,
+  onTrocarModulos,
   modulo,
   activeLink,
   color = theme.colors.blue,
@@ -38,7 +40,6 @@ const Navbar = ({
       color={isHover ? theme.colors.white : color}
     >
       <div>
-
         <S.NavbarHeader className={isHover ? 'nav-hover' : ''}>
           <Icone
             svg={LogoHeader}
@@ -71,6 +72,7 @@ const Navbar = ({
             <NavbarTituloHeader
               isNavHover={isHover}
               color={color}
+              onTrocarModulos={onTrocarModulos}
               modulo={modulo}
               icon={CiclosEncerrados}
             />

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

@@ -16,7 +16,7 @@ export const NavbarWrapper = styled.div<NavbarWrapperProps>`
     display: flex;
     align-items: normal;
     justify-content: space-between;
-    flex-direction: inherit;
+    flex-direction: column;
 
     .logo {
       margin: 30px 0;

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

@@ -6,6 +6,7 @@ export interface ModalCustomProps extends ModalProps {
   open: boolean;
   close: () => void;
   children: React.ReactNode;
+  hasClose?: boolean;
   modalTitle: string;
   color?: string;
   size?: number | MantineSize | (string & {}) | undefined;
@@ -16,6 +17,7 @@ const ModalCustom = ({
   color,
   open,
   children,
+  hasClose = true,
   modalTitle,
   size,
   ...props
@@ -37,7 +39,7 @@ const ModalCustom = ({
       <Modal.Content>
         <S.ModalHeader color={color}>
           <S.ModalTitle color={color}>{modalTitle}</S.ModalTitle>
-          <S.ModalCloseButton iconSize={30} />
+          {hasClose && <S.ModalCloseButton iconSize={30} />}
         </S.ModalHeader>
         <Modal.Body>{children}</Modal.Body>
       </Modal.Content>

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

@@ -69,8 +69,8 @@ const TabelaHeader = <T extends { id: string | number; children: Array<T> }>({
         <SelectCustomizado
           tipo="table"
           data={[
-            { value: 'Maior', label: 'Ordenar por: Maior' },
-            { value: 'Menor', label: 'Ordenar por: Menor' },
+            { value: 'Maior', label: 'Ordenar por: Decrescente' },
+            { value: 'Menor', label: 'Ordenar por: Crescente' },
           ]}
           onChange={(_value, option) => setOrdenarPor!(option)}
           value={ordenarPor ? ordenarPor.value : null}

package/src/components/organismos/Tabela/Tabela.stories.tsx

@@ -168,7 +168,7 @@ const columns: any = [
   { key: 'name', header: 'Nome' },
   { key: 'price', header: 'Preço' },
   { key: 'exemplo', header: 'Exemplo' },
-  { key: 'acoes', header: 'acoes' },
+  { key: 'acoes', header: 'Ações' },
 ];
 
 const Template: any = (args: any) => (

package/src/components/organismos/Tabela/styles.ts

@@ -57,12 +57,16 @@ export const StyledTable = styled.table`
 
 export const TabelaHeader = styled.thead<ColorsProp>`
   ${({ theme, color }) => css`
+    position: sticky;
+    top: 0;
+    z-index: 2;
+
     th {
       text-align: center;
       padding: 5px;
       max-height: 24px;
       background-color: ${color};
-      opacity: 0.8;
+      opacity: 1;
       font-size: ${theme.sizes.small};
       color: ${theme.colors.white};
       font-weight: bold;
@@ -126,7 +130,7 @@ export const TabelaBody = styled.tbody<ColorsProp>`
       }
 
       &:hover {
-        opacity: 0.8;
+        /* opacity: 0.8; */
         background: ${theme.colors.white};
       }
 

package/src/styles/theme.ts

@@ -1,35 +1,35 @@
 export function pxToRem(pxValue: number) {
   const baseFontSizePx = 16; // Tamanho da fonte base em pixels
   const remValue = pxValue / baseFontSizePx;
-  return remValue + "rem";
+  return remValue + 'rem';
 }
 
 export const commonColors = {
-  success: "#03C668",
-  alert: "#FFd638",
-  blue: "#3532a4",
-  blueNew: "rgba(58, 151, 237, 1)",
-  red: "#DE0015",
-  white: "#fff",
+  success: '#03C668',
+  alert: '#FFd638',
+  blue: '#3532a4',
+  blueNew: 'rgba(58, 151, 237, 1)',
+  red: '#DE0015',
+  white: '#fff',
   gray: {
-    700: "#87868a",
-    500: "#CBCBCB",
-    300: "#eeeeee"
-  }
+    700: '#87868a',
+    500: '#CBCBCB',
+    300: '#eeeeee',
+  },
 };
 export const stiColors = {
-  blackSti: "#010002",
-  redSti: "#911f20"
+  blackSti: '#010002',
+  redSti: '#911f20',
 };
 export const wcaColors = {
-  blackWca: "#231F20",
-  yellowWca: "#FFCB05"
+  blackWca: '#231F20',
+  yellowWca: '#FFCB05',
 };
 export const secColors = {
-  orangeSec: "#E96C2D",
-  magentaSec: "#FD3E81",
-  purpleSec: "#632D76",
-  greenSec: "#339642"
+  orangeSec: '#E96C2D',
+  magentaSec: '#FD3E81',
+  purpleSec: '#b930c5',
+  greenSec: '#339642',
 };
 export const fontSizes = {
   xSmall: pxToRem(10),
@@ -37,13 +37,13 @@ export const fontSizes = {
   meddium: pxToRem(14),
   large: pxToRem(16),
   xLarge: pxToRem(18),
-  xxLarge: pxToRem(32)
+  xxLarge: pxToRem(32),
 };
 export const responsive = {
-  sm: "576px",
-  md: "768px",
-  lg: "992px",
-  xl: "1200px"
+  sm: '576px',
+  md: '768px',
+  lg: '992px',
+  xl: '1200px',
 };
 
 export const theme = {
@@ -51,12 +51,12 @@ export const theme = {
     ...commonColors,
     ...stiColors,
     ...wcaColors,
-    ...secColors
+    ...secColors,
   },
   sizes: {
-    ...fontSizes
+    ...fontSizes,
   },
-  responsive: { ...responsive }
+  responsive: { ...responsive },
 };
 
 export type ThemeType = typeof theme;