@comicrelief/component-library 8.26.0 → 8.28.0

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

@@ -17,5 +17,182 @@ it('renders correctly', () => {
     value: "female",
     label: "Female"
   }))).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    Array [\n      .c2 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      background-color: #FFFFFF;\n      z-index: 1;\n      top: 0;\n      margin: 5px 10px;\n      width: 30px;\n      height: 30px;\n      opacity: 0;\n      left: 0;\n      right: 0;\n      -webkit-flex-shrink: 0;\n      -ms-flex-negative: 0;\n      flex-shrink: 0;\n    }\n\n    .c1 + span {\n      left: 2px;\n      border-radius: 30px;\n      background-clip: padding-box;\n      position: absolute;\n      top: 0px;\n      width: 30px;\n      height: 30px;\n      border: 1px solid #666;\n    }\n\n    .c1:checked + span {\n      background-color: #6F3AAB;\n      border: 1px solid #6F3AAB;\n    }\n\n    .c1:checked + span:before {\n      position: absolute;\n      content: '';\n      top: 8px;\n      left: 0;\n      right: 0;\n      background-color: #FFFFFF;\n      border-radius: 30px;\n      width: 12px;\n      height: 12px;\n      z-index: 1;\n      margin: 0 auto;\n      opacity: 1;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      position: relative;\n    }\n\n    <label\n        className=\"c0\"\n        htmlFor=\"male\"\n      >\n        <input\n          className=\"c1\"\n          id=\"male\"\n          name=\"gender\"\n          type=\"radio\"\n          value=\"male\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Male\n        </span>\n      </label>,\n      .c2 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      background-color: #FFFFFF;\n      z-index: 1;\n      top: 0;\n      margin: 5px 10px;\n      width: 30px;\n      height: 30px;\n      opacity: 0;\n      left: 0;\n      right: 0;\n      -webkit-flex-shrink: 0;\n      -ms-flex-negative: 0;\n      flex-shrink: 0;\n    }\n\n    .c1 + span {\n      left: 2px;\n      border-radius: 30px;\n      background-clip: padding-box;\n      position: absolute;\n      top: 0px;\n      width: 30px;\n      height: 30px;\n      border: 1px solid #666;\n    }\n\n    .c1:checked + span {\n      background-color: #6F3AAB;\n      border: 1px solid #6F3AAB;\n    }\n\n    .c1:checked + span:before {\n      position: absolute;\n      content: '';\n      top: 8px;\n      left: 0;\n      right: 0;\n      background-color: #FFFFFF;\n      border-radius: 30px;\n      width: 12px;\n      height: 12px;\n      z-index: 1;\n      margin: 0 auto;\n      opacity: 1;\n    }\n\n    .c0 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n      position: relative;\n    }\n\n    <label\n        className=\"c0\"\n        htmlFor=\"female\"\n      >\n        <input\n          className=\"c1\"\n          id=\"female\"\n          name=\"gender\"\n          type=\"radio\"\n          value=\"female\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Female\n        </span>\n      </label>,\n    ]\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    Array [
+      .c2 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      font-weight: bold;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c1 {
+      background-color: #FFFFFF;
+      z-index: 1;
+      top: 0;
+      margin: 5px 10px;
+      width: 30px;
+      height: 30px;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
+    }
+
+    .c1 + span {
+      left: 2px;
+      border-radius: 30px;
+      background-clip: padding-box;
+      position: absolute;
+      top: 0px;
+      width: 30px;
+      height: 30px;
+      border: 1px solid #666;
+    }
+
+    .c1:checked + span {
+      background-color: #6F3AAB;
+      border: 1px solid #6F3AAB;
+    }
+
+    .c1:checked + span:before {
+      position: absolute;
+      content: '';
+      top: 8px;
+      left: 0;
+      right: 0;
+      background-color: #FFFFFF;
+      border-radius: 30px;
+      width: 12px;
+      height: 12px;
+      z-index: 1;
+      margin: 0 auto;
+      opacity: 1;
+    }
+
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      position: relative;
+    }
+
+    <label
+        className="c0"
+        htmlFor="male"
+      >
+        <input
+          className="c1"
+          id="male"
+          name="gender"
+          type="radio"
+          value="male"
+        />
+        <span />
+        <span
+          className="c2"
+          color="inherit"
+          size="s"
+        >
+          Male
+        </span>
+      </label>,
+      .c2 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      font-weight: bold;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c1 {
+      background-color: #FFFFFF;
+      z-index: 1;
+      top: 0;
+      margin: 5px 10px;
+      width: 30px;
+      height: 30px;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
+    }
+
+    .c1 + span {
+      left: 2px;
+      border-radius: 30px;
+      background-clip: padding-box;
+      position: absolute;
+      top: 0px;
+      width: 30px;
+      height: 30px;
+      border: 1px solid #666;
+    }
+
+    .c1:checked + span {
+      background-color: #6F3AAB;
+      border: 1px solid #6F3AAB;
+    }
+
+    .c1:checked + span:before {
+      position: absolute;
+      content: '';
+      top: 8px;
+      left: 0;
+      right: 0;
+      background-color: #FFFFFF;
+      border-radius: 30px;
+      width: 12px;
+      height: 12px;
+      z-index: 1;
+      margin: 0 auto;
+      opacity: 1;
+    }
+
+    .c0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-align-items: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      position: relative;
+    }
+
+    <label
+        className="c0"
+        htmlFor="female"
+      >
+        <input
+          className="c1"
+          id="female"
+          name="gender"
+          type="radio"
+          value="female"
+        />
+        <span />
+        <span
+          className="c2"
+          color="inherit"
+          size="s"
+        >
+          Female
+        </span>
+      </label>,
+    ]
+  `);
 });

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

@@ -11,5 +11,18 @@ it('It sanitises markup and renders properly', () => {
     align: "right",
     markup: htmlContent
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      text-align: right;\n    }\n    \n    <div\n      className=\"c0\"\n      dangerouslySetInnerHTML={\n        Object {\n          \"__html\": \"<p>Here's some copy</p><span>More copy</span>\",\n        }\n      }\n    />\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c0 {
+      text-align: right;
+    }
+    
+    <div
+      className="c0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<p>Here's some copy</p><span>More copy</span>",
+        }
+      }
+    />
+  `);
 });

