From 65e7b30243e376953e20e2126e9a68220e36b8a8 Mon Sep 17 00:00:00 2001
From: Robson Oliveira <ropj@cin.ufpe.br>
Date: Wed, 13 Jul 2022 22:26:21 -0300
Subject: [PATCH 1/3] fix(sidebar): update the sidebar style

---
 src/components/sidebar-section/index.tsx |  6 +---
 src/components/sidebar/index.tsx         |  6 +++-
 src/components/sidebar/styles.ts         | 44 ++++++++++++++++++++----
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/components/sidebar-section/index.tsx b/src/components/sidebar-section/index.tsx
index edf340e6d..b1a6e6dd8 100644
--- a/src/components/sidebar-section/index.tsx
+++ b/src/components/sidebar-section/index.tsx
@@ -1,7 +1,6 @@
 import { Flex, Box, Text } from '@vtex/brand-ui'
 import { useContext, useState } from 'react'
 
-import HelpIcon from 'components/icons/help-icon'
 import SearchIcon from 'components/icons/search-icon'
 import SideBarToggleIcon from 'components/icons/sidebar-toggle-icon'
 import SideBarElements from 'components/sidebar-elements'
@@ -30,10 +29,7 @@ const SidebarSection = ({ title, data }: SidebarSectionProps) => {
         className={sidebarSectionHidden ? 'sidebarHide' : ''}
         sx={styles.sidebarElementsBox}
       >
-        <Text sx={styles.sidebarTitle}>
-          {title}
-          <HelpIcon sx={styles.sidebarHelpIcon} />
-        </Text>
+        <Text sx={styles.sidebarTitle}>{title}</Text>
         <Flex sx={styles.searchBox}>
           <SearchIcon sx={styles.searchIcon} />
           <input
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index 209459cf4..c4392e54a 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Flex } from '@vtex/brand-ui'
+import { Flex, Text, Box } from '@vtex/brand-ui'
 import Link from 'next/link'
 
 import styles from './styles'
@@ -246,6 +246,7 @@ const Sidebar = ({ sectionSelected }: SideBarSectionState) => {
                   : styles.icon
               }
             />
+            <Text sx={styles.iconTitle}>{iconElement.title}</Text>
           </Flex>
         </a>
       </Link>
@@ -263,6 +264,9 @@ const Sidebar = ({ sectionSelected }: SideBarSectionState) => {
             />
           ))}
         </Flex>
