From 7cbbb8a3be1608b7a48a0fc4c8fd2c890a4d2dda Mon Sep 17 00:00:00 2001
From: Lee Wilson <lee.wilson@coolestbananas.co.uk>
Date: Mon, 19 Aug 2019 18:01:58 +0100
Subject: [PATCH] feat: Add entity click event

---
 src/entity-search/EntityList.jsx              |  24 +-
 src/entity-search/EntitySearch.jsx            |   4 +-
 src/entity-search/EntitySearch.stories.jsx    |   1 +
 src/entity-search/EntitySearch.test.jsx       |  40 ++
 .../__snapshots__/EntitySearch.test.jsx.snap  | 377 +++++++++++++++---
 5 files changed, 386 insertions(+), 60 deletions(-)

diff --git a/src/entity-search/EntityList.jsx b/src/entity-search/EntityList.jsx
index 2191c774..b9244ee0 100644
--- a/src/entity-search/EntityList.jsx
+++ b/src/entity-search/EntityList.jsx
@@ -30,6 +30,7 @@ const StyledEntity = styled('div')`
     }
   }
 `
+StyledEntity.displayName = 'StyledEntity'
 
 const StyledHeading = styled(H3)`
   margin: 0;
@@ -51,22 +52,20 @@ const StyledMetaItem = styled('div')`
   }
 `
 
-const EntityList = ({ entities }) => {
+const EntityList = ({ entities, onEntityClick }) => {
   return (
     <StyledEntityList>
-      {entities.map(({ heading, meta }) => {
+      {entities.map((entity) => {
         return (
           <StyledEntityListItem key={uniqueId()}>
-            <StyledEntity key={uniqueId()}>
-              <StyledHeading>{heading}</StyledHeading>
-              {Object.keys(meta).map((metaKey) => {
-                return (
-                  <StyledMetaItem key={uniqueId()}>
-                    <span>{metaKey}:</span>
-                    <span>{meta[metaKey]}</span>
-                  </StyledMetaItem>
-                )
-              })}
+            <StyledEntity key={uniqueId()} onClick={() => onEntityClick(entity)}>
+              <StyledHeading>{entity.heading}</StyledHeading>
+              {Object.keys(entity.meta).map(metaKey => (
+                <StyledMetaItem key={uniqueId()}>
+                  <span>{metaKey}:</span>
+                  <span>{entity.meta[metaKey]}</span>
+                </StyledMetaItem>
+              ))}
             </StyledEntity>
           </StyledEntityListItem>
         )
@@ -80,6 +79,7 @@ EntityList.propTypes = {
     heading: PropTypes.string.isRequired,
     meta: PropTypes.object.isRequired,
   })).isRequired,
+  onEntityClick: PropTypes.func.isRequired,
 }
 
 export default EntityList
diff --git a/src/entity-search/EntitySearch.jsx b/src/entity-search/EntitySearch.jsx
index 0428dbee..0a5612de 100644
--- a/src/entity-search/EntitySearch.jsx
+++ b/src/entity-search/EntitySearch.jsx
@@ -21,6 +21,7 @@ const EntitySearch = ({
   onEntitySearch,
   entities,
   cannotFind,
+  onEntityClick,
 }) => {
   const { filters, setFilter } = useFilter()
   return (
@@ -31,7 +32,7 @@ const EntitySearch = ({
 
       {entities && entities.length ? (
         <>
-          <EntityList entities={entities} />
+          <EntityList entities={entities} onEntityClick={onEntityClick} />
           <CannotFindDetails {...cannotFind} />
         </>
       ) : null}
@@ -61,6 +62,7 @@ EntitySearch.propTypes = {
     text: PropTypes.string.isRequired,
     onChangeClick: PropTypes.func.isRequired,
   }),
+  onEntityClick: PropTypes.func.isRequired,
 }
 
 EntitySearch.defaultProps = {
diff --git a/src/entity-search/EntitySearch.stories.jsx b/src/entity-search/EntitySearch.stories.jsx
index e80a3e76..2ead2f74 100644
--- a/src/entity-search/EntitySearch.stories.jsx
+++ b/src/entity-search/EntitySearch.stories.jsx
@@ -44,6 +44,7 @@ const EntitySearchForStorybook = ({ previouslySelected, cannotFindLink }) => {
         ],
         link: cannotFindLink,
       }}
+      onEntityClick={entity => alert(`Selected ${JSON.stringify(entity)}`)}
     />
   )
 }
diff --git a/src/entity-search/EntitySearch.test.jsx b/src/entity-search/EntitySearch.test.jsx
index e6a7a7cb..ce7d0aef 100644
--- a/src/entity-search/EntitySearch.test.jsx
+++ b/src/entity-search/EntitySearch.test.jsx
@@ -32,6 +32,7 @@ const wrapEntitySearch = ({
     url: 'http://stillcannotfind.com',
     text: 'still cannot find',
   },
+  onEntityClick = () => console.log('entity clicked'),
 } = {}) => {
   return mount(<EntitySearchWithDataProvider
     previouslySelected={previouslySelected}
@@ -52,6 +53,7 @@ const wrapEntitySearch = ({
       ],
       link: cannotFindLink,
     }}
+    onEntityClick={onEntityClick}
   />)
 }
 
@@ -200,4 +202,42 @@ describe('EntitySearch', () => {
       expect(onChangeClick.mock.calls.length).toEqual(1)
     })
   })
+
+  describe('when the first entity search result is clicked', () => {
+    let wrappedEntitySearch
+    let onEntityClick
+
+    beforeAll(async () => {
+      onEntityClick = jest.fn()
+
+      wrappedEntitySearch = wrapEntitySearch({
+        onEntityClick,
+      })
+
+      wrappedEntitySearch.find('Search').simulate('click')
+
+      await act(flushPromises)
+
+      wrappedEntitySearch.update()
+
+      wrappedEntitySearch
+        .find('StyledEntity')
+        .at(0)
+        .simulate('click')
+    })
+
+    test('should render the component', async () => {
+      expect(wrappedEntitySearch.debug()).toMatchSnapshot()
+    })
+
+    test('should call the onEntityClick event', async () => {
+      expect(onEntityClick.mock.calls.length).toEqual(1)
+      expect(onEntityClick.mock.calls[0][0]).toEqual({
+        heading: 'Some company name',
+        meta: {
+          Address: '123 Fake Street, Brighton, BN1 4SE',
+        },
+      })
+    })
+  })
 })
diff --git a/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap b/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap
index 6e6e9cc4..fb0e2884 100644
--- a/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap
+++ b/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EntitySearch when initially loading the entity search component should render the component without entities 1`] = `
-"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
-  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function]}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function]}>
     <EntityFilters entityFilters={{...}} setFilter={[Function: setFilter]}>
       <styled.div>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
@@ -129,8 +129,8 @@ exports[`EntitySearch when initially loading the entity search component should
 `;
 
 exports[`EntitySearch when the "Search" button has been clicked should render the component with entities 1`] = `
