From caaf5ac0a0e643557dc7fd6b4955965277723686 Mon Sep 17 00:00:00 2001 From: Martin Bavio 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 = ({ +const FeatureBar: React.FC = ({ title, description, className, @@ -19,9 +17,11 @@ const Featurebar: FC = ({ 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 = ({ ) } -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 = ({ children, pageProps }) => { } }, [handleScroll]) - const handleAcceptCookies = () => {} + console.log(acceptedCookies) return ( @@ -80,7 +80,7 @@ const Layout: FC = ({ children, pageProps }) => { {modalView === 'SIGNUP_VIEW' && } {modalView === 'FORGOT_VIEW' && } - = ({ children, pageProps }) => { } /> + {/* {toastText} */} 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'