diff --git a/login-workflow/docs/components/basic-dialog.md b/login-workflow/docs/components/basic-dialog.md new file mode 100644 index 000000000..3b3b73cfa --- /dev/null +++ b/login-workflow/docs/components/basic-dialog.md @@ -0,0 +1,29 @@ +# BasicDialog + +Component that renders a basic dialog. This component provides a title, a body, and a close button. + +## Usage + +```tsx +import { BasicDialog } from '@brightlayer-ui/react-native-auth-workflow'; + +... + + console.log('close')} +/> +``` + +## API + +| Prop Name | Type | Description | Default | +|---|---|---|---| +| open | `boolean` | Whether the dialog is open. | | +| title | `string` | The title to display in the dialog. | | +| body | `string` | The content to display in the body of the dialog | | +| onDismiss | `() => void` | A function that is called when the close button is clicked. | | +| dismissButtonText | `string` | The text to display in the close button. | `'Okay'` | + +The properties of the underlying React Native Paper's [Dialog](https://callstack.github.io/react-native-paper/docs/components/Dialog/) component are also available. diff --git a/login-workflow/package.json b/login-workflow/package.json index 0a7219ad6..b3770366c 100644 --- a/login-workflow/package.json +++ b/login-workflow/package.json @@ -94,7 +94,7 @@ "@react-native-community/masked-view": "^0.1.7", "@react-navigation/native": "^5.1.1", "@react-navigation/stack": "^5.2.3", - "@testing-library/react-native": "^11.5.0", + "@testing-library/react-native": "^12.4.3", "@types/color": "^3.0.3", "@types/enzyme": "^3.10.5", "@types/enzyme-adapter-react-16": "^1.0.6", diff --git a/login-workflow/src/__tests__/components/Dialog/BasicDialog-test.tsx b/login-workflow/src/__tests__/components/Dialog/BasicDialog-test.tsx new file mode 100644 index 000000000..fb3f48369 --- /dev/null +++ b/login-workflow/src/__tests__/components/Dialog/BasicDialog-test.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { cleanup, fireEvent, render, RenderResult, screen } from '@testing-library/react-native'; +import { BasicDialog, BasicDialogProps } from 'src/components'; +import { Provider as PaperProvider } from 'react-native-paper'; +import '@testing-library/react-native/extend-expect'; + +describe('BasicDialog Test', () => { + const renderer = (props?: BasicDialogProps): RenderResult => + render( + + + + ); + + afterEach(cleanup); + const onDismiss = jest.fn(); + + it('renders correctly', () => { + renderer(); + expect(render).toBeTruthy(); + }); + + it('should display the passed props', () => { + renderer({ open: true, title: 'Dialog Title' }); + expect(screen.getByText('Dialog Title')).toBeOnTheScreen(); + }); + + it('should call onDismiss prop, when button is pressed', () => { + renderer({ open: true, title: 'Dialog Title', onDismiss }); + expect(screen.getByText('Okay')).toBeOnTheScreen(); + fireEvent.press(screen.getByText('Okay')); + expect(onDismiss).toHaveBeenCalled(); + }); +}); diff --git a/login-workflow/src/components/Dialog/BasicDialog.tsx b/login-workflow/src/components/Dialog/BasicDialog.tsx new file mode 100644 index 000000000..947b4eb1f --- /dev/null +++ b/login-workflow/src/components/Dialog/BasicDialog.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import { Paragraph, Dialog, Portal, Button, DialogProps } from 'react-native-paper'; +import { StyleSheet, ViewStyle } from 'react-native'; + +/** + * Component that renders a basic dialog with a title, body description, and a close button. + * + * @param title to show text in the title + * @param body text to show in the body + * @param onClose function to call when the close button is clicked + * @param props all other props will be spread to the underlying Dialog component + * @param dismissButtonText text to show in the close button + * + * @category Component + */ + +const makeStyles = (): StyleSheet.NamedStyles<{ + basicDialog: ViewStyle; + actions: ViewStyle; +}> => + StyleSheet.create({ + basicDialog: { + minWidth: 300, + maxWidth: 600, + alignSelf: 'center', + }, + actions: { + flexGrow: 0, + }, + }); + +export type BasicDialogProps = Omit & { + /** + * The title for the screen + */ + title?: string; + + /** + * The text to show in the main dialog body + */ + body?: string; + + /** + * The function to call when the close button is clicked + * @returns void + */ + onDismiss?: () => void; + + /** + * The text to show in the close button + */ + dismissButtonText?: string; + + /** + * Set the open / closed state of the dialog + * @default false + */ + open?: boolean; +}; + +export const BasicDialog: React.FC = (props) => { + const { title, body, dismissButtonText, open = false, onDismiss, style, ...otherDialogProps } = props; + const defaultStyles = makeStyles(); + + return ( + + + {title} + + {body} + + + + + + + ); +}; diff --git a/login-workflow/src/components/Dialog/index.tsx b/login-workflow/src/components/Dialog/index.tsx new file mode 100644 index 000000000..a04b16076 --- /dev/null +++ b/login-workflow/src/components/Dialog/index.tsx @@ -0,0 +1 @@ +export * from './BasicDialog'; diff --git a/login-workflow/src/components/index.tsx b/login-workflow/src/components/index.tsx index c91d148d2..f49c80899 100644 --- a/login-workflow/src/components/index.tsx +++ b/login-workflow/src/components/index.tsx @@ -1 +1,2 @@ export * from './WorkflowCard'; +export * from './Dialog'; diff --git a/login-workflow/yarn.lock b/login-workflow/yarn.lock index 8cb48b243..d126dc3df 100644 --- a/login-workflow/yarn.lock +++ b/login-workflow/yarn.lock @@ -2036,12 +2036,14 @@ dependencies: defer-to-connect "^1.0.1" -"@testing-library/react-native@^11.5.0": - version "11.5.4" - resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-11.5.4.tgz#5c57c0c5afc3f1960ff491aba68f66adc899e1cc" - integrity sha512-6DRzMHqili5pp1JRm7fh80SAP48aR25b37gohlLoKbqGBpDw8BbZTad7Luzktm9MU5DQUm7xyzg07Z1CyveVFA== +"@testing-library/react-native@^12.4.3": + version "12.4.3" + resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.4.3.tgz#57cd6a88b289f19144558b5e97336b57101af3ec" + integrity sha512-WLE7VbbR5jZJQl3vfNK7Wt+IHnzhOxyu95Mr56EHmzH3XhC8DkrPVAnUq9asq/QWj4aGnymbinFx6zZys/WZmA== dependencies: - pretty-format "^29.0.0" + jest-matcher-utils "^29.7.0" + pretty-format "^29.7.0" + redent "^3.0.0" "@tootallnate/once@1": version "1.1.2" @@ -7607,6 +7609,11 @@ mimic-response@^1.0.0, mimic-response@^1.0.1: resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b" integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ== +min-indent@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" + integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== + "minimatch@2 || 3", minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b" @@ -8800,6 +8807,14 @@ recast@^0.21.0: source-map "~0.6.1" tslib "^2.0.1" +redent@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f" + integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg== + dependencies: + indent-string "^4.0.0" + strip-indent "^3.0.0" + reflect.getprototypeof@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3" @@ -9674,6 +9689,13 @@ strip-final-newline@^2.0.0: resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad" integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA== +strip-indent@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001" + integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ== + dependencies: + min-indent "^1.0.0" + strip-json-comments@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"