sbwb-ds 2.2.2 → 2.3.0

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

@@ -1,20 +1,18 @@
-import { convertHexToRGB } from '../../../../main/helpers/functions/convertHexToRGB';
 import { sg, resetStyles } from '../../../styles';
-import styled, { css, keyframes } from 'styled-components';
+import styled, { css } from 'styled-components';
 
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
+interface ActionButtonStyleProps {
+  sizeProp: 'Small' | 'Large';
+  buttonType: 'primary' | 'secondary';
+  disabled?: boolean;
+  iconColor?: string;
+  isSelected: boolean;
+}
 
-export const ActionButton = styled.button<any>`
+export const ActionButton = styled.button<ActionButtonStyleProps>`
   ${resetStyles}
-  height: ${({ size }) => (size === 'Small' ? '32px' : '40px')};
-  width: ${({ size }) => (size === 'Small' ? '32px' : '40px')};
+  height: ${({ sizeProp }) => (sizeProp === 'Small' ? '32px' : '40px')};
+  width: ${({ sizeProp }) => (sizeProp === 'Small' ? '32px' : '40px')};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -28,226 +26,138 @@ export const ActionButton = styled.button<any>`
       ? sg.spacings.spacingInset.spacingInsetNano
       : 'auto'};
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  position: relative;
+  transition: all 0.3s ease;
 
   &:disabled {
     pointer-events: none;
   }
 
-  /* Estilos para o estado disabled */
-  ${({ disabled, buttonType }) =>
-    disabled &&
-    buttonType === 'primary' &&
+  & > .default-icon,
+  & > .selected-icon {
+    ${({ sizeProp }) => {
+      const iconSize =
+        sizeProp === 'Small' ? sg.icons.iconSizeSm : sg.icons.iconSizeAnt;
+      return css`
+        height: ${iconSize};
+        width: ${iconSize};
+      `;
+    }}
+  }
+
+  ${({ disabled, isSelected }) =>
+    !disabled &&
+    !isSelected &&
     css`
-      background-color: ${sg.colors.brandColors.colorBrandSeSoft};
-      border: none;
+      border: ${sg.borders.borderWidth.borderWidthThinner} solid
+        ${sg.colors.neutralColors.colorNeutralClean};
+
+      &:hover {
+        border: ${sg.borders.borderWidth.borderWidthThinner} solid
+          ${sg.colors.neutralColors.colorNeutralCleanest};
+      }
 
       & > .default-icon path {
-        fill: ${sg.colors.neutralColors.colorNeutralCloudy};
+        fill: ${({ iconColor }: any) =>
+          iconColor || sg.colors.neutralColors.colorNeutralCloudy};
       }
     `}
 
-  ${({ disabled, buttonType }) =>
-    disabled &&
+  ${({ buttonType, disabled, isSelected, iconColor, sizeProp }) =>
     buttonType === 'secondary' &&
+    !disabled &&
+    !isSelected &&
     css`
       background-color: transparent;
       border: none;
-      height: ${({ size }: any) => (size === 'Small' ? '20px' : '24px')};
-      width: ${({ size }: any) => (size === 'Small' ? '20px' : '24px')};
+      height: ${sizeProp === 'Small' ? '20px' : '24px'};
+      width: ${sizeProp === 'Small' ? '20px' : '24px'};
+      border-radius: ${sg.borders.borderRadius.borderRadiusXs};
 
