From 12306015e92af961984c3f3c5db1b4661a97db9e Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Mon, 2 Oct 2023 10:25:25 +0100 Subject: [PATCH 01/39] feat: create postcode lookup component in Component Library --- .../Molecules/PostcodeLookup/SchoolLookup.js | 65 +++++++++++ .../Molecules/PostcodeLookup/SchoolLookup.md | 18 +++ .../PostcodeLookup/SchoolLookup.test.js | 11 ++ .../__snapshots__/SchoolLookup.test.js.snap | 107 ++++++++++++++++++ 4 files changed, 201 insertions(+) create mode 100644 src/components/Molecules/PostcodeLookup/SchoolLookup.js create mode 100644 src/components/Molecules/PostcodeLookup/SchoolLookup.md create mode 100644 src/components/Molecules/PostcodeLookup/SchoolLookup.test.js create mode 100644 src/components/Molecules/PostcodeLookup/__snapshots__/SchoolLookup.test.js.snap diff --git a/src/components/Molecules/PostcodeLookup/SchoolLookup.js b/src/components/Molecules/PostcodeLookup/SchoolLookup.js new file mode 100644 index 000000000..96b83eee0 --- /dev/null +++ b/src/components/Molecules/PostcodeLookup/SchoolLookup.js @@ -0,0 +1,65 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +import Typeahead from '../Typeahead/Typeahead'; + +const optionFetcher = async query => { + const response = await axios.get( + 'https://lookups.sls.comicrelief.com/schools/lookup', + { + params: { query }, + timeout: 3000 + } + ); + return response.data.data.schools; +}; + +const optionParser = school => `${school.name}, ${school.post_code}`; + +const SchoolLookup = React.forwardRef( + ( + { + label, + placeholder, + notFoundMessage, + dropdownInstruction, + onSelect, + ...rest + }, + ref + ) => { + const props = { + optionFetcher, + optionParser, + onSelect, + id: 'school-lookup', + name: 'school-lookup', + label, + placeholder, + notFoundMessage, + dropdownInstruction, + ...rest + }; + + return ; + } +); + +SchoolLookup.propTypes = { + /** This function is used to provide data to the parent component when a selection is made. */ + onSelect: PropTypes.func.isRequired, + label: PropTypes.string, + placeholder: PropTypes.string, + dropdownInstruction: PropTypes.string, + notFoundMessage: PropTypes.string +}; + +SchoolLookup.defaultProps = { + label: 'Enter the name or postcode of your school or nursery', + placeholder: 'Type to start search', + dropdownInstruction: 'Please select a school from the list below', + notFoundMessage: "Sorry, we can't find this school" +}; + +export default SchoolLookup; diff --git a/src/components/Molecules/PostcodeLookup/SchoolLookup.md b/src/components/Molecules/PostcodeLookup/SchoolLookup.md new file mode 100644 index 000000000..28efff16f --- /dev/null +++ b/src/components/Molecules/PostcodeLookup/SchoolLookup.md @@ -0,0 +1,18 @@ +# SchoolLookup + +```js +import SchoolLookup from './SchoolLookup'; + +// This is just an example of how a parent component might handle fetch errors within the component. +const [enterManually, setEnterManually] = React.useState(false); + +const fetchErrorHandler = () => { + setEnterManually(true); +} + +enterManually + ? 'Sorry, there appears to be a problem. Please enter the school\'s details manually.' + : ( + alert(JSON.stringify(school, null, 2))} fetchErrorHandler={fetchErrorHandler} /> + ) +``` diff --git a/src/components/Molecules/PostcodeLookup/SchoolLookup.test.js b/src/components/Molecules/PostcodeLookup/SchoolLookup.test.js new file mode 100644 index 000000000..db48b6538 --- /dev/null +++ b/src/components/Molecules/PostcodeLookup/SchoolLookup.test.js @@ -0,0 +1,11 @@ +import React from 'react'; +import 'jest-styled-components'; + +import renderWithTheme from '../../../hoc/shallowWithTheme'; +import SchoolLookup from './SchoolLookup'; + +it('renders correctly', () => { + const renderer = renderWithTheme( {}} />); + + expect(renderer.toJSON()).toMatchSnapshot(); +}); diff --git a/src/components/Molecules/PostcodeLookup/__snapshots__/SchoolLookup.test.js.snap b/src/components/Molecules/PostcodeLookup/__snapshots__/SchoolLookup.test.js.snap new file mode 100644 index 000000000..76649c72a --- /dev/null +++ b/src/components/Molecules/PostcodeLookup/__snapshots__/SchoolLookup.test.js.snap @@ -0,0 +1,107 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +.c2 { + font-size: 1rem; + line-height: 1rem; + text-transform: inherit; + font-weight: bold; + line-height: normal; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + +.c1 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + color: #5C5C5E; + width: 100%; +} + +.c3 { + margin-bottom: 0.5rem; +} + +.c5 { + position: relative; + box-sizing: border-box; + width: 100%; + height: 48px; + padding: 1rem 1.5rem; + background-color: #F4F3F5; + border: 1px solid; + border-color: #E1E2E3; + box-shadow: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + color: #000000; + border-radius: 0.5rem; + font-size: inherit; + z-index: 2; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + +.c5:focus { + border: 1px solid #666; +} + +.c4 { + position: relative; + font-size: 1.25rem; +} + +.c0 { + position: relative; +} + +@media (min-width:740px) { + .c5 { + max-width: 290px; + } +} + +
+ +
+`; From 92b4291f2cc23631e85dad1ac38bbe5535cdba06 Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Mon, 2 Oct 2023 11:28:49 +0100 Subject: [PATCH 02/39] setup basic component --- .../PostcodeLookup/PostcodeLookup.js | 65 +++++++++++++++++++ .../PostcodeLookup/PostcodeLookup.md | 18 +++++ .../Molecules/PostcodeLookup/SchoolLookup.js | 8 +-- .../Molecules/PostcodeLookup/SchoolLookup.md | 8 +-- 4 files changed, 91 insertions(+), 8 deletions(-) create mode 100644 src/components/Molecules/PostcodeLookup/PostcodeLookup.js create mode 100644 src/components/Molecules/PostcodeLookup/PostcodeLookup.md diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.js b/src/components/Molecules/PostcodeLookup/PostcodeLookup.js new file mode 100644 index 000000000..96b83eee0 --- /dev/null +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.js @@ -0,0 +1,65 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + +import Typeahead from '../Typeahead/Typeahead'; + +const optionFetcher = async query => { + const response = await axios.get( + 'https://lookups.sls.comicrelief.com/schools/lookup', + { + params: { query }, + timeout: 3000 + } + ); + return response.data.data.schools; +}; + +const optionParser = school => `${school.name}, ${school.post_code}`; + +const SchoolLookup = React.forwardRef( + ( + { + label, + placeholder, + notFoundMessage, + dropdownInstruction, + onSelect, + ...rest + }, + ref + ) => { + const props = { + optionFetcher, + optionParser, + onSelect, + id: 'school-lookup', + name: 'school-lookup', + label, + placeholder, + notFoundMessage, + dropdownInstruction, + ...rest + }; + + return ; + } +); + +SchoolLookup.propTypes = { + /** This function is used to provide data to the parent component when a selection is made. */ + onSelect: PropTypes.func.isRequired, + label: PropTypes.string, + placeholder: PropTypes.string, + dropdownInstruction: PropTypes.string, + notFoundMessage: PropTypes.string +}; + +SchoolLookup.defaultProps = { + label: 'Enter the name or postcode of your school or nursery', + placeholder: 'Type to start search', + dropdownInstruction: 'Please select a school from the list below', + notFoundMessage: "Sorry, we can't find this school" +}; + +export default SchoolLookup; diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.md b/src/components/Molecules/PostcodeLookup/PostcodeLookup.md new file mode 100644 index 000000000..044d8e996 --- /dev/null +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.md @@ -0,0 +1,18 @@ +# PostcodeLookup + +```js +import PostcodeLookup from './PostcodeLookup'; + +// This is just an example of how a parent component might handle fetch errors within the component. +const [enterManually, setEnterManually] = React.useState(false); + +const fetchErrorHandler = () => { + setEnterManually(true); +} + +enterManually + ? 'Sorry, there appears to be a problem. Please enter the school\'s details manually.' + : ( + alert(JSON.stringify(school, null, 2))} fetchErrorHandler={fetchErrorHandler} /> + ) +``` diff --git a/src/components/Molecules/PostcodeLookup/SchoolLookup.js b/src/components/Molecules/PostcodeLookup/SchoolLookup.js index 96b83eee0..5ef8da1e1 100644 --- a/src/components/Molecules/PostcodeLookup/SchoolLookup.js +++ b/src/components/Molecules/PostcodeLookup/SchoolLookup.js @@ -17,7 +17,7 @@ const optionFetcher = async query => { const optionParser = school => `${school.name}, ${school.post_code}`; -const SchoolLookup = React.forwardRef( +const PostcodeLookup = React.forwardRef( ( { label, @@ -46,7 +46,7 @@ const SchoolLookup = React.forwardRef( } ); -SchoolLookup.propTypes = { +PostcodeLookup.propTypes = { /** This function is used to provide data to the parent component when a selection is made. */ onSelect: PropTypes.func.isRequired, label: PropTypes.string, @@ -55,11 +55,11 @@ SchoolLookup.propTypes = { notFoundMessage: PropTypes.string }; -SchoolLookup.defaultProps = { +PostcodeLookup.defaultProps = { label: 'Enter the name or postcode of your school or nursery', placeholder: 'Type to start search', dropdownInstruction: 'Please select a school from the list below', notFoundMessage: "Sorry, we can't find this school" }; -export default SchoolLookup; +export default PostcodeLookup; diff --git a/src/components/Molecules/PostcodeLookup/SchoolLookup.md b/src/components/Molecules/PostcodeLookup/SchoolLookup.md index 28efff16f..044d8e996 100644 --- a/src/components/Molecules/PostcodeLookup/SchoolLookup.md +++ b/src/components/Molecules/PostcodeLookup/SchoolLookup.md @@ -1,7 +1,7 @@ -# SchoolLookup +# PostcodeLookup ```js -import SchoolLookup from './SchoolLookup'; +import PostcodeLookup from './PostcodeLookup'; // This is just an example of how a parent component might handle fetch errors within the component. const [enterManually, setEnterManually] = React.useState(false); @@ -11,8 +11,8 @@ const fetchErrorHandler = () => { } enterManually - ? 'Sorry, there appears to be a problem. Please enter the school\'s details manually.' + ? 'Sorry, there appears to be a problem. Please enter the school\'s details manually.' : ( - alert(JSON.stringify(school, null, 2))} fetchErrorHandler={fetchErrorHandler} /> + alert(JSON.stringify(school, null, 2))} fetchErrorHandler={fetchErrorHandler} /> ) ``` From 4b445ca061fefa24d9f9def2b02ce08bd523992b Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Mon, 2 Oct 2023 12:18:04 +0100 Subject: [PATCH 03/39] adjust visual appearance in Component Library --- .../PostcodeLookup/PostcodeLookup.js | 18 ++--- ...lLookup.test.js => PostcodeLookup.test.js} | 0 .../Molecules/PostcodeLookup/SchoolLookup.js | 65 ------------------- .../Molecules/PostcodeLookup/SchoolLookup.md | 2 +- 4 files changed, 8 insertions(+), 77 deletions(-) rename src/components/Molecules/PostcodeLookup/{SchoolLookup.test.js => PostcodeLookup.test.js} (100%) delete mode 100644 src/components/Molecules/PostcodeLookup/SchoolLookup.js diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.js b/src/components/Molecules/PostcodeLookup/PostcodeLookup.js index 96b83eee0..280885198 100644 --- a/src/components/Molecules/PostcodeLookup/PostcodeLookup.js +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.js @@ -17,13 +17,12 @@ const optionFetcher = async query => { const optionParser = school => `${school.name}, ${school.post_code}`; -const SchoolLookup = React.forwardRef( +const PostcodeLookup = React.forwardRef( ( { label, placeholder, notFoundMessage, - dropdownInstruction, onSelect, ...rest }, @@ -38,7 +37,6 @@ const SchoolLookup = React.forwardRef( label, placeholder, notFoundMessage, - dropdownInstruction, ...rest }; @@ -46,20 +44,18 @@ const SchoolLookup = React.forwardRef( } ); -SchoolLookup.propTypes = { +PostcodeLookup.propTypes = { /** This function is used to provide data to the parent component when a selection is made. */ onSelect: PropTypes.func.isRequired, label: PropTypes.string, placeholder: PropTypes.string, - dropdownInstruction: PropTypes.string, notFoundMessage: PropTypes.string }; -SchoolLookup.defaultProps = { - label: 'Enter the name or postcode of your school or nursery', - placeholder: 'Type to start search', - dropdownInstruction: 'Please select a school from the list below', - notFoundMessage: "Sorry, we can't find this school" +PostcodeLookup.defaultProps = { + label: 'Find address by postcode', + placeholder: 'Enter postcode...', + notFoundMessage: "Sorry, we can't find this address" }; -export default SchoolLookup; +export default PostcodeLookup; diff --git a/src/components/Molecules/PostcodeLookup/SchoolLookup.test.js b/src/components/Molecules/PostcodeLookup/PostcodeLookup.test.js similarity index 100% rename from src/components/Molecules/PostcodeLookup/SchoolLookup.test.js rename to src/components/Molecules/PostcodeLookup/PostcodeLookup.test.js diff --git a/src/components/Molecules/PostcodeLookup/SchoolLookup.js b/src/components/Molecules/PostcodeLookup/SchoolLookup.js deleted file mode 100644 index 5ef8da1e1..000000000 --- a/src/components/Molecules/PostcodeLookup/SchoolLookup.js +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import axios from 'axios'; - -import Typeahead from '../Typeahead/Typeahead'; - -const optionFetcher = async query => { - const response = await axios.get( - 'https://lookups.sls.comicrelief.com/schools/lookup', - { - params: { query }, - timeout: 3000 - } - ); - return response.data.data.schools; -}; - -const optionParser = school => `${school.name}, ${school.post_code}`; - -const PostcodeLookup = React.forwardRef( - ( - { - label, - placeholder, - notFoundMessage, - dropdownInstruction, - onSelect, - ...rest - }, - ref - ) => { - const props = { - optionFetcher, - optionParser, - onSelect, - id: 'school-lookup', - name: 'school-lookup', - label, - placeholder, - notFoundMessage, - dropdownInstruction, - ...rest - }; - - return ; - } -); - -PostcodeLookup.propTypes = { - /** This function is used to provide data to the parent component when a selection is made. */ - onSelect: PropTypes.func.isRequired, - label: PropTypes.string, - placeholder: PropTypes.string, - dropdownInstruction: PropTypes.string, - notFoundMessage: PropTypes.string -}; - -PostcodeLookup.defaultProps = { - label: 'Enter the name or postcode of your school or nursery', - placeholder: 'Type to start search', - dropdownInstruction: 'Please select a school from the list below', - notFoundMessage: "Sorry, we can't find this school" -}; - -export default PostcodeLookup; diff --git a/src/components/Molecules/PostcodeLookup/SchoolLookup.md b/src/components/Molecules/PostcodeLookup/SchoolLookup.md index 044d8e996..13c981035 100644 --- a/src/components/Molecules/PostcodeLookup/SchoolLookup.md +++ b/src/components/Molecules/PostcodeLookup/SchoolLookup.md @@ -11,7 +11,7 @@ const fetchErrorHandler = () => { } enterManually - ? 'Sorry, there appears to be a problem. Please enter the school\'s details manually.' + ? 'Sorry, there appears to be a problem. Please enter your details manually.' : ( alert(JSON.stringify(school, null, 2))} fetchErrorHandler={fetchErrorHandler} /> ) From 351fe7f7ac98a160460943796b273d515d669e33 Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Mon, 2 Oct 2023 13:31:34 +0100 Subject: [PATCH 04/39] add postcode package --- package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index 2c068ed91..7b1a440eb 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "lazysizes": "^5.3.2", "lodash": "^4.17.11", "moment": "^2.29.4", + "postcode": "^5.1.0", "prop-types": "^15.8.1", "react": "^17.0.2", "react-canvas-confetti": "^1.4.0", diff --git a/yarn.lock b/yarn.lock index 1163f072b..96716b41c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10030,6 +10030,11 @@ posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz" +postcode@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/postcode/-/postcode-5.1.0.tgz#ef30a2a4028fd20255fb0aceccf4c70baab8df5b" + integrity sha512-rjwIdlQ8UvdOnUVZRCZQA54PmQJeoMBDQb4RsW5z3MVp/u7Gcet1vsjVy/p0+YX+R7cmgU9DEJf0zSx5mWqxAA== + postcss-attribute-case-insensitive@^4.0.1: version "4.0.2" resolved "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz" From 626aaf76400c39f0e25a8a70d8010faab4c1fff5 Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Mon, 2 Oct 2023 13:38:15 +0100 Subject: [PATCH 05/39] bring in FSU code --- .../PostcodeLookup/PostcodeLookup.js | 98 ++++++++++--------- 1 file changed, 52 insertions(+), 46 deletions(-) diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.js b/src/components/Molecules/PostcodeLookup/PostcodeLookup.js index 280885198..043fac28d 100644 --- a/src/components/Molecules/PostcodeLookup/PostcodeLookup.js +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.js @@ -1,61 +1,67 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { isValid, toNormalised } from 'postcode'; import axios from 'axios'; +import Lookup from '../Lookup/Lookup'; -import Typeahead from '../Typeahead/Typeahead'; - -const optionFetcher = async query => { - const response = await axios.get( - 'https://lookups.sls.comicrelief.com/schools/lookup', - { - params: { query }, - timeout: 3000 - } - ); - return response.data.data.schools; +const validatePostcode = postcode => { + const trimmed = typeof postcode === 'string' ? postcode.trim() : ''; + return isValid(trimmed) && toNormalised(trimmed); }; -const optionParser = school => `${school.name}, ${school.post_code}`; +const getAddresses = postcode => axios.get( + `${process.env.GATSBY_LOOKUP_SERVICE_BASE_URL}/postcode/lookup`, + { + timeout: 10000, + params: { query: postcode } + } +).then(res => res.data.addresses || []); -const PostcodeLookup = React.forwardRef( - ( - { - label, - placeholder, - notFoundMessage, - onSelect, - ...rest - }, - ref - ) => { - const props = { - optionFetcher, - optionParser, - onSelect, - id: 'school-lookup', - name: 'school-lookup', - label, - placeholder, - notFoundMessage, - ...rest - }; +const addressToString = address => [address.Line1, address.Line2, address.Line3, address.posttown] + .filter(line => line) + .join(', '); - return ; +const addressFetcher = async postcode => { + const valid = validatePostcode(postcode); + if (!valid) { + throw new Error('Please provide a valid postcode'); } + try { + return await getAddresses(valid); + } catch (error) { + // if (typeof Sentry !== 'undefined') { + // Sentry.captureException(error); + // } + throw new Error('Sorry, something unexpected went wrong. Please try again or enter your address manually'); + } +}; + +/** + * A simple postcode lookup component + * + * The parent component must provide an `onSelect` prop in order to receive the selected address. + * + * @param onSelect + * @param rest + * @returns {JSX.Element} + * @constructor + */ +const PostcodeLookup = ({ onSelect, ...rest }) => ( + ); PostcodeLookup.propTypes = { - /** This function is used to provide data to the parent component when a selection is made. */ - onSelect: PropTypes.func.isRequired, - label: PropTypes.string, - placeholder: PropTypes.string, - notFoundMessage: PropTypes.string -}; - -PostcodeLookup.defaultProps = { - label: 'Find address by postcode', - placeholder: 'Enter postcode...', - notFoundMessage: "Sorry, we can't find this address" + onSelect: PropTypes.func.isRequired }; export default PostcodeLookup; From de27d4cdf33d757520a11a6c74b5d7e09139b861 Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Mon, 2 Oct 2023 13:59:24 +0100 Subject: [PATCH 06/39] get api returning data and add a little styling --- .../PostcodeLookup/PostcodeLookup.js | 27 ++++++++++--------- .../PostcodeLookup/PostcodeLookup.style.js | 12 +++++++++ 2 files changed, 27 insertions(+), 12 deletions(-) create mode 100644 src/components/Molecules/PostcodeLookup/PostcodeLookup.style.js diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.js b/src/components/Molecules/PostcodeLookup/PostcodeLookup.js index 043fac28d..eb2b61410 100644 --- a/src/components/Molecules/PostcodeLookup/PostcodeLookup.js +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { isValid, toNormalised } from 'postcode'; import axios from 'axios'; import Lookup from '../Lookup/Lookup'; +import StyledWrapper from './PostcodeLookup.style'; const validatePostcode = postcode => { const trimmed = typeof postcode === 'string' ? postcode.trim() : ''; @@ -10,7 +11,7 @@ const validatePostcode = postcode => { }; const getAddresses = postcode => axios.get( - `${process.env.GATSBY_LOOKUP_SERVICE_BASE_URL}/postcode/lookup`, + 'https://lookups-staging.sls.comicrelief.com/postcode/lookup', { timeout: 10000, params: { query: postcode } @@ -47,17 +48,19 @@ const addressFetcher = async postcode => { * @constructor */ const PostcodeLookup = ({ onSelect, ...rest }) => ( - + + + ); PostcodeLookup.propTypes = { diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.style.js b/src/components/Molecules/PostcodeLookup/PostcodeLookup.style.js new file mode 100644 index 000000000..2ed926676 --- /dev/null +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.style.js @@ -0,0 +1,12 @@ +import styled from 'styled-components'; +import spacing from '../../../theme/shared/spacing'; + +const StyledWrapper = styled.div` + > div { + display: flex; + flex-direction: column; + gap: ${spacing('md')}; + } +`; + +export default StyledWrapper; From 68c421122087041ac6e96911ac65bd6e889e1848 Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Mon, 2 Oct 2023 14:29:35 +0100 Subject: [PATCH 07/39] refining example --- src/components/Molecules/PostcodeLookup/SchoolLookup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Molecules/PostcodeLookup/SchoolLookup.md b/src/components/Molecules/PostcodeLookup/SchoolLookup.md index 13c981035..aa19a5c44 100644 --- a/src/components/Molecules/PostcodeLookup/SchoolLookup.md +++ b/src/components/Molecules/PostcodeLookup/SchoolLookup.md @@ -13,6 +13,6 @@ const fetchErrorHandler = () => { enterManually ? 'Sorry, there appears to be a problem. Please enter your details manually.' : ( - alert(JSON.stringify(school, null, 2))} fetchErrorHandler={fetchErrorHandler} /> + alert(JSON.stringify(postcode, null, 2))} fetchErrorHandler={fetchErrorHandler} /> ) ``` From ebb411985cac16785f0e282407e52d831f9928f6 Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Mon, 2 Oct 2023 14:38:21 +0100 Subject: [PATCH 08/39] tidy up props --- .../Molecules/PostcodeLookup/PostcodeLookup.md | 2 +- .../Molecules/PostcodeLookup/SchoolLookup.md | 18 ------------------ 2 files changed, 1 insertion(+), 19 deletions(-) delete mode 100644 src/components/Molecules/PostcodeLookup/SchoolLookup.md diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.md b/src/components/Molecules/PostcodeLookup/PostcodeLookup.md index 044d8e996..13c981035 100644 --- a/src/components/Molecules/PostcodeLookup/PostcodeLookup.md +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.md @@ -11,7 +11,7 @@ const fetchErrorHandler = () => { } enterManually - ? 'Sorry, there appears to be a problem. Please enter the school\'s details manually.' + ? 'Sorry, there appears to be a problem. Please enter your details manually.' : ( alert(JSON.stringify(school, null, 2))} fetchErrorHandler={fetchErrorHandler} /> ) diff --git a/src/components/Molecules/PostcodeLookup/SchoolLookup.md b/src/components/Molecules/PostcodeLookup/SchoolLookup.md deleted file mode 100644 index aa19a5c44..000000000 --- a/src/components/Molecules/PostcodeLookup/SchoolLookup.md +++ /dev/null @@ -1,18 +0,0 @@ -# PostcodeLookup - -```js -import PostcodeLookup from './PostcodeLookup'; - -// This is just an example of how a parent component might handle fetch errors within the component. -const [enterManually, setEnterManually] = React.useState(false); - -const fetchErrorHandler = () => { - setEnterManually(true); -} - -enterManually - ? 'Sorry, there appears to be a problem. Please enter your details manually.' - : ( - alert(JSON.stringify(postcode, null, 2))} fetchErrorHandler={fetchErrorHandler} /> - ) -``` From 3b85274c87e59141c07ae95f7d0f1a15c12ec0b3 Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Mon, 2 Oct 2023 15:47:16 +0100 Subject: [PATCH 09/39] clean up --- .../PostcodeLookup/PostcodeLookup.md | 2 +- .../__snapshots__/SchoolLookup.test.js.snap | 107 ------------------ 2 files changed, 1 insertion(+), 108 deletions(-) delete mode 100644 src/components/Molecules/PostcodeLookup/__snapshots__/SchoolLookup.test.js.snap diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.md b/src/components/Molecules/PostcodeLookup/PostcodeLookup.md index 13c981035..3bd39ccf0 100644 --- a/src/components/Molecules/PostcodeLookup/PostcodeLookup.md +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.md @@ -13,6 +13,6 @@ const fetchErrorHandler = () => { enterManually ? 'Sorry, there appears to be a problem. Please enter your details manually.' : ( - alert(JSON.stringify(school, null, 2))} fetchErrorHandler={fetchErrorHandler} /> + alert(JSON.stringify(school, null, 2))} /> ) ``` diff --git a/src/components/Molecules/PostcodeLookup/__snapshots__/SchoolLookup.test.js.snap b/src/components/Molecules/PostcodeLookup/__snapshots__/SchoolLookup.test.js.snap deleted file mode 100644 index 76649c72a..000000000 --- a/src/components/Molecules/PostcodeLookup/__snapshots__/SchoolLookup.test.js.snap +++ /dev/null @@ -1,107 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders correctly 1`] = ` -.c2 { - font-size: 1rem; - line-height: 1rem; - text-transform: inherit; - font-weight: bold; - line-height: normal; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; -} - -.c1 { - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - color: #5C5C5E; - width: 100%; -} - -.c3 { - margin-bottom: 0.5rem; -} - -.c5 { - position: relative; - box-sizing: border-box; - width: 100%; - height: 48px; - padding: 1rem 1.5rem; - background-color: #F4F3F5; - border: 1px solid; - border-color: #E1E2E3; - box-shadow: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - color: #000000; - border-radius: 0.5rem; - font-size: inherit; - z-index: 2; - font-family: 'Montserrat',Helvetica,Arial,sans-serif; -} - -.c5:focus { - border: 1px solid #666; -} - -.c4 { - position: relative; - font-size: 1.25rem; -} - -.c0 { - position: relative; -} - -@media (min-width:740px) { - .c5 { - max-width: 290px; - } -} - -
- -
-`; From b1e03375be09b7be501a5cf93f01a9999ed0db3f Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Mon, 2 Oct 2023 16:03:19 +0100 Subject: [PATCH 10/39] snaps --- .../PostcodeLookup/PostcodeLookup.test.js | 4 +- .../__snapshots__/PostcodeLookup.test.js.snap | 210 ++++++++++++++++++ 2 files changed, 212 insertions(+), 2 deletions(-) create mode 100644 src/components/Molecules/PostcodeLookup/__snapshots__/PostcodeLookup.test.js.snap diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.test.js b/src/components/Molecules/PostcodeLookup/PostcodeLookup.test.js index db48b6538..476caf739 100644 --- a/src/components/Molecules/PostcodeLookup/PostcodeLookup.test.js +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.test.js @@ -2,10 +2,10 @@ import React from 'react'; import 'jest-styled-components'; import renderWithTheme from '../../../hoc/shallowWithTheme'; -import SchoolLookup from './SchoolLookup'; +import PostcodeLookup from './PostcodeLookup'; it('renders correctly', () => { - const renderer = renderWithTheme( {}} />); + const renderer = renderWithTheme( {}} />); expect(renderer.toJSON()).toMatchSnapshot(); }); diff --git a/src/components/Molecules/PostcodeLookup/__snapshots__/PostcodeLookup.test.js.snap b/src/components/Molecules/PostcodeLookup/__snapshots__/PostcodeLookup.test.js.snap new file mode 100644 index 000000000..e11c86f22 --- /dev/null +++ b/src/components/Molecules/PostcodeLookup/__snapshots__/PostcodeLookup.test.js.snap @@ -0,0 +1,210 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +.c4 { + font-size: 1rem; + line-height: 1rem; + text-transform: inherit; + font-weight: bold; + line-height: normal; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + +.c8 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + position: relative; + padding: 0.5rem 1.25rem; + -webkit-text-decoration: none; + text-decoration: none; + font-weight: 700; + font-size: 1rem; + border-radius: 2rem; + -webkit-transition: all 0.3s; + transition: all 0.3s; + height: 3.125rem; + width: 100%; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: none; + cursor: pointer; + background-color: #E52630; + color: #FFFFFF; +} + +.c8 > a { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c8:hover { + background-color: #890B11; + color: #FFFFFF; +} + +.c8 (min-width:1024px) { + width: auto; + padding: 1rem 2rem; + margin: 0 auto 2rem; +} + +.c3 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + color: #5C5C5E; + width: 100%; +} + +.c5 { + margin-bottom: 0.5rem; +} + +.c7 { + position: relative; + box-sizing: border-box; + width: 100%; + height: 48px; + padding: 1rem 1.5rem; + background-color: #F4F3F5; + border: 1px solid; + border-color: #E1E2E3; + box-shadow: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + color: #000000; + border-radius: 0.5rem; + font-size: inherit; + z-index: 2; + font-family: 'Montserrat',Helvetica,Arial,sans-serif; +} + +.c7:focus { + border: 1px solid #666; +} + +.c6 { + position: relative; + font-size: 1.25rem; +} + +.c1 { + position: relative; +} + +.c9:disabled { + cursor: not-allowed; + opacity: 0.75; +} + +.c10 { + color: #222222; + border: 2px solid #222222; + background-color: #FFFFFF; + padding-left: 3rem; + padding-right: 3rem; +} + +.c10:hover { + color: #222222; + background-color: #FFFFFF; +} + +.c2 { + margin-bottom: 1rem; +} + +.c0 > div { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 1rem; +} + +@media (min-width:740px) { + .c8 { + width: auto; + } +} + +@media (min-width:740px) { + .c7 { + max-width: 290px; + } +} + +
+
+
+ +
+ +
+
+`; From a061e7ebba1443e863f53f1d0278e7debd2ad975 Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Tue, 3 Oct 2023 10:58:28 +0100 Subject: [PATCH 11/39] typo --- src/components/Molecules/PostcodeLookup/PostcodeLookup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.md b/src/components/Molecules/PostcodeLookup/PostcodeLookup.md index 3bd39ccf0..4d32ad967 100644 --- a/src/components/Molecules/PostcodeLookup/PostcodeLookup.md +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.md @@ -13,6 +13,6 @@ const fetchErrorHandler = () => { enterManually ? 'Sorry, there appears to be a problem. Please enter your details manually.' : ( - alert(JSON.stringify(school, null, 2))} /> + alert(JSON.stringify(address, null, 2))} /> ) ``` From 8a43e838687121bb85071926c8a6e81303d5492e Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Tue, 3 Oct 2023 14:23:52 +0100 Subject: [PATCH 12/39] add props fro name and label --- .../Molecules/PostcodeLookup/PostcodeLookup.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.js b/src/components/Molecules/PostcodeLookup/PostcodeLookup.js index eb2b61410..33c0978cc 100644 --- a/src/components/Molecules/PostcodeLookup/PostcodeLookup.js +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.js @@ -47,11 +47,13 @@ const addressFetcher = async postcode => { * @returns {JSX.Element} * @constructor */ -const PostcodeLookup = ({ onSelect, ...rest }) => ( +const PostcodeLookup = ({ + onSelect, name, label, ...rest +}) => ( ( ); PostcodeLookup.propTypes = { - onSelect: PropTypes.func.isRequired + onSelect: PropTypes.func.isRequired, + name: PropTypes.string, + label: PropTypes.string +}; + +PostcodeLookup.defaultProps = { + name: 'postcode_lookup', + label: 'Find address by postcode' }; export default PostcodeLookup; From 476f482657cb1c127113a188a38cc68005972047 Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Wed, 4 Oct 2023 13:09:37 +0100 Subject: [PATCH 13/39] sort snapshot re. styled-components-jest --- .../Molecules/PostcodeLookup/PostcodeLookup.test.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.test.js b/src/components/Molecules/PostcodeLookup/PostcodeLookup.test.js index 476caf739..fd42e6dc7 100644 --- a/src/components/Molecules/PostcodeLookup/PostcodeLookup.test.js +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.test.js @@ -4,8 +4,12 @@ import 'jest-styled-components'; import renderWithTheme from '../../../hoc/shallowWithTheme'; import PostcodeLookup from './PostcodeLookup'; -it('renders correctly', () => { - const renderer = renderWithTheme( {}} />); +// const goodPostcode = "bs5 6hq"; +// const badPostcode = "555 6hq"; - expect(renderer.toJSON()).toMatchSnapshot(); +it('renders correctly', () => { + const tree = renderWithTheme( + alert(JSON.stringify(address, null, 2))} /> + ).toJSON(); + expect(tree).toMatchSnapshot() }); From 72b8fb694304eb4bf863f2c5d24721155f798691 Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Wed, 4 Oct 2023 17:25:25 +0100 Subject: [PATCH 14/39] update snapshots and props --- .../PostcodeLookup/PostcodeLookup.js | 21 +++++++++++-------- .../__snapshots__/PostcodeLookup.test.js.snap | 4 ---- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/components/Molecules/PostcodeLookup/PostcodeLookup.js b/src/components/Molecules/PostcodeLookup/PostcodeLookup.js index 33c0978cc..949d9c707 100644 --- a/src/components/Molecules/PostcodeLookup/PostcodeLookup.js +++ b/src/components/Molecules/PostcodeLookup/PostcodeLookup.js @@ -48,15 +48,14 @@ const addressFetcher = async postcode => { * @constructor */ const PostcodeLookup = ({ - onSelect, name, label, ...rest + onSelect, label, placeholder, buttonText, noResultsMessage, ...rest }) => (