@comicrelief/component-library 6.0.0 → 6.1.2

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

@@ -26,7 +26,7 @@ var StyledCheckboxInput = _styledComponents.default.input.attrs({
 }).withConfig({
   displayName: "Checkbox__StyledCheckboxInput",
   componentId: "sc-ngak0-0"
-})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:24px;height:24px;margin:0;border:1px solid ", ";+ span{margin-right:12px;width:24px;height:24px;border-radius:4px;background-color:", ";border:1px solid ", ";float:left;}:checked + span{background:url(", ") no-repeat center;background-color:", ";border-color:", ";background-size:contain;}:focus + span{border-color:", ";border-width:1px;}"], function (_ref) {
+})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:24px;height:24px;margin:0;border:1px solid ", ";+ span{margin-right:12px;width:24px;height:24px;border-radius:4px;background-color:", ";border:1px solid ", ";float:left;flex-shrink:0;}:checked + span{background:url(", ") no-repeat center;background-color:", ";border-color:", ";background-size:contain;}:focus + span{border-color:", ";border-width:1px;}"], function (_ref) {
   var theme = _ref.theme;
   return theme.fontSize('sm');
 }, function (_ref2) {

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

@@ -20,5 +20,5 @@ it('renders correctly', function () {
     value: "Handball",
     label: "Handball"
   }))).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      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 24px;\n      height: 24px;\n      margin: 0;\n      border: 1px solid #969598;\n    }\n\n    .c1 + span {\n      margin-right: 12px;\n      width: 24px;\n      height: 24px;\n      border-radius: 4px;\n      background-color: #FFFFFF;\n      border: 1px solid #969598;\n      float: left;\n    }\n\n    .c1:checked + span {\n      background: url(mock.asset) no-repeat center;\n      background-color: #E52630;\n      border-color: #E52630;\n      background-size: contain;\n    }\n\n    .c1:focus + span {\n      border-color: #E52630;\n      border-width: 1px;\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      margin-bottom: 8px;\n    }\n\n    <label\n        className=\"c0\"\n      >\n        <input\n          className=\"c1\"\n          name=\"sport\"\n          type=\"checkbox\"\n          value=\"Tenis\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Tenis\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      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 24px;\n      height: 24px;\n      margin: 0;\n      border: 1px solid #969598;\n    }\n\n    .c1 + span {\n      margin-right: 12px;\n      width: 24px;\n      height: 24px;\n      border-radius: 4px;\n      background-color: #FFFFFF;\n      border: 1px solid #969598;\n      float: left;\n    }\n\n    .c1:checked + span {\n      background: url(mock.asset) no-repeat center;\n      background-color: #E52630;\n      border-color: #E52630;\n      background-size: contain;\n    }\n\n    .c1:focus + span {\n      border-color: #E52630;\n      border-width: 1px;\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      margin-bottom: 8px;\n    }\n\n    <label\n        className=\"c0\"\n      >\n        <input\n          className=\"c1\"\n          name=\"sport\"\n          type=\"checkbox\"\n          value=\"Handball\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Handball\n        </span>\n      </label>,\n    ]\n  ");
+  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      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 24px;\n      height: 24px;\n      margin: 0;\n      border: 1px solid #969598;\n    }\n\n    .c1 + span {\n      margin-right: 12px;\n      width: 24px;\n      height: 24px;\n      border-radius: 4px;\n      background-color: #FFFFFF;\n      border: 1px solid #969598;\n      float: left;\n      -webkit-flex-shrink: 0;\n      -ms-flex-negative: 0;\n      flex-shrink: 0;\n    }\n\n    .c1:checked + span {\n      background: url(mock.asset) no-repeat center;\n      background-color: #E52630;\n      border-color: #E52630;\n      background-size: contain;\n    }\n\n    .c1:focus + span {\n      border-color: #E52630;\n      border-width: 1px;\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      margin-bottom: 8px;\n    }\n\n    <label\n        className=\"c0\"\n      >\n        <input\n          className=\"c1\"\n          name=\"sport\"\n          type=\"checkbox\"\n          value=\"Tenis\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Tenis\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      display: block;\n      box-sizing: border-box;\n      opacity: 0;\n      position: absolute;\n      left: 0px;\n      width: 24px;\n      height: 24px;\n      margin: 0;\n      border: 1px solid #969598;\n    }\n\n    .c1 + span {\n      margin-right: 12px;\n      width: 24px;\n      height: 24px;\n      border-radius: 4px;\n      background-color: #FFFFFF;\n      border: 1px solid #969598;\n      float: left;\n      -webkit-flex-shrink: 0;\n      -ms-flex-negative: 0;\n      flex-shrink: 0;\n    }\n\n    .c1:checked + span {\n      background: url(mock.asset) no-repeat center;\n      background-color: #E52630;\n      border-color: #E52630;\n      background-size: contain;\n    }\n\n    .c1:focus + span {\n      border-color: #E52630;\n      border-width: 1px;\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      margin-bottom: 8px;\n    }\n\n    <label\n        className=\"c0\"\n      >\n        <input\n          className=\"c1\"\n          name=\"sport\"\n          type=\"checkbox\"\n          value=\"Handball\"\n        />\n        <span />\n        <span\n          className=\"c2\"\n          color=\"inherit\"\n          size=\"s\"\n        >\n          Handball\n        </span>\n      </label>,\n    ]\n  ");
 });

