@comicrelief/component-library 6.10.0 → 7.0.1

package/dist/components/Molecules/HeaderEsuWithIcon/assets/HeaderIcons.js

@@ -1,25 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _iconEmail = _interopRequireDefault(require("./icon--email.svg"));
-
-var _iconClose = _interopRequireDefault(require("./icon--close.svg"));
-
-var HeaderIcons = {
-  email: {
-    icon: _iconEmail.default,
-    title: 'Sign up for emails'
-  },
-  close: {
-    icon: _iconClose.default,
-    title: 'Close email sign-up'
-  }
-};
-var _default = HeaderIcons;
-exports.default = _default;

package/dist/components/Molecules/HeaderEsuWithIcon/assets/icon--close.svg

@@ -1,5 +0,0 @@
-<svg id="icon--close" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="3 3 32 32" xml:space="preserve">
-    <title>Email Sign-Up</title>
-    <desc>Close email Sign-Up form</desc>
-    <path fill="white" d="M21.4,20l8.3,8.3l-1.4,1.4L20,21.4l-8.3,8.3l-1.4-1.4l8.3-8.3l-8.3-8.3l1.4-1.4l8.3,8.3l8.3-8.3l1.4,1.4L21.4,20z"></path>
-  </svg>

package/dist/components/Molecules/HeaderEsuWithIcon/assets/icon--email.svg

@@ -1,5 +0,0 @@
-<svg id="icon--email" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="10 10 20 20" xml:space="preserve">
-    <title>Email Sign-Up</title>
-    <desc>Opens Email Sign-Up form</desc>
-    <path id="path--email" d="M28,12H12h-2v2v12v2h2h16h2v-2V14v-2H28z M26.6,14L20,20.6L13.4,14H26.6z M12,26V15.4l8,8l8-8V26H12z"></path>
-  </svg>

package/dist/components/Organisms/EmailSignUp/EmailSignUp.js

