@comicrelief/component-library 8.29.0 → 8.31.0

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

@@ -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.md

@@ -119,3 +119,15 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
     maxPxWidthLargeBreakpoint={250}
   />
 ```
+
+```js
+  <h4>Input with dark label</h4>
+  <Input
+    name="dark-label"
+    placeholder="£0.00"
+    type="text"
+    label="The label text can be made black rather than the default grey"
+    id="input-example-8"
+    labelProps={{ darkLabel: true }}
+  />
+```

package/dist/components/Atoms/Label/Label.js

@@ -11,16 +11,24 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Text = _interopRequireDefault(require("../Text/Text"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVisually"));
-const LabelElement = _styledComponents.default.label.withConfig({
-  displayName: "Label__LabelElement",
-  componentId: "sc-2nrw50-0"
-})(["width:100%;position:relative;display:flex;flex-direction:column;color:", ";", ""], _ref => {
+const getLabelColor = _ref => {
   let {
     theme,
-    errorMsg
+    errorMsg,
+    darkLabel
   } = _ref;
-  return errorMsg ? theme.color('red') : theme.color('grey_label');
-}, _ref2 => {
+  if (errorMsg) {
+    return theme.color('red');
+  }
+  if (darkLabel) {
+    return theme.color('black');
+  }
+  return theme.color('grey_label');
+};
+const LabelElement = _styledComponents.default.label.withConfig({
+  displayName: "Label__LabelElement",
+  componentId: "sc-2nrw50-0"
+})(["width:100%;position:relative;display:flex;flex-direction:column;color:", ";", ""], getLabelColor, _ref2 => {
   let {
     optional,
     theme
@@ -63,6 +71,7 @@ const LabelText = _ref3 => {
  * @param children
  * @param label
  * @param hideLabel - Visually hide the label text (without removing it from the document)
+ * @param darkLabel - Make the label text black rather than the default grey
  * @param rest
  * @returns {JSX.Element}
  * @constructor
@@ -72,13 +81,15 @@ const Label = _ref4 => {
     children = null,
     label,
     hideLabel = false,
+    darkLabel = false,
     optional = null,
     errorMsg = '',
     ...rest
   } = _ref4;
   return /*#__PURE__*/_react.default.createElement(LabelElement, Object.assign({
     optional: optional,
-    errorMsg: errorMsg
+    errorMsg: errorMsg,
+    darkLabel: darkLabel
   }, rest), /*#__PURE__*/_react.default.createElement(LabelText, {
     label: label,
     hideLabel: hideLabel
@@ -86,6 +97,7 @@ const Label = _ref4 => {
 };
 LabelElement.propTypes = {
   optional: _propTypes.default.bool,
-  errorMsg: _propTypes.default.string
+  errorMsg: _propTypes.default.string,
+  darkLabel: _propTypes.default.bool
 };
 var _default = exports.default = Label;

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/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/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/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/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.29.0",
+  "version": "8.31.0",
   "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

@@ -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.md

@@ -119,3 +119,15 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
     maxPxWidthLargeBreakpoint={250}
   />
 ```
+
+```js
+  <h4>Input with dark label</h4>
+  <Input
+    name="dark-label"
+    placeholder="£0.00"
+    type="text"
+    label="The label text can be made black rather than the default grey"
+    id="input-example-8"
+    labelProps={{ darkLabel: true }}
+  />
+```

package/src/components/Atoms/Label/Label.js

@@ -6,12 +6,22 @@ import Text from '../Text/Text';
 import spacing from '../../../theme/shared/spacing';
 import hideVisually from '../../../theme/shared/hideVisually';
 
+const getLabelColor = ({ theme, errorMsg, darkLabel }) => {
+  if (errorMsg) {
+    return theme.color('red');
+  }
+  if (darkLabel) {
+    return theme.color('black');
+  }
+  return theme.color('grey_label');
+};
+
 const LabelElement = styled.label`
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
-  color: ${({ theme, errorMsg }) => (errorMsg ? theme.color('red') : theme.color('grey_label'))};
+  color: ${getLabelColor};
 
   ${({ optional, theme }) => optional === true && `
   :after {
@@ -45,6 +55,7 @@ const LabelText = ({
  * @param children
  * @param label
  * @param hideLabel - Visually hide the label text (without removing it from the document)
+ * @param darkLabel - Make the label text black rather than the default grey
  * @param rest
  * @returns {JSX.Element}
  * @constructor
@@ -53,6 +64,7 @@ const Label = ({
   children = null,
   label,
   hideLabel = false,
+  darkLabel = false,
   optional = null,
   errorMsg = '',
   ...rest
@@ -60,6 +72,7 @@ const Label = ({
   <LabelElement
     optional={optional}
     errorMsg={errorMsg}
+    darkLabel={darkLabel}
     {...rest}
   >
     <LabelText
@@ -78,12 +91,14 @@ Label.propTypes = {
   hideLabel: PropTypes.bool,
   children: PropTypes.node,
   optional: PropTypes.bool,
-  errorMsg: PropTypes.string
+  errorMsg: PropTypes.string,
+  darkLabel: PropTypes.bool
 };
 
 LabelElement.propTypes = {
   optional: PropTypes.bool,
-  errorMsg: PropTypes.string
+  errorMsg: PropTypes.string,
+  darkLabel: PropTypes.bool
 };
 
 LabelText.propTypes = {

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/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/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/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/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 => {