♻️ [#454] Refactor ChooseProductStep to use EditGridItem component

open-formulieren · Oct 19, 2023 · aa6fe70 · aa6fe70
1 parent d36c30e
commit aa6fe70
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 23 deletions.
diff --git 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 (
     <div className={getBEMClassName('editgrid__group')}>
       <div className={getBEMClassName('editgrid__group-label')}>{heading}</div>
@@ -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
@@ -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: <Body>Item body, typically form fields</Body>,
+    children: <Body>Item body, typically form fields</Body>,
     buttons: (
       <EditGridButtonGroup>
         <Button variant="primary">Save</Button>

diff --git 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 && (
+    <EditGridButtonGroup>
+      <Button type="button" variant="danger" onClick={onRemove}>
+        <FormattedMessage
+          description="Appointments: remove product/service button text"
+          defaultMessage="Remove"
+        />
+      </Button>
+    </EditGridButtonGroup>
+  );
+
   return (
-    <div className={getBEMClassName('editgrid__group')}>
-      <div className={getBEMClassName('editgrid__group-label')}>
+    <EditGridItem
+      heading={
         <FormattedMessage
           description="Appointments: single product label/header"
           defaultMessage="Product {number}/{total}"
           values={{number: index + 1, total: numProducts}}
         />
-      </div>
-
+      }
+      buttons={buttonRow}
+    >
       {children}
-
-      {numProducts > 1 && (
-        <Toolbar modifiers={['reverse']}>
-          <ToolbarList>
-            <Button type="button" variant="danger" onClick={onRemove}>
-              <FormattedMessage
-                description="Appointments: remove product/service button text"
-                defaultMessage="Remove"
-              />
-            </Button>
-          </ToolbarList>
-        </Toolbar>
-      )}
-    </div>
+    </EditGridItem>
   );
 };