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)

1 files changed, 25 insertions, 0 deletions

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' });
+  });
+});