-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
21 changed files
with
710 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| @import 'highcharts/css/highcharts.css'; | ||
| @import '../src/styles/index.scss'; | ||
|
|
||
| *, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './Accordion'; | ||
| export * from './AccordionSection'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import React, { useState } from 'react'; | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { FaCircleInfo, FaTriangleExclamation } from 'react-icons/fa6'; | ||
|
|
||
| import { Button } from '../Button'; | ||
| import { Drawer } from './Drawer'; | ||
|
|
||
| const iconOptions = { | ||
| none: undefined, | ||
| exclamation: <FaTriangleExclamation size={13} />, | ||
| infoIcon: <FaCircleInfo size={13} />, | ||
| }; | ||
|
|
||
| const iconMap = { | ||
| none: 'None', | ||
| exclamation: 'Exclamation', | ||
| infoIcon: 'Information', | ||
| }; | ||
|
|
||
| const meta: Meta<typeof Drawer> = { | ||
| title: 'Components/Drawer', | ||
| component: Drawer, | ||
| argTypes: { | ||
| className: { | ||
| control: false, | ||
| }, | ||
| onClose: { | ||
| control: false, | ||
| }, | ||
| onExpand: { | ||
| control: false, | ||
| }, | ||
| toggleFullwidth: { | ||
| control: false, | ||
| }, | ||
| toggleMinimize: { | ||
| control: false, | ||
| }, | ||
| actions: { | ||
| control: false, | ||
| }, | ||
| testId: { | ||
| control: false, | ||
| }, | ||
| icon: { | ||
| options: Object.keys(iconOptions), | ||
| mapping: iconOptions, | ||
| control: { | ||
| type: 'select', | ||
| labels: iconMap, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| type Story = StoryObj<typeof Drawer>; | ||
|
|
||
| export const Default: Story = { | ||
| render: function useDrawerStory(args) { | ||
| const [open, setOpen] = useState(false); | ||
| const toggleOpen = () => setOpen((prevOpen) => !prevOpen); | ||
|
|
||
| return ( | ||
| <div style={{ padding: '20px', display: 'flex' }}> | ||
| <div style={{ padding: '10px' }}> | ||
| <Button variant="primary" onClick={toggleOpen}> | ||
| Click to open Drawer | ||
| </Button> | ||
| </div> | ||
| {open && ( | ||
| <Drawer {...args} onClose={toggleOpen}> | ||
| Content goes here | ||
| </Drawer> | ||
| )} | ||
| </div> | ||
| ); | ||
| }, | ||
| args: { | ||
| title: 'Drawer Title', | ||
| anchor: 'right', | ||
| isBackdropDisabled: false, | ||
| width: '700', | ||
| offset: 0, | ||
| shouldCloseByEsc: true, | ||
| shouldDisplayHeader: true, | ||
| isMinimized: false, | ||
| isFullWidth: false, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React from 'react'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
| import { act, render, renderHook, screen } from '@testing-library/react'; | ||
|
|
||
| import { Drawer } from './Drawer'; | ||
| import { useDrawerClose } from '../../hooks'; | ||
|
|
||
| const defaultProps = { | ||
| title: 'This is a title', | ||
| onClose: vi.fn(), | ||
| children: 'dwadaw', | ||
| }; | ||
|
|
||
| describe('Drawer Component', () => { | ||
| describe('useDrawerClose', () => { | ||
| describe('when user has not clicked', () => { | ||
| it('should return closing =false', () => { | ||
| const close = vi.fn(); | ||
| const { result } = renderHook(() => useDrawerClose(close)); | ||
|
|
||
| expect(result.current.closing).toEqual(false); | ||
| }); | ||
| }); | ||
| describe('when user has clicked', () => { | ||
| it('should return closing = true', () => { | ||
| const close = vi.fn(); | ||
| const { result } = renderHook(() => useDrawerClose(close)); | ||
|
|
||
| const { closeWithDelay } = result.current; | ||
| act(() => { | ||
| closeWithDelay(); | ||
| }); | ||
|
|
||
| expect(result.current.closing).toEqual(true); | ||
| }); | ||
| it('should call onClick fn after reaching the threshold', () => { | ||
| const close = vi.fn(); | ||
| vi.useFakeTimers(); | ||
|
|
||
| const { result } = renderHook(() => useDrawerClose(close)); | ||
|
|
||
| const { closeWithDelay } = result.current; | ||
| act(() => { | ||
| closeWithDelay(); | ||
| }); | ||
| vi.runAllTimers(); | ||
|
|
||
| expect(close.mock.calls.length).toEqual(1); | ||
| }); | ||
| }); | ||
| }); | ||
| describe('Drawer', () => { | ||
| it('should render', () => { | ||
| render(<Drawer {...defaultProps} />); | ||
| expect(screen.getByTestId('ui-drawer-portal')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should show children', () => { | ||
| const { children } = defaultProps; | ||
| render(<Drawer {...defaultProps} />); | ||
|
|
||
| expect(screen.getByText(children)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should with backdrop', () => { | ||
| render(<Drawer {...defaultProps} />); | ||
|
|
||
| expect(screen.getByTestId('ui-drawer-portal-backdrop')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render without backdrop', () => { | ||
| render(<Drawer isBackdropDisabled {...defaultProps} />); | ||
| expect(screen.queryByTestId('ui-drawer-portal-backdrop')).toBeFalsy(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import React, { ReactNode } from 'react'; | ||
| import { noop } from 'lodash'; | ||
|
|
||
| import { DrawerPortal } from './DrawerPortal'; | ||
| import { DrawerLayout, IDrawerAction } from './DrawerLayout'; | ||
| import { useDrawerClose } from '../../hooks'; | ||
|
|
||
| interface IDrawerProps { | ||
| title: ReactNode; | ||
| children: ReactNode; | ||
| anchor?: 'right' | 'left'; | ||
| icon?: ReactNode; | ||
| width?: string; | ||
| offset?: number; | ||
| shouldCloseByEsc?: boolean; | ||
| shouldDisplayHeader?: boolean; | ||
| isBackdropDisabled?: boolean; | ||
| actions?: IDrawerAction[]; | ||
| className?: string; | ||
| isMinimized?: boolean; | ||
| isFullWidth?: boolean; | ||
| onClose?: () => void; | ||
| toggleMinimize?: () => void; | ||
| toggleFullwidth?: () => void; | ||
| onExpand?: () => void; | ||
| testId?: string; | ||
| } | ||
|
|
||
| export const Drawer: React.FC<IDrawerProps> = ({ | ||
| children, | ||
| title, | ||
| icon, | ||
| offset = 0, | ||
| width = '700', | ||
| shouldDisplayHeader = true, | ||
| shouldCloseByEsc = true, | ||
| isBackdropDisabled = false, | ||
| onClose = noop, | ||
| anchor = 'right', | ||
| actions, | ||
| className, | ||
| toggleMinimize, | ||
| isMinimized, | ||
| toggleFullwidth, | ||
| isFullWidth, | ||
| onExpand, | ||
| testId = 'ui-drawer', | ||
| }) => { | ||
| const { closing, closeWithDelay } = useDrawerClose(onClose); | ||
|
|
||
| return ( | ||
| <DrawerPortal | ||
| onClose={closeWithDelay} | ||
| closing={closing} | ||
| width={width} | ||
| offset={offset} | ||
| anchor={anchor} | ||
| shouldCloseByEsc={shouldCloseByEsc} | ||
| isBackdropDisabled={isBackdropDisabled} | ||
| className={className} | ||
| toggleMinimize={toggleMinimize} | ||
| isMinimized={isMinimized} | ||
| toggleFullwidth={toggleFullwidth} | ||
| isFullWidth={isFullWidth} | ||
| onExpand={onExpand} | ||
| testId={`${testId}-portal`} | ||
| > | ||
| <DrawerLayout | ||
| onClose={closeWithDelay} | ||
| title={title} | ||
| shouldDisplayHeader={shouldDisplayHeader} | ||
| icon={icon} | ||
| actions={actions} | ||
| testId={`${testId}-layout`} | ||
| > | ||
| {children} | ||
| </DrawerLayout> | ||
| </DrawerPortal> | ||
| ); | ||
| }; |
Oops, something went wrong.