package/dist/components/Atoms/SocialIcons/Icon/Icon.js

@@ -72,11 +72,11 @@ const Icon = _ref7 => {
   } = _ref7;
   return /*#__PURE__*/_react.default.createElement(StyledLink, Object.assign({
     href: href,
-    target: "_".concat(target)
+    target: `_${target}`
   }, restProps, {
     title: title,
     rel: "noopener noreferrer",
-    "data-test": "".concat(isHeader ? 'header' : 'icon', "-").concat((0, _kebabCase2.default)(id)),
+    "data-test": `${isHeader ? 'header' : 'icon'}-${(0, _kebabCase2.default)(id)}`,
     isHeader: isHeader
   }), /*#__PURE__*/_react.default.createElement(StyledImage, {
     src: icon,

package/dist/components/Atoms/SocialIcons/Utils/Links.js

@@ -11,12 +11,12 @@ exports.default = void 0;
  */
 var _default = campaign => ({
   facebook: {
-    url: "https://www.facebook.com/".concat(campaign),
+    url: `https://www.facebook.com/${campaign}`,
     title: 'Check out our Facebook page',
     id: 'facebook'
   },
   twitter: {
-    url: "https://twitter.com/".concat(campaign),
+    url: `https://twitter.com/${campaign}`,
     title: 'Check out our Twitter account',
     id: 'twitter'
   },
@@ -26,7 +26,7 @@ var _default = campaign => ({
     id: 'youtube'
   },
   instagram: {
-    url: "https://www.instagram.com/".concat(campaign),
+    url: `https://www.instagram.com/${campaign}`,
     title: 'Check out our Instagram account',
     id: 'instagram'
   }

package/dist/components/Atoms/Text/Text.js

@@ -17,7 +17,7 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
   let {
     textAlign
   } = _ref;
-  return textAlign && "text-align: ".concat(textAlign);
+  return textAlign && `text-align: ${textAlign}`;
 }, _ref2 => {
   let {
     color,
@@ -45,12 +45,12 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
   let {
     weight
   } = _ref6;
-  return weight ? "font-weight: ".concat(weight) : null;
+  return weight ? `font-weight: ${weight}` : null;
 }, _ref7 => {
   let {
     height
   } = _ref7;
-  return height ? "line-height: ".concat(height) : null;
+  return height ? `line-height: ${height}` : null;
 }, _ref8 => {
   let {
     as

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

@@ -14,5 +14,94 @@ it('renders correctly', () => {
     errorMsg: "",
     id: "Please leave your comment here"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c0 {\n      width: 100%;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n    }\n\n    .c2 {\n      margin-bottom: 0.5rem;\n      font-weight: normal;\n    }\n\n    .c3 {\n      box-sizing: border-box;\n      width: 100%;\n      margin: 0;\n      padding: 1rem 1.5rem;\n      font-size: 1.25rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-radius: 0.5rem;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n      resize: vertical;\n    }\n\n    .c3:focus {\n      border: 1px solid #666;\n    }\n\n    .c3:focus::-webkit-input-placeholder {\n      visibility: hidden;\n    }\n\n    .c3:focus::-moz-placeholder {\n      visibility: hidden;\n    }\n\n    .c3:focus:-ms-input-placeholder {\n      visibility: hidden;\n    }\n\n    .c3:focus::placeholder {\n      visibility: hidden;\n    }\n\n    <label\n      className=\"c0\"\n      htmlFor=\"Please leave your comment here\"\n    >\n      <span\n        className=\"c1 c2\"\n        color=\"inherit\"\n        dangerouslySetInnerHTML={\n          Object {\n            \"__html\": \"Label\",\n          }\n        }\n        size=\"s\"\n      />\n      <textarea\n        aria-describedby=\"Please leave your comment here\"\n        className=\"c3\"\n        name=\"description\"\n        placeholder=\"This is text area\"\n        rows={5}\n      />\n      \n    </label>\n  ");
+  expect(tree).toMatchInlineSnapshot(`
+    .c1 {
+      font-size: 1rem;
+      line-height: 1rem;
+      text-transform: inherit;
+      line-height: normal;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+    }
+
+    .c0 {
+      width: 100%;
+      position: relative;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      color: #5C5C5E;
+    }
+
+    .c2 {
+      margin-bottom: 0.5rem;
+      font-weight: normal;
+    }
+
+    .c3 {
+      box-sizing: border-box;
+      width: 100%;
+      margin: 0;
+      padding: 1rem 1.5rem;
+      font-size: 1.25rem;
+      background-color: #F4F3F5;
+      border: 1px solid;
+      border-radius: 0.5rem;
+      border-color: #E1E2E3;
+      box-shadow: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      color: #000000;
+      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+      resize: vertical;
+    }
+
+    .c3:focus {
+      border: 1px solid #666;
+    }
+
+    .c3:focus::-webkit-input-placeholder {
+      visibility: hidden;
+    }
+
+    .c3:focus::-moz-placeholder {
+      visibility: hidden;
+    }
+
+    .c3:focus:-ms-input-placeholder {
+      visibility: hidden;
+    }
+
+    .c3:focus::placeholder {
+      visibility: hidden;
+    }
+
+    <label
+      className="c0"
+      htmlFor="Please leave your comment here"
+    >
+      <span
+        className="c1 c2"
+        color="inherit"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Label",
+          }
+        }
+        size="s"
+      />
+      <textarea
+        aria-describedby="Please leave your comment here"
+        className="c3"
+        name="description"
+        placeholder="This is text area"
+        rows={5}
+      />
+      
+    </label>
+  `);
 });

package/dist/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -101,7 +101,7 @@ const TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef((_ref, forw
     resetActiveOption: () => setActiveOption(-1)
   };
   return /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.Container, {
-    className: "TextInputWithDropdown ".concat(className).trim(),
+    className: `TextInputWithDropdown ${className}`.trim(),
     onKeyDown: navigateOptions,
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, inputProps, {
@@ -140,14 +140,14 @@ const Options = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     ref: ref,
     role: "listbox",
     onBlur: onBlur,
-    "aria-activedescendant": activeOption > -1 ? "option-".concat(activeOption) : undefined
+    "aria-activedescendant": activeOption > -1 ? `option-${activeOption}` : undefined
   }, dropdownInstruction && /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.DropdownItemSelectable, {
     id: "dropdown-instruction",
     role: "option",
     key: "dropdown-instruction",
     onClick: closeDropdown
   }, /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.TextItalic, null, dropdownInstruction)), options.map((option, index) => /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.DropdownItemSelectable, {
-    id: "option-".concat(index),
+    id: `option-${index}`,
     role: "option",
     key: option,
     onClick: () => onSelect(option, index),

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

@@ -106,7 +106,7 @@ const Title = (0, _styledComponents.default)(_Text.default).withConfig({
   let {
     time
   } = _ref14;
-  return time ? "0 0 ".concat((0, _spacing.default)('md')) : '0';
+  return time ? `0 0 ${(0, _spacing.default)('md')}` : '0';
 });
 const Date = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "ArticleTeaser__Date",