From caaf5ac0a0e643557dc7fd6b4955965277723686 Mon Sep 17 00:00:00 2001
From: Martin Bavio <mbavio@gmail.com>
Date: Fri, 30 Oct 2020 20:32:10 -0300
Subject: [PATCH] Refactor styling a bit to include opacity transition

---
 components/core/Featurebar/Featurebar.module.css |  2 +-
 components/core/Featurebar/Featurebar.tsx        | 16 ++++++++--------
 components/core/Featurebar/index.ts              |  2 +-
 components/core/Layout/Layout.tsx                |  7 ++++---
 components/core/index.ts                         |  2 +-
 5 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css
index af5b4953e..a3cb61cd2 100644
--- a/components/core/Featurebar/Featurebar.module.css
+++ b/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;
diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx
index a243590b1..5672df753 100644
--- a/components/core/Featurebar/Featurebar.tsx
+++ b/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
diff --git a/components/core/Featurebar/index.ts b/components/core/Featurebar/index.ts
index 44f51698d..d78bc9d20 100644
--- a/components/core/Featurebar/index.ts
+++ b/components/core/Featurebar/index.ts
@@ -1 +1 @@
-export { default } from './Featurebar'
+export { default } from './FeatureBar'
diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 3ac741e6b..53cc3751f 100644
--- a/components/core/Layout/Layout.tsx
+++ b/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> */}
diff --git a/components/core/index.ts b/components/core/index.ts
index 670f5d58f..2dd09d85c 100644
--- a/components/core/index.ts
+++ b/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'