fixup! Feat(web-react): Introduce Drawer component #DS-1580

packages/web-react/src/components/Drawer/__tests__/Modal.test.tsx → packages/web-react/src/components/Drawer/__tests__/Drawer.test.tsx

@@ -4,28 +4,28 @@ import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
-import { SpiritModalProps } from '../../../types';
-import Modal from '../Modal';
+import { SpiritDrawerProps } from '../../../types';
+import Drawer from '../Drawer';
 
-describe('Modal', () => {
-  const ModalTest = (props: SpiritModalProps) => (
-    <Modal {...props} id="modal-example" isOpen={false} onClose={() => null}>
+describe('Drawer', () => {
+  const DrawerTest = (props: SpiritDrawerProps) => (
+    <Drawer {...props} id="drawer-example" isOpen={false} onClose={() => null}>
       <div>Test</div>
-    </Modal>
+    </Drawer>
   );
 
-  classNamePrefixProviderTest(ModalTest, 'Modal');
+  classNamePrefixProviderTest(DrawerTest, 'Drawer');
 
-  stylePropsTest(ModalTest);
+  stylePropsTest(DrawerTest);
 
-  restPropsTest(ModalTest, 'dialog');
+  restPropsTest(DrawerTest, 'dialog');
 
-  it('should not close modal dialog', () => {
+  it('should not close drawer dialog', () => {
     const mockedOnClose = jest.fn();
     render(
-      <Modal id="test" isOpen onClose={mockedOnClose} closeOnBackdropClick={false}>
+      <Drawer id="test" isOpen onClose={mockedOnClose} closeOnBackdropClick={false}>
         <div>Test</div>
-      </Modal>,
+      </Drawer>,
     );
 
     const dialog = screen.getByRole('dialog');
@@ -34,12 +34,12 @@ describe('Modal', () => {
     expect(mockedOnClose).not.toHaveBeenCalled();
   });
 
-  it('should close modal dialog', () => {
+  it('should close drawer dialog', () => {
     const mockedOnClose = jest.fn();
     render(
-      <Modal id="test" isOpen onClose={mockedOnClose} closeOnBackdropClick>
+      <Drawer id="test" isOpen onClose={mockedOnClose} closeOnBackdropClick>
         <div>Test</div>
-      </Modal>,
+      </Drawer>,
     );
 
     const dialog = screen.getByRole('dialog');

packages/web-react/src/components/Drawer/__tests__/useDrawerStyleProps.test.ts

@@ -0,0 +1,18 @@
+import { renderHook } from '@testing-library/react';
+import { useDrawerStyleProps } from '../useDrawerStyleProps';
+
+describe('useDrawerStyleProps', () => {
+  it('should return defaults', () => {
+    const { result } = renderHook(() => useDrawerStyleProps({}));
+
+    expect(result.current.classProps.root).toBe('Drawer');
+    expect(result.current.classProps.dialog).toBe('DrawerDialog');
+  });
+
+  it('should return custom alignment', () => {
+    const { result } = renderHook(() => useDrawerStyleProps({ drawerAlignment: 'left' }));
+
+    expect(result.current.classProps.root).toBe('Drawer Drawer--left');
+    expect(result.current.classProps.dialog).toBe('DrawerDialog');
+  });
+});

packages/web-react/src/types/drawer.ts

@@ -44,7 +44,7 @@ export interface DrawerBaseProps
   extends Omit<SpiritDialogElementProps, 'id'>,
     DrawerDialogHandlingProps,
     ChildrenProps {
-  alignment: AlignmentXDictionaryType;
+  alignment?: AlignmentXDictionaryType;
   id: string;
 }