@@ -1,182 +0,0 @@
-"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 _Select = _interopRequireDefault(require("../../Atoms/Select/Select"));
-
-var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
-
-var _EmailSignUp = require("./EmailSignUp.style");
-
-var _Membership = require("../Membership/Membership.style");
-
-var _excluded = ["title", "topCopy", "isSuccess", "isSchools", "schoolsCopy", "selectItems", "successCopy", "errorMsg", "privacyCopy", "subscribe", "validate", "buttonColor", "backgroundColor"];
-
-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 EmailSignUp = function EmailSignUp(_ref) {
-  var title = _ref.title,
-      topCopy = _ref.topCopy,
-      isSuccess = _ref.isSuccess,
-      isSchools = _ref.isSchools,
-      schoolsCopy = _ref.schoolsCopy,
-      selectItems = _ref.selectItems,
-      successCopy = _ref.successCopy,
-      errorMsg = _ref.errorMsg,
-      privacyCopy = _ref.privacyCopy,
-      subscribe = _ref.subscribe,
-      validate = _ref.validate,
-      buttonColor = _ref.buttonColor,
-      backgroundColor = _ref.backgroundColor,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      age = _useState4[0],
-      setAge = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      next = _useState6[0],
-      setNext = _useState6[1];
-
-  var handleSubmit = function handleSubmit(e) {
-    // Just stopping weird things happening for now when the user submits with the enter key
-    // rather than the Submit button
-    e.preventDefault();
-  };
-
-  var schoolsSelect = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Select.default, {
-    hideLabel: true,
-    label: "Please choose an option",
-    placeholder: "Please choose an option",
-    description: "Please choose an option",
-    errorMsg: errorMsg,
-    options: selectItems,
-    value: age,
-    onChange: function onChange(event) {
-      return setAge(event.target.value);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_Text.default, {
-    tag: "p",
-    weight: "400",
-    size: "m"
-  }, schoolsCopy));
-
-  var subscriptionSchoolsForm = /*#__PURE__*/_react.default.createElement(_EmailSignUp.Form, {
-    onSubmit: function onSubmit(e) {
-      return handleSubmit(e);
-    }
-  }, !next && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_EmailSignUp.InputField, {
-    "aria-label": "Email address",
-    name: "email",
-    id: "email",
-    hasAria: false,
-    showLabel: false,
-    type: "email",
-    errorMsg: errorMsg,
-    label: "email",
-    placeholder: "example@youremail.com",
-    value: value,
-    onChange: function onChange(event) {
-      return setValue(event.target.value);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_EmailSignUp.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_Membership.Button, {
-    as: "input",
-    type: "submit",
-    "data-test": "subscribe-button-school",
-    color: buttonColor,
-    onClick: function onClick() {
-      return validate({
-        email: value
-      }) && setNext(true);
-    },
-    value: " Subscribe"
-  }))), next && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, schoolsSelect, /*#__PURE__*/_react.default.createElement(_EmailSignUp.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_Membership.Button, {
-    as: "input",
-    type: "submit",
-    "data-test": "subscribe-button-school",
-    color: buttonColor,
-    onClick: function onClick() {
-      return validate({
-        email: value,
-        age: age
-      }) && subscribe({
-        email: "".concat(value),
-        age: "".concat(age)
-      });
-    },
-    value: " Subscribe"
-  }))));
-
-  var subscriptionForm = /*#__PURE__*/_react.default.createElement(_EmailSignUp.Form, {
-    onSubmit: function onSubmit(e) {
-      return handleSubmit(e);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_EmailSignUp.InputField, {
-    "aria-label": "Email address",
-    name: "email",
-    id: "email",
-    hasAria: false,
-    showLabel: false,
-    type: "email",
-    errorMsg: errorMsg,
-    label: "email",
-    placeholder: "example@youremail.com",
-    value: value,
-    onChange: function onChange(event) {
-      return setValue(event.target.value);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_EmailSignUp.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_Membership.Button, {
-    as: "input",
-    "data-test": "subscribe-button",
-    type: "submit",
-    color: buttonColor,
-    onClick: function onClick() {
-      return validate({
-        email: value
-      }) && subscribe(value);
-    },
-    value: " Subscribe"
-  })));
-
-  var privacyContainer = /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, null, privacyCopy);
-
-  return /*#__PURE__*/_react.default.createElement(_EmailSignUp.ESUWrapper, Object.assign({
-    backgroundColor: backgroundColor
-  }, rest), /*#__PURE__*/_react.default.createElement(_EmailSignUp.Title, {
-    tag: "h2",
-    size: "xxl",
-    weight: "400",
-    family: "Anton",
-    uppercase: true
-  }, title), (!next || isSuccess) && /*#__PURE__*/_react.default.createElement(_EmailSignUp.TopCopyWrapper, null, isSuccess ? successCopy : topCopy), !isSuccess && (isSchools ? subscriptionSchoolsForm : subscriptionForm), privacyContainer);
-};
-
-EmailSignUp.defaultProps = {
-  backgroundColor: 'deep_violet_dark',
-  buttonColor: 'red',
-  isSchools: false,
-  schoolsCopy: '',
-  selectItems: []
-};
-var _default = EmailSignUp;
-exports.default = _default;

package/src/components/Molecules/HeaderEsuWithIcon/HeaderEsuWithIcon.js

