@comicrelief/component-library 8.44.3 → 8.45.0

package/dist/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap

@@ -140,7 +140,6 @@ exports[`renders correctly with no value and no options 1`] = `
   >
     <span
       className="c2 c3"
-      color="inherit"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Search for bikes",
@@ -314,7 +313,6 @@ exports[`renders correctly with value and no options 1`] = `
   >
     <span
       className="c2 c3"
-      color="inherit"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Search for bikes",
@@ -527,7 +525,6 @@ exports[`renders correctly with value and options 1`] = `
   >
     <span
       className="c2 c3"
-      color="inherit"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Search for bikes",
@@ -577,7 +574,6 @@ exports[`renders correctly with value and options 1`] = `
       >
         <span
           className="c2"
-          color="inherit"
         >
           Canyon
         </span>
@@ -593,7 +589,6 @@ exports[`renders correctly with value and options 1`] = `
       >
         <span
           className="c2"
-          color="inherit"
         >
           Cannondale
         </span>
@@ -609,7 +604,6 @@ exports[`renders correctly with value and options 1`] = `
       >
         <span
           className="c2"
-          color="inherit"
         >
           Condor
         </span>
@@ -625,7 +619,6 @@ exports[`renders correctly with value and options 1`] = `
       >
         <span
           className="c2"
-          color="inherit"
         >
           Cube
         </span>

package/dist/components/Molecules/Accordion/__snapshots__/Accordion.test.js.snap

@@ -175,8 +175,6 @@ exports[`renders correctly 1`] = `
   >
     <h2
       className="c2"
-      color="inherit"
-      size="l"
     >
       I am the title
     </h2>
@@ -203,8 +201,6 @@ exports[`renders correctly 1`] = `
   >
     <p
       className="c6"
-      color="inherit"
-      size="s"
     >
       Name, surname, email and billing address We need these to process your payment, create a receipt and send it to you. Establishment information We use this information to understand which institutions (e.g. schools, companies) raise money for us. Your details will be kept safe and never shared with other organisations; see our Privacy Policy for more information
     </p>

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

@@ -294,16 +294,11 @@ it('renders article teaser correctly', () => {
         >
           <span
             className="c8 c9"
-            color="inherit"
-            size="xs"
           >
              01 July 2019
           </span>
           <h3
             className="c10 c11"
-            color="inherit"
-            height="2rem"
-            size="xl"
           >
             News article
           </h3>
@@ -572,16 +567,11 @@ it('renders press realese correctly', () => {
         >
           <span
             className="c8 c9"
-            color="inherit"
-            size="xs"
           >
              01 July 2019
           </span>
           <h3
             className="c10 c11"
-            color="inherit"
-            height="2rem"
-            size="xl"
           >
             Press Release
           </h3>

package/dist/components/Molecules/Banner/__snapshots__/Banner.test.js.snap

@@ -69,8 +69,6 @@ exports[`renders correctly 1`] = `
   >
     <p
       className="c2"
-      color="white"
-      size="s"
     >
       Mental health issues affect 1 in 4 of us in the UK. Join now and with your help we can provide vital support for people like Jordan. You know what to do.
     </p>

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

