wca-designsystem 1.0.26 → 1.0.28

package/package.json

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

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

@@ -17,6 +17,11 @@ const props = {
   critica: '122333.0',
   absorcao: '221444.0',
   desdobramento: '12011112233330.0',
+  mensagens: [
+    'Fora do período da Agenda',
+    'Período Crítico deve estar liberado e executando',
+  ],
+  podeExecutar: false,
 };
 
 const Template: any = (args: any) => (

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

@@ -5,6 +5,7 @@ import { Box, Flex } from '@mantine/core';
 import IconeBotao from '../../atomos/IconeBotao';
 import Icone from '../../atomos/Icone';
 import alocar from '../../../assets/imagens/icons/Mais.svg';
+import ajuda from '../../../assets/imagens/icons/Ajuda.svg';
 import retirar from '../../../assets/imagens/icons/Menos.svg';
 
 interface MosaicoCriticaProps {
@@ -12,8 +13,10 @@ interface MosaicoCriticaProps {
   nome?: string;
   saldo?: string;
   media?: string;
-  absorcao?: string;
   critica?: string;
+  mensagens?: string[];
+  absorcao?: string;
+  podeExecutar?: boolean;
   desdobramento?: string;
   disabledAlocar?: boolean;
   disabledRetirar?: boolean;
@@ -27,11 +30,13 @@ const MosaicoCritica = ({
   media,
   critica,
   absorcao,
+  mensagens,
   desdobramento,
-  disabledAlocar,
-  disabledRetirar,
   onClickAlocar,
   onClickRetirar,
+  disabledAlocar,
+  disabledRetirar,
+  podeExecutar = true,
   color = theme.colors.purpleSec,
 }: MosaicoCriticaProps) => {
   return (
@@ -73,39 +78,51 @@ const MosaicoCritica = ({
         </Box>
 
         <Box>
-          <Flex gap={10}>
-            <IconeBotao
-              toolTipInfo="Alocar"
-              tipo="table"
-              color={color}
-              onClick={onClickAlocar}
-              disabled={disabledAlocar}
-            >
-              <Icone
+          {podeExecutar ? (
+            <Flex gap={10}>
+              <IconeBotao
+                toolTipInfo="Alocar"
+                tipo="table"
+                color={color}
+                onClick={onClickAlocar}
                 disabled={disabledAlocar}
-                svg={alocar}
-                fill={color}
-                width={14}
-                height={14}
-              />
-            </IconeBotao>
+              >
+                <Icone
+                  disabled={disabledAlocar}
+                  svg={alocar}
+                  fill={color}
+                  width={14}
+                  height={14}
+                />
+              </IconeBotao>
 
-            <IconeBotao
-              toolTipInfo="Retirar"
-              tipo="table"
-              color={color}
-              onClick={onClickRetirar}
-              disabled={disabledRetirar}
-            >
-              <Icone
+              <IconeBotao
+                toolTipInfo="Retirar"
+                tipo="table"
+                color={color}
+                onClick={onClickRetirar}
                 disabled={disabledRetirar}
-                svg={retirar}
-                fill={color}
-                width={14}
-                height={14}
-              />
-            </IconeBotao>
-          </Flex>
+              >
+                <Icone
+                  disabled={disabledRetirar}
+                  svg={retirar}
+                  fill={color}
+                  width={14}
+                  height={14}
+                />
+              </IconeBotao>
+            </Flex>
+          ) : (
+            mensagens?.length !== 0 && (
+              <IconeBotao
+                toolTipInfo={mensagens!.map(m => `• ${m}`).join('\n')}
+                tipo="round"
+                color={theme.colors.gray[300]}
+              >
+                <Icone svg={ajuda} fill={color} width={14} height={14} />
+              </IconeBotao>
+            )
+          )}
         </Box>
       </Flex>
     </S.MosaicoCriticaContainer>

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

@@ -17,7 +17,7 @@ function SkeletonTable<T extends { id: number | string }>({
   return (
     <>
       {data?.length === 0 ? (
-        <S.TabelaSemDados>
+        <S.TabelaSemDados color={color}>
           <tr>
             <td
               style={{

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

@@ -67,10 +67,11 @@ const Template: any = (args: any) => (
 export const TabelaProps = Template.bind({});
 
 TabelaProps.args = {
-  data: data,
+  data: [],
   footer: footer,
   hasExpand: false,
   hasSelect: false,
+  isLoading: true,
   acoesChildren: (row: any): JSX.Element => (
     <>
       <Botao onClick={() => console.log(row)} tipo={'table'} children={'▶'} />

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

@@ -34,7 +34,6 @@ export const StyledTable = styled.table`
     th,
     td {
       border-bottom: 1px solid ${theme.colors.gray['300']};
-      font-size: ${theme.sizes.meddium};
     }
 
     th {
@@ -50,7 +49,9 @@ export const StyledTable = styled.table`
       background-color: ${theme.colors.gray['700']};
     }
 
-    tr:hover:has(h2) {
+    tr:hover:has(h2),
+    tr:hover:has(.mantine-Loader-root),
+    tfoot tr:hover {
       background-color: unset;
     }
 
@@ -278,6 +279,6 @@ export const FooterRow = styled.tr`
 
 export const FooterCell = styled.td<{ tdMinWidth: string; color?: string }>`
   min-width: ${({ tdMinWidth }) => tdMinWidth};
-  padding: 0.75rem;
+  padding: 5px;
   border-top: 1px solid ${({ theme }) => theme.colors.gray[500]};
 `;

package/src/styles/theme.ts

@@ -31,6 +31,7 @@ export const secColors = {
   orangeSec: '#E96C2D',
   magentaSec: '#FD3E81',
   purpleSec: '#b930c5',
+  purpleDarkSec: '#632D76',
   greenSec: '#339642',
 };
 export const fontSizes = {