-"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
-  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function]}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function]}>
     <EntityFilters entityFilters={{...}} setFilter={[Function: setFilter]}>
       <styled.div>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
@@ -239,16 +239,16 @@ exports[`EntitySearch when the "Search" button has been clicked should render th
         </StyledComponent>
       </styled.div>
     </EntityFilters>
-    <EntityList entities={{...}}>
+    <EntityList entities={{...}} onEntityClick={[Function]}>
       <styled.ol>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
           <ol className=\\"sc-hMFtBS grkyBm\\">
             <styled.li>
               <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                 <li className=\\"sc-cLQEGU gPxdWW\\">
-                  <styled.div>
-                    <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
-                      <div className=\\"sc-gqPbQI gVrHKE\\">
+                  <StyledEntity onClick={[Function: onClick]}>
+                    <StyledComponent onClick={[Function: onClick]} forwardedComponent={{...}} forwardedRef={{...}}>
+                      <div onClick={[Function: onClick]} className=\\"sc-gqPbQI gVrHKE\\">
                         <Styled(H3)>
                           <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                             <H3 className=\\"sc-hORach fiyYtT\\">
@@ -279,16 +279,16 @@ exports[`EntitySearch when the "Search" button has been clicked should render th
                         </styled.div>
                       </div>
                     </StyledComponent>
-                  </styled.div>
+                  </StyledEntity>
                 </li>
               </StyledComponent>
             </styled.li>
             <styled.li>
               <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                 <li className=\\"sc-cLQEGU gPxdWW\\">
-                  <styled.div>
-                    <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
-                      <div className=\\"sc-gqPbQI gVrHKE\\">
+                  <StyledEntity onClick={[Function: onClick]}>
+                    <StyledComponent onClick={[Function: onClick]} forwardedComponent={{...}} forwardedRef={{...}}>
+                      <div onClick={[Function: onClick]} className=\\"sc-gqPbQI gVrHKE\\">
                         <Styled(H3)>
                           <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                             <H3 className=\\"sc-hORach fiyYtT\\">
@@ -319,7 +319,7 @@ exports[`EntitySearch when the "Search" button has been clicked should render th
                         </styled.div>
                       </div>
                     </StyledComponent>
-                  </styled.div>
+                  </StyledEntity>
                 </li>
               </StyledComponent>
             </styled.li>
@@ -412,8 +412,8 @@ exports[`EntitySearch when the "Search" button has been clicked should render th
 `;
 
 exports[`EntitySearch when the company name filter is applied should render the component with filtered entities 1`] = `
-"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
-  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function]}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function]}>
     <EntityFilters entityFilters={{...}} setFilter={[Function: setFilter]}>
       <styled.div>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