@@ -1,135 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Icon from '../../Atoms/SocialIcons/Icon/Icon';
-import HeaderIcons from './assets/HeaderIcons';
-
-import {
-  IconWrapper,
-  EsuWrapper,
-  CloseButton,
-  HeaderESU
-} from './HeaderEsuWithIcon.style';
-
-/* HeaderEsuWithIcon component */
-const HeaderEsuWithIcon = ({
-  title,
-  topCopy,
-  successCopy,
-  privacyCopy,
-  buttonColor,
-  subscribe,
-  validate,
-  isSuccess,
-  errorMsg,
-  isESUOpen: isESUOpenInitial
-}) => {
-  // Pre-interaction flag
-  const [isClicked, setisClicked] = useState(false);
-  const [isESUOpen, setIsESUOpen] = useState(isESUOpenInitial);
-  const thisRef = useRef(null);
-
-  useEffect(() => {
-    if (isClicked) {
-      if (isESUOpen && !isSuccess) {
-        thisRef.current.querySelector('input').focus();
-      } else {
-        thisRef.current.querySelector('a').focus();
-      }
-    }
-  }, [isClicked, isESUOpen, isSuccess]);
-
-  /* Allow our ESU modal stuff to happen */
-  const handleESUOpen = e => {
-    e.preventDefault();
-
-    // Update flag
-    setisClicked(true);
-
-    // Toggle our 'opened' state
-    setIsESUOpen(!isESUOpen);
-  };
-
-  const handleEscClose = e => {
-    // Close the modal if this is the ESC key
-    if (e.keyCode === 27) {
-      setIsESUOpen(false);
-    }
-  };
-
-  /* Break out ESU render into own function */
-  const renderESU = () => (
-    <HeaderESU
-      title={title}
-      topCopy={topCopy}
-      successCopy={successCopy}
-      privacyCopy={privacyCopy}
-      isSuccess={isSuccess}
-      subscribe={subscribe}
-      validate={validate}
-      errorMsg={errorMsg}
-      buttonColor={buttonColor}
-      aria-modal="true"
-    />
-  );
-
-  /* Break out Close button render into own function */
-  const renderCloseButton = () => (
-    <CloseButton
-      onClick={e => handleESUOpen(e)}
-      icon={HeaderIcons.close.icon}
-      title={HeaderIcons.close.title}
-      brand={HeaderIcons.close.title}
-      target="self"
-      role="button"
-      href="#"
-      tabIndex="0"
-    />
-  );
-
-  /* Main render */
-  return (
-    <IconWrapper
-      onKeyDown={e => handleEscClose(e)}
-      ref={thisRef}
-      data-test="header-esu"
-    >
-      <Icon
-        onClick={e => handleESUOpen(e)}
-        icon={HeaderIcons.email.icon}
-        title={HeaderIcons.email.title}
-        brand={HeaderIcons.email.title}
-        target="self"
-        role="button"
-        href="#"
-        tabIndex="0"
-      />
-
-      {isESUOpen ? (
-        <EsuWrapper>
-          {renderESU()}
-          {renderCloseButton()}
-        </EsuWrapper>
-      ) : null}
-    </IconWrapper>
-  );
-};
-
-HeaderEsuWithIcon.propTypes = {
-  isESUOpen: PropTypes.bool,
-  title: PropTypes.node.isRequired,
-  topCopy: PropTypes.node.isRequired,
-  privacyCopy: PropTypes.node.isRequired,
-  successCopy: PropTypes.node.isRequired,
-  buttonColor: PropTypes.string,
-  subscribe: PropTypes.func.isRequired,
-  validate: PropTypes.func.isRequired,
-  isSuccess: PropTypes.bool.isRequired,
-  errorMsg: PropTypes.string.isRequired
-};
-
-HeaderEsuWithIcon.defaultProps = {
-  isESUOpen: false,
-  buttonColor: 'red'
-};
-
-export default HeaderEsuWithIcon;

package/src/components/Molecules/HeaderEsuWithIcon/HeaderEsuWithIcon.md

