feat: WhatsNextCard support image

src/components/whats-next-card/WhatsNextCard.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Flex, ThemeProvider } from '@vtex/brand-ui'
+import WhatsNextCard from './index'
+import LibraryContextProvider from 'utils/context/libraryContext'
+import { exampleContextProps } from 'utils/storybook-constants'
+
+const meta = {
+  title: 'Example/WhatsNextCard',
+  component: WhatsNextCard,
+  parameters: {},
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <LibraryContextProvider {...exampleContextProps}>
+          <Flex>
+            <Story />
+          </Flex>
+        </LibraryContextProvider>
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof WhatsNextCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WhatsNextCardExample: Story = {
+  args: {
+    title: 'New to VTEX IO?',
+    linkTo: 'https://developers.vtex.com/docs/guides/vtex-io-getting-started',
+    description:
+      'Build stores and IO apps from scratch with our learning-oriented tutorials.',
+    linkTitle: 'Get started',
+  },
+}
+
+export const WhatsNextCardImageExample: Story = {
+  args: {
+    title: 'Midnight',
+    linkTo: 'https://developers.vtex.com/docs/guides/faststore/themes-midnight',
+    image:
+      'https://vtexhelp.vtexassets.com/assets/docs/src/midnight___197d3bec531d5cbd4959f2cddabacc46.png',
+  },
+}
+
+export const WhatsNextCardSimpleExample: Story = {
+  args: {
+    title: 'New to VTEX IO?',
+    linkTo: 'https://developers.vtex.com/docs/guides/vtex-io-getting-started',
+  },
+}

src/components/whats-next-card/index.tsx

@@ -1,41 +1,64 @@
 import React from 'react'
 import { Box, Flex, IconCaret, Text, Link } from '@vtex/brand-ui'
 import styles from './styles'
+import Image from 'next/image'
 
 export type WhatsNextDataElement = {
   title: string
-  description: string
-  linkTitle: string
+  description?: string
+  linkTitle?: string
   linkTo: string
+  image?: string
 }
 
 const WhatsNextCard = ({
   title,
   description,
   linkTitle,
   linkTo,
+  image,
 }: WhatsNextDataElement) => {
   return (
     <Link href={linkTo} sx={styles.container}>
-      <Box>
-        <Text sx={styles.title} className="title">
-          {title}
-        </Text>
-        <Text sx={styles.description} className="description">
-          {description}
-        </Text>
-        <Flex sx={styles.linkContainer}>
-          <Text sx={styles.link} className="link">
-            {linkTitle}
-          </Text>
-          <IconCaret
-            className="caret"
-            color="#A1A8B3"
-            direction="right"
-            size={16}
+      {image ? (
+        <Box>
+          <Image
+            src={image}
+            alt={title}
+            width={0}
+            height={0}
+            sizes="100vw"
+            style={{ width: '100%', height: 'auto' }}
           />
-        </Flex>
-      </Box>
+          <Text sx={styles.imageTitle} className="title">
+            {title}
+          </Text>
+        </Box>
+      ) : (
+        <Box sx={{ padding: '16px' }}>
+          <Text sx={styles.title} className="title">
+            {title}
+          </Text>
+          {description && (
+            <Text sx={styles.description} className="description">
+              {description}
+            </Text>
+          )}
+          {linkTitle && (
+            <Flex sx={styles.linkContainer}>
+              <Text sx={styles.link} className="link">
+                {linkTitle}
+              </Text>
+              <IconCaret
+                className="caret"
+                color="#A1A8B3"
+                direction="right"
+                size={16}
+              />
+            </Flex>
+          )}
+        </Box>
+      )}
     </Link>
   )
 }

src/components/whats-next-card/styles.ts

@@ -2,7 +2,6 @@ import type { SxStyleProp } from '@vtex/brand-ui'
 
 const container: SxStyleProp = {
   mt: '16px',
-  padding: '16px',
   borderRadius: '4px',
   border: '1px solid #E7E9EE',
   width: ['100%', '49%'],
@@ -14,12 +13,10 @@ const container: SxStyleProp = {
     borderColor: 'muted.2',
     boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.1)',
     transition: 'all 0.3 ease-out',
-
     '.title, .description': {
       transition: 'all 0.3s ease-out',
       color: '#000711',
     },
-
     '.link, .caret': {
       transition: 'all 0.3s ease-out',
       color: 'muted.0',
@@ -35,6 +32,21 @@ const title: SxStyleProp = {
   color: 'muted.0',
 }
 
+const imageTitle: SxStyleProp = {
+  padding: '16px',
+  fontSize: '16px',
+  fontWeight: '400',
+  color: 'muted.0',
+  ':after': {
+    content: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgb(74 89 108)' %3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E")`,
+    position: 'absolute',
+    height: '16px',
+    width: '16px',
+    marginLeft: '3px',
+    lineHeight: '30px',
+  },
+}
+
 const description: SxStyleProp = {
   fontSize: '14px',
   fontWeight: '400',
@@ -52,4 +64,11 @@ const link: SxStyleProp = {
   color: 'muted.1',
 }
 
-export default { container, title, description, linkContainer, link }
+export default {
+  container,
+  title,
+  imageTitle,
+  description,
+  linkContainer,
+  link,
+}

src/lib/index.ts

@@ -6,4 +6,5 @@ export { default as FeedbackSection } from './feedback-section'
 export { default as Search } from './search'
 export { default as SearchInput } from '../components/search-input'
 export { default as CookieBar } from './cookie-bar'
+export { default as WhatsNextCard } from '../components/whats-next-card'
 export type { Item } from './table-of-contents'

src/lib/sidebar/styles.ts

@@ -113,7 +113,7 @@ const iconTitle: SxStyleProp = {
   fontSize: '14px',
   ml: ['8px', '8px', '8px', '8px', '8px', '12px'],
   whiteSpace: 'nowrap',
-  overflowX: 'hidden',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
 }