@comicrelief/component-library 6.10.0 → 7.0.1

package/src/components/Organisms/Header/Header.md

@@ -36,12 +36,11 @@ import Link from '../../Atoms/Link/Link';
 />;
 ```
 
-# Comic Relief header with Search and ESU
+# Comic Relief header with Search
 
 ```js
 import data from './data/data';
 import Link from '../../Atoms/Link/Link';
-import HeaderEsuWithIcon from '../../Molecules/HeaderEsuWithIcon/HeaderEsuWithIcon';
 import searchIcon from './assets/icon--search.svg';
 import Icon from '../../Atoms/SocialIcons/Icon/Icon';
 import RichText from '../../Atoms/RichText/RichText';
@@ -86,17 +85,6 @@ const [success, setSuccess] = React.useState(false);
           tabIndex="0"
         />
       </div>
-
-      <HeaderEsuWithIcon
-        title={title}
-        topCopy={topCopy}
-        privacyCopy={privacyCopy}
-        successCopy={successCopy}
-        isSuccess={success}
-        privacyCopy={privacyCopy}
-        errorMsg=""
-        subscribe={() => setSuccess(!success)}
-      />
     </>
   }
 />;

package/src/components/Organisms/Membership/Membership.test.js

@@ -126,6 +126,39 @@ it("renders correctly", () => {
       font-size: 1.25rem;
     }
 
+    .c15 {
+      display: block;
+    }
+
+    .c15 input {
+      border: 2px solid #E1E2E3;
+      font-size: 1.5rem;
+      font-weight: 800;
+      -webkit-letter-spacing: -2px;
+      -moz-letter-spacing: -2px;
+      -ms-letter-spacing: -2px;
+      letter-spacing: -2px;
+      height: auto;
+    }
+
+    .c20 {
+      display: block;
+    }
+
+    .c20 input {
+      border: 2px solid #E1E2E3;
+      font-size: 1.5rem;
+      font-weight: 800;
+      -webkit-letter-spacing: -2px;
+      -moz-letter-spacing: -2px;
+      -ms-letter-spacing: -2px;
+      letter-spacing: -2px;
+      height: auto;
+      border-color: #E52630;
+      background-color: #E52630;
+      color: #FFFFFF;
+    }
+
     .c0 {
       background-color: #FEE3CC;
       position: relative;
@@ -297,39 +330,6 @@ it("renders correctly", () => {
       background-color: #961D35;
     }
 
-    .c15 {
-      display: block;
-    }
-
-    .c15 input {
-      border: 2px solid #E1E2E3;
-      font-size: 1.5rem;
-      font-weight: 800;
-      -webkit-letter-spacing: -2px;
-      -moz-letter-spacing: -2px;
-      -ms-letter-spacing: -2px;
-      letter-spacing: -2px;
-      height: auto;
-    }
-
-    .c20 {
-      display: block;
-    }
-
-    .c20 input {
-      border: 2px solid #E1E2E3;
-      font-size: 1.5rem;
-      font-weight: 800;
-      -webkit-letter-spacing: -2px;
-      -moz-letter-spacing: -2px;
-      -ms-letter-spacing: -2px;
-      letter-spacing: -2px;
-      height: auto;
-      border-color: #E52630;
-      background-color: #E52630;
-      color: #FFFFFF;
-    }
-
     @media (min-width:740px) {
       .c19 {
         max-width: 290px;

package/src/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 /* Theme */
 export { default as crTheme } from './theme/crTheme/theme';
 export { default as srTheme } from './theme/srTheme/theme';
@@ -48,7 +47,6 @@ export { default as SearchResult } from './components/Molecules/SearchResult/Sea
 export { default as SearchInput } from './components/Molecules/SearchInput/SearchInput';
 export { default as ShareButton } from './components/Molecules/ShareButton/ShareButton';
 export { default as VideoBanner } from './components/Molecules/VideoBanner/VideoBanner';
-export { default as HeaderEsuWithIcon } from './components/Molecules/HeaderEsuWithIcon/HeaderEsuWithIcon';
 export { default as Icon } from './components/Atoms/SocialIcons/Icon/Icon';
 export { default as Typeahead } from './components/Molecules/Typeahead/Typeahead';
 export { default as SchoolLookup } from './components/Molecules/SchoolLookup/SchoolLookup';
@@ -63,7 +61,15 @@ 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';
+export {
+  EmailSignUp,
+  buildEsuValidationSchema,
+  ESU_FIELDS
+} from './components/Organisms/EmailSignUp/_EmailSignUp';
 export { default as CookieBanner } from './components/Organisms/CookieBanner/CookieBanner';
 export { default as Membership } from './components/Organisms/Membership/Membership';
-export { MarketingPreferencesDS, setInitialValues, buildValidationSchema } from './components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS';
+export {
+  MarketingPreferencesDS,
+  setInitialValues,
+  buildValidationSchema
+} from './components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS';

package/cypress/integration/components/Molecules/HeaderEsuWithIcon.spec.js

@@ -1,69 +0,0 @@
-describe('Header Email Sign Up component', () => {
-    before(() => {
-        // go to Header Email Sign Up component
-        cy.visit('/#headeresuwithicon');
-    });
-
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="HeaderEsuWithIcon-container"] button[name="rsg-usage"]')
-                .contains('Props & methods')
-                .as('propsBtn');
-
-            cy.get('@propsBtn')
-                .closest('[class^=rsg--tabs]')
-                .as('container');
-        });
-
-        it('is present', () => {
-            cy.get('@propsBtn').should('exist');
-        });
-
-        it('does not show table initially', () => {
-            cy.get('@container')
-                .find('table')
-                .should('not.exist');
-        });
-
-        it('shows the table on button click', () => {
-            cy.get('@propsBtn').click();
-            cy.get('@container')
-                .find('table')
-                .should('contain', 'Prop name');
-        });
-    });
-
-    describe('Header Email Sign Up section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="HeaderEsuWithIcon-example-1"]')
-                .as('container')
-                .find('[data-preview="HeaderEsuWithIcon"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders Header Email Sign Up preview', () => {
-            cy.get('@container')
-                .should('exist')
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-        });
-    });
-});

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

