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)
---
 .../hooks/use-scroll-lock/use-scroll-lock.test.tsx | 25 ++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx

(limited to 'src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx')

diff --git a/src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx b/src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx
new file mode 100644
index 0000000..f8234e1
--- /dev/null
+++ b/src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx
@@ -0,0 +1,25 @@
+import { describe, expect, it } from '@jest/globals';
+import { render } from '@testing-library/react';
+import { useScrollLock } from './use-scroll-lock';
+
+const body = 'eligendi dolor eos';
+
+const UseScrollLockDemo = ({ isLocked }: { isLocked: boolean }) => {
+  useScrollLock(isLocked);
+
+  return <div>{body}</div>;
+};
+
+describe('use-scroll-lock', () => {
+  it('can disable scroll on body element', () => {
+    const { baseElement } = render(<UseScrollLockDemo isLocked />);
+
+    expect(baseElement).toHaveStyle({ overflow: 'hidden' });
+  });
+
+  it('can enable scroll on body element', () => {
+    const { baseElement } = render(<UseScrollLockDemo isLocked={false} />);
+
+    expect(baseElement).not.toHaveStyle({ overflow: 'hidden' });
+  });
+});
-- 
cgit v1.2.3