@comicrelief/component-library 5.4.0 → 5.7.0

package/dist/components/Organisms/Footer/Nav/Nav.js

@@ -11,6 +11,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
@@ -19,16 +21,19 @@ var _breakpoint = require("../../../../theme/shared/breakpoint");
 
 var _navHelper = _interopRequireDefault(require("../../../../utils/navHelper"));
 
-var _internalLinkHelper = _interopRequireDefault(require("../../../../utils/internalLinkHelper"));
+var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
 
 var _Nav = require("./Nav.style");
 
+var _excluded = ["navItems"];
+
 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 FooterNav = function FooterNav(_ref) {
-  var navItems = _ref.navItems;
+  var navItems = _ref.navItems,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var menuGroups = navItems.menuGroups;
 
   var _useState = (0, _react.useState)(false),
@@ -96,14 +101,14 @@ var FooterNav = function FooterNav(_ref) {
     }, !isSmallBreakpoint ? /*#__PURE__*/_react.default.createElement(_Text.default, {
       color: "white",
       weight: "bold"
-    }, group.title) : /*#__PURE__*/_react.default.createElement(_Nav.NavLink, {
+    }, group.title) : /*#__PURE__*/_react.default.createElement(_Nav.NavLink, Object.assign({
       href: "#",
       inline: true,
       "aria-expanded": !!isSubMenuOpen[group.id],
       "aria-haspopup": "true",
       role: "button",
       onClick: toggleSubMenu(group.id)
-    }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    }, rest), /*#__PURE__*/_react.default.createElement(_Text.default, {
       color: "white"
     }, group.title)), group.links && group.links.length > 0 && /*#__PURE__*/_react.default.createElement(_Nav.SubNavMenu, {
       role: "list",
@@ -113,15 +118,15 @@ var FooterNav = function FooterNav(_ref) {
     }, group.links.map(function (child) {
       /* Determine which field represents our url path */
       var thisUrl = (0, _navHelper.default)(child);
-      thisUrl = (0, _internalLinkHelper.default)(thisUrl);
+      thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);
       return /*#__PURE__*/_react.default.createElement(_Nav.SubNavItem, {
         key: thisUrl,
         column: group.links.length % 2 === 0 && group.links.length > 2
-      }, /*#__PURE__*/_react.default.createElement(_Nav.SubNavLink, {
+      }, /*#__PURE__*/_react.default.createElement(_Nav.SubNavLink, Object.assign({
         href: thisUrl,
         inline: true,
         role: "menuitem"
-      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+      }, rest), /*#__PURE__*/_react.default.createElement(_Text.default, {
         color: "white"
       }, child.title)));
     })));

package/dist/components/Organisms/Footer/Nav/Nav.style.js

@@ -15,7 +15,7 @@ var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hid
 
 var NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "Navstyle__NavLinkClass",
