@comicrelief/component-library 5.6.1 → 5.8.0

package/.github/workflows/main.yml

@@ -0,0 +1,131 @@
+name: Main
+
+on: [push]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14
+
+      - name: Restore packages cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile --ignore-scripts
+
+      - name: Run ESLint
+        run: yarn lint
+
+  unit-test:
+    name: Unit test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14
+
+      - name: Restore packages cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile --ignore-scripts
+
+      - name: Build
+        run: yarn build
+
+      - name: Run unit tests
+        run: yarn test --maxWorkers=2
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
+
+  cypress:
+    name: Cypress test
+    needs:
+      - lint
+      - unit-test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14
+
+      # see https://github.com/marketplace/actions/cypress-io
+      - name: Run Cypress tests
+        uses: cypress-io/github-action@v2
+        with:
+          start: yarn styleguide
+          command: yarn cy:run
+          wait-on: http://localhost:6060
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
+
+      # NOTE: screenshots will be generated only if the tests failed
+      # thus we store screenshots only on failures
+      - name: Upload screenshots
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+
+      # Test run video was always captured, so this action uses "always()" condition
+      - name: Upload videos
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: cypress-videos
+          path: cypress/videos
+
+  publish:
+    name: Publish package to npm
+    if: github.ref == 'refs/heads/master'
+    needs: cypress
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14
+
+      - name: Restore packages cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile --ignore-scripts
+
+      - name: Build
+        run: yarn build
+
+      - name: Release
+        run: yarn semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_PUBLISHING_TOKEN }}

package/.github/workflows/pr-checks.yml

@@ -0,0 +1,17 @@
+name: PR
+
+on: [pull_request]
+
+jobs:
+  # https://github.com/amannn/action-semantic-pull-request#example-config
+  check-semantic-pr:
+    name: Semantic pull request
+    runs-on: ubuntu-latest
+    steps:
+      # Please look up the latest version from
+      # https://github.com/amannn/action-semantic-pull-request/releases
+      - uses: amannn/action-semantic-pull-request@v4.4.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          validateSingleCommit: true

package/README.md

@@ -1,7 +1,7 @@
 Comic Relief React Component Library 
 --------------
 
