{/* Add an image - We're generating a gradient as placeholder ![]()
*/}
diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx
index abc1ed0e8..55ed5289d 100644
--- a/components/common/Footer/Footer.tsx
+++ b/components/common/Footer/Footer.tsx
@@ -84,7 +84,11 @@ const Footer: FC
-
+
= {
}
const I18nWidget: FC = () => {
+ const [display, setDisplay] = useState(false)
const {
locale,
locales,
@@ -39,42 +38,61 @@ const I18nWidget: FC = () => {
asPath: currentPath,
} = useRouter()
const options = locales?.filter((val) => val !== locale)
-
const currentLocale = locale || defaultLocale
return (
)
}
diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx
index 373007cb6..158f63068 100644
--- a/components/common/Layout/Layout.tsx
+++ b/components/common/Layout/Layout.tsx
@@ -1,17 +1,43 @@
-import { FC, useCallback, useEffect, useState } from 'react'
import cn from 'classnames'
-import { useRouter } from 'next/router'
-import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
-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/common'
-import { LoginView, SignUpView, ForgotPassword } from '@components/auth'
-import { useUI } from '@components/ui/context'
-import { usePreventScroll } from '@react-aria/overlays'
+import dynamic from 'next/dynamic'
import s from './Layout.module.css'
-import debounce from 'lodash.debounce'
+import { useRouter } from 'next/router'
+import React, { FC } from 'react'
+import { useUI } from '@components/ui/context'
+import { Navbar, Footer } from '@components/common'
+import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
+import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
+import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
+import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
+import { CartSidebarView } from '@components/cart'
+
+const Loading = () => (
+ = ({ children, pageProps }) => {
closeSidebar,
closeModal,
modalView,
- toastText,
- closeToast,
- displayToast,
} = useUI()
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
- const [hasScrolled, setHasScrolled] = useState(false)
const { locale = 'en-US' } = useRouter()
- usePreventScroll({
- isDisabled: !(displaySidebar || displayModal),
- })
-
- const handleScroll = useCallback(
- debounce(() => {
- const offset = 0
- const { scrollTop } = document.documentElement
- const scrolled = scrollTop > offset
-
- setHasScrolled(scrolled)
- }, 1),
- []
- )
-
- useEffect(() => {
- document.addEventListener('scroll', handleScroll)
- return () => {
- document.removeEventListener('scroll', handleScroll)
- }
- }, [handleScroll])
-
return (
)
diff --git a/components/common/Navbar/Navbar.module.css b/components/common/Navbar/Navbar.module.css
index f42672365..753bdbf18 100644
--- a/components/common/Navbar/Navbar.module.css
+++ b/components/common/Navbar/Navbar.module.css
@@ -1,3 +1,7 @@
+.root {
+ @apply sticky top-0 bg-primary z-40 transition-all duration-150;
+}
+
.link {
@apply inline-flex items-center text-primary leading-6 font-medium transition ease-in-out duration-75 cursor-pointer text-accents-6;
}
diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx
index 28b3f8910..24a2b5757 100644
--- a/components/common/Navbar/Navbar.tsx
+++ b/components/common/Navbar/Navbar.tsx
@@ -1,49 +1,64 @@
-import { FC } from 'react'
+import { FC, useState, useEffect } from 'react'
import Link from 'next/link'
import s from './Navbar.module.css'
-import { Logo } from '@components/ui'
+import { Logo, Container } from '@components/ui'
import { Searchbar, UserNav } from '@components/common'
-interface Props {
- className?: string
-}
+import cn from 'classnames'
+import throttle from 'lodash.throttle'
-const Navbar: FC = ({ className }) => {
- const rootClassName = className
+const Navbar: FC = () => {
+ const [hasScrolled, setHasScrolled] = useState(false)
+
+ const handleScroll = () => {
+ const offset = 0
+ const { scrollTop } = document.documentElement
+ const scrolled = scrollTop > offset
+ setHasScrolled(scrolled)
+ }
+
+ useEffect(() => {
+ document.addEventListener('scroll', throttle(handleScroll, 200))
+ return () => {
+ document.removeEventListener('scroll', handleScroll)
+ }
+ }, [handleScroll])
return (
-
+
+)
+
+const dynamicProps = {
+ loading: () =>
-
-
-
-
+ {children}
+
@@ -79,6 +71,7 @@ const Layout: FC = ({ children, pageProps }) => {
{modalView === 'SIGNUP_VIEW' && = ({ children, pageProps }) => {
}
/>
-
- {/*
- {toastText}
- */}
-
-
= ({ product }) => {
))}
-
-
-
-
diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx
index 6a68d19e0..e7f3d89c1 100644
--- a/components/ui/Button/Button.tsx
+++ b/components/ui/Button/Button.tsx
@@ -6,7 +6,6 @@ import React, {
useRef,
} from 'react'
import mergeRefs from 'react-merge-refs'
-import { useButton } from 'react-aria'
import s from './Button.module.css'
import { LoadingDots } from '@components/ui'
@@ -34,19 +33,8 @@ const Button: React.FC = forwardRef((props, buttonRef) => {
loading = false,
disabled = false,
style = {},
- ...rest
} = props
const ref = useRef(null)
- const { buttonProps, isPressed } = useButton(
- {
- ...rest,
- // @ts-ignore onClick === onPress for our purposes
- onPress: onClick,
- isDisabled: disabled,
- elementType: Component,
- },
- ref
- )
const rootClassName = cn(
s.root,
@@ -63,8 +51,6 @@ const Button: React.FC = forwardRef((props, buttonRef) => {
aria-pressed={active}
data-variant={variant}
ref={mergeRefs([ref, buttonRef])}
- {...buttonProps}
- data-active={isPressed ? '' : undefined}
className={rootClassName}
disabled={disabled}
style={{
diff --git a/components/ui/Grid/Grid.module.css b/components/ui/Grid/Grid.module.css
index 8ffc1beab..d3302fc61 100644
--- a/components/ui/Grid/Grid.module.css
+++ b/components/ui/Grid/Grid.module.css
@@ -1,6 +1,7 @@
.root {
- --row-height: calc(100vh - 80px - 56px);
+ --row-height: calc(100vh - 88px);
@apply grid grid-cols-1 gap-0;
+ min-height: var(--row-height);
@screen lg {
@apply grid-cols-3 grid-rows-2;
diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx
index 401f9b12a..8ec6d5182 100644
--- a/components/ui/Marquee/Marquee.tsx
+++ b/components/ui/Marquee/Marquee.tsx
@@ -2,6 +2,7 @@ import cn from 'classnames'
import s from './Marquee.module.css'
import { FC, ReactNode, Component } from 'react'
import Ticker from 'react-ticker'
+import { useInView } from 'react-intersection-observer'
interface Props {
className?: string
@@ -9,7 +10,11 @@ interface Props {
variant?: 'primary' | 'secondary'
}
-const M: FC = ({ className = '', children, variant = 'primary' }) => {
+const Maquee: FC = ({
+ className = '',
+ children,
+ variant = 'primary',
+}) => {
const rootClassName = cn(
s.root,
{
@@ -18,14 +23,20 @@ const M: FC = ({ className = '', children, variant = 'primary' }) => {
},
className
)
+ const [ref, inView] = useInView({
+ triggerOnce: true,
+ rootMargin: '200px 0px',
+ })
return (
-
-
- {({ index }) =>
+ = ({
- className,
- children,
- open = false,
- onClose,
- ...props
-}) => {
- const rootClassName = cn(s.root, className)
- let ref = useRef() as React.MutableRefObject
- let { modalProps } = useModal()
- let { dialogProps } = useDialog({}, ref)
- let { overlayProps } = useOverlay(
- {
- isOpen: open,
- isDismissable: false,
- onClose: onClose,
- ...props,
- },
- ref
- )
+const Modal: FC = ({ children, open, onClose }) => {
+ const ref = useRef() as React.MutableRefObject
+
+ useEffect(() => {
+ if (ref.current) {
+ if (open) {
+ disableBodyScroll(ref.current)
+ } else {
+ enableBodyScroll(ref.current)
+ }
+ }
+ return () => {
+ clearAllBodyScrollLocks()
+ }
+ }, [open])
return (
-
-
-
-
{children}
}
-
+ {inView ? (
+
+ {() =>
+ ) : null}
)
}
-export default M
+export default Maquee
diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
index e31e32e91..fb3784e16 100644
--- a/components/ui/Modal/Modal.tsx
+++ b/components/ui/Modal/Modal.tsx
@@ -1,11 +1,13 @@
-import cn from 'classnames'
-import { FC, useRef } from 'react'
+import { FC, useRef, useEffect } from 'react'
+import Portal from '@reach/portal'
import s from './Modal.module.css'
-import { useDialog } from '@react-aria/dialog'
-import { FocusScope } from '@react-aria/focus'
-import { Transition } from '@headlessui/react'
-import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
import { Cross } from '@components/icons'
+import {
+ disableBodyScroll,
+ enableBodyScroll,
+ clearAllBodyScrollLocks,
+} from 'body-scroll-lock'
+
interface Props {
className?: string
children?: any
@@ -13,64 +15,41 @@ interface Props {
onClose: () => void
}
-const Modal: FC{children}
}
+
-
- = ({ className, children, open = false, onClose }) => {
- const rootClassName = cn(s.root, className)
- const ref = useRef(null)
- const { modalProps } = useModal()
- const { overlayProps } = useOverlay(
- {
- isOpen: open,
- isDismissable: true,
- onClose: onClose,
- },
- ref
- )
- const { dialogProps } = useDialog({}, ref)
+const Sidebar: FC = ({ children, open = false, onClose }) => {
+ const ref = useRef() as React.MutableRefObject
+
+ useEffect(() => {
+ if (ref.current) {
+ if (open) {
+ disableBodyScroll(ref.current)
+ } else {
+ enableBodyScroll(ref.current)
+ }
+ }
+ return () => {
+ clearAllBodyScrollLocks()
+ }
+ }, [open])
return (
-
-
-
-
+ {open ? (
+
+ ) : null}
+
)
}
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 4c7704c4d..a0d5e8339 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -1,79 +1,54 @@
-import cn from 'classnames'
-import { FC, useRef } from 'react'
import s from './Sidebar.module.css'
-import { Transition } from '@headlessui/react'
-import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
-import { useDialog } from '@react-aria/dialog'
-import { FocusScope } from '@react-aria/focus'
+import Portal from '@reach/portal'
+import { FC, useEffect, useRef } from 'react'
+import {
+ disableBodyScroll,
+ enableBodyScroll,
+ clearAllBodyScrollLocks,
+} from 'body-scroll-lock'
interface Props {
- className?: string
- children?: any
- open?: boolean
+ children: any
+ open: boolean
onClose: () => void
}
-const Sidebar: FC
+
-
-
-
+
+
+ {children}
+
-
+
-
+ {open ? (
+
)
}
diff --git a/components/ui/Text/Text.tsx b/components/ui/Text/Text.tsx
index 962e3543e..29e1bef31 100644
--- a/components/ui/Text/Text.tsx
+++ b/components/ui/Text/Text.tsx
@@ -10,7 +10,8 @@ interface Props {
variant?: Variant
className?: string
style?: CSSProperties
- children: React.ReactNode | any
+ children?: React.ReactNode | any
+ html?: string
}
type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading'
@@ -20,6 +21,7 @@ const Text: FunctionComponent = ({
className = '',
variant = 'body',
children,
+ html,
}) => {
const componentsMap: {
[P in Variant]: React.ComponentType | string
@@ -36,6 +38,12 @@ const Text: FunctionComponent = ({
| React.ComponentType
| string = componentsMap![variant!]
+ const htmlContentProps = html
+ ? {
+ dangerouslySetInnerHTML: { __html: html },
+ }
+ : {}
+
return (
= ({
className
)}
style={style}
+ {...htmlContentProps}
>
{children}
diff --git a/components/ui/Toast/Toast.module.css b/components/ui/Toast/Toast.module.css
deleted file mode 100644
index 41e77b622..000000000
--- a/components/ui/Toast/Toast.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.root {
-}
-
-.toast {
- @apply absolute bg-primary text-primary flex items-center border border-accents-1
- rounded-md z-50 shadow-2xl top-0 right-0 p-6 my-6 mx-3;
- width: 420px;
- z-index: 20000;
-}
diff --git a/components/ui/Toast/Toast.tsx b/components/ui/Toast/Toast.tsx
deleted file mode 100644
index 33baf3353..000000000
--- a/components/ui/Toast/Toast.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import cn from 'classnames'
-import { FC, useRef, useEffect, useCallback } from 'react'
-import s from './Toast.module.css'
-import { useDialog } from '@react-aria/dialog'
-import { FocusScope } from '@react-aria/focus'
-import { Transition } from '@headlessui/react'
-import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
-
-interface Props {
- className?: string
- children?: any
- open?: boolean
- onClose: () => void
-}
-
-const Toast: FC = ({
- className,
- children,
- open = false,
- onClose,
- ...props
-}) => {
- const rootClassName = cn(s.root, className)
- let ref = useRef() as React.MutableRefObject
- let { modalProps } = useModal()
- let { dialogProps } = useDialog({}, ref)
- let { overlayProps } = useOverlay(
- {
- isOpen: open,
- isDismissable: true,
- onClose: onClose,
- ...props,
- },
- ref
- )
-
- // useEffect(() => {
- // setTimeout(() => {
- // useCallback(onClose, [])
- // }, 400)
- // })
-
- return (
-
-
-
-
-
-
- )
-}
-
-export default Toast
diff --git a/components/ui/Toast/index.ts b/components/ui/Toast/index.ts
deleted file mode 100644
index 0e86a3392..000000000
--- a/components/ui/Toast/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Toast'
diff --git a/components/ui/context.tsx b/components/ui/context.tsx
index 8fff349fd..096e2f865 100644
--- a/components/ui/context.tsx
+++ b/components/ui/context.tsx
@@ -1,6 +1,5 @@
import React, { FC, useMemo } from 'react'
import { ThemeProvider } from 'next-themes'
-import { SSRProvider, OverlayProvider } from 'react-aria'
export interface State {
displaySidebar: boolean
@@ -181,10 +180,6 @@ export const useUI = () => {
export const ManagedUIContext: FC = ({ children }) => (
-
-
- {children}
-
-
+ {children}
)
diff --git a/components/ui/index.ts b/components/ui/index.ts
index f1796b650..581c12d53 100644
--- a/components/ui/index.ts
+++ b/components/ui/index.ts
@@ -10,4 +10,3 @@ export { default as Skeleton } from './Skeleton'
export { default as Modal } from './Modal'
export { default as Text } from './Text'
export { default as Input } from './Input'
-export { default as Toast } from './Toast'
diff --git a/components/wishlist/WishlistCard/WishlistCard.tsx b/components/wishlist/WishlistCard/WishlistCard.tsx
index e0601862b..3df36bbe3 100644
--- a/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/components/wishlist/WishlistCard/WishlistCard.tsx
@@ -7,8 +7,7 @@ import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
import { useUI } from '@components/ui/context'
-import { Button } from '@components/ui'
-import { HTMLContent } from '@components/common'
+import { Button, Text } from '@components/ui'
import { Trash } from '@components/icons'
import s from './WishlistCard.module.css'
@@ -72,7 +71,7 @@ const WishlistCard: FC = ({ item }) => {
-
-
-
-
-
-
-
-
+
-
-
- {children}
-
-
+
+ ) : null}
+
+
+
+
-
-
-
+
+
+
+ {children}
+
+
-
-
-
-
- {children}
-
-
-