wca-designsystem 0.0.60 → 0.0.62

package/package.json

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

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

@@ -15,6 +15,8 @@ const props: CardDestaqueProps = {
   ultimaExec: '33/33/3333  99:99:99',
   status: 'exec',
   verLogProcesso: () => console.log('aqui'),
+  onClickDownload: () => console.log('download'),
+  onClickUpload: () => console.log('upload'),
 };
 
 const Template: any = (args: CardDestaqueProps) => (

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

@@ -16,12 +16,16 @@ export type CardDestaqueProps = {
   qtdErros: number;
   status: 'error' | 'success' | 'exec';
   verLogProcesso: () => void;
+  onClickDownload?: () => void;
+  onClickUpload?: () => void;
 };
 
 function CardDestaque({
   porcentagem,
   titulo,
   qtdErros,
+  onClickDownload,
+  onClickUpload,
   status,
   verLogProcesso,
   qtdLinhas,
@@ -57,6 +61,7 @@ function CardDestaque({
             tipo="table"
             toolTipInfo="Download"
             color={theme.colors.gray['300']}
+            onClick={onClickDownload!}
           >
             <Icone
               svg={download}
@@ -70,6 +75,7 @@ function CardDestaque({
             toolTipInfo="Upload"
             tipo="table"
             color={theme.colors.gray['300']}
+            onClick={onClickUpload!}
           >
             <Icone
               svg={upload}

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

@@ -86,8 +86,9 @@ function Passos({
           </ActionIcon>
         </S.BotaoEsquerda>
         <S.PassoSteep {...props} color={color} active={passo}>
-          {passos?.map(passoMap => (
+          {passos?.map((passoMap, index) => (
             <Stepper.Step
+              key={index}
               completedIcon={<>{passoMap.id + 1}</>}
               disabled={passoMap.desabilitado}
               className={steepClasseChanger(

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

@@ -216,7 +216,7 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
     <S.TabelaBody
       ref={tableBodyRef}
       color={color}
-      hasselect={hasSelect ? 'true' : 'false'}
+      style={{ left: `${hasSelect ? '53px' : '0px'}` }}
     >
       {data.flatMap(item =>
         renderRows(

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

@@ -160,7 +160,7 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
       />
       {/* Scroll horizontal no topo */}
       <S.ScrollWrapper ref={topScrollRef}>
-        <S.FakeTable columnswidth={tamScroll} />
+        <S.FakeTable style={{ width: `${tamScroll}px` }} />
       </S.ScrollWrapper>
       <S.TableContainer ref={bottomScrollRef}>
         <S.StyledTable ref={tabelaRef}>

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

@@ -4,7 +4,6 @@ import { Pagination } from '@mantine/core';
 type ColorsProp = {
   color?: string;
   headerSelection?: Array<String>;
-  hasselect?: string;
   tdMinWidth?: string;
 };
 
@@ -101,7 +100,7 @@ export const TabelaHeader = styled.thead<ColorsProp>`
 `;
 
 export const TabelaBody = styled.tbody<ColorsProp>`
-  ${({ theme, color, hasselect }) => css`
+  ${({ theme, color }) => css`
     min-height: 100vh; /* Garante altura mínima igual à altura da viewport */
     width: 100%;
 
@@ -114,7 +113,6 @@ export const TabelaBody = styled.tbody<ColorsProp>`
     .expand {
       position: relative;
       width: 50px;
-      left: ${hasselect === 'true' ? '53px' : '0px'};
       background-color: ${color};
       display: flex;
       align-items: center;
@@ -241,7 +239,6 @@ export const ScrollWrapper = styled.div`
   margin-bottom: -15px;
 `;
 
-export const FakeTable = styled.div<{ columnswidth: number }>`
-  width: ${({ columnswidth }) => columnswidth}px;
-  height: 1px; /* Apenas para criar a barra de rolagem */
+export const FakeTable = styled.div`
+  height: 1px;
 `;