diff options
Diffstat (limited to 'src/components/atoms')
| -rw-r--r-- | src/components/atoms/overlay/overlay.module.scss | 11 | ||||
| -rw-r--r-- | src/components/atoms/overlay/overlay.test.tsx | 10 | ||||
| -rw-r--r-- | src/components/atoms/overlay/overlay.tsx | 19 |
3 files changed, 3 insertions, 37 deletions
diff --git a/src/components/atoms/overlay/overlay.module.scss b/src/components/atoms/overlay/overlay.module.scss index edbc4ae..360bbde 100644 --- a/src/components/atoms/overlay/overlay.module.scss +++ b/src/components/atoms/overlay/overlay.module.scss @@ -4,15 +4,4 @@ z-index: 100; background: hsla(0, 0%, 0%, 0.6); transition: all 0.3s linear 0s; - - &--hidden { - opacity: 0; - overflow: hidden; - visibility: hidden; - } - - &--visible { - opacity: 1; - visibility: visible; - } } diff --git a/src/components/atoms/overlay/overlay.test.tsx b/src/components/atoms/overlay/overlay.test.tsx index fcc694f..1d31e9c 100644 --- a/src/components/atoms/overlay/overlay.test.tsx +++ b/src/components/atoms/overlay/overlay.test.tsx @@ -8,14 +8,6 @@ describe('overlay', () => { render(<Overlay>{body}</Overlay>); - expect(screenTL.getByText(body)).toHaveClass('overlay--visible'); - }); - - it('can be hidden', () => { - const body = 'vel aspernatur mollitia'; - - render(<Overlay isVisible={false}>{body}</Overlay>); - - expect(screenTL.getByText(body)).toHaveClass('overlay--hidden'); + expect(screenTL.getByText(body)).toBeInTheDocument(); }); }); diff --git a/src/components/atoms/overlay/overlay.tsx b/src/components/atoms/overlay/overlay.tsx index 7dd7446..e8945a8 100644 --- a/src/components/atoms/overlay/overlay.tsx +++ b/src/components/atoms/overlay/overlay.tsx @@ -4,7 +4,6 @@ import { type HTMLAttributes, type ReactNode, } from 'react'; -import { useScrollLock } from '../../../utils/hooks'; import styles from './overlay.module.scss'; export type OverlayProps = HTMLAttributes<HTMLDivElement> & { @@ -12,27 +11,13 @@ export type OverlayProps = HTMLAttributes<HTMLDivElement> & { * The elements to display in front of the overlay. */ children: ReactNode; - /** - * Should the overlay be visible? - * - * Use it if you want an animated overlay instead of mounting/demounting it. - * - * @default true - */ - isVisible?: boolean; }; const OverlayWithRef: ForwardRefRenderFunction<HTMLDivElement, OverlayProps> = ( - { children, className = '', isVisible = true, ...props }, + { children, className = '', ...props }, ref ) => { - const overlayClass = [ - styles.overlay, - styles[isVisible ? 'overlay--visible' : 'overlay--hidden'], - className, - ].join(' '); - - useScrollLock(isVisible); + const overlayClass = [styles.overlay, className].join(' '); return ( <div {...props} className={overlayClass} ref={ref}> |
