@comicrelief/component-library 6.10.0 → 7.0.1

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

@@ -1,15 +0,0 @@
-import EmailIcon from './icon--email.svg';
-import CloseIcon from './icon--close.svg';
-
-const HeaderIcons = {
-  email: {
-    icon: EmailIcon,
-    title: 'Sign up for emails'
-  },
-  close: {
-    icon: CloseIcon,
-    title: 'Close email sign-up'
-  }
-};
-
-export default HeaderIcons;

package/src/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/src/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/src/components/Organisms/EmailSignUp/EmailSignUp.js

@@ -1,197 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-
-import Select from '../../Atoms/Select/Select';
-import Text from '../../Atoms/Text/Text';
-import {
-  ESUWrapper,
-  TopCopyWrapper,
-  Form,
-  PrivacyCopyWrapper,
-  InputField,
-  ButtonWrapper,
-  Title
-} from './EmailSignUp.style';
-import { Button } from '../Membership/Membership.style';
-
-const EmailSignUp = ({
-  title,
-  topCopy,
-  isSuccess,
-  isSchools,
-  schoolsCopy,
-  selectItems,
-  successCopy,
-  errorMsg,
-  privacyCopy,
-  subscribe,
-  validate,
-  buttonColor,
-  backgroundColor,
-  ...rest
-}) => {
-  const [value, setValue] = useState('');
-  const [age, setAge] = useState('');
-  const [next, setNext] = useState(false);
-
-  const handleSubmit = e => {
-    // Just stopping weird things happening for now when the user submits with the enter key
-    // rather than the Submit button
-    e.preventDefault();
-  };
-
-  const schoolsSelect = (
-    <>
-      <Select
-        hideLabel
-        label="Please choose an option"
-        placeholder="Please choose an option"
-        description="Please choose an option"
-        errorMsg={errorMsg}
-        options={selectItems}
-        value={age}
-        onChange={event => setAge(event.target.value)}
-      />
-      <Text tag="p" weight="400" size="m">
-        {schoolsCopy}
-      </Text>
-    </>
-  );
-
-  const subscriptionSchoolsForm = (
-    <Form onSubmit={e => handleSubmit(e)}>
-      {!next && (
-        <>
-          <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={event => setValue(event.target.value)}
-          />
-          <ButtonWrapper>
-            <Button
-              as="input"
-              type="submit"
-              data-test="subscribe-button-school"
-              color={buttonColor}
-              onClick={() => validate({ email: value }) && setNext(true)}
-              value=" Subscribe"
-            />
-          </ButtonWrapper>
-        </>
-      )}
-      {next && (
-        <>
-          {schoolsSelect}
-          <ButtonWrapper>
-            <Button
-              as="input"
-              type="submit"
-              data-test="subscribe-button-school"
-              color={buttonColor}
-              onClick={() => validate({ email: value, age })
-                && subscribe({ email: `${value}`, age: `${age}` })
-              }
-              value=" Subscribe"
-            />
-          </ButtonWrapper>
-        </>
-      )}
-    </Form>
-  );
-
-  const subscriptionForm = (
-    <Form onSubmit={e => handleSubmit(e)}>
-      <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={event => setValue(event.target.value)}
-      />
-      <ButtonWrapper>
-        <Button
-          as="input"
-          data-test="subscribe-button"
-          type="submit"
-          color={buttonColor}
-          onClick={() => validate({ email: value }) && subscribe(value)}
-          value=" Subscribe"
-        />
-      </ButtonWrapper>
-    </Form>
-  );
-
-  const privacyContainer = (
-    <PrivacyCopyWrapper>{privacyCopy}</PrivacyCopyWrapper>
-  );
-
-  return (
-    <ESUWrapper backgroundColor={backgroundColor} {...rest}>
-      <Title tag="h2" size="xxl" weight="400" family="Anton" uppercase>
-        {title}
-      </Title>
-      {(!next || isSuccess) && (
-        <TopCopyWrapper>{isSuccess ? successCopy : topCopy}</TopCopyWrapper>
-      )}
-      {!isSuccess && (isSchools ? subscriptionSchoolsForm : subscriptionForm)}
-      {privacyContainer}
-    </ESUWrapper>
-  );
-};
-
-EmailSignUp.propTypes = {
-  /** title */
-  title: PropTypes.string.isRequired,
-  /** top copy */
-  topCopy: PropTypes.node.isRequired,
-  /** displayed copy when subscription is successful */
-  successCopy: PropTypes.node.isRequired,
-  /** boolean if true display successCopy */
-  isSuccess: PropTypes.bool.isRequired,
-  /** boolean if true display schools dropdown */
-  isSchools: PropTypes.bool,
-  /** email error message */
-  errorMsg: PropTypes.string.isRequired,
-  /** privacy copy */
-  privacyCopy: PropTypes.node.isRequired,
-  /** privacy copy */
-  schoolsCopy: PropTypes.node,
-  selectItems: PropTypes.PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      displayValue: PropTypes.string.isRequired
-    })
-  ),
-  /** subscription function */
-  subscribe: PropTypes.func.isRequired,
-  /** validation function */
-  validate: PropTypes.func.isRequired,
-  /** background color */
-  backgroundColor: PropTypes.string,
-  /** button color */
-  buttonColor: PropTypes.string
-};
-
-EmailSignUp.defaultProps = {
-  backgroundColor: 'deep_violet_dark',
-  buttonColor: 'red',
-  isSchools: false,
-  schoolsCopy: '',
-  selectItems: []
-};
-
-export default EmailSignUp;