@@ -240,8 +240,6 @@ it('renders article teaser correctly', () => {
         >
           <span
             className="c3 c4"
-            color="grey_dark"
-            size="s"
           >
             15/06/2020
           </span>
@@ -267,9 +265,6 @@ it('renders article teaser correctly', () => {
         </div>
         <h3
           className="c7 c8"
-          color="inherit"
-          height="2rem"
-          size="xl"
         >
           Title
         </h3>
@@ -278,29 +273,21 @@ it('renders article teaser correctly', () => {
         >
           <span
             className="c10 c11"
-            color="grey_dark"
-            size="xs"
           >
             tag1
           </span>
           <span
             className="c10 c11"
-            color="grey_dark"
-            size="xs"
           >
             tag2
           </span>
           <span
             className="c10 c11"
-            color="grey_dark"
-            size="xs"
           >
             tag3
           </span>
           <span
             className="c10 c11"
-            color="grey_dark"
-            size="xs"
           >
             tag4
           </span>

package/dist/components/Molecules/EmailSignUp/EmailSignUp.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _EmailSignUp = require("./EmailSignUp.style");
+const EmailSignUp = _ref => {
+  let {
+    formContext,
+    ...rest
+  } = _ref;
+  const {
+    formState: {
+      errors
+    },
+    register
+  } = formContext;
+  const errorMsg = errors && errors.email && errors.email.message;
+  return /*#__PURE__*/_react.default.createElement(_EmailSignUp.EmailSignUpWrapper, null, /*#__PURE__*/_react.default.createElement(_EmailSignUp.LabelWrapper, null, /*#__PURE__*/_react.default.createElement(_EmailSignUp.StyledLabel, null, "Subscribe to our newsletter")), /*#__PURE__*/_react.default.createElement(_EmailSignUp.FormWrapper, {
+    error: !!errorMsg
+  }, /*#__PURE__*/_react.default.createElement(_EmailSignUp.InputWrapper, null, /*#__PURE__*/_react.default.createElement(_EmailSignUp.StyledEmailInput, Object.assign({
+    name: "email",
+    type: "email",
+    id: "email-signup",
+    label: "Email address",
+    showLabel: false,
+    placeholder: "Enter your email address",
+    errorMsg: errorMsg,
+    optional: true
+  }, register('email'), rest))), /*#__PURE__*/_react.default.createElement(_EmailSignUp.ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_EmailSignUp.StyledEmailSignUpButton, {
+    type: "submit",
+    color: "white"
+  }, "Sign up"))));
+};
+var _default = exports.default = EmailSignUp;

package/dist/components/Molecules/EmailSignUp/EmailSignUp.style.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledLabel = exports.StyledEmailSignUpButton = exports.StyledEmailInput = exports.LabelWrapper = exports.InputWrapper = exports.FormWrapper = exports.EmailSignUpWrapper = exports.ButtonWrapper = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Input = _interopRequireDefault(require("../../Atoms/Input/Input"));
+var _Button = _interopRequireDefault(require("../../Atoms/Button/Button"));
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
+var _animations = require("../../../theme/shared/animations");
+var _fontHelper = _interopRequireDefault(require("../../../theme/crTheme/fontHelper"));
+const EmailSignUpWrapper = exports.EmailSignUpWrapper = _styledComponents.default.div.withConfig({
+  displayName: "EmailSignUpstyle__EmailSignUpWrapper",
+  componentId: "sc-d38yg6-0"
+})(["margin-bottom:", ";@media ", "{margin-bottom:", ";}color:", ";"], (0, _spacing.default)('m'), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.breakpoints2026('M');
+}, (0, _spacing.default)('m'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.color('white');
+});
+const LabelWrapper = exports.LabelWrapper = _styledComponents.default.div.withConfig({
+  displayName: "EmailSignUpstyle__LabelWrapper",
+  componentId: "sc-d38yg6-1"
+})(["margin-bottom:", ";"], (0, _spacing.default)('md'));
+const StyledLabel = exports.StyledLabel = _styledComponents.default.span.withConfig({
+  displayName: "EmailSignUpstyle__StyledLabel",
+  componentId: "sc-d38yg6-2"
+})(["", ""], _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return (0, _styledComponents.css)(["", " font-weight:bold;"], (0, _fontHelper.default)(theme, 'p'));
+});
+const FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConfig({
+  displayName: "EmailSignUpstyle__FormWrapper",
+  componentId: "sc-d38yg6-3"
+})(["display:flex;align-items:center;flex-direction:column;gap:", ";overflow:visible;@media ", "{flex-direction:row;align-items:center;", "}"], (0, _spacing.default)('md'), _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.breakpoints2026('M');
+}, _ref5 => {
+  let {
+    error
+  } = _ref5;
+  return error && `
+    align-items: flex-start;
+  `;
+});
+const InputWrapper = exports.InputWrapper = _styledComponents.default.div.withConfig({
+  displayName: "EmailSignUpstyle__InputWrapper",
+  componentId: "sc-d38yg6-4"
+})(["flex:1;display:flex;align-items:center;width:100%;overflow:visible;@media ", "{width:auto;min-width:360px;}"], _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.breakpoints2026('M');
+});
+const StyledEmailInput = exports.StyledEmailInput = (0, _styledComponents.default)(_Input.default).withConfig({
+  displayName: "EmailSignUpstyle__StyledEmailInput",
+  componentId: "sc-d38yg6-5"
+})(["overflow:visible;@media ", "{", "}input{", "}"], _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.breakpoints2026('M');
+}, (0, _animations.springScaleAnimation)(true, 1.04, 1), _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return (0, _styledComponents.css)(["", " background-color:", ";border-color:transparent;transition:background-color 0.2s ease;border:1px solid ", ";color:", ";&::placeholder{color:", ";}&:hover,&:focus{background-color:", ";}"], (0, _fontHelper.default)(theme, 'formFieldInput'), theme.color('grey_5'), theme.color('white'), theme.color('white'), theme.color('grey_2'), theme.color('grey_4_hover'));
+});
+const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div.withConfig({
+  displayName: "EmailSignUpstyle__ButtonWrapper",
+  componentId: "sc-d38yg6-6"
+})(["display:flex;align-items:center;justify-content:center;width:100%;@media ", "{width:auto;}"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.breakpoints2026('M');
+});
+const StyledEmailSignUpButton = exports.StyledEmailSignUpButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "EmailSignUpstyle__StyledEmailSignUpButton",
+  componentId: "sc-d38yg6-7"
+})(["margin:0;font-family:", ";border-radius:0.5rem;@media ", "{", " margin:0;}&:hover,&:focus{background-color:", ";color:", ";}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.fontFamilies('Montserrat');
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.breakpoints2026('M');
+}, (0, _animations.springScaleAnimation)(true, 1.02, 1), _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.color('white');
+}, _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.color('black');
+});

