feat: creates sitemap page

vtexdocs · Mar 4, 2024 · b0d2850 · b0d2850
1 parent c122489
commit b0d2850
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 92 deletions.
diff --git a/src/components/sitemap-section/index.tsx b/src/components/sitemap-section/index.tsx
@@ -1,14 +1,15 @@
-import { Box, Flex, Text } from '@vtex/brand-ui'
+import { Box, Flex, Text, Link } from '@vtex/brand-ui'
+import LongArrowIcon from 'components/icons/long-arrow-icon'
 import styles from './styles'
 
 interface Props {
   documentation: string
-  children: [{ name: string; slug: string }]
+  children: { name: string; link: string; icon: boolean }[]
 }
 
 const SiteMapSection = (props: Props) => {
+  //eslint-disable-next-line
   const resize = (arr: any[], batchSize: number) => {
-    //eslint-disable-line
     const retArr = []
     while (arr.length > 0) {
       retArr.push(arr.splice(0, batchSize))
@@ -17,17 +18,24 @@ const SiteMapSection = (props: Props) => {
     return retArr
   }
 
+  //eslint-disable-next-line
   const render = (arr: any[][]) => {
-    //eslint-disable-line
-    //eslint-disable-line
-    // console.log(arr)
     return (
       <Flex sx={styles.outerItemsContainer}>
         {arr.map((el, idx) => {
           return (
             <Flex sx={styles.innerItemsContainer} key={idx}>
               {el.map((e, id) => {
-                return <Text key={id}>{e.name}</Text>
+                return (
+                  <Flex sx={{ flexDirection: 'row' }}>
+                    <Link sx={styles.link} href={e.link}>
+                      <Text sx={{ pr: '8px' }} key={id}>
+                        {e.name}
+                      </Text>
+                    </Link>
+                    {e.icon ? <LongArrowIcon size={16} /> : <></>}
+                  </Flex>
+                )
               })}
             </Flex>
           )

diff --git a/src/components/sitemap-section/styles.ts b/src/components/sitemap-section/styles.ts
@@ -2,9 +2,10 @@ import { SxStyleProp } from '@vtex/brand-ui'
 
 const section: SxStyleProp = {
   borderTop: '1px solid #E7E9EE',
-  gap: '132px',
+  gap: ['24px', '24px', '64px'],
   pt: '24px',
   color: 'black',
+  flexDirection: ['column', 'column', 'row'],
 }
 
 const sectionTitle: SxStyleProp = {
@@ -13,22 +14,30 @@ const sectionTitle: SxStyleProp = {
 }
 
 const outerItemsContainer: SxStyleProp = {
-  // justifyContent: 'space-between',
-  gap: '64px',
+  gap: ['none', 'none', '64px'],
   flexWrap: 'wrap',
+  flexDirection: ['column', 'column', 'row'],
+  display: ['flex', 'flex', 'grid', 'grid', 'grid'],
+  width: '100%',
+  gridTemplateColumns: 'repeat(auto-fill, 96px)',
 }
 
 const innerItemsContainer: SxStyleProp = {
   width: '96px',
-  flexDirection: 'column',
+  flexDirection: ['column'],
   gap: '24px',
   fontSize: '12px',
   color: '#4A596B',
 }
 
+const link: SxStyleProp = {
+  color: '#4A596B',
+}
+
 export default {
   section,
   sectionTitle,
   outerItemsContainer,
   innerItemsContainer,
+  link,
 }
diff --git a/src/messages/en.json b/src/messages/en.json
@@ -252,5 +252,13 @@
   "search_result.empty": "No matching results.",
   "faq_filter.title": "Products",
   "sitemap_page.title": "Sitemap",
-  "sitemap_page_section_additional_resources.title": "Additional resources"
+  "sitemap_page_section_additional_resources.title": "Additional resources",
+  "sitemap_page_section_additional_resources.support_rules": "Support Rules",
+  "sitemap_page_section_additional_resources.known_issues": "Known Issues",
+  "sitemap_page_section_additional_resources.faq": "FAQ",
+  "sitemap_page_section_additional_resources.announcements": "Announcements",
+  "sitemap_page_section_additional_resources.dev_portal": "Developers Portal",
+  "sitemap_page_section_additional_resources.support": "Support",
+  "sitemap_page_section_additional_resources.community": "Comunity",
+  "sitemap_page_section_additional_resources.feedback": "Feedback"
 }
diff --git a/src/messages/es.json b/src/messages/es.json
@@ -258,5 +258,13 @@
   "search_result.empty": "Ningún resultado coincidente. Pruebe con otros filtros.",
   "faq_filter.title": "Produtos",
   "sitemap_page.title": "Mapa del sitio",
-  "sitemap_page_section_adsitional_resources.title": "Recursos adicionales"
+  "sitemap_page_section_additional_resources.title": "Recursos adicionales",
+  "sitemap_page_section_additional_resources.support_rules": "Directrices de Soporte",
+  "sitemap_page_section_additional_resources.known_issues": "Problemas Conocidos",
+  "sitemap_page_section_additional_resources.faq": "Preguntas Frecuentes",
+  "sitemap_page_section_additional_resources.announcements": "Anuncios",
+  "sitemap_page_section_additional_resources.dev_portal": "Portal de Desarrolladores",
+  "sitemap_page_section_additional_resources.support": "Ayuda",
+  "sitemap_page_section_additional_resources.community": "Comunidad",
+  "sitemap_page_section_additional_resources.feedback": "Comentarios"
 }
diff --git a/src/messages/pt.json b/src/messages/pt.json
@@ -273,5 +273,13 @@
   "search_result.empty": "Nenhum resultado correspondente. Tente outros filtros.",
   "faq_filter.title": "Produtos",
   "sitemap_page.title": "Mapa do site",
-  "sitemap_page_section_additional_resources.title": "Recursos Adicionais"
+  "sitemap_page_section_additional_resources.title": "Recursos Adicionais",
+  "sitemap_page_section_additional_resources.support_rules": "Diretrizes de Suporte",
+  "sitemap_page_section_additional_resources.known_issues": "Problemas Conhecidos",
+  "sitemap_page_section_additional_resources.faq": "Perguntas Frequentes",
+  "sitemap_page_section_additional_resources.announcements": "Comunicados",
+  "sitemap_page_section_additional_resources.dev_portal": "Developers Portal",
+  "sitemap_page_section_additional_resources.support": "Suporte",
+  "sitemap_page_section_additional_resources.community": "Comunidade",
+  "sitemap_page_section_additional_resources.feedback": "Feedback"
 }
diff --git a/src/pages/sitemap/index.tsx b/src/pages/sitemap/index.tsx
@@ -1,16 +1,19 @@
 import { Flex, Box, Text } from '@vtex/brand-ui' //eslint-disable-line
 import { Page } from 'utils/typings/types'
 import styles from 'styles/sitemap-page'
-import LongArrowIcon from 'components/icons/long-arrow-icon'
 import { GetStaticProps } from 'next'
 import getNavigation from 'utils/getNavigation'
 import { localeType } from 'utils/navigation-utils' //eslint-disable-line
 import SiteMapSection from 'components/sitemap-section'
 import { useIntl } from 'react-intl'
+import { additionalResourcesSitemap } from 'utils/constants'
 
 interface Props {
   sections: [
-    { documentation: string; children: [{ name: string; slug: string }] }
+    {
+      documentation: string
+      children: { name: string; link: string; icon: boolean }[]
+    }
   ]
 } //eslint-disable-line
 
@@ -24,58 +27,29 @@ const SiteMapPage: Page<Props> = ({ sections }) => {
     }),
   }
 
+  const arr = additionalResourcesSitemap(intl)
+
   return (
     <>
-      <Flex sx={styles.outerContainer}>
+      <Box sx={styles.outerContainer}>
         <Box sx={styles.titleContainer}>
           <Text sx={styles.pageTitle}>
             {intl.formatMessage({ id: 'sitemap_page.title' })}
           </Text>
         </Box>
-        {sections.map((el) => (
+        <Flex sx={styles.contentContainer}>
+          {sections.map((el) => (
+            <SiteMapSection
+              documentation={documentationTitleTranslated[el.documentation]}
+              children={el.children}
+            />
+          ))}
           <SiteMapSection
-            documentation={documentationTitleTranslated[el.documentation]}
-            children={el.children}
+            documentation={arr.documentation}
+            children={arr.children}
           />
-        ))}
-        <Box>
-          <Flex sx={styles.section}>
-            <Box>
-              <Text sx={styles.sectionTitle}>
-                {intl.formatMessage({
-                  id: 'sitemap_page_section_additional_resources.title',
-                })}
-              </Text>
-            </Box>
-            <Flex sx={styles.outerItemsContainer}>
-              <Flex sx={styles.innerItemsContainer}>
-                <Text>MarketPlace</Text>
-                <Text>Módulos VTEX: Primeiros Passos</Text>
-                <Text>Omnichannel</Text>
-                <Text>VTEX IO</Text>
-              </Flex>
-              <Flex sx={styles.innerItemsContainer}>
-                <Flex sx={{ gap: '8px' }}>
-                  <Text>Developers Portal</Text>
-                  <LongArrowIcon size={16} />
-                </Flex>
-                <Flex sx={{ gap: '8px' }}>
-                  <Text>suporte</Text>
-                  <LongArrowIcon size={16} />
-                </Flex>
-                <Flex sx={{ gap: '8px' }}>
-                  <Text>Comunidade</Text>
-                  <LongArrowIcon size={16} />
-                </Flex>
-                <Flex sx={{ gap: '8px' }}>
-                  <Text>Feedback</Text>
-                  <LongArrowIcon size={16} />
-                </Flex>
-              </Flex>
-            </Flex>
-          </Flex>
-        </Box>
-      </Flex>
+        </Flex>
+      </Box>
     </>
   )
 }
@@ -101,7 +75,8 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => {
       children: el.categories.map((e) => {
         return {
           name: e.name[currentLocale],
-          slug: `${el.slugPrefix}/${e.slug}`,
+          link: `${el.slugPrefix}/${e.slug}`,
+          icon: false,
         }
       }),
     }

diff --git a/src/styles/sitemap-page.ts b/src/styles/sitemap-page.ts
@@ -1,54 +1,33 @@
 import { SxStyleProp } from '@vtex/brand-ui'
 
 const outerContainer: SxStyleProp = {
-  // border: '1px solid red',
-  gap: '64px',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  padding: '67px 300px 150px',
+  padding: [
+    '50px 27px 64px',
+    '54px 50px 64px',
+    '64px 101px 64px',
+    '47px 42px 64px',
+    '47px 300px 64px',
+  ],
 }
 
 const titleContainer: SxStyleProp = {
   justifyText: 'left',
+  pb: '64px',
 }
 
 const pageTitle: SxStyleProp = {
   fontSize: '52px',
   color: 'black',
 }
 
-const section: SxStyleProp = {
-  borderTop: '1px solid #E7E9EE',
-  gap: '132px',
-  pt: '24px',
-  color: 'black',
-}
-
-const sectionTitle: SxStyleProp = {
-  fontSize: '20px',
-  width: '126px',
-}
-
-const outerItemsContainer: SxStyleProp = {
-  // justifyContent: 'space-between',
-  gap: '64px',
-  flexWrap: 'wrap',
-}
-
-const innerItemsContainer: SxStyleProp = {
-  width: '96px',
+const contentContainer: SxStyleProp = {
   flexDirection: 'column',
-  gap: '24px',
-  fontSize: '12px',
-  color: '#4A596B',
+  gap: ['24px', '24px', '24px', '24px', '24px', '64px'],
 }
 
 export default {
   outerContainer,
   titleContainer,
   pageTitle,
-  section,
-  sectionTitle,
-  outerItemsContainer,
-  innerItemsContainer,
+  contentContainer,
 }
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -652,3 +652,74 @@ export const faqFilter = (intl: IntlShape) => {
 
   return data
 }
+
+export const additionalResourcesSitemap = (intl: IntlShape) => {
+  const data: {
+    documentation: string
+    children: { name: string; link: string; icon: boolean }[]
+  } = {
+    documentation: intl.formatMessage({
+      id: 'sitemap_page_section_additional_resources.title',
+    }),
+    children: [
+      {
+        name: intl.formatMessage({
+          id: 'sitemap_page_section_additional_resources.faq',
+        }),
+        link: '/faq',
+        icon: false,
+      },
+      {
+        name: intl.formatMessage({
+          id: 'sitemap_page_section_additional_resources.known_issues',
+        }),
+        link: '/known-issues',
+        icon: false,
+      },
+      {
+        name: intl.formatMessage({
+          id: 'sitemap_page_section_additional_resources.support_rules',
+        }),
+        link: '#', // TODO: trocar rota
+        icon: false,
+      },
+      {
+        name: intl.formatMessage({
+          id: 'sitemap_page_section_additional_resources.announcements',
+        }),
+        link: '/announcements',
+        icon: false,
+      },
+      {
+        name: intl.formatMessage({
+          id: 'sitemap_page_section_additional_resources.dev_portal',
+        }),
+        link: getDeveloperPortalURL(),
+        icon: true,
+      },
+      {
+        name: intl.formatMessage({
+          id: 'sitemap_page_section_additional_resources.support',
+        }),
+        link: getSupportURL(),
+        icon: true,
+      },
+      {
+        name: intl.formatMessage({
+          id: 'sitemap_page_section_additional_resources.community',
+        }),
+        link: getCommunityURL(),
+        icon: true,
+      },
+      {
+        name: intl.formatMessage({
+          id: 'sitemap_page_section_additional_resources.feedback',
+        }),
+        link: getFeedbackURL(),
+        icon: true,
+      },
+    ],
+  }
+
+  return data
+}