Add dropdown for postcode radius search on directory service list

src/library/components/DropDownSelect/DropDownSelect.stories.tsx

@@ -24,6 +24,8 @@ const Template: StoryFn<DropDownSelectProps> = (args) => (
 
 export const ExampleDropDownSelect = Template.bind({});
 ExampleDropDownSelect.args = {
+  hideLabel: false,
+  label: 'Services',
   options: [
     {
       title: 'All services',
@@ -96,3 +98,48 @@ ExampleDropDownSelectHiddenLabel.args = {
   ],
   selected: NewsArticleFilters.services,
 };
+
+export const ExampleDropDownSelectBoldLabel = Template.bind({});
+ExampleDropDownSelectBoldLabel.args = {
+  hideLabel: false,
+  boldLabel: true,
+  label: 'Services',
+  options: [
+    {
+      title: 'All services',
+      value: 'all-services',
+    },
+    {
+      title: 'Bins',
+      value: 'bins',
+    },
+    {
+      title: 'Council Tax',
+      value: 'council-tax',
+    },
+  ],
+  selected: NewsArticleFilters.services,
+};
+
+export const ExampleDropDownSelectHintText = Template.bind({});
+ExampleDropDownSelectHintText.args = {
+  hintText: 'Select an option from the list',
+  hideLabel: false,
+  boldLabel: true,
+  label: 'Services',
+  options: [
+    {
+      title: 'All services',
+      value: 'all-services',
+    },
+    {
+      title: 'Bins',
+      value: 'bins',
+    },
+    {
+      title: 'Council Tax',
+      value: 'council-tax',
+    },
+  ],
+  selected: NewsArticleFilters.services,
+};

src/library/components/DropDownSelect/DropDownSelect.styles.js

@@ -15,6 +15,7 @@ export const Label = styled.label`
   display: block;
   margin-bottom: 5px;
   ${hideLabel}
+  font-weight: ${(props) => (props.$boldLabel ? 'bold' : 'normal')};
 `;
 
 export const Select = styled.select`
@@ -26,6 +27,7 @@ export const Select = styled.select`
   height: 2.5rem;
   padding: 5px;
   border: 2px solid ${(props) => props.theme.theme_vars.colours.black};
+  display: block;
 
   &:focus {
     outline: 2px transparent solid;

src/library/components/DropDownSelect/DropDownSelect.tsx

@@ -1,23 +1,24 @@
 import React, { useState } from 'react';
-
 import { DropDownSelectProps } from './DropDownSelect.types';
 import * as Styles from './DropDownSelect.styles';
+import HintText from '../HintText/HintText';
 
-import { handleParams } from '../../helpers/url-helpers.js';
-
-const DropDownSelect: React.FC<DropDownSelectProps> = ({
+const DropDownSelect: React.FunctionComponent<DropDownSelectProps> = ({
   id,
   label,
   options,
   onChange,
   selected,
   hideLabel = false,
+  boldLabel = false,
+  hintText,
 }) => {
   return (
     <Styles.Container>
-      <Styles.Label htmlFor={id} $hideLabel={hideLabel}>
+      <Styles.Label htmlFor={id} $hideLabel={hideLabel} $boldLabel={boldLabel}>
         {label}
       </Styles.Label>
+      {hintText && <HintText text={hintText} />}
       <Styles.Select id={id} name={id} onChange={onChange && onChange} defaultValue={selected && selected}>
         {options.map((option, i) => (
           <Styles.Option key={i} value={option.value}>

src/library/components/DropDownSelect/DropDownSelect.types.ts

@@ -28,6 +28,16 @@ export interface DropDownSelectProps {
    * Hide label, but visible for screen readers (totally optional)
    */
   hideLabel?: boolean;
+
+  /**
+   * Should the label text be bold?
+   */
+  boldLabel?: boolean;
+
+  /**
+   * Optional hint text for the input
+   */
+  hintText?: string;
 }
 
 export interface DropDownSelectOptionsProps {

src/library/directory/DirectoryServiceList/DirectoryServiceList.styles.js

@@ -15,24 +15,36 @@ export const Container = styled.div`
 export const SearchHeader = styled.div`
   width: 100%;
   display: flex;
-  background: ${(props) => props.theme.theme_vars.colours.grey_light}75;
+  background: ${(props) => props.theme.theme_vars.colours.grey_light}50;
   padding: 0 ${(props) => props.theme.theme_vars.spacingSizes.medium};
 
   input {
     width: 100%;
     margin-bottom: 0;
+    height: 40px;
   }
 `;
 
 export const Label = styled.label`
   margin-bottom: 5px;
   font-weight: bold;
+  display: block;
 `;
 
 export const HintText = styled.div`
   color: ${(props) => props.theme.theme_vars.colours.grey_dark};
 `;
 
+export const PostcodeContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const PostcodeInner = styled.div`
+  flex-grow: 1;
+  padding-right: ${(props) => props.theme.theme_vars.spacingSizes.medium};
+`;
+
 export const ButtonContainer = styled.div`
   display: flex;
   align-items: end;
@@ -79,7 +91,7 @@ export const ButtonText = styled.span`
 export const ResultInfo = styled.div`
   width: 100%;
   border-bottom: 1px solid ${(props) => props.theme.theme_vars.colours.grey};
-  color: ${(props) => props.theme.theme_vars.colours.grey_dark};
+  color: ${(props) => props.theme.theme_vars.colours.grey_darkest};
 `;
 
 const serviceBackground = (props) => {

src/library/directory/DirectoryServiceList/DirectoryServiceList.test.tsx

@@ -28,6 +28,8 @@ describe('Test Component', () => {
       maximumAge: 288,
       setMaximumAge: () => {},
       setCategories: () => {},
+      proximity: '2',
+      setProximity: () => {},
       isLoading: false,
       categories: [
         {

src/library/directory/DirectoryServiceList/DirectoryServiceList.tsx

@@ -21,6 +21,7 @@ import { transformSnippet, transformAge } from '../DirectoryService/DirectorySer
 import RadioCheckboxInput from '../../components/RadioCheckboxInput/RadioCheckboxInput';
 import Button from '../../components/Button/Button';
 import { AlertBannerService } from '../../structure/PageStructures';
+import DropDownSelect from '../../components/DropDownSelect/DropDownSelect';
 
 const DirectoryServiceList: React.FunctionComponent<DirectoryServiceListProps> = ({
   directoryPath,
@@ -47,6 +48,8 @@ const DirectoryServiceList: React.FunctionComponent<DirectoryServiceListProps> =
   ageInMonths = false,
   hasDocuments = false,
   isError = false,
+  proximity = 2,
+  setProximity,
 }) => {
   const [accordions, setAccordions] = useLocalStorage(`${directoryPath.replace(/\//g, '')}-accordion`, []);
   const [openAll, setOpenAll] = useLocalStorage(`${directoryPath.replace(/\//g, '')}-accordion-all`, true);
@@ -207,7 +210,6 @@ const DirectoryServiceList: React.FunctionComponent<DirectoryServiceListProps> =
               <Row>
                 <Column small="full" medium="one-half" large="one-third">
                   <Styles.Label htmlFor="directorySearch">What are you looking for?</Styles.Label>
-                  <HintText text="Enter a search word or phrase" />
                   <Input
                     name="directorySearch"
                     type="text"
@@ -219,15 +221,31 @@ const DirectoryServiceList: React.FunctionComponent<DirectoryServiceListProps> =
                   />
                 </Column>
                 <Column small="full" medium="one-half" large="one-third">
-                  <Styles.Label htmlFor="postcode">Postcode (optional)</Styles.Label>
-                  <HintText text="Enter a postcode to see results within 2 miles" />
-                  <Input
-                    name="postcode"
-                    type="text"
-                    defaultValue={postcodeSearch}
-                    id="postcode"
-                    onChange={(e) => setPostcodeSearch(e.target.value)}
-                  />
+                  <Styles.PostcodeContainer>
+                    <Styles.PostcodeInner>
+                      <Styles.Label htmlFor="postcode">Postcode (optional)</Styles.Label>
+                      <Input
+                        name="postcode"
+                        type="text"
+                        defaultValue={postcodeSearch}
+                        id="postcode"
+                        onChange={(e) => setPostcodeSearch(e.target.value)}
+                      />
+                    </Styles.PostcodeInner>
+                    <DropDownSelect
+                      id="proximity"
+                      label="Distance"
+                      options={[
+                        { title: '', value: '2' },
+                        { title: '2 miles', value: '2' },
+                        { title: '5 miles', value: '5' },
+                        { title: '10 miles', value: '10' },
+                        { title: '20+ miles', value: '50' },
+                      ]}
+                      boldLabel={true}
+                      onChange={(e) => setProximity(e.target.value)}
+                    />
+                  </Styles.PostcodeContainer>
                 </Column>
                 <Column small="full" medium="one-half" large="one-third">
                   <Styles.ButtonContainer>
@@ -269,14 +287,7 @@ const DirectoryServiceList: React.FunctionComponent<DirectoryServiceListProps> =
                 <>
                   <Column small="full" medium="full" large="full">
                     <Styles.AccordionControls>
-                      {filtersActive ? (
-                        <Styles.TextLink onClick={clearSearch} type="button">
-                          <Styles.ButtonText>Clear all filters</Styles.ButtonText>
-                        </Styles.TextLink>
-                      ) : (
-                        <div></div>
-                      )}
-
+                      <div></div>
                       <Styles.TextLink onClick={toggleAll} type="button" aria-expanded={!openAll}>
                         {openAll ? 'Open all' : 'Close all'}
                         <Styles.VisuallyHidden> sections</Styles.VisuallyHidden>
@@ -285,7 +296,7 @@ const DirectoryServiceList: React.FunctionComponent<DirectoryServiceListProps> =
                   </Column>
                   <Column small="full" medium="full" large="full">
                     <Styles.Fieldset>
-                      <Styles.Legend onClick={(e) => toggleAccordion(0)}>
+                      <Styles.Legend>
                         <Styles.LegendButton onClick={(e) => toggleAccordion(0)} type="button">
                           Select age group (years)
                           <Styles.AccordionIcon $isOpen={accordions[0]} />
@@ -391,15 +402,6 @@ const DirectoryServiceList: React.FunctionComponent<DirectoryServiceListProps> =
                     </Styles.Favourites>
                   </Styles.FavouritesContainer>
                 </Column>
-                <Column small="full" medium="full" large="full">
-                  <Pagination
-                    currentPage={pageNumber}
-                    totalResults={totalResults}
-                    resultsPerPage={perPage}
-                    postTo={directoryPath}
-                    buttonClickOverride={setPageNumber}
-                  />
-                </Column>
                 <Column small="full" medium="full" large="full">
                   {notServer && <>{services?.length > 0 && showMap && <DirectoryMap mapProps={mapProps} />}</>}
                 </Column>

src/library/directory/DirectoryServiceList/DirectoryServiceList.types.ts

@@ -121,6 +121,16 @@ export interface DirectoryServiceListProps {
    * Is the component in error state
    */
   isError?: boolean;
+
+  /**
+   * The optional proximity for the postcode search
+   */
+  proximity?: number | string;
+
+  /**
+   * Function prop passed in to handle updating proximity
+   */
+  setProximity: Dispatch<SetStateAction<number | string | undefined>>;
 }
 
 export interface DirectoryCategory {