-
-
-
-
-
- {children}
-
+
+ {open ? (
+
+
+
+
+
+ {children}
-
-
-
+
)
}
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index a23992946..a0d5e8339 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -1,9 +1,11 @@
-import { FC, useRef } from 'react'
import s from './Sidebar.module.css'
-import { Transition } from '@headlessui/react'
-import { useOverlay, OverlayContainer } from '@react-aria/overlays'
-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 {
children: any
@@ -12,62 +14,40 @@ interface Props {
}
const Sidebar: FC
= ({ children, open = false, onClose }) => {
- const ref = useRef(null)
- const { overlayProps } = useOverlay(
- {
- isOpen: open,
- isDismissable: true,
- onClose: onClose,
- },
- ref
- )
+ const ref = useRef() as React.MutableRefObject
+
+ useEffect(() => {
+ if (ref.current) {
+ if (open) {
+ disableBodyScroll(ref.current)
+ } else {
+ enableBodyScroll(ref.current)
+ }
+ }
+ return () => {
+ clearAllBodyScrollLocks()
+ }
+ }, [open])
return (
-
-
-
-
-
+ ) : null}
)
}
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 }) => {
-
+