+        <Box sx={styles.sectionDivider}>
+          <hr />
+        </Box>
         <Flex sx={styles.sidebarIconsContainer}>
           {notesIcons.map((notesIconElement) => (
             <SideBarIcon
diff --git a/src/components/sidebar/styles.ts b/src/components/sidebar/styles.ts
index 2bbbb8099..c021a87e7 100644
--- a/src/components/sidebar/styles.ts
+++ b/src/components/sidebar/styles.ts
@@ -17,10 +17,9 @@ const sidebar: SxStyleProp = {
 }
 
 const sidebarIcons: SxStyleProp = {
-  width: '56px',
+  width: ['56px', '56px', '56px', '56px', '56px', '160px'],
   height: '692px',
   flexDirection: 'column',
-  justifyContent: 'space-between',
   borderRight: '1px solid #E7E9EE',
   background: '#FFFFFF',
   zIndex: '2',
@@ -29,15 +28,26 @@ const sidebarIcons: SxStyleProp = {
 
 const iconBox: SxStyleProp = {
   mt: ['16px'],
-  width: '40px',
+  width: ['40px', '40px', '40px', '40px', '40px', '144px'],
+  paddingLeft: ['0', '0', '0', '0', '0', '8px'],
+  py: ['0', '0', '0', '0', '0', '10px'],
   height: '40px',
   borderRadius: '4px',
   alignItems: 'center',
-  justifyContent: 'center',
+  justifyContent: [
+    'center',
+    'center',
+    'center',
+    'center',
+    'center',
+    'flex-start',
+  ],
   background: 'transparent',
+  color: 'muted.0',
   cursor: 'pointer',
   ':hover': {
     background: '#F8F7FC',
+    color: '#E31C58',
     path: {
       stroke: '#E31C58',
     },
@@ -46,13 +56,15 @@ const iconBox: SxStyleProp = {
 
 const iconBoxActive: SxStyleProp = {
   ...iconBox,
-  background: '#F8F7FC',
+  background: ['#F8F7FC', '#F8F7FC', '#F8F7FC', '#F8F7FC', '#F8F7FC', 'none'],
+  color: '#E31C58',
 }
 
 const sidebarIconsContainer: SxStyleProp = {
   width: '100%',
   flexDirection: 'column',
-  alignItems: 'center',
+  alignItems: ['center', 'center', 'center', 'center', 'center', 'flex-start'],
+  px: ['0', '0', '0', '0', '8px'],
 }
 
 const icon: SxStyleProp = {
@@ -67,6 +79,24 @@ const iconActive: SxStyleProp = {
   },
 }
 
+const sectionDivider: SxStyleProp = {
+  px: '8px',
+  marginTop: '16px',
+  hr: {
+    border: '1px solid #E7E9EE',
+    borderTop: 'none',
+  },
+}
+
+const iconTitle: SxStyleProp = {
+  display: ['none', 'none', 'none', 'none', 'none', 'initial'],
+  fontSize: '14px',
+  ml: '12px',
+  whiteSpace: 'nowrap',
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+}
+
 export default {
   sidebar,
   sidebarIcons,
@@ -75,4 +105,6 @@ export default {
   icon,
   iconActive,
   iconBoxActive,
+  sectionDivider,
+  iconTitle,
 }

From df88d6bba9e23bcad484b34a7884cfd4877f7914 Mon Sep 17 00:00:00 2001
From: Robson Oliveira <ropj@cin.ufpe.br>
Date: Fri, 22 Jul 2022 18:57:02 -0300
Subject: [PATCH 2/3] fix(sidebar): sidebar-section title and the icon
 description behavior on medium screens

---
 src/components/sidebar-section/index.tsx |  2 +-
 src/components/sidebar/functions.ts      | 15 ++++
 src/components/sidebar/index.tsx         | 99 ++++++++++++++++++------
 src/components/sidebar/styles.ts         | 64 +++++++++++----
 4 files changed, 137 insertions(+), 43 deletions(-)
 create mode 100644 src/components/sidebar/functions.ts

diff --git a/src/components/sidebar-section/index.tsx b/src/components/sidebar-section/index.tsx
index b1a6e6dd8..a7e2d6e27 100644
--- a/src/components/sidebar-section/index.tsx
+++ b/src/components/sidebar-section/index.tsx
@@ -36,7 +36,7 @@ const SidebarSection = ({ title, data }: SidebarSectionProps) => {
             style={styles.searchInput}
             className="searchComponent"
             type="text"
-            placeholder="Filter in Title..."
+            placeholder={`Search in ${title}...`}
             value={searchValue}
             onChange={(e) => setSearchValue(e.currentTarget.value)}
           />
diff --git a/src/components/sidebar/functions.ts b/src/components/sidebar/functions.ts
new file mode 100644
index 000000000..5a7724dc7
--- /dev/null
+++ b/src/components/sidebar/functions.ts
@@ -0,0 +1,15 @@
+import { SxStyleProp } from '@vtex/brand-ui'
+
+export const iconTooltipStyle: SxStyleProp = (tooltipState: boolean) => {
+  const iconTooltip: SxStyleProp = {
+    display: [
+      'flex',
+      'flex',
+      'flex',
+      'flex',
+      'flex',
+      tooltipState ? 'flex' : 'none !important',
+    ],
+  }
+  return iconTooltip
+}
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index c4392e54a..e5345ef3a 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Flex, Text, Box } from '@vtex/brand-ui'
 import Link from 'next/link'
 
@@ -12,6 +12,8 @@ import {
 } from 'utils/constants'
 
 import SidebarSection from 'components/sidebar-section'
+import Tooltip from 'components/tooltip'
+import { iconTooltipStyle } from './functions'
 
 interface SideBarSectionState {
   sectionSelected: DocumentationTitle | UpdatesTitle | ''
@@ -19,6 +21,7 @@ interface SideBarSectionState {
 
 const Sidebar = ({ sectionSelected }: SideBarSectionState) => {
   const [activeSectionName, setActiveSectionName] = useState(sectionSelected)
+  const [expandDelayStatus, setExpandDelayStatus] = useState(true)
 
   const sidebarData: SidebarSectionProps[] = [
     {
@@ -224,38 +227,84 @@ const Sidebar = ({ sectionSelected }: SideBarSectionState) => {
     },
   ]
 
+  useEffect(() => {
+    setTimeout(() => setExpandDelayStatus(false), 5000)
+  }, [])
+
   const SideBarIcon = (iconElement: DocDataElement | UpdatesDataElement) => {
+    const [iconTooltip, setIconTooltip] = useState(false)
+    const [tooltipLabel, setTooltipLabel] = useState(iconElement.title)
+    const titleRef = useRef<HTMLElement>()
+
+    useEffect(() => {
+      const resizeObserver = new MutationObserver(function (entries) {
+        const target = entries[0].target as HTMLElement
+        if (target.offsetWidth < target.scrollWidth) setIconTooltip(true)
+        else setIconTooltip(false)
+
+        if (target.offsetWidth > 0)
+          setTooltipLabel(target.innerText as DocumentationTitle | UpdatesTitle)
+      })
+      if (titleRef.current) {
+        if (titleRef.current.offsetWidth < titleRef.current.scrollWidth)
+          setIconTooltip(true)
+        resizeObserver.observe(titleRef.current, {
+          childList: true,
+        })
+      }
+      return () => {
+        resizeObserver.disconnect
+      }
+    }, [titleRef.current])
+
     return (
-      <Link href={iconElement.link}>
-        <a
-          onClick={() => {
-            setActiveSectionName(iconElement.title)
-          }}
+      <Box sx={styles.linkContainer}>
+        <Tooltip
+          sx={iconTooltipStyle(iconTooltip)}
+          placement="right"
+          label={tooltipLabel}
         >
-          <Flex
-            sx={
-              activeSectionName === iconElement.title
-                ? styles.iconBoxActive
-                : styles.iconBox
-            }
-          >
-            <iconElement.Icon
-              sx={
-                activeSectionName === iconElement.title
-                  ? styles.iconActive
-                  : styles.icon
-              }
-            />
-            <Text sx={styles.iconTitle}>{iconElement.title}</Text>
-          </Flex>
-        </a>
-      </Link>
+          <Link href={iconElement.link}>
+            <a
+              onClick={() => {
+                setActiveSectionName(iconElement.title)
+              }}
+            >
+              <Flex
+                sx={
+                  activeSectionName === iconElement.title
+                    ? styles.iconBoxActive
+                    : styles.iconBox
+                }
+              >
+                <iconElement.Icon
+                  sx={
+                    activeSectionName === iconElement.title
+                      ? styles.iconActive
+                      : styles.icon
+                  }
+                />
+                <Text
+                  className={expandDelayStatus ? 'iconDescriptionExpanded' : ''}
+                  ref={titleRef}
+                  sx={styles.iconTitle}
+                >
+                  {iconElement.title}
+                </Text>
+              </Flex>
+            </a>
+          </Link>
+        </Tooltip>
+      </Box>
     )
   }
 
   return (
     <Flex sx={styles.sidebar}>
-      <Flex sx={styles.sidebarIcons}>
+      <Flex
+        className={expandDelayStatus ? 'iconContainerExpanded' : ''}
+        sx={styles.sidebarIcons}
+      >
         <Flex sx={styles.sidebarIconsContainer}>
           {docsIcons.map((docsIconElement) => (
             <SideBarIcon
diff --git a/src/components/sidebar/styles.ts b/src/components/sidebar/styles.ts
index c021a87e7..717182a96 100644
--- a/src/components/sidebar/styles.ts
+++ b/src/components/sidebar/styles.ts
@@ -9,15 +9,25 @@ const sidebar: SxStyleProp = {
   ],
   width: 'auto',
   minWidth: 'auto',
+  transition: 'all 0.3s ease-in-out',
   '.active': {
     left: '-276px',
     marginRight: '-120px',
     transition: 'all 0.3s ease-in-out',
   },
+  '.iconContainerExpanded': {
+    transition: 'all 0.3s ease-in-out',
+    width: '160px',
+  },
+  '.iconDescriptionExpanded': {
+    display: 'block',
+  },
 }
 
 const sidebarIcons: SxStyleProp = {
   width: ['56px', '56px', '56px', '56px', '56px', '160px'],
+  maxWidth: '160px',
+  transition: 'all 0.3s ease-in-out',
   height: '692px',
   flexDirection: 'column',
   borderRight: '1px solid #E7E9EE',
@@ -26,30 +36,36 @@ const sidebarIcons: SxStyleProp = {
   paddingBottom: '32px',
 }
 
+const linkContainer: SxStyleProp = {
+  minWidth: '100%',
+}
+
 const iconBox: SxStyleProp = {
   mt: ['16px'],
-  width: ['40px', '40px', '40px', '40px', '40px', '144px'],
-  paddingLeft: ['0', '0', '0', '0', '0', '8px'],
-  py: ['0', '0', '0', '0', '0', '10px'],
+  width: '100%',
+  maxWidth: '144px',
+  paddingLeft: ['0', '0', '0', '8px'],
+  paddingRight: ['0', '0', '0', '8px', '8px', '0'],
+  py: ['0', '0', '0', '8px', '8px', '10px'],
   height: '40px',
   borderRadius: '4px',
   alignItems: 'center',
-  justifyContent: [
-    'center',
-    'center',
-    'center',
-    'center',
-    'center',
-    'flex-start',
-  ],
+  justifyContent: 'flex-start',
   background: 'transparent',
   color: 'muted.0',
   cursor: 'pointer',
   ':hover': {
     background: '#F8F7FC',
-    color: '#E31C58',
+    color: '#000711',
     path: {
-      stroke: '#E31C58',
+      stroke: [
+        '#000711',
+        '#000711',
+        '#000711',
+        '#000711',
+        '#000711',
+        '#4A596B',
+      ],
     },
   },
 }
@@ -63,8 +79,8 @@ const iconBoxActive: SxStyleProp = {
 const sidebarIconsContainer: SxStyleProp = {
   width: '100%',
   flexDirection: 'column',
-  alignItems: ['center', 'center', 'center', 'center', 'center', 'flex-start'],
-  px: ['0', '0', '0', '0', '8px'],
+  alignItems: 'flex-start',
+  px: ['0', '0', '0', '8px'],
 }
 
 const icon: SxStyleProp = {
@@ -89,22 +105,36 @@ const sectionDivider: SxStyleProp = {
 }
 
 const iconTitle: SxStyleProp = {
-  display: ['none', 'none', 'none', 'none', 'none', 'initial'],
+  display: ['none', 'none', 'none', 'none', 'none', 'block'],
+  width: '100%',
   fontSize: '14px',
-  ml: '12px',
+  ml: ['8px', '8px', '8px', '8px', '8px', '12px'],
   whiteSpace: 'nowrap',
   overflowX: 'hidden',
   textOverflow: 'ellipsis',
 }
 
+const iconTooltip: SxStyleProp = {
+  display: [
+    'flex !important',
+    'flex !important',
+    'flex !important',
+    'flex !important',
+    'flex !important',
+    'none !important',
+  ],
+}
+
 export default {
   sidebar,
   sidebarIcons,
   sidebarIconsContainer,
+  linkContainer,
   iconBox,
   icon,
   iconActive,
   iconBoxActive,
   sectionDivider,
   iconTitle,
+  iconTooltip,
 }

From d5db1d95c98e5d2bff33aaf0d44877383f2f9a3c Mon Sep 17 00:00:00 2001
From: Robson Oliveira <ropj@cin.ufpe.br>
Date: Fri, 22 Jul 2022 18:57:58 -0300
Subject: [PATCH 3/3] feat(tooltip): add the sx prop to tooltip component

---
 src/components/tooltip/index.tsx | 9 ++++-----
 src/components/tooltip/styles.ts | 4 +++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/tooltip/index.tsx b/src/components/tooltip/index.tsx
index 82c71010e..23d9554fb 100644
--- a/src/components/tooltip/index.tsx
+++ b/src/components/tooltip/index.tsx
@@ -1,17 +1,15 @@
 import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, TooltipProps } from '@vtex/brand-ui'
+import { Box, Flex, TooltipProps, SxStyleProp } from '@vtex/brand-ui'
 
 import CaretIcon from 'components/icons/caret'
 
 import styles from './styles'
-
-// type Props = Pick<TooltipProps, 'children' | 'label' | 'placement'>
-
 interface Props extends Pick<TooltipProps, 'children' | 'label' | 'placement'> {
+  sx?: SxStyleProp
   isCard?: boolean
 }
 
-const Tooltip = ({ children, label, placement, isCard }: Props) => {
+const Tooltip = ({ children, label, placement, sx, isCard }: Props) => {
   const box = useRef<HTMLDivElement>()
   const [boxWidth, setBoxWidth] = useState(0)
   const [boxHeight, setBoxHeight] = useState(0)
@@ -43,6 +41,7 @@ const Tooltip = ({ children, label, placement, isCard }: Props) => {
       {visible && (isCard ?? true) && (
         <Flex
           sx={styles.tooltipContainer(
+            sx,
             placement || 'top',
             boxWidth,
             boxHeight,
diff --git a/src/components/tooltip/styles.ts b/src/components/tooltip/styles.ts
index 7d9127626..af816496c 100644
--- a/src/components/tooltip/styles.ts
+++ b/src/components/tooltip/styles.ts
@@ -3,12 +3,13 @@ import { SxStyleProp } from '@vtex/brand-ui'
 type Placement = 'top' | 'right' | 'bottom' | 'left'
 
 const tooltipContainer: (
+  sx: SxStyleProp,
   placement: Placement,
   width: number,
   height: number,
   x: number,
   y: number
-) => SxStyleProp = (placement, width, height, x, y) => {
+) => SxStyleProp = (sx, placement, width, height, x, y) => {
   const position = {
     bottom: {
       left: `${x + width / 2}px`,
@@ -43,6 +44,7 @@ const tooltipContainer: (
   }
 
   return {
+    ...sx,
     zIndex: '100',
     position: 'absolute',
     alignItems: 'center',