-  componentId: "uzf5hs-0"
+  componentId: "sc-uzf5hs-0"
 })(["border:0;height:46px;width:100%;background-color:", ";&:hover,&:focus{border-bottom:none;}"], function (_ref) {
   var theme = _ref.theme;
   return theme.color('deep_violet_dark');
@@ -26,7 +26,7 @@ var NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
 
 var Nav = _styledComponents.default.nav.withConfig({
   displayName: "Navstyle__Nav",
-  componentId: "uzf5hs-1"
+  componentId: "sc-uzf5hs-1"
 })(["display:block;width:100%;text-align:left;> h2{", ";}"], _hideVisually.default);
 /**
  * Sub Navigation Menu (second level)
@@ -37,7 +37,7 @@ exports.Nav = Nav;
 
 var SubNavMenu = _styledComponents.default.ul.withConfig({
   displayName: "Navstyle__SubNavMenu",
-  componentId: "uzf5hs-2"
+  componentId: "sc-uzf5hs-2"
 })(["display:flex;transition:max-height 0.5s ease;max-height:", ";overflow:hidden;padding:0;position:relative;list-style:none outside;flex-direction:column;> li a{display:", ";font-size:15px;font-weight:500;cursor:pointer;&:after{content:none;}}@media ", "{max-height:none;height:auto;", ";> li a{display:inline;line-height:24px;}}"], function (_ref2) {
   var isSubMenuOpen = _ref2.isSubMenuOpen;
   return isSubMenuOpen ? '400px' : '0px';
@@ -60,7 +60,7 @@ exports.SubNavMenu = SubNavMenu;
 
 var SubNavItem = _styledComponents.default.li.withConfig({
   displayName: "Navstyle__SubNavItem",
-  componentId: "uzf5hs-3"
+  componentId: "sc-uzf5hs-3"
 })(["height:40px;width:100%;background-color:inherit;padding:8px 0;@media ", "{height:auto;margin-top:12px;padding:0;", ";a{background-color:inherit;height:auto;&:after{content:none !important;}&:hover,&:focus{border-bottom:2px solid #fff;span{border-bottom:0;padding-bottom:2px;}}}}@media ", "{", ";}"], function (_ref6) {
   var theme = _ref6.theme;
   return theme.breakpoint('small');
@@ -82,7 +82,7 @@ var SubNavItem = _styledComponents.default.li.withConfig({
 exports.SubNavItem = SubNavItem;
 var SubNavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "Navstyle__SubNavLink",
-  componentId: "uzf5hs-4"
+  componentId: "sc-uzf5hs-4"
 })(["padding:14px 21px;height:auto;position:relative;"]);
 /**
  * Navigation Menu (first level)
@@ -92,7 +92,7 @@ exports.SubNavLink = SubNavLink;
 
 var NavMenu = _styledComponents.default.ul.withConfig({
   displayName: "Navstyle__NavMenu",
-  componentId: "uzf5hs-5"
+  componentId: "sc-uzf5hs-5"
 })(["background-color:inherit;list-style:none outside;padding:0;margin:0;@media ", "{display:flex;flex-wrap:wrap;justify-content:start;}"], function (_ref10) {
   var theme = _ref10.theme;
   return theme.breakpoint('small');
@@ -105,7 +105,7 @@ var NavMenu = _styledComponents.default.ul.withConfig({
 exports.NavMenu = NavMenu;
 var NavLink = (0, _styledComponents.default)(NavLinkClass).withConfig({
   displayName: "Navstyle__NavLink",
-  componentId: "uzf5hs-6"
+  componentId: "sc-uzf5hs-6"
 })([""]);
 /**
  * Menu list items
@@ -115,7 +115,7 @@ exports.NavLink = NavLink;
 
 var NavItem = _styledComponents.default.li.withConfig({
   displayName: "Navstyle__NavItem",
-  componentId: "uzf5hs-7"
+  componentId: "sc-uzf5hs-7"
 })(["position:relative;font-weight:700;margin:0;margin-bottom:1rem;@media ", "{flex:0 0 30%;margin:0;}@media ", "{flex:0 0 calc(25% - 1rem);margin-right:1rem;margin-bottom:1rem;> span{padding:0;}}a{width:auto;padding:0;height:auto;position:relative;background-color:inherit;font-size:19px;line-height:40px;font-weight:800;@media ", "{font-size:20px;line-height:40px;}&:after{content:'\\2303';position:absolute;font-family:Arial;margin-left:4px;overflow:hidden;line-height:19px;font-size:23px;color:", ";font-weight:100;transition:transform 0.2s ease;transform:", ";top:", ";right:-25px;}@media ", "{cursor:default;display:inline;&:after{content:none;}}}"], function (_ref11) {
   var theme = _ref11.theme;
   return theme.breakpoint('small');

package/dist/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -27,7 +27,7 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c25 {
+.c26 {
   color: #969598;
   font-size: 1rem;
   line-height: 1rem;
@@ -69,6 +69,21 @@ exports[`renders correctly 1`] = `
   border-bottom: 2px solid #000000;
 }
 
+.c24 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .c5 {
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -313,7 +328,7 @@ exports[`renders correctly 1`] = `
   align-items: center;
 }
 
-.c24 {
+.c25 {
   display: block;
   width: 100%;
   height: 100%;
@@ -321,7 +336,7 @@ exports[`renders correctly 1`] = `
   margin-top: 3rem;
 }
 
-.c24 p {
+.c25 p {
   font-size: 15px;
   line-height: 24px;
   margin-bottom: 5px;
@@ -528,7 +543,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c24 p {
+  .c25 p {
     font-size: 16px;
     line-height: 27px;
   }
@@ -1166,6 +1181,11 @@ exports[`renders correctly 1`] = `
                   >
                     Link comp with only URL
                   </span>
+                  <span
+                    className="c24"
+                  >
+                    (opens in new window)
+                  </span>
                 </a>
               </li>
               <li
@@ -1206,6 +1226,11 @@ exports[`renders correctly 1`] = `
                   >
                     Test non-whitelisted external link
                   </span>
+                  <span
+                    className="c24"
+                  >
+                    (opens in new window)
+                  </span>
                 </a>
               </li>
             </ul>
@@ -1213,10 +1238,10 @@ exports[`renders correctly 1`] = `
         </ul>
       </nav>
       <div
-        className="c24"
+        className="c25"
       >
         <p
-          className="c25"
+          className="c26"
           color="grey"
           size="s"
         >

package/dist/components/Organisms/Header/Burger/BurgerMenu.style.js

@@ -22,7 +22,7 @@ var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"))
  */
 var BurgerHiddenText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "BurgerMenustyle__BurgerHiddenText",
-  componentId: "dtfwej-0"
+  componentId: "sc-dtfwej-0"
 })(["", ";"], _hideVisually.default);
 /**
  * Burger menu bar
@@ -32,7 +32,7 @@ exports.BurgerHiddenText = BurgerHiddenText;
 
 var BurgerBar = _styledComponents.default.span.withConfig({
   displayName: "BurgerMenustyle__BurgerBar",
-  componentId: "dtfwej-1"
+  componentId: "sc-dtfwej-1"
 })(["background-color:", ";margin:0 auto;"], function (_ref) {
   var theme = _ref.theme;
   return theme.color('deep_violet_dark');
@@ -45,7 +45,7 @@ var BurgerBar = _styledComponents.default.span.withConfig({
 exports.BurgerBar = BurgerBar;
 var BurgerWrapper = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "BurgerMenustyle__BurgerWrapper",
-  componentId: "dtfwej-2"
+  componentId: "sc-dtfwej-2"
 })(["", ";order:50;display:flex;align-items:center;position:relative;text-indent:-9999px;background-color:transparent;height:100%;width:45px;left:5px;cursor:pointer;transition:all 0.2s;:hover{border:none;font-weight:inherit;}", "{position:relative;&,::before,::after{width:25px;height:3px;display:inline-block;}", ";::before,::after{content:'';position:absolute;left:0;background-color:currentColor;transition:all 0.2s;}::before{top:-0.5rem;", ";}::after{top:0.5rem;", ";}}:hover ", "{&,::before,::after{background-color:", ";}::before{", ";}::after{", ";}}@media ", "{display:none;}"], (0, _zIndex.default)('medium'), BurgerBar, function (_ref2) {
   var isExpandable = _ref2.isExpandable;
   return isExpandable && ' background-color: transparent';

package/dist/components/Organisms/Header/Header.js

@@ -17,11 +17,13 @@ var _Nav = _interopRequireDefault(require("./Nav/Nav"));
 
 var _Header = require("./Header.style");
 
+var _excluded = ["navItems", "metaIcons", "campaign"];
+
 var Header = function Header(_ref) {
   var navItems = _ref.navItems,
       metaIcons = _ref.metaIcons,
       campaign = _ref.campaign,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["navItems", "metaIcons", "campaign"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Header.HeaderWrapper, Object.assign({
     navItems: true
   }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_Logos.default, {

package/dist/components/Organisms/Header/Nav/Nav.js

@@ -21,7 +21,7 @@ var _breakpoint = require("../../../../theme/shared/breakpoint");
 
 var _navHelper = _interopRequireDefault(require("../../../../utils/navHelper"));
 
-var _internalLinkHelper = _interopRequireDefault(require("../../../../utils/internalLinkHelper"));
+var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
 
 var _whiteListed = _interopRequireDefault(require("../../../../utils/whiteListed"));
 
@@ -104,7 +104,7 @@ var MainNav = function MainNav(_ref) {
     var relNoopener = !(0, _whiteListed.default)(thisUrl) && 'noopener';
     var hasSubMenu = group.links && group.links.length > 1;
     var hasPopUp = hasSubMenu ? 'true' : null;
-    thisUrl = (0, _internalLinkHelper.default)(thisUrl);
+    thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);
     return /*#__PURE__*/_react.default.createElement(_Nav.NavItem, {
       role: "none",
       key: group.id,
@@ -133,7 +133,7 @@ var MainNav = function MainNav(_ref) {
       isSubMenuOpen: !!isSubMenuOpen[group.id]
     }, group.links.map(function (child, childIndex) {
       var thisSubUrl = (0, _navHelper.default)(child);
-      thisSubUrl = (0, _internalLinkHelper.default)(thisSubUrl);
+      thisSubUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisSubUrl);
       /* Wrap our first child item with special tags */
 
       if (childIndex === 0) {

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

@@ -15,13 +15,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Input = _interopRequireDefault(require("../../Atoms/Input/Input"));
 
+var _excluded = ["fieldName", "label", "optional", "fieldType", "formContext"];
+
 var TextInput = function TextInput(_ref) {
   var fieldName = _ref.fieldName,
       label = _ref.label,
       optional = _ref.optional,
       fieldType = _ref.fieldType,
       formContext = _ref.formContext,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["fieldName", "label", "optional", "fieldType", "formContext"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var errors = formContext.errors,
       register = formContext.register;
   var props = (0, _objectSpread2.default)({

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

@@ -25,6 +25,8 @@ var _Membership = require("../../../../utils/Membership");
 
 var _Membership2 = require("../Membership.style");
 
+var _excluded = ["data", "donateLink", "otherDescription", "clientID", "cartID", "mbshipID"];
+
 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; }
@@ -36,7 +38,7 @@ var Signup = function Signup(_ref) {
       clientID = _ref.clientID,
       cartID = _ref.cartID,
       mbshipID = _ref.mbshipID,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["data", "donateLink", "otherDescription", "clientID", "cartID", "mbshipID"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)({
     box1: '',

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

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _Input = _interopRequireDefault(require("../../../Atoms/Input/Input"));
 
+var _excluded = ["setOtherAmount", "amount", "currency", "description"];
+
 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; }
@@ -49,7 +51,7 @@ var MoneyBuy = function MoneyBuy(_ref7) {
       amount = _ref7.amount,
       currency = _ref7.currency,
       description = _ref7.description,
-      rest = (0, _objectWithoutProperties2.default)(_ref7, ["setOtherAmount", "amount", "currency", "description"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref7, _excluded);
   return /*#__PURE__*/_react.default.createElement(MoneyBox, Object.assign({}, rest, {
     "aria-label": description,
     value: "".concat(currency, " ").concat(amount),

package/dist/index.js

@@ -167,6 +167,12 @@ Object.defineProperty(exports, "Label", {
     return _Label.default;
   }
 });
+Object.defineProperty(exports, "ButtonWithStates", {
+  enumerable: true,
+  get: function get() {
+    return _ButtonWithStates.default;
+  }
+});
 Object.defineProperty(exports, "HeroBanner", {
   enumerable: true,
   get: function get() {
@@ -329,6 +335,18 @@ Object.defineProperty(exports, "Descriptor", {
     return _Descriptor.default;
   }
 });
+Object.defineProperty(exports, "Lookup", {
+  enumerable: true,
+  get: function get() {
+    return _Lookup.default;
+  }
+});
+Object.defineProperty(exports, "SimpleSchoolLookup", {
+  enumerable: true,
+  get: function get() {
+    return _SimpleSchoolLookup.default;
+  }
+});
 Object.defineProperty(exports, "EmailSignUp", {
   enumerable: true,
   get: function get() {
@@ -416,6 +434,8 @@ var _ErrorText = _interopRequireDefault(require("./components/Atoms/ErrorText/Er
 
 var _Label = _interopRequireDefault(require("./components/Atoms/Label/Label"));
 
+var _ButtonWithStates = _interopRequireDefault(require("./components/Atoms/ButtonWithStates/ButtonWithStates"));
+
 var _HeroBanner = _interopRequireDefault(require("./components/Molecules/HeroBanner/HeroBanner"));
 
 var _InfoBanner = _interopRequireDefault(require("./components/Molecules/InfoBanner/InfoBanner"));
@@ -470,6 +490,10 @@ var _Chip = _interopRequireDefault(require("./components/Molecules/Chip/Chip"));
 
 var _Descriptor = _interopRequireDefault(require("./components/Molecules/Descriptor/Descriptor"));
 
+var _Lookup = _interopRequireDefault(require("./components/Molecules/Lookup/Lookup"));
+
+var _SimpleSchoolLookup = _interopRequireDefault(require("./components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup"));
+
 var _EmailSignUp = _interopRequireDefault(require("./components/Organisms/EmailSignUp/EmailSignUp"));
 
 var _CookieBanner = _interopRequireDefault(require("./components/Organisms/CookieBanner/CookieBanner"));

package/dist/utils/internalLinkHelper.js

@@ -1,13 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getDomain = exports.InternalLinkHelper = void 0;
 
-var InternalLinkHelper = function InternalLinkHelper(link) {
-  var domainRegEx = new RegExp('(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]'); // Check our URL for a domain pattern, if so return it
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var domainRegEx = new RegExp('(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]');
 
+var InternalLinkHelper = function InternalLinkHelper(link) {
+  // Check our URL for a domain pattern, if so return it
   if (domainRegEx.test(link)) {
     return link;
   } // If domain-free and internal, prefix it with slash if it doesn't already have one
@@ -16,5 +21,22 @@ var InternalLinkHelper = function InternalLinkHelper(link) {
   return link.substring(0, 1) === '/' ? link : "/".concat(link);
 };
 
-var _default = InternalLinkHelper;
-exports.default = _default;
+exports.InternalLinkHelper = InternalLinkHelper;
+
+var getDomain = function getDomain(url) {
+  var thisURL = url; // Strip out protocol
+
+  thisURL = url.replace(/(https?:\/\/)?(www.)?/i, ''); // Strip out subdirectory/path
+
+  if (thisURL.indexOf('/') !== -1) {
+    var _thisURL$split = thisURL.split('/'),
+        _thisURL$split2 = (0, _slicedToArray2.default)(_thisURL$split, 1),
+        splitURL = _thisURL$split2[0];
+
+    thisURL = splitURL;
+  }
+
+  return thisURL;
+};
+
+exports.getDomain = getDomain;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "5.4.0",
+  "version": "5.7.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -21,10 +21,10 @@
     "url": "https://github.com/comicrelief/component-library.git"
   },
   "dependencies": {
-    "@babel/cli": "^7.13.14",
+    "@babel/cli": "^7.14.8",
     "@hookform/resolvers": "^1.3.4",
     "axios": "^0.21.1",
-    "jest-styled-components": "^7.0.2",
+    "jest-styled-components": "^7.0.5",
     "lazysizes": "^5.3.2",
     "lodash": "^4.17.11",
     "moment": "^2.29.1",
@@ -33,12 +33,13 @@
     "react-currency-format": "^1.0.0",
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.3.0",
-    "react-modal": "^3.14.2",
+    "react-modal": "^3.14.3",
     "react-scripts": "4.0.3",
-    "react-styleguidist": "^11.1.6",
+    "react-spinners": "^0.11.0",
+    "react-styleguidist": "^11.1.7",
     "react-test-renderer": "^17.0.2",
     "react-uid": "^2.2.0",
-    "styled-components": "^5.2.3",
+    "styled-components": "^5.3.1",
     "youtube-player": "^5.5.2",
     "yup": "^0.32.9",
     "yup-phone": "^1.2.19"
@@ -73,17 +74,17 @@
   "devDependencies": {
     "babel-eslint": "^10.0.2",
     "cross-env": "^7.0.3",
-    "cypress": "^7.0.1",
-    "eslint": "^7.23.0",
+    "cypress": "^8.3.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.0.5",
-    "husky": "^5.0.6",
+    "husky": "^7.0.2",
     "jest": "^26.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.5",
-    "semantic-release": "^17.4.2"
+    "prettier": "^2.3.2",
+    "semantic-release": "^17.4.6"
   }
 }

package/src/components/Atoms/ButtonWithStates/ButtonWithStates.js

@@ -0,0 +1,64 @@
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ScaleLoader from 'react-spinners/ScaleLoader';
+import spacing from '../../../theme/shared/spacing';
+import Button from '../Button/Button';
+
+const ButtonWithDisabledState = styled(Button)`
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.75;
+  }
+`;
+
+const LoaderContainer = styled.div`${({ withMargin }) => (withMargin ? `
+  margin-top: ${spacing('xsm')};
+  margin-left: ${spacing('md')};
+` : '')}`;
+
+// A button with loading and disabled states.
+const ButtonWithStates = React.forwardRef(({
+  children, loadingText, loading, disabled, ...rest
+}, ref) => {
+  const [loaderColour, setLoaderColour] = useState(null);
+
+  // Can't see a simpler way to get the button's text colour, without reading the value
+  //  via JavaScript.
+  //  (e.g. the `theme.buttonColours` helper returns a CSS string split into an array -
+  //  don't really want to be parsing that.)
+  //  (And can't use inherit because ScaleLoader's color prop is actually setting its
+  //  background color.)
+  const getLoaderColour = useCallback(node => {
+    if (node && typeof window.getComputedStyle === 'function') {
+      const textColour = window.getComputedStyle(node).color;
+      if (textColour) {
+        setLoaderColour(textColour);
+      }
+    }
+  }, []);
+
+  return (
+    <ButtonWithDisabledState ref={ref} disabled={disabled} {...rest}>
+      {loading ? loadingText : children}
+      <LoaderContainer ref={getLoaderColour} withMargin={loading}>
+        <ScaleLoader height={16} width={2} loading={loading} color={loaderColour} />
+      </LoaderContainer>
+    </ButtonWithDisabledState>
+  );
+});
+
+ButtonWithStates.propTypes = {
+  children: PropTypes.node.isRequired,
+  loadingText: PropTypes.string,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool
+};
+
+ButtonWithStates.defaultProps = {
+  loading: false,
+  disabled: false,
+  loadingText: 'Loading'
+};
+
+export default ButtonWithStates;

package/src/components/Atoms/ButtonWithStates/ButtonWithStates.md

@@ -0,0 +1,13 @@
+## Disabled and loading
+
+```js
+import ButtonWithStates from './ButtonWithStates';
+
+<ButtonWithStates
+  type="submit"
+  loading
+  disabled
+>
+  Enter prize draw
+</ButtonWithStates>
+```