Refactor styling a bit to include opacity transition

components/core/Featurebar/Featurebar.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
+  @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out;
 
   @screen md {
     @apply flex text-left;

components/core/Featurebar/Featurebar.tsx

@@ -1,9 +1,7 @@
 import cn from 'classnames'
-import { FC } from 'react'
+import styles from './FeatureBar.module.css'
 
-import s from './Featurebar.module.css'
-
-interface Props {
+interface FeatureBarProps {
   className?: string
   title: string
   description?: string
@@ -11,7 +9,7 @@ interface Props {
   action?: React.ReactNode
 }
 
-const Featurebar: FC<Props> = ({
+const FeatureBar: React.FC<FeatureBarProps> = ({
   title,
   description,
   className,
@@ -19,9 +17,11 @@ const Featurebar: FC<Props> = ({
   hide,
 }) => {
   const rootClassName = cn(
-    s.root,
+    styles.root,
     {
-      'transition-transform transform duration-500 ease-out translate-y-full': hide,
+      transform: true,
+      'translate-y-0 opacity-100': !hide,
+      'translate-y-full opacity-0': hide,
     },
     className
   )
@@ -36,4 +36,4 @@ const Featurebar: FC<Props> = ({
   )
 }
 
-export default Featurebar
+export default FeatureBar

components/core/Featurebar/index.ts

@@ -1 +1 @@
-export { default } from './Featurebar'
+export { default } from './FeatureBar'

components/core/Layout/Layout.tsx

@@ -6,7 +6,7 @@ import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
 import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { CartSidebarView } from '@components/cart'
 import { Container, Sidebar, Button, Modal, Toast } from '@components/ui'
-import { Navbar, Featurebar, Footer } from '@components/core'
+import { Navbar, FeatureBar, Footer } from '@components/core'
 import { LoginView, SignUpView, ForgotPassword } from '@components/auth'
 import { useUI } from '@components/ui/context'
 import { usePreventScroll } from '@react-aria/overlays'
@@ -54,7 +54,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
     }
   }, [handleScroll])
 
-  const handleAcceptCookies = () => {}
+  console.log(acceptedCookies)
 
   return (
     <CommerceProvider locale={locale}>
@@ -80,7 +80,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
           {modalView === 'SIGNUP_VIEW' && <SignUpView />}
           {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
         </Modal>
-        <Featurebar
+        <FeatureBar
           title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
           hide={acceptedCookies}
           action={
@@ -89,6 +89,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
             </Button>
           }
         />
+
         {/* <Toast open={displayToast} onClose={closeModal}>
           {toastText}
         </Toast> */}

components/core/index.ts

@@ -1,5 +1,5 @@
 export { default as Avatar } from './Avatar'
-export { default as Featurebar } from './Featurebar'
+export { default as FeatureBar } from './FeatureBar'
 export { default as Footer } from './Footer'
 export { default as Layout } from './Layout'
 export { default as Navbar } from './Navbar'