Feat/faq

src/components/breadcrumb/styles.ts

@@ -5,6 +5,7 @@ const breadcrumb: SxStyleProp = {
   color: '#6b7785',
   mb: '24px',
   lineHeight: '18px',
+  flexWrap: 'wrap',
 }
 
 const breadcrumbItem: SxStyleProp = {

src/components/faq-card/index.tsx

@@ -0,0 +1,34 @@
+import { Box, Text, Link } from '@vtex/brand-ui'
+
+import type { FaqCardDataElement } from 'utils/typings/types'
+
+import styles from './styles'
+import Tag from 'components/tag'
+import DateText from 'components/date-text'
+
+const FaqCard = ({
+  title,
+  productTeam,
+  slug,
+  createdAt,
+  updatedAt,
+}: FaqCardDataElement) => {
+  const createdAtDate = new Date(createdAt)
+  const updatedAtDate = new Date(updatedAt)
+
+  return (
+    <Link href={`faq/${slug}`}>
+      <Box sx={styles.container}>
+        <Tag color={'Gray'} sx={styles.tag}>
+          {productTeam}
+        </Tag>
+        <Text sx={styles.title} className="title">
+          {title}
+        </Text>
+        <DateText createdAt={createdAtDate} updatedAt={updatedAtDate} />
+      </Box>
+    </Link>
+  )
+}
+
+export default FaqCard

src/components/faq-card/styles.ts

@@ -0,0 +1,43 @@
+import type { SxStyleProp } from '@vtex/brand-ui'
+
+const container: SxStyleProp = {
+  px: ['32px', '32px', '36px', '64px'],
+  py: '24px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+  borderRadius: '4px',
+  border: '1px solid #E7E9EE',
+  width: ['320px', '544px', '720px'],
+  transition: 'all 0.3s ease-out',
+  ':hover': {
+    cursor: 'pointer',
+  },
+  ':active, :hover': {
+    boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.1)',
+    transition: 'all 0.3 ease-out',
+
+    '.title, .module': {
+      transition: 'all 0.3s ease-out',
+      color: '#000711',
+    },
+  },
+}
+
+const title: SxStyleProp = {
+  fontSize: ['14px', '20px'],
+  fontWeight: '400',
+  lineHeight: ['22px', '30px'],
+  color: 'muted.0',
+}
+
+const tag: SxStyleProp = {
+  width: 'max-content',
+  px: '8px',
+}
+
+export default {
+  container,
+  title,
+  tag,
+}

src/components/filter/index.tsx

@@ -13,8 +13,8 @@ interface Filter {
 }
 
 interface Props {
-  tagFilter: Filter
-  checkBoxFilter: Filter
+  tagFilter?: Filter
+  checkBoxFilter?: Filter
   onApply: (filters: { tag: string[]; checklist: string[] }) => void
 }
 
@@ -69,7 +69,7 @@ const Filter = ({ tagFilter, checkBoxFilter, onApply }: Props) => {
           setIsModalOpen(true)
         }}
       >