package/dist/components/Atoms/Logo/Logo.js

@@ -21,8 +21,6 @@ var _srLogo = _interopRequireDefault(require("./assets/sr-logo.svg"));
 
 var _srGameonLogo = _interopRequireDefault(require("./assets/sr-gameon-logo.svg"));
 
-var _bigNightLogo = _interopRequireDefault(require("./assets/big-night-logo.png"));
-
 var Image = _styledComponents.default.img.withConfig({
   displayName: "Logo__Image",
   componentId: "sc-18yiye8-0"
@@ -54,9 +52,6 @@ var themeSwitcher = function themeSwitcher(theme) {
     case 'Sport Relief Gameon':
       return _srGameonLogo.default;
 
-    case 'Big Night In':
-      return _bigNightLogo.default;
-
     default:
       return _crLogo.default;
   }

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

@@ -23,7 +23,7 @@ var _dropDownDarkPurple = _interopRequireDefault(require("./assets/drop-down-dar
 
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 
-var _excluded = ["errorMsg", "description", "label", "options", "hideLabel", "defaultValue", "onChange", "greyDescription", "className"];
+var _excluded = ["errorMsg", "description", "label", "options", "hideLabel", "defaultValue", "onChange", "greyDescription", "className", "optional"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -68,6 +68,7 @@ var Select = /*#__PURE__*/_react.default.forwardRef(function (_ref8, ref) {
       _onChange = _ref8.onChange,
       greyDescription = _ref8.greyDescription,
       className = _ref8.className,
+      optional = _ref8.optional,
       rest = (0, _objectWithoutProperties2.default)(_ref8, _excluded);
 
   var _useState = (0, _react.useState)(''),
@@ -79,7 +80,8 @@ var Select = /*#__PURE__*/_react.default.forwardRef(function (_ref8, ref) {
     label: label,
     hideLabel: hideLabel,
     errorMsg: errorMsg,
-    className: className
+    className: className,
+    optional: optional
   }, /*#__PURE__*/_react.default.createElement(StyledSelect, Object.assign({
     onChange: function onChange(e) {
       setValue(e.currentTarget.value);
@@ -91,6 +93,7 @@ var Select = /*#__PURE__*/_react.default.forwardRef(function (_ref8, ref) {
   }, rest, {
     error: errorMsg,
     defaultValue: defaultValue,
+    required: optional === false,
     hasValue: !!value,
     greyDescription: greyDescription,
     ref: ref
@@ -117,7 +120,8 @@ Select.defaultProps = {
   /** If true, the 'description' option, which is initially selected but disabled, will be grey
    *   - like a text input's placeholder */
   greyDescription: false,
-  className: ''
+  className: '',
+  optional: false
 };
 var _default = Select;
 exports.default = _default;

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

@@ -78,6 +78,7 @@ exports[`renders correctly 1`] = `
     className="c3"
     defaultValue=""
     onChange={[Function]}
+    required={true}
   >
     <option
       disabled={true}

package/dist/components/Molecules/Logos/Logos.js

@@ -33,26 +33,6 @@ var Logos = function Logos(_ref) {
     })));
   }
 
-  if (campaign === 'Big Night In') {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", {
-      href: "/",
-      title: "Go to Comic Relief homepage"
-    }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
-      rotate: true,
-      sizeSm: "50px",
-      sizeMd: "60px",
-      campaign: "Comic Relief"
-    })), /*#__PURE__*/_react.default.createElement("a", {
-      href: "/big-night-in",
-      title: "Big night in homepage"
-    }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
-      rotate: false,
-      sizeSm: "100px",
-      sizeMd: "200px",
-      campaign: "Big Night In"
-    })));
-  }
-
   if (campaign === 'Sport Relief') {
     return /*#__PURE__*/_react.default.createElement("a", {
       href: "/sportrelief",
@@ -67,7 +47,7 @@ var Logos = function Logos(_ref) {
     href: "/",
     title: "Go to Comic Relief homepage"
   }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
-    rotate: true,
+    rotate: false,
     campaign: "Comic Relief"
   }));
 };

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

@@ -231,6 +231,7 @@ exports[`renders ESU School correctly 1`] = `
         defaultValue=""
         onChange={[Function]}
         placeholder="Please choose an option"
+        required={true}
         value=""
       >
         <option

package/package.json

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

package/src/components/Atoms/Checkbox/Checkbox.js

@@ -24,6 +24,7 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
     background-color: ${({ theme }) => theme.color('white')};
     border: 1px solid ${({ theme }) => theme.color('grey')};
     float: left;
+    flex-shrink: 0;
   }
   :checked + span {
     background: url(${checkBoxIcon}) no-repeat center;

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

@@ -42,6 +42,9 @@ it('renders correctly', () => {
       background-color: #FFFFFF;
       border: 1px solid #969598;
       float: left;
+      -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
     }
 
     .c1:checked + span {
@@ -115,6 +118,9 @@ it('renders correctly', () => {
       background-color: #FFFFFF;
       border: 1px solid #969598;
       float: left;
+      -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
     }
 
     .c1:checked + span {

package/src/components/Atoms/Logo/Logo.js

@@ -7,7 +7,6 @@ import spacing from '../../../theme/shared/spacing';
 import crLogo from './assets/cr-logo.svg';
 import srLogo from './assets/sr-logo.svg';
 import srLogoGameOn from './assets/sr-gameon-logo.svg';
-import bigNiht from './assets/big-night-logo.png';
 
 const Image = styled.img`
   object-fit: cover;
@@ -37,8 +36,6 @@ const themeSwitcher = theme => {
       return srLogo;
     case 'Sport Relief Gameon':
       return srLogoGameOn;
-    case 'Big Night In':
-      return bigNiht;
     default:
       return crLogo;
   }

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

@@ -49,6 +49,7 @@ const Select = React.forwardRef(
       onChange,
       greyDescription,
       className,
+      optional,
       ...rest
     },
     ref
@@ -56,7 +57,13 @@ const Select = React.forwardRef(
     const [value, setValue] = useState('');
 
     return (
-      <Label label={label} hideLabel={hideLabel} errorMsg={errorMsg} className={className}>
+      <Label
+        label={label}
+        hideLabel={hideLabel}
+        errorMsg={errorMsg}
+        className={className}
+        optional={optional}
+      >
         <StyledSelect
           onChange={e => {
             setValue(e.currentTarget.value);
@@ -67,6 +74,7 @@ const Select = React.forwardRef(
           {...rest}
           error={errorMsg}
           defaultValue={defaultValue}
+          required={optional === false}
           hasValue={!!value}
           greyDescription={greyDescription}
           ref={ref}
@@ -102,7 +110,8 @@ Select.propTypes = {
   greyDescription: PropTypes.bool,
   // className is needed so that styled(`Select`) will work
   // (as `rest` is not spread on the outermost component)
-  className: PropTypes.string
+  className: PropTypes.string,
+  optional: PropTypes.bool
 };
 
 Select.defaultProps = {
@@ -112,7 +121,8 @@ Select.defaultProps = {
   /** If true, the 'description' option, which is initially selected but disabled, will be grey
    *   - like a text input's placeholder */
   greyDescription: false,
-  className: ''
+  className: '',
+  optional: false
 };
 
 export default Select;

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

@@ -78,6 +78,7 @@ exports[`renders correctly 1`] = `
     className="c3"
     defaultValue=""
     onChange={[Function]}
+    required={true}
   >
     <option
       disabled={true}

package/src/components/Molecules/Logos/Logos.js

@@ -17,24 +17,6 @@ const Logos = ({ campaign }) => {
     );
   }
 
-  if (campaign === 'Big Night In') {
-    return (
-      <>
-        <a href="/" title="Go to Comic Relief homepage">
-          <Logo rotate sizeSm="50px" sizeMd="60px" campaign="Comic Relief" />
-        </a>
-        <a href="/big-night-in" title="Big night in homepage">
-          <Logo
-            rotate={false}
-            sizeSm="100px"
-            sizeMd="200px"
-            campaign="Big Night In"
-          />
-        </a>
-      </>
-    );
-  }
-
   if (campaign === 'Sport Relief') {
     return (
       <a href="/sportrelief" title="Sport Relief in homepage">
@@ -45,7 +27,7 @@ const Logos = ({ campaign }) => {
 
   return (
     <a href="/" title="Go to Comic Relief homepage">
-      <Logo rotate campaign="Comic Relief" />
+      <Logo rotate={false} campaign="Comic Relief" />
     </a>
   );
 };

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

@@ -231,6 +231,7 @@ exports[`renders ESU School correctly 1`] = `
         defaultValue=""
         onChange={[Function]}
         placeholder="Please choose an option"
+        required={true}
         value=""
       >
         <option