sbwb-ds 3.1.9 → 3.1.11

package/package.json

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

package/src/presentation/components/molecules/Popover/Popover.stories.tsx

@@ -122,22 +122,24 @@ Default.args = {
       borderRadius: '4px',
     },
   },
-  primaryButtonProps: {
+  secondaryButtonProps: {
     children: 'Button',
     onClick: () => {
-      alert('example button clicked!');
+      alert('secondary example button clicked!');
     },
     width: '100%',
     height: '40px',
+    size: 'Small',
   },
-  secondaryButtonProps: {
+  primaryButtonProps: {
     children: 'Button',
     onClick: () => {
-      alert('secondary example button clicked!');
+      alert('example button clicked!');
     },
     width: '100%',
     height: '40px',
     variant: 'secondary',
+    size: 'Small',
   },
   description:
     'Lorem ipsum dolor sit amet consectetur. Tristique diam orci non nisl sociis interdum. Id ut in gravida amet risus felis. Bibendum nulla tincidunt a amet Egestas nisi. ',

package/src/presentation/components/molecules/Popover/index.tsx

@@ -186,75 +186,14 @@ const Popover = ({
     }
   };
 
-  // const handleMouseEnterPopover = () => { # Removed because of design changes
-  //   if (popoverRef.current) {
-  //     popoverRef.current.style.opacity = '1';
-  //     popoverRef.current.style.visibility = 'visible';
-  //   }
-  // };
-
-  // const handleMouseLeavePopover = () => {
-  //   if (popoverRef.current && !isAlwaysVisible) {
-  //     popoverRef.current.style.opacity = '0';
-  //     popoverRef.current.style.visibility = 'hidden';
-  //   }
-  // };
   useEffect(() => {
-    const handleMouseEnter = () => {
-      if (popoverRef.current) {
-        // popoverRef.current.style.opacity = '1'; # Removed because of design changes
-        // popoverRef.current.style.visibility = 'visible';
-        updatePopoverPosition();
-      }
-    };
-
-    const handleMouseLeave = () => {
-      if (popoverRef.current && !isAlwaysVisible) {
-        // popoverRef.current.style.opacity = '0'; # Removed because of design changes
-        // popoverRef.current.style.visibility = 'hidden';
-      }
-    };
-
     if (isActive) {
       updatePopoverPosition();
       window.addEventListener('resize', updatePopoverPosition);
-
-      if (targetRef.current) {
-        // targetRef.current.addEventListener('mouseenter', handleMouseEnter); # Removed because of design changes
-        // targetRef.current.addEventListener('mouseleave', handleMouseLeave);
-      }
-    }
-
-    if (targetRef.current) {
-      // targetRef.current.addEventListener('mouseenter', handleMouseEnter); # Removed because of design changes
-      // targetRef.current.addEventListener('mouseleave', handleMouseLeave);
-    }
-
-    if (popoverRef.current) {
-      // popoverRef.current.addEventListener( # Removed because of design changes
-      //   'mouseenter',
-      //   // handleMouseEnterPopover
-      // );
-      // popoverRef.current.addEventListener(
-      //   'mouseleave',
-      //   handleMouseLeavePopover
-      // );
     }
 
     return () => {
       window.removeEventListener('resize', updatePopoverPosition);
-      // if (targetRef.current) {
-      //   targetRef.current.removeEventListener('mouseenter', handleMouseEnter); # Removed because of design changes
-      //   targetRef.current.removeEventListener('mouseleave', handleMouseLeave);
-      //   popoverRef.current.removeEventListener(
-      //     'mouseenter',
-      //     handleMouseEnterPopover
-      //   );
-      //   popoverRef.current.removeEventListener(
-      //     'mouseleave',
-      //     handleMouseLeavePopover
-      //   );
-      // }
     };
   }, [isActive, position, popoverMargin]);
 
@@ -294,30 +233,33 @@ const Popover = ({
           />
         </C.PopoverTitle>
       )}
-      <div style={{ height: 16 }} />
+
+      {imageProps && (
+        <>
+          <div style={{ height: sg.spacings.spacingInset.spacingInsetSm }} />
+          <C.ImageWrapper>
+            <img {...imageProps} />
+          </C.ImageWrapper>
+        </>
+      )}
       {Boolean(actualStep) && (
         <>
+          <div style={{ height: sg.spacings.spacingInset.spacingInsetXs }} />
           <C.StepsContainer>
             <C.Steps>
               Step {actualStep} {totalSteps && `of ${totalSteps}`}
             </C.Steps>
           </C.StepsContainer>
-          <div style={{ height: 8 }} />
+          <div style={{ height: sg.spacings.spacingInset.spacingInsetNano }} />
         </>
       )}
-      {imageProps && (
-        <C.ImageWrapper>
-          <img {...imageProps} />
-        </C.ImageWrapper>
-      )}
-      <div style={{ height: 12 }} />
       {description && <C.Description>{description}</C.Description>}
-      <div style={{ height: 12 }} />
+      <div style={{ height: sg.spacings.spacingInset.spacingInsetXs }} />
       <C.ButtonsContainer>
         {primaryButtonProps && <Button {...primaryButtonProps} />}
         {secondaryButtonProps && <Button {...secondaryButtonProps} />}
       </C.ButtonsContainer>
-      <div style={{ height: 12 }} />
+      <div style={{ height: sg.spacings.spacingInset.spacingInsetXs }} />
       {onDontShowAgain && (
         <C.DialogContainer>
           <CheckBox
@@ -336,8 +278,6 @@ const Popover = ({
       wrapperWidth={wrapperWidth}
       wrapperHeight={wrapperHeight}
       wrapperStyles={wrapperStyles}
-      // onMouseEnter={handleMouseEnterPopover} # Removed because of design changes
-      // onMouseLeave={handleMouseLeavePopover} # Removed because of design changes
     >
       {children}
       {ReactDOM.createPortal(popoverContent, document.body)}

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

@@ -55,7 +55,7 @@ export const PopoverContent = styled.div<PopoverContentProps>`
   box-shadow: ${sg.shadows.shadowLevelNear};
   border: 1px solid ${sg.colors.neutralColors.colorNeutralClean};
   background-color: ${sg.colors.neutralColors.colorNeutralSnow};
-  border-radius: ${sg.borders.borderRadius.borderExtraSmall};
+  border-radius: ${sg.borders.borderRadius.borderRadiusSm};
   text-align: center;
   min-width: 32px;
   // visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')};
@@ -137,8 +137,13 @@ export const PopoverTitle = styled.div`
   width: 100%;
   font-size: ${sg.fonts.fontSize.fontSizeBodyLg};
   font-weight: ${sg.fonts.fontWeight.fontWeightSemiBold};
+  color: ${sg.colors.neutralColors.colorNeutralDarkest};
+`;
+export const ImageWrapper = styled.div`
+  margin: 0;
+  padding: 0;
+  line-height: 0;
 `;
-export const ImageWrapper = styled.div``;
 export const Description = styled.div`
   display: flex;
   flex-direction: column;
@@ -147,6 +152,7 @@ export const Description = styled.div`
   width: 100%;
   font-size: ${sg.fonts.fontSize.fontSizeBodyMd};
   weight: ${sg.fonts.fontWeight.fontWeightRegular};
+  color: ${sg.colors.neutralColors.colorNeutralDark};
 `;
 export const ButtonsContainer = styled.div`
   display: flex;