diff --git a/src/entity-search/CannotFindDetails.jsx b/src/entity-search/CannotFindDetails.jsx index ffc0e1a8..87732e0d 100644 --- 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 ( - + Try refining your search by taking the following actions: @@ -23,7 +31,7 @@ const CannotFindDetails = ({ summary, actions, link }) => { {link.text} - + ) } diff --git a/src/entity-search/EntityFilterRow.jsx b/src/entity-search/EntityFilterRow.jsx index 1d57c955..ed31c684 100644 --- 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 index 421d1bc1..2191c774 100644 --- 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 ( - {metaKey}: + {metaKey}: {meta[metaKey]} ) diff --git a/src/entity-search/EntitySearch.stories.jsx b/src/entity-search/EntitySearch.stories.jsx index 0fa94635..afdf984a 100644 --- 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 ( - Find the company + Find the company @@ -91,7 +96,7 @@ storiesOf('EntitySearch', module) - Find the company + Find the company - + - - - - + + + + @@ -60,10 +60,10 @@ exports[`EntitySearch when initially loading the entity search component should - - - - + + + + @@ -113,10 +113,10 @@ exports[`EntitySearch when initially loading the entity search component should - - - - + + + + Search @@ -134,14 +134,14 @@ exports[`EntitySearch when the "Search" button has been clicked should render th - + - - - - + + + + @@ -188,10 +188,10 @@ exports[`EntitySearch when the "Search" button has been clicked should render th - - - - + + + + @@ -242,20 +242,20 @@ exports[`EntitySearch when the "Search" button has been clicked should render th - + - + - + - - - - - + + + + + Some company name @@ -266,10 +266,10 @@ exports[`EntitySearch when the "Search" button has been clicked should render th - + Address - : + : 123 Fake Street, Brighton, BN1 4SE @@ -285,17 +285,17 @@ exports[`EntitySearch when the "Search" button has been clicked should render th - + - + - - - - - + + + + + Some other company @@ -306,10 +306,10 @@ exports[`EntitySearch when the "Search" button has been clicked should render th - + Address - : + : 123 ABC Road, Brighton, BN2 9QB @@ -328,74 +328,78 @@ exports[`EntitySearch when the "Search" button has been clicked should render th - - - - - - - - - - - cannot find summary - - - - - - - - - - - - - - - - - - - Try refining your search by taking the following actions: - - - - - + + + + + + + + + + + + + cannot find summary + - - - - - action 1 - - - action 2 - - - - - - still cannot find - - - - - - - - - - - + + + + + + + + + + + + + + + + + Try refining your search by taking the following actions: + + + + + + + + + + + action 1 + + + action 2 + + + + + + still cannot find + + + + + + + + + + + + + - - - - + + + + Search @@ -413,14 +417,14 @@ exports[`EntitySearch when the company name filter is applied should render the - + - - - - + + + + @@ -467,10 +471,10 @@ exports[`EntitySearch when the company name filter is applied should render the - - - - + + + + @@ -521,20 +525,20 @@ exports[`EntitySearch when the company name filter is applied should render the - + - + - + - - - - - + + + + + Some other company @@ -545,10 +549,10 @@ exports[`EntitySearch when the company name filter is applied should render the - + Address - : + : 123 ABC Road, Brighton, BN2 9QB @@ -567,74 +571,78 @@ exports[`EntitySearch when the company name filter is applied should render the - - - - - - - - - - - cannot find summary - - - - - - - - - - - - - - - - - - - Try refining your search by taking the following actions: - - - - - + + + + + + + + + + + + + cannot find summary + - - - - - action 1 - - - action 2 - - - - - - still cannot find - - - - - - - - - - - + + + + + + + + + + + + + + + + + Try refining your search by taking the following actions: + + + + + + + + + + + action 1 + + + action 2 + + + + + + still cannot find + + + + + + + + + + + + + - - - - + + + + Search @@ -652,14 +660,14 @@ exports[`EntitySearch when the company postcode filter is applied should render - + - - - - + + + + @@ -706,10 +714,10 @@ exports[`EntitySearch when the company postcode filter is applied should render - - - - + + + + @@ -760,20 +768,20 @@ exports[`EntitySearch when the company postcode filter is applied should render - + - + - + - - - - - + + + + + Some company name @@ -784,10 +792,10 @@ exports[`EntitySearch when the company postcode filter is applied should render - + Address - : + : 123 Fake Street, Brighton, BN1 4SE @@ -806,74 +814,78 @@ exports[`EntitySearch when the company postcode filter is applied should render - - - - - - - - - - - cannot find summary - - - - - - - - - - - - - - - - - - - Try refining your search by taking the following actions: - - - - - + + + + + + + + + + + + + cannot find summary + - - - - - action 1 - - - action 2 - - - - - - still cannot find - - - - - - - - - - - + + + + + + + + + + + + + + + + + Try refining your search by taking the following actions: + + + + + + + + + + + action 1 + + + action 2 + + + + + + still cannot find + + + + + + + + + + + + + - - - - + + + + Search @@ -891,14 +903,14 @@ exports[`EntitySearch when the the cannot find link has a callback should render - + - - - - + + + + @@ -945,10 +957,10 @@ exports[`EntitySearch when the the cannot find link has a callback should render - - -
- - Try refining your search by taking the following actions: - -
+ + Try refining your search by taking the following actions: + +