@comicrelief/component-library 5.7.1 → 5.8.2

package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -117,7 +117,8 @@ var MarketingPreferencesDS = function MarketingPreferencesDS(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
     show: showEmailField
   }, emailChoice[0] === 'no' && /*#__PURE__*/_react.default.createElement(_NoMessage.default, {
-    askingFor: "an email"
+    askingFor: "an email",
+    optInType: "email"
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     fieldName: "mp_email",
@@ -147,7 +148,8 @@ var MarketingPreferencesDS = function MarketingPreferencesDS(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
     show: showSMSField
   }, smsChoice[0] === 'no' && /*#__PURE__*/_react.default.createElement(_NoMessage.default, {
-    askingFor: "a mobile number"
+    askingFor: "a mobile number",
+    optInType: "SMS"
   }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     fieldName: "mp_mobile",
@@ -175,7 +177,8 @@ var MarketingPreferencesDS = function MarketingPreferencesDS(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
     show: showPhoneField
   }, phoneChoice[0] === 'no' ? /*#__PURE__*/_react.default.createElement(_NoMessage.default, {
-    askingFor: "a phone number"
+    askingFor: "a phone number",
+    optInType: "phone"
   }) : '', /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     fieldName: "mp_phone",
@@ -203,7 +206,8 @@ var MarketingPreferencesDS = function MarketingPreferencesDS(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.ShowHideInputWrapper, {
     show: showPostFields
   }, postChoice[0] === 'no' ? /*#__PURE__*/_react.default.createElement(_NoMessage.default, {
-    askingFor: "an address"
+    askingFor: "an address",
+    optInType: "postal"
   }) : '', /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     fieldName: "mp_address1",

package/dist/components/Organisms/MarketingPreferencesDS/_NoMessage.js

@@ -9,16 +9,31 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 
-var NoMessage = function NoMessage(_ref) {
-  var askingFor = _ref.askingFor;
-  var message = "Please provide ".concat(askingFor, " so we can remove it from our database, otherwise untick this option.");
-  return /*#__PURE__*/_react.default.createElement(_Text.default, {
+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 NoMessageWrapper = _styledComponents.default.div.withConfig({
+  displayName: "_NoMessage__NoMessageWrapper",
+  componentId: "sc-2h3k46-0"
+})(["", ""], function (_ref) {
+  var theme = _ref.theme;
+  return (0, _styledComponents.css)(["background-color:", ";padding:15px;margin-bottom:15px;"], theme.color('red'));
+});
+
+var NoMessage = function NoMessage(_ref2) {
+  var askingFor = _ref2.askingFor,
+      optInType = _ref2.optInType;
+  var message = "This will remove the supplied ".concat(askingFor, " from any *previous* ").concat(optInType, " opt-in from our database; otherwise, you can leave this unchecked.");
+  return /*#__PURE__*/_react.default.createElement(NoMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
     size: "s",
-    color: "grey_dark"
-  }, message);
+    color: "white"
+  }, message));
 };
 
 var _default = NoMessage;

package/dist/theme/crTheme/colors.js

@@ -13,6 +13,11 @@ var colors = {
   coral: '#F9686D',
   coral_dark: '#961D35',
   coral_light: '#FFCECE',
+  cwg_22_blue: '#204794',
+  cwg_22_orange: '#FB6326',
+  cwg_22_purple: '#7B3ED3',
+  cwg_22_red: '#E62731',
+  cwg_22_yellow: '#F8E928',
   deep_violet_dark: '#2C0230',
   deep_violet: '#2C0230'
   /** Will be removed  */

package/package.json

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

package/src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -87,9 +87,8 @@ const MarketingPreferencesDS = ({
         </Head>
 
         <MaybeDisabled disabled={disableEmailInput}>
-          {/* DEBUG */}
           <ShowHideInputWrapper show={showEmailField}>
-            {emailChoice[0] === 'no' && <NoMessage askingFor="an email" /> }
+            {emailChoice[0] === 'no' && <NoMessage askingFor="an email" optInType="email" /> }
             <TextInput
               placeholder=""
               fieldName="mp_email"
@@ -122,7 +121,7 @@ const MarketingPreferencesDS = ({
         </Head>
         <MaybeDisabled disabled={disableSMSInput}>
           <ShowHideInputWrapper show={showSMSField}>
-            {smsChoice[0] === 'no' && <NoMessage askingFor="a mobile number" />}
+            {smsChoice[0] === 'no' && <NoMessage askingFor="a mobile number" optInType="SMS" />}
             <TextInput
               placeholder=""
               fieldName="mp_mobile"
@@ -153,7 +152,7 @@ const MarketingPreferencesDS = ({
         </Head>
         <MaybeDisabled disabled={disablePhoneInput}>
           <ShowHideInputWrapper show={showPhoneField}>
-            {phoneChoice[0] === 'no' ? <NoMessage askingFor="a phone number" /> : ''}
+            {phoneChoice[0] === 'no' ? <NoMessage askingFor="a phone number" optInType="phone" /> : ''}
             <TextInput
               placeholder=""
               fieldName="mp_phone"
@@ -184,7 +183,7 @@ const MarketingPreferencesDS = ({
         </Head>
         <MaybeDisabled disabled={disablePostInput}>
           <ShowHideInputWrapper show={showPostFields}>
-            {postChoice[0] === 'no' ? <NoMessage askingFor="an address" /> : ''}
+            {postChoice[0] === 'no' ? <NoMessage askingFor="an address" optInType="postal" /> : ''}
             <TextInput
               placeholder=""
               fieldName="mp_address1"

package/src/components/Organisms/MarketingPreferencesDS/_NoMessage.js

@@ -1,17 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
 import Text from '../../Atoms/Text/Text';
 
-const NoMessage = ({ askingFor }) => {
-  const message = `Please provide ${askingFor} so we can remove it from our database, otherwise untick this option.`;
+const NoMessageWrapper = styled.div`${({ theme }) => css`
+  background-color: ${theme.color('red')};
+  padding: 15px;
+  margin-bottom: 15px;
+`}`;
+
+const NoMessage = ({ askingFor, optInType }) => {
+  const message = `This will remove the supplied ${askingFor} from any *previous* ${optInType} opt-in from our database; otherwise, you can leave this unchecked.`;
 
   return (
-    <Text tag="p" size="s" color="grey_dark">{message}</Text>
+    <NoMessageWrapper>
+      <Text tag="p" size="s" color="white">{message}</Text>
+    </NoMessageWrapper>
   );
 };
 
 NoMessage.propTypes = {
-  askingFor: PropTypes.string.isRequired
+  askingFor: PropTypes.string.isRequired,
+  optInType: PropTypes.string.isRequired
 };
 
 export default NoMessage;

package/src/theme/crTheme/colors.js

@@ -7,6 +7,11 @@ const colors = {
   coral: '#F9686D',
   coral_dark: '#961D35',
   coral_light: '#FFCECE',
+  cwg_22_blue: '#204794',
+  cwg_22_orange: '#FB6326',
+  cwg_22_purple: '#7B3ED3',
+  cwg_22_red: '#E62731',
+  cwg_22_yellow: '#F8E928',
   deep_violet_dark: '#2C0230',
   deep_violet: '#2C0230' /** Will be removed  */,
   deep_violet_light: '#3e1c43',