sbwb-ds 2.2.2 → 2.3.0

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

@@ -9,18 +9,14 @@ export interface ActionButtonElementProps {
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     iconName?: keyof typeof Icons;
-    onClick?: () => any;
+    onClick?: () => void;
     tooltipProps?: TooltipProps;
     buttonType?: 'primary' | 'secondary';
     iconColor?: string;
     selectedIconName?: keyof typeof Icons;
     badgeProps?: BadgeProps;
-    ref?: React.Ref<HTMLButtonElement>;
     isSelected?: boolean;
-    selectVariant?: boolean;
-    selectVariantLabel?: string;
+    onSelectedChange?: (selected: boolean) => void;
 }
-interface ActionButtonProps extends ActionButtonElementProps {
-}
-declare const ActionButton: ({ id, name, size, type, disabled, onClick, iconName, tooltipProps, buttonType, iconColor, selectedIconName, badgeProps, ref, isSelected, selectVariant, selectVariantLabel, }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonElementProps & React.RefAttributes<HTMLButtonElement>>;
 export default ActionButton;

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

@@ -1,5 +1,16 @@
-export declare const ActionButton: import("styled-components").StyledComponent<"button", any, any, never>;
+interface ActionButtonStyleProps {
+    sizeProp: 'Small' | 'Large';
+    buttonType: 'primary' | 'secondary';
+    disabled?: boolean;
+    iconColor?: string;
+    isSelected: boolean;
+}
+export declare const ActionButton: import("styled-components").StyledComponent<"button", any, ActionButtonStyleProps, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ActiveIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SelectVariantLabel: import("styled-components").StyledComponent<"span", any, any, never>;
-export declare const Indicator: import("styled-components").StyledComponent<"div", any, any, never>;
+export declare const SelectVariantLabel: import("styled-components").StyledComponent<"span", any, {
+    size: 'Small' | 'Large';
+}, never>;
+export declare const Indicator: import("styled-components").StyledComponent<"div", any, {
+    indicatorColor?: string;
+}, never>;
+export {};

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

@@ -0,0 +1,11 @@
+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';
+}
+declare const Progressbar: ({ id, title, progress, subtitle, width, size, ...rest }: ProgressbarProps) => import("react/jsx-runtime").JSX.Element;
+export default Progressbar;

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

@@ -0,0 +1,14 @@
+export declare const ProgressbarContainer: import("styled-components").StyledComponent<"div", any, {
+    width?: string;
+    height?: string;
+}, never>;
+export declare const ProgressbarHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressbarTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
+export declare const ProgressbarBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressbarBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressbarBarInner: import("styled-components").StyledComponent<"div", any, {
+    progress: number;
+}, never>;
+export declare const ProgressbarPercent: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ProgressbarSubtitleSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressbarSubtitle: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { AvatarProps } from '../Avatar/Avatar.types';
+import { TooltipProps } from '../Tooltip';
 interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     onClose?: (e: any) => void;
@@ -12,6 +13,7 @@ interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     iconName?: string;
     tableTag?: boolean;
     avatarProps?: AvatarProps;
+    tooltipProps?: TooltipProps;
 }
-declare const Tag: ({ label, closeButton, onClose, onClick, disabled, readOnly, selected, size, iconName, tableTag, avatarProps, ...rest }: TagProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tag: ({ label, closeButton, onClose, onClick, disabled, readOnly, selected, size, iconName, tableTag, avatarProps, tooltipProps, ...rest }: TagProps) => import("react/jsx-runtime").JSX.Element;
 export default Tag;

package/package.json

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

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

@@ -62,7 +62,7 @@ export default {
   },
 };
 
