style(release-notes): add info release type + improve styles

src/components/icons/info-icon.tsx

@@ -0,0 +1,26 @@
+import type { IconProps } from '@vtex/brand-ui'
+import { Icon } from '@vtex/brand-ui'
+
+const InfoIcon = (props: IconProps) => (
+  <Icon
+    {...props}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+      fill="#ECEFF2"
+    />
+    <path
+      d="M9.5 12.2231C9.5 12.3615 9.35714 12.5 9.21429 12.5H6.78571C6.64286 12.5 6.5 12.3615 6.5 12.2231V11.6692C6.5 11.5307 6.64286 11.3923 6.78571 11.3923H7.21429V8.06901H6.78571C6.64286 8.06901 6.5 7.93054 6.5 7.79207V7.09973C6.5 6.96126 6.64286 6.82279 6.78571 6.82279H8.5C8.64286 6.82279 8.78571 6.96126 8.78571 7.09973V11.2538H9.21429C9.35714 11.2538 9.5 11.3923 9.5 11.5307V12.2231V12.2231Z"
+      fill="#5B6E84"
+    />
+    <path
+      d="M8.0714 5.43856C8.62368 5.43856 9.0714 5.0046 9.0714 4.46928C9.0714 3.93396 8.62368 3.5 8.0714 3.5C7.51911 3.5 7.0714 3.93396 7.0714 4.46928C7.0714 5.0046 7.51911 5.43856 8.0714 5.43856Z"
+      fill="#5B6E84"
+    />
+  </Icon>
+)
+
+export default InfoIcon

src/components/last-updates-card/functions.ts

@@ -7,13 +7,15 @@ import FixedIcon from 'components/icons/fixed-icon'
 import ImprovedIcon from 'components/icons/improved-icon'
 import ReleaseNotesIcon from 'components/icons/release-notes-icon'
 import RemovedIcon from 'components/icons/removed-icon'
+import InfoIcon from 'components/icons/info-icon'
 
 export type ActionType =
   | 'added'
   | 'deprecated'
   | 'fixed'
   | 'improved'
   | 'removed'
+  | 'info'
 
 export type UpdateType = 'documentation-updates' | 'release-notes'
 
@@ -56,6 +58,11 @@ const actions: Action[] = [
     title: 'Removed',
     Icon: RemovedIcon,
   },
