From 2b35a04f9d652f05221315134723415665f472a3 Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Wed, 3 Jan 2024 12:26:40 -0300 Subject: [PATCH 01/19] feat: adds info icon --- src/components/icons/info-icon.tsx | 35 ++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/components/icons/info-icon.tsx diff --git a/src/components/icons/info-icon.tsx b/src/components/icons/info-icon.tsx new file mode 100644 index 00000000..88be04ce --- /dev/null +++ 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) => ( + + + + + +) + +export default InfoIcon From 21139790b1f7c8d7899cb30545f52cf8ad5a0afc Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Wed, 3 Jan 2024 15:17:22 -0300 Subject: [PATCH 02/19] feat: adds new icons to sidebar --- src/components/layout.tsx | 12 +++++++-- src/messages/en.json | 6 ++++- src/messages/es.json | 6 ++++- src/messages/pt.json | 6 ++++- src/utils/constants.ts | 45 ++++++++++++++++++++++++++++----- src/utils/typings/types.ts | 6 ++++- src/utils/typings/unionTypes.ts | 4 ++- 7 files changed, 72 insertions(+), 13 deletions(-) diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 9291c532..518277b8 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -16,7 +16,11 @@ import { LibraryContextProvider, Sidebar, } from '@vtexdocs/components' -import { documentationData, updatesData } from 'utils/constants' +import { + documentationData, + knownIssuesData, + updatesData, +} from 'utils/constants' import { useIntl } from 'react-intl' interface Props { @@ -51,7 +55,11 @@ export default function Layout({ return ( { link: '/docs/tutorial', }, { + // Checar com thaylly se deve ficar no mesmo lugar Icon: DeveloperPortalIcon, title: intl.formatMessage({ id: 'documentation_developers_portal.title', @@ -69,14 +71,45 @@ export const documentationData = (intl: IntlShape) => { export const updatesData = (intl: IntlShape) => { const data: UpdatesDataElement[] = [ { - Icon: AnnouncementIcon, - title: 'News', + Icon: MegaphoneIcon, + title: 'Announcement', + description: intl.formatMessage({ + id: 'updates_announcements_notes.description', // TODO: Adicionar devida descricao + }), + link: '/updates/announcements', //TODO: verificar rota + }, + { + Icon: InfoIcon, + title: 'FAQ', + description: intl.formatMessage({ + id: 'updates_info_notes.description', //TODO: Adicionar devida descricao + }), + link: '/updates/announcements', //TODO: mudar rota + }, + ] + return data +} + +export const knownIssuesData = (intl: IntlShape) => { + const data: SupportElement[] = [ + { + Icon: WarningIcon, + title: 'Known Issues', + description: intl.formatMessage({ + id: 'sidebar_known_issues.description', + }), + link: '/updates/announcements', //TODO: Trocar rota + }, + { + Icon: PaperIcon, + title: 'Support Rules', description: intl.formatMessage({ - id: 'updates_release_notes.description', + id: 'sidebar_support_rules.description', }), - link: '/updates/announcements', + link: '/updates/announcements', //TODO: trocar rota }, ] + return data } diff --git a/src/utils/typings/types.ts b/src/utils/typings/types.ts index 7c4d34d6..b64a5723 100644 --- a/src/utils/typings/types.ts +++ b/src/utils/typings/types.ts @@ -2,7 +2,7 @@ import { NextPage } from 'next' import { IconProps } from '@vtex/brand-ui' import { ActionType } from 'components/announcement-card/functions' -import { UpdatesTitle, ResourceTitle } from './unionTypes' +import { UpdatesTitle, ResourceTitle, SupportTitle } from './unionTypes' // eslint-disable-next-line @typescript-eslint/ban-types export type Page

= NextPage & { @@ -32,6 +32,10 @@ export interface UpdatesDataElement extends DataElement { title: UpdatesTitle } +export interface SupportElement extends DataElement { + title: SupportTitle +} + export type UpdateElement = { slug: string title: string diff --git a/src/utils/typings/unionTypes.ts b/src/utils/typings/unionTypes.ts index 1243882e..2fcf9754 100644 --- a/src/utils/typings/unionTypes.ts +++ b/src/utils/typings/unionTypes.ts @@ -5,7 +5,9 @@ export type DocumentationTitle = | 'Tutorials & Solutions' | 'Developers Portal' -export type UpdatesTitle = 'News' | 'Documentation Updates' +export type UpdatesTitle = 'Announcement' | 'FAQ' + +export type SupportTitle = 'Known Issues' | 'Support Rules' export type SlugPrefix = 'tutorial' From 4b2c0a0d87b9c255f0ab2e0b2100ce109a2d4762 Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Mon, 8 Jan 2024 17:33:37 -0300 Subject: [PATCH 03/19] feat: adds sections and icons to menu --- src/components/documentation-card/index.tsx | 2 +- src/components/dropdown-menu/index.tsx | 18 ++++++- src/components/header/index.tsx | 2 + src/components/layout.tsx | 6 +++ src/messages/en.json | 8 ++-- src/messages/es.json | 8 ++-- src/messages/pt.json | 8 ++-- src/utils/constants.ts | 53 ++++++++++++++++++--- src/utils/typings/unionTypes.ts | 6 ++- 9 files changed, 92 insertions(+), 19 deletions(-) diff --git a/src/components/documentation-card/index.tsx b/src/components/documentation-card/index.tsx index 877c7046..9233d0f0 100644 --- a/src/components/documentation-card/index.tsx +++ b/src/components/documentation-card/index.tsx @@ -26,7 +26,7 @@ const DocumentationCard = ({ - + {title} diff --git a/src/components/dropdown-menu/index.tsx b/src/components/dropdown-menu/index.tsx index a5fbcd10..e3aaf6cc 100644 --- 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 { + documentationData, + menuSupportData, + updatesData, +} from 'utils/constants' import { useIntl } from 'react-intl' import styles from './styles' @@ -23,6 +27,18 @@ const DropdownMenu = () => { /> ))} + + {menuSupportData(intl).map((card) => ( + + ))} + { + {' '} + {/*TODO: mudar data-cy no teste */} diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 518277b8..e1811e00 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -19,6 +19,7 @@ import { import { documentationData, knownIssuesData, + menuSupportData, updatesData, } from 'utils/constants' import { useIntl } from 'react-intl' @@ -60,6 +61,11 @@ export default function Layout({ knownIssuesData(intl), updatesData(intl), ]} + hamburguerMenuSections={[ + documentationData(intl), + menuSupportData(intl), + updatesData(intl), + ]} sectionSelected={sectionSelected ?? ''} fallback={sidebarfallback} isPreview={isPreview} diff --git a/src/messages/en.json b/src/messages/en.json index d9323a33..d66e25ff 100644 --- a/src/messages/en.json +++ b/src/messages/en.json @@ -56,7 +56,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?", @@ -115,6 +115,8 @@ "announcement_bar.button": "Fill in our survey! It takes less than 5 minutes.", "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.", - "updates_info_notes.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut." + "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." } diff --git a/src/messages/es.json b/src/messages/es.json index 1ab8bc34..8f6e2c20 100644 --- a/src/messages/es.json +++ b/src/messages/es.json @@ -56,7 +56,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?", @@ -115,6 +115,8 @@ "announcement_bar.button": "¡Complete nuestra encuesta! Toma menos de 5 minutos.", "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.", - "updates_info_notes.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut." + "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." } diff --git a/src/messages/pt.json b/src/messages/pt.json index 2169ef10..8246530e 100644 --- a/src/messages/pt.json +++ b/src/messages/pt.json @@ -56,7 +56,7 @@ "landing_page_footer_community.message": "Comunidade", "landing_page_footer_feedback.message": "Feedback", "landing_page_header_feedback.message": "Feedback", - "landing_page_header_docs.message": "Documentação", + "landing_page_header_docs.message": "Menu", "search_input.placeholder": "Pesquise no Help Center", "search_input.empty": "No results found. Try different search terms.", "feedback_section.question": "Isso foi útil?", @@ -115,6 +115,8 @@ "announcement_bar.button": "Participe de nossa pesquisa! Leva menos de 5 minutos.", "sidebar_known_issues.description": "Acesse conteúdo e encontre soluções para todas as suas dúvidas sobre a plataforma.", "sidebar_support_rules.description": "Veja detalhes dos planos de suporte disponíveis para cada plano comercial.", - "updates_announcements_notes.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.", - "updates_info_notes.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut." + "updates_announcements_notes.description": "Fique por dentro das principais notícias da VTEX.", + "updates_info_notes.description": "Encontre respostas para suas principais dúvidas de forma rápida e prática.", + "menu_health_check.description": "Verifique o status detalhado em tempo real.", + "menu_status.description": "Acompanhe o registro do histórico de plataforma." } diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 34c3b283..7effe2e2 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -70,6 +70,14 @@ export const documentationData = (intl: IntlShape) => { export const updatesData = (intl: IntlShape) => { const data: UpdatesDataElement[] = [ + { + Icon: InfoIcon, + title: 'FAQ', + description: intl.formatMessage({ + id: 'updates_info_notes.description', //TODO: Adicionar devida descricao + }), + link: '/updates/announcements', //TODO: mudar rota + }, { Icon: MegaphoneIcon, title: 'Announcement', @@ -78,19 +86,34 @@ export const updatesData = (intl: IntlShape) => { }), link: '/updates/announcements', //TODO: verificar rota }, + ] + return data +} + +export const knownIssuesData = (intl: IntlShape) => { + const data: SupportElement[] = [ { - Icon: InfoIcon, - title: 'FAQ', + Icon: WarningIcon, + title: 'Known Issues', description: intl.formatMessage({ - id: 'updates_info_notes.description', //TODO: Adicionar devida descricao + id: 'sidebar_known_issues.description', }), - link: '/updates/announcements', //TODO: mudar rota + link: '/updates/announcements', //TODO: Trocar rota + }, + { + Icon: PaperIcon, + title: 'Support Rules', + description: intl.formatMessage({ + id: 'sidebar_support_rules.description', + }), + link: '/updates/announcements', //TODO: trocar rota }, ] + return data } -export const knownIssuesData = (intl: IntlShape) => { +export const menuSupportData = (intl: IntlShape) => { const data: SupportElement[] = [ { Icon: WarningIcon, @@ -98,7 +121,23 @@ export const knownIssuesData = (intl: IntlShape) => { description: intl.formatMessage({ id: 'sidebar_known_issues.description', }), - link: '/updates/announcements', //TODO: Trocar rota + link: '#', //TODO: Trocar rota + }, + { + Icon: GraphIcon, + title: 'Status', + description: intl.formatMessage({ + id: 'menu_status.description', + }), + link: '#', + }, + { + Icon: SignalIcon, + title: 'Health Check', + description: intl.formatMessage({ + id: 'menu_health_check.description', + }), + link: '#', }, { Icon: PaperIcon, @@ -106,7 +145,7 @@ export const knownIssuesData = (intl: IntlShape) => { description: intl.formatMessage({ id: 'sidebar_support_rules.description', }), - link: '/updates/announcements', //TODO: trocar rota + link: '#', //TODO: trocar rota }, ] diff --git a/src/utils/typings/unionTypes.ts b/src/utils/typings/unionTypes.ts index 2fcf9754..a8a95019 100644 --- a/src/utils/typings/unionTypes.ts +++ b/src/utils/typings/unionTypes.ts @@ -7,7 +7,11 @@ export type DocumentationTitle = export type UpdatesTitle = 'Announcement' | 'FAQ' -export type SupportTitle = 'Known Issues' | 'Support Rules' +export type SupportTitle = + | 'Known Issues' + | 'Support Rules' + | 'Health Check' + | 'Status' export type SlugPrefix = 'tutorial' From beff01a910bdade1ef861a590413845cb9392027 Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Mon, 8 Jan 2024 17:57:09 -0300 Subject: [PATCH 04/19] feat: adds menu documentation section --- src/components/dropdown-menu/index.tsx | 4 ++-- src/utils/constants.ts | 27 +++++++++++++++++++++++++- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/components/dropdown-menu/index.tsx b/src/components/dropdown-menu/index.tsx index e3aaf6cc..94e1e44d 100644 --- a/src/components/dropdown-menu/index.tsx +++ b/src/components/dropdown-menu/index.tsx @@ -2,7 +2,7 @@ import { Box } from '@vtex/brand-ui' import DocumentationCard from 'components/documentation-card' import { - documentationData, + menuDocumentationData, menuSupportData, updatesData, } from 'utils/constants' @@ -19,7 +19,7 @@ const DropdownMenu = () => { sx={styles.documentationContainer} data-cy="dropdown-menu-first-section" > - {documentationData(intl).map((card) => ( + {menuDocumentationData(intl).map((card) => ( { + const data: DocDataElement[] = [ + { + Icon: StartHereIcon, + title: intl.formatMessage({ + id: 'documentation_start_here.title', + }), + description: intl.formatMessage({ + id: 'documentation_start_here.description', + }), + link: '/docs/tracks', + }, + { + Icon: TutorialsIcon, + title: intl.formatMessage({ + id: 'documentation_tutorials.title', + }), + description: intl.formatMessage({ + id: 'documentation_tutorials.description', + }), + link: '/docs/tutorial', + }, + ] + return data +} + +export const menuDocumentationData = (intl: IntlShape) => { const data: DocDataElement[] = [ { Icon: StartHereIcon, @@ -53,7 +79,6 @@ export const documentationData = (intl: IntlShape) => { link: '/docs/tutorial', }, { - // Checar com thaylly se deve ficar no mesmo lugar Icon: DeveloperPortalIcon, title: intl.formatMessage({ id: 'documentation_developers_portal.title', From 93d0c4a5504b00bda4cc80793445d70b07dc0c2c Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Tue, 9 Jan 2024 16:50:35 -0300 Subject: [PATCH 05/19] fix: adds translations to icons titles --- src/messages/en.json | 7 +++++- src/messages/es.json | 9 +++++-- src/messages/pt.json | 9 +++++-- src/utils/constants.ts | 44 +++++++++++++++++++++------------ src/utils/typings/types.ts | 6 +---- src/utils/typings/unionTypes.ts | 6 ----- 6 files changed, 49 insertions(+), 32 deletions(-) diff --git a/src/messages/en.json b/src/messages/en.json index d66e25ff..ec7353aa 100644 --- a/src/messages/en.json +++ b/src/messages/en.json @@ -118,5 +118,10 @@ "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." + "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": "Announcement" } diff --git a/src/messages/es.json b/src/messages/es.json index 8f6e2c20..b0907ae0 100644 --- 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", @@ -118,5 +118,10 @@ "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." + "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" } diff --git a/src/messages/pt.json b/src/messages/pt.json index 8246530e..a5133aee 100644 --- a/src/messages/pt.json +++ b/src/messages/pt.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 do Desenvolvedor", "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": "Perguntas frequentes", "landing_page_faq.description": "Encontre respostas para dúvidas mais frequentes de forma rápida e prática.", @@ -118,5 +118,10 @@ "updates_announcements_notes.description": "Fique por dentro das principais notícias da VTEX.", "updates_info_notes.description": "Encontre respostas para suas principais dúvidas de forma rápida e prática.", "menu_health_check.description": "Verifique o status detalhado em tempo real.", - "menu_status.description": "Acompanhe o registro do histórico de plataforma." + "menu_status.description": "Acompanhe o registro do histórico de plataforma.", + "sidebar_support_rules.title": "Diretivas de suporte", + "sidebar_known_issues.title": "Problemas Conhecidos", + "menu_status.title": "Status", + "menu_health_check.title": "Verificação de Integridade", + "updates_announcements_notes.title": "Comunicados" } diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 2ea46a7c..ddd1824e 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -9,11 +9,9 @@ import { import { DocDataElement, - UpdatesDataElement, WhatsNextDataElement, ResourceDataElement, FaqDataElement, - SupportElement, } from './typings/types' import { IntlShape } from 'react-intl' import libraryConfig from './libraryConfig' @@ -94,20 +92,22 @@ export const menuDocumentationData = (intl: IntlShape) => { } export const updatesData = (intl: IntlShape) => { - const data: UpdatesDataElement[] = [ + const data: DocDataElement[] = [ { Icon: InfoIcon, title: 'FAQ', description: intl.formatMessage({ - id: 'updates_info_notes.description', //TODO: Adicionar devida descricao + id: 'updates_info_notes.description', }), link: '/updates/announcements', //TODO: mudar rota }, { Icon: MegaphoneIcon, - title: 'Announcement', + title: intl.formatMessage({ + id: 'updates_announcements_notes.title', + }), description: intl.formatMessage({ - id: 'updates_announcements_notes.description', // TODO: Adicionar devida descricao + id: 'updates_announcements_notes.description', }), link: '/updates/announcements', //TODO: verificar rota }, @@ -116,10 +116,12 @@ export const updatesData = (intl: IntlShape) => { } export const knownIssuesData = (intl: IntlShape) => { - const data: SupportElement[] = [ + const data: DocDataElement[] = [ { Icon: WarningIcon, - title: 'Known Issues', + title: intl.formatMessage({ + id: 'sidebar_known_issues.title', + }), description: intl.formatMessage({ id: 'sidebar_known_issues.description', }), @@ -127,7 +129,9 @@ export const knownIssuesData = (intl: IntlShape) => { }, { Icon: PaperIcon, - title: 'Support Rules', + title: intl.formatMessage({ + id: 'sidebar_support_rules.title', + }), description: intl.formatMessage({ id: 'sidebar_support_rules.description', }), @@ -139,10 +143,12 @@ export const knownIssuesData = (intl: IntlShape) => { } export const menuSupportData = (intl: IntlShape) => { - const data: SupportElement[] = [ + const data: DocDataElement[] = [ { Icon: WarningIcon, - title: 'Known Issues', + title: intl.formatMessage({ + id: 'sidebar_known_issues.title', + }), description: intl.formatMessage({ id: 'sidebar_known_issues.description', }), @@ -150,23 +156,29 @@ export const menuSupportData = (intl: IntlShape) => { }, { Icon: GraphIcon, - title: 'Status', + title: intl.formatMessage({ + id: 'menu_status.title', + }), description: intl.formatMessage({ id: 'menu_status.description', }), - link: '#', + link: '#', // TODO: trocar rota }, { Icon: SignalIcon, - title: 'Health Check', + title: intl.formatMessage({ + id: 'menu_health_check.title', + }), description: intl.formatMessage({ id: 'menu_health_check.description', }), - link: '#', + link: '#', // TODO: trocar rota }, { Icon: PaperIcon, - title: 'Support Rules', + title: intl.formatMessage({ + id: 'sidebar_support_rules.title', + }), description: intl.formatMessage({ id: 'sidebar_support_rules.description', }), diff --git a/src/utils/typings/types.ts b/src/utils/typings/types.ts index b64a5723..7c4d34d6 100644 --- a/src/utils/typings/types.ts +++ b/src/utils/typings/types.ts @@ -2,7 +2,7 @@ import { NextPage } from 'next' import { IconProps } from '@vtex/brand-ui' import { ActionType } from 'components/announcement-card/functions' -import { UpdatesTitle, ResourceTitle, SupportTitle } from './unionTypes' +import { UpdatesTitle, ResourceTitle } from './unionTypes' // eslint-disable-next-line @typescript-eslint/ban-types export type Page

= NextPage & { @@ -32,10 +32,6 @@ export interface UpdatesDataElement extends DataElement { title: UpdatesTitle } -export interface SupportElement extends DataElement { - title: SupportTitle -} - export type UpdateElement = { slug: string title: string diff --git a/src/utils/typings/unionTypes.ts b/src/utils/typings/unionTypes.ts index a8a95019..356291fe 100644 --- a/src/utils/typings/unionTypes.ts +++ b/src/utils/typings/unionTypes.ts @@ -7,12 +7,6 @@ export type DocumentationTitle = export type UpdatesTitle = 'Announcement' | 'FAQ' -export type SupportTitle = - | 'Known Issues' - | 'Support Rules' - | 'Health Check' - | 'Status' - export type SlugPrefix = 'tutorial' export type ResourceTitle = From 8b97e7acae8394b0805c6e8bfc3dd5dc6da4239a Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Wed, 3 Jan 2024 12:26:40 -0300 Subject: [PATCH 06/19] feat: adds info icon --- src/components/icons/info-icon.tsx | 35 ++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/components/icons/info-icon.tsx diff --git a/src/components/icons/info-icon.tsx b/src/components/icons/info-icon.tsx new file mode 100644 index 00000000..88be04ce --- /dev/null +++ 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) => ( + + + + + +) + +export default InfoIcon From b5cfad84e124f8e51882827cb1d2d470bfede3d5 Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Wed, 3 Jan 2024 15:17:22 -0300 Subject: [PATCH 07/19] feat: adds new icons to sidebar --- src/components/layout.tsx | 12 +++++++-- src/messages/en.json | 6 ++++- src/messages/es.json | 6 ++++- src/messages/pt.json | 6 ++++- src/utils/constants.ts | 45 ++++++++++++++++++++++++++++----- src/utils/typings/types.ts | 6 ++++- src/utils/typings/unionTypes.ts | 4 ++- 7 files changed, 72 insertions(+), 13 deletions(-) diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 9291c532..518277b8 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -16,7 +16,11 @@ import { LibraryContextProvider, Sidebar, } from '@vtexdocs/components' -import { documentationData, updatesData } from 'utils/constants' +import { + documentationData, + knownIssuesData, + updatesData, +} from 'utils/constants' import { useIntl } from 'react-intl' interface Props { @@ -51,7 +55,11 @@ export default function Layout({ return ( { link: '/docs/tutorial', }, { + // Checar com thaylly se deve ficar no mesmo lugar Icon: DeveloperPortalIcon, title: intl.formatMessage({ id: 'documentation_developers_portal.title', @@ -68,14 +70,45 @@ export const documentationData = (intl: IntlShape) => { export const updatesData = (intl: IntlShape) => { const data: UpdatesDataElement[] = [ { - Icon: AnnouncementIcon, - title: 'News', + Icon: MegaphoneIcon, + title: 'Announcement', + description: intl.formatMessage({ + id: 'updates_announcements_notes.description', // TODO: Adicionar devida descricao + }), + link: '/updates/announcements', //TODO: verificar rota + }, + { + Icon: InfoIcon, + title: 'FAQ', + description: intl.formatMessage({ + id: 'updates_info_notes.description', //TODO: Adicionar devida descricao + }), + link: '/updates/announcements', //TODO: mudar rota + }, + ] + return data +} + +export const knownIssuesData = (intl: IntlShape) => { + const data: SupportElement[] = [ + { + Icon: WarningIcon, + title: 'Known Issues', + description: intl.formatMessage({ + id: 'sidebar_known_issues.description', + }), + link: '/updates/announcements', //TODO: Trocar rota + }, + { + Icon: PaperIcon, + title: 'Support Rules', description: intl.formatMessage({ - id: 'updates_release_notes.description', + id: 'sidebar_support_rules.description', }), - link: '/updates/announcements', + link: '/updates/announcements', //TODO: trocar rota }, ] + return data } diff --git a/src/utils/typings/types.ts b/src/utils/typings/types.ts index 7c4d34d6..b64a5723 100644 --- a/src/utils/typings/types.ts +++ b/src/utils/typings/types.ts @@ -2,7 +2,7 @@ import { NextPage } from 'next' import { IconProps } from '@vtex/brand-ui' import { ActionType } from 'components/announcement-card/functions' -import { UpdatesTitle, ResourceTitle } from './unionTypes' +import { UpdatesTitle, ResourceTitle, SupportTitle } from './unionTypes' // eslint-disable-next-line @typescript-eslint/ban-types export type Page

= NextPage & { @@ -32,6 +32,10 @@ export interface UpdatesDataElement extends DataElement { title: UpdatesTitle } +export interface SupportElement extends DataElement { + title: SupportTitle +} + export type UpdateElement = { slug: string title: string diff --git a/src/utils/typings/unionTypes.ts b/src/utils/typings/unionTypes.ts index 1243882e..2fcf9754 100644 --- a/src/utils/typings/unionTypes.ts +++ b/src/utils/typings/unionTypes.ts @@ -5,7 +5,9 @@ export type DocumentationTitle = | 'Tutorials & Solutions' | 'Developers Portal' -export type UpdatesTitle = 'News' | 'Documentation Updates' +export type UpdatesTitle = 'Announcement' | 'FAQ' + +export type SupportTitle = 'Known Issues' | 'Support Rules' export type SlugPrefix = 'tutorial' From 95bedcf242ba23118c40704dfefede5f24b46bf6 Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Mon, 8 Jan 2024 17:33:37 -0300 Subject: [PATCH 08/19] feat: adds sections and icons to menu --- src/components/documentation-card/index.tsx | 2 +- src/components/dropdown-menu/index.tsx | 18 ++++++- src/components/header/index.tsx | 2 + src/components/layout.tsx | 6 +++ src/messages/en.json | 8 ++-- src/messages/es.json | 8 ++-- src/messages/pt.json | 8 ++-- src/utils/constants.ts | 53 ++++++++++++++++++--- src/utils/typings/unionTypes.ts | 6 ++- 9 files changed, 92 insertions(+), 19 deletions(-) diff --git a/src/components/documentation-card/index.tsx b/src/components/documentation-card/index.tsx index 877c7046..9233d0f0 100644 --- a/src/components/documentation-card/index.tsx +++ b/src/components/documentation-card/index.tsx @@ -26,7 +26,7 @@ const DocumentationCard = ({ - + {title} diff --git a/src/components/dropdown-menu/index.tsx b/src/components/dropdown-menu/index.tsx index a5fbcd10..e3aaf6cc 100644 --- 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 { + documentationData, + menuSupportData, + updatesData, +} from 'utils/constants' import { useIntl } from 'react-intl' import styles from './styles' @@ -23,6 +27,18 @@ const DropdownMenu = () => { /> ))} + + {menuSupportData(intl).map((card) => ( + + ))} + { + {' '} + {/*TODO: mudar data-cy no teste */} diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 518277b8..e1811e00 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -19,6 +19,7 @@ import { import { documentationData, knownIssuesData, + menuSupportData, updatesData, } from 'utils/constants' import { useIntl } from 'react-intl' @@ -60,6 +61,11 @@ export default function Layout({ knownIssuesData(intl), updatesData(intl), ]} + hamburguerMenuSections={[ + documentationData(intl), + menuSupportData(intl), + updatesData(intl), + ]} sectionSelected={sectionSelected ?? ''} fallback={sidebarfallback} isPreview={isPreview} diff --git a/src/messages/en.json b/src/messages/en.json index 0a47105f..1259dd57 100644 --- 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?", @@ -116,6 +116,8 @@ "announcement_bar.button": "Fill in our survey! It takes less than 5 minutes.", "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.", - "updates_info_notes.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut." + "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." } diff --git a/src/messages/es.json b/src/messages/es.json index 5bbacc01..b1b8be76 100644 --- a/src/messages/es.json +++ b/src/messages/es.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": "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?", @@ -116,6 +116,8 @@ "announcement_bar.button": "¡Complete nuestra encuesta! Toma menos de 5 minutos.", "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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.", - "updates_info_notes.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut." + "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." } diff --git a/src/messages/pt.json b/src/messages/pt.json index aa1d848c..3dd2be37 100644 --- a/src/messages/pt.json +++ b/src/messages/pt.json @@ -57,7 +57,7 @@ "landing_page_footer_community.message": "Comunidade", "landing_page_footer_feedback.message": "Feedback", "landing_page_header_feedback.message": "Feedback", - "landing_page_header_docs.message": "Documentação", + "landing_page_header_docs.message": "Menu", "search_input.placeholder": "Pesquise no Help Center", "search_input.empty": "No results found. Try different search terms.", "feedback_section.question": "Isso foi útil?", @@ -116,6 +116,8 @@ "announcement_bar.button": "Participe de nossa pesquisa! Leva menos de 5 minutos.", "sidebar_known_issues.description": "Acesse conteúdo e encontre soluções para todas as suas dúvidas sobre a plataforma.", "sidebar_support_rules.description": "Veja detalhes dos planos de suporte disponíveis para cada plano comercial.", - "updates_announcements_notes.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.", - "updates_info_notes.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut." + "updates_announcements_notes.description": "Fique por dentro das principais notícias da VTEX.", + "updates_info_notes.description": "Encontre respostas para suas principais dúvidas de forma rápida e prática.", + "menu_health_check.description": "Verifique o status detalhado em tempo real.", + "menu_status.description": "Acompanhe o registro do histórico de plataforma." } diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 512aeb5c..826c7558 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -69,6 +69,14 @@ export const documentationData = (intl: IntlShape) => { export const updatesData = (intl: IntlShape) => { const data: UpdatesDataElement[] = [ + { + Icon: InfoIcon, + title: 'FAQ', + description: intl.formatMessage({ + id: 'updates_info_notes.description', //TODO: Adicionar devida descricao + }), + link: '/updates/announcements', //TODO: mudar rota + }, { Icon: MegaphoneIcon, title: 'Announcement', @@ -77,19 +85,34 @@ export const updatesData = (intl: IntlShape) => { }), link: '/updates/announcements', //TODO: verificar rota }, + ] + return data +} + +export const knownIssuesData = (intl: IntlShape) => { + const data: SupportElement[] = [ { - Icon: InfoIcon, - title: 'FAQ', + Icon: WarningIcon, + title: 'Known Issues', description: intl.formatMessage({ - id: 'updates_info_notes.description', //TODO: Adicionar devida descricao + id: 'sidebar_known_issues.description', }), - link: '/updates/announcements', //TODO: mudar rota + link: '/updates/announcements', //TODO: Trocar rota + }, + { + Icon: PaperIcon, + title: 'Support Rules', + description: intl.formatMessage({ + id: 'sidebar_support_rules.description', + }), + link: '/updates/announcements', //TODO: trocar rota }, ] + return data } -export const knownIssuesData = (intl: IntlShape) => { +export const menuSupportData = (intl: IntlShape) => { const data: SupportElement[] = [ { Icon: WarningIcon, @@ -97,7 +120,23 @@ export const knownIssuesData = (intl: IntlShape) => { description: intl.formatMessage({ id: 'sidebar_known_issues.description', }), - link: '/updates/announcements', //TODO: Trocar rota + link: '#', //TODO: Trocar rota + }, + { + Icon: GraphIcon, + title: 'Status', + description: intl.formatMessage({ + id: 'menu_status.description', + }), + link: '#', + }, + { + Icon: SignalIcon, + title: 'Health Check', + description: intl.formatMessage({ + id: 'menu_health_check.description', + }), + link: '#', }, { Icon: PaperIcon, @@ -105,7 +144,7 @@ export const knownIssuesData = (intl: IntlShape) => { description: intl.formatMessage({ id: 'sidebar_support_rules.description', }), - link: '/updates/announcements', //TODO: trocar rota + link: '#', //TODO: trocar rota }, ] diff --git a/src/utils/typings/unionTypes.ts b/src/utils/typings/unionTypes.ts index 2fcf9754..a8a95019 100644 --- a/src/utils/typings/unionTypes.ts +++ b/src/utils/typings/unionTypes.ts @@ -7,7 +7,11 @@ export type DocumentationTitle = export type UpdatesTitle = 'Announcement' | 'FAQ' -export type SupportTitle = 'Known Issues' | 'Support Rules' +export type SupportTitle = + | 'Known Issues' + | 'Support Rules' + | 'Health Check' + | 'Status' export type SlugPrefix = 'tutorial' From 44cce817d4432ebf20bffe9fa255ced0c8b1648f Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Mon, 8 Jan 2024 17:57:09 -0300 Subject: [PATCH 09/19] feat: adds menu documentation section --- src/components/dropdown-menu/index.tsx | 4 ++-- src/utils/constants.ts | 27 +++++++++++++++++++++++++- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/components/dropdown-menu/index.tsx b/src/components/dropdown-menu/index.tsx index e3aaf6cc..94e1e44d 100644 --- a/src/components/dropdown-menu/index.tsx +++ b/src/components/dropdown-menu/index.tsx @@ -2,7 +2,7 @@ import { Box } from '@vtex/brand-ui' import DocumentationCard from 'components/documentation-card' import { - documentationData, + menuDocumentationData, menuSupportData, updatesData, } from 'utils/constants' @@ -19,7 +19,7 @@ const DropdownMenu = () => { sx={styles.documentationContainer} data-cy="dropdown-menu-first-section" > - {documentationData(intl).map((card) => ( + {menuDocumentationData(intl).map((card) => ( { + const data: DocDataElement[] = [ + { + Icon: StartHereIcon, + title: intl.formatMessage({ + id: 'documentation_start_here.title', + }), + description: intl.formatMessage({ + id: 'documentation_start_here.description', + }), + link: '/docs/tracks', + }, + { + Icon: TutorialsIcon, + title: intl.formatMessage({ + id: 'documentation_tutorials.title', + }), + description: intl.formatMessage({ + id: 'documentation_tutorials.description', + }), + link: '/docs/tutorial', + }, + ] + return data +} + +export const menuDocumentationData = (intl: IntlShape) => { const data: DocDataElement[] = [ { Icon: StartHereIcon, @@ -52,7 +78,6 @@ export const documentationData = (intl: IntlShape) => { link: '/docs/tutorial', }, { - // Checar com thaylly se deve ficar no mesmo lugar Icon: DeveloperPortalIcon, title: intl.formatMessage({ id: 'documentation_developers_portal.title', From cf0583b09ba8db6b831214eb74c2e477cf20eadf Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Tue, 9 Jan 2024 16:50:35 -0300 Subject: [PATCH 10/19] fix: adds translations to icons titles --- src/messages/en.json | 7 +++++- src/messages/es.json | 9 +++++-- src/messages/pt.json | 9 +++++-- src/utils/constants.ts | 44 +++++++++++++++++++++------------ src/utils/typings/types.ts | 6 +---- src/utils/typings/unionTypes.ts | 6 ----- 6 files changed, 49 insertions(+), 32 deletions(-) diff --git a/src/messages/en.json b/src/messages/en.json index 1259dd57..3ba84078 100644 --- a/src/messages/en.json +++ b/src/messages/en.json @@ -119,5 +119,10 @@ "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." + "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": "Announcement" } diff --git a/src/messages/es.json b/src/messages/es.json index b1b8be76..2e811b73 100644 --- 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", @@ -119,5 +119,10 @@ "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." + "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" } diff --git a/src/messages/pt.json b/src/messages/pt.json index 3dd2be37..eb75dd02 100644 --- a/src/messages/pt.json +++ b/src/messages/pt.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 do Desenvolvedor", "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": "Perguntas frequentes", "landing_page_faq.description": "Encontre respostas para dúvidas mais frequentes de forma rápida e prática.", @@ -119,5 +119,10 @@ "updates_announcements_notes.description": "Fique por dentro das principais notícias da VTEX.", "updates_info_notes.description": "Encontre respostas para suas principais dúvidas de forma rápida e prática.", "menu_health_check.description": "Verifique o status detalhado em tempo real.", - "menu_status.description": "Acompanhe o registro do histórico de plataforma." + "menu_status.description": "Acompanhe o registro do histórico de plataforma.", + "sidebar_support_rules.title": "Diretivas de suporte", + "sidebar_known_issues.title": "Problemas Conhecidos", + "menu_status.title": "Status", + "menu_health_check.title": "Verificação de Integridade", + "updates_announcements_notes.title": "Comunicados" } diff --git a/src/utils/constants.ts b/src/utils/constants.ts index bdca14f8..b03a77f9 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -8,11 +8,9 @@ import { import { DocDataElement, - UpdatesDataElement, WhatsNextDataElement, ResourceDataElement, FaqDataElement, - SupportElement, } from './typings/types' import { IntlShape } from 'react-intl' import libraryConfig from './libraryConfig' @@ -93,20 +91,22 @@ export const menuDocumentationData = (intl: IntlShape) => { } export const updatesData = (intl: IntlShape) => { - const data: UpdatesDataElement[] = [ + const data: DocDataElement[] = [ { Icon: InfoIcon, title: 'FAQ', description: intl.formatMessage({ - id: 'updates_info_notes.description', //TODO: Adicionar devida descricao + id: 'updates_info_notes.description', }), link: '/updates/announcements', //TODO: mudar rota }, { Icon: MegaphoneIcon, - title: 'Announcement', + title: intl.formatMessage({ + id: 'updates_announcements_notes.title', + }), description: intl.formatMessage({ - id: 'updates_announcements_notes.description', // TODO: Adicionar devida descricao + id: 'updates_announcements_notes.description', }), link: '/updates/announcements', //TODO: verificar rota }, @@ -115,10 +115,12 @@ export const updatesData = (intl: IntlShape) => { } export const knownIssuesData = (intl: IntlShape) => { - const data: SupportElement[] = [ + const data: DocDataElement[] = [ { Icon: WarningIcon, - title: 'Known Issues', + title: intl.formatMessage({ + id: 'sidebar_known_issues.title', + }), description: intl.formatMessage({ id: 'sidebar_known_issues.description', }), @@ -126,7 +128,9 @@ export const knownIssuesData = (intl: IntlShape) => { }, { Icon: PaperIcon, - title: 'Support Rules', + title: intl.formatMessage({ + id: 'sidebar_support_rules.title', + }), description: intl.formatMessage({ id: 'sidebar_support_rules.description', }), @@ -138,10 +142,12 @@ export const knownIssuesData = (intl: IntlShape) => { } export const menuSupportData = (intl: IntlShape) => { - const data: SupportElement[] = [ + const data: DocDataElement[] = [ { Icon: WarningIcon, - title: 'Known Issues', + title: intl.formatMessage({ + id: 'sidebar_known_issues.title', + }), description: intl.formatMessage({ id: 'sidebar_known_issues.description', }), @@ -149,23 +155,29 @@ export const menuSupportData = (intl: IntlShape) => { }, { Icon: GraphIcon, - title: 'Status', + title: intl.formatMessage({ + id: 'menu_status.title', + }), description: intl.formatMessage({ id: 'menu_status.description', }), - link: '#', + link: '#', // TODO: trocar rota }, { Icon: SignalIcon, - title: 'Health Check', + title: intl.formatMessage({ + id: 'menu_health_check.title', + }), description: intl.formatMessage({ id: 'menu_health_check.description', }), - link: '#', + link: '#', // TODO: trocar rota }, { Icon: PaperIcon, - title: 'Support Rules', + title: intl.formatMessage({ + id: 'sidebar_support_rules.title', + }), description: intl.formatMessage({ id: 'sidebar_support_rules.description', }), diff --git a/src/utils/typings/types.ts b/src/utils/typings/types.ts index b64a5723..7c4d34d6 100644 --- a/src/utils/typings/types.ts +++ b/src/utils/typings/types.ts @@ -2,7 +2,7 @@ import { NextPage } from 'next' import { IconProps } from '@vtex/brand-ui' import { ActionType } from 'components/announcement-card/functions' -import { UpdatesTitle, ResourceTitle, SupportTitle } from './unionTypes' +import { UpdatesTitle, ResourceTitle } from './unionTypes' // eslint-disable-next-line @typescript-eslint/ban-types export type Page

= NextPage & { @@ -32,10 +32,6 @@ export interface UpdatesDataElement extends DataElement { title: UpdatesTitle } -export interface SupportElement extends DataElement { - title: SupportTitle -} - export type UpdateElement = { slug: string title: string diff --git a/src/utils/typings/unionTypes.ts b/src/utils/typings/unionTypes.ts index a8a95019..356291fe 100644 --- a/src/utils/typings/unionTypes.ts +++ b/src/utils/typings/unionTypes.ts @@ -7,12 +7,6 @@ export type DocumentationTitle = export type UpdatesTitle = 'Announcement' | 'FAQ' -export type SupportTitle = - | 'Known Issues' - | 'Support Rules' - | 'Health Check' - | 'Status' - export type SlugPrefix = 'tutorial' export type ResourceTitle = From 214238cef10432bb94f9507464d8b4f80d37c4a3 Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Thu, 11 Jan 2024 19:38:24 -0300 Subject: [PATCH 11/19] feat: locale switcher visible in all breakpoints --- src/components/header/index.tsx | 4 +++- src/components/header/styles.ts | 15 +++++++++++++-- src/components/locale-switcher/styles.ts | 10 +++++----- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index ce6b19e0..8681fd0f 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -151,7 +151,9 @@ const Header = () => { - + + + diff --git a/src/components/header/styles.ts b/src/components/header/styles.ts index ece3593e..1f1be449 100644 --- a/src/components/header/styles.ts +++ b/src/components/header/styles.ts @@ -51,8 +51,8 @@ const logoSize: SxStyleProp = { } const rightLinks: SxStyleProp = { - display: ['none', 'none', 'none', 'flex !important'], - width: 'auto', + display: ['flex !important'], + width: '100%', height: '100%', } @@ -70,6 +70,7 @@ const rightLinksItem: SxStyleProp = { stroke: '#C81E51', }, }, + visibility: ['collapse', 'collapse', 'collapse', 'collapse', 'visible'], } const dropdownContainer: SxStyleProp = { @@ -77,6 +78,7 @@ const dropdownContainer: SxStyleProp = { justifyContent: 'flex-end', height: 'calc(100% + 1px)', cursor: 'pointer', + visibility: ['collapse', 'collapse', 'collapse', 'visible'], } const dropdownButton: (active: boolean) => SxStyleProp = (active: boolean) => ({ @@ -159,6 +161,14 @@ const arrowIconActive: SxStyleProp = { color: '#D71D55', } +const localeSwitcherContainer: SxStyleProp = { + display: 'flex', + visibility: 'visible', + ml: [0, 0, 0, 0, '40px'], + pr: ['100px', 0], + zIndex: 1, +} + export default { menuContainer, cardContainer, @@ -181,4 +191,5 @@ export default { innerCardContainer, arrowIcon, arrowIconActive, + localeSwitcherContainer, } diff --git a/src/components/locale-switcher/styles.ts b/src/components/locale-switcher/styles.ts index c82f37ac..0968f811 100644 --- a/src/components/locale-switcher/styles.ts +++ b/src/components/locale-switcher/styles.ts @@ -2,12 +2,12 @@ import { SxStyleProp } from '@vtex/brand-ui' const localeLabel: SxStyleProp = { pl: 2, - display: ['block', 'none', 'none', 'none', 'block'], + display: ['block'], } const optionContainer: SxStyleProp = { position: 'absolute', - display: ['none', 'none', 'none', 'flex'], + display: ['flex'], flexDirection: 'column', width: '11rem', top: 0, @@ -30,14 +30,14 @@ 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: ['none', 'none', 'none', '1px solid #e7e9ed'], + // ml: '40px', }, } From c1b45da961b1d9e38fbf2a36ef3b40ca2a1bb70a Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Mon, 15 Jan 2024 15:45:21 -0300 Subject: [PATCH 12/19] fix: moves locale switcher do header end --- src/components/header/index.tsx | 4 +++- src/components/header/styles.ts | 11 +++++++++-- src/components/locale-switcher/index.tsx | 2 +- src/components/locale-switcher/styles.ts | 2 +- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index 8681fd0f..2e804945 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -151,11 +151,13 @@ const Header = () => { + + + - ) diff --git a/src/components/header/styles.ts b/src/components/header/styles.ts index 1f1be449..5309aa81 100644 --- a/src/components/header/styles.ts +++ b/src/components/header/styles.ts @@ -57,6 +57,13 @@ const rightLinks: SxStyleProp = { } 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', @@ -70,7 +77,6 @@ const rightLinksItem: SxStyleProp = { stroke: '#C81E51', }, }, - visibility: ['collapse', 'collapse', 'collapse', 'collapse', 'visible'], } const dropdownContainer: SxStyleProp = { @@ -165,8 +171,9 @@ const localeSwitcherContainer: SxStyleProp = { display: 'flex', visibility: 'visible', ml: [0, 0, 0, 0, '40px'], - pr: ['100px', 0], + pr: ['0px', 0], zIndex: 1, + justifyContent: 'center', } export default { diff --git a/src/components/locale-switcher/index.tsx b/src/components/locale-switcher/index.tsx index 84b19a16..eedd1968 100644 --- a/src/components/locale-switcher/index.tsx +++ b/src/components/locale-switcher/index.tsx @@ -52,7 +52,7 @@ export default function LocaleSwitcher() { - + {router.locale?.toUpperCase()} diff --git a/src/components/locale-switcher/styles.ts b/src/components/locale-switcher/styles.ts index 0968f811..db8a9850 100644 --- a/src/components/locale-switcher/styles.ts +++ b/src/components/locale-switcher/styles.ts @@ -36,7 +36,7 @@ const localeSwitcher: SxStyleProp = { }, height: '100%', justifyContent: 'flex-start', - borderLeft: ['none', 'none', 'none', '1px solid #e7e9ed'], + borderLeft: ['1px solid #e7e9ed'], // ml: '40px', }, } From 68eca78ab09823d4f424a064f490824aef014475 Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Mon, 15 Jan 2024 17:34:32 -0300 Subject: [PATCH 13/19] feat: swap position of hamburguer menu with locale switcher --- src/components/header/index.tsx | 6 +++--- src/components/header/styles.ts | 1 + src/messages/en.json | 2 +- src/utils/constants.ts | 17 +++++++++++++++++ src/utils/typings/types.ts | 5 +++++ 5 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index 2e804945..8b743370 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -151,9 +151,9 @@ const Header = () => { - - - + + + diff --git a/src/components/header/styles.ts b/src/components/header/styles.ts index 5309aa81..27f2498d 100644 --- a/src/components/header/styles.ts +++ b/src/components/header/styles.ts @@ -54,6 +54,7 @@ const rightLinks: SxStyleProp = { display: ['flex !important'], width: '100%', height: '100%', + textTransform: 'none', } const rightLinksItem: SxStyleProp = { diff --git a/src/messages/en.json b/src/messages/en.json index 3ba84078..f2e0436c 100644 --- a/src/messages/en.json +++ b/src/messages/en.json @@ -124,5 +124,5 @@ "sidebar_known_issues.title": "Known Issues", "menu_status.title": "Status", "menu_health_check.title": "Health Check", - "updates_announcements_notes.title": "Announcement" + "updates_announcements_notes.title": "Announcements" } diff --git a/src/utils/constants.ts b/src/utils/constants.ts index b03a77f9..0f5f48b8 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -30,6 +30,7 @@ export const messages = getMessages() export const documentationData = (intl: IntlShape) => { const data: DocDataElement[] = [ { + id: 'Start here', Icon: StartHereIcon, title: intl.formatMessage({ id: 'documentation_start_here.title', @@ -40,6 +41,7 @@ export const documentationData = (intl: IntlShape) => { link: '/docs/tracks', }, { + id: 'Tutorials & Solutions', Icon: TutorialsIcon, title: intl.formatMessage({ id: 'documentation_tutorials.title', @@ -56,6 +58,7 @@ export const documentationData = (intl: IntlShape) => { export const menuDocumentationData = (intl: IntlShape) => { const data: DocDataElement[] = [ { + id: 'Start here', Icon: StartHereIcon, title: intl.formatMessage({ id: 'documentation_start_here.title', @@ -66,6 +69,7 @@ export const menuDocumentationData = (intl: IntlShape) => { link: '/docs/tracks', }, { + id: 'Tutorials & Solutions', Icon: TutorialsIcon, title: intl.formatMessage({ id: 'documentation_tutorials.title', @@ -76,6 +80,7 @@ export const menuDocumentationData = (intl: IntlShape) => { link: '/docs/tutorial', }, { + id: 'Developers Portal', Icon: DeveloperPortalIcon, title: intl.formatMessage({ id: 'documentation_developers_portal.title', @@ -93,6 +98,7 @@ export const menuDocumentationData = (intl: IntlShape) => { export const updatesData = (intl: IntlShape) => { const data: DocDataElement[] = [ { + id: 'FAQ', Icon: InfoIcon, title: 'FAQ', description: intl.formatMessage({ @@ -101,6 +107,7 @@ export const updatesData = (intl: IntlShape) => { link: '/updates/announcements', //TODO: mudar rota }, { + id: 'Announcements', Icon: MegaphoneIcon, title: intl.formatMessage({ id: 'updates_announcements_notes.title', @@ -117,6 +124,7 @@ export const updatesData = (intl: IntlShape) => { export const knownIssuesData = (intl: IntlShape) => { const data: DocDataElement[] = [ { + id: 'Known Issues', Icon: WarningIcon, title: intl.formatMessage({ id: 'sidebar_known_issues.title', @@ -127,6 +135,7 @@ export const knownIssuesData = (intl: IntlShape) => { link: '/updates/announcements', //TODO: Trocar rota }, { + id: 'Support Rules', Icon: PaperIcon, title: intl.formatMessage({ id: 'sidebar_support_rules.title', @@ -144,6 +153,7 @@ export const knownIssuesData = (intl: IntlShape) => { export const menuSupportData = (intl: IntlShape) => { const data: DocDataElement[] = [ { + id: 'Known Issues', Icon: WarningIcon, title: intl.formatMessage({ id: 'sidebar_known_issues.title', @@ -154,6 +164,7 @@ export const menuSupportData = (intl: IntlShape) => { link: '#', //TODO: Trocar rota }, { + id: 'Status', Icon: GraphIcon, title: intl.formatMessage({ id: 'menu_status.title', @@ -164,6 +175,7 @@ export const menuSupportData = (intl: IntlShape) => { link: '#', // TODO: trocar rota }, { + id: 'Health Check', Icon: SignalIcon, title: intl.formatMessage({ id: 'menu_health_check.title', @@ -174,6 +186,7 @@ export const menuSupportData = (intl: IntlShape) => { link: '#', // TODO: trocar rota }, { + id: 'Support Rules', Icon: PaperIcon, title: intl.formatMessage({ id: 'sidebar_support_rules.title', @@ -249,6 +262,7 @@ export const faqData = (intl: IntlShape) => { export const supportData = (intl: IntlShape) => { const data: DocDataElement[] = [ { + id: 'Known Issues', Icon: WarningIcon, title: intl.formatMessage({ id: 'support_known_issues.title', @@ -259,6 +273,7 @@ export const supportData = (intl: IntlShape) => { link: '/known-issues', }, { + id: 'Support Plans', Icon: PaperIcon, title: intl.formatMessage({ id: 'support_plans.title', @@ -269,6 +284,7 @@ export const supportData = (intl: IntlShape) => { link: '/support-plans', }, { + id: 'Health Check', Icon: SignalIcon, title: intl.formatMessage({ id: 'support_health_check.title', @@ -280,6 +296,7 @@ export const supportData = (intl: IntlShape) => { link: 'http://healthcheck.vtex.com/', }, { + id: 'Status', Icon: GraphIcon, title: intl.formatMessage({ id: 'support_status.title', diff --git a/src/utils/typings/types.ts b/src/utils/typings/types.ts index 7c4d34d6..b0b87276 100644 --- a/src/utils/typings/types.ts +++ b/src/utils/typings/types.ts @@ -19,6 +19,7 @@ export type DataElement = { description: string } export interface DocDataElement extends DataElement { + id: string title: string isExternalLink?: boolean } @@ -32,6 +33,10 @@ export interface UpdatesDataElement extends DataElement { title: UpdatesTitle } +export interface ExternalLinkDataElement extends DataElement { + title: string +} + export type UpdateElement = { slug: string title: string From 891afced089e3ce5f1303b2603eba92f879c547d Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Thu, 18 Jan 2024 13:08:14 -0300 Subject: [PATCH 14/19] feat: removing text and caret from locale selector for mobile widths --- src/components/header/index.tsx | 13 ++++++------ src/components/header/styles.ts | 26 +++++++++++++++++++++++- src/components/locale-switcher/index.tsx | 8 ++++++-- src/components/locale-switcher/styles.ts | 12 ++++++++++- 4 files changed, 49 insertions(+), 10 deletions(-) diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index 8b743370..43a1954d 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -151,12 +151,13 @@ const Header = () => { - - - - - - + + + + + + + diff --git a/src/components/header/styles.ts b/src/components/header/styles.ts index 27f2498d..607dc265 100644 --- a/src/components/header/styles.ts +++ b/src/components/header/styles.ts @@ -55,6 +55,7 @@ const rightLinks: SxStyleProp = { width: '100%', height: '100%', textTransform: 'none', + alignItems: 'center', } const rightLinksItem: SxStyleProp = { @@ -81,6 +82,7 @@ const rightLinksItem: SxStyleProp = { } const dropdownContainer: SxStyleProp = { + display: ['none', 'none', 'none', 'flex'], textTransform: 'none', justifyContent: 'flex-end', height: 'calc(100% + 1px)', @@ -171,14 +173,36 @@ const arrowIconActive: SxStyleProp = { const localeSwitcherContainer: SxStyleProp = { display: 'flex', visibility: 'visible', - ml: [0, 0, 0, 0, '40px'], + ml: [0, 0, 0, 0, 0], pr: ['0px', 0], zIndex: 1, justifyContent: 'center', + ' & button': { + borderLeft: ['none'], + }, +} + +const containerHamburguerLocale: SxStyleProp = { + display: 'flex', + padding: '8px', + alignItems: 'center', + height: '100%', + borderLeft: ['none', 'none', 'none', '1px solid #e7e9ed'], + marginLeft: ['0', '0', '0', '32px'], +} + +const splitter: SxStyleProp = { + display: ['block', 'block', 'block', 'none'], + width: '1px', + height: '36px', + background: '#E7E9EE', + marginRight: '20px', } export default { + splitter, menuContainer, + containerHamburguerLocale, cardContainer, sideMenuContainer, logoSize, diff --git a/src/components/locale-switcher/index.tsx b/src/components/locale-switcher/index.tsx index eedd1968..c2a2b434 100644 --- a/src/components/locale-switcher/index.tsx +++ b/src/components/locale-switcher/index.tsx @@ -52,10 +52,14 @@ export default function LocaleSwitcher() { - + {router.locale?.toUpperCase()} - + diff --git a/src/components/locale-switcher/styles.ts b/src/components/locale-switcher/styles.ts index db8a9850..d1bbb9e0 100644 --- a/src/components/locale-switcher/styles.ts +++ b/src/components/locale-switcher/styles.ts @@ -2,7 +2,11 @@ import { SxStyleProp } from '@vtex/brand-ui' const localeLabel: SxStyleProp = { pl: 2, - display: ['block'], + display: ['none', 'none', 'none', 'block'], +} + +const localeCaret: SxStyleProp = { + display: ['none', 'none', 'none', 'block'], } const optionContainer: SxStyleProp = { @@ -41,9 +45,15 @@ const localeSwitcher: SxStyleProp = { }, } +const iconGlobe: SxStyleProp = { + mb: ['0px', '0px', '0px', '3px'], +} + export default { localeLabel, + localeCaret, optionContainer, localeSwitcher, baseLocaleSwitcher, + iconGlobe, } From ebdd5f144c1fba9f9b0339dd1387bc0478aefd48 Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Thu, 18 Jan 2024 14:06:13 -0300 Subject: [PATCH 15/19] chore: update components dependency --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 07980786..15894bbf 100644 --- 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.2.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", From 71c1f8eaa23028f9495c8f7e6dd111b235daa48e Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Thu, 18 Jan 2024 14:20:20 -0300 Subject: [PATCH 16/19] fix: removing left border of locale switch --- src/components/header/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/header/styles.ts b/src/components/header/styles.ts index 607dc265..ca947382 100644 --- a/src/components/header/styles.ts +++ b/src/components/header/styles.ts @@ -178,7 +178,7 @@ const localeSwitcherContainer: SxStyleProp = { zIndex: 1, justifyContent: 'center', ' & button': { - borderLeft: ['none'], + borderLeft: 'none !important', }, } From b8c2333c5d2154bae2f870cb55a6782aa1bc515f Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Fri, 19 Jan 2024 11:17:14 -0300 Subject: [PATCH 17/19] feat: locale switcher and hamburguer menu container adjustments --- src/components/header/styles.ts | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/header/styles.ts b/src/components/header/styles.ts index ca947382..1cbc6e87 100644 --- a/src/components/header/styles.ts +++ b/src/components/header/styles.ts @@ -82,12 +82,16 @@ const rightLinksItem: SxStyleProp = { } const dropdownContainer: SxStyleProp = { - display: ['none', 'none', 'none', 'flex'], + display: [ + 'none !important', + 'none !important', + 'none !important', + 'flex !important', + ], textTransform: 'none', justifyContent: 'flex-end', height: 'calc(100% + 1px)', cursor: 'pointer', - visibility: ['collapse', 'collapse', 'collapse', 'visible'], } const dropdownButton: (active: boolean) => SxStyleProp = (active: boolean) => ({ @@ -179,6 +183,7 @@ const localeSwitcherContainer: SxStyleProp = { justifyContent: 'center', ' & button': { borderLeft: 'none !important', + padding: '0px', }, } @@ -189,6 +194,16 @@ const containerHamburguerLocale: SxStyleProp = { 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 = { @@ -196,7 +211,6 @@ const splitter: SxStyleProp = { width: '1px', height: '36px', background: '#E7E9EE', - marginRight: '20px', } export default { From bc7359b66bcc44fe750600078e85a80c146a213c Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Fri, 19 Jan 2024 13:19:53 -0300 Subject: [PATCH 18/19] feat: adds feedback to menu --- src/components/layout.tsx | 2 ++ src/utils/constants.ts | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/src/components/layout.tsx b/src/components/layout.tsx index e1811e00..c9db67f7 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -18,6 +18,7 @@ import { } from '@vtexdocs/components' import { documentationData, + feedbackSectionData, knownIssuesData, menuSupportData, updatesData, @@ -65,6 +66,7 @@ export default function Layout({ documentationData(intl), menuSupportData(intl), updatesData(intl), + feedbackSectionData(intl), ]} sectionSelected={sectionSelected ?? ''} fallback={sidebarfallback} diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 0f5f48b8..96aefe91 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -4,6 +4,7 @@ import { getLearningCenterURL, getDeveloperPortalURL, getSupportURL, + getFeedbackURL, } from 'utils/get-url' import { @@ -23,6 +24,7 @@ import GraphIcon from 'components/icons/graph-icon' import SignalIcon from 'components/icons/signal-icon' import MegaphoneIcon from 'components/icons/megaphone-icon' import InfoIcon from 'components/icons/info-icon' +import LongArrowIcon from 'components/icons/long-arrow-icon' libraryConfig export const messages = getMessages() @@ -121,6 +123,22 @@ export const updatesData = (intl: IntlShape) => { return data } +export const feedbackSectionData = (intl: IntlShape) => { + const data: DocDataElement[] = [ + { + id: 'Feedback', + Icon: LongArrowIcon, + title: intl.formatMessage({ + id: 'landing_page_header_feedback.message', + }), + description: '', + link: getFeedbackURL(), + }, + ] + + return data +} + export const knownIssuesData = (intl: IntlShape) => { const data: DocDataElement[] = [ { From 952c30d95f6844a30d2898ad74515b855c811cda Mon Sep 17 00:00:00 2001 From: Pedro Vitor Date: Fri, 19 Jan 2024 13:36:34 -0300 Subject: [PATCH 19/19] feat: adds click color change to icon globe --- src/components/locale-switcher/index.tsx | 10 +++++++++- src/components/locale-switcher/styles.ts | 11 +++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/components/locale-switcher/index.tsx b/src/components/locale-switcher/index.tsx index c2a2b434..270fd2f5 100644 --- a/src/components/locale-switcher/index.tsx +++ b/src/components/locale-switcher/index.tsx @@ -48,11 +48,19 @@ export default function LocaleSwitcher() { ) } + const renderGlobe = (isDiscolosureVisible: boolean) => { + if (isDiscolosureVisible) { + return + } + + return + } + return ( - + {renderGlobe(disclosure.visible)} {router.locale?.toUpperCase()}