diff --git a/src/components/EditGrid/EditGridItem.js b/src/components/EditGrid/EditGridItem.js index 0c80d8f0e..145a4ddd2 100644 --- a/src/components/EditGrid/EditGridItem.js +++ b/src/components/EditGrid/EditGridItem.js @@ -3,7 +3,7 @@ import React from 'react'; import {getBEMClassName} from 'utils'; -const EditGridItem = ({heading, body, buttons}) => { +const EditGridItem = ({heading, children: body, buttons}) => { return (
{heading}
@@ -15,7 +15,7 @@ const EditGridItem = ({heading, body, buttons}) => { EditGridItem.propTypes = { heading: PropTypes.string.isRequired, - body: PropTypes.node, + children: PropTypes.node, buttons: PropTypes.node, }; diff --git a/src/components/EditGrid/EditGridItem.stories.js b/src/components/EditGrid/EditGridItem.stories.js index d8261708b..6a79f2a3b 100644 --- a/src/components/EditGrid/EditGridItem.stories.js +++ b/src/components/EditGrid/EditGridItem.stories.js @@ -7,12 +7,12 @@ export default { title: 'Pure React components / EditGrid / Item', component: EditGridItemComponent, argTypes: { - body: {control: false}, + children: {control: false}, buttons: {control: false}, }, args: { heading: 'Item heading', - body: Item body, typically form fields, + children: Item body, typically form fields, buttons: ( diff --git a/src/components/appointments/steps/ChooseProductStep.js b/src/components/appointments/steps/ChooseProductStep.js index acf93ca8f..8f495056d 100644 --- a/src/components/appointments/steps/ChooseProductStep.js +++ b/src/components/appointments/steps/ChooseProductStep.js @@ -10,8 +10,8 @@ import {toFormikValidationSchema} from 'zod-formik-adapter'; import Button from 'components/Button'; import {CardTitle} from 'components/Card'; +import {EditGridButtonGroup, EditGridItem} from 'components/EditGrid'; import FAIcon from 'components/FAIcon'; -import {Toolbar, ToolbarList} from 'components/Toolbar'; import useQuery from 'hooks/useQuery'; import useTitle from 'hooks/useTitle'; import {getBEMClassName} from 'utils'; @@ -119,31 +119,31 @@ const ProductWrapper = ({index, numProducts, onRemove, children}) => { if (!supportsMultipleProducts) { return <>{children}; } + + const buttonRow = numProducts > 1 && ( + + + + ); + return ( -
-
+ -
- + } + buttons={buttonRow} + > {children} - - {numProducts > 1 && ( - - - - - - )} -
+ ); };