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 - - - - @@ -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 -
    +
      -
    1. +
    2. -
      +
      -

      - - - -

      +

      + + + +

      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 -
    3. +
    4. -
      +
      -

      - - - -

      +

      + + + +

      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 + + + +
      +
      +
      +
      + + + + + +
      - - - - @@ -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 -
        +
          -
        1. +
        2. -
          +
          -

          - - - -

          +

          + + + +

          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 + + + +
          +
          +
          +
          + + + + + +
          - - - - @@ -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 -
            +
              -
            1. +
            2. -
              +
              -

              - - - -

              +

              + + + +

              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 + + + +
              +
              +
              +
              + + + + + +
              - - - - @@ -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 - - - -
              + + + +
              @@ -999,20 +1011,20 @@ exports[`EntitySearch when the the cannot find link has a callback should render -
                +
                  -
                1. +
                2. -
                  +
                  -

                  - - - -

                  +

                  + + + +

                  Some company name

                  @@ -1023,10 +1035,10 @@ exports[`EntitySearch when the the cannot find link has a callback should render -
                  +
                  Address - :  + : 123 Fake Street, Brighton, BN1 4SE @@ -1042,17 +1054,17 @@ exports[`EntitySearch when the the cannot find link has a callback should render -
                3. +
                4. -
                  +
                  -

                  - - - -

                  +

                  + + + +

                  Some other company

                  @@ -1063,10 +1075,10 @@ exports[`EntitySearch when the the cannot find link has a callback should render -
                  +
                  Address - :  + : 123 ABC Road, Brighton, BN2 9QB @@ -1085,74 +1097,78 @@ exports[`EntitySearch when the the cannot find link has a callback 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 + + + +
                  +
                  +
                  +
                  + + + + + +
                  - - - - @@ -1172,7 +1188,7 @@ exports[`EntitySearch when there is a previously selected "Change" link which is previously selected - + Change @@ -1182,14 +1198,14 @@ exports[`EntitySearch when there is a previously selected "Change" link which is -
                  +
                  - - - -
                  + + + +
                  @@ -1236,10 +1252,10 @@ exports[`EntitySearch when there is a previously selected "Change" link which is - - - -
                  + + + +
                  @@ -1290,20 +1306,20 @@ exports[`EntitySearch when there is a previously selected "Change" link which is -
                    +
                      -
                    1. +
                    2. -
                      +
                      -

                      - - - -

                      +

                      + + + +

                      Some company name

                      @@ -1314,10 +1330,10 @@ exports[`EntitySearch when there is a previously selected "Change" link which is -
                      +
                      Address - :  + : 123 Fake Street, Brighton, BN1 4SE @@ -1333,17 +1349,17 @@ exports[`EntitySearch when there is a previously selected "Change" link which is -
                    3. +
                    4. -
                      +
                      -

                      - - - -

                      +

                      + + + +

                      Some other company

                      @@ -1354,10 +1370,10 @@ exports[`EntitySearch when there is a previously selected "Change" link which is -
                      +
                      Address - :  + : 123 ABC Road, Brighton, BN2 9QB @@ -1376,74 +1392,78 @@ exports[`EntitySearch when there is a previously selected "Change" link which is -
                      - - -
                      - - - - - - - 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 + + + +
                      +
                      +
                      +
                      + + + + + +
                      - - - -