-[![CircleCI](https://circleci.com/gh/comicrelief/component-library.svg?style=svg)](https://circleci.com/gh/comicrelief/component-library)
+[![GitHub Actions](https://github.com/comicrelief/component-library/actions/workflows/main.yml/badge.svg)](https://github.com/comicrelief/component-library/actions)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
 React components to be shared across Comic Relief applications
@@ -27,24 +27,24 @@ import { HeroBanner } from '@comic-relief/component-library';
 
 ### Develop
 
-To install CR-CL locally run
+To install CR-CL locally, run:
 
 ```
 $ yarn install
 ```
 
-To start
+To start the dev build and server:
 ```
 $ yarn styleguide
 ```
 
-To test
+To test:
 ```
 $ yarn test
 ```
-_Test will run through all jest tests and watch for any changes on snapshots._
+_Test will run through all Jest tests and watch for any changes on snapshots._
 
-To update snapshots
+To update snapshots with desired changes brought in through your work:
 ```
 $ yarn test -u
 ```

package/dist/components/Atoms/ButtonWithStates/ButtonWithStates.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ScaleLoader = _interopRequireDefault(require("react-spinners/ScaleLoader"));
+
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _excluded = ["children", "loadingText", "loading", "disabled"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ButtonWithDisabledState = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "ButtonWithStates__ButtonWithDisabledState",
+  componentId: "sc-7gb81g-0"
+})(["&:disabled{cursor:not-allowed;opacity:0.75;}"]);
+
+var LoaderContainer = _styledComponents.default.div.withConfig({
+  displayName: "ButtonWithStates__LoaderContainer",
+  componentId: "sc-7gb81g-1"
+})(["", ""], function (_ref) {
+  var withMargin = _ref.withMargin;
+  return withMargin ? "\n  margin-top: ".concat((0, _spacing.default)('xsm'), ";\n  margin-left: ").concat((0, _spacing.default)('md'), ";\n") : '';
+}); // A button with loading and disabled states.
+
+
+var ButtonWithStates = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      loadingText = _ref2.loadingText,
+      loading = _ref2.loading,
+      disabled = _ref2.disabled,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      loaderColour = _useState2[0],
+      setLoaderColour = _useState2[1]; // Can't see a simpler way to get the button's text colour, without reading the value
+  //  via JavaScript.
+  //  (e.g. the `theme.buttonColours` helper returns a CSS string split into an array -
+  //  don't really want to be parsing that.)
+  //  (And can't use inherit because ScaleLoader's color prop is actually setting its
+  //  background color.)
+
+
+  var getLoaderColour = (0, _react.useCallback)(function (node) {
+    if (node && typeof window.getComputedStyle === 'function') {
+      var textColour = window.getComputedStyle(node).color;
+
+      if (textColour) {
+        setLoaderColour(textColour);
+      }
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(ButtonWithDisabledState, Object.assign({
+    ref: ref,
+    disabled: disabled
+  }, rest), loading ? loadingText : children, /*#__PURE__*/_react.default.createElement(LoaderContainer, {
+    ref: getLoaderColour,
+    withMargin: loading
+  }, /*#__PURE__*/_react.default.createElement(_ScaleLoader.default, {
+    height: 16,
+    width: 2,
+    loading: loading,
+    color: loaderColour
+  })));
+});
+
+ButtonWithStates.defaultProps = {
+  loading: false,
+  disabled: false,
+  loadingText: 'Loading'
+};
+var _default = ButtonWithStates;
+exports.default = _default;

package/dist/components/Atoms/ButtonWithStates/ButtonWithStates.md

@@ -0,0 +1,13 @@
+## Disabled and loading
+
+```js
+import ButtonWithStates from './ButtonWithStates';
+
+<ButtonWithStates
+  type="submit"
+  loading
+  disabled
+>
+  Enter prize draw
+</ButtonWithStates>
+```

package/dist/components/Atoms/Link/Link.js

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Link = _interopRequireWildcard(require("./Link.style"));
 
@@ -37,13 +39,19 @@ var Link = function Link(_ref) {
       iconFirst = _ref.iconFirst,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      documentHost = _useState2[0],
+      setDocumentHost = _useState2[1];
   /**
    * If we haven't specifically set the target via props, check if
    * this is an internal link OR on our whitelist before making it a '_self' link
    */
+
+
   if (target === null) {
     // Use our helper function to determine the raw domains to compare
-    var currentDomain = (0, _internalLinkHelper.getDomain)(document.location.host);
+    var currentDomain = (0, _internalLinkHelper.getDomain)(documentHost);
     var linkDomain = (0, _internalLinkHelper.getDomain)(href); // Additional check for applications that need more control
 
     var isWhiteListOverridden = rest.overrideWhiteList === true;
@@ -61,6 +69,9 @@ var Link = function Link(_ref) {
   }
 
   var hasIcon = icon !== null;
+  (0, _react.useEffect)(function () {
+    setDocumentHost(document.location.host);
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_Link.default, Object.assign({}, rest, {
     color: color,
     href: href,

package/dist/components/Molecules/Lookup/Lookup.js

@@ -0,0 +1,201 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TextInputWithDropdown = _interopRequireDefault(require("../../Atoms/TextInputWithDropdown/TextInputWithDropdown"));
+
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
+
+var _ButtonWithStates = _interopRequireDefault(require("../../Atoms/ButtonWithStates/ButtonWithStates"));
+
+var _excluded = ["name", "label", "placeholder", "buttonText", "lookupHandler", "mapOptionToString", "onSelect", "noResultsMessage", "dropdownInstruction"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var StyledButton = (0, _styledComponents.default)(_ButtonWithStates.default).withConfig({
+  displayName: "Lookup__StyledButton",
+  componentId: "sc-uu5bpv-0"
+})(["", ""], function (_ref) {
+  var theme = _ref.theme;
+  return (0, _styledComponents.css)(["color:", ";border:2px solid ", ";background-color:", ";padding-left:", ";padding-right:", ";&:hover{color:", ";background-color:", ";}"], theme.color('grey_dark'), theme.color('grey_dark'), theme.color('white'), (0, _spacing.default)('lg'), (0, _spacing.default)('lg'), theme.color('grey_dark'), theme.color('white'));
+});
+var KEY_CODE_ENTER = 13;
+/**
+ * A simple lookup component
+ *
+ * The `lookupHandler` should be an async function which is called when a lookup is triggered
+ *  (either by hitting enter or clicking the button)
+ *
+ * It will receive the current search term and should:
+ * - take care of any validation on the search term
+ * - perform the actual lookup request
+ * - return an array of options (or an empty array if none were found)
+ * - only throw errors with user-friendly messages
+ *
+ * Any errors thrown will be caught and the message will be displayed to the user.
+ *
+ * The `onSelect` function will receive the chosen option.
+ *
+ * @param name
+ * @param label
+ * @param placeholder
+ * @param buttonText
+ * @param lookupHandler
+ * @param mapOptionToString
+ * @param onSelect
+ * @param noResultsMessage
+ * @param dropdownInstruction
+ * @param rest
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+var Lookup = function Lookup(_ref2) {
+  var name = _ref2.name,
+      label = _ref2.label,
+      placeholder = _ref2.placeholder,
+      buttonText = _ref2.buttonText,
+      lookupHandler = _ref2.lookupHandler,
+      mapOptionToString = _ref2.mapOptionToString,
+      _onSelect = _ref2.onSelect,
+      noResultsMessage = _ref2.noResultsMessage,
+      dropdownInstruction = _ref2.dropdownInstruction,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      query = _useState2[0],
+      setQuery = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      errorMessage = _useState4[0],
+      setErrorMessage = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      options = _useState6[0],
+      setOptions = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      isSearching = _useState8[0],
+      setIsSearching = _useState8[1];
+
+  var handler = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var results;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            setErrorMessage('');
+            setIsSearching(true);
+            _context.prev = 2;
+            _context.next = 5;
+            return lookupHandler(query);
+
+          case 5:
+            results = _context.sent;
+            setOptions(results);
+
+            if (results.length === 0) {
+              setErrorMessage(noResultsMessage);
+            }
+
+            _context.next = 13;
+            break;
+
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](2);
+            setErrorMessage(_context.t0.message);
+
+          case 13:
+            setIsSearching(false);
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[2, 10]]);
+  })), [query, setOptions, setErrorMessage, noResultsMessage, lookupHandler]);
+  return /*#__PURE__*/_react.default.createElement("div", rest, /*#__PURE__*/_react.default.createElement(_StyledTextInputWithDropdown, {
+    name: name,
+    id: name,
+    value: query,
+    options: options.map(mapOptionToString),
+    label: label,
+    placeholder: placeholder,
+    onChange: function onChange(e) {
+      setQuery(e.target.value);
+      setErrorMessage('');
+      setOptions([]);
+    },
+    onKeyPress: function onKeyPress(e) {
+      var keyCode = e.keyCode || e.which;
+
+      if (keyCode === KEY_CODE_ENTER) {
+        e.preventDefault();
+        return handler();
+      }
+
+      return null;
+    },
+    onSelect: function onSelect(text, index) {
+      var selection = options[index];
+
+      _onSelect(selection);
+
+      setQuery('');
+      setErrorMessage('');
+      setOptions([]);
+    },
+    errorMsg: errorMessage,
+    dropdownInstruction: dropdownInstruction,
+    $_css: (0, _spacing.default)('md')
+  }), /*#__PURE__*/_react.default.createElement(StyledButton, {
+    type: "button",
+    onClick: function onClick() {
+      return handler();
+    },
+    loading: isSearching,
+    disabled: isSearching,
+    loadingText: "Searching"
+  }, buttonText));
+};
+
+Lookup.defaultProps = {
+  noResultsMessage: 'Sorry, could not find any results for your search',
+  dropdownInstruction: ''
+};
+var _default = Lookup;
+exports.default = _default;
+
+var _StyledTextInputWithDropdown = (0, _styledComponents.default)(_TextInputWithDropdown.default).withConfig({
+  displayName: "Lookup___StyledTextInputWithDropdown",
+  componentId: "sc-uu5bpv-1"
+})(function (p) {
+  return {
+    marginBottom: p.$_css
+  };
+});

package/dist/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _Lookup = _interopRequireDefault(require("../Lookup/Lookup"));
+
+var _excluded = ["onSelect"];
+
+var schoolFetcher = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {
+    var res;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!query || !query.trim())) {
+              _context.next = 2;
+              break;
+            }
+
+            throw new Error('Please enter a search query');
+
+          case 2:
+            if (!(query.length < 2)) {
+              _context.next = 4;
+              break;
+            }
+
+            throw new Error('Please enter at least two characters');
+
+          case 4:
+            _context.prev = 4;
+            _context.next = 7;
+            return _axios.default.get('https://lookups.sls.comicrelief.com/schools/lookup', {
+              timeout: 10000,
+              params: {
+                query: query
+              }
+            });
+
+          case 7:
+            res = _context.sent;
+            return _context.abrupt("return", res.data.data.schools);
+
+          case 11:
+            _context.prev = 11;
+            _context.t0 = _context["catch"](4);
+            throw new Error('Sorry, something unexpected went wrong. Please try again or enter your school manually');
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[4, 11]]);
+  }));
+
+  return function schoolFetcher(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+var schoolToString = function schoolToString(school) {
+  return "".concat(school.name, ", ").concat(school.post_code);
+};
+/**
+ * The component library's school lookup component uses a typeahead/search-as-you-type approach.
+ *
+ * Given the API we use is v flaky and can be slow, this isn't really ideal.
+ *
+ * This version just has a simple input + a button (or you can hit enter) to trigger the search.
+ *
+ * @param onSelect
+ * @param rest
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+
+var SimpleSchoolLookup = function SimpleSchoolLookup(_ref2) {
+  var onSelect = _ref2.onSelect,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Lookup.default, Object.assign({
+    name: "school_lookup",
+    label: "Enter the name or postcode of your organisation",
+    placeholder: "Enter name or postcode...",
+    buttonText: "Find school",
+    dropdownInstruction: "Please select an organisation from the list below",
+    noResultsMessage: "Sorry, could not find anything matching your search",
+    lookupHandler: schoolFetcher,
+    mapOptionToString: schoolToString,
+    onSelect: onSelect
+  }, rest));
+};
+
+var _default = SimpleSchoolLookup;
+exports.default = _default;

package/dist/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.md

@@ -0,0 +1,7 @@
+```js
+
+import SimpleSchoolLookup from './SimpleSchoolLookup';
+
+<SimpleSchoolLookup onSelect={data => console.log(data)}/>
+
+```

package/dist/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -896,6 +896,10 @@ exports[`renders Single Message with full width image and no text correctly 1`]
   z-index: 1;
 }
 
+@media (min-width:740px) {
+
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -1010,6 +1014,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
   padding: 1rem;
 }
 
+@media (min-width:740px) {
+
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;

package/dist/index.js

@@ -167,6 +167,12 @@ Object.defineProperty(exports, "Label", {
     return _Label.default;
   }
 });
+Object.defineProperty(exports, "ButtonWithStates", {
+  enumerable: true,
+  get: function get() {
+    return _ButtonWithStates.default;
+  }
+});
 Object.defineProperty(exports, "HeroBanner", {
   enumerable: true,
   get: function get() {
@@ -329,6 +335,18 @@ Object.defineProperty(exports, "Descriptor", {
     return _Descriptor.default;
   }
 });
+Object.defineProperty(exports, "Lookup", {
+  enumerable: true,
+  get: function get() {
+    return _Lookup.default;
+  }
+});
+Object.defineProperty(exports, "SimpleSchoolLookup", {
+  enumerable: true,
+  get: function get() {
+    return _SimpleSchoolLookup.default;
+  }
+});
 Object.defineProperty(exports, "EmailSignUp", {
   enumerable: true,
   get: function get() {
@@ -416,6 +434,8 @@ var _ErrorText = _interopRequireDefault(require("./components/Atoms/ErrorText/Er
 
 var _Label = _interopRequireDefault(require("./components/Atoms/Label/Label"));
 
+var _ButtonWithStates = _interopRequireDefault(require("./components/Atoms/ButtonWithStates/ButtonWithStates"));
+
 var _HeroBanner = _interopRequireDefault(require("./components/Molecules/HeroBanner/HeroBanner"));
 
 var _InfoBanner = _interopRequireDefault(require("./components/Molecules/InfoBanner/InfoBanner"));
@@ -470,6 +490,10 @@ var _Chip = _interopRequireDefault(require("./components/Molecules/Chip/Chip"));
 
 var _Descriptor = _interopRequireDefault(require("./components/Molecules/Descriptor/Descriptor"));
 
+var _Lookup = _interopRequireDefault(require("./components/Molecules/Lookup/Lookup"));
+
+var _SimpleSchoolLookup = _interopRequireDefault(require("./components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup"));
+
 var _EmailSignUp = _interopRequireDefault(require("./components/Organisms/EmailSignUp/EmailSignUp"));
 
 var _CookieBanner = _interopRequireDefault(require("./components/Organisms/CookieBanner/CookieBanner"));

package/dist/theme/crTheme/colors.js

@@ -13,6 +13,11 @@ var colors = {
   coral: '#F9686D',
   coral_dark: '#961D35',
   coral_light: '#FFCECE',
+  cwg22_blue: '#204794',
+  cwg22_orange: '#FB6326',
+  cwg22_purple: '#7B3ED3',
+  cwg22_red: '#E62731',
+  cwg22_yellow: '#F8E928',
   deep_violet_dark: '#2C0230',
   deep_violet: '#2C0230'
   /** Will be removed  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "5.6.1",
+  "version": "5.8.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -35,6 +35,7 @@
     "react-hook-form": "^6.3.0",
     "react-modal": "^3.14.3",
     "react-scripts": "4.0.3",
+    "react-spinners": "^0.11.0",
     "react-styleguidist": "^11.1.7",
     "react-test-renderer": "^17.0.2",
     "react-uid": "^2.2.0",

package/src/components/Atoms/ButtonWithStates/ButtonWithStates.js

@@ -0,0 +1,64 @@
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ScaleLoader from 'react-spinners/ScaleLoader';
+import spacing from '../../../theme/shared/spacing';
+import Button from '../Button/Button';
+
+const ButtonWithDisabledState = styled(Button)`
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.75;
+  }
+`;
+
+const LoaderContainer = styled.div`${({ withMargin }) => (withMargin ? `
+  margin-top: ${spacing('xsm')};
+  margin-left: ${spacing('md')};
+` : '')}`;
+
+// A button with loading and disabled states.
+const ButtonWithStates = React.forwardRef(({
+  children, loadingText, loading, disabled, ...rest
+}, ref) => {
+  const [loaderColour, setLoaderColour] = useState(null);
+
+  // Can't see a simpler way to get the button's text colour, without reading the value
+  //  via JavaScript.
+  //  (e.g. the `theme.buttonColours` helper returns a CSS string split into an array -
+  //  don't really want to be parsing that.)
+  //  (And can't use inherit because ScaleLoader's color prop is actually setting its
+  //  background color.)
+  const getLoaderColour = useCallback(node => {
+    if (node && typeof window.getComputedStyle === 'function') {
+      const textColour = window.getComputedStyle(node).color;
+      if (textColour) {
+        setLoaderColour(textColour);
+      }
+    }
+  }, []);
+
+  return (
+    <ButtonWithDisabledState ref={ref} disabled={disabled} {...rest}>
+      {loading ? loadingText : children}
+      <LoaderContainer ref={getLoaderColour} withMargin={loading}>
+        <ScaleLoader height={16} width={2} loading={loading} color={loaderColour} />
+      </LoaderContainer>
+    </ButtonWithDisabledState>
+  );
+});
+
+ButtonWithStates.propTypes = {
+  children: PropTypes.node.isRequired,
+  loadingText: PropTypes.string,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool
+};
+
+ButtonWithStates.defaultProps = {
+  loading: false,
+  disabled: false,
+  loadingText: 'Loading'
+};
+
+export default ButtonWithStates;

package/src/components/Atoms/ButtonWithStates/ButtonWithStates.md

@@ -0,0 +1,13 @@
+## Disabled and loading
+
+```js
+import ButtonWithStates from './ButtonWithStates';
+
+<ButtonWithStates
+  type="submit"
+  loading
+  disabled
+>
+  Enter prize draw
+</ButtonWithStates>
+```

package/src/components/Atoms/Link/Link.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import StyledLink, { HelperText, IconWrapper } from './Link.style';
@@ -19,13 +19,14 @@ const Link = ({
   iconFirst,
   ...rest
 }) => {
+  const [documentHost, setDocumentHost] = useState('');
   /**
    * If we haven't specifically set the target via props, check if
    * this is an internal link OR on our whitelist before making it a '_self' link
    */
   if (target === null) {
     // Use our helper function to determine the raw domains to compare
-    const currentDomain = getDomain(document.location.host);
+    const currentDomain = getDomain(documentHost);
     const linkDomain = getDomain(href);
 
     // Additional check for applications that need more control
@@ -45,6 +46,10 @@ const Link = ({
   }
   const hasIcon = icon !== null;
 
+  useEffect(() => {
+    setDocumentHost(document.location.host);
+  }, []);
+
   return (
     <StyledLink
       {...rest}

package/src/components/Molecules/Lookup/Lookup.js

@@ -0,0 +1,148 @@
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import TextInputWithDropdown from '../../Atoms/TextInputWithDropdown/TextInputWithDropdown';
+import spacing from '../../../theme/shared/spacing';
+import ButtonWithStates from '../../Atoms/ButtonWithStates/ButtonWithStates';
+
+const StyledButton = styled(ButtonWithStates)`${({ theme }) => css`
+  color: ${theme.color('grey_dark')};
+  border: 2px solid ${theme.color('grey_dark')};
+  background-color: ${theme.color('white')};
+  padding-left: ${spacing('lg')};
+  padding-right: ${spacing('lg')};
+  
+  &:hover {
+    color: ${theme.color('grey_dark')};
+    background-color: ${theme.color('white')};
+  }
+`}`;
+
+const KEY_CODE_ENTER = 13;
+
+/**
+ * A simple lookup component
+ *
+ * The `lookupHandler` should be an async function which is called when a lookup is triggered
+ *  (either by hitting enter or clicking the button)
+ *
+ * It will receive the current search term and should:
+ * - take care of any validation on the search term
+ * - perform the actual lookup request
+ * - return an array of options (or an empty array if none were found)
+ * - only throw errors with user-friendly messages
+ *
+ * Any errors thrown will be caught and the message will be displayed to the user.
+ *
+ * The `onSelect` function will receive the chosen option.
+ *
+ * @param name
+ * @param label
+ * @param placeholder
+ * @param buttonText
+ * @param lookupHandler
+ * @param mapOptionToString
+ * @param onSelect
+ * @param noResultsMessage
+ * @param dropdownInstruction
+ * @param rest
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Lookup = ({
+  name,
+  label,
+  placeholder,
+  buttonText,
+  lookupHandler,
+  mapOptionToString,
+  onSelect,
+  noResultsMessage,
+  dropdownInstruction,
+  ...rest
+}) => {
+  const [query, setQuery] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [options, setOptions] = useState([]);
+  const [isSearching, setIsSearching] = useState(false);
+
+  const handler = useCallback(async () => {
+    setErrorMessage('');
+    setIsSearching(true);
+    try {
+      // If lookupHandler throws an error, the message will be displayed to the user
+      const results = await lookupHandler(query);
+      setOptions(results);
+      if (results.length === 0) {
+        setErrorMessage(noResultsMessage);
+      }
+    } catch (error) {
+      setErrorMessage(error.message);
+    }
+    setIsSearching(false);
+  }, [query, setOptions, setErrorMessage, noResultsMessage, lookupHandler]);
+
+  return (
+    <div {...rest}>
+      <TextInputWithDropdown
+        css={{ marginBottom: spacing('md') }}
+        name={name}
+        id={name}
+        value={query}
+        options={options.map(mapOptionToString)}
+        label={label}
+        placeholder={placeholder}
+        onChange={e => {
+          setQuery(e.target.value);
+          setErrorMessage('');
+          setOptions([]);
+        }}
+        onKeyPress={e => {
+          const keyCode = e.keyCode || e.which;
+          if (keyCode === KEY_CODE_ENTER) {
+            e.preventDefault();
+            return handler();
+          }
+          return null;
+        }}
+        onSelect={(text, index) => {
+          const selection = options[index];
+          onSelect(selection);
+          setQuery('');
+          setErrorMessage('');
+          setOptions([]);
+        }}
+        errorMsg={errorMessage}
+        dropdownInstruction={dropdownInstruction}
+      />
+      <StyledButton
+        type="button"
+        onClick={() => handler()}
+        loading={isSearching}
+        disabled={isSearching}
+        loadingText="Searching"
+      >
+        {buttonText}
+      </StyledButton>
+    </div>
+  );
+};
+
+Lookup.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  buttonText: PropTypes.string.isRequired,
+  lookupHandler: PropTypes.func.isRequired,
+  mapOptionToString: PropTypes.func.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  noResultsMessage: PropTypes.string,
+  dropdownInstruction: PropTypes.string
+};
+
+Lookup.defaultProps = {
+  noResultsMessage: 'Sorry, could not find any results for your search',
+  dropdownInstruction: ''
+};
+
+export default Lookup;

package/src/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+
+import Lookup from '../Lookup/Lookup';
+
+const schoolFetcher = async query => {
+  if (!query || !query.trim()) {
+    throw new Error('Please enter a search query');
+  }
+
+  if (query.length < 2) {
+    throw new Error('Please enter at least two characters');
+  }
+
+  try {
+    const res = await axios.get(
+      'https://lookups.sls.comicrelief.com/schools/lookup',
+      { timeout: 10000, params: { query } }
+    );
+    return res.data.data.schools;
+  } catch (error) {
+    // if (typeof Sentry !== 'undefined') {
+    //   Sentry.captureException(error);
+    // }
+    throw new Error('Sorry, something unexpected went wrong. Please try again or enter your school manually');
+  }
+};
+
+const schoolToString = school => `${school.name}, ${school.post_code}`;
+
+/**
+ * The component library's school lookup component uses a typeahead/search-as-you-type approach.
+ *
+ * Given the API we use is v flaky and can be slow, this isn't really ideal.
+ *
+ * This version just has a simple input + a button (or you can hit enter) to trigger the search.
+ *
+ * @param onSelect
+ * @param rest
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SimpleSchoolLookup = ({ onSelect, ...rest }) => (
+  <Lookup
+    name="school_lookup"
+    label="Enter the name or postcode of your organisation"
+    placeholder="Enter name or postcode..."
+    buttonText="Find school"
+    dropdownInstruction="Please select an organisation from the list below"
+    noResultsMessage="Sorry, could not find anything matching your search"
+    lookupHandler={schoolFetcher}
+    mapOptionToString={schoolToString}
+    onSelect={onSelect}
+    {...rest}
+  />
+);
+
+SimpleSchoolLookup.propTypes = {
+  onSelect: PropTypes.func.isRequired
+};
+
+export default SimpleSchoolLookup;

package/src/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.md

@@ -0,0 +1,7 @@
+```js
+
+import SimpleSchoolLookup from './SimpleSchoolLookup';
+
+<SimpleSchoolLookup onSelect={data => console.log(data)}/>
+
+```

package/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -896,6 +896,10 @@ exports[`renders Single Message with full width image and no text correctly 1`]
   z-index: 1;
 }
 
+@media (min-width:740px) {
+
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -1010,6 +1014,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
   padding: 1rem;
 }
 
+@media (min-width:740px) {
+
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;

package/src/index.js

@@ -29,6 +29,7 @@ export { default as SocialIcons } from './components/Atoms/SocialIcons/SocialIco
 export { default as TextInputWithDropdown } from './components/Atoms/TextInputWithDropdown/TextInputWithDropdown';
 export { default as ErrorText } from './components/Atoms/ErrorText/ErrorText';
 export { default as Label } from './components/Atoms/Label/Label';
+export { default as ButtonWithStates } from './components/Atoms/ButtonWithStates/ButtonWithStates';
 
 /* Molecules */
 export { default as HeroBanner } from './components/Molecules/HeroBanner/HeroBanner';
@@ -58,6 +59,8 @@ export { default as Countdown } from './components/Molecules/Countdown/Countdown
 export { default as Banner } from './components/Molecules/Banner/Banner';
 export { default as Chip } from './components/Molecules/Chip/Chip';
 export { default as Descriptor } from './components/Molecules/Descriptor/Descriptor';
+export { default as Lookup } from './components/Molecules/Lookup/Lookup';
+export { default as SimpleSchoolLookup } from './components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup';
 
 /* Organisms */
 export { default as EmailSignUp } from './components/Organisms/EmailSignUp/EmailSignUp';

package/src/theme/crTheme/colors.js

@@ -7,6 +7,11 @@ const colors = {
   coral: '#F9686D',
   coral_dark: '#961D35',
   coral_light: '#FFCECE',
+  cwg22_blue: '#204794',
+  cwg22_orange: '#FB6326',
+  cwg22_purple: '#7B3ED3',
+  cwg22_red: '#E62731',
+  cwg22_yellow: '#F8E928',
   deep_violet_dark: '#2C0230',
   deep_violet: '#2C0230' /** Will be removed  */,
   deep_violet_light: '#3e1c43',

package/.circleci/config.yml

@@ -1,54 +0,0 @@
-# Javascript Node CircleCI 2.0 configuration file
-#
-# Check https://circleci.com/docs/2.0/language-javascript/ for more details
-#
-version: 2
-jobs:
-  build:
-    docker:
-
-      # See https://github.com/cypress-io/cypress-docker-images
-      - image: cypress/browsers:node14.16.0-chrome89-ff77
-        environment:
-          TERM: xterm
-          NODE_OPTIONS: --max_old_space_size=4096
-
-    working_directory: ~/repo
-
-    steps:
-      - checkout
-
-      # Download and cache dependencies
-      - restore_cache:
-          key: dependency-cache-{{ checksum "yarn.lock" }}
-
-      - run: yarn install
-
-      - save_cache:
-          key: dependency-cache-{{ checksum "yarn.lock" }}
-          paths:
-            - node_modules
-            - /root/.cache/Cypress
-
-      # run tests!
-      - run:
-          name: Test Code Style
-          command: yarn lint
-
-      - run:
-          name: Run unit tests
-          command: yarn test --maxWorkers=2
-
-      - run:
-          name: Release to npm
-          command: yarn semantic-release
-
-      - run:
-          name: Run feature tests
-          command: yarn feature-test
-
-      - store_artifacts:
-          path: cypress/videos
-
-      - store_artifacts:
-          path: cypress/screenshots