@@ -1,136 +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 _react = _interopRequireWildcard(require("react"));
-
-var _Icon = _interopRequireDefault(require("../../Atoms/SocialIcons/Icon/Icon"));
-
-var _HeaderIcons = _interopRequireDefault(require("./assets/HeaderIcons"));
-
-var _HeaderEsuWithIcon = require("./HeaderEsuWithIcon.style");
-
-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; }
-
-/* HeaderEsuWithIcon component */
-var HeaderEsuWithIcon = function HeaderEsuWithIcon(_ref) {
-  var title = _ref.title,
-      topCopy = _ref.topCopy,
-      successCopy = _ref.successCopy,
-      privacyCopy = _ref.privacyCopy,
-      buttonColor = _ref.buttonColor,
-      subscribe = _ref.subscribe,
-      validate = _ref.validate,
-      isSuccess = _ref.isSuccess,
-      errorMsg = _ref.errorMsg,
-      isESUOpenInitial = _ref.isESUOpen;
-
-  // Pre-interaction flag
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isClicked = _useState2[0],
-      setisClicked = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(isESUOpenInitial),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isESUOpen = _useState4[0],
-      setIsESUOpen = _useState4[1];
-
-  var thisRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    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 */
-
-  var handleESUOpen = function handleESUOpen(e) {
-    e.preventDefault(); // Update flag
-
-    setisClicked(true); // Toggle our 'opened' state
-
-    setIsESUOpen(!isESUOpen);
-  };
-
-  var handleEscClose = function handleEscClose(e) {
-    // Close the modal if this is the ESC key
-    if (e.keyCode === 27) {
-      setIsESUOpen(false);
-    }
-  };
-  /* Break out ESU render into own function */
-
-
-  var renderESU = function renderESU() {
-    return /*#__PURE__*/_react.default.createElement(_HeaderEsuWithIcon.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 */
-
-
-  var renderCloseButton = function renderCloseButton() {
-    return /*#__PURE__*/_react.default.createElement(_HeaderEsuWithIcon.CloseButton, {
-      onClick: function onClick(e) {
-        return handleESUOpen(e);
-      },
-      icon: _HeaderIcons.default.close.icon,
-      title: _HeaderIcons.default.close.title,
-      brand: _HeaderIcons.default.close.title,
-      target: "self",
-      role: "button",
-      href: "#",
-      tabIndex: "0"
-    });
-  };
-  /* Main render */
-
-
-  return /*#__PURE__*/_react.default.createElement(_HeaderEsuWithIcon.IconWrapper, {
-    onKeyDown: function onKeyDown(e) {
-      return handleEscClose(e);
-    },
-    ref: thisRef,
-    "data-test": "header-esu"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    onClick: function onClick(e) {
-      return handleESUOpen(e);
-    },
-    icon: _HeaderIcons.default.email.icon,
-    title: _HeaderIcons.default.email.title,
-    brand: _HeaderIcons.default.email.title,
-    target: "self",
-    role: "button",
-    href: "#",
-    tabIndex: "0"
-  }), isESUOpen ? /*#__PURE__*/_react.default.createElement(_HeaderEsuWithIcon.EsuWrapper, null, renderESU(), renderCloseButton()) : null);
-};
-
-HeaderEsuWithIcon.defaultProps = {
-  isESUOpen: false,
-  buttonColor: 'red'
-};
-var _default = HeaderEsuWithIcon;
-exports.default = _default;

package/dist/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/dist/components/Molecules/HeaderEsuWithIcon/HeaderEsuWithIcon.style.js

@@ -1,52 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.HeaderESU = exports.CloseButton = exports.EsuWrapper = exports.IconWrapper = void 0;
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Icon = _interopRequireDefault(require("../../Atoms/SocialIcons/Icon/Icon"));
-
-var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-
-var _EmailSignUp = _interopRequireDefault(require("../../Organisms/EmailSignUp/EmailSignUp"));
-
-var IconWrapper = _styledComponents.default.div.withConfig({
-  displayName: "HeaderEsuWithIconstyle__IconWrapper",
-  componentId: "sc-1a84kwt-0"
-})(["width:35px;height:35px;display:inline-block;"]);
-
-exports.IconWrapper = IconWrapper;
-
-var EsuWrapper = _styledComponents.default.div.withConfig({
-  displayName: "HeaderEsuWithIconstyle__EsuWrapper",
-  componentId: "sc-1a84kwt-1"
-})(["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:", ";}"], (0, _spacing.default)('l'));
-
-exports.EsuWrapper = EsuWrapper;
-var CloseButton = (0, _styledComponents.default)(_Icon.default).withConfig({
-  displayName: "HeaderEsuWithIconstyle__CloseButton",
-  componentId: "sc-1a84kwt-2"
-})(["position:absolute;top:0;right:0;width:40px;height:40px;margin-left:0;@media ", "{margin:", " 0 0;right:25%;}"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.breakpoint('small');
-}, (0, _spacing.default)('xl'));
-exports.CloseButton = CloseButton;
-var HeaderESU = (0, _styledComponents.default)(_EmailSignUp.default).withConfig({
-  displayName: "HeaderEsuWithIconstyle__HeaderESU",
-  componentId: "sc-1a84kwt-3"
-})(["width:100%;input{font-size:", ";}@media ", "{margin-top:", ";width:50%;input{font-size:", ";}}"], function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.fontSize('s');
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.breakpoint('small');
-}, (0, _spacing.default)('xl'), function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.fontSize('m');
-});
-exports.HeaderESU = HeaderESU;

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