package/dist/components/Molecules/InfoBanner/__snapshots__/InfoBanner.test.js.snap

@@ -140,15 +140,11 @@ exports[`renders correctly 1`] = `
   >
     <h3
       className="c2"
-      color="inherit"
-      size="md"
     >
       Project Name
     </h3>
     <p
       className="c3"
-      color="inherit"
-      size="s"
     >
       Hello There
     </p>
@@ -158,15 +154,11 @@ exports[`renders correctly 1`] = `
   >
     <h3
       className="c2"
-      color="inherit"
-      size="md"
     >
       End Date
     </h3>
     <p
       className="c3"
-      color="inherit"
-      size="s"
     >
       1st June 2020
     </p>
@@ -176,15 +168,11 @@ exports[`renders correctly 1`] = `
   >
     <h3
       className="c2"
-      color="inherit"
-      size="md"
     >
       Funding theme
     </h3>
     <p
       className="c3"
-      color="inherit"
-      size="s"
     >
       <a
         className="c4"
@@ -202,15 +190,11 @@ exports[`renders correctly 1`] = `
   >
     <h3
       className="c2"
-      color="inherit"
-      size="md"
     >
       Amount Awarded
     </h3>
     <p
       className="c3"
-      color="inherit"
-      size="s"
     >
       £2,000,000
     </p>
@@ -220,15 +204,11 @@ exports[`renders correctly 1`] = `
   >
     <h3
       className="c2"
-      color="inherit"
-      size="md"
     >
       Start Date
     </h3>
     <p
       className="c3"
-      color="inherit"
-      size="s"
     >
       1st June 2010
     </p>
@@ -238,15 +218,11 @@ exports[`renders correctly 1`] = `
   >
     <h3
       className="c2"
-      color="inherit"
-      size="md"
     >
       Beneficiary Country
     </h3>
     <p
       className="c3"
-      color="inherit"
-      size="s"
     >
       Uk
     </p>

package/dist/components/Molecules/LogoLinked/LogoLinked.js