@@ -1,47 +0,0 @@
-# Header Email Sign Up
-
-```js
-import RichText from '../../Atoms/RichText/RichText';
-
-const title = 'Stay in the know';
-const topCopy = (
-  <RichText
-    markup={`<p>Get regular email updates and info on what we're up to!</p>`}
-  />
-);
-const privacyCopy = (
-  <RichText
-    markup={`<p>Our Privacy Policy describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>`}
-  />
-);
-const successCopy = (
-  <RichText
-    markup={`<p>Thanks! Your first email will be with you shortly</p>`}
-  />
-);
-
-const [success, setSuccess] = React.useState(false);
-const [error, setError] = React.useState('');
-
-const validate = ({ email }) => {
-  let isValid = false;
-  if (email.includes('@')) {
-    isValid = true;
-    setError('');
-  } else {
-    setError('invalid email!');
-  }
-  return isValid;
-};
-
-<HeaderEsuWithIcon
-  title={title}
-  topCopy={topCopy}
-  successCopy={successCopy}
-  isSuccess={success}
-  privacyCopy={privacyCopy}
-  errorMsg={error}
-  subscribe={() => setSuccess(!success)}
-  validate={validate}
-/>;
-```

package/src/components/Molecules/HeaderEsuWithIcon/HeaderEsuWithIcon.style.js

@@ -1,60 +0,0 @@
-import styled from 'styled-components';
-import Icon from '../../Atoms/SocialIcons/Icon/Icon';
-import spacing from '../../../theme/shared/spacing';
-import EmailSignUp from '../../Organisms/EmailSignUp/EmailSignUp';
-
-const IconWrapper = styled.div`
-  width: 35px;
-  height: 35px;
-  display: inline-block;
-`;
-
-const EsuWrapper = styled.div`
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.5);
-  z-index: 100;
-  top: 0;
-  left: 0;
-  overflow-y: auto;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  div[aria-modal='true'] {
-    padding: ${spacing('l')};
-  }
-`;
-
-const CloseButton = styled(Icon)`
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 40px;
-  height: 40px;
-  margin-left: 0;
-
-  @media ${({ theme }) => theme.breakpoint('small')} {
-    margin: ${spacing('xl')} 0 0;
-    right: 25%;
-  }
-`;
-
-const HeaderESU = styled(EmailSignUp)`
-  width: 100%;
-  input {
-    font-size: ${({ theme }) => theme.fontSize('s')};
-  }
-
-  @media ${({ theme }) => theme.breakpoint('small')} {
-    margin-top: ${spacing('xl')};
-    width: 50%;
-    input {
-      font-size: ${({ theme }) => theme.fontSize('m')};
-    }
-  }
-`;
-
-export {
-  IconWrapper, EsuWrapper, CloseButton, HeaderESU
-};

package/src/components/Molecules/HeaderEsuWithIcon/HeaderEsuWithIcon.test.js

@@ -1,103 +0,0 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import HeaderEsuWithIcon from './HeaderEsuWithIcon';
-import RichText from '../../Atoms/RichText/RichText';
-
-const title = 'Stay in the know!';
-const topCopy = (
-  <RichText
-    markup={"<p>Get regular email updates and info on what we're up to!</p>"}
-  />
-);
-const privacyCopy = (
-  <RichText
-    markup={
-      '<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>'
-    }
-  />
-);
-const successCopy = (
-  <RichText
-    markup="<p>Thanks! Your first email will be with you shortly</p>"
-  />
-);
-
-it('renders correctly with modal closed', () => {
-  const tree = renderWithTheme(
-    <div>
-      <HeaderEsuWithIcon
-        title={title}
-        topCopy={topCopy}
-        privacyCopy={privacyCopy}
-        successCopy={successCopy}
-        isSuccess={false}
-        errorMsg=""
-        subscribe={() => 'Done'}
-        validate={() => true}
-      />
-    </div>
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders correctly with modal open', () => {
-  const tree = renderWithTheme(
-    <div>
-      <HeaderEsuWithIcon
-        title={title}
-        topCopy={topCopy}
-        privacyCopy={privacyCopy}
-        successCopy={successCopy}
-        isESUOpen
-        isSuccess={false}
-        errorMsg=""
-        subscribe={() => 'Done'}
-        validate={() => true}
-      />
-    </div>
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders correctly with error message', () => {
-  const tree = renderWithTheme(
-    <div>
-      <HeaderEsuWithIcon
-        title={title}
-        topCopy={topCopy}
-        privacyCopy={privacyCopy}
-        successCopy={successCopy}
-        isESUOpen
-        isSuccess={false}
-        errorMsg="invalid email"
-        subscribe={() => 'Done'}
-        validate={() => true}
-      />
-    </div>
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
-
-it('renders correctly with success message', () => {
-  const tree = renderWithTheme(
-    <div>
-      <HeaderEsuWithIcon
-        title={title}
-        topCopy={topCopy}
-        privacyCopy={privacyCopy}
-        successCopy={successCopy}
-        isESUOpen
-        isSuccess
-        errorMsg=""
-        subscribe={() => 'Done'}
-        validate={() => true}
-      />
-    </div>
-  ).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});