docs(AssignHE): Wrote documentation for AssignHE Contextual Box

packages/component-faraday-ui/src/contextualBoxes/AssignHE.js

 import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { Button, TextField } from '@pubsweet/ui'
@@ -49,7 +50,7 @@ const AssignHE = ({
     </TextContainer>
     {handlingEditors.length > 0 && (
       <Fragment>
-        <Row alignItems="center" height={4} pl={1}>
+        <Row alignItems="center" height="4" pl={1}>
           <Item flex={1}>
             <Label>Name</Label>
           </Item>
@@ -62,7 +63,7 @@ const AssignHE = ({
           <CustomRow
             alignItems="center"
             data-test-id={`manuscript-assign-he-invite-${he.id}`}
-            height={4}
+            height="4"
             isFirst={index === 0}
             key={he.id}
             pl={1}
@@ -96,6 +97,27 @@ const AssignHE = ({
   </Root>
 )
 
+AssignHE.propTypes = {
+  /** Changes the search value to lowercase letters. */
+  changeSearch: PropTypes.func,
+  /** The value of the search input box. */
+  searchValue: PropTypes.string,
+  /** Clears the value of the search input box. */
+  clearSearch: PropTypes.func,
+  /** The list of available handling editors. */
+  handlingEditors: PropTypes.arrayOf(PropTypes.object),
+  /** Invites the selected handling editor. */
+  inviteHandlingEditor: PropTypes.func,
+}
+
+AssignHE.defaultProps = {
+  changeSearch: undefined,
+  searchValue: '',
+  clearSearch: undefined,
+  handlingEditors: [],
+  inviteHandlingEditor: undefined,
+}
+
 export default compose(
   defaultProps({
     inviteHandlingEditor: he => {},
@@ -134,7 +156,6 @@ export default compose(
 // #region styles
 const Root = styled.div`
   background-color: ${th('colorBackgroundHue2')};
-
   ${paddingHelper};
 `
 

packages/component-faraday-ui/src/contextualBoxes/AssignHE.md

@@ -2,12 +2,22 @@ Assign Handling Editor contextual box.
 
 ```js
 const handlingEditors = [
-  { id: '1', name: 'Handling Edi', email: 'handling@edi.com' },
-  { id: '2', name: 'Aurel Vlaicu', email: 'aurel@vlaicu.com' },
-  { id: '3', name: 'Gheorghe Hagi', email: 'gica@hagi.com' },
-];
+  {
+    id: '1',
+    firstName: 'Handling',
+    lastName: 'Edi',
+    email: 'handling@edi.com',
+  },
+  {
+    id: '2',
+    firstName: 'Aurel',
+    lastName: 'Vlaicu',
+    email: 'aurel@vlaicu.com',
+  },
+  { id: '3', firstName: 'Gheorghe', lastName: 'Hagi', email: 'gica@hagi.com' },
+]
 
-<ContextualBox label="Assign Handling Editor">
+;<ContextualBox label="Assign Handling Editor">
   <AssignHE
     handlingEditors={handlingEditors}
     inviteHandlingEditor={he => console.log('inviting: ', he)}