feat: Adjust Alert for CMS

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Adjust `Alert` component for `CMS` ([#31](https://github.com/vtex-sites/gatsby.store/pull/31))
 - Added base files (`Getting Started`, `Theming`, `Colors`, `Typography` and `Icons`) to Storybook ([#67](https://github.com/vtex-sites/nextjs.store/pull/67))
 - Updated tokens' naming scheme ([#67](https://github.com/vtex-sites/nextjs.store/pull/67))
 - `OutOfStock` component ([#72](https://github.com/vtex-sites/nextjs.store/pull/72))

src/Layout.tsx

@@ -20,9 +20,16 @@ function Layout({ children }: PropsWithChildren<unknown>) {
   return (
     <>
       <div id="layout">
-        <Alert>
-          Get 10% off today:&nbsp;<span>NEW10</span>
-        </Alert>
+        <Alert
+          icon="Bell"
+          content={
+            <>
+              Get 10% off today:&nbsp;<span>NEW10</span>
+            </>
+          }
+          link={{ text: 'Buy now', to: '/office' }}
+          dismissible
+        />
 
         <Navbar />
 

src/components/common/Alert/Alert.tsx

@@ -1,11 +1,20 @@
 import { useCallback, useState } from 'react'
-import type { PropsWithChildren } from 'react'
+import type { ReactNode } from 'react'
 
 import UIAlert from 'src/components/ui/Alert'
 import { mark } from 'src/sdk/tests/mark'
 import Icon from 'src/components/ui/Icon'
 
-function Alert({ children }: PropsWithChildren<unknown>) {
+interface Props {
+  icon: string
+  content: ReactNode
+  link?: {
+    to: string
+    text: string
+  }
+  dismissible: boolean
+}
+function Alert({ icon, content, link, dismissible = false }: Props) {
   const [displayAlert, setDisplayAlert] = useState(true)
 
   const onAlertClose = useCallback(
@@ -19,11 +28,12 @@ function Alert({ children }: PropsWithChildren<unknown>) {
 
   return (
     <UIAlert
-      icon={<Icon name="BellRinging" width={24} height={24} />}
-      dismissible
+      icon={<Icon name={icon} width={24} height={24} />}
+      dismissible={dismissible}
       onClose={onAlertClose}
+      link={link}
     >
-      {children}
+      {content}
     </UIAlert>
   )
 }