-      & > .default-icon path {
-        fill: ${sg.colors.neutralColors.colorNeutralCleanest};
+      &:hover {
+        background-color: ${sg.colors.neutralColors.colorNeutralSoft};
+        border-radius: ${sg.borders.borderRadius.borderRadiusXs};
+        border: 0;
+
+        & > .default-icon path {
+          fill: ${iconColor || sg.colors.neutralColors.colorNeutralDark};
+        }
       }
 
-      /* Mantém o tamanho do ícone adequado para o secondary */
-      & > .default-icon,
-      & > .active-icon {
-        ${({ size }: any) => {
-          const iconSize =
-            size === 'Small' ? sg.icons.iconSizeSm : sg.icons.iconSizeAnt;
-          return css`
-            height: ${iconSize};
-            width: ${iconSize};
-          `;
-        }}
+      & > .default-icon path {
+        fill: ${({ iconColor }: any) =>
+          iconColor || sg.colors.neutralColors.colorNeutralCloudy};
       }
     `}
 
-  /* Estilos normais */
-  ${({ disabled, isSelected }) =>
+  ${({ disabled, isSelected, buttonType, sizeProp }) =>
     !disabled &&
-    !isSelected &&
+    isSelected &&
     css`
-      border: ${sg.borders.borderWidth.borderWidthThinner} solid
-        ${sg.colors.neutralColors.colorNeutralClean};
-      &:hover {
-        border: ${sg.borders.borderWidth.borderWidthThinner} solid
-          ${sg.colors.neutralColors.colorNeutralCleanest};
-      }
-    `}
-
-  & > .default-icon path {
-    fill: ${({ iconColor, disabled }) =>
-      disabled
-        ? sg.colors.neutralColors.colorNeutralCloudy
-        : iconColor || sg.colors.neutralColors.colorNeutralCloudy};
-  }
+      background-color: rgba(12, 60, 122, 0.16);
 
-  /* Estilos para o estado :active */
-  &:active {
-    background-color: rgba(21, 103, 211, 0.16);
-    ${({ buttonType }) =>
-      buttonType === 'primary'
+      ${buttonType === 'primary'
         ? css`
             border: ${sg.borders.borderWidth.borderWidthThinner} solid
               ${sg.colors.brandColors.colorBrandPrimary};
           `
         : css`
             border: none;
+            height: ${sizeProp === 'Small' ? '20px' : '24px'};
+            width: ${sizeProp === 'Small' ? '20px' : '24px'};
           `}
 
-    /* Se houver um selectedIconName, exibe o SelectedIcon no :active */
-    ${({ selectedIconName }) =>
-      selectedIconName
-        ? css`
-            & > .default-icon {
-              display: none;
-            }
-            & > .active-icon {
-              display: flex;
-              & > svg path {
-                fill: ${sg.colors.brandColors.colorBrandPrimary};
-              }
-            }
-          `
-        : css`
-            & > .default-icon path {
-              fill: ${sg.colors.brandColors.colorBrandPrimary};
-            }
-          `}
-  }
+      & > .default-icon {
+        display: none;
+      }
 
-  /* Estilos para o estado isSelected - semelhante ao :active */
-  ${({ isSelected, buttonType }) =>
-    isSelected &&
+      & > .selected-icon {
+        display: flex;
+        & > svg path {
+          fill: ${sg.colors.brandColors.colorBrandPrimary};
+        }
+      }
+    `}
+
+  /* Estilos de desabilitado - devem estar após outros estilos para ter precedência */
+  ${({ disabled, buttonType, sizeProp }) =>
+    disabled &&
+    buttonType === 'primary' &&
     css`
-      background-color: rgba(21, 103, 211, 0.16);
-      ${({ buttonType }: any) =>
-        buttonType === 'primary'
-          ? css`
-              border: ${sg.borders.borderWidth.borderWidthThinner} solid
-                ${sg.colors.brandColors.colorBrandPrimary};
-            `
-          : css`
-              border: none;
-              height: ${({ size }: any) =>
-                size === 'Small' ? '20px' : '24px'};
-              width: ${({ size }: any) => (size === 'Small' ? '20px' : '24px')};
-            `}
+      background-color: ${sg.colors.brandColors.colorBrandSeSoft} !important;
+      border: none;
 
-      /* Mantém o tamanho do ícone adequado para o isSelected do secondary */
-      & > .default-icon,
-      & > .active-icon {
-        ${({ size }: any) => {
-          const iconSize =
-            size === 'Small' ? sg.icons.iconSizeSm : sg.icons.iconSizeAnt;
-          return css`
-            height: ${iconSize};
-            width: ${iconSize};
-          `;
-        }}
+      & > .default-icon path,
+      & > .selected-icon path {
+        fill: ${sg.colors.neutralColors.colorNeutralCloudy} !important;
       }
-
-      /* Exibe o SelectedIcon quando isSelected estiver true */
-      ${({ selectedIconName }: any) =>
-        selectedIconName
-          ? css`
-              & > .default-icon {
-                display: none;
-              }
-              & > .active-icon {
-                display: flex;
-                & > svg path {
-                  fill: ${sg.colors.brandColors.colorBrandPrimary};
-                }
-              }
-            `
-          : css`
-              & > .default-icon path {
-                fill: ${sg.colors.brandColors.colorBrandPrimary};
-              }
-            `}
     `}
 
-  /* Estilos do botão "secondary" */
-  ${({ buttonType, disabled, isSelected }) =>
+  ${({ disabled, buttonType, sizeProp }) =>
+    disabled &&
     buttonType === 'secondary' &&
-    !disabled &&
-    !isSelected &&
     css`
-      background-color: transparent;
+      background-color: transparent !important;
       border: none;
-      height: ${({ size }: any) => (size === 'Small' ? '20px' : '24px')};
-      width: ${({ size }: any) => (size === 'Small' ? '20px' : '24px')};
-      border-radius: ${sg.borders.borderRadius.borderRadiusXs};
-
-      &:hover {
-        background-color: ${sg.colors.neutralColors.colorNeutralSoft};
-        border-radius: ${sg.borders.borderRadius.borderRadiusXs};
-        border: 0;
+      height: ${sizeProp === 'Small' ? '20px' : '24px'} !important;
+      width: ${sizeProp === 'Small' ? '20px' : '24px'} !important;
 
-        & > .default-icon path {
-          fill: ${({ iconColor }: any) =>
-            iconColor || sg.colors.neutralColors.colorNeutralDark};
-        }
+      & > .default-icon path,
+      & > .selected-icon path {
+        fill: ${sg.colors.neutralColors.colorNeutralCleanest} !important;
       }
 
       & > .default-icon,
-      & > .active-icon {
-        ${({ size }: any) => {
+      & > .selected-icon {
+        ${({ sizeProp }: any) => {
           const iconSize =
-            size === 'Small' ? sg.icons.iconSizeSm : sg.icons.iconSizeAnt;
+            sizeProp === 'Small' ? sg.icons.iconSizeSm : sg.icons.iconSizeAnt;
           return css`
-            height: ${iconSize};
-            width: ${iconSize};
+            height: ${iconSize} !important;
+            width: ${iconSize} !important;
           `;
         }}
       }
-
-      /* Estilos para o estado :active do botão secondary */
-      &:active {
-        background-color: rgba(21, 103, 211, 0.16);
-
-        & > .default-icon path {
-          fill: ${sg.colors.brandColors.colorBrandPrimary};
-        }
-      }
-
-      /* Estilos para o estado isSelected do botão secondary */
-      ${({ isSelected }: any) =>
-        isSelected &&
-        css`
-          background-color: rgba(21, 103, 211, 0.16);
-          height: ${({ size }: any) => (size === 'Small' ? '20px' : '24px')};
-          width: ${({ size }: any) => (size === 'Small' ? '20px' : '24px')};
-
-          /* Mantém o tamanho do ícone adequado para o isSelected do secondary */
-          & > .default-icon,
-          & > .active-icon {
-            ${({ size }: any) => {
-              const iconSize =
-                size === 'Small' ? sg.icons.iconSizeSm : sg.icons.iconSizeAnt;
-              return css`
-                height: ${iconSize};
-                width: ${iconSize};
-              `;
-            }}
-          }
-
-          & > .default-icon path {
-            fill: ${sg.colors.brandColors.colorBrandPrimary};
-          }
-        `}
     `}
 `;
 
@@ -258,20 +168,13 @@ export const IconWrapper = styled.div`
   justify-content: center;
 `;
 
-export const ActiveIconWrapper = styled.div`
-  ${resetStyles}
-  display: none;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const SelectVariantLabel = styled.span<any>`
+export const SelectVariantLabel = styled.span<{ size: 'Small' | 'Large' }>`
   ${resetStyles}
   margin-left: 8px;
   font-size: ${({ size }) => (size === 'Small' ? '12px' : '14px')};
 `;
 
-export const Indicator = styled.div<any>`
+export const Indicator = styled.div<{ indicatorColor?: string }>`
   ${resetStyles}
   display: flex;
   justify-content: center;

package/src/presentation/components/atoms/ProgresBar/Progressbar.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import ProgressBar from './index';
+
+export default {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  tags: ['autodocs'],
+  argTypes: {
+    id: { control: 'text' },
+    progress: {
+      control: 'number',
+      description: 'Progress of the ProgressBar (a number between 0 and 100).',
+    },
+    title: { control: 'text', description: 'Title of the ProgressBar.' },
+    subtitle: {
+      control: 'text',
+      description: 'Text that appears on `subtitled` variant.',
+    },
+    size: {
+      control: 'select',
+      options: ['large', 'medium', 'small'],
+      description: 'Size of the ProgressBar.',
+    },
+  },
+};
+
+const Template = (args) => <ProgressBar {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  id: 'test-progressbar',
+  progress: 50,
+  title: 'Title name',
+  subtitle: 'Subtitle or description',
+  size: 'large',
+};

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

@@ -0,0 +1,63 @@
+import * as C from './styles';
+import React from 'react';
+
+export interface ProgressbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  id?: string;
+  title: string;
+  progress: number;
+  subtitle?: string;
+  width?: string;
+  size?: 'large' | 'medium' | 'small';
+}
+
+const Progressbar = ({
+  id,
+  title,
+  progress,
+  subtitle,
+  width,
+  size,
+  ...rest
+}: ProgressbarProps) => {
+  const validProgress = Math.min(progress, 100);
+
+  const computedWidth = width
+    ? width
+    : size === 'large'
+    ? '693px'
+    : size === 'medium'
+    ? '573px'
+    : size === 'small'
+    ? '481px'
+    : undefined;
+
+  const computedHeight = size === 'large' ? '122px' : '114px';
+
+  return (
+    <C.ProgressbarContainer
+      id={`progressbar-${id}`}
+      width={computedWidth}
+      height={computedHeight}
+      {...rest}
+    >
+      {title && (
+        <C.ProgressbarHeader>
+          <C.ProgressbarTitle>{title}</C.ProgressbarTitle>
+        </C.ProgressbarHeader>
+      )}
+      <C.ProgressbarBarContainer>
+        <C.ProgressbarBar>
+          <C.ProgressbarBarInner progress={validProgress} />
+        </C.ProgressbarBar>
+        <C.ProgressbarPercent>{validProgress}%</C.ProgressbarPercent>
+      </C.ProgressbarBarContainer>
+      {subtitle && (
+        <C.ProgressbarSubtitleSection>
+          <C.ProgressbarSubtitle>{subtitle}</C.ProgressbarSubtitle>
+        </C.ProgressbarSubtitleSection>
+      )}
+    </C.ProgressbarContainer>
+  );
+};
+
+export default Progressbar;

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

@@ -0,0 +1,91 @@
+import styled from 'styled-components';
+import { sg, resetStyles } from '../../../styles';
+
+export const ProgressbarContainer = styled.div<{
+  width?: string;
+  height?: string;
+}>`
+  ${resetStyles}
+  width: ${({ width }) => width || '100%'};
+  height: ${({ height }) => height || 'auto'};
+  background-color: ${sg.colors.backgroundColors.colorBackgroundSnow};
+  border-radius: 8px;
+  border-radius: ${sg.borders.borderRadius.borderRadiusSm};
+  padding: 12px 24px 12px 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ProgressbarHeader = styled.div`
+  ${resetStyles}
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const ProgressbarTitle = styled.h3`
+  ${resetStyles}
+  font-size: 22px;
+  font-weight: 600;
+  color: ${sg.colors.neutralColors.colorNeutralDarkest};
+  line-height: 30px;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+`;
+
+export const ProgressbarBarContainer = styled.div`
+  ${resetStyles}
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
+
+export const ProgressbarBar = styled.div`
+  ${resetStyles}
+  height: 22px;
+  background-color: #e0e0e0;
+  border-radius: 8px;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  margin-top: 8px;
+  margin-bottom: 8px;
+`;
+
+export const ProgressbarBarInner = styled.div<{ progress: number }>`
+  ${resetStyles}
+  height: 100%;
+  width: ${({ progress }) => `${progress}%`};
+  background-color: #1d4e89;
+  transition: width 0.4s ease-in-out;
+`;
+
+export const ProgressbarPercent = styled.span`
+  ${resetStyles}
+  font-size: 14px;
+  color: ${sg.colors.neutralColors.colorNeutralDarkest};
+  margin-left: 16px;
+  font-weight: 600;
+  line-height: 22px;
+  text-align: left;
+`;
+
+export const ProgressbarSubtitleSection = styled.div`
+  ${resetStyles}
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const ProgressbarSubtitle = styled.span`
+  ${resetStyles}
+  font-size: 14px;
+  color: ${sg.colors.neutralColors.colorNeutralDarkest};
+  font-family: Noto Sans;
+  line-height: 22px;
+  text-align: left;
+`;

package/src/presentation/components/atoms/{Progressbar → ProgressbarDepreciated}/Progressbar.stories.tsx

@@ -1,7 +1,8 @@
+import React from 'react';
 import Progressbar from './index';
 
 export default {
-  title: 'Components/Progressbar',
+  title: 'Components/Progressbar [Depreciated]',
   component: Progressbar,
   tags: ['autodocs'],
   argTypes: {

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

@@ -2,6 +2,7 @@ import * as C from './styles';
 import { useTag } from './hooks/useTag';
 import { AvatarProps } from '../Avatar/Avatar.types';
 import Avatar from '../Avatar/Avatar.view';
+import Tooltip, { TooltipProps } from '../Tooltip';
 
 interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
   label: string;
@@ -15,6 +16,7 @@ interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
   iconName?: string;
   tableTag?: boolean;
   avatarProps?: AvatarProps;
+  tooltipProps?: TooltipProps;
 }
 
 const Tag = ({
@@ -29,6 +31,7 @@ const Tag = ({
   iconName,
   tableTag,
   avatarProps,
+  tooltipProps,
   ...rest
 }: TagProps) => {
   const {
@@ -42,35 +45,39 @@ const Tag = ({
   } = useTag(selected, disabled, onClick, onClose, size, iconName);
 
   return (
-    <C.ContainerTag
-      disabled={disabled}
-      readOnly={readOnly}
-      selected={check}
-      size={size}
-      onClick={handleContainerClick}
-      data-testid="container-tag"
-      tableTag={tableTag}
-      {...rest}
-    >
-      {avatarProps && <Avatar {...avatarProps} size="Extra nano" />}
-      {iconName && <Icon />}
-      <C.Label
-        ref={labelRef}
-        readOnly={readOnly}
-        htmlFor={!disabled && `tag-${label}`}
+    <Tooltip {...tooltipProps}>
+      <C.ContainerTag
         disabled={disabled}
+        readOnly={readOnly}
+        selected={check}
         size={size}
-        onClick={!disabled ? handleLabelClick : undefined}
+        onClick={handleContainerClick}
+        data-testid="container-tag"
+        tableTag={tableTag}
+        {...rest}
       >
-        {label}
-      </C.Label>
-      {closeButton && !tableTag && (
-        <Close
-          onClick={!disabled ? handleLabelClose : undefined}
-          data-testid="close-button"
-        />
-      )}
-    </C.ContainerTag>
+        {avatarProps && <Avatar {...avatarProps} size="Extra nano" />}
+        {iconName && <Icon />}
+
+        <C.Label
+          ref={labelRef}
+          readOnly={readOnly}
+          htmlFor={!disabled && `tag-${label}`}
+          disabled={disabled}
+          size={size}
+          onClick={!disabled ? handleLabelClick : undefined}
+        >
+          {label}
+        </C.Label>
+
+        {closeButton && !tableTag && (
+          <Close
+            onClick={!disabled ? handleLabelClose : undefined}
+            data-testid="close-button"
+          />
+        )}
+      </C.ContainerTag>
+    </Tooltip>
   );
 };
 

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

@@ -18,6 +18,7 @@ interface LabelProps {
 export const ContainerTag = styled.div<ContainerTagProps>`
   ${resetStyles}
   width: fit-content;
+  max-width: 708px;
   height: ${({ size }) => (size === 'Medium' ? '28px' : '24px')};
   padding: ${() =>
     `${sg.spacings.spacingStack.spacingStackNano} ${sg.spacings.spacingInline.spacingInlineAnt}`};