-        <FilterIcon />
+        <FilterIcon size={16} />
         <Text>{intl.formatMessage({ id: 'filter_modal.title' })}</Text>
         {numberOfFilters > 0 && (
           <Text sx={styles.numberOfFilters}>{numberOfFilters}</Text>
@@ -78,6 +78,56 @@ const Filter = ({ tagFilter, checkBoxFilter, onApply }: Props) => {
     )
   }
 
+  const TagFilter = () => {
+    if (!tagFilter) return <></>
+    return (
+      <Box sx={styles.filterContainer}>
+        <Text sx={styles.filterTitle}>{tagFilter.name}</Text>
+        <Flex sx={styles.tagContainer}>
+          {tagFilter.options.map((option, index) => (
+            <Tag
+              sx={styles.tag}
+              key={index}
+              color={
+                isFilterSelected(option.id, 'tag') ? 'Selected' : 'Default'
+              }
+              onClick={() => handleFilterClick(option.id, 'tag')}
+            >
+              {option.name}
+            </Tag>
+          ))}
+        </Flex>
+      </Box>
+    )
+  }
+
+  const CheckboxFilter = () => {
+    if (!checkBoxFilter) return <></>
+    return (
+      <Box sx={styles.filterContainer}>
+        <Text sx={styles.filterTitle}>{checkBoxFilter.name}</Text>
+        <Box sx={styles.checkBoxContainer}>
+          {checkBoxFilter.options.map((option, index) => (
+            <Checkbox
+              key={index}
+              label={option.name}
+              checked={isFilterSelected(option.id, 'checklist')}
+              onClick={() => handleFilterClick(option.id, 'checklist')}
+            />
+          ))}
+        </Box>
+      </Box>
+    )
+  }
+
+  const Divider = () => {
+    return (
+      <Box sx={styles.sectionDivider}>
+        <hr />
+      </Box>
+    )
+  }
+
   const FilterModal = () => {
     return (
       <>
@@ -90,41 +140,9 @@ const Filter = ({ tagFilter, checkBoxFilter, onApply }: Props) => {
             </Flex>
           </Box>
           <Box sx={styles.innerContainer}>
-            <Box sx={styles.filterContainer}>
-              <Text sx={styles.filterTitle}>{tagFilter.name}</Text>
-              <Flex sx={styles.tagContainer}>
-                {tagFilter.options.map((option, index) => (
-                  <Tag
-                    sx={styles.tag}
-                    key={index}
-                    color={
-                      isFilterSelected(option.id, 'tag')
-                        ? 'Selected'
-                        : 'Default'
-                    }
-                    onClick={() => handleFilterClick(option.id, 'tag')}
-                  >
-                    {option.name}
-                  </Tag>
-                ))}
-              </Flex>
-            </Box>
-            <Box sx={styles.sectionDivider}>
-              <hr />
-            </Box>
-            <Box sx={styles.filterContainer}>
-              <Text sx={styles.filterTitle}>{checkBoxFilter.name}</Text>
-              <Box sx={styles.checkBoxContainer}>
-                {checkBoxFilter.options.map((option, index) => (
-                  <Checkbox
-                    key={index}
-                    label={option.name}
-                    checked={isFilterSelected(option.id, 'checklist')}
-                    onClick={() => handleFilterClick(option.id, 'checklist')}
-                  />
-                ))}
-              </Box>
-            </Box>
+            <TagFilter />
+            {checkBoxFilter && tagFilter && <Divider />}
+            <CheckboxFilter />
           </Box>
           <Flex sx={styles.buttonsContainer}>
             <Button

src/components/filter/styles.ts

@@ -4,12 +4,12 @@ const filterButton: SxStyleProp = {
   cursor: 'pointer',
   alignItems: 'center',
   borderRadius: '4px',
-  border: '1px solid #4A596B',
+  border: '1px solid #E7E9EE',
+  fontSize: '14px',
   gap: '8px',
   px: '8px',
-  py: '4px',
   transition: '0.3s',
-  height: '36px',
+  height: '24px',
 
   ':hover': {
     color: '#F71963',

src/components/select/styles.ts

@@ -11,9 +11,10 @@ const selectContainer: SxStyleProp = {
 const select: SxStyleProp = {
   borderRadius: '4px',
   padding: '0px 4px',
-  height: '36px',
+  height: '24px',
   fontSize: '14px',
   border: '1px solid #E7E9EE',
+  outline: 'none',
 }
 
 export default { selectContainer, select }

src/components/tag/index.tsx

@@ -11,7 +11,7 @@ const Tag = ({
 }: {
   sx?: SxStyleProp
   children: React.ReactNode
-  color?: KnownIssueStatus | 'Default' | 'Selected' | 'New'
+  color?: KnownIssueStatus | 'Default' | 'Selected' | 'New' | 'Gray'
   onClick?: () => void
 }) => {
   return (

src/components/tag/styles.ts

@@ -13,7 +13,12 @@ const tag: SxStyleProp = {
 }
 
 const statusColors: {
-  [status in KnownIssueStatus | 'Default' | 'Selected' | 'New']: SxStyleProp
+  [status in
+    | KnownIssueStatus
+    | 'Default'
+    | 'Selected'
+    | 'New'
+    | 'Gray']: SxStyleProp
 } = {
   Backlog: {
     border: '1px solid #979797',
@@ -64,6 +69,11 @@ const statusColors: {
     color: '#F71963',
     background: '#FFE0EF',
   },
+  Gray: {
+    border: '1px solid #4A596B',
+    color: '#4A596B',
+    background: '#E7E9EE',
+  },
 }
 
 export default {

src/messages/en.json

@@ -244,9 +244,10 @@
   "sort.label": "Sort by:",
   "sort.recently_updated": "Recently updated",
   "sort.newest": "Newest",
-  "known_issues_result.empty": "No matching results. Try other filters.",
   "date_text.created": "Published on",
   "date_text.updated": "Last update on",
   "announcements_page_result.empty": "No matching results.",
-  "announcements_page_search.placeholder": "Search in Announcements..."
+  "announcements_page_search.placeholder": "Search in Announcements...",
+  "search_result.empty": "No matching results.",
+  "faq_filter.title": "Products"
 }

src/messages/es.json

@@ -250,9 +250,10 @@
   "sort.label": "Ordenar por:",
   "sort.recently_updated": "Recientemente actualizados",
   "sort.newest": "Más nuevos",
-  "known_issues_result.empty": "Ningún resultado coincidente. Pruebe con otros filtros.",
   "date_text.created": "Publicado en",
   "date_text.updated": "Última actualización",
   "announcements_page_result.empty": "Ningún resultado coincidente.",
-  "announcements_page_search.placeholder": "Buscar en Anuncios..."
+  "announcements_page_search.placeholder": "Buscar en Anuncios...",
+  "search_result.empty": "Ningún resultado coincidente. Pruebe con otros filtros.",
+  "faq_filter.title": "Produtos"
 }

src/messages/pt.json

@@ -265,9 +265,10 @@
   "sort.label": "Ordenar por:",
   "sort.recently_updated": "Recentemente atualizado",
   "sort.newest": "Mais novos",
-  "known_issues_result.empty": "Nenhum resultado correspondente. Tente outros filtros.",
   "date_text.created": "Publicado em",
   "date_text.updated": "Última atualização em",
   "announcements_page_result.empty": "Nenhum resultado correspondente.",
-  "announcements_page_search.placeholder": "Pesquise em Comunicados..."
+  "announcements_page_search.placeholder": "Pesquise em Comunicados...",
+  "search_result.empty": "Nenhum resultado correspondente. Tente outros filtros.",
+  "faq_filter.title": "Produtos"
 }

src/pages/docs/tracks/[slug].tsx

@@ -126,8 +126,11 @@ const TrackPage: NextPage<Props> = ({
             <Box sx={styles.contentContainer}>
               <article ref={articleRef}>
                 <header>
+                  <Breadcrumb breadcrumbList={breadcrumbList} />
                   <Flex sx={styles.flexContainer}>
-                    <Breadcrumb breadcrumbList={breadcrumbList} />
+                    <Text sx={styles.documentationTitle} className="title">
+                      {serialized.frontmatter?.title}
+                    </Text>
                     <Text sx={styles.readingTime}>
                       {intl.formatMessage(
                         {
@@ -138,12 +141,6 @@ const TrackPage: NextPage<Props> = ({
                       )}
                     </Text>
                   </Flex>
-                  <Text sx={styles.documentationTitle} className="title">
-                    {serialized.frontmatter?.title}
-                  </Text>
-                  <Text sx={styles.documentationExcerpt}>
-                    {serialized.frontmatter?.excerpt}
-                  </Text>
                 </header>
                 <MarkdownRenderer serialized={serialized} />
               </article>