@comicrelief/component-library 8.30.0 → 8.31.1

package/dist/components/Atoms/ErrorText/ErrorText.js

@@ -18,7 +18,8 @@ const ErrorText = _ref => {
     ...rest
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Text.default, Object.assign({}, rest, {
-    color: "red"
+    color: "red",
+    size: "error"
   }), /*#__PURE__*/_react.default.createElement(ErrorIcon, null, children));
 };
 var _default = exports.default = ErrorText;

package/dist/components/Atoms/ErrorText/ErrorText.md

@@ -1,5 +1,5 @@
 # ErrorText
 
 ```jsx
-<ErrorText>This is an error</ErrorText>
+<ErrorText size="error">This is an error</ErrorText>
 ```

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

@@ -3,6 +3,8 @@
 exports[`renders correctly 1`] = `
 .c0 {
   color: #E52630;
+  font-size: 0.875rem;
+  line-height: 0.875rem;
   text-transform: inherit;
   line-height: normal;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
@@ -19,7 +21,7 @@ exports[`renders correctly 1`] = `
 <span
   className="c0"
   color="red"
-  size="sm"
+  size="error"
 >
   <span
     className="c1"

package/dist/components/Atoms/Input/Input.js

@@ -50,7 +50,7 @@ const InputField = _styledComponents.default.input.withConfig({
     error,
     prefixLength
   } = _ref4;
-  return (0, _styledComponents.css)(["position:relative;box-sizing:border-box;width:100%;height:48px;padding:1rem 2.4rem 1rem 1.5rem;", " background-color:", ";border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:0.5rem;font-size:inherit;z-index:2;font-family:", ";:focus{border:1px solid ", ";}"], prefixLength > 0 ? `padding-left: ${getPrefixWidth(prefixLength)};` : '', theme.color('grey_light'), error ? theme.color('red') : theme.color('grey_medium'), theme.color('black'), theme.fontFamilies(theme.font.regular), theme.color('grey_for_forms'));
+  return (0, _styledComponents.css)(["position:relative;box-sizing:border-box;width:100%;height:48px;padding:1rem 2.4rem 1rem 1.5rem;", " background-color:", ";border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:0.5rem;font-size:inherit;z-index:2;font-family:", ";:focus{border:1px solid ", ";}"], prefixLength > 0 ? `padding-left: ${getPrefixWidth(prefixLength)};` : '', theme.color('grey_light'), error ? theme.color('red') : theme.color('grey'), theme.color('black'), theme.fontFamilies(theme.font.regular), theme.color('grey_for_forms'));
 });
 const ErrorIconWrapper = _styledComponents.default.div.withConfig({
   displayName: "Input__ErrorIconWrapper",
@@ -112,7 +112,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
     prefixLength: prefix.length,
     required: optional === false
   }, rest)), errorMsg && /*#__PURE__*/_react.default.createElement(ErrorIconWrapper, null))), errorMsg && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
-    size: "sm",
+    size: "error",
     weight: "bold",
     "data-test": "error-message"
   }, errorMsg));

package/dist/components/Atoms/Input/input.test.js

@@ -71,7 +71,7 @@ it('renders correctly', () => {
       padding: 1rem 2.4rem 1rem 1.5rem;
       background-color: #F4F3F5;
       border: 1px solid;
-      border-color: #E1E2E3;
+      border-color: #969598;
       box-shadow: none;
       -webkit-appearance: none;
       -moz-appearance: none;
@@ -199,7 +199,7 @@ it('renders with responsive max widths correctly', () => {
       padding: 1rem 2.4rem 1rem 1.5rem;
       background-color: #F4F3F5;
       border: 1px solid;
-      border-color: #E1E2E3;
+      border-color: #969598;
       box-shadow: none;
       -webkit-appearance: none;
       -moz-appearance: none;

package/dist/components/Atoms/Select/Select.js

@@ -96,7 +96,7 @@ const Select = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     key: option.value,
     value: option.value
   }, option.displayValue))), errorMsg && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
