@comicrelief/component-library 8.26.0 → 8.28.0

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js

@@ -144,7 +144,7 @@ const HeaderNav2025 = _ref => {
     // on mobile, a clickable LINK on desktop but hover to reveal the submenu:
     return /*#__PURE__*/_react.default.createElement(_HeaderNavItem.default, {
       thisID: thisID,
-      key: "".concat(thisID, "--item"),
+      key: `${thisID}--item`,
       index: index,
       hasSubMenu: hasSubMenu,
       openedSubMenu: openedSubMenu,

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNavItem2025.js

@@ -28,7 +28,7 @@ const HeaderNavItem2025 = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_HeaderNav.NavItem, {
     role: "none",
-    key: "".concat(index, "-").concat(thisID, "--item"),
+    key: `${index}-${thisID}--item`,
     index: index,
     isSubMenuOpen: !!openedSubMenu
   }, isNotDesktop ? /*#__PURE__*/_react.default.createElement(_HeaderNav.NavLink, {
@@ -39,7 +39,7 @@ const HeaderNavItem2025 = _ref => {
     "aria-haspopup": hasPopUp,
     onClick: hasPopUp ? e => toggleSubMenu(e, thisID) : null,
     role: "button",
-    key: "".concat(index, "-").concat(thisID, "--link"),
+    key: `${index}-${thisID}--link`,
     isExpanded: !!openedSubMenu[thisID]
   }, thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_HeaderNav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
     src: _MenuGroupIcon.default,
@@ -49,7 +49,7 @@ const HeaderNavItem2025 = _ref => {
     inline: true,
     rel: relNoopener,
     "aria-haspopup": hasPopUp,
-    key: "".concat(index, "-").concat(thisID),
+    key: `${index}-${thisID}`,
     hasSubMenu: hasSubMenu
   }, rest), thisFirstChild.title, hasSubMenu && /*#__PURE__*/_react.default.createElement(_HeaderNav.ChevronWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
     src: _MenuGroupIcon.default,
@@ -57,7 +57,7 @@ const HeaderNavItem2025 = _ref => {
   })))), hasSubMenu && /*#__PURE__*/_react.default.createElement(_HeaderNav.SubNavMenu, {
     role: "list",
     isSubMenuOpen: !!openedSubMenu[thisID],
-    key: "".concat(index, "-").concat(thisID, "--sub-item")
+    key: `${index}-${thisID}--sub-item`
   }, group.links.map((child, childIndex) => {
     let thisSubUrl = navHelper(child);
     thisSubUrl = internalLinkHelper(thisSubUrl);
@@ -68,7 +68,7 @@ const HeaderNavItem2025 = _ref => {
 
     // Otherwise, render out as usual:
     return /*#__PURE__*/_react.default.createElement(_HeaderNav.SubNavItem, {
-      key: "".concat(index, "-").concat(thisSubUrl)
+      key: `${index}-${thisSubUrl}`
     }, /*#__PURE__*/_react.default.createElement(_HeaderNav.SubNavLink, {
       href: thisSubUrl,
       inline: true,

package/dist/components/Organisms/ImpactSlider/ImpactSlider.style.js

@@ -11,7 +11,7 @@ var _Button = _interopRequireDefault(require("../../Atoms/Button/Button"));
 const OuterWrapper = exports.OuterWrapper = _styledComponents.default.div.withConfig({
   displayName: "ImpactSliderstyle__OuterWrapper",
   componentId: "sc-1fpimol-0"
-})(["position:relative;max-width:100%;background-color:", ";padding:32px 16px;@media ", "{padding:50px;}@media ", "{padding:64px 0;}"], props => props.theme.color("".concat(props.backgroundColour)), _ref => {
+})(["position:relative;max-width:100%;background-color:", ";padding:32px 16px;@media ", "{padding:50px;}@media ", "{padding:64px 0;}"], props => props.theme.color(`${props.backgroundColour}`), _ref => {
   let {
     theme
   } = _ref;

package/dist/components/Organisms/ImpactSlider/_ImpactMoneybuys.js

@@ -20,7 +20,7 @@ const Moneybuys = _ref => {
       key: item.poundsPerItem
     }, /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.Moneybuy, {
       isInactive: isInactive,
-      "data-testid": "impact-slider--moneybuy-".concat(index + 1)
+      "data-testid": `impact-slider--moneybuy-${index + 1}`
     }, /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.MoneybuyImage, {
       imageURL: item.imageURL
     }), /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.MoneybuyAmount, {

package/dist/components/Organisms/ImpactSlider/_utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 const getUrlParameter = name => {
   const text = name.replace(/\[]/, '\\[').replace(/[\]]/, '\\]');
-  const regex = new RegExp("[\\?&]".concat(text, "=([^&#]*)"));
+  const regex = new RegExp(`[\\?&]${text}=([^&#]*)`);
   const results = regex.exec(window.location.search);
   const param = results === null ? 'generic' : decodeURIComponent(results[1].replace(/\+/g, ' '));
   return param;
@@ -19,7 +19,7 @@ const handleSubmission = (amount, donateLink, cartID, rowID) => {
     const thisMatch = currentpageUrl.match(reg)[0];
     currentpageUrl = currentpageUrl.substring(0, currentpageUrl.indexOf(thisMatch));
   }
-  const forwardingUrl = "".concat(donateLink, "/?cartId=").concat(cartID, "&amount=").concat(amount, "&clientOverride=donate&currency=GBP&givingType=single&affiliate=").concat(affiliateValue, "&siteurl=").concat(currentpageUrl, "&rowID=").concat(rowID);
+  const forwardingUrl = `${donateLink}/?cartId=${cartID}&amount=${amount}&clientOverride=donate&currency=GBP&givingType=single&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${rowID}`;
   window.location.href = forwardingUrl;
 };
 var _default = exports.default = handleSubmission;

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

@@ -89,7 +89,7 @@ const MarketingPreferencesDS = _ref => {
   const showSMSField = !mp_permissionSMS.hideInput && (smsChoice || errors.mp_mobile);
   const showPhoneField = !mp_permissionPhone.hideInput && (phoneChoice || errors.mp_phone);
   const showPostFields = !mp_permissionPost.hideInput && (postChoice || isAddressErroring());
-  const customId = id ? "marketing-preferences--".concat(id) : 'marketing-preferences';
+  const customId = id ? `marketing-preferences--${id}` : 'marketing-preferences';
 
   // Check for field-specific errors
   const hasEmailError = Boolean(errors.mp_permissionEmail || errors.mp_email);
@@ -99,7 +99,7 @@ const MarketingPreferencesDS = _ref => {
   return /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.OuterWrapper, Object.assign({
     id: customId
   }, rest), copyTop && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.TopCopyWrapper, null, copyTop), !mp_permissionEmail.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-email ".concat(emailChoice && 'selected'),
+    className: `field-email ${emailChoice && 'selected'}`,
     isError: hasEmailError
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_OptInCheckbox.default, {
     mpValidationOptions: mpValidationOptions,
@@ -122,7 +122,7 @@ const MarketingPreferencesDS = _ref => {
     id: "mp_email",
     formContext: formContext
   })))), !mp_permissionPost.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-post ".concat(postChoice && 'selected'),
+    className: `field-post ${postChoice && 'selected'}`,
     isError: hasPostError
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_OptInCheckbox.default, {
     name: "mp_permissionPost",
@@ -177,7 +177,7 @@ const MarketingPreferencesDS = _ref => {
     id: "mp_country",
     formContext: formContext
   })))), !mp_permissionSMS.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-sms ".concat(smsChoice && 'selected'),
+    className: `field-sms ${smsChoice && 'selected'}`,
     isError: hasSMSError
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_OptInCheckbox.default, {
     name: "mp_permissionSMS",
@@ -197,7 +197,7 @@ const MarketingPreferencesDS = _ref => {
     id: "mp_mobile",
     formContext: formContext
   })))), !mp_permissionPhone.disableOption && /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.FormField, {
-    className: "field-phone ".concat(phoneChoice && 'selected'),
+    className: `field-phone ${phoneChoice && 'selected'}`,
     isError: hasPhoneError
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckboxWrapper, null, /*#__PURE__*/_react.default.createElement(_OptInCheckbox.default, {
     name: "mp_permissionPhone",

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

@@ -51,14 +51,14 @@ const OptInCheckbox = _ref => {
     }
   };
   return /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckContainer, null, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckLabel, {
-    htmlFor: "".concat(name, "-yes"),
+    htmlFor: `${name}-yes`,
     userSelection: userSelection
   }, /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.AssociatedFieldsName, {
-    className: "icon-".concat(name)
+    className: `icon-${name}`
   }, _AssociatedFields.default[name].label), /*#__PURE__*/_react.default.createElement(_MarketingPreferencesDS.CheckInput, Object.assign({
     type: "checkbox",
     name: name,
-    id: "".concat(name, "-yes"),
+    id: `${name}-yes`,
     value: "yes"
   }, register(name), {
     onChange: onChange

package/dist/components/Organisms/Membership/Form/Form.js

@@ -82,7 +82,7 @@ const Signup = _ref => {
   };
   (0, _react.useEffect)(() => {
     regularGiving.moneybuys.map((moneyBuy, index) => {
-      const box = "box".concat(index + 1);
+      const box = `box${index + 1}`;
       // eslint-disable-next-line no-shadow
       setMoneyBoxes(moneyBoxes => ({
         ...moneyBoxes,
@@ -112,11 +112,11 @@ const Signup = _ref => {
       boxBorderColor: boxBorderColor,
       isInputMatchBox: value,
       amount: value,
-      description: "\xA3".concat(value),
+      description: `£${value}`,
       setOtherAmount: () => selectMoneyBuy(description, value),
       key: value,
-      name: "".concat(mbshipID, "--moneyBuy").concat(index + 1),
-      id: "".concat(mbshipID, "--moneyBuy-box").concat(index + 1)
+      name: `${mbshipID}--moneyBuy${index + 1}`,
+      id: `${mbshipID}--moneyBuy-box${index + 1}`
     });
   });
   return /*#__PURE__*/_react.default.createElement(_Membership2.FormWrapper, null, /*#__PURE__*/_react.default.createElement(_Membership2.Form, {
@@ -133,7 +133,7 @@ const Signup = _ref => {
     inputBorderColor: inputBorderColor,
     label: "\xA3",
     errorMsg: "",
-    id: "".concat(mbshipID, "--MoneyBuy-userInput"),
+    id: `${mbshipID}--MoneyBuy-userInput`,
     showLabel: true
   }, rest, {
     max: "25000",

package/dist/components/Organisms/Membership/Membership.style.js

@@ -128,7 +128,7 @@ const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.
     inputBorderColor,
     theme
   } = _ref13;
-  return inputBorderColor && "border: 2px solid ".concat(theme.color('red'), ";");
+  return inputBorderColor && `border: 2px solid ${theme.color('red')};`;
 }, _ref14 => {
   let {
     theme