wca-designsystem 1.0.36 → 1.0.38

package/package.json

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

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

@@ -17,7 +17,7 @@ const Versao = ({ versao, ultimaAtt, isNavHover }: VersaoProps) => {
           <p>
             Versão {versao} | Última atualização em {ultimaAtt}{' '}
           </p>
-          <p>Direitos reservados á </p>
+          <p>Direitos reservados à </p>
         </>
       )}
       <img

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

@@ -168,7 +168,13 @@ function Passos({
       </S.PassosContainer>
       <S.PassoInfos color={color}>
         <div className="infosWrapper">
-        <HoverPopUp
+          <div className="infos">
+            <p>Você está no Passo {passo + 1}:</p>
+            <h3>{passoInfos?.titulo}</h3>
+            <p className="preto">{passoInfos?.subTitulo}</p>
+          </div>
+
+          <HoverPopUp
             texto={passoInfos?.subTitulo}
             className="ajuda-wrapper ajuda-passos-wrapper"
           >
@@ -178,13 +184,7 @@ function Passos({
               fill={theme.colors.gray['700']}
               svg={ajuda}
             />
-          </HoverPopUp>{' '}
-          <div className="infos">
-            <p>Você está no Passo {passo + 1}:</p>
-            <h3>{passoInfos?.titulo}</h3>
-            <p className="preto">{passoInfos?.subTitulo}</p>
-          </div>
-          
+          </HoverPopUp>
         </div>
 
         <div className="botoes">

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

@@ -193,7 +193,7 @@ export const PassoInfos = styled.div<PassosWrapperProps>`
     display: block;
 
     @media (min-width: ${theme.responsive.md}) {
-      padding: 24px 0 16px 30px;
+      padding: 24px 0 16px 56px;
       display: flex;
       align-items: end;
       justify-content: space-between;
@@ -213,6 +213,7 @@ export const PassoInfos = styled.div<PassosWrapperProps>`
 
       .preto {
         color: ${theme.colors.blackSti};
+        max-width: 550px;
       }
 
       h3 {
@@ -224,7 +225,7 @@ export const PassoInfos = styled.div<PassosWrapperProps>`
       }
     }
 
-.ajuda-wrapper {
+    .ajuda-wrapper {
       width: 32px;
       min-width: 32px;
       height: 32px;
@@ -235,15 +236,15 @@ export const PassoInfos = styled.div<PassosWrapperProps>`
       border-radius: 8px;
     }
 
-      .ajuda-passos-wrapper {
+    .ajuda-passos-wrapper {
       display: flex;
       align-items: center;
-      margin-right: 5px;
       margin-top: 10px;
     }
-      
-      .infosWrapper {      
+
+    .infosWrapper {
       display: flex;
+      gap: 10px;
     }
 
     .botoes {

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

@@ -139,6 +139,7 @@ const TabelaHeader = <T extends { id: string | number; children?: Array<T> }>({
                 <Switch
                   checked={column.active}
                   onChange={() => onChangeCheckedColumn(String(column.key))}
+                  color={color}
                 />
                 {
                   columnsToHide.includes(column.header) ? '' : column.header

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

@@ -67,11 +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,
+  isLoading: false,
   acoesChildren: (row: any): JSX.Element => (
     <>
       <Botao onClick={() => console.log(row)} tipo={'table'} children={'▶'} />

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

@@ -42,7 +42,7 @@ export const StyledTable = styled.table`
     }
 
     tr:nth-child(even) {
-      background-color: ${theme.colors.gray['700']};
+      background-color: ${theme.colors.white};
     }
 
     tr:hover {