wca-designsystem 0.0.63 → 0.0.65

package/package.json

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

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

@@ -9,6 +9,7 @@ export type IconProps = {
   style?: React.CSSProperties | undefined;
   className?: string;
   onClick?: () => void;
+  disabled?: boolean;
 };
 
 const Icone = ({
@@ -19,6 +20,7 @@ const Icone = ({
   fill,
   style,
   className,
+  disabled,
 }: IconProps) => {
   const fetchSvg = async () => {
     try {
@@ -45,7 +47,7 @@ const Icone = ({
       width={width}
       height={height}
       viewBox={`0 0 ${width} ${height}`}
-      fill={fill}
+      fill={disabled ? 'gray' : fill}
       dangerouslySetInnerHTML={{ __html: svgContent }} // Injeta o SVG como HTML interno
     />
   );

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

@@ -17,6 +17,9 @@ const props: CardDestaqueProps = {
   verLogProcesso: () => console.log('aqui'),
   onClickDownload: () => console.log('download'),
   onClickUpload: () => console.log('upload'),
+  colorTitulo: 'black',
+  liberaDownload: true,
+  liberaUpload: false,
 };
 
 const Template: any = (args: CardDestaqueProps) => (

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

@@ -24,6 +24,9 @@ export type CardDestaqueProps = {
   verLogProcesso: () => void;
   onClickDownload?: () => void;
   onClickUpload?: () => void;
+  colorTitulo?: string;
+  liberaDownload?: boolean;
+  liberaUpload?: boolean;
 };
 
 function CardDestaque({
@@ -36,6 +39,9 @@ function CardDestaque({
   verLogProcesso,
   qtdLinhas,
   ultimaExec,
+  colorTitulo,
+  liberaDownload,
+  liberaUpload,
 }: CardDestaqueProps) {
   const statusTipo = useCallback(
     (status: string) => {
@@ -65,10 +71,11 @@ function CardDestaque({
   );
   return (
     <S.CardDestaqueWrapper>
-      <S.CardDestaqueCabecalho>
-        <h3>{titulo}</h3>
+      <S.CardDestaqueCabecalho cor={colorTitulo}>
+        <h3 color={theme.colors.purpleSec}>{titulo}</h3>
         <div className="botoes">
           <IconeBotao
+            disabled={!liberaDownload}
             tipo="table"
             toolTipInfo="Download"
             color={theme.colors.gray['300']}
@@ -79,6 +86,7 @@ function CardDestaque({
               fill={theme.colors.blue}
               width={14}
               height={14}
+              disabled={!liberaDownload}
             />
           </IconeBotao>
 
@@ -87,12 +95,14 @@ function CardDestaque({
             tipo="table"
             color={theme.colors.gray['300']}
             onClick={onClickUpload!}
+            disabled={!liberaUpload}
           >
             <Icone
               svg={upload}
               fill={theme.colors.blue}
               width={14}
               height={14}
+              disabled={!liberaUpload}
             />
           </IconeBotao>
         </div>

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

@@ -10,14 +10,14 @@ export const CardDestaqueWrapper = styled.div`
   `}
 `;
 
-export const CardDestaqueCabecalho = styled.div`
-  ${({ theme }) => css`
+export const CardDestaqueCabecalho = styled.div<{ cor: string | undefined }>`
+  ${({ theme, cor }) => css`
     display: flex;
     justify-content: space-between;
     align-items: center;
 
     h3 {
-      color: ${theme.colors.blue};
+      color: ${cor || theme.colors.blue};
       font-weight: bold;
     }
 

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

@@ -20,7 +20,7 @@ const passos: PassoProps[] = [
     titulo: 'Execução do Desdobramento',
     subTitulo: 'Duas linhas de resumo sobre este passo.',
     id: 1,
-    desabilitado: true,
+    desabilitado: false,
   },
   {
     titulo: 'Execução do Desdobramento',

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

@@ -176,7 +176,16 @@ function Passos({
             color={color}
             radius={'8px'}
             disabled={passo === passos.length || verificaProximoPasso(passo)}
-            leftSection={<Icone svg={proximo} fill={color} />}
+            leftSection={
+              <Icone
+                svg={proximo}
+                fill={
+                  passo === passos.length || verificaProximoPasso(passo)
+                    ? theme.colors.gray['300']
+                    : color
+                }
+              />
+            }
             onClick={() => setPasso(passo + 1)}
             tipo="default"
           >

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

@@ -73,7 +73,8 @@ const TabelaHeader = <T extends { id: string | number; children: Array<T> }>({
             { value: 'Menor', label: 'Ordenar por: Crescente' },
           ]}
           onChange={(_value, option) => setOrdenarPor!(option)}
-          value={ordenarPor ? ordenarPor.value : null}
+          value={ordenarPor ? ordenarPor.value : 'Maior'}
+          clearable={false}
           placeholder={`Ordenar por ${ordenarPor}`}
           color={color}
           maw={200}

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

@@ -75,7 +75,6 @@ TabelaProps.args = {
   columns: columns,
   color: theme.colors.blue,
   hasFiltersButtons: true,
-
   ordenarPor: {
     label: 'Ordenar por: Maior',
     value: 'Maior',
@@ -90,6 +89,7 @@ TabelaProps.args = {
   fetchMoreData: () => console.log('fetchMoreData'),
   hasInfinitScrool: true,
   hasMoreData: true,
+  hasOrder: true,
   setGlobalFilter: () => console.log('aqui'),
   setPagination: () => console.log('aqui'),
   quantidadeDeRegistros: 10,

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

@@ -107,7 +107,7 @@ export const TabelaBody = styled.tbody<ColorsProp>`
     .select {
       background-color: ${color};
       position: absolute;
-      left: 17px;
+      /* left: 17px; */
     }
 
     .expand {