-const Template = () => {
+const Template = (args) => {
   return (
     <div
       style={{
@@ -73,13 +73,13 @@ const Template = () => {
     >
       <ActionButton
         id="actionbutton-1"
-        iconName="NotificationsActiveAnt"
-        selectedIconName="NotificationsActiveFILL1Ant"
-        showIndicator={false}
+        iconName="AddAnt"
+        selectedIconName="AddAnt"
         tooltipProps={{
           label: 'Default',
           position: 'right',
         }}
+        {...args}
       />
     </div>
   );
@@ -87,7 +87,7 @@ const Template = () => {
 
 export const Default = Template.bind({});
 
-const TemplateSecondary = () => {
+const TemplateSecondary = (args) => {
   return (
     <div
       style={{
@@ -98,14 +98,14 @@ const TemplateSecondary = () => {
     >
       <ActionButton
         id="actionbutton-secondary-1"
-        iconName="NotificationsActiveAnt"
+        iconName="AddAnt"
+        selectedIconName="AddAnt"
         buttonType="secondary"
-        selectedIconName="NotificationsActiveFILL1Ant"
-        showIndicator={false}
         tooltipProps={{
           label: 'Secondary',
           position: 'right',
         }}
+        {...args}
       />
     </div>
   );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, forwardRef } from 'react';
 import * as C from './styles';
 import { Icons } from '../../../../main/helpers/functions/icons';
 import Tooltip, { TooltipProps } from '../Tooltip';
@@ -11,93 +11,100 @@ export interface ActionButtonElementProps {
   type?: 'button' | 'submit' | 'reset';
   disabled?: boolean;
   iconName?: keyof typeof Icons;
-  onClick?: () => any;
+  onClick?: () => void;
   tooltipProps?: TooltipProps;
   buttonType?: 'primary' | 'secondary';
   iconColor?: string;
   selectedIconName?: keyof typeof Icons;
   badgeProps?: BadgeProps;
-  ref?: React.Ref<HTMLButtonElement>;
   isSelected?: boolean;
-  selectVariant?: boolean;
-  selectVariantLabel?: string;
+  onSelectedChange?: (selected: boolean) => void;
 }
 
-interface ActionButtonProps extends ActionButtonElementProps {}
+const ActionButton = forwardRef<HTMLButtonElement, ActionButtonElementProps>(
+  (
+    {
+      id,
+      name,
+      size = 'Small',
+      type = 'button',
+      disabled = false,
+      onClick,
+      iconName,
+      tooltipProps,
+      buttonType = 'primary',
+      iconColor,
+      selectedIconName,
+      badgeProps,
+      isSelected: isSelectedProp,
+      onSelectedChange,
+    },
+    ref
+  ) => {
+    const [isSelectedState, setIsSelectedState] = useState(false);
 
-const ActionButton = ({
-  id,
-  name,
-  size = 'Small',
-  type,
-  disabled,
-  onClick,
-  iconName,
-  tooltipProps,
-  buttonType = 'primary',
-  iconColor,
-  selectedIconName,
-  badgeProps,
-  ref,
-  isSelected = false,
-  selectVariant = false,
-  selectVariantLabel,
-}: ActionButtonProps) => {
-  const IconSelected = Icons[iconName];
-  const SelectedIcon = Icons[selectedIconName];
+    const isControlled = isSelectedProp !== undefined;
 
-  const handleButtonClick = () => {
-    if (onClick) onClick();
-  };
+    const isSelected = isControlled ? isSelectedProp : isSelectedState;
 
-  return (
-    <Tooltip {...tooltipProps}>
-      <C.ActionButton
-        ref={ref}
-        id={`actionbutton-${id}`}
-        name={`actionbutton-${name}`}
-        type={type}
-        onClick={handleButtonClick}
-        size={size}
-        disabled={disabled}
-        data-testid="action-button"
-        buttonType={buttonType}
-        iconColor={iconColor}
-        isSelected={isSelected}
-        selectedIconName={selectedIconName}
-        selectVariant={selectVariant}
-      >
-        {iconName && !isSelected && (
-          <C.IconWrapper className="default-icon">
-            <IconSelected data-testid="action-icon" />
-          </C.IconWrapper>
-        )}
+    const IconDefault = iconName ? Icons[iconName] : null;
+    const IconSelected = selectedIconName ? Icons[selectedIconName] : null;
 
-        {selectedIconName && (
-          <C.ActiveIconWrapper
-            className={`active-icon ${isSelected ? 'visible' : ''}`}
-          >
-            <SelectedIcon data-testid="selected-icon" />
-          </C.ActiveIconWrapper>
-        )}
+    const handleButtonClick = () => {
+      if (disabled) return;
 
-        {badgeProps && (
-          <Badge
-            size={badgeProps.size}
-            color={badgeProps.color}
-            hasBorder={badgeProps.hasBorder}
-            top={badgeProps.top}
-            right={badgeProps.right}
-            content={badgeProps.content}
-          />
-        )}
+      if (isControlled) {
+        if (onSelectedChange) {
+          onSelectedChange(!isSelected);
+        }
+      } else {
+        setIsSelectedState((prev) => !prev);
+      }
 
-        {selectVariant && selectVariantLabel && (
-          <C.SelectVariantLabel>{selectVariantLabel}</C.SelectVariantLabel>
-        )}
-      </C.ActionButton>
-    </Tooltip>
-  );
-};
+      if (onClick) onClick();
+    };
+
+    return (
+      <Tooltip {...tooltipProps}>
+        <C.ActionButton
+          ref={ref}
+          id={`actionbutton-${id}`}
+          name={`actionbutton-${name}`}
+          type={type}
+          onClick={handleButtonClick}
+          sizeProp={size}
+          disabled={disabled}
+          data-testid="action-button"
+          buttonType={buttonType}
+          iconColor={iconColor}
+          isSelected={isSelected}
+        >
+          {IconDefault && !isSelected && (
+            <C.IconWrapper className="default-icon">
+              <IconDefault data-testid="action-icon" />
+            </C.IconWrapper>
+          )}
+
+          {IconSelected && isSelected && (
+            <C.IconWrapper className="selected-icon">
+              <IconSelected data-testid="selected-icon" />
+            </C.IconWrapper>
+          )}
+
+          {badgeProps && (
+            <Badge
+              size={badgeProps.size}
+              color={badgeProps.color}
+              hasBorder={badgeProps.hasBorder}
+              top={badgeProps.top}
+              right={badgeProps.right}
+              content={badgeProps.content}
+            />
+          )}
+        </C.ActionButton>
+      </Tooltip>
+    );
+  }
+);
 
 export default ActionButton;