Merge pull request #105 from uktrade/feature/entity-search-styles

Update entity search component styles
uktrade · Aug 21, 2019 · bb130f8 · bb130f8
2 parents 20ed3f7 + 7c44a94
commit bb130f8
Show file tree

Hide file tree

Showing 5 changed files with 515 additions and 467 deletions.
diff --git a/src/entity-search/CannotFindDetails.jsx b/src/entity-search/CannotFindDetails.jsx
@@ -2,6 +2,14 @@ import { Details, Link, Paragraph } from 'govuk-react'
 import React from 'react'
 import PropTypes from 'prop-types'
 import { uniqueId } from 'lodash'
+import styled from 'styled-components'
+import { SPACING } from '@govuk-react/constants'
+
+const StyledDetails = styled(Details)`
+  & > div {
+    margin: ${SPACING.SCALE_1} 0 ${SPACING.SCALE_1} 4px;
+  }
+`
 
 const CannotFindDetails = ({ summary, actions, link }) => {
   const onLinkClick = (e) => {
@@ -10,7 +18,7 @@ const CannotFindDetails = ({ summary, actions, link }) => {
   }
 
   return (
-    <Details summary={summary}>
+    <StyledDetails summary={summary}>
       <div>
         <Paragraph>Try refining your search by taking the following actions:</Paragraph>
         <ul>
@@ -23,7 +31,7 @@ const CannotFindDetails = ({ summary, actions, link }) => {
           {link.text}
         </Link>
       </div>
-    </Details>
+    </StyledDetails>
   )
 }
 

diff --git a/src/entity-search/EntityFilterRow.jsx b/src/entity-search/EntityFilterRow.jsx
@@ -9,7 +9,7 @@ import EntityFilter from './EntityFilter'
 
 const StyledGridRow = styled(GridRow)`
   & + & {
-    margin-top: ${SPACING.SCALE_2};
+    margin-top: ${SPACING.SCALE_3};
   }
 `
 

diff --git a/src/entity-search/EntityList.jsx b/src/entity-search/EntityList.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { SPACING } from '@govuk-react/constants'
-import { GREY_3, LINK_COLOUR, SECONDARY_TEXT_COLOUR } from 'govuk-colours'
+import { SPACING, FONT_SIZE, MEDIA_QUERIES } from '@govuk-react/constants'
+import { GREY_2, GREY_4, LINK_COLOUR, LINK_HOVER_COLOUR, SECONDARY_TEXT_COLOUR } from 'govuk-colours'
 import { uniqueId } from 'lodash'
 import { H3 } from 'govuk-react'
 
@@ -16,23 +16,38 @@ const StyledEntityListItem = styled('li')`
 `
 
 const StyledEntity = styled('div')`
-  margin-bottom: ${SPACING.SCALE_1};
+  margin-bottom: ${SPACING.SCALE_2};
   padding: ${SPACING.SCALE_2};
-  border: 1px solid ${GREY_3};  
+  border: 1px solid ${GREY_2};  
   cursor: pointer;
+  
+  &:hover {
+    border: 1px solid ${LINK_HOVER_COLOUR};
+    background-color: ${GREY_4};
+    
+    & > h3 {
+      color: ${LINK_HOVER_COLOUR};
+    }
+  }
 `
 
 const StyledHeading = styled(H3)`
   margin: 0;
   color: ${LINK_COLOUR};
+  font-size: ${FONT_SIZE.SIZE_16};
+  ${MEDIA_QUERIES.TABLET} {
+    font-size: ${FONT_SIZE.SIZE_19};
+  }
 `
 
 const StyledMetaItem = styled('div')`
   list-style-type: none;
   margin-top: ${SPACING.SCALE_2};
-  
+  font-size: ${FONT_SIZE.SIZE_16};
+    
   & > span:nth-child(1) {
     color: ${SECONDARY_TEXT_COLOUR};
+    margin-right: ${SPACING.SCALE_1}
   }
 `
 
@@ -47,7 +62,7 @@ const EntityList = ({ entities }) => {
               {Object.keys(meta).map((metaKey) => {
                 return (
                   <StyledMetaItem key={uniqueId()}>
-                    <span>{metaKey}:&nbsp;</span>
+                    <span>{metaKey}:</span>
                     <span>{meta[metaKey]}</span>
                   </StyledMetaItem>
                 )

diff --git a/src/entity-search/EntitySearch.stories.jsx b/src/entity-search/EntitySearch.stories.jsx
@@ -5,6 +5,7 @@ import { SPACING } from '@govuk-react/constants'
 import axios from 'axios'
 import MockAdapter from 'axios-mock-adapter'
 import PropTypes from 'prop-types'
+import styled from 'styled-components'
 
 import dataHubAddCompany from '../../assets/images/data-hub-add-company.png'
 import companySearchFixture from './fixtures/company-search'
@@ -17,6 +18,10 @@ const apiEndpointWithParameters = new RegExp(`${apiEndpoint}.+`)
 mock.onPost(apiEndpoint).reply(200, companySearchFixture)
 mock.onPost(apiEndpointWithParameters).reply(200, companySearchFixture)
 
+const StyledHeading = styled(H2)`
+  font-size: 19px;
+`
+
 const EntitySearchForStorybook = ({ previouslySelected, cannotFindLink }) => {
   return (
     <EntitySearchWithDataProvider
@@ -74,7 +79,7 @@ storiesOf('EntitySearch', module)
         </GridRow>
         <GridRow>
           <GridCol style={{ margin: SPACING.SCALE_2 }}>
-            <H2 style={{ fontSize: '24px' }}>Find the company</H2>
+            <StyledHeading>Find the company</StyledHeading>
             <EntitySearchForStorybook />
           </GridCol>
         </GridRow>
@@ -91,7 +96,7 @@ storiesOf('EntitySearch', module)
         </GridRow>
         <GridRow>
           <GridCol style={{ margin: SPACING.SCALE_2 }}>
-            <H2 style={{ fontSize: '24px' }}>Find the company</H2>
+            <StyledHeading>Find the company</StyledHeading>
             <EntitySearchForStorybook
               cannotFindLink={{
                 text: 'I still cannot find the company',