From fc77c0a7e9c81f5bc1a69dee945ce71b9511b3cc Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 19 Dec 2023 15:57:42 +0100 Subject: fix(components): make navbar usable with javascript disabled --- src/components/atoms/overlay/overlay.module.scss | 11 ----------- src/components/atoms/overlay/overlay.test.tsx | 10 +--------- src/components/atoms/overlay/overlay.tsx | 19 ++----------------- 3 files changed, 3 insertions(+), 37 deletions(-) (limited to 'src/components/atoms') 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({body}); - expect(screenTL.getByText(body)).toHaveClass('overlay--visible'); - }); - - it('can be hidden', () => { - const body = 'vel aspernatur mollitia'; - - render({body}); - - 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 & { @@ -12,27 +11,13 @@ export type OverlayProps = HTMLAttributes & { * 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 = ( - { 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 (
-- cgit v1.2.3