Merge pull request #22 from vtexdocs/feat/menu

Menu e sidebar
vtexdocs · Jan 23, 2024 · 6995119 · 6995119
2 parents 4dbd1dd + 7a97789
commit 6995119
Show file tree

Hide file tree

Showing 15 changed files with 380 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "@types/probe-image-size": "^7.2.0",
     "@types/uuid": "^9.0.0",
     "@vtex/brand-ui": "^0.46.1",
-    "@vtexdocs/components": "https://github.com/vtexdocs/components.git#v1.4.0",
+    "@vtexdocs/components": "https://github.com/vtexdocs/components.git#v2.0.0",
     "algoliasearch": "^4.14.2",
     "chalk": "^5.2.0",
     "copy-text-to-clipboard": "^3.0.1",

diff --git a/src/components/documentation-card/index.tsx b/src/components/documentation-card/index.tsx
@@ -26,7 +26,7 @@ const DocumentationCard = ({
       <a onClick={onClick} style={{ width: '100%' }}>
         <Box sx={cardContainer(containerType)}>
           <Flex sx={titleContainer(containerType)}>
-            <Icon size={24} />
+            <Icon size={24} sx={{ color: '#4A596B' }} />
             <Text className="title" sx={cardTitle(containerType)}>
               {title}
             </Text>

diff --git a/src/components/dropdown-menu/index.tsx b/src/components/dropdown-menu/index.tsx
@@ -1,7 +1,11 @@
 import { Box } from '@vtex/brand-ui'
 
 import DocumentationCard from 'components/documentation-card'
-import { documentationData, updatesData } from 'utils/constants'
+import {
+  menuDocumentationData,
+  menuSupportData,
+  updatesData,
+} from 'utils/constants'
 import { useIntl } from 'react-intl'
 
 import styles from './styles'
@@ -15,7 +19,19 @@ const DropdownMenu = () => {
           sx={styles.documentationContainer}
           data-cy="dropdown-menu-first-section"
         >
-          {documentationData(intl).map((card) => (
+          {menuDocumentationData(intl).map((card) => (
+            <DocumentationCard
+              containerType="dropdown"
+              key={card.title}
+              {...card}
+            />
+          ))}
+        </Box>
+        <Box
+          sx={styles.updatesContainer}
+          data-cy="dropdown-menu-second-section"
+        >
+          {menuSupportData(intl).map((card) => (
             <DocumentationCard
               containerType="dropdown"
               key={card.title}

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -132,6 +132,8 @@ const Header = () => {
             <Flex sx={styles.dropdownButton(showDropdown)}>
               <GridIcon />
               <Text sx={styles.rightButtonsText} data-cy="docs-dropdown">
+                {' '}
+                {/*TODO: mudar data-cy no teste */}
                 <FormattedMessage id="landing_page_header_docs.message" />
               </Text>
             </Flex>
@@ -149,9 +151,14 @@ const Header = () => {
               <FormattedMessage id="landing_page_header_feedback.message" />
             </Text>
           </VtexLink>
-          <LocaleSwitcher />
+          <Flex sx={styles.containerHamburguerLocale}>
+            <HamburgerMenu />
+            <Box sx={styles.splitter}></Box>
+            <Box sx={styles.localeSwitcherContainer}>
+              <LocaleSwitcher />
+            </Box>
+          </Flex>
         </HeaderBrand.RightLinks>
-        <HamburgerMenu />
       </HeaderBrand>
     </Box>
   )

diff --git a/src/components/header/styles.ts b/src/components/header/styles.ts
@@ -51,12 +51,21 @@ const logoSize: SxStyleProp = {
 }
 
 const rightLinks: SxStyleProp = {
-  display: ['none', 'none', 'none', 'flex !important'],
-  width: 'auto',
+  display: ['flex !important'],
+  width: '100%',
   height: '100%',
+  textTransform: 'none',
+  alignItems: 'center',
 }
 
 const rightLinksItem: SxStyleProp = {
+  display: [
+    'none !important',
+    'none !important',
+    'none !important',
+    'flex !important',
+  ],
+  visibility: 'visible',
   alignItems: 'center',
   padding: '0 !important',
   margin: '0 0 0 32px !important',
@@ -73,6 +82,12 @@ const rightLinksItem: SxStyleProp = {
 }
 
 const dropdownContainer: SxStyleProp = {
+  display: [
+    'none !important',
+    'none !important',
+    'none !important',
+    'flex !important',
+  ],
   textTransform: 'none',
   justifyContent: 'flex-end',
   height: 'calc(100% + 1px)',
@@ -159,8 +174,49 @@ const arrowIconActive: SxStyleProp = {
   color: '#D71D55',
 }
 
+const localeSwitcherContainer: SxStyleProp = {
+  display: 'flex',
+  visibility: 'visible',
+  ml: [0, 0, 0, 0, 0],
+  pr: ['0px', 0],
+  zIndex: 1,
+  justifyContent: 'center',
+  ' & button': {
+    borderLeft: 'none !important',
+    padding: '0px',
+  },
+}
+
+const containerHamburguerLocale: SxStyleProp = {
+  display: 'flex',
+  padding: '8px',
+  alignItems: 'center',
+  height: '100%',
+  borderLeft: ['none', 'none', 'none', '1px solid #e7e9ed'],
+  marginLeft: ['0', '0', '0', '32px'],
+  gap: '20px',
+
+  '& > :first-of-type': {
+    '& > button:first-of-type': {
+      borderLeft: 'none',
+      padding: '0px 0px 0px 0px',
+      width: '24px',
+      height: '24px',
+    },
+  },
+}
+
+const splitter: SxStyleProp = {
+  display: ['block', 'block', 'block', 'none'],
+  width: '1px',
+  height: '36px',
+  background: '#E7E9EE',
+}
+
 export default {
+  splitter,
   menuContainer,
+  containerHamburguerLocale,
   cardContainer,
   sideMenuContainer,
   logoSize,
@@ -181,4 +237,5 @@ export default {
   innerCardContainer,
   arrowIcon,
   arrowIconActive,
+  localeSwitcherContainer,
 }
diff --git a/src/components/icons/info-icon.tsx b/src/components/icons/info-icon.tsx
@@ -0,0 +1,35 @@
+import type { IconProps } from '@vtex/brand-ui'
+import { Icon } from '@vtex/brand-ui'
+
+const InfoIcon = (props: IconProps) => (
+  <Icon
+    {...props}
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 22.5C17.5228 22.5 22 18.0228 22 12.5C22 6.97715 17.5228 2.5 12 2.5C6.47715 2.5 2 6.97715 2 12.5C2 18.0228 6.47715 22.5 12 22.5Z"
+      stroke="#4A596B"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 16.5V12.5"
+      stroke="#4A596B"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 8.5H12.01"
+      stroke="#4A596B"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </Icon>
+)
+
+export default InfoIcon
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -16,7 +16,13 @@ import {
   LibraryContextProvider,
   Sidebar,
 } from '@vtexdocs/components'
-import { documentationData, updatesData } from 'utils/constants'
+import {
+  documentationData,
+  feedbackSectionData,
+  knownIssuesData,
+  menuSupportData,
+  updatesData,
+} from 'utils/constants'
 import { useIntl } from 'react-intl'
 
 interface Props {
@@ -51,7 +57,17 @@ export default function Layout({
   return (
     <ThemeProvider>
       <LibraryContextProvider
-        sections={[documentationData(intl), updatesData(intl)]}
+        sections={[
+          documentationData(intl),
+          knownIssuesData(intl),
+          updatesData(intl),
+        ]}
+        hamburguerMenuSections={[
+          documentationData(intl),
+          menuSupportData(intl),
+          updatesData(intl),
+          feedbackSectionData(intl),
+        ]}
         sectionSelected={sectionSelected ?? ''}
         fallback={sidebarfallback}
         isPreview={isPreview}

diff --git a/src/components/locale-switcher/index.tsx b/src/components/locale-switcher/index.tsx
@@ -48,14 +48,26 @@ export default function LocaleSwitcher() {
     )
   }
 
+  const renderGlobe = (isDiscolosureVisible: boolean) => {
+    if (isDiscolosureVisible) {
+      return <IconGlobe sx={styles.iconGlobeVisible} size={24} />
+    }
+
+    return <IconGlobe sx={styles.iconGlobe} size={24} />
+  }
+
   return (
     <Box sx={styles.localeSwitcher}>
       <Disclosure {...disclosure}>
         <Flex sx={{ alignItems: 'center' }}>
-          <IconGlobe sx={{ ml: 4 }} size={22} />
+          {renderGlobe(disclosure.visible)}
           <Text sx={styles.localeLabel}>{router.locale?.toUpperCase()}</Text>
         </Flex>
-        <IconCaret direction={disclosure.visible ? 'up' : 'down'} size={30} />
+        <IconCaret
+          sx={styles.localeCaret}
+          direction={disclosure.visible ? 'up' : 'down'}
+          size={30}
+        />
       </Disclosure>
       <Box sx={styles.optionContainer}>
         <DisclosureContent {...disclosure}>

diff --git a/src/components/locale-switcher/styles.ts b/src/components/locale-switcher/styles.ts
@@ -2,12 +2,16 @@ import { SxStyleProp } from '@vtex/brand-ui'
 
 const localeLabel: SxStyleProp = {
   pl: 2,
-  display: ['block', 'none', 'none', 'none', 'block'],
+  display: ['none', 'none', 'none', 'block'],
+}
+
+const localeCaret: SxStyleProp = {
+  display: ['none', 'none', 'none', 'block'],
 }
 
 const optionContainer: SxStyleProp = {
   position: 'absolute',
-  display: ['none', 'none', 'none', 'flex'],
+  display: ['flex'],
   flexDirection: 'column',
   width: '11rem',
   top: 0,
@@ -30,20 +34,37 @@ const baseLocaleSwitcher: SxStyleProp = {
 const localeSwitcher: SxStyleProp = {
   button: {
     ...baseLocaleSwitcher,
-    display: ['none', 'none', 'none', 'flex'],
+    display: ['flex'],
     ':hover': {
       color: '#142032',
     },
     height: '100%',
     justifyContent: 'flex-start',
-    borderLeft: '1px solid #e7e9ed',
-    ml: '40px',
+    borderLeft: ['1px solid #e7e9ed'],
+    // ml: '40px',
   },
 }
 
+const iconGlobe: SxStyleProp = {
+  mb: ['0px', '0px', '0px', '3px'],
+}
+
+const iconGlobeVisible: SxStyleProp = {
+  mb: ['0px', '0px', '0px', '3px'],
+  color: [
+    'var(--theme-ui-colors-primary-base, #E31C58)',
+    'var(--theme-ui-colors-primary-base, #E31C58)',
+    'var(--theme-ui-colors-primary-base, #E31C58)',
+    '#4A596B',
+  ],
+}
+
 export default {
+  iconGlobeVisible,
   localeLabel,
+  localeCaret,
   optionContainer,
   localeSwitcher,
   baseLocaleSwitcher,
+  iconGlobe,
 }
diff --git a/src/messages/en.json b/src/messages/en.json
@@ -57,7 +57,7 @@
   "landing_page_footer_community.message": "Community",
   "landing_page_footer_feedback.message": "Feedback",
   "landing_page_header_feedback.message": "Feedback",
-  "landing_page_header_docs.message": "Documentation",
+  "landing_page_header_docs.message": "Menu",
   "search_input.placeholder": "Search in Help Center",
   "search_input.empty": "No results found. Try different search terms.",
   "feedback_section.question": "Was this helpful?",
@@ -218,5 +218,16 @@
   "support_plans.description": "See details of support plans available for each commercial plan.",
   "announcement_bar.headline": "📢 We want to know more about you and how you use our docs. ",
   "announcement_bar.button": "Fill in our survey! It takes less than 5 minutes.",
-  "documentation_reading_time.text": "{minutes} min read"
+  "documentation_reading_time.text": "{minutes} min read",
+  "sidebar_known_issues.description": "Access content and find solutions to all your questions about the platform.",
+  "sidebar_support_rules.description": "See details of the support plans available for each business plan.",
+  "updates_announcements_notes.description": "Stay informed about the main news from VTEX.",
+  "updates_info_notes.description": "Find answers to your key questions quickly and conveniently.",
+  "menu_health_check.description": "Check the detailed real-time status.",
+  "menu_status.description": "Follow the plataform's historical record.",
+  "sidebar_support_rules.title": "Support Rules",
+  "sidebar_known_issues.title": "Known Issues",
+  "menu_status.title": "Status",
+  "menu_health_check.title": "Health Check",
+  "updates_announcements_notes.title": "Announcements"
 }
diff --git a/src/messages/es.json b/src/messages/es.json
@@ -9,7 +9,7 @@
   "documentation_start_here.description": "Aprenda, passo a passo, tudo que precisa saber para começar a usar os principais módulos da VTEX.",
   "documentation_tutorials.title": "Tutoriais & Soluções",
   "documentation_tutorials.description": "Acesse a documentação de todos os módulos da plataforma e tire suas dúvidas.",
-  "documentation_developers_portal.title": "Developers Portal",
+  "documentation_developers_portal.title": "Portal del Desarrollador",
   "documentation_developers_portal.description": "Visite nosso portal de desenvolvedores e encontre informações técnicas sobre integrações, APIs e recursos de desenvolvimento.",
   "landing_page_faq.title": "Preguntas frecuentes",
   "landing_page_faq.description": "Encuentre respuestas a preguntas frecuentes de manera rápida y práctica",
@@ -57,7 +57,7 @@
   "landing_page_footer_community.message": "Community",
   "landing_page_footer_feedback.message": "Feedback",
   "landing_page_header_feedback.message": "Feedback",
-  "landing_page_header_docs.message": "Documentation",
+  "landing_page_header_docs.message": "Menu",
   "search_input.placeholder": "Búsqueda en el Help Center",
   "search_input.empty": "No results found. Try different search terms.",
   "feedback_section.question": "¿Te ha resultado útil esta información?",
@@ -224,5 +224,16 @@
   "support_plans.description": "Consulte los detalles de los planes de soporte disponibles para cada plan comercial.",
   "announcement_bar.headline": "📢 Queremos saber más sobre ti y cómo utilizas nuestra documentación. ",
   "announcement_bar.button": "¡Complete nuestra encuesta! Toma menos de 5 minutos.",
-  "documentation_reading_time.text": "{minutes} min de lectura"
+  "documentation_reading_time.text": "{minutes} min de lectura",
+  "sidebar_known_issues.description": "Accede a contenido y encuentra soluciones a todas tus preguntas sobre la plataforma.",
+  "sidebar_support_rules.description": "Vea los detalles de los planes de soporte disponibles para cada plan comercial.",
+  "updates_announcements_notes.description": "Mantente al tanto de las principales noticias de VTEX.",
+  "updates_info_notes.description": "Encuentra respuestas a tus preguntas clave de manera rápida y práctica.",
+  "menu_health_check.description": "Verifique el estado detallado en tiempo real.",
+  "menu_status.description": "Seguir el registro histórico de la plataforma.",
+  "sidebar_support_rules.title": "Directrices de Soporte",
+  "sidebar_known_issues.title": "Problemas Conocidos",
+  "menu_status.title": "Status",
+  "menu_health_check.title": "Verificación de Estado",
+  "updates_announcements_notes.title": "Comunicados"
 }