@@ -1,99 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-require("jest-styled-components");
-
-var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWithTheme"));
-
-var _HeaderEsuWithIcon = _interopRequireDefault(require("./HeaderEsuWithIcon"));
-
-var _RichText = _interopRequireDefault(require("../../Atoms/RichText/RichText"));
-
-var title = 'Stay in the know!';
-
-var topCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
-  markup: "<p>Get regular email updates and info on what we're up to!</p>"
-});
-
-var privacyCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
-  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>'
-});
-
-var successCopy = /*#__PURE__*/_react.default.createElement(_RichText.default, {
-  markup: "<p>Thanks! Your first email will be with you shortly</p>"
-});
-
-it('renders correctly with modal closed', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_HeaderEsuWithIcon.default, {
-    title: title,
-    topCopy: topCopy,
-    privacyCopy: privacyCopy,
-    successCopy: successCopy,
-    isSuccess: false,
-    errorMsg: "",
-    subscribe: function subscribe() {
-      return 'Done';
-    },
-    validate: function validate() {
-      return true;
-    }
-  }))).toJSON();
-  expect(tree).toMatchSnapshot();
-});
-it('renders correctly with modal open', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_HeaderEsuWithIcon.default, {
-    title: title,
-    topCopy: topCopy,
-    privacyCopy: privacyCopy,
-    successCopy: successCopy,
-    isESUOpen: true,
-    isSuccess: false,
-    errorMsg: "",
-    subscribe: function subscribe() {
-      return 'Done';
-    },
-    validate: function validate() {
-      return true;
-    }
-  }))).toJSON();
-  expect(tree).toMatchSnapshot();
-});
-it('renders correctly with error message', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_HeaderEsuWithIcon.default, {
-    title: title,
-    topCopy: topCopy,
-    privacyCopy: privacyCopy,
-    successCopy: successCopy,
-    isESUOpen: true,
-    isSuccess: false,
-    errorMsg: "invalid email",
-    subscribe: function subscribe() {
-      return 'Done';
-    },
-    validate: function validate() {
-      return true;
-    }
-  }))).toJSON();
-  expect(tree).toMatchSnapshot();
-});
-it('renders correctly with success message', function () {
-  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_HeaderEsuWithIcon.default, {
-    title: title,
-    topCopy: topCopy,
-    privacyCopy: privacyCopy,
-    successCopy: successCopy,
-    isESUOpen: true,
-    isSuccess: true,
-    errorMsg: "",
-    subscribe: function subscribe() {
-      return 'Done';
-    },
-    validate: function validate() {
-      return true;
-    }
-  }))).toJSON();
-  expect(tree).toMatchSnapshot();
-});