Merge pull request #26 from vtex/feature/search-page-sections

Feature/search page sections

src/components/search-section/index.tsx

@@ -0,0 +1,30 @@
+import { Box, Flex, Text } from '@vtex/brand-ui'
+import { DocDataElement, UpdatesDataElement } from 'pages/search'
+
+import styles from './styles'
+
+interface SearchSectionProps {
+  dataElement: DocDataElement | UpdatesDataElement
+  index: number
+}
+
+const SearchSection = ({ dataElement, index }: SearchSectionProps) => {
+  return (
+    <Flex
+      sx={styles.sectionContainer}
+      key={`search-section-${dataElement.title}${index}`}
+    >
+      <Flex sx={styles.sectionIconTitleBox}>
+        <dataElement.Icon sx={styles.sectionIcon} />
+        <Text className="search-section-title" sx={styles.sectionTitle}>
+          {dataElement.title}
+        </Text>
+      </Flex>
+      <Box className="search-section-count" sx={styles.sectionCount}>
+        100
+      </Box>
+    </Flex>
+  )
+}
+
+export default SearchSection

src/components/search-section/styles.ts

@@ -0,0 +1,53 @@
+import { SxStyleProp } from '@vtex/brand-ui'
+
+const sectionContainer: SxStyleProp = {
+  justifyContent: 'space-between',
+  padding: '8px',
+  mb: '8px',
+  cursor: 'pointer',
+  ':active, :hover': {
+    backgroundColor: '#F8F7FC',
+    borderRadius: '4px',
+    '.search-section-title': {
+      color: '#000711',
+    },
+    '.search-section-count': {
+      background: '#E7E9EE',
+    },
+  },
+}
+
+const sectionIconTitleBox: SxStyleProp = {
+  alignItems: 'center',
+}
+
+const sectionIcon: SxStyleProp = {
+  width: '16px',
+  height: '16px',
+  minWidth: '16px',
+  minHeight: '16px',
+  mr: '8px',
+}
+
+const sectionTitle: SxStyleProp = {
+  fontSize: '12px',
+  lineHeight: '16px',
+}
+
+const sectionCount: SxStyleProp = {
+  background: '#F8F7FC',
+  borderRadius: '24px',
+  width: 'auto',
+  textAlign: 'center',
+  px: '8px',
+  fontSize: '12px',
+  lineHeight: '16px',
+}
+
+export default {
+  sectionContainer,
+  sectionIconTitleBox,
+  sectionIcon,
+  sectionTitle,
+  sectionCount,
+}

src/components/search-sections/index.tsx

@@ -0,0 +1,32 @@
+import { Box, Flex, Text } from '@vtex/brand-ui'
+
+import { docsIcons, notesIcons } from 'pages/search/index'
+import SearchSection from 'components/search-section'
+import styles from './styles'
+
+const SearchSections = () => {
+  return (
+    <Box sx={styles.container}>
+      <Box sx={styles.docsSection}>
+        <Flex sx={styles.allResultsContainer}>
+          <Text className="search-section-title" sx={styles.allResultsText}>
+            All results
+          </Text>
+          <Box className="search-section-count" sx={styles.sectionCount}>
+            25
+          </Box>
+        </Flex>
+        {docsIcons.map((docsIcon, index) => (
+          <SearchSection dataElement={docsIcon} index={index} />
+        ))}
+      </Box>
+      <Box sx={styles.notesSection}>
+        {notesIcons.map((notesIcon, index) => (
+          <SearchSection dataElement={notesIcon} index={index} />
+        ))}
+      </Box>
+    </Box>
+  )
+}
+
+export default SearchSections

src/components/search-sections/styles.ts

