wca-designsystem 0.0.59 → 0.0.61

package/package.json

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

package/src/components/atomos/BarraDeProgresso/BarraDeProgresso.stories.tsx

@@ -14,5 +14,6 @@ export const Primary: Story = {
     animated: true,
     duracao: 200,
     value: 50,
+    label: 'Sincronização de 50%'
   },
 };

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

@@ -4,6 +4,7 @@ import { Progress, ProgressSectionProps } from '@mantine/core';
 
 export interface BarraDeProgressoProps extends ProgressSectionProps {
   duracao: number;
+  label: string;
   height?: string;
   animated?: boolean;
 }
@@ -12,6 +13,7 @@ const BarraDeProgresso = ({
   duracao,
   animated = false,
   height,
+  label,
   ...props
 }: BarraDeProgressoProps) => {
   return (
@@ -26,7 +28,7 @@ const BarraDeProgresso = ({
         data-testid="progress-section"
         animated={animated}
       >
-        <Progress.Label>Sincronização em {props.value}% </Progress.Label>
+        <Progress.Label>{label}</Progress.Label>
       </Progress.Section>
     </S.BarraDeProgressoContainer>
   );

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

@@ -53,7 +53,11 @@ function CardDestaque({
       <S.CardDestaqueCabecalho>
         <h3>{titulo}</h3>
         <div className="botoes">
-          <IconeBotao tipo="table" color={theme.colors.gray['300']}>
+          <IconeBotao
+            tipo="table"
+            toolTipInfo="Download"
+            color={theme.colors.gray['300']}
+          >
             <Icone
               svg={download}
               fill={theme.colors.blue}
@@ -62,7 +66,11 @@ function CardDestaque({
             />
           </IconeBotao>
 
-          <IconeBotao tipo="table" color={theme.colors.gray['300']}>
+          <IconeBotao
+            toolTipInfo="Upload"
+            tipo="table"
+            color={theme.colors.gray['300']}
+          >
             <Icone
               svg={upload}
               fill={theme.colors.blue}

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

@@ -11,7 +11,7 @@ export default {
 // const [passo, setPasso] = useState(1);
 const passos: PassoProps[] = [
   {
-    titulo: 'Execução do Desdobramento',
+    titulo: 'Execução do Desdobramento adasdasdasdasdasdasdasd',
     subTitulo: 'Duas linhas de resumo sobre este passo.',
     id: 0,
     desabilitado: false,

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

@@ -8,6 +8,7 @@ import flexa from '../../../assets/imagens/icons/FlexaPassos.svg';
 import { theme } from '../../../styles/theme';
 import { useCallback, useMemo, useRef } from 'react';
 import Botao from '../../atomos/Botao';
+import HoverPopUp from '../../atomos/HoverPopUp';
 
 export type PassoProps = {
   titulo: string;
@@ -85,27 +86,29 @@ 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}
-              key={passoMap.id}
               className={steepClasseChanger(
                 passoMap.id,
                 passoMap?.desabilitado!
               )}
               label={
-                <h2
-                  className={passo === passoMap.id ? 'label-fixo' : ''}
-                  style={{
-                    color:
-                      passo === passoMap.id
-                        ? theme.colors.blackSti
-                        : theme.colors.gray['700'],
-                  }}
-                >
-                  {passoMap.titulo}
-                </h2>
+                <HoverPopUp texto={passoMap.titulo} key={passoMap.id}>
+                  <h2
+                    className={passo === passoMap.id ? 'label-fixo' : ''}
+                    style={{
+                      color:
+                        passo === passoMap.id
+                          ? theme.colors.blackSti
+                          : theme.colors.gray['700'],
+                    }}
+                  >
+                    {passoMap.titulo}
+                  </h2>
+                </HoverPopUp>
               }
               description={
                 passoMap.id === passo ? (

package/src/components/molecules/Passos/styles.ts

@@ -107,11 +107,17 @@ export const PassoSteep = styled(Stepper)<PassosWrapperProps>`
     .sub-titulo {
       display: flex;
       align-items: end;
+
       p {
         font-size: ${theme.sizes.xSmall};
         color: ${theme.colors.gray['500']};
         width: 128px;
         font-weight: light;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        -webkit-line-clamp: 3;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
       }
     }
 
@@ -138,9 +144,12 @@ export const PassoSteep = styled(Stepper)<PassosWrapperProps>`
       h2 {
         font-size: ${theme.sizes.large};
         color: ${theme.colors.gray['700']};
-        line-height: 16px;
         font-weight: 700;
-        width: 128px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        -webkit-line-clamp: 2;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
       }
 
       .label-fixo {

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

@@ -116,7 +116,7 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
   useEffect(() => {
     const topScroll = topScrollRef.current;
     const bottomScroll = bottomScrollRef.current;
-    const tabela = bottomScrollRef.current;
+    const tabela = tabelaRef.current;
 
     if (topScroll && bottomScroll) {
       const onTopScroll = () => {
@@ -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;
 `;