@comicrelief/component-library 5.4.0 → 5.7.0

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

@@ -1,12 +1,9 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import StyledLink, { HelperText, IconWrapper } from './Link.style';
 import whiteListed from '../../../utils/whiteListed';
-
-const domainRegEx = new RegExp(
-  '(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]'
-);
+import { getDomain } from '../../../utils/internalLinkHelper';
 
 let window = '';
 
@@ -22,19 +19,37 @@ 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) {
-    const isExternalLink = domainRegEx.test(href);
+    // Use our helper function to determine the raw domains to compare
+    const currentDomain = getDomain(documentHost);
+    const linkDomain = getDomain(href);
+
+    // Additional check for applications that need more control
+    const isWhiteListOverridden = rest.overrideWhiteList === true;
+
+    /**
+     * If the link has no domain supplied (likely '/' or '#')
+     * OR has the same domain as the current page, don't open
+     * in a new tab
+     */
+    const isExternalLink = linkDomain !== '' && (currentDomain !== linkDomain);
     const isWhiteListed = whiteListed(href);
-    window = !isExternalLink || isWhiteListed ? '_self' : '_blank';
+
+    window = isExternalLink && (isWhiteListOverridden || !isWhiteListed) ? '_blank' : '_self';
   } else {
     window = target === 'blank' ? '_blank' : '_self';
   }
   const hasIcon = icon !== null;
 