+  {
+    type: 'info',
+    title: 'Information',
+    Icon: InfoIcon,
+  },
 ]
 
 const updates: Update[] = [

src/components/last-updates-section/index.tsx

@@ -7,10 +7,10 @@ import styles from './styles'
 
 const lastReleaseNote: CardProps = {
   action: {
-    type: 'added',
+    type: 'info',
     description:
-      'Stores using FastStore can now take advantage of Node.js 18 capabilities',
-    date: new Date('10/20/2023'),
+      'Temporary freeze on automatic app distribution in preparation for Black Friday 2023',
+    date: new Date('11/17/2023'),
   },
   updateType: 'release-notes',
 }

src/components/multiselect/styles.ts

@@ -19,7 +19,7 @@ const input: SxStyleProp = {
   background: '#F4F4F4',
   borderRadius: '4px',
   justifyContent: 'space-between',
-  width: '150px',
+  width: '240px',
   cursor: 'pointer',
 }
 

src/components/release-note/functions.tsx

@@ -9,7 +9,9 @@ const messages = getMessages()
 
 export const getReleaseDate = (createdAt: string) => {
   const daysElapsed = getDaysElapsed(new Date(createdAt))
-  return daysElapsed < 8 ? (
+  return daysElapsed < 1 ? (
+    <Text sx={styles.releaseDate}>Today</Text>
+  ) : daysElapsed < 8 ? (
     <Text sx={styles.releaseDate}>{`${getDaysElapsed(new Date(createdAt))} ${
       messages['relese-note-days-elapsed']
     }`}</Text>

src/components/release-note/styles.ts

@@ -1,43 +1,41 @@
 import { SxStyleProp } from '@vtex/brand-ui'
 
 const releaseContainer: SxStyleProp = {
-  mb: ['32px', '48px'],
+  mb: '2rem',
   width: '100%',
 }
 
 const actionType: SxStyleProp = {
-  fontSize: '16px',
-  lineHeight: ['22px', '18px'],
-  ml: '-16px',
+  fontSize: '1rem',
+  ml: '-0.5rem',
+  mb: '-0.75rem',
 }
 
 const actionIcon: SxStyleProp = {
-  minWidth: '16px',
-  minHeight: '16px',
-  width: '16px',
-  height: '16px',
+  maxWidth: '1rem',
+  maxHeight: '1rem',
+  width: '1rem',
+  height: '1rem',
 }
 
 const content: SxStyleProp = {
   flexDirection: 'column',
-  pt: 0,
-  ml: '-16px',
-  mt: '-32px',
-  mb: '-32px',
+  ml: '-0.5rem',
+  mb: '-2rem',
 }
 
 const releaseDate: SxStyleProp = {
   color: 'muted.1',
-  fontSize: ['12px', '16px'],
-  lineHeight: ['16px', '22px'],
+  fontSize: '1rem',
+  lineHeight: '1.5rem',
+  mt: '0.25rem',
 }
 
 const releaseTitle: SxStyleProp = {
   color: '#4A596B',
-  fontSize: ['16px', '18px'],
-  lineHeight: ['22px', '24px'],
+  fontSize: '1.125rem',
+  lineHeight: '1.5rem',
   cursor: 'pointer',
-  mt: '16px',
 }
 
 const releaseTitleActive: SxStyleProp = {
@@ -47,15 +45,17 @@ const releaseTitleActive: SxStyleProp = {
 
 const releaseDescription: SxStyleProp = {
   color: '#4A4A4A',
-  fontSize: ['12px', '16px', '16px', '16px', '16px', '16px', '18px'],
-  lineHeight: ['16px', '22px'],
-  mt: '8px',
-  mb: '-16px',
+  fontSize: '1rem',
+  lineHeight: '1.375rem',
+  mt: '0.5rem',
+  p: {
+    m: '0',
+  },
 }
 
 const arrowIcon: SxStyleProp = {
-  pb: '30px',
-  pr: '0px',
+  pb: '1.5rem',
+  pr: '0.25rem',
   pl: 0,
   color: 'muted.0',
   ':hover': {
@@ -72,7 +72,7 @@ const timeLineBar: SxStyleProp = {
   '& > :first-of-type': {
     '& > :nth-of-type(2)': {
       width: '1px',
-      borderRadius: '8px',
+      borderRadius: '0.5rem',
     },
   },
 }

src/components/release-section/functions.tsx

@@ -36,7 +36,7 @@ export const getDate = (currentUpdate: string, dataGroup: boolean) => {
   const day = current.getDate()
 
   return (
-    <Text sx={dataGroup ? styles.releaseDate : styles.releaseCreationDay}>
+    <Text sx={dataGroup ? styles.releaseMonth : styles.releaseDate}>
       {month[monthIndex] + ', ' + (dataGroup ? year : day)}
     </Text>
   )

src/components/release-section/index.tsx

@@ -1,5 +1,5 @@
 import ReleaseNote from '../release-note'
-import { Box, Flex, Text } from '@vtex/brand-ui'
+import { Box, Text } from '@vtex/brand-ui'
 
 import styles from 'components/release-section/styles'
 import { getMessages } from 'utils/get-messages'
@@ -24,40 +24,38 @@ const ReleaseSection = ({ releasesData, actionTypes }: IReleasesData) => {
         filter.some((option) => option.label === release.actionType))
   )
   return (
-    <Flex sx={styles.outerContainer}>
-      <Box sx={styles.innerContainer}>
-        <Text sx={styles.sectionTitle}>
-          {messages['release_notes_page.title']}
-        </Text>
-        <Text sx={styles.sectionSubtitle}>
-          {messages['release_notes_page.subtitle']}
-        </Text>
-        <Box sx={styles.sectionDivider}>
-          <hr />
-        </Box>
-        <Multiselect
-          title={messages['release_notes_multiselect_text']}
-          options={actionTypes}
-          onSelect={(selection) => {
-            setFilter(selection)
-          }}
-        />
-        {releases.map((release, index) => (
-          <>
-            {index > 0
-              ? compareDates(release.createdAt, releases[index - 1].createdAt)
-                ? getDate(release.createdAt, true)
-                : null
-              : getDate(release.createdAt, true)}
-            <ReleaseNote
-              key={`${release.slug}`}
-              isFirst={index == 0}
-              {...release}
-            />
-          </>
-        ))}
+    <Box sx={styles.outerContainer}>
+      <Text sx={styles.sectionTitle}>
+        {messages['release_notes_page.title']}
+      </Text>
+      <Text sx={styles.sectionSubtitle}>
+        {messages['release_notes_page.subtitle']}
+      </Text>
+      <Box sx={styles.sectionDivider}>
+        <hr />
       </Box>
-    </Flex>
+      <Multiselect
+        title={messages['release_notes_multiselect_text']}
+        options={actionTypes}
+        onSelect={(selection) => {
+          setFilter(selection)
+        }}
+      />
+      {releases.map((release, index) => (
+        <>
+          {index > 0
+            ? compareDates(release.createdAt, releases[index - 1].createdAt)
+              ? getDate(release.createdAt, true)
+              : null
+            : getDate(release.createdAt, true)}
+          <ReleaseNote
+            key={`${release.slug}`}
+            isFirst={index == 0}
+            {...release}
+          />
+        </>
+      ))}
+    </Box>
   )
 }
 

src/components/release-section/styles.tsx

@@ -2,55 +2,50 @@ import { SxStyleProp } from '@vtex/brand-ui'
 
 const outerContainer: SxStyleProp = {
   mx: 'auto',
-  mb: '64px',
+  my: '64px',
   width: ['324px', '544px', '544px', '544px', '720px', '720px', '1400px'],
 }
 
-const innerContainer: SxStyleProp = {
-  width: '100%',
-}
-
 const sectionTitle: SxStyleProp = {
-  fontSize: ['20px', '28px'],
-  lineHeight: ['30px', '38px'],
+  fontSize: '1.75rem',
+  lineHeight: '2.375rem',
   color: '#4A4A4A',
-  pt: '64px',
-  mb: '8px',
+  mb: '0.5rem',
 }
 
 const sectionSubtitle: SxStyleProp = {
   color: '#A1A8B3',
-  fontSize: ['12px', '16px'],
-  lineHeight: ['16px', '18px'],
-  mb: '24px',
+  fontSize: '1.125rem',
+  lineHeight: '1.125rem',
+  pb: '1.5rem',
 }
 
 const sectionDivider: SxStyleProp = {
   hr: {
     border: '1px solid #E7E9EE',
     borderTop: 'none',
-    mb: '32px',
+    mb: '1.5remm',
   },
 }
 
-const releaseDate: SxStyleProp = {
-  fontSize: ['14px', '18px'],
-  lineHeight: ['20px', '24px'],
-  mb: ['16px', '24px'],
+const releaseMonth: SxStyleProp = {
+  fontSize: '1.125rem',
+  lineHeight: '1.5rem',
+  mb: '1.5rem',
 }
 
-const releaseCreationDay: SxStyleProp = {
+const releaseDate: SxStyleProp = {
   color: 'muted.1',
-  fontSize: ['12px', '16px'],
-  lineHeight: ['16px', '22px'],
+  fontSize: '1rem',
+  lineHeight: '1.5rem',
+  mt: '0.25rem',
 }
 
 export default {
   outerContainer,
-  innerContainer,
   sectionTitle,
   sectionSubtitle,
   sectionDivider,
+  releaseMonth,
   releaseDate,
-  releaseCreationDay,
 }

src/pages/updates/release-notes/[slug].tsx

@@ -21,7 +21,6 @@ import type { Item } from 'components/table-of-contents'
 import MarkdownRenderer from 'components/markdown-renderer'
 import FeedbackSection from 'components/feedback-section'
 import OnThisPage from 'components/on-this-page'
-import TableOfContents from 'components/table-of-contents'
 
 import { removeHTML } from 'utils/string-utils'
 import { flattenJSON, getKeyByValue, getParents } from 'utils/navigation-utils'
@@ -116,9 +115,6 @@ const DocumentationPage: NextPage<Props> = ({ serialized, branch }) => {
             </Box>
             <FeedbackSection suggestEdits={false} />
           </Box>
-          <Box sx={styles.rightContainer}>
-            <TableOfContents />
-          </Box>
           <OnThisPage />
         </Flex>
       </APIGuideContextProvider>