sbwb-ds 1.0.18 → 1.0.21

package/dist/src/main/helpers/functions/icons.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 export declare const Icons: {
+    GrayLogo: import("react").FC<import("react").SVGProps<SVGSVGElement>>;
+    BlueLogo: import("react").FC<import("react").SVGProps<SVGSVGElement>>;
     React: import("react").FC<import("react").SVGProps<SVGSVGElement>>;
     AccountCicleAnt: import("react").FC<import("react").SVGProps<SVGSVGElement>>;
     AccountCicleSm: import("react").FC<import("react").SVGProps<SVGSVGElement>>;

package/dist/src/presentation/components/atoms/Charts/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const ChartDom: any;
+export declare const PieChart: any;
+export declare const RefreshButton: any;
+export declare const ChartInfo: any;
+export declare const ChartContent: any;
+export declare const ActionButtonContainer: any;
+export declare const ChartTextContainer: any;
+export declare const Description: any;
+export declare const Title: any;

package/dist/src/presentation/components/atoms/Loading/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface LoadingProps {
+    width?: number;
+    height?: number;
+    animationSpeed?: number;
+}
+declare const Loading: React.FC<LoadingProps>;
+export default Loading;

package/dist/src/presentation/components/atoms/Loading/index.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/src/presentation/components/atoms/Loading/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const LoadingSymbol: any;
+export declare const SvgClipContainer: any;
+export declare const Title: any;

package/dist/src/presentation/components/atoms/index.d.ts

@@ -5,7 +5,7 @@ export { default as Autocomplete } from '../atoms/Autocomplete';
 export { default as BackgroundSection } from '../atoms/BackgroundSection';
 export { default as Breadcrumb } from '../atoms/Breadcrumb';
 export { default as Button } from '../atoms/Button';
-export { default as ChartPie } from '../atoms/ChartPie';
+export { default as ChartPie } from './Charts';
 export { default as Checkbox } from '../atoms/Checkbox';
 export { default as Column } from '../atoms/Column';
 export { default as Container } from '../atoms/Container';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "1.0.18",
+  "version": "1.0.21",
   "type": "module",
   "description": "Sistema de design para padronização dos processos visuais do portal SUBWEB",
   "main": "dist/sbwb-ds.js",

package/src/main/assets/icons/blueLogo.svg

@@ -0,0 +1,9 @@
+<svg width="747" height="394" viewBox="0 0 747 394" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M747 2.05438V48.4735H578.603L545.311 48.6202C496.332 46.7615 472.285 56.691 467.368 76.7945C461.122 101.789 465.696 135.442 470.613 171.051C479.514 236.009 489.546 309.184 438.55 362.5C419.126 382.799 394.341 394 368.918 394C345.067 394 322.397 384.511 303.169 366.608C269.877 335.401 267.025 260.025 264.025 180.247V179.073C262.698 146.252 259.698 69.2618 249.666 59.7237C243.273 56.3486 234.471 61.3867 234.421 61.4356C218.488 71.5608 215.833 149.969 214.309 196.78C211.751 271.862 209.243 342.347 175.41 369.005C146.151 392.043 100.516 394.147 66.8792 373.896C-8.65492 328.456 -1.18022 214.34 4.22913 130.893L4.37665 128.692C6.09781 102.132 7.81901 26.4134 5.11433 13.7448C4.47505 10.761 3.93409 7.53271 3.93409 7.53271C3.78656 6.70118 3.5899 6.01639 3.44237 5.52725C3.29484 5.13594 3.14731 4.6468 2.90143 3.96201C2.60638 3.42396 2.36051 3.08156 2.06545 2.4946C1.22946 1.17393 0.59011 0.489137 0 0H51.8806L52.6182 4.01092C56.7982 23.5764 54.8311 100.664 52.6674 134.024C47.9957 205.046 41.7012 302.482 92.0081 332.662C108.334 342.445 131.742 341.809 145.266 331.146C161.494 318.428 164.149 241.585 165.723 195.655V194.677C168.477 114.116 170.837 44.5604 208.604 20.5438C216.915 14.8209 245.388 2.78808 273.025 17.4622C305.481 34.5331 309.021 87.0664 312.562 178.339C314.578 232.438 317.676 313.879 336.51 331.488C357.509 351.2 383.129 350.369 403.291 329.287C438.305 292.651 430.289 234.248 422.421 177.801C416.962 137.448 411.651 99.3438 420.06 65.2509C431.076 20.7883 473.613 -0.440224 546.59 2.05438H746.951H747Z" fill="url(#paint0_linear_20920_16641)"/>
+<defs>
+<linearGradient id="paint0_linear_20920_16641" x1="1023.39" y1="-8.92284e-06" x2="747" y2="-6.52006e-06" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4F6F8"/>
+<stop offset="1" stop-color="#0C3C7A"/>
+</linearGradient>
+</defs>
+</svg>

package/src/main/assets/icons/grayLogo.svg

@@ -0,0 +1,9 @@
+<svg width="747" height="394" viewBox="0 0 747 394" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M747 2.05438V48.4735H578.603L545.311 48.6202C496.332 46.7615 472.285 56.691 467.368 76.7945C461.122 101.789 465.696 135.442 470.613 171.051C479.514 236.009 489.546 309.184 438.55 362.5C419.126 382.799 394.341 394 368.918 394C345.067 394 322.397 384.511 303.169 366.608C269.877 335.401 267.025 260.025 264.025 180.247V179.073C262.698 146.252 259.698 69.2618 249.666 59.7237C243.273 56.3486 234.471 61.3867 234.421 61.4356C218.488 71.5608 215.833 149.969 214.309 196.78C211.751 271.862 209.243 342.347 175.41 369.005C146.151 392.043 100.516 394.147 66.8792 373.896C-8.65492 328.456 -1.18022 214.34 4.22913 130.893L4.37665 128.692C6.09781 102.132 7.81901 26.4134 5.11433 13.7448C4.47505 10.761 3.93409 7.53271 3.93409 7.53271C3.78656 6.70118 3.5899 6.01639 3.44237 5.52725C3.29484 5.13594 3.14731 4.6468 2.90143 3.96201C2.60638 3.42396 2.36051 3.08156 2.06545 2.4946C1.22946 1.17393 0.59011 0.489137 0 0H51.8806L52.6182 4.01092C56.7982 23.5764 54.8311 100.664 52.6674 134.024C47.9957 205.046 41.7012 302.482 92.0081 332.662C108.334 342.445 131.742 341.809 145.266 331.146C161.494 318.428 164.149 241.585 165.723 195.655V194.677C168.477 114.116 170.837 44.5604 208.604 20.5438C216.915 14.8209 245.388 2.78808 273.025 17.4622C305.481 34.5331 309.021 87.0664 312.562 178.339C314.578 232.438 317.676 313.879 336.51 331.488C357.509 351.2 383.129 350.369 403.291 329.287C438.305 292.651 430.289 234.248 422.421 177.801C416.962 137.448 411.651 99.3438 420.06 65.2509C431.076 20.7883 473.613 -0.440224 546.59 2.05438H746.951H747Z" fill="url(#paint0_linear_20920_16628)"/>
+<defs>
+<linearGradient id="paint0_linear_20920_16628" x1="-29.88" y1="0" x2="-179.28" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4F6F8"/>
+<stop offset="1" stop-color="#0C3C7A"/>
+</linearGradient>
+</defs>
+</svg>

package/src/main/helpers/functions/icons.ts

@@ -233,8 +233,12 @@ import { ReactComponent as DownloadSm } from '../../assets/icons/small/Download.
 import { ReactComponent as DownloadMd } from '../../assets/icons/medium/Download.svg';
 import { ReactComponent as DownloadLg } from '../../assets/icons/large/Download.svg';
 import { ReactComponent as DownloadXl } from '../../assets/icons/extraLarge/Download.svg';
+import { ReactComponent as BlueLogo } from '../../assets/icons/blueLogo.svg';
+import { ReactComponent as GrayLogo } from '../../assets/icons/grayLogo.svg';
 
 export const Icons = {
+  GrayLogo,
+  BlueLogo,
   React,
   AccountCicleAnt,
   AccountCicleSm,

package/src/presentation/components/atoms/{ChartPie → Charts}/index.tsx

@@ -41,16 +41,7 @@ const ChartPie = ({
 
     const option = {
       title: {
-        text: title,
-        left: -4,
-        textStyle: {
-          color: sg.colors.neutralColors.colorNeutralDarkest,
-          fontFamily: sg.fonts.fontFamily.fontFamilyPrimary,
-          fontSize: sg.fonts.fontSize.fontSizeTitleMd,
-          fontWeight: sg.fonts.fontWeight.fontWeightSemiBold,
-          lineHeight: 22,
-        },
-        marginBottom: 10,
+        show: false,
       },
       tooltip: {
         show: false,
@@ -64,12 +55,21 @@ const ChartPie = ({
         icon: 'circle',
         height: 74,
         itemGap: 16,
+        formatter: function (name) {
+          return name + '                                                '; // Adiciona espaços (ou qualquer outro caractere) para simular margem
+        },
+        textStyle: {
+          fontFamily: sg.fonts.fontFamily.fontFamilyPrimary,
+          fontSize: 10,
+          fontWeight: 400,
+          lineHeight: 14,
+        },
       },
       series: [
         {
           name: seriesName,
           type: 'pie',
-          radius: '40%',
+          radius: '50%',
           center: ['50%', '50%'],
           data: chartData,
           emphasis: false,
@@ -99,36 +99,46 @@ const ChartPie = ({
 
   return (
     <C.ChartDom id={id} data-testid="chart-pie">
-      <div id="pie-chart" style={{ width: '100%', height: '431px' }} />
+      <C.PieChart id="pie-chart" />
 
       <C.ChartInfo data-testid="chart-pie-description">
-        {description}
+        <C.ChartTextContainer>
+          <C.Title title={title}>{title}</C.Title>
+          <C.Description>{description}</C.Description>
+        </C.ChartTextContainer>
 
-        <div>
-          {prevChart && (
-            <ActionButton
-              variant="prev"
-              size="Small"
-              data-testid="prev-button"
-              id="prev"
-              onClick={prevChart}
-            />
-          )}
-          {nextChart && (
-            <ActionButton
-              variant="next"
-              size="Small"
-              data-testid="next-button"
-              id="next"
-              onClick={nextChart}
-            />
-          )}
-        </div>
+        <C.ChartContent>
+          <C.RefreshButton
+            name="Atualizar"
+            size="Small"
+            iconName="Sync"
+            variant="tertiary"
+            onClick={getData}
+            data-testid="reload-button"
+            width="117px"
+          />
+          <C.ActionButtonContainer>
+            {prevChart && (
+              <ActionButton
+                variant="prev"
+                size="Small"
+                data-testid="prev-button"
+                id="prev"
+                onClick={prevChart}
+              />
+            )}
+            {nextChart && (
+              <ActionButton
+                variant="next"
+                size="Small"
+                data-testid="next-button"
+                id="next"
+                onClick={nextChart}
+              />
+            )}
+          </C.ActionButtonContainer>
+        </C.ChartContent>
       </C.ChartInfo>
-
-      <C.RefreshButton onClick={getData} data-testid="reload-button">
-        <Sync /> Atualizar
-      </C.RefreshButton>
     </C.ChartDom>
   );
 };

package/src/presentation/components/atoms/Charts/styles.tsx

@@ -0,0 +1,77 @@
+import { sg } from '../../../styles';
+import styled from 'styled-components';
+import Button from '../Button';
+
+export const ChartDom = styled.main`
+  position: relative;
+  min-width: 441px;
+  height: 431px;
+  border-radius: ${sg.borders.borderRadius.borderRadiusSm};
+`;
+
+export const PieChart = styled.div`
+  background-color: ${sg.colors.neutralColors.colorNeutralSnow};
+  /* background-color: red; */
+  width: 100%;
+  height: 431px;
+  padding: ${sg.spacings.spacingInset.spacingInsetMd};
+  border-radius: ${sg.borders.borderRadius.borderRadiusSm};
+`;
+
+export const RefreshButton = styled(Button)``;
+
+export const ChartInfo = styled.div`
+  position: absolute;
+  top: 24px;
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+`;
+
+export const ChartContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-right: ${sg.spacings.spacingInset.spacingInsetMd};
+  gap: 4px;
+`;
+
+export const ActionButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  flex: 1;
+  button {
+    margin-left: 8px;
+  }
+`;
+
+export const ChartTextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const Description = styled.p`
+  padding-left: 24px;
+  font-family: ${sg.fonts.fontFamily.fontFamilyPrimary};
+  font-size: ${sg.fonts.fontSize.fontSizeBodyLg};
+  font-weight: ${sg.fonts.fontWeight.fontWeightRegular};
+  line-height: ${sg.fonts.lineHeight.lineHeightMd(
+    sg.fonts.fontSize.fontSizeBodyLg
+  )};
+  color: ${sg.colors.neutralColors.colorNeutralCloudy};
+`;
+
+export const Title = styled.h2`
+  padding-left: 24px;
+  font-family: ${sg.fonts.fontFamily.fontFamilyPrimary};
+  font-size: ${sg.fonts.fontSize.fontSizeTitleMd};
+  font-weight: ${sg.fonts.fontWeight.fontWeightSemiBold};
+  line-height: ${sg.fonts.lineHeight.lineHeightMd(
+    sg.fonts.fontSize.fontSizeTitleMd
+  )};
+  color: ${sg.colors.neutralColors.colorNeutralDarkest};
+  margin-bottom: 16px;
+`;

package/src/presentation/components/atoms/Loading/Loading.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Loading from './index';
+
+export default {
+  title: 'Components/Loading',
+  component: Loading,
+  argTypes: {
+    width: { control: 'number' },
+    height: { control: 'number' },
+    animationSpeed: { control: 'number' },
+  },
+  tags: ['autodocs'],
+};
+
+const Template = (args) => <Loading {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  width: 146,
+  height: 77,
+  animationSpeed: 6,
+};
+
+export const FastAnimation = Template.bind({});
+FastAnimation.args = {
+  ...Default.args,
+  animationSpeed: 3,
+};

package/src/presentation/components/atoms/Loading/index.spec.tsx

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Loading from './index';
+
+describe('Loading Component', () => {
+  test('renders correctly with default props', () => {
+    const { getByText } = render(<Loading />);
+    expect(getByText(/carregando.../i)).toBeInTheDocument();
+  });
+
+  test('renders with custom width and height', () => {
+    const customWidth = 200;
+    const customHeight = 100;
+    const { container } = render(
+      <Loading width={customWidth} height={customHeight} />
+    );
+
+    const loadingSymbol = container.firstChild;
+    expect(loadingSymbol).toHaveStyle(`width: ${customWidth}px`);
+    expect(loadingSymbol).toHaveStyle(`height: ${customHeight}px`);
+  });
+});

package/src/presentation/components/atoms/Loading/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import * as C from './styles';
+import { Icons } from '../../../../main/helpers/functions/icons';
+
+const BlueLogo = Icons[`BlueLogo`];
+const GrayLogo = Icons[`GrayLogo`];
+
+interface LoadingProps {
+  width?: number;
+  height?: number;
+  animationSpeed?: number;
+}
+
+const Loading: React.FC<LoadingProps> = ({
+  width = 146,
+  height = 77,
+  animationSpeed = 6,
+}: LoadingProps) => {
+  return (
+    <C.LoadingSymbol
+      width={width}
+      height={height}
+      animationSpeed={animationSpeed}
+    >
+      <GrayLogo />
+      <C.SvgClipContainer animationSpeed={animationSpeed}>
+        <BlueLogo />
+      </C.SvgClipContainer>
+      <C.Title animationSpeed={animationSpeed}>Carregando...</C.Title>
+    </C.LoadingSymbol>
+  );
+};
+
+export default Loading;

package/src/presentation/components/atoms/Loading/styles.ts

@@ -0,0 +1,115 @@
+import { sg } from '../../../styles/styleGuide';
+import styled, { keyframes } from 'styled-components';
+
+// Animação para o preenchimento e esvaziamento do logo
+const fillAndEmptyAnimation = keyframes`
+  0%, 100% {
+    clip-path: inset(0 100% 0 0); // Logo começa e termina escondido
+  }
+  49% {
+    clip-path: inset(0 0 0 0); // No meio da animação, o logo é totalmente revelado
+  }
+`;
+
+// Animação para o gradiente acompanhar o preenchimento
+const fillGradientAnimation = keyframes`
+  0%, 48.3% {
+    right: 100%; // Mantém o gradiente fora de vista durante o preenchimento
+    width: 0%; // Gradiente não é visível durante o preenchimento
+  }
+  48.3% {
+    right: 0%; // Começa a acompanhar o esvaziamento
+    width: 30%; // O tamanho do gradiente é o mesmo do final do preenchimento
+  }
+  70%, 100% {
+    right: -100%; // O gradiente continua a se mover para a direita e desaparece
+    width: 10%; // O gradiente reduz o tamanho até desaparecer
+  }
+`;
+
+// Animação para o gradiente acompanhar o esvaziamento
+const emptyGradientFollowAnimation = keyframes`
+  0%, 50.2% {
+    right: -10%; // Fica fora de vista durante o preenchimento
+    width: 0%; // Gradiente não é visível durante o preenchimento
+  }
+  50.2% {
+    right: 0%; // Começa no final do preenchimento
+    width: 0%; // Tamanho inicial do gradiente
+  }
+  100% {
+    right: 99.8%; // Termina acompanhando o esvaziamento
+    width: 20%; // Gradiente reduz o tamanho até desaparecer
+  }
+`;
+
+// Animação para o gradiente do título
+const titleGradientAnimation = keyframes`
+  0%, 100% {
+    background-position: 200% center;
+  }
+  50% {
+    background-position: -100% center;
+  }
+`;
+
+export const LoadingSymbol = styled.div`
+  position: relative;
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.height}px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background: linear-gradient(to left, rgba(255, 255, 255, 0.5), transparent);
+    z-index: 1;
+  }
+
+  &::after {
+    right: 0;
+    animation: ${fillGradientAnimation} ${(props) => props.animationSpeed}s
+      ease-in-out infinite;
+  }
+
+  &::before {
+    right: 0;
+    animation: ${emptyGradientFollowAnimation}
+      ${(props) => props.animationSpeed}s ease-in-out infinite;
+  }
+`;
+
+export const SvgClipContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  animation: ${fillAndEmptyAnimation} ${(props) => props.animationSpeed}s
+    ease-in-out infinite;
+`;
+
+export const Title = styled.h2`
+  font-family: ${sg.fonts.fontFamily.fontFamilySecondary};
+  font-size: ${sg.fonts.fontSize.fontSizeBodyLg};
+  font-weight: ${sg.fonts.fontWeight.fontWeightSemiBold};
+  padding: 0 ${sg.spacings.spacingInline.spacingInlineLg};
+  color: #3b414d;
+  align-items: center;
+  background: linear-gradient(to left, #f9f9f9, #a6b0c4, #f9f9f9);
+  background-size: 200% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: ${titleGradientAnimation} ${(props) => props.animationSpeed}s
+    linear infinite;
+  display: inline;
+`;

package/src/presentation/components/atoms/index.ts

@@ -5,7 +5,7 @@ export { default as Autocomplete } from '../atoms/Autocomplete';
 export { default as BackgroundSection } from '../atoms/BackgroundSection';
 export { default as Breadcrumb } from '../atoms/Breadcrumb';
 export { default as Button } from '../atoms/Button';
-export { default as ChartPie } from '../atoms/ChartPie';
+export { default as ChartPie } from './Charts';
 export { default as Checkbox } from '../atoms/Checkbox';
 export { default as Column } from '../atoms/Column';
 export { default as Container } from '../atoms/Container';

package/src/presentation/components/molecules/Table/styles.ts

@@ -137,7 +137,9 @@ export const DynamicTableTd = styled.td<{ DynamicTableProps }>`
     isComponentRendered && 'center'};
   width: 100%;
   max-width: ${({ maxWidth }) => maxWidth};
-  height: ${({ size }) => (size === 'Large' ? '4rem' : '3.2rem')};
+  height: auto;
+  min-height: ${({ size }) => (size === 'Large' ? '4rem' : '3.2rem')};
+
   padding: ${({ hasSubText, size, isComponentRendered }) => {
     if (size === 'Large') {
       return hasSubText || isComponentRendered

package/dist/src/presentation/components/atoms/ChartPie/styles.d.ts

@@ -1,4 +0,0 @@
-export declare const ChartDom: any;
-export declare const RefreshButton: any;
-export declare const ChartInfo: any;
-export declare const Description: any;

package/src/presentation/components/atoms/ChartPie/styles.tsx

@@ -1,65 +0,0 @@
-import { sg } from '../../../styles';
-import styled from 'styled-components';
-
-export const ChartDom = styled.main`
-  position: relative;
-  min-width: 441px;
-  height: 431px;
-  border-radius: ${sg.borders.borderRadius.borderRadiusSm};
-  margin: ${sg.spacings.spacingInset.spacingInsetMd};
-  overflow: hidden;
-
-  & #pie-chart {
-    background-color: ${sg.colors.neutralColors.colorNeutralSnow};
-  }
-`;
-
-export const RefreshButton = styled.button`
-  position: absolute;
-  right: 0;
-  top: 8px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-family: ${sg.fonts.fontFamily.fontFamilyPrimary};
-  color: ${sg.colors.neutralColors.colorNeutralDark};
-  font-size: ${sg.fonts.fontSize.fontSizeBodyMd};
-  font-weight: ${sg.fonts.fontWeight.fontWeightRegular};
-  padding: ${sg.spacings.spacingStack.spacingStackNano};
-  background-color: ${sg.colors.neutralColors.colorNeutralSnow};
-  cursor: pointer;
-`;
-
-export const ChartInfo = styled.div`
-  position: absolute;
-  top: calc(
-    ${sg.spacings.spacingStack.spacingStackLg} +
-      ${sg.spacings.spacingStack.spacingStackNano}
-  );
-  width: 100%;
-  height: 32px;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: space-between;
-
-  & div {
-    display: flex;
-    justify-content: flex-end;
-    flex: 1;
-  }
-
-  & div > button {
-    margin-left: 8px;
-  }
-`;
-
-export const Description = styled.div`
-  font-family: ${sg.fonts.fontFamily.fontFamilyPrimary};
-  font-size: ${sg.fonts.fontSize.fontSizeBodyLg};
-  font-weight: ${sg.fonts.fontWeight.fontWeightRegular};
-  line-height: ${sg.fonts.lineHeight.lineHeightMd(
-    sg.fonts.fontSize.fontSizeBodyLg
-  )};
-  color: ${sg.colors.neutralColors.colorNeutralCloudy};
-`;