-    size: "sm",
+    size: "error",
     weight: "bold",
     "data-test": "error-message"
   }, errorMsg));

package/dist/components/Atoms/TextArea/TextArea.js

@@ -46,7 +46,7 @@ const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     "aria-describedby": id,
     ref: ref
   })), errorMsg && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
-    size: "sm",
+    size: "error",
     weight: "bold",
     "data-test": "error-message"
   }, errorMsg));

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

@@ -57,7 +57,7 @@ exports[`renders correctly with no value and no options 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -187,7 +187,7 @@ exports[`renders correctly with value and no options 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -317,7 +317,7 @@ exports[`renders correctly with value and options 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;

package/dist/components/Molecules/InfoBanner/InfoBanner.js

@@ -50,21 +50,21 @@ const InfoBanner = _ref3 => {
     uppercase: true
   }, "Project Name"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    size: "sm"
+    size: "s"
   }, title)), /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3",
     size: "md",
     uppercase: true
   }, "End Date"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    size: "sm"
+    size: "s"
   }, endDate)), /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3",
     size: "md",
     uppercase: true
   }, "Funding theme"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    size: "sm"
+    size: "s"
   }, /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: themeLink,
     target: "self",
@@ -75,7 +75,7 @@ const InfoBanner = _ref3 => {
     uppercase: true
   }, "Amount Awarded"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    size: "sm"
+    size: "s"
   }, /*#__PURE__*/_react.default.createElement(_reactCurrencyFormat.default, {
     value: amount,
     displayType: "text",
@@ -88,14 +88,14 @@ const InfoBanner = _ref3 => {
     uppercase: true
   }, "Start Date"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    size: "sm"
+    size: "s"
   }, startDate)), /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h3",
     size: "md",
     uppercase: true
   }, "Beneficiary Country"), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    size: "sm"
+    size: "s"
   }, country)));
 };
 var _default = exports.default = InfoBanner;

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

@@ -7,6 +7,8 @@ exports[`renders correctly 1`] = `
 }
 
 .c3 {
+  font-size: 1rem;
+  line-height: 1rem;
   text-transform: inherit;
   line-height: normal;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
@@ -88,7 +90,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c3"
       color="inherit"
-      size="sm"
+      size="s"
     >
       Hello There
     </p>
@@ -106,7 +108,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c3"
       color="inherit"
-      size="sm"
+      size="s"
     >
       1st June 2020
     </p>
@@ -124,7 +126,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c3"
       color="inherit"
-      size="sm"
+      size="s"
     >
       <a
         className="c4"
@@ -150,7 +152,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c3"
       color="inherit"
-      size="sm"
+      size="s"
     >
       £2,000,000
     </p>
@@ -168,7 +170,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c3"
       color="inherit"
-      size="sm"
+      size="s"
     >
       1st June 2010
     </p>
@@ -186,7 +188,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c3"
       color="inherit"
-      size="sm"
+      size="s"
     >
       Uk
     </p>

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

@@ -57,7 +57,7 @@ exports[`renders correctly 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;

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

@@ -80,7 +80,7 @@ it('renders correctly', () => {
       padding: 1rem 2.4rem 1rem 1.5rem;
       background-color: #F4F3F5;
       border: 1px solid;
-      border-color: #E1E2E3;
+      border-color: #969598;
       box-shadow: none;
       -webkit-appearance: none;
       -moz-appearance: none;

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

@@ -57,7 +57,7 @@ exports[`renders correctly 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;

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

@@ -89,7 +89,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -788,7 +788,7 @@ exports[`Monthly donation renders correctly 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1454,7 +1454,7 @@ exports[`Single donation renders correctly 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2206,7 +2206,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;

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

@@ -95,7 +95,9 @@ const EmailSignUp = _ref => {
     loading: isSubmitting,
     loadingText: "Submitting...",
     "data-test": "subscribe-button"
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, normalisedButtonText)))), 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, {
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, normalisedButtonText)))), isSubmitted && !isSubmitSuccessful && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, errors.formError !== undefined && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
+    size: "error"
+  }, errors.formError.message)), /*#__PURE__*/_react.default.createElement(_EmailSignUp.PrivacyCopyWrapper, {
     textColour: textColour
   }, /*#__PURE__*/_react.default.createElement(_Text.default, null, privacyCopy)));
 };

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

