diff --git a/README.md b/README.md index 2842d147..a4a78486 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,10 @@ For **BREAKING CHANGES** Type a brief description of the breaking change when as ## Breaking Changes +### Version 7 + +In SQForm v7, we have removed the SQFormIconButton in favor of the SQFormButton where the text says either "Submit" or "Save". Please replace all occurrences of SQFormIconButton with SQFormButton in the consuming application. + ### Version 6 In SQForm v6, we no longer need to pass the `isRequired` prop to any form components. The components now derive whether or not they are a required field based on the Yup validation schema of the form. @@ -120,11 +124,15 @@ $ npm run storybook ``` ## Running the Docs Page Locally + 1. Install Doc page dependencies + ```sh $ cd SQFormDocs && npm i ``` + 2. Run the docs page + ```sh $ npm run docs ``` diff --git a/src/components/SQForm/SQFormIconButton.js b/src/components/SQForm/SQFormIconButton.js deleted file mode 100644 index b29b84cb..00000000 --- a/src/components/SQForm/SQFormIconButton.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import {useFormButton, BUTTON_TYPES} from './useFormButton'; -import {IconButton} from 'scplus-shared-components'; - -function SQFormIconButton({ - IconComponent, - isIconTeal = false, - isDisabled = false, - shouldRequireFieldUpdates = false, - title = 'Form Submission', - type = BUTTON_TYPES.SUBMIT, - onClick -}) { - const {isButtonDisabled, handleClick} = useFormButton({ - isDisabled, - shouldRequireFieldUpdates, - onClick, - buttonType: type - }); - - function Icon(props) { - return ; - } - - return ( - - ); -} - -SQFormIconButton.propTypes = { - /** The Material UI Icon to render inside the button */ - IconComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]) - .isRequired, - /** Custom disabled state */ - isDisabled: PropTypes.bool, - /** Allows the icon color to be the SQ Teal color */ - isIconTeal: PropTypes.bool, - /** Whether or not the form requires updates to the form to enable the submit button */ - shouldRequireFieldUpdates: PropTypes.bool, - /** The title of the button */ - title: PropTypes.string, - /** Type of button, defaults to 'submit' */ - type: PropTypes.oneOf(Object.values(BUTTON_TYPES)), - /** Standard React event handler */ - onClick: PropTypes.func -}; - -export default SQFormIconButton; diff --git a/src/index.js b/src/index.js index 14b69671..4bf47778 100644 --- a/src/index.js +++ b/src/index.js @@ -26,7 +26,6 @@ export { SQFormDialogStep } from './components/SQFormDialogStepper'; export {default as SQFormDropdown} from './components/SQForm/SQFormDropdown'; -export {default as SQFormIconButton} from './components/SQForm/SQFormIconButton'; export {default as SQFormReadOnlyField} from './components/SQForm/SQFormReadOnlyField'; export {default as SQFormResetButtonWithConfirmation} from './components/SQForm/SQFormResetButtonWithConfirmation'; export {default as SQFormResetInitialValuesButton} from './components/SQForm/SQFormResetInitialValuesButton'; diff --git a/stories/SQForm.stories.js b/stories/SQForm.stories.js index b8e0f1bb..ef67b684 100644 --- a/stories/SQForm.stories.js +++ b/stories/SQForm.stories.js @@ -4,7 +4,6 @@ import {withKnobs, boolean} from '@storybook/addon-knobs'; import {action} from '@storybook/addon-actions'; import Card from '@material-ui/core/Card'; import Grid from '@material-ui/core/Grid'; -import CheckMarkIcon from '@material-ui/icons/CheckCircle'; import {SectionHeader} from 'scplus-shared-components'; import FriendsFieldArray from './components/FriendsFieldArray'; @@ -17,7 +16,6 @@ import { SQFormTextarea, SQFormTextField, SQFormButton, - SQFormIconButton, SQFormAutocomplete, SQFormCheckbox, SQFormDropdown, @@ -486,7 +484,7 @@ export const basicFormWithMultiSelect = () => { {MOCK_FRIENDS_OPTIONS} - + Submit @@ -719,7 +717,7 @@ export const applyAnAction = () => { rowsMax={2} /> - + Submit @@ -805,7 +803,7 @@ export const ccaChecklist = () => { {dropdownOptions} - + Submit diff --git a/stories/SQFormIconButton.stories.js b/stories/SQFormIconButton.stories.js deleted file mode 100644 index 8742d993..00000000 --- a/stories/SQFormIconButton.stories.js +++ /dev/null @@ -1,82 +0,0 @@ -import React from 'react'; -import Grid from '@material-ui/core/Grid'; -import CheckCircle from '@material-ui/icons/CheckCircle'; -import Close from '@material-ui/icons/Close'; -import AddCircle from '@material-ui/icons/AddCircle'; -import History from '@material-ui/icons/History'; - -import { - SQFormIconButton as SQFormIconButtonComponent, - SQFormTextField -} from '../src'; -import {SQFormStoryWrapper} from './components/SQFormStoryWrapper'; -import {createDocsPage} from './utils/createDocsPage'; - -const icons = {CheckCircle, Close, AddCircle, History}; - -export default { - title: 'Components/SQFormIconButton', - component: SQFormIconButtonComponent, - argTypes: { - onClick: {action: 'clicked', table: {disable: true}}, - IconComponent: {table: {disable: true}} - }, - parameters: { - docs: { - page: createDocsPage() - } - } -}; - -// prevents synthetic event warnings -const handleClick = event => event.persist(); - -export const Default = args => { - const {exampleIcons, ...rest} = args; - - return ( - - - - ); -}; -Default.argTypes = { - exampleIcons: { - name: 'Example icons:', - options: Object.keys(icons), - mapping: icons, - control: { - type: 'radio', - labels: { - CheckCircle: 'CheckCircle', - Close: 'Close', - AddCircle: 'AddCircle', - History: 'History' - } - }, - defaultValue: 'CheckCircle' - } -}; - -export const WithTestField = args => { - return ( - - - - - - - - - - - ); -}; diff --git a/stories/__tests__/SQFormIconButton.stories.test.js b/stories/__tests__/SQFormIconButton.stories.test.js deleted file mode 100644 index 170d356f..00000000 --- a/stories/__tests__/SQFormIconButton.stories.test.js +++ /dev/null @@ -1,153 +0,0 @@ -import React from 'react'; -import CheckCircle from '@material-ui/icons/CheckCircle'; -import {composeStories} from '@storybook/testing-react'; -import {render, screen, within, fireEvent} from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import * as stories from '../SQFormIconButton.stories'; - -const { - Default: SQFormIconButton, - WithTestField: SQFormIconButtonWithField -} = composeStories(stories); - -describe('SQFormIconButton Tests', () => { - describe('Button Only', () => { - it('should render a button with an icon', () => { - render(); - - const iconButton = screen.getByRole('button', {name: /form submission/i}); - const svg = within(iconButton).getByTitle(/form submission/i); - - expect(iconButton).toBeInTheDocument(); - expect(svg).toBeInTheDocument(); - }); - - it('should render a submit button', () => { - render(); - - const iconButton = screen.getByRole('button', {name: /form submission/i}); - - expect(iconButton).toBeInTheDocument(); - expect(iconButton).toHaveAttribute('type', 'submit'); - }); - - it('should render a reset button given the type reset', () => { - render(); - - const iconButton = screen.getByRole('button', { - name: /form submission/i - }); - - expect(iconButton).toBeInTheDocument(); - expect(iconButton).toHaveAttribute('type', 'reset'); - }); - - it('should call a function when clicked', () => { - const onClickSpy = jest.fn(); - render( - - ); - - const iconButton = screen.getByRole('button', { - name: /form submission/i - }); - - userEvent.click(iconButton); - - expect(onClickSpy).toHaveBeenCalled(); - }); - - it('should show as disabled when isDisabled is true', () => { - render(); - - const iconButton = screen.getByRole('button', { - name: /form submission/i - }); - - expect(iconButton).toBeDisabled(); - }); - - it('should not fire onClick when disabled', () => { - const onClickSpy = jest.fn(); - render( - - ); - - const iconButton = screen.getByRole('button', { - name: /form submission/i - }); - - fireEvent.click(iconButton); - - expect(onClickSpy).not.toHaveBeenCalled(); - }); - - it('should disable when shouldRequireFieldUpdates is true', () => { - render( - - ); - - const iconButton = screen.getByRole('button', { - name: /form submission/i - }); - - expect(iconButton).toBeDisabled(); - }); - }); - - describe('Button with Test Field', () => { - it('should render a button and a text field', () => { - render(); - - const testField = screen.getByLabelText(/test field/i); - - expect(testField).toBeInTheDocument(); - - const iconButton = screen.getByRole('button', { - name: /form submission/i - }); - - expect(iconButton).toBeInTheDocument(); - }); - - it('should enable after field value is changed when shouldRequireFieldUpdates is true', () => { - render(); - - const iconButton = screen.getByRole('button', { - name: /form submission/i - }); - expect(iconButton).toBeDisabled(); - - const testField = screen.getByLabelText(/test field/i); - - userEvent.type(testField, 'Hello'); - - expect(iconButton).toBeEnabled(); - }); - - it('should reset field when clicked', () => { - render(); - - const resetButton = screen.getByRole('button', { - name: /form submission/i - }); - expect(resetButton).toHaveAttribute('type', 'reset'); - - const testField = screen.getByLabelText(/test field/i); - userEvent.type(testField, 'Hello'); - expect(testField).toHaveValue('Hello'); - expect(resetButton).toBeEnabled(); - - userEvent.click(resetButton); - - expect(testField).toHaveValue(''); - }); - }); -}); diff --git a/stories/components/SQFormStoryWrapper.js b/stories/components/SQFormStoryWrapper.js index 0cee62b0..e188d501 100644 --- a/stories/components/SQFormStoryWrapper.js +++ b/stories/components/SQFormStoryWrapper.js @@ -1,7 +1,6 @@ import React from 'react'; -import CheckMarkIcon from '@material-ui/icons/CheckCircle'; import Grid from '@material-ui/core/Grid'; -import {SQForm, SQFormIconButton} from '../../src'; +import {SQForm, SQFormButton} from '../../src'; import { Snackbar, SnackbarProvider, @@ -67,7 +66,7 @@ function Form({ {children} {showSubmit && ( - + Submit )}