@@ -0,0 +1,63 @@
+import { SxStyleProp } from '@vtex/brand-ui'
+
+const container: SxStyleProp = {
+  height: '100%',
+  width: '242px',
+  border: '1px solid #E7E9EE',
+  borderRadius: '4px',
+  mr: '32px',
+  mt: '96px',
+}
+
+const notesSection: SxStyleProp = {
+  px: '8px',
+  paddingTop: '8px',
+}
+
+const docsSection: SxStyleProp = {
+  ...notesSection,
+  borderBottom: '1px solid #E7E9EE',
+}
+
+const allResultsContainer: SxStyleProp = {
+  justifyContent: 'space-between',
+  padding: '8px',
+  mb: '8px',
+  cursor: 'pointer',
+  ':active, :hover': {
+    backgroundColor: '#F8F7FC',
+    '.search-section-title': {
+      color: '#000711',
+    },
+    '.search-section-count': {
+      background: '#E7E9EE',
+    },
+  },
+}
+
+const allResultsText: SxStyleProp = {
+  fontSize: '12px',
+  lineHeight: '16px',
+  ml: '24px',
+  fontWeight: 'bold',
+  color: '#0C1522',
+}
+
+const sectionCount: SxStyleProp = {
+  background: '#F8F7FC',
+  borderRadius: '24px',
+  width: 'auto',
+  textAlign: 'center',
+  px: '8px',
+  fontSize: '12px',
+  lineHeight: '16px',
+}
+
+export default {
+  container,
+  notesSection,
+  docsSection,
+  allResultsText,
+  allResultsContainer,
+  sectionCount,
+}

src/components/sidebar-section/index.tsx

@@ -7,11 +7,11 @@ import SideBarToggleIcon from 'components/icons/sidebar-toggle-icon'
 import SideBarElements from 'components/sidebar-elements'
 
 import type { SidebarItemPropTypes } from 'components/sidebar-elements'
-import type { DocTitle } from 'utils/typings/unionTypes'
+import type { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes'
 import styles from './styles'
 
 export interface SidebarSectionProps {
-  title: DocTitle
+  title: DocumentationTitle | UpdatesTitle
   data: SidebarItemPropTypes[]
 }
 

src/pages/search/index.tsx

@@ -11,8 +11,14 @@ import ReleaseNotesIcon from 'components/icons/release-notes-icon'
 import DocumentationUpdatesIcon from 'components/icons/documentation-updates-icon'
 import Sidebar from 'components/sidebar'
 import SearchCard from 'components/search-card'
-import { MethodType } from 'utils/typings/unionTypes'
+import {
+  DocumentationTitle,
+  UpdatesTitle,
+  MethodType,
+} from 'utils/typings/unionTypes'
 import { ActionType } from 'components/last-updates-card/functions'
+import SearchSections from 'components/search-sections'
+import { IconComponent } from 'utils/typings/types'
 
 export interface SearchDataItemProps {
   doc: string
@@ -23,7 +29,17 @@ export interface SearchDataItemProps {
   actionType?: ActionType
 }
 
-const docsIcons = [
+export interface DocDataElement {
+  Icon: IconComponent
+  title: DocumentationTitle
+}
+
+export interface UpdatesDataElement {
+  Icon: IconComponent
+  title: UpdatesTitle
+}
+
+export const docsIcons: DocDataElement[] = [
   {
     Icon: APIGuidesIcon,
     title: 'API Guides',
@@ -46,7 +62,7 @@ const docsIcons = [
   },
 ]
 
-const notesIcons = [
+export const notesIcons: UpdatesDataElement[] = [
   {
     Icon: ReleaseNotesIcon,
     title: 'Release Notes',
@@ -93,6 +109,7 @@ const SearchPage = () => {
   return (
     <Flex sx={styles.body}>
       <Sidebar />
+      <SearchSections />
       <Box sx={styles.resultContainer}>
         <Text sx={styles.resultText}>
           Showing {searchData.length} results for "{router.query.keyword}" in

src/utils/typings/unionTypes.ts

@@ -1,12 +1,12 @@
 export type Locale = 'en' | 'pt' | 'es'
 
-export type DocTitle =
+export type DocumentationTitle =
   | 'API Guides'
   | 'API Reference'
   | 'VTEX IO'
   | 'FastStore'
   | 'WebOps'
-  | 'Release Notes'
-  | 'Documentation Updates'
+
+export type UpdatesTitle = 'Release Notes' | 'Documentation Updates'
 
 export type MethodType = 'POST' | 'GET' | 'PUT' | 'DELETE'