@@ -109,7 +109,7 @@ exports[`renders correctly 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;

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

@@ -32,7 +32,7 @@ const Moneybuys = _ref => {
       "data-testid": "moneybuy-amount"
     }, thisAmount), /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.MoneybuyDescription, {
       tag: "p",
-      size: "sm",
+      size: "s",
       "data-testid": "moneybuy-description"
     }, item.description)), index < items.length - 1 && /*#__PURE__*/_react.default.createElement(_ImpactMoneybuys.OrLabel, {
       tag: "span"

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

@@ -117,7 +117,7 @@ it('renders correctly', () => {
       padding: 1rem 2.4rem 1rem 1.5rem;
       background-color: #F4F3F5;
       border: 1px solid;
-      border-color: #E1E2E3;
+      border-color: #969598;
       box-shadow: none;
       -webkit-appearance: none;
       -moz-appearance: none;

package/dist/theme/crTheme/fontSizes.js

@@ -13,7 +13,10 @@ const fontSizes = {
   xl: '2rem',
   xxl: '3rem',
   big: '4rem',
-  super: '5rem'
+  super: '5rem',
+  // Temporary edgecase fix to at least keep all sizing centralise
+  // before website project design review overhaul
+  error: '0.875rem'
 };
 var _default = size => {
   if (size) {

package/package.json

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

package/src/components/Atoms/ErrorText/ErrorText.js

@@ -12,7 +12,7 @@ const ErrorIcon = styled.span`
 `;
 
 const ErrorText = ({ children, ...rest }) => (
-  <Text {...rest} color="red">
+  <Text {...rest} color="red" size="error">
     <ErrorIcon>{children}</ErrorIcon>
   </Text>
 );

package/src/components/Atoms/ErrorText/ErrorText.md

@@ -1,5 +1,5 @@
 # ErrorText
 
 ```jsx
-<ErrorText>This is an error</ErrorText>
+<ErrorText size="error">This is an error</ErrorText>
 ```

package/src/components/Atoms/ErrorText/__snapshots__/ErrorText.test.js.snap

@@ -3,6 +3,8 @@
 exports[`renders correctly 1`] = `
 .c0 {
   color: #E52630;
+  font-size: 0.875rem;
+  line-height: 0.875rem;
   text-transform: inherit;
   line-height: normal;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
@@ -19,7 +21,7 @@ exports[`renders correctly 1`] = `
 <span
   className="c0"
   color="red"
-  size="sm"
+  size="error"
 >
   <span
     className="c1"

package/src/components/Atoms/Input/Input.js

@@ -42,7 +42,7 @@ const InputField = styled.input`${({ theme, error, prefixLength }) => css`
   ${prefixLength > 0 ? `padding-left: ${getPrefixWidth(prefixLength)};` : ''}
   background-color: ${theme.color('grey_light')};
   border: 1px solid;
-  border-color: ${error ? theme.color('red') : theme.color('grey_medium')};
+  border-color: ${error ? theme.color('red') : theme.color('grey')};
   box-shadow: none;
   appearance: none;
   color: ${theme.color('black')};
@@ -135,7 +135,7 @@ const Input = React.forwardRef(
       {errorMsg
         && (
         <ErrorText
-          size="sm"
+          size="error"
           weight="bold"
           data-test="error-message"
         >

package/src/components/Atoms/Input/input.test.js

@@ -72,7 +72,7 @@ it('renders correctly', () => {
       padding: 1rem 2.4rem 1rem 1.5rem;
       background-color: #F4F3F5;
       border: 1px solid;
-      border-color: #E1E2E3;
+      border-color: #969598;
       box-shadow: none;
       -webkit-appearance: none;
       -moz-appearance: none;
@@ -204,7 +204,7 @@ it('renders with responsive max widths correctly', () => {
       padding: 1rem 2.4rem 1rem 1.5rem;
       background-color: #F4F3F5;
       border: 1px solid;
-      border-color: #E1E2E3;
+      border-color: #969598;
       box-shadow: none;
       -webkit-appearance: none;
       -moz-appearance: none;

package/src/components/Atoms/Select/Select.js

@@ -88,7 +88,7 @@ const Select = React.forwardRef(
             </option>
           ))}
         </StyledSelect>
-        {errorMsg && <ErrorText size="sm" weight="bold" data-test="error-message">{errorMsg}</ErrorText>}
+        {errorMsg && <ErrorText size="error" weight="bold" data-test="error-message">{errorMsg}</ErrorText>}
       </Label>
     );
   }

package/src/components/Atoms/TextArea/TextArea.js

@@ -49,7 +49,7 @@ const TextArea = React.forwardRef(({
       aria-describedby={id}
       ref={ref}
     />
-    {errorMsg && <ErrorText size="sm" weight="bold" data-test="error-message">{errorMsg}</ErrorText>}
+    {errorMsg && <ErrorText size="error" weight="bold" data-test="error-message">{errorMsg}</ErrorText>}
   </Label>
 ));
 

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

@@ -57,7 +57,7 @@ exports[`renders correctly with no value and no options 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -187,7 +187,7 @@ exports[`renders correctly with value and no options 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -317,7 +317,7 @@ exports[`renders correctly with value and options 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;

package/src/components/Molecules/InfoBanner/InfoBanner.js

@@ -45,7 +45,7 @@ const InfoBanner = ({
       <Text tag="h3" size="md" uppercase>
         Project Name
       </Text>
-      <Text tag="p" size="sm">
+      <Text tag="p" size="s">
         {title}
       </Text>
     </Info>
@@ -53,7 +53,7 @@ const InfoBanner = ({
       <Text tag="h3" size="md" uppercase>
         End Date
       </Text>
-      <Text tag="p" size="sm">
+      <Text tag="p" size="s">
         {endDate}
       </Text>
     </Info>
@@ -61,7 +61,7 @@ const InfoBanner = ({
       <Text tag="h3" size="md" uppercase>
         Funding theme
       </Text>
-      <Text tag="p" size="sm">
+      <Text tag="p" size="s">
         <Link href={themeLink} target="self" type="standard">
           {theme}
         </Link>
@@ -71,7 +71,7 @@ const InfoBanner = ({
       <Text tag="h3" size="md" uppercase>
         Amount Awarded
       </Text>
-      <Text tag="p" size="sm">
+      <Text tag="p" size="s">
         <CurrencyFormat
           value={amount}
           displayType="text"
@@ -85,7 +85,7 @@ const InfoBanner = ({
       <Text tag="h3" size="md" uppercase>
         Start Date
       </Text>
-      <Text tag="p" size="sm">
+      <Text tag="p" size="s">
         {startDate}
       </Text>
     </Info>
@@ -93,7 +93,7 @@ const InfoBanner = ({
       <Text tag="h3" size="md" uppercase>
         Beneficiary Country
       </Text>
-      <Text tag="p" size="sm">
+      <Text tag="p" size="s">
         {country}
       </Text>
     </Info>

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

@@ -7,6 +7,8 @@ exports[`renders correctly 1`] = `
 }
 
 .c3 {
+  font-size: 1rem;
+  line-height: 1rem;
   text-transform: inherit;
   line-height: normal;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
@@ -88,7 +90,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c3"
       color="inherit"
-      size="sm"
+      size="s"
     >
       Hello There
     </p>
@@ -106,7 +108,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c3"
       color="inherit"
-      size="sm"
+      size="s"
     >
       1st June 2020
     </p>
@@ -124,7 +126,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c3"
       color="inherit"
-      size="sm"
+      size="s"
     >
       <a
         className="c4"
@@ -150,7 +152,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c3"
       color="inherit"
-      size="sm"
+      size="s"
     >
       £2,000,000
     </p>
@@ -168,7 +170,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c3"
       color="inherit"
-      size="sm"
+      size="s"
     >
       1st June 2010
     </p>
@@ -186,7 +188,7 @@ exports[`renders correctly 1`] = `
     <p
       className="c3"
       color="inherit"
-      size="sm"
+      size="s"
     >
       Uk
     </p>

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

@@ -57,7 +57,7 @@ exports[`renders correctly 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;

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

@@ -81,7 +81,7 @@ it('renders correctly', () => {
       padding: 1rem 2.4rem 1rem 1.5rem;
       background-color: #F4F3F5;
       border: 1px solid;
-      border-color: #E1E2E3;
+      border-color: #969598;
       box-shadow: none;
       -webkit-appearance: none;
       -moz-appearance: none;

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

@@ -57,7 +57,7 @@ exports[`renders correctly 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;

package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -89,7 +89,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -788,7 +788,7 @@ exports[`Monthly donation renders correctly 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1454,7 +1454,7 @@ exports[`Single donation renders correctly 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2206,7 +2206,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;

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

@@ -116,7 +116,7 @@ const EmailSignUp = ({
           {/* 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>
+            <ErrorText size="error">{errors.formError.message}</ErrorText>
           )}
         </>
       )}

package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -109,7 +109,7 @@ exports[`renders correctly 1`] = `
   padding: 1rem 2.4rem 1rem 1.5rem;
   background-color: #F4F3F5;
   border: 1px solid;
-  border-color: #E1E2E3;
+  border-color: #969598;
   box-shadow: none;
   -webkit-appearance: none;
   -moz-appearance: none;

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

@@ -16,7 +16,7 @@ const Moneybuys = ({ items, currentAmount, opacityAnimation }) => (
           <Moneybuy isInactive={isInactive} data-testid={`impact-slider--moneybuy-${index + 1}`}>
             <MoneybuyImage imageURL={item.imageURL} />
             <MoneybuyAmount tag="p" family="Anton" uppercase weight="normal" size="xl" data-testid="moneybuy-amount">{thisAmount}</MoneybuyAmount>
-            <MoneybuyDescription tag="p" size="sm" data-testid="moneybuy-description">{item.description}</MoneybuyDescription>
+            <MoneybuyDescription tag="p" size="s" data-testid="moneybuy-description">{item.description}</MoneybuyDescription>
           </Moneybuy>
           { index < (items.length - 1) && (
             <OrLabel tag="span">Or</OrLabel>

package/src/components/Organisms/Membership/Membership.test.js

@@ -119,7 +119,7 @@ it('renders correctly', () => {
       padding: 1rem 2.4rem 1rem 1.5rem;
       background-color: #F4F3F5;
       border: 1px solid;
-      border-color: #E1E2E3;
+      border-color: #969598;
       box-shadow: none;
       -webkit-appearance: none;
       -moz-appearance: none;

package/src/theme/crTheme/fontSizes.js

@@ -7,7 +7,10 @@ const fontSizes = {
   xl: '2rem',
   xxl: '3rem',
   big: '4rem',
-  super: '5rem'
+  super: '5rem',
+  // Temporary edgecase fix to at least keep all sizing centralise
+  // before website project design review overhaul
+  error: '0.875rem'
 };
 
 export default size => {