From 2844a2bd71dcf1eb17a53992c10129b7496332e0 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 31 Oct 2023 17:41:43 +0100
Subject: feat(components): add an Overlay component

* add useScrollbarWidth hook
* add useScrollLock hook
* add a new component to lock scroll with an overlay (it can be useful
especially on small screens to prevent background contents to be
scrolled)
---
 src/components/atoms/overlay/overlay.test.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/components/atoms/overlay/overlay.test.tsx

(limited to 'src/components/atoms/overlay/overlay.test.tsx')

diff --git a/src/components/atoms/overlay/overlay.test.tsx b/src/components/atoms/overlay/overlay.test.tsx
new file mode 100644
index 0000000..fcc694f
--- /dev/null
+++ b/src/components/atoms/overlay/overlay.test.tsx
@@ -0,0 +1,21 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as screenTL } from '@testing-library/react';
+import { Overlay } from './overlay';
+
+describe('overlay', () => {
+  it('renders its children in front of an overlay', () => {
+    const body = 'perferendis voluptatibus ut';
+
+    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');
+  });
+});
-- 
cgit v1.2.3