+  useEffect(() => {
+    setDocumentHost(document.location.host);
+  }, []);
+
   return (
     <StyledLink
       {...rest}
@@ -46,7 +61,7 @@ const Link = ({
       underline={underline}
     >
       {children}
-      {target === 'blank' && <HelperText>(opens in new window)</HelperText>}
+      {window === '_blank' && <HelperText>(opens in new window)</HelperText>}
       {hasIcon && <IconWrapper type={type}>{icon}</IconWrapper>}
     </StyledLink>
   );

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/SingleMessage.js

@@ -15,7 +15,7 @@ import {
 
 const allPlayers = {};
 
-/** Single Message is our main component usually to build landing pages */
+/* Single Message is our main component usually to build landing pages */
 const SingleMessage = ({
   backgroundColor,
   copyFirst,

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/components/Organisms/Footer/Footer.js

@@ -31,7 +31,7 @@ const Footer = ({
               <Logo sizeSm="48px" sizeMd="72px" rotate={false} campaign={campaign} />
             </Brand>
           </FooterBranding>
-          <FooterNav navItems={navItems} />
+          <FooterNav navItems={navItems} {...rest} />
           <FooterCopyright>
             <Text tag="p" color="grey">
               {footerCopy}
@@ -46,13 +46,15 @@ const Footer = ({
 Footer.propTypes = {
   navItems: PropTypes.objectOf(PropTypes.shape),
   footerCopy: PropTypes.string,
-  campaign: PropTypes.string
+  campaign: PropTypes.string,
+  overrideWhiteList: PropTypes.bool
 };
 
 Footer.defaultProps = {
   navItems: {},
   footerCopy: '',
-  campaign: 'Comic Relief'
+  campaign: 'Comic Relief',
+  overrideWhiteList: false
 };
 
 export default Footer;

package/src/components/Organisms/Footer/Footer.md

@@ -4,5 +4,12 @@
 import data from './data/data';
 import footerCopy from './data/footerCopy';
 
-<Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief" />;
+<>
+    <p>Standard footer</p>
+    <Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief"  />
+
+    <p>Overrides whitelist functionality for external usage</p>
+    <Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief" overrideWhiteList />
+</>
+
 ```

package/src/components/Organisms/Footer/Nav/Nav.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Text from '../../../Atoms/Text/Text';
 import { sizes } from '../../../../theme/shared/breakpoint';
 import NavHelper from '../../../../utils/navHelper';
-import InternalLinkHelper from '../../../../utils/internalLinkHelper';
+import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
 
 import {
   Nav,
@@ -16,7 +16,7 @@ import {
   SubNavLink
 } from './Nav.style';
 
-const FooterNav = ({ navItems }) => {
+const FooterNav = ({ navItems, ...rest }) => {
   const { menuGroups } = navItems;
   const [isExpandable] = useState(false);
   const [isSubMenuOpen, setIsSubMenuOpen] = useState({});
@@ -78,6 +78,7 @@ const FooterNav = ({ navItems }) => {
                 aria-haspopup="true"
                 role="button"
                 onClick={toggleSubMenu(group.id)}
+                {...rest}
               >
                 <Text color="white">{group.title}</Text>
               </NavLink>
@@ -103,7 +104,7 @@ const FooterNav = ({ navItems }) => {
                         group.links.length % 2 === 0 && group.links.length > 2
                       }
                     >
-                      <SubNavLink href={thisUrl} inline role="menuitem">
+                      <SubNavLink href={thisUrl} inline role="menuitem" {...rest}>
                         <Text color="white">{child.title}</Text>
                       </SubNavLink>
                     </SubNavItem>

package/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -27,7 +27,7 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c25 {
+.c26 {
   color: #969598;
   font-size: 1rem;
   line-height: 1rem;
@@ -69,6 +69,21 @@ exports[`renders correctly 1`] = `
   border-bottom: 2px solid #000000;
 }
 
+.c24 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .c5 {
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -313,7 +328,7 @@ exports[`renders correctly 1`] = `
   align-items: center;
 }
 
-.c24 {
+.c25 {
   display: block;
   width: 100%;
   height: 100%;
@@ -321,7 +336,7 @@ exports[`renders correctly 1`] = `
   margin-top: 3rem;
 }
 
-.c24 p {
+.c25 p {
   font-size: 15px;
   line-height: 24px;
   margin-bottom: 5px;
@@ -528,7 +543,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c24 p {
+  .c25 p {
     font-size: 16px;
     line-height: 27px;
   }
@@ -1166,6 +1181,11 @@ exports[`renders correctly 1`] = `
                   >
                     Link comp with only URL
                   </span>
+                  <span
+                    className="c24"
+                  >
+                    (opens in new window)
+                  </span>
                 </a>
               </li>
               <li
@@ -1206,6 +1226,11 @@ exports[`renders correctly 1`] = `
                   >
                     Test non-whitelisted external link
                   </span>
+                  <span
+                    className="c24"
+                  >
+                    (opens in new window)
+                  </span>
                 </a>
               </li>
             </ul>
@@ -1213,10 +1238,10 @@ exports[`renders correctly 1`] = `
         </ul>
       </nav>
       <div
-        className="c24"
+        className="c25"
       >
         <p
-          className="c25"
+          className="c26"
           color="grey"
           size="s"
         >

package/src/components/Organisms/Header/Nav/Nav.js

@@ -5,7 +5,7 @@ import Text from '../../../Atoms/Text/Text';
 import BurgerMenu from '../Burger/BurgerMenu';
 import { sizes } from '../../../../theme/shared/breakpoint';
 import NavHelper from '../../../../utils/navHelper';
-import InternalLinkHelper from '../../../../utils/internalLinkHelper';
+import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
 import whiteListed from '../../../../utils/whiteListed';
 
 import {

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/utils/internalLinkHelper.js

@@ -1,14 +1,32 @@
-const InternalLinkHelper = link => {
-  const domainRegEx = new RegExp(
-    '(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]'
-  );
+const domainRegEx = new RegExp(
+  '(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]'
+);
 
+const InternalLinkHelper = link => {
   // Check our URL for a domain pattern, if so return it
   if (domainRegEx.test(link)) {
     return link;
   }
+
   // If domain-free and internal, prefix it with slash if it doesn't already have one
   return link.substring(0, 1) === '/' ? link : `/${link}`;
 };
 
-export default InternalLinkHelper;
+const getDomain = url => {
+  let thisURL = url;
+
+  // Strip out protocol
+  thisURL = url.replace(/(https?:\/\/)?(www.)?/i, '');
+
+  // Strip out subdirectory/path
+  if (thisURL.indexOf('/') !== -1) {
+    const [splitURL] = thisURL.split('/');
+    thisURL = splitURL;
+  }
+
+  return thisURL;
+};
+
+export {
+  InternalLinkHelper, getDomain
+};