setup basic component

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 <Typeahead {...props} ref={ref} />;
+  }
+);
+
+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;

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.'
+  : (
+    <PostcodeLookup onSelect={school => alert(JSON.stringify(school, null, 2))} fetchErrorHandler={fetchErrorHandler} />
+  )
+```

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;

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.'
   : (
-    <SchoolLookup onSelect={school => alert(JSON.stringify(school, null, 2))} fetchErrorHandler={fetchErrorHandler} />
+    <PostcodeLookup onSelect={school => alert(JSON.stringify(school, null, 2))} fetchErrorHandler={fetchErrorHandler} />
   )
 ```