@@ -1,14 +1,14 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Logo = _interopRequireDefault(require("../../Atoms/Logo/Logo"));
+var _animations = require("../../../theme/shared/animations");
 const TitleLabel = _styledComponents.default.span.withConfig({
   displayName: "LogoLinked__TitleLabel",
   componentId: "sc-1l32h77-0"
@@ -20,16 +20,16 @@ const LogoLink = _styledComponents.default.a.withConfig({
   let {
     animateRotate
   } = _ref;
-  return animateRotate && (0, _styledComponents.css)(["img{transition:transform 0.35s cubic-bezier(0.41,1.64,0.41,0.8);}&:hover,&:focus{img{transform:rotate(-14deg);}}"]);
+  return (0, _animations.logoRotateAnimation)(animateRotate);
 });
 const LogoLinked = _ref2 => {
   let {
+    sizeSm,
+    sizeMd,
     campaign = 'Comic Relief',
     title = 'Go to Comic Relief homepage',
     url = '/',
-    animateRotate = false,
-    sizeSm,
-    sizeMd
+    animateRotate = false
   } = _ref2;
   if (campaign === 'Sport Relief Gameon') {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(LogoLink, {

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

@@ -174,8 +174,6 @@ it('renders correctly', () => {
       </div>
       <span
         className="c4 c5 c6"
-        color="white"
-        size="xxs"
       >
         Find out more
       </span>

package/dist/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -301,15 +301,11 @@ exports[`renders Promo correctly 1`] = `
       >
         <h1
           className="c7"
-          color="white"
-          size="super"
         >
           Curabitur pretium tincidunt lacus
         </h1>
         <p
           className="c8"
-          color="white"
-          size="s"
         >
           Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
         </p>
@@ -642,15 +638,11 @@ exports[`renders Promo correctly end position 1`] = `
       >
         <h1
           className="c7"
-          color="white"
-          size="super"
         >
           Curabitur pretium tincidunt lacus
         </h1>
         <p
           className="c8"
-          color="white"
-          size="s"
         >
           Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
         </p>

package/dist/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap

@@ -140,7 +140,6 @@ exports[`renders correctly 1`] = `
   >
     <span
       className="c2 c3"
-      color="inherit"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Enter the name or postcode of your school or nursery",

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

@@ -189,7 +189,6 @@ it('renders correctly', () => {
             >
               <span
                 className="c6 c7"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "Search",

package/dist/components/Molecules/SearchResult/__snapshots__/SearchResult.test.js.snap

@@ -206,15 +206,11 @@ exports[`renders correctly in minimalist form 1`] = `
     >
       <span
         className="c7"
-        color="inherit"
-        size="xs"
       >
          
       </span>
       <h3
         className="c8 c9"
-        color="inherit"
-        size="xl"
       >
         News article
       </h3>
@@ -466,22 +462,16 @@ exports[`renders correctly with copy 1`] = `
     >
       <span
         className="c7"
-        color="inherit"
-        size="xs"
       >
          
       </span>
       <h3
         className="c8 c9"
-        color="inherit"
-        size="xl"
       >
         News article
       </h3>
       <p
         className="c10"
-        color="inherit"
-        size="m"
       >
         News article copy
       </p>
@@ -696,15 +686,11 @@ exports[`renders correctly with date 1`] = `
     >
       <span
         className="c7"
-        color="inherit"
-        size="xs"
       >
          01 July 2019
       </span>
       <h3
         className="c8 c9"
-        color="inherit"
-        size="xl"
       >
         News article
       </h3>
@@ -920,15 +906,11 @@ exports[`renders correctly with date and type 1`] = `
     >
       <span
         className="c7"
-        color="inherit"
-        size="xs"
       >
          article | 01 July 2019
       </span>
       <h3
         className="c8 c9"
-        color="inherit"
-        size="xl"
       >
         News article
       </h3>

package/dist/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -190,8 +190,6 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   >
     <p
       className="c6"
-      color="white"
-      size="xxl"
     >
       “The creativity that goes into helping people have a better life is extraordinary.”
     </p>
@@ -469,15 +467,11 @@ exports[`renders Single Message with Image correctly 1`] = `
   >
     <h1
       className="c6"
-      color="white"
-      size="xxl"
     >
       title
     </h1>
     <p
       className="c7"
-      color="white"
-      size="s"
     >
       description
     </p>
@@ -733,8 +727,6 @@ exports[`renders Single Message with double image correctly 1`] = `
   >
     <p
       className="c6"
-      color="black"
-      size="xxl"
     >
       “The creativity that goes into helping people have a better life is extraordinary.”
     </p>
@@ -1035,15 +1027,11 @@ exports[`renders Single Message with full width correctly 1`] = `
   >
     <h1
       className="c6"
-      color="white"
-      size="xxl"
     >
       title
     </h1>
     <p
       className="c7"
-      color="white"
-      size="s"
     >
       description
     </p>
@@ -1343,8 +1331,6 @@ exports[`renders Single Message with no Image correctly 1`] = `
   >
     <p
       className="c2"
-      color="white"
-      size="xxl"
     >
       “The creativity that goes into helping people have a better life is extraordinary.”
     </p>

package/dist/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -347,15 +347,11 @@ exports[`renders correctly 1`] = `
   >
     <span
       className="c6 c7"
-      color="blue_dark"
-      size="s"
     >
       Subtitle
     </span>
     <p
       className="c8"
-      color="inherit"
-      size="s"
     >
       Whatever you’ve got planned, the Sport Relief shop has everything you need to get you looking your best while you’re raising some cash. Also available in Sainsbury’s stores and online and in selected Argos stores.
     </p>

package/dist/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap

@@ -140,7 +140,6 @@ exports[`renders correctly 1`] = `
   >
     <span
       className="c2 c3"
-      color="inherit"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Typeahead test",

package/dist/components/Organisms/CookieBanner/CookieBanner.test.js

@@ -177,7 +177,6 @@ it('renders correctly', () => {
     >
       <p
         className="c1 c2"
-        color="white"
       >
         Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about
         <a
@@ -193,7 +192,6 @@ it('renders correctly', () => {
       </p>
       <p
         className="c1 c2"
-        color="white"
       >
         <a
           className="c5 c6"