Merge pull request #53 from vtexdocs/update/dropdown-item-descriptions

Update/dropdown item descriptions
vtexdocs · Jul 11, 2022 · c9fe67a · c9fe67a
2 parents 39bf9e2 + f66b3b3
commit c9fe67a
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 115 deletions.
diff --git a/src/components/documentation-card/functions.ts b/src/components/documentation-card/functions.ts
@@ -4,7 +4,7 @@ import styles from './styles'
 const cardContainer = (containerType: string) => {
   const containerWidth =
     containerType === 'dropdown'
-      ? ['308px', '442px', '444px', '464px']
+      ? ['308px', '442px', '444px', '480px']
       : ['324px', '544px', '544px', '544px', '544px', '720px']
 
   const textWidth =
@@ -17,7 +17,7 @@ const cardContainer = (containerType: string) => {
     width: containerWidth,
 
     '.title, .description': {
-      maxWidth: textWidth,
+      width: textWidth,
     },
   }
 

diff --git a/src/components/documentation-card/index.tsx b/src/components/documentation-card/index.tsx
@@ -1,28 +1,25 @@
 import Link from 'next/link'
 import { Box, Flex, Text } from '@vtex/brand-ui'
 
-import type { IconComponent } from 'utils/typings/types'
-
 import styles from './styles'
 import { cardContainer, cardTitle, titleContainer } from './functions'
+import { DataElement } from 'utils/typings/types'
 
-export interface CardProps {
+export interface DocumentProps extends DataElement {
   title: string
-  description: string
-  to: string
-  Icon: IconComponent
-  containerType: string
 }
-
+export interface CardProps extends DocumentProps {
+  containerType: 'dropdown' | 'see-also'
+}
 const DocumentationCard = ({
   title,
   description,
-  to,
-  Icon,
+  link,
   containerType,
+  Icon,
 }: CardProps) => {
   return (
-    <Link href={to}>
+    <Link href={link}>
       <a>
         <Box sx={cardContainer(containerType)}>
           <Flex sx={titleContainer(containerType)}>

diff --git a/src/components/documentation-section-card/styles.ts b/src/components/documentation-section-card/styles.ts
@@ -3,7 +3,7 @@ import { SxStyleProp } from '@vtex/brand-ui'
 const cardContainer: SxStyleProp = {
   flexDirection: 'column',
   margin: ['8px', '12px', '12px', '16px'],
-  width: ['151px', '282px', '282px'],
+  width: ['151px', '282px'],
   height: ['120px', '225px', '225px'],
   boxSizing: 'initial',
   borderRadius: '8px',
@@ -39,7 +39,8 @@ const cardContainer: SxStyleProp = {
 }
 
 const infoContainer: SxStyleProp = {
-  padding: ['16px', '24px'],
+  py: ['16px', '24px'],
+  px: '16px',
   flexDirection: 'column',
   alignItems: 'center',
   textAlign: 'center',

diff --git a/src/components/dropdown-menu/index.tsx b/src/components/dropdown-menu/index.tsx
@@ -1,72 +1,10 @@
 import { Box } from '@vtex/brand-ui'
 
-import DocumentationCard, { CardProps } from 'components/documentation-card'
-
-import APIGuidesIcon from 'components/icons/api-guides-icon'
-import APIReferenceIcon from 'components/icons/api-reference-icon'
-import VTEXIOIcon from 'components/icons/vtex-io-icon'
-import FastStoreIcon from 'components/icons/fast-store-icon'
-import WebOpsIcon from 'components/icons/webops-icon'
-import ReleaseNotesIcon from 'components/icons/release-notes-icon'
-import DocumentationUpdatesIcon from 'components/icons/documentation-updates-icon'
+import DocumentationCard from 'components/documentation-card'
+import { documentationData, updatesData } from 'utils/constants'
 
 import styles from './styles'
 
-const documentationCards: CardProps[] = [
-  {
-    title: 'API Guides',
-    description: 'Quickly build and launch high-performance stores',
-    to: '/docs/api-guides',
-    Icon: APIGuidesIcon,
-    containerType: 'dropdown',
-  },
-  {
-    title: 'API Reference',
-    description: 'From ERP to custom-built integrations — extend',
-    to: '/docs/api-reference',
-    Icon: APIReferenceIcon,
-    containerType: 'dropdown',
-  },
-  {
-    title: 'VTEX IO',
-    description: 'VTEX IO is an enterprise low-code development',
-    to: '/docs/vtex-io',
-    Icon: VTEXIOIcon,
-    containerType: 'dropdown',
-  },
-  {
-    title: 'FastStore',
-    description: 'Quickly build and launch high-performance stores',
-    to: '/docs/fast-store',
-    Icon: FastStoreIcon,
-    containerType: 'dropdown',
-  },
-  {
-    title: 'WebOps',
-    description: 'From ERP to custom-built integrations — extend',
-    to: '/docs/webops',
-    Icon: WebOpsIcon,
-    containerType: 'dropdown',
-  },
-]
-
-const updatesCards: CardProps[] = [
-  {
-    title: 'Release Notes',
-    description: 'From ERP to custom-built integrations — extend',
-    to: '/updates/release-notes',
-    Icon: ReleaseNotesIcon,
-    containerType: 'dropdown',
-  },
-  {
-    title: 'Documentation Updates',
-    description: 'From ERP to custom-built integrations — extend',
-    to: '/',
-    Icon: DocumentationUpdatesIcon,
-    containerType: 'dropdown',
-  },
-]
-
 const DropdownMenu = () => {
   return (
     <Box sx={styles.outerContainer}>
@@ -75,16 +13,24 @@ const DropdownMenu = () => {
           sx={styles.documentationContainer}
           data-cy="dropdown-menu-first-section"
         >
-          {documentationCards.map((card) => (
-            <DocumentationCard key={card.title} {...card} />
+          {documentationData.map((card) => (
+            <DocumentationCard
+              containerType="dropdown"
+              key={card.title}
+              {...card}
+            />
           ))}
         </Box>
         <Box
           sx={styles.updatesContainer}
           data-cy="dropdown-menu-second-section"
         >
-          {updatesCards.map((card) => (
-            <DocumentationCard key={card.title} {...card} />
+          {updatesData.map((card) => (
+            <DocumentationCard
+              containerType="dropdown"
+              key={card.title}
+              {...card}
+            />
           ))}
         </Box>
       </Box>

diff --git a/src/components/see-also-section/index.tsx b/src/components/see-also-section/index.tsx
@@ -1,19 +1,19 @@
 import { Box, Text } from '@vtex/brand-ui'
 
-import DocumentationCard, { CardProps } from 'components/documentation-card'
+import DocumentationCard, { DocumentProps } from 'components/documentation-card'
 
 import styles from './styles'
 
 interface SeeAlsoSectionProps {
-  cards: CardProps[]
+  cards: DocumentProps[]
 }
 
 const SeeAlsoSection = ({ cards }: SeeAlsoSectionProps) => {
   return (
     <Box sx={styles.seeAlsoContainer} data-cy="see-also-section">
       <Text sx={styles.sectionTitle}>See also</Text>
       {cards.map((card) => (
-        <DocumentationCard {...card} />
+        <DocumentationCard containerType="see-also" {...card} />
       ))}
     </Box>
   )

diff --git a/src/messages/language.json b/src/messages/language.json
@@ -5,16 +5,20 @@
   "landing_page_newsletter.policyLink": "privacy policy",
   "landing_page_newsletter.Button": "Subscribe",
   "landing_page_documentation.title": "Documentation",
-  "landing_page_documentation_api_guides.title": "API Guides",
-  "landing_page_documentation_api_guides.description": "Explore the capabilities of our Rest APIs",
-  "landing_page_documentation_api_reference.title": "API Reference",
-  "landing_page_documentation_api_reference.description": "Extend VTEX's platform to fit your business",
-  "landing_page_documentation_vtex_io.title": "VTEX IO",
-  "landing_page_documentation_vtex_io.description": "Quickly build high-performance stores and IO apps",
-  "landing_page_documentation_fast_store.title": "FastStore",
-  "landing_page_documentation_fast_store.description": "Build your storefront with ecommerce components",
-  "landing_page_documentation_webops.title": "WebOps",
-  "landing_page_documentation_webops.description": "Improve team's productivity by automating processes",
+  "documentation_api_guides.title": "API Guides",
+  "documentation_api_guides.description": "Guides on how to use our APIs and extend VTEX’s platform",
+  "documentation_api_reference.title": "API Reference",
+  "documentation_api_reference.description": "Reference handbook for working with VTEX APIs",
+  "documentation_vtex_io.title": "VTEX IO",
+  "documentation_vtex_io.description": "Application development platform for custom commerce solutions",
+  "documentation_fast_store.title": "FastStore",
+  "documentation_fast_store.description": "Fullstack toolkit for building high-performance stores",
+  "documentation_webops.title": "WebOps",
+  "documentation_webops.description": "Deployment platform optimized for storefront development",
+  "updates_release_notes.title": "Release Notes",
+  "updates_release_notes.description": "Technical updates on feature and bug fixes.",
+  "updates_documentation_updates.title": "Documentation Updates",
+  "updates_documentation_updates.description": "A log of all notable changes made to our docs.",
   "landing_page_documentation_documentation_card.quickStartedText": "Quick Started",
   "landing_page_last_updates.title": "Last Updates",
   "landing_page_education.title": "Education channels",

diff --git a/src/pages/docs/api-guides/[slug].tsx b/src/pages/docs/api-guides/[slug].tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'
 import { Box, Flex } from '@vtex/brand-ui'
 import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
 
-import type { CardProps } from 'components/documentation-card'
 import type { Item } from 'components/table-of-contents'
 
 import APIGuidesIcon from 'components/icons/api-guides-icon'
@@ -31,21 +30,19 @@ const markdownDir = '/public/docs/api-guides'
 
 const contributors = 'ABCDEFGHIJKL'.split('')
 
-const documentationCards: CardProps[] = [
+const documentationCards = [
   {
     title: 'Billing Options',
     description: 'API Guides',
-    to: '/docs/api-guides/billing-options',
+    link: '/docs/api-guides/billing-options',
     Icon: APIGuidesIcon,
-    containerType: 'see-also',
   },
   {
     title:
       'Catalog API - A long documentation title aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
     description: 'API Reference',
-    to: '/docs/api-reference/catalog',
+    link: '/docs/api-reference/catalog',
     Icon: APIReferenceIcon,
-    containerType: 'see-also',
   },
 ]
 

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -30,32 +30,31 @@ export const documentationData: DocDataElement[] = [
   {
     Icon: APIGuidesIcon,
     title: 'API Guides',
-    description: messages['landing_page_documentation_api_guides.description'],
+    description: messages['documentation_api_guides.description'],
     link: '/docs/api-guides',
   },
   {
     Icon: APIReferenceIcon,
     title: 'API Reference',
-    description:
-      messages['landing_page_documentation_api_reference.description'],
+    description: messages['documentation_api_reference.description'],
     link: '/docs/api-reference',
   },
   {
     Icon: VTEXIOIcon,
     title: 'VTEX IO',
-    description: messages['landing_page_documentation_vtex_io.description'],
+    description: messages['documentation_vtex_io.description'],
     link: '/docs/vtex-io',
   },
   {
     Icon: FastStoreIcon,
     title: 'FastStore',
-    description: messages['landing_page_documentation_fast_store.description'],
+    description: messages['documentation_fast_store.description'],
     link: '/docs/fast-store',
   },
   {
     Icon: WebOpsIcon,
     title: 'WebOps',
-    description: messages['landing_page_documentation_webops.description'],
+    description: messages['documentation_webops.description'],
     link: '/docs/webops',
   },
 ]
@@ -64,12 +63,14 @@ export const updatesData: UpdatesDataElement[] = [
   {
     Icon: ReleaseNotesIcon,
     title: 'Release Notes',
+    description: messages['updates_release_notes.description'],
     link: '/updates/release-notes',
   },
   {
     Icon: DocumentationUpdatesIcon,
     title: 'Documentation Updates',
-    link: '/',
+    description: messages['updates_documentation_updates.description'],
+    link: '/updates/documentation-updates',
   },
 ]
 

diff --git a/src/utils/typings/types.ts b/src/utils/typings/types.ts
@@ -5,17 +5,16 @@ import { DocumentationTitle, UpdatesTitle, ResourceTitle } from './unionTypes'
 
 export type IconComponent = (props: IconProps) => JSX.Element
 
-export type DocDataElement = {
+export type DataElement = {
+  link: string
   Icon: IconComponent
   description: string
+}
+export interface DocDataElement extends DataElement {
   title: DocumentationTitle
-  link: string
 }
-
-export type UpdatesDataElement = {
-  Icon: IconComponent
+export interface UpdatesDataElement extends DataElement {
   title: UpdatesTitle
-  link: string
 }
 
 export type UpdateElement = {