@comicrelief/component-library 7.0.2 → 7.1.0

package/dist/components/{Organisms/EmailSignUp/_Confetti.js → Atoms/Confetti/Confetti.js}

@@ -42,8 +42,7 @@ function getAnimationSettings(originXA, originXB) {
       y: Math.random() - 0.2
     }
   };
-} // TODO: Refactor this into an atom
-
+}
 
 function Confetti(_ref) {
   var trigger = _ref.trigger,

package/dist/components/Atoms/Confetti/Confetti.md

@@ -0,0 +1,15 @@
+# Confetti
+
+```js
+import React, { useState } from 'react';
+import Confetti from './Confetti';
+
+const [isConfetti, setIsConfetti] = useState(false);
+
+const handleConfettiTrigger = () => setIsConfetti(!isConfetti);
+
+<>
+  <Confetti trigger={isConfetti} />
+  <button type="button" onClick={handleConfettiTrigger}>trigger confetti</button>
+</>
+```

package/dist/components/Atoms/Confetti/_TriggerConfetti.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TriggerConfetti;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Confetti = _interopRequireDefault(require("./Confetti"));
+
+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; }
+
+function TriggerConfetti() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isConfetti = _useState2[0],
+      setIsConfetti = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Confetti.default, {
+    trigger: isConfetti
+  }), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return setIsConfetti(!isConfetti);
+    }
+  }, "trigger confetti"));
+}

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

@@ -28,7 +28,8 @@ var EmailSignUpForm = function EmailSignUpForm() {
     resolver: (0, _yup.yupResolver)(validationSchema)
   });
   var handleSubmit = formMethods.handleSubmit,
-      trigger = formMethods.trigger;
+      trigger = formMethods.trigger,
+      setError = formMethods.setError;
 
   function handleSubscribe(_x) {
     return _handleSubscribe.apply(this, arguments);
@@ -50,6 +51,10 @@ var EmailSignUpForm = function EmailSignUpForm() {
               if (valid) {
                 // eslint-disable-next-line no-console
                 console.log(data);
+              } else {
+                setError('formError', {
+                  message: 'Error'
+                });
               }
 
             case 4:

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

@@ -33,7 +33,7 @@ var _EmailSignUpConfig = require("./_EmailSignUpConfig");
 
 var _ErrorText = _interopRequireDefault(require("../../Atoms/ErrorText/ErrorText"));
 
-var _Confetti = _interopRequireDefault(require("./_Confetti"));
+var _Confetti = _interopRequireDefault(require("../../Atoms/Confetti/Confetti"));
 
 var _excluded = ["title", "topCopy", "successCopy", "privacyCopy", "backgroundColour", "buttonColour", "formContext", "columnLayout"];
 
@@ -94,9 +94,7 @@ var EmailSignUp = function EmailSignUp(_ref) {
     loading: isSubmitting,
     loadingText: "Submitting...",
     "data-test": "subscribe-button"
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Subscribe")))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Object.values(errors).map(function (error) {
-    return /*#__PURE__*/_react.default.createElement(_ErrorText.default, null, error.message);
-  })), /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, privacyCopy)));
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, "Subscribe")))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errors.formError !== undefined && /*#__PURE__*/_react.default.createElement(_ErrorText.default, null, errors.formError.message)), /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, privacyCopy)));
 };
 
 exports.EmailSignUp = EmailSignUp;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/{Organisms/EmailSignUp/_Confetti.js → Atoms/Confetti/Confetti.js}

@@ -30,7 +30,7 @@ function getAnimationSettings(originXA, originXB) {
     }
   };
 }
-// TODO: Refactor this into an atom
+
 export default function Confetti({ trigger, duration }) {
   const refAnimationInstance = useRef(null);
   const [intervalId, setIntervalId] = useState();

package/src/components/Atoms/Confetti/Confetti.md

@@ -0,0 +1,15 @@
+# Confetti
+
+```js
+import React, { useState } from 'react';
+import Confetti from './Confetti';
+
+const [isConfetti, setIsConfetti] = useState(false);
+
+const handleConfettiTrigger = () => setIsConfetti(!isConfetti);
+
+<>
+  <Confetti trigger={isConfetti} />
+  <button type="button" onClick={handleConfettiTrigger}>trigger confetti</button>
+</>
+```

package/src/components/Atoms/Confetti/_TriggerConfetti.js

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import Confetti from './Confetti';
+
+export default function TriggerConfetti() {
+  const [isConfetti, setIsConfetti] = useState(false);
+
+  return (
+
+    <>
+      <Confetti trigger={isConfetti} />
+      <button type="button" onClick={() => setIsConfetti(!isConfetti)}>trigger confetti</button>
+    </>
+
+  );
+}

package/src/components/Organisms/EmailSignUp/EmailSignUpForm.js

@@ -14,7 +14,7 @@ const EmailSignUpForm = () => {
     mode: 'onBlur',
     resolver: yupResolver(validationSchema)
   });
-  const { handleSubmit, trigger } = formMethods;
+  const { handleSubmit, trigger, setError } = formMethods;
 
   async function handleSubscribe(data) {
     const valid = await trigger([
@@ -25,6 +25,8 @@ const EmailSignUpForm = () => {
     if (valid) {
       // eslint-disable-next-line no-console
       console.log(data);
+    } else {
+      setError('formError', { message: 'Error' });
     }
   }
   const title = 'Stay in the know!';

package/src/components/Organisms/EmailSignUp/_EmailSignUp.js

@@ -15,7 +15,7 @@ import ButtonWithStates from '../../Atoms/ButtonWithStates/ButtonWithStates';
 import Text from '../../Atoms/Text/Text';
 import { buildEsuValidationSchema, ESU_FIELDS } from './_EmailSignUpConfig';
 import ErrorText from '../../Atoms/ErrorText/ErrorText';
-import Confetti from './_Confetti';
+import Confetti from '../../Atoms/Confetti/Confetti';
 
 const EmailSignUp = ({
   title,
@@ -100,14 +100,11 @@ const EmailSignUp = ({
       )}
       {isSubmitted && !isSubmitSuccessful && (
         <>
-          {/*
-            Field errors will prevent submission,
-            so theoretically this should just be a single error set in the submission callback
-            with with RHF's `setError` method, but will neatly display multiple errors.
-          */}
-          {Object.values(errors).map(error => (
-            <ErrorText>{error.message}</ErrorText>
-          ))}
+          {/* This error can be set as part of the submit callback using RHF's `setError` function.
+          e.g. setError('formError', { message: 'Some error message'}) */}
+          {errors.formError !== undefined && (
+            <ErrorText>{errors.formError.message}</ErrorText>
+          )}
         </>
       )}