Merge branch 'main' into feat/codeblock-copy-button

vtexdocs · Oct 4, 2024 · ed65697 · ed65697
2 parents da5fbf5 + 8dd010e
commit ed65697
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 87 deletions.
diff --git a/src/components/TimeToRead/index.tsx b/src/components/TimeToRead/index.tsx
@@ -0,0 +1,33 @@
+import { Text } from '@vtex/brand-ui'
+import { useIntl } from 'react-intl'
+
+import readingTime from 'styles/documentation-page'
+
+interface props {
+  minutes: string
+}
+
+const TimeToRead = ({ minutes }: props) => {
+  function shouldTimeDisplay(minutes: string): boolean {
+    return parseInt(minutes) >= 5
+  }
+
+  const intl = useIntl()
+
+  if (shouldTimeDisplay(minutes)) {
+    return (
+      <Text sx={readingTime}>
+        {intl.formatMessage(
+          {
+            id: 'documentation_reading_time.text',
+            defaultMessage: '',
+          },
+          { minutes: minutes }
+        )}
+      </Text>
+    )
+  }
+  return null
+}
+
+export default TimeToRead
diff --git a/src/components/TimeToRead/styles.ts b/src/components/TimeToRead/styles.ts
@@ -0,0 +1,11 @@
+import { SxStyleProp } from '@vtex/brand-ui'
+
+const readingTime: SxStyleProp = {
+  color: '#A1AAB7',
+  fontSize: '16px',
+  lineHeight: '18px',
+}
+
+export default {
+  readingTime,
+}
diff --git a/src/components/breadcrumb/index.tsx b/src/components/breadcrumb/index.tsx
@@ -9,29 +9,20 @@ interface Props {
 const Breadcrumb = ({ breadcrumbList }: Props) => {
   return (
     <Flex sx={styles.breadcrumb}>
-      {breadcrumbList.map((item, idx) =>
-        item.type === 'category' ? (
-          <>
-            <Text>{item.name}</Text>
-            {idx < breadcrumbList.length - 1 ? (
-              <IconCaret direction="right" size={16} />
-            ) : (
-              ''
-            )}
-          </>
-        ) : (
-          <>
+      {breadcrumbList.map((item, idx) => (
+        <>
+          {item.type === 'markdown' ? (
             <Link sx={styles.breadcrumbItem} href={item.slug}>
               {item.name}
             </Link>
-            {idx < breadcrumbList.length - 1 ? (
-              <IconCaret direction="right" size={16} />
-            ) : (
-              ''
-            )}
-          </>
-        )
-      )}
+          ) : (
+            <Text>{item.name}</Text>
+          )}
+          {idx < breadcrumbList.length - 1 ? (
+            <IconCaret direction="right" size={16} />
+          ) : null}
+        </>
+      ))}
     </Flex>
   )
 }

diff --git a/src/components/documentation-section-card/styles.ts b/src/components/documentation-section-card/styles.ts
@@ -94,7 +94,7 @@ const quickStartedContainer: SxStyleProp = {
     transition: 'all 0.3s ease-out',
 
     '.learnMoreText': {
-      color: '#000711',
+      color: '#c81e51',
       transition: 'all 0.3s ease-out',
     },
   },
@@ -104,7 +104,8 @@ const learnMoreText: SxStyleProp = {
   fontSize: '16px',
   lineHeight: '22px',
   fontWeight: '400',
-  color: 'muted.0',
+  color: '#e31c58',
+  textDecoration: 'underline solid 1px',
 }
 
 const accessPortal: SxStyleProp = {

diff --git a/src/components/support-section-card/styles.ts b/src/components/support-section-card/styles.ts
@@ -96,7 +96,8 @@ const learnMoreText: SxStyleProp = {
   fontSize: '16px',
   lineHeight: '22px',
   fontWeight: '400',
-  color: 'muted.0',
+  color: '#e31c58',
+  textDecoration: 'underline solid 1px',
 }
 
 const accessPortal: SxStyleProp = {

diff --git a/src/components/tag/styles.ts b/src/components/tag/styles.ts
@@ -21,8 +21,8 @@ const statusColors: {
     | 'Gray']: SxStyleProp
 } = {
   Backlog: {
-    border: '1px solid #979797',
-    color: '#979797',
+    border: '1px solid #D3D3D3',
+    color: '#4A596B',
     background: '#E9E9E9',
   },
   Fixed: {
@@ -31,18 +31,18 @@ const statusColors: {
     background: '#DFF5DB',
   },
   Closed: {
-    border: '1px solid #2953B2',
+    border: '1px solid #A5C0FF',
     color: '#2953B2',
     background: '#DEE8FE',
   },
   Scheduled: {
-    border: '1px solid #FAB42B',
-    color: '#FAB42B',
+    border: '1px solid #FFD581',
+    color: '#D77809',
     background: '#FFF3DA',
   },
   'No fix': {
-    border: '1px solid #F83D24',
-    color: '#F83D24',
+    border: '1px solid #FAA397',
+    color: '#CB2610',
     background: '#FFDFDB',
   },
   Default: {

diff --git a/src/components/tutorial-markdown-render/index.tsx b/src/components/tutorial-markdown-render/index.tsx
@@ -16,6 +16,7 @@ import ArticlePagination from 'components/article-pagination'
 import Contributors from 'components/contributors'
 import { MDXRemoteSerializeResult } from 'next-mdx-remote'
 import { ContributorsType } from 'utils/getFileContributors'
+import TimeToRead from 'components/TimeToRead'
 
 interface Props {
   content: string
@@ -92,17 +93,11 @@ const TutorialMarkdownRender = (props: Props) => {
                     {props.serialized.frontmatter?.excerpt}
                   </Text>
                 </header>
-                <Text sx={styles.readingTime}>
-                  {intl.formatMessage(
-                    {
-                      id: 'documentation_reading_time.text',
-                      defaultMessage: '',
-                    },
-                    {
-                      minutes: props.serialized.frontmatter?.readingTime,
-                    }
-                  )}
-                </Text>
+                {props.serialized.frontmatter?.readingTime && (
+                  <TimeToRead
+                    minutes={props.serialized.frontmatter.readingTime}
+                  />
+                )}
                 <MarkdownRenderer serialized={props.serialized} />
               </article>
             </Box>

diff --git a/src/pages/docs/tracks/[slug].tsx b/src/pages/docs/tracks/[slug].tsx
@@ -45,9 +45,11 @@ import {
 } from 'utils/navigation-utils'
 import { MarkdownRenderer } from '@vtexdocs/components'
 // import { ParsedUrlQuery } from 'querystring'
-import { useIntl } from 'react-intl'
+
 import { remarkReadingTime } from 'utils/remark_plugins/remarkReadingTime'
+
 import theme from 'styles/code-hike-theme'
+import TimeToRead from 'components/TimeToRead'
 
 const docsPathsGLOBAL = await getTracksPaths('tracks')
 
@@ -96,7 +98,6 @@ const TrackPage: NextPage<Props> = ({
 }) => {
   const [headings, setHeadings] = useState<Item[]>([])
   const { setBranchPreview } = useContext(PreviewContext)
-  const intl = useIntl()
   setBranchPreview(branch)
   const { setActiveSidebarElement } = useContext(LibraryContext)
   const articleRef = useRef<HTMLElement>(null)
@@ -132,15 +133,11 @@ const TrackPage: NextPage<Props> = ({
                     <Text sx={styles.documentationTitle} className="title">
                       {serialized.frontmatter?.title}
                     </Text>
-                    <Text sx={styles.readingTime}>
-                      {intl.formatMessage(
-                        {
-                          id: 'documentation_reading_time.text',
-                          defaultMessage: '',
-                        },
-                        { minutes: serialized.frontmatter?.readingTime }
-                      )}
-                    </Text>
+                    {serialized.frontmatter?.readingTime && (
+                      <TimeToRead
+                        minutes={serialized.frontmatter.readingTime}
+                      />
+                    )}
                   </Flex>
                 </header>
                 <MarkdownRenderer serialized={serialized} />

diff --git a/src/pages/faq/[slug].tsx b/src/pages/faq/[slug].tsx
@@ -21,6 +21,7 @@ import Contributors from 'components/contributors'
 import OnThisPage from 'components/on-this-page'
 import { Item, TableOfContents } from '@vtexdocs/components'
 import Breadcrumb from 'components/breadcrumb'
+import TimeToRead from 'components/TimeToRead'
 
 import getHeadings from 'utils/getHeadings'
 import getNavigation from 'utils/getNavigation'
@@ -36,7 +37,6 @@ import { getLogger } from 'utils/logging/log-util'
 import { localeType } from 'utils/navigation-utils'
 import { MarkdownRenderer } from '@vtexdocs/components'
 // import { ParsedUrlQuery } from 'querystring'
-import { useIntl } from 'react-intl'
 import { remarkReadingTime } from 'utils/remark_plugins/remarkReadingTime'
 import { getDocsPaths as getFaqPaths } from 'utils/getDocsPaths'
 import { getMessages } from 'utils/get-messages'
@@ -66,7 +66,6 @@ const FaqPage: NextPage<Props> = ({
 }) => {
   const [headings, setHeadings] = useState<Item[]>([])
   const { setBranchPreview } = useContext(PreviewContext)
-  const intl = useIntl()
   setBranchPreview(branch)
   const articleRef = useRef<HTMLElement>(null)
 
@@ -108,15 +107,11 @@ const FaqPage: NextPage<Props> = ({
                     <Text sx={styles.documentationTitle} className="title">
                       {serialized.frontmatter?.title}
                     </Text>
-                    <Text sx={styles.readingTime}>
-                      {intl.formatMessage(
-                        {
-                          id: 'documentation_reading_time.text',
-                          defaultMessage: '',
-                        },
-                        { minutes: serialized.frontmatter?.readingTime }
-                      )}
-                    </Text>
+                    {serialized.frontmatter?.readingTime && (
+                      <TimeToRead
+                        minutes={serialized.frontmatter.readingTime}
+                      />
+                    )}
                     {createdAtDate && updatedAtDate && (
                       <DateText
                         createdAt={createdAtDate}

diff --git a/src/pages/faq/index.tsx b/src/pages/faq/index.tsx
@@ -30,8 +30,6 @@ interface Props {
   totalPages: number
 }
 
-const docsPathsGLOBAL = await getFaqPaths('faq')
-
 const FaqPage: NextPage<Props> = ({ faqData, branch }) => {
   const intl = useIntl()
   const { setBranchPreview } = useContext(PreviewContext)
@@ -147,6 +145,7 @@ export const getStaticProps: GetStaticProps = async ({
       ? JSON.parse(JSON.stringify(previewData)).branch
       : 'main'
   const branch = preview ? previewBranch : 'main'
+  const docsPathsGLOBAL = await getFaqPaths('faq', branch)
   const logger = getLogger('FAQ')
   const currentLocale: localeType = locale
     ? (locale as localeType)

diff --git a/src/pages/known-issues/[slug].tsx b/src/pages/known-issues/[slug].tsx
@@ -21,6 +21,7 @@ import Contributors from 'components/contributors'
 import OnThisPage from 'components/on-this-page'
 import { Item, TableOfContents } from '@vtexdocs/components'
 import Breadcrumb from 'components/breadcrumb'
+import TimeToRead from 'components/TimeToRead'
 
 import getHeadings from 'utils/getHeadings'
 import getNavigation from 'utils/getNavigation'
@@ -36,7 +37,7 @@ import { getLogger } from 'utils/logging/log-util'
 import { localeType } from 'utils/navigation-utils'
 import { MarkdownRenderer } from '@vtexdocs/components'
 // import { ParsedUrlQuery } from 'querystring'
-import { useIntl } from 'react-intl'
+
 import { remarkReadingTime } from 'utils/remark_plugins/remarkReadingTime'
 import { getDocsPaths as getKnownIssuesPaths } from 'utils/getDocsPaths'
 import { getMessages } from 'utils/get-messages'
@@ -67,7 +68,7 @@ const KnownIssuePage: NextPage<Props> = ({
 }) => {
   const [headings, setHeadings] = useState<Item[]>([])
   const { setBranchPreview } = useContext(PreviewContext)
-  const intl = useIntl()
+
   setBranchPreview(branch)
   const articleRef = useRef<HTMLElement>(null)
 
@@ -109,15 +110,11 @@ const KnownIssuePage: NextPage<Props> = ({
                     <Text sx={styles.documentationTitle} className="title">
                       {serialized.frontmatter?.title}
                     </Text>
-                    <Text sx={styles.readingTime}>
-                      {intl.formatMessage(
-                        {
-                          id: 'documentation_reading_time.text',
-                          defaultMessage: '',
-                        },
-                        { minutes: serialized.frontmatter?.readingTime }
-                      )}
-                    </Text>
+                    {serialized.frontmatter?.readingTime && (
+                      <TimeToRead
+                        minutes={serialized.frontmatter.readingTime}
+                      />
+                    )}
                   </Flex>
                   <Box sx={styles.divider}></Box>
                   <Flex sx={styles.detailedInfo}>

diff --git a/src/pages/known-issues/index.tsx b/src/pages/known-issues/index.tsx
@@ -38,8 +38,6 @@ interface Props {
   totalPages: number
 }
 
-const docsPathsGLOBAL = await getKnownIssuesPaths('known-issues')
-
 const KnownIssuesPage: NextPage<Props> = ({ knownIssuesData, branch }) => {
   const intl = useIntl()
   const { setBranchPreview } = useContext(PreviewContext)
@@ -169,6 +167,7 @@ export const getStaticProps: GetStaticProps = async ({
       ? JSON.parse(JSON.stringify(previewData)).branch
       : 'main'
   const branch = preview ? previewBranch : 'main'
+  const docsPathsGLOBAL = await getKnownIssuesPaths('known-issues')
   const logger = getLogger('Known Issues')
   const currentLocale: localeType = locale
     ? (locale as localeType)

diff --git a/src/styles/documentation-page.ts b/src/styles/documentation-page.ts
@@ -52,7 +52,7 @@ const articleBox: SxStyleProp = {
   },
   strong: {
     fontWeight: '600',
-    overflowWrap: 'anywhere',
+    overflowWrap: 'break-word',
   },
   hr: {
     border: '0.5px solid #E7E9EE',
@@ -114,12 +114,6 @@ const divider: SxStyleProp = {
   borderBottom: '1px solid #E7E9EE',
 }
 
-const readingTime: SxStyleProp = {
-  color: '#A1AAB7',
-  fontSize: '16px',
-  lineHeight: '18px',
-}
-
 const flexContainer: SxStyleProp = {
   flexWrap: 'wrap',
   flexDirection: 'column',
@@ -183,7 +177,6 @@ export default {
   documentationExcerpt,
   innerContainer,
   divider,
-  readingTime,
   flexContainer,
   detailedInfo,
   id,