@comicrelief/component-library 8.42.0 → 8.44.0

package/dist/components/Atoms/Checkbox/Checkbox.test.js

@@ -18,12 +18,19 @@ it('renders correctly', () => {
   expect(tree).toMatchInlineSnapshot(`
     Array [
       .c2 {
-      font-size: 1rem;
-      line-height: 1rem;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
       text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
+    }
+
+    .c2 {
       font-weight: bold;
-      line-height: normal;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
     .c0 {
@@ -75,6 +82,20 @@ it('renders correctly', () => {
       border: 1px solid #E52630;
     }
 
+    @media (min-width:740px) {
+      .c2 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c2 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
     <label
         className="c0"
         htmlFor="sport1"
@@ -90,18 +111,24 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
-          size="s"
         >
           Tennis
         </span>
       </label>,
       .c2 {
-      font-size: 1rem;
-      line-height: 1rem;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
       text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
+    }
+
+    .c2 {
       font-weight: bold;
-      line-height: normal;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
     .c0 {
@@ -153,6 +180,20 @@ it('renders correctly', () => {
       border: 1px solid #E52630;
     }
 
+    @media (min-width:740px) {
+      .c2 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c2 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
     <label
         className="c0"
         htmlFor="sport2"
@@ -168,7 +209,6 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
-          size="s"
         >
           Handball
         </span>

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

@@ -2,12 +2,21 @@
 
 exports[`renders correctly 1`] = `
 .c0 {
-  color: #E52630;
-  font-size: 0.875rem;
-  line-height: 0.875rem;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
   text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.c0 {
+  font-size: 0.875rem;
   line-height: normal;
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  color: #E52630;
 }
 
 .c1 {
@@ -18,6 +27,20 @@ exports[`renders correctly 1`] = `
   margin-top: 0.6rem;
 }
 
+@media (min-width:740px) {
+  .c0 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
 <span
   className="c0"
   color="red"

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'), 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:inherit;: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.color('grey_for_forms'));
 });
 const ErrorIconWrapper = _styledComponents.default.div.withConfig({
   displayName: "Input__ErrorIconWrapper",
@@ -73,13 +73,8 @@ const Prefix = _styledComponents.default.div.withConfig({
 const DescriptionWrapper = _styledComponents.default.div.withConfig({
   displayName: "Input__DescriptionWrapper",
   componentId: "sc-bcqy1o-5"
-})(["margin-bottom:0.5rem;*{font-size:", ";}"], _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.fontSize('xs');
-});
-const Input = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+})(["margin-bottom:0.5rem;*{font-size:0.875rem;}"]);
+const Input = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   let {
     errorMsg = '',
     id,
@@ -95,7 +90,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     maxPxWidthLargeBreakpoint,
     description = null,
     ...rest
-  } = _ref8;
+  } = _ref7;
   return /*#__PURE__*/_react.default.createElement(_Label.default, Object.assign({
     className: className,
     htmlFor: id,

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

@@ -16,11 +16,15 @@ it('renders correctly', () => {
   })).toJSON();
   expect(tree).toMatchInlineSnapshot(`
     .c1 {
-      font-size: 1rem;
-      line-height: 1rem;
-      text-transform: inherit;
-      line-height: normal;
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
+      text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
     }
 
     .c0 {
@@ -38,7 +42,15 @@ it('renders correctly', () => {
 
     .c2 {
       margin-bottom: 0.5rem;
-      font-weight: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
+      text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
     }
 
     .c3 {
@@ -80,13 +92,41 @@ it('renders correctly', () => {
       border-radius: 0.5rem;
       font-size: inherit;
       z-index: 2;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-family: inherit;
     }
 
     .c5:focus {
       border: 1px solid #666;
     }
 
+    @media (min-width:740px) {
+      .c1 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c1 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c2 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c2 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
     @media (min-width:740px) {
 
     }
@@ -107,7 +147,6 @@ it('renders correctly', () => {
             "__html": "Label",
           }
         }
-        size="s"
       />
       <div
         className="c3"
@@ -144,11 +183,15 @@ it('renders with responsive max widths correctly', () => {
   })).toJSON();
   expect(tree).toMatchInlineSnapshot(`
     .c1 {
-      font-size: 1rem;
-      line-height: 1rem;
-      text-transform: inherit;
-      line-height: normal;
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
+      text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
     }
 
     .c0 {
@@ -166,7 +209,15 @@ it('renders with responsive max widths correctly', () => {
 
     .c2 {
       margin-bottom: 0.5rem;
-      font-weight: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
+      text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
     }
 
     .c3 {
@@ -208,13 +259,41 @@ it('renders with responsive max widths correctly', () => {
       border-radius: 0.5rem;
       font-size: inherit;
       z-index: 2;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-family: inherit;
     }
 
     .c5:focus {
       border: 1px solid #666;
     }
 
+    @media (min-width:740px) {
+      .c1 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c1 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c2 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c2 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
     @media (min-width:740px) {
       .c4 {
         max-width: 150px;
@@ -239,7 +318,6 @@ it('renders with responsive max widths correctly', () => {
             "__html": "Responsive Width Input",
           }
         }
-        size="s"
       />
       <div
         className="c3"

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

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -7,10 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Text = _interopRequireDefault(require("../Text/Text"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVisually"));
+var _fontHelper = _interopRequireDefault(require("../../../theme/crTheme/fontHelper"));
 const getLabelColor = _ref => {
   let {
     theme,
@@ -35,26 +37,31 @@ const LabelElement = _styledComponents.default.label.withConfig({
     top: 0;
     right: 0;
     content: 'Optional';
-    font-family: ${theme.fontFamilies(theme.font.regular)};
+    font-family: inherit;
     font-size: ${theme.fontSize('s')};
   }`;
 });
 const VisibleText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Label__VisibleText",
   componentId: "sc-2nrw50-1"
-})(["margin-bottom:", ";font-weight:normal;"], (0, _spacing.default)('sm'));
+})(["margin-bottom:", ";", ";"], (0, _spacing.default)('sm'), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return (0, _styledComponents.css)(["", ""], (0, _fontHelper.default)(theme, 'formFieldLabel'));
+});
 const HiddenText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Label__HiddenText",
   componentId: "sc-2nrw50-2"
 })(["", ""], _hideVisually.default);
 
 // eslint-disable-next-line react/prop-types
-const LabelText = _ref3 => {
+const LabelText = _ref4 => {
   let {
     label,
     hideLabel,
     ...rest
-  } = _ref3;
+  } = _ref4;
   const Component = hideLabel ? HiddenText : VisibleText;
   return /*#__PURE__*/_react.default.isValidElement(label) ? /*#__PURE__*/_react.default.createElement(Component, rest, label) : /*#__PURE__*/_react.default.createElement(Component, Object.assign({}, rest, {
     dangerouslySetInnerHTML: {
@@ -71,7 +78,7 @@ const LabelText = _ref3 => {
  * @returns {JSX.Element}
  * @constructor
  */
-const Label = _ref4 => {
+const Label = _ref5 => {
   let {
     children = null,
     label,
@@ -79,7 +86,7 @@ const Label = _ref4 => {
     optional = null,
     errorMsg = '',
     ...rest
-  } = _ref4;
+  } = _ref5;
   return /*#__PURE__*/_react.default.createElement(LabelElement, Object.assign({
     optional: optional,
     errorMsg: errorMsg

package/dist/components/Atoms/RadioButton/RadioButton.test.js

@@ -20,12 +20,19 @@ it('renders correctly', () => {
   expect(tree).toMatchInlineSnapshot(`
     Array [
       .c2 {
-      font-size: 1rem;
-      line-height: 1rem;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
       text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
+    }
+
+    .c2 {
       font-weight: bold;
-      line-height: normal;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
     .c1 {
@@ -86,6 +93,20 @@ it('renders correctly', () => {
       position: relative;
     }
 
+    @media (min-width:740px) {
+      .c2 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c2 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
     <label
         className="c0"
         htmlFor="male"
@@ -101,18 +122,24 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
-          size="s"
         >
           Male
         </span>
       </label>,
       .c2 {
-      font-size: 1rem;
-      line-height: 1rem;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      font-weight: 400;
       text-transform: inherit;
+      -webkit-letter-spacing: 0;
+      -moz-letter-spacing: 0;
+      -ms-letter-spacing: 0;
+      letter-spacing: 0;
+      font-size: 1rem;
+      line-height: 1.25rem;
+    }
+
+    .c2 {
       font-weight: bold;
-      line-height: normal;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
 
     .c1 {
@@ -173,6 +200,20 @@ it('renders correctly', () => {
       position: relative;
     }
 
+    @media (min-width:740px) {
+      .c2 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c2 {
+        font-size: 1.125rem;
+        line-height: 1.375rem;
+      }
+    }
+
     <label
         className="c0"
         htmlFor="female"
@@ -188,7 +229,6 @@ it('renders correctly', () => {
         <span
           className="c2"
           color="inherit"
-          size="s"
         >
           Female
         </span>

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

@@ -2,11 +2,15 @@
 
 exports[`renders correctly 1`] = `
 .c1 {
-  font-size: 1rem;
-  line-height: 1rem;
-  text-transform: inherit;
-  line-height: normal;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
 }
 
 .c0 {
@@ -24,7 +28,15 @@ exports[`renders correctly 1`] = `
 
 .c2 {
   margin-bottom: 0.5rem;
-  font-weight: normal;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
 }
 
 .c3 {
@@ -55,6 +67,34 @@ exports[`renders correctly 1`] = `
   border: 1px solid #666;
 }
 
+@media (min-width:740px) {
+  .c1 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c1 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width:740px) {
+  .c2 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:1024px) {
+  .c2 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
 @media (min-width:740px) {
   .c3 {
     max-width: 290px;
@@ -72,7 +112,6 @@ exports[`renders correctly 1`] = `
         "__html": "Label",
       }
     }
-    size="s"
   />
   <select
     aria-required={true}