@@ -522,16 +522,16 @@ exports[`EntitySearch when the company name filter is applied should render the
         </StyledComponent>
       </styled.div>
     </EntityFilters>
-    <EntityList entities={{...}}>
+    <EntityList entities={{...}} onEntityClick={[Function]}>
       <styled.ol>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
           <ol className=\\"sc-hMFtBS grkyBm\\">
             <styled.li>
               <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                 <li className=\\"sc-cLQEGU gPxdWW\\">
-                  <styled.div>
-                    <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
-                      <div className=\\"sc-gqPbQI gVrHKE\\">
+                  <StyledEntity onClick={[Function: onClick]}>
+                    <StyledComponent onClick={[Function: onClick]} forwardedComponent={{...}} forwardedRef={{...}}>
+                      <div onClick={[Function: onClick]} className=\\"sc-gqPbQI gVrHKE\\">
                         <Styled(H3)>
                           <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                             <H3 className=\\"sc-hORach fiyYtT\\">
@@ -562,7 +562,7 @@ exports[`EntitySearch when the company name filter is applied should render the
                         </styled.div>
                       </div>
                     </StyledComponent>
-                  </styled.div>
+                  </StyledEntity>
                 </li>
               </StyledComponent>
             </styled.li>
@@ -655,8 +655,8 @@ exports[`EntitySearch when the company name filter is applied should render the
 `;
 
 exports[`EntitySearch when the company postcode filter is applied should render the component with filtered entities 1`] = `
-"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
-  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function]}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function]}>
     <EntityFilters entityFilters={{...}} setFilter={[Function: setFilter]}>
       <styled.div>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
@@ -765,16 +765,259 @@ exports[`EntitySearch when the company postcode filter is applied should render
         </StyledComponent>
       </styled.div>
     </EntityFilters>
-    <EntityList entities={{...}}>
+    <EntityList entities={{...}} onEntityClick={[Function]}>
       <styled.ol>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
           <ol className=\\"sc-hMFtBS grkyBm\\">
             <styled.li>
               <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                 <li className=\\"sc-cLQEGU gPxdWW\\">
+                  <StyledEntity onClick={[Function: onClick]}>
+                    <StyledComponent onClick={[Function: onClick]} forwardedComponent={{...}} forwardedRef={{...}}>
+                      <div onClick={[Function: onClick]} className=\\"sc-gqPbQI gVrHKE\\">
+                        <Styled(H3)>
+                          <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                            <H3 className=\\"sc-hORach fiyYtT\\">
+                              <Heading as=\\"h3\\" size=\\"MEDIUM\\" className=\\"sc-hORach fiyYtT\\" level={[undefined]}>
+                                <styled.h1 as=\\"h3\\" size=\\"MEDIUM\\" className=\\"sc-hORach fiyYtT\\">
+                                  <StyledComponent as=\\"h3\\" size=\\"MEDIUM\\" className=\\"sc-hORach fiyYtT\\" forwardedComponent={{...}} forwardedRef={{...}}>
+                                    <h3 size=\\"MEDIUM\\" className=\\"sc-hORach fiyYtT sc-cMljjf kCLKvB\\">
+                                      Some company name
+                                    </h3>
+                                  </StyledComponent>
+                                </styled.h1>
+                              </Heading>
+                            </H3>
+                          </StyledComponent>
+                        </Styled(H3)>
+                        <styled.div>
+                          <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                            <div className=\\"sc-bMVAic dNkIsp\\">
+                              <span>
+                                Address
+                                :
+                              </span>
+                              <span>
+                                123 Fake Street, Brighton, BN1 4SE
+                              </span>
+                            </div>
+                          </StyledComponent>
+                        </styled.div>
+                      </div>
+                    </StyledComponent>
+                  </StyledEntity>
+                </li>
+              </StyledComponent>
+            </styled.li>
+          </ol>
+        </StyledComponent>
+      </styled.ol>
+    </EntityList>
+    <CannotFindDetails summary=\\"cannot find summary\\" actions={{...}} link={{...}}>
+      <Styled(Details) summary=\\"cannot find summary\\">
+        <StyledComponent summary=\\"cannot find summary\\" forwardedComponent={{...}} forwardedRef={{...}}>
+          <Details summary=\\"cannot find summary\\" className=\\"sc-cmthru gIMBOz\\" open={false}>
+            <styled.details className=\\"sc-cmthru gIMBOz\\" open={false}>
+              <StyledComponent className=\\"sc-cmthru gIMBOz\\" open={false} forwardedComponent={{...}} forwardedRef={{...}}>
+                <details className=\\"sc-cmthru gIMBOz sc-kEYyzF ihcnje\\" open={false}>
+                  <styled.summary>
+                    <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                      <summary className=\\"sc-kkGfuU cCdZFh\\">
+                        <styled.span>
+                          <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                            <span className=\\"sc-iAyFgw jRkIxn\\">
+                              cannot find summary
+                            </span>
+                          </StyledComponent>
+                        </styled.span>
+                      </summary>
+                    </StyledComponent>
+                  </styled.summary>
                   <styled.div>
                     <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
-                      <div className=\\"sc-gqPbQI gVrHKE\\">
+                      <div className=\\"sc-hSdWYo dfimje\\">
+                        <div>
+                          <Paragraph supportingText={false} linkRenderer={[Function: linkRenderer]}>
+                            <Styled(ReactMarkdown) source=\\"Try refining your search by taking the following actions:\\" escapeHtml={false} skipHtml={true} allowedTypes={{...}} renderers={{...}} supportingText={false} linkRenderer={[Function: linkRenderer]}>
+                              <StyledComponent source=\\"Try refining your search by taking the following actions:\\" escapeHtml={false} skipHtml={true} allowedTypes={{...}} renderers={{...}} supportingText={false} linkRenderer={[Function: linkRenderer]} forwardedComponent={{...}} forwardedRef={{...}}>
+                                <ReactMarkdown source=\\"Try refining your search by taking the following actions:\\" escapeHtml={false} skipHtml={true} allowedTypes={{...}} renderers={{...}} supportingText={false} linkRenderer={[Function: linkRenderer]} className=\\"sc-jAaTju fBEFVB\\" sourcePos={false} rawSourcePos={false} transformLinkUri={[Function: uriTransformer]} astPlugins={{...}} plugins={{...}} parserOptions={{...}}>
+                                  <Root className=\\"sc-jAaTju fBEFVB\\">
+                                    <div className=\\"sc-jAaTju fBEFVB\\">
+                                      <p>
+                                        <TextRenderer nodeKey=\\"text-1-1\\" value=\\"Try refining your search by taking the following actions:\\">
+                                          Try refining your search by taking the following actions:
+                                        </TextRenderer>
+                                      </p>
+                                    </div>
+                                  </Root>
+                                </ReactMarkdown>
+                              </StyledComponent>
+                            </Styled(ReactMarkdown)>
+                          </Paragraph>
+                          <ul>
+                            <li>
+                              action 1
+                            </li>
+                            <li>
+                              action 2
+                            </li>
+                          </ul>
+                          <styled.a href=\\"http://stillcannotfind.com\\" onClick={{...}} muted={false} textColour={false} noVisitedState={false}>
+                            <StyledComponent href=\\"http://stillcannotfind.com\\" onClick={{...}} muted={false} textColour={false} noVisitedState={false} forwardedComponent={{...}} forwardedRef={{...}}>
+                              <a href=\\"http://stillcannotfind.com\\" onClick={{...}} muted={false} className=\\"sc-bwzfXH VXMCV\\">
+                                still cannot find
+                              </a>
+                            </StyledComponent>
+                          </styled.a>
+                        </div>
+                      </div>
+                    </StyledComponent>
+                  </styled.div>
+                </details>
+              </StyledComponent>
+            </styled.details>
+          </Details>
+        </StyledComponent>
+      </Styled(Details)>
+    </CannotFindDetails>
+    <Search onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]}>
+      <StyledComponent onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+        <ForwardRef onClick={[Function: onClick]} icon={[undefined]} disabled={false} start={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-exAgwC iIVHNj\\">
+          <styled.button isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-exAgwC iIVHNj\\">
+            <StyledComponent isStart={false} icon={[undefined]} onClick={[Function: onClick]} disabled={false} buttonColour={[undefined]} buttonHoverColour={[undefined]} buttonShadowColour={[undefined]} buttonTextColour={[undefined]} className=\\"sc-exAgwC iIVHNj\\" forwardedComponent={{...}} forwardedRef={{...}}>
+              <button onClick={[Function: onClick]} disabled={false} className=\\"sc-exAgwC iIVHNj sc-VigVT krXvSZ\\">
+                Search
+              </button>
+            </StyledComponent>
+          </styled.button>
+        </ForwardRef>
+      </StyledComponent>
+    </Search>
+  </EntitySearch>
+</EntitySearchWithDataProvider>"
+`;
+
+exports[`EntitySearch when the first entity search result is clicked should render the component 1`] = `
+"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function: mockConstructor]}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function: mockConstructor]}>
+    <EntityFilters entityFilters={{...}} setFilter={[Function: setFilter]}>
+      <styled.div>
+        <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+          <div className=\\"sc-iujRgT iFtdxx\\">
+            <EntityFilterRow filterRow={{...}} setFilter={[Function: setFilter]}>
+              <Styled(GridRow)>
+                <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                  <GridRow className=\\"sc-bAeIUo bPwEFe\\">
+                    <styled.div className=\\"sc-bAeIUo bPwEFe\\">
+                      <StyledComponent className=\\"sc-bAeIUo bPwEFe\\" forwardedComponent={{...}} forwardedRef={{...}}>
+                        <div className=\\"sc-bAeIUo bPwEFe sc-hzDkRC hNOsPM\\">
+                          <GridCol setWidth={[undefined]} columnOneQuarter={false} columnOneThird={false} columnOneHalf={false} columnTwoThirds={false} columnThreeQuarters={false} columnFull={false} setDesktopWidth={[undefined]}>
+                            <styled.div setWidth={[undefined]} columnOneQuarter={false} columnOneThird={false} columnOneHalf={false} columnTwoThirds={false} columnThreeQuarters={false} columnFull={false} setDesktopWidth={[undefined]}>
+                              <StyledComponent setWidth={[undefined]} columnOneQuarter={false} columnOneThird={false} columnOneHalf={false} columnTwoThirds={false} columnThreeQuarters={false} columnFull={false} setDesktopWidth={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+                                <div className=\\"sc-bRBYWo cfvpGy\\">
+                                  <EntityFilter filter={{...}} setFilter={[Function: setFilter]}>
+                                    <InputField onChange={[Function: onChange]} input={{...}} hint={[undefined]} meta={{...}}>
+                                      <Label onChange={[Function: onChange]} error={false}>
+                                        <styled.label onChange={[Function: onChange]} error={false}>
+                                          <StyledComponent onChange={[Function: onChange]} error={false} forwardedComponent={{...}} forwardedRef={{...}}>
+                                            <label onChange={[Function: onChange]} className=\\"sc-ckVGcZ jNBPWj\\">
+                                              <LabelText>
+                                                <styled.span>
+                                                  <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                                                    <span className=\\"sc-kGXeez fmtdbL\\">
+                                                      Company name
+                                                    </span>
+                                                  </StyledComponent>
+                                                </styled.span>
+                                              </LabelText>
+                                              <Input error={[undefined]} name=\\"search_term\\" type=\\"text\\">
+                                                <styled.input type=\\"text\\" error={[undefined]} name=\\"search_term\\">
+                                                  <StyledComponent type=\\"text\\" error={[undefined]} name=\\"search_term\\" forwardedComponent={{...}} forwardedRef={{...}}>
+                                                    <input type=\\"text\\" name=\\"search_term\\" className=\\"sc-dxgOiQ KJcFQ\\" />
+                                                  </StyledComponent>
+                                                </styled.input>
+                                              </Input>
+                                            </label>
+                                          </StyledComponent>
+                                        </styled.label>
+                                      </Label>
+                                    </InputField>
+                                  </EntityFilter>
+                                </div>
+                              </StyledComponent>
+                            </styled.div>
+                          </GridCol>
+                        </div>
+                      </StyledComponent>
+                    </styled.div>
+                  </GridRow>
+                </StyledComponent>
+              </Styled(GridRow)>
+            </EntityFilterRow>
+            <EntityFilterRow filterRow={{...}} setFilter={[Function: setFilter]}>
+              <Styled(GridRow)>
+                <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                  <GridRow className=\\"sc-bAeIUo bPwEFe\\">
+                    <styled.div className=\\"sc-bAeIUo bPwEFe\\">
+                      <StyledComponent className=\\"sc-bAeIUo bPwEFe\\" forwardedComponent={{...}} forwardedRef={{...}}>
+                        <div className=\\"sc-bAeIUo bPwEFe sc-hzDkRC hNOsPM\\">
+                          <GridCol setWidth=\\"one-half\\" columnOneQuarter={false} columnOneThird={false} columnOneHalf={false} columnTwoThirds={false} columnThreeQuarters={false} columnFull={false} setDesktopWidth={[undefined]}>
+                            <styled.div setWidth=\\"one-half\\" columnOneQuarter={false} columnOneThird={false} columnOneHalf={false} columnTwoThirds={false} columnThreeQuarters={false} columnFull={false} setDesktopWidth={[undefined]}>
+                              <StyledComponent setWidth=\\"one-half\\" columnOneQuarter={false} columnOneThird={false} columnOneHalf={false} columnTwoThirds={false} columnThreeQuarters={false} columnFull={false} setDesktopWidth={[undefined]} forwardedComponent={{...}} forwardedRef={{...}}>
+                                <div className=\\"sc-bRBYWo cROHUG\\">
+                                  <EntityFilter filter={{...}} setFilter={[Function: setFilter]}>
+                                    <InputField onChange={[Function: onChange]} input={{...}} hint={[undefined]} meta={{...}}>
+                                      <Label onChange={[Function: onChange]} error={false}>
+                                        <styled.label onChange={[Function: onChange]} error={false}>
+                                          <StyledComponent onChange={[Function: onChange]} error={false} forwardedComponent={{...}} forwardedRef={{...}}>
+                                            <label onChange={[Function: onChange]} className=\\"sc-ckVGcZ jNBPWj\\">
+                                              <LabelText>
+                                                <styled.span>
+                                                  <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                                                    <span className=\\"sc-kGXeez fmtdbL\\">
+                                                      Company postcode
+                                                    </span>
+                                                  </StyledComponent>
+                                                </styled.span>
+                                              </LabelText>
+                                              <Input error={[undefined]} name=\\"address_postcode\\" type=\\"text\\">
+                                                <styled.input type=\\"text\\" error={[undefined]} name=\\"address_postcode\\">
+                                                  <StyledComponent type=\\"text\\" error={[undefined]} name=\\"address_postcode\\" forwardedComponent={{...}} forwardedRef={{...}}>
+                                                    <input type=\\"text\\" name=\\"address_postcode\\" className=\\"sc-dxgOiQ KJcFQ\\" />
+                                                  </StyledComponent>
+                                                </styled.input>
+                                              </Input>
+                                            </label>
+                                          </StyledComponent>
+                                        </styled.label>
+                                      </Label>
+                                    </InputField>
+                                  </EntityFilter>
+                                </div>
+                              </StyledComponent>
+                            </styled.div>
+                          </GridCol>
+                        </div>
+                      </StyledComponent>
+                    </styled.div>
+                  </GridRow>
+                </StyledComponent>
+              </Styled(GridRow)>
+            </EntityFilterRow>
+          </div>
+        </StyledComponent>
+      </styled.div>
+    </EntityFilters>
+    <EntityList entities={{...}} onEntityClick={[Function: mockConstructor]}>
+      <styled.ol>
+        <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+          <ol className=\\"sc-hMFtBS grkyBm\\">
+            <styled.li>
+              <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                <li className=\\"sc-cLQEGU gPxdWW\\">
+                  <StyledEntity onClick={[Function: onClick]}>
+                    <StyledComponent onClick={[Function: onClick]} forwardedComponent={{...}} forwardedRef={{...}}>
+                      <div onClick={[Function: onClick]} className=\\"sc-gqPbQI gVrHKE\\">
                         <Styled(H3)>
                           <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                             <H3 className=\\"sc-hORach fiyYtT\\">
@@ -805,7 +1048,47 @@ exports[`EntitySearch when the company postcode filter is applied should render
                         </styled.div>
                       </div>
                     </StyledComponent>
-                  </styled.div>
+                  </StyledEntity>
+                </li>
+              </StyledComponent>
+            </styled.li>
+            <styled.li>
+              <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                <li className=\\"sc-cLQEGU gPxdWW\\">
+                  <StyledEntity onClick={[Function: onClick]}>
+                    <StyledComponent onClick={[Function: onClick]} forwardedComponent={{...}} forwardedRef={{...}}>
+                      <div onClick={[Function: onClick]} className=\\"sc-gqPbQI gVrHKE\\">
+                        <Styled(H3)>
+                          <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                            <H3 className=\\"sc-hORach fiyYtT\\">
+                              <Heading as=\\"h3\\" size=\\"MEDIUM\\" className=\\"sc-hORach fiyYtT\\" level={[undefined]}>
+                                <styled.h1 as=\\"h3\\" size=\\"MEDIUM\\" className=\\"sc-hORach fiyYtT\\">
+                                  <StyledComponent as=\\"h3\\" size=\\"MEDIUM\\" className=\\"sc-hORach fiyYtT\\" forwardedComponent={{...}} forwardedRef={{...}}>
+                                    <h3 size=\\"MEDIUM\\" className=\\"sc-hORach fiyYtT sc-cMljjf kCLKvB\\">
+                                      Some other company
+                                    </h3>
+                                  </StyledComponent>
+                                </styled.h1>
+                              </Heading>
+                            </H3>
+                          </StyledComponent>
+                        </Styled(H3)>
+                        <styled.div>
+                          <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
+                            <div className=\\"sc-bMVAic dNkIsp\\">
+                              <span>
+                                Address
+                                :
+                              </span>
+                              <span>
+                                123 ABC Road, Brighton, BN2 9QB
+                              </span>
+                            </div>
+                          </StyledComponent>
+                        </styled.div>
+                      </div>
+                    </StyledComponent>
+                  </StyledEntity>
                 </li>
               </StyledComponent>
             </styled.li>
@@ -898,8 +1181,8 @@ exports[`EntitySearch when the company postcode filter is applied should render
 `;
 
 exports[`EntitySearch when the the cannot find link has a callback should render the component 1`] = `
-"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
-  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+"<EntitySearchWithDataProvider previouslySelected={[undefined]} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function]}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function]}>
     <EntityFilters entityFilters={{...}} setFilter={[Function: setFilter]}>
       <styled.div>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
@@ -1008,16 +1291,16 @@ exports[`EntitySearch when the the cannot find link has a callback should render
         </StyledComponent>
       </styled.div>
     </EntityFilters>
-    <EntityList entities={{...}}>
+    <EntityList entities={{...}} onEntityClick={[Function]}>
       <styled.ol>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
           <ol className=\\"sc-hMFtBS grkyBm\\">
             <styled.li>
               <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                 <li className=\\"sc-cLQEGU gPxdWW\\">
-                  <styled.div>
-                    <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
-                      <div className=\\"sc-gqPbQI gVrHKE\\">
+                  <StyledEntity onClick={[Function: onClick]}>
+                    <StyledComponent onClick={[Function: onClick]} forwardedComponent={{...}} forwardedRef={{...}}>
+                      <div onClick={[Function: onClick]} className=\\"sc-gqPbQI gVrHKE\\">
                         <Styled(H3)>
                           <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                             <H3 className=\\"sc-hORach fiyYtT\\">
@@ -1048,16 +1331,16 @@ exports[`EntitySearch when the the cannot find link has a callback should render
                         </styled.div>
                       </div>
                     </StyledComponent>
-                  </styled.div>
+                  </StyledEntity>
                 </li>
               </StyledComponent>
             </styled.li>
             <styled.li>
               <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                 <li className=\\"sc-cLQEGU gPxdWW\\">
-                  <styled.div>
-                    <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
-                      <div className=\\"sc-gqPbQI gVrHKE\\">
+                  <StyledEntity onClick={[Function: onClick]}>
+                    <StyledComponent onClick={[Function: onClick]} forwardedComponent={{...}} forwardedRef={{...}}>
+                      <div onClick={[Function: onClick]} className=\\"sc-gqPbQI gVrHKE\\">
                         <Styled(H3)>
                           <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                             <H3 className=\\"sc-hORach fiyYtT\\">
@@ -1088,7 +1371,7 @@ exports[`EntitySearch when the the cannot find link has a callback should render
                         </styled.div>
                       </div>
                     </StyledComponent>
-                  </styled.div>
+                  </StyledEntity>
                 </li>
               </StyledComponent>
             </styled.li>
@@ -1181,8 +1464,8 @@ exports[`EntitySearch when the the cannot find link has a callback should render
 `;
 
 exports[`EntitySearch when there is a previously selected "Change" link which is clicked should render the component 1`] = `
-"<EntitySearchWithDataProvider previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
-  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}}>
+"<EntitySearchWithDataProvider previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function]}>
+  <EntitySearch entities={{...}} onEntitySearch={[Function: onEntitySearch]} previouslySelected={{...}} getEntities={[Function]} entityFilters={{...}} cannotFind={{...}} onEntityClick={[Function]}>
     <PreviouslySelected onChangeClick={[Function: mockConstructor]} text=\\"previously selected\\">
       <p>
         previously selected
@@ -1303,16 +1586,16 @@ exports[`EntitySearch when there is a previously selected "Change" link which is
         </StyledComponent>
       </styled.div>
     </EntityFilters>
-    <EntityList entities={{...}}>
+    <EntityList entities={{...}} onEntityClick={[Function]}>
       <styled.ol>
         <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
           <ol className=\\"sc-hMFtBS grkyBm\\">
             <styled.li>
               <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                 <li className=\\"sc-cLQEGU gPxdWW\\">
-                  <styled.div>
-                    <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
-                      <div className=\\"sc-gqPbQI gVrHKE\\">
+                  <StyledEntity onClick={[Function: onClick]}>
+                    <StyledComponent onClick={[Function: onClick]} forwardedComponent={{...}} forwardedRef={{...}}>
+                      <div onClick={[Function: onClick]} className=\\"sc-gqPbQI gVrHKE\\">
                         <Styled(H3)>
                           <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                             <H3 className=\\"sc-hORach fiyYtT\\">
@@ -1343,16 +1626,16 @@ exports[`EntitySearch when there is a previously selected "Change" link which is
                         </styled.div>
                       </div>
                     </StyledComponent>
-                  </styled.div>
+                  </StyledEntity>
                 </li>
               </StyledComponent>
             </styled.li>
             <styled.li>
               <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                 <li className=\\"sc-cLQEGU gPxdWW\\">
-                  <styled.div>
-                    <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
-                      <div className=\\"sc-gqPbQI gVrHKE\\">
+                  <StyledEntity onClick={[Function: onClick]}>
+                    <StyledComponent onClick={[Function: onClick]} forwardedComponent={{...}} forwardedRef={{...}}>
+                      <div onClick={[Function: onClick]} className=\\"sc-gqPbQI gVrHKE\\">
                         <Styled(H3)>
                           <StyledComponent forwardedComponent={{...}} forwardedRef={{...}}>
                             <H3 className=\\"sc-hORach fiyYtT\\">
@@ -1383,7 +1666,7 @@ exports[`EntitySearch when there is a previously selected "Change" link which is
                         </styled.div>
                       </div>
                     </StyledComponent>
-                  </styled.div>
+                  </StyledEntity>
                 </li>
               </StyledComponent>
             </styled.li>