npm - @comicrelief/component-library - Versions diffs - 8.13.7 → 8.15.0 - Mend

@comicrelief/component-library 8.13.7 → 8.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

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

@@ -10,68 +10,79 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Text = _interopRequireDefault(require("../Text/Text"));
 var _tick = _interopRequireDefault(require("./assets/tick.svg"));
-const StyledCheckboxInput = _styledComponents.default.input.attrs({
-  type: 'checkbox'
-}).withConfig({
-  displayName: "Checkbox__StyledCheckboxInput",
+// This label wraps both the input and the span that is the visual square checkbox you see */
+const Label = _styledComponents.default.label.withConfig({
+  displayName: "Checkbox__Label",
   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;flex-shrink:0;}:checked + span{background:url(", ") no-repeat center;background-color:", ";border-color:", ";background-size:contain;}:focus + span{border-color:", ";border-width:1px;}"], _ref => {
+})(["display:flex;", " margin-bottom:8px;", ""], _ref => {
   let {
-    theme
+    hasLabelAsString
   } = _ref;
-  return theme.fontSize('sm');
+  return hasLabelAsString && 'align-items: center;';
 }, _ref2 => {
   let {
-    theme
+    labelColour
   } = _ref2;
-  return theme.color('grey');
-}, _ref3 => {
+  return labelColour && "color: ".concat(labelColour, ";");
+});
+const StyledCheckboxInput = _styledComponents.default.input.attrs({
+  type: 'checkbox'
+}).withConfig({
+  displayName: "Checkbox__StyledCheckboxInput",
+  componentId: "sc-ngak0-1"
+})(["width:0;height:0;margin:0;+ 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-size:contain;background-color:", ";border:1px solid ", ";}:focus + span{border:1px solid ", ";}"], _ref3 => {
   let {
-    theme
+    theme,
+    checkboxBg
   } = _ref3;
-  return theme.color('white');
+  return checkboxBg ? theme.color(checkboxBg) : theme.color('white');
 }, _ref4 => {
   let {
-    theme
+    theme,
+    checkboxBorder
   } = _ref4;
-  return theme.color('grey');
+  return checkboxBorder ? theme.color(checkboxBorder) : theme.color('grey');
 }, _tick.default, _ref5 => {
   let {
-    theme
+    theme,
+    checkboxBgChecked
   } = _ref5;
-  return theme.color('red');
+  return checkboxBgChecked ? theme.color(checkboxBgChecked) : theme.color('red');
 }, _ref6 => {
   let {
-    theme
+    theme,
+    checkboxBorderChecked
   } = _ref6;
-  return theme.color('red');
+  return checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red');
 }, _ref7 => {
   let {
-    theme
+    theme,
+    checkboxBorderChecked
   } = _ref7;
-  return theme.color('red');
+  return checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red');
 });
-const Label = _styledComponents.default.label.withConfig({
-  displayName: "Checkbox__Label",
-  componentId: "sc-ngak0-1"
-})(["display:flex;", " margin-bottom:8px;"], _ref8 => {
-  let {
-    hasLabelAsString
-  } = _ref8;
-  return hasLabelAsString && 'align-items: center;';
-});
-const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
+const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     label = undefined,
     value,
     children = undefined,
+    labelColour,
+    checkboxBg,
+    checkboxBorder,
+    checkboxBgChecked,
+    checkboxBorderChecked,
     ...rest
-  } = _ref9;
+  } = _ref8;
   return /*#__PURE__*/_react.default.createElement(Label, {
-    hasLabelAsString: !!label
+    hasLabelAsString: !!label,
+    labelColour: labelColour
   }, /*#__PURE__*/_react.default.createElement(StyledCheckboxInput, Object.assign({}, rest, {
     value: value,
-    ref: ref
+    ref: ref,
+    checkboxBg: checkboxBg,
+    checkboxBorder: checkboxBorder,
+    checkboxBgChecked: checkboxBgChecked,
+    checkboxBorderChecked: checkboxBorderChecked
   })), /*#__PURE__*/_react.default.createElement("span", null), label ? /*#__PURE__*/_react.default.createElement(_Text.default, {
     weight: "bold"
   }, label) : children);
@@ -79,7 +90,12 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
 Checkbox.propTypes = {
   name: _propTypes.default.string.isRequired,
   value: _propTypes.default.string.isRequired,
+  children: _propTypes.default.node,
   label: _propTypes.default.string,
-  children: _propTypes.default.node
+  labelColour: _propTypes.default.string,
+  checkboxBg: _propTypes.default.string,
+  checkboxBorder: _propTypes.default.string,
+  checkboxBgChecked: _propTypes.default.string,
+  checkboxBorderChecked: _propTypes.default.string
 };
 var _default = exports.default = Checkbox;

package/dist/components/Atoms/Checkbox/Checkbox.md CHANGED Viewed

@@ -27,7 +27,16 @@ const LongLabel = () => (
     <Checkbox name="sport" value="Tennis" label="Tennis" />
     <Checkbox name="sport" value="Basketball" label="Basketball" />
     <Checkbox name="sport" value="Cycling" label="Cycling" />
-    <Checkbox name="sport" value="Football" label="Football" />
+    <Checkbox
+        name="sport"
+        value="Football"
+        label="Tennis (with wacky styling to test props)"
+        labelColour="pink"
+        checkboxBg="red"
+        checkboxBorder="blue"
+        checkboxBgChecked="green"
+        checkboxBorderChecked="red"
+    />
     <br/>
     <p>A checkbox with a long label containing links</p>
     <Checkbox name="node_label" value="node_label">

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

@@ -15,5 +15,5 @@ it('renders correctly', () => {
     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      -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  ");
+  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    .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    .c1 {\n      width: 0;\n      height: 0;\n      margin: 0;\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-size: contain;\n      background-color: #E52630;\n      border: 1px solid #E52630;\n    }\n\n    .c1:focus + span {\n      border: 1px solid #E52630;\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    .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    .c1 {\n      width: 0;\n      height: 0;\n      margin: 0;\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-size: contain;\n      background-color: #E52630;\n      border: 1px solid #E52630;\n    }\n\n    .c1:focus + span {\n      border: 1px solid #E52630;\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/Molecules/{Logos/Logos.js → LogoLinked/LogoLinked.js} RENAMED Viewed

@@ -10,21 +10,22 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Logo = _interopRequireDefault(require("../../Atoms/Logo/Logo"));
 const TitleLabel = _styledComponents.default.span.withConfig({
-  displayName: "Logos__TitleLabel",
-  componentId: "sc-z3hhhd-0"
+  displayName: "LogoLinked__TitleLabel",
+  componentId: "sc-1l32h77-0"
 })(["line-height:0;font-size:0;color:transparent;"]);
 const LogoLink = _styledComponents.default.a.withConfig({
-  displayName: "Logos__LogoLink",
-  componentId: "sc-z3hhhd-1"
+  displayName: "LogoLinked__LogoLink",
+  componentId: "sc-1l32h77-1"
 })(["", ""], _ref => {
   let {
     animateRotate
   } = _ref;
   return animateRotate && (0, _styledComponents.css)(["img{transition:transform 0.35s cubic-bezier(0.41,1.64,0.41,0.8);}&:hover,&:focus{img{transform:rotate(-14deg);}}"]);
 });
-const Logos = _ref2 => {
+const LogoLinked = _ref2 => {
   let {
     campaign = 'Comic Relief',
+    title = 'Go to Comic Relief homepage',
     animateRotate = false,
     sizeSm,
     sizeMd
@@ -77,14 +78,14 @@ const Logos = _ref2 => {
   }
   return /*#__PURE__*/_react.default.createElement(LogoLink, {
     href: "/",
-    title: "Go to Comic Relief homepage",
+    title: title,
     animateRotate: animateRotate
   }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
     rotate: false,
     campaign: "Comic Relief",
-    title: "Go to Comic Relief homepage",
+    title: title,
     sizeSm: sizeSm,
     sizeMd: sizeMd
-  }), /*#__PURE__*/_react.default.createElement(TitleLabel, null, "Go to Comic Relief homepage"));
+  }), /*#__PURE__*/_react.default.createElement(TitleLabel, null, title));
 };
-var _default = exports.default = Logos;
+var _default = exports.default = LogoLinked;

package/dist/components/Molecules/LogoLinked/LogoLinked.md ADDED Viewed

@@ -0,0 +1,11 @@
+# Comic Relief Logo without animation
+```js
+<LogoLinked sizeSm="50px" sizeMd="60px" />
+```
+# Comic Relief Logo with hover animation and custom hovertext
+```js
+<LogoLinked animateRotate sizeSm="50px" title="I'm a custom title" sizeMd="60px" />
+```

package/dist/components/Organisms/Header/Header.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Logos = _interopRequireDefault(require("../../Molecules/Logos/Logos"));
+var _LogoLinked = _interopRequireDefault(require("../../Molecules/LogoLinked/LogoLinked"));
 var _Nav = _interopRequireDefault(require("./Nav/Nav"));
 var _Header = require("./Header.style");
 const Header = _ref => {
@@ -18,7 +18,7 @@ const Header = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Header.HeaderWrapper, Object.assign({
     navItems: true
-  }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_Logos.default, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_LogoLinked.default, {
     campaign: campaign
   })), /*#__PURE__*/_react.default.createElement(_Nav.default, {
     navItems: navItems

package/dist/components/Organisms/Header2025/Header2025.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Logos = _interopRequireDefault(require("../../Molecules/Logos/Logos"));
+var _LogoLinked = _interopRequireDefault(require("../../Molecules/LogoLinked/LogoLinked"));
 var _HeaderNav = _interopRequireDefault(require("./HeaderNav2025/HeaderNav2025"));
 var _Header = require("./Header2025.style");
 const Header2025 = _ref => {
@@ -22,7 +22,7 @@ const Header2025 = _ref => {
   return /*#__PURE__*/_react.default.createElement(_Header.Header2025Wrapper, Object.assign({
     navItems: true,
     showBoxShadow: showBoxShadow
-  }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_Logos.default, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_LogoLinked.default, {
     campaign: campaign,
     sizeSm: "50px",
     sizeMd: "55px",

package/dist/index.js CHANGED Viewed

@@ -196,6 +196,12 @@ Object.defineProperty(exports, "Logo", {
     return _Logo.default;
   }
 });
+Object.defineProperty(exports, "LogoLinked", {
+  enumerable: true,
+  get: function () {
+    return _LogoLinked.default;
+  }
+});
 Object.defineProperty(exports, "Lookup", {
   enumerable: true,
   get: function () {
@@ -476,6 +482,7 @@ var _Chip = _interopRequireDefault(require("./components/Molecules/Chip/Chip"));
 var _Descriptor = _interopRequireDefault(require("./components/Molecules/Descriptor/Descriptor"));
 var _Lookup = _interopRequireDefault(require("./components/Molecules/Lookup/Lookup"));
 var _SimpleSchoolLookup = _interopRequireDefault(require("./components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup"));
+var _LogoLinked = _interopRequireDefault(require("./components/Molecules/LogoLinked/LogoLinked"));
 var _EmailSignUp = require("./components/Organisms/EmailSignUp/_EmailSignUp");
 var _CookieBanner = _interopRequireDefault(require("./components/Organisms/CookieBanner/CookieBanner"));
 var _Membership = _interopRequireDefault(require("./components/Organisms/Membership/Membership"));

package/package.json CHANGED Viewed

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

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

@@ -5,50 +5,67 @@ import styled from 'styled-components';
 import Text from '../Text/Text';
 import checkBoxIcon from './assets/tick.svg';
+// This label wraps both the input and the span that is the visual square checkbox you see */
+const Label = styled.label`
+  display: flex;
+  ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
+  margin-bottom: 8px;
+  ${({ labelColour }) => labelColour && `color: ${labelColour};`}
+`;
 const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
-  font-size: ${({ theme }) => theme.fontSize('sm')};
-  display: block;
-  box-sizing: border-box;
-  opacity: 0;
-  position: absolute;
-  left: 0px;
-  width: 24px;
-  height: 24px;
+  /* This input is not visible */
+  width: 0;
+  height: 0;
   margin: 0;
-  border: 1px solid ${({ theme }) => theme.color('grey')};
+  /* This span is actually the visual square Checkbox you see */
   + span {
     margin-right: 12px;
     width: 24px;
     height: 24px;
     border-radius: 4px;
-    background-color: ${({ theme }) => theme.color('white')};
-    border: 1px solid ${({ theme }) => theme.color('grey')};
+    background-color: ${({ theme, checkboxBg }) => (checkboxBg ? theme.color(checkboxBg) : theme.color('white'))};
+    border: 1px solid ${({ theme, checkboxBorder }) => (checkboxBorder ? theme.color(checkboxBorder) : theme.color('grey'))};
     float: left;
     flex-shrink: 0;
   }
+  /* Visual checkbox when ticked */
   :checked + span {
     background: url(${checkBoxIcon}) no-repeat center;
-    background-color: ${({ theme }) => theme.color('red')};
-    border-color: ${({ theme }) => theme.color('red')};
     background-size: contain;
+    background-color: ${({ theme, checkboxBgChecked }) => (checkboxBgChecked ? theme.color(checkboxBgChecked) : theme.color('red'))};
+    border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
   }
+  /* Visual checkbox when focused */
   :focus + span {
-    border-color: ${({ theme }) => theme.color('red')};
-    border-width: 1px;
+    border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
   }
 `;
-const Label = styled.label`
-  display: flex;
-  ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
-  margin-bottom: 8px;
-`;
 const Checkbox = React.forwardRef(({
-  label = undefined, value, children = undefined, ...rest
+  label = undefined,
+  value,
+  children = undefined,
+  labelColour,
+  checkboxBg,
+  checkboxBorder,
+  checkboxBgChecked,
+  checkboxBorderChecked,
+  ...rest
 }, ref) => (
-  <Label hasLabelAsString={!!label}>
-    <StyledCheckboxInput {...rest} value={value} ref={ref} />
+  <Label
+    hasLabelAsString={!!label}
+    labelColour={labelColour}
+  >
+    <StyledCheckboxInput
+      {...rest}
+      value={value}
+      ref={ref}
+      checkboxBg={checkboxBg}
+      checkboxBorder={checkboxBorder}
+      checkboxBgChecked={checkboxBgChecked}
+      checkboxBorderChecked={checkboxBorderChecked}
+    />
     <span />
     {label ? <Text weight="bold">{label}</Text> : children}
   </Label>
@@ -57,8 +74,13 @@ const Checkbox = React.forwardRef(({
 Checkbox.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
+  children: PropTypes.node,
   label: PropTypes.string,
-  children: PropTypes.node
+  labelColour: PropTypes.string,
+  checkboxBg: PropTypes.string,
+  checkboxBorder: PropTypes.string,
+  checkboxBgChecked: PropTypes.string,
+  checkboxBorderChecked: PropTypes.string
 };
 export default Checkbox;

package/src/components/Atoms/Checkbox/Checkbox.md CHANGED Viewed

@@ -27,7 +27,16 @@ const LongLabel = () => (
     <Checkbox name="sport" value="Tennis" label="Tennis" />
     <Checkbox name="sport" value="Basketball" label="Basketball" />
     <Checkbox name="sport" value="Cycling" label="Cycling" />
-    <Checkbox name="sport" value="Football" label="Football" />
+    <Checkbox
+        name="sport"
+        value="Football"
+        label="Tennis (with wacky styling to test props)"
+        labelColour="pink"
+        checkboxBg="red"
+        checkboxBorder="blue"
+        checkboxBgChecked="green"
+        checkboxBorderChecked="red"
+    />
     <br/>
     <p>A checkbox with a long label containing links</p>
     <Checkbox name="node_label" value="node_label">

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

@@ -22,16 +22,22 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
+    .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;
+      margin-bottom: 8px;
+    }
     .c1 {
-      display: block;
-      box-sizing: border-box;
-      opacity: 0;
-      position: absolute;
-      left: 0px;
-      width: 24px;
-      height: 24px;
+      width: 0;
+      height: 0;
       margin: 0;
-      border: 1px solid #969598;
     }
     .c1 + span {
@@ -49,26 +55,13 @@ it('renders correctly', () => {
     .c1:checked + span {
       background: url(mock.asset) no-repeat center;
-      background-color: #E52630;
-      border-color: #E52630;
       background-size: contain;
+      background-color: #E52630;
+      border: 1px solid #E52630;
     }
     .c1:focus + span {
-      border-color: #E52630;
-      border-width: 1px;
-    }
-    .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;
-      margin-bottom: 8px;
+      border: 1px solid #E52630;
     }
     <label
@@ -98,16 +91,22 @@ it('renders correctly', () => {
       font-family: 'Montserrat',Helvetica,Arial,sans-serif;
     }
+    .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;
+      margin-bottom: 8px;
+    }
     .c1 {
-      display: block;
-      box-sizing: border-box;
-      opacity: 0;
-      position: absolute;
-      left: 0px;
-      width: 24px;
-      height: 24px;
+      width: 0;
+      height: 0;
       margin: 0;
-      border: 1px solid #969598;
     }
     .c1 + span {
@@ -125,26 +124,13 @@ it('renders correctly', () => {
     .c1:checked + span {
       background: url(mock.asset) no-repeat center;
-      background-color: #E52630;
-      border-color: #E52630;
       background-size: contain;
+      background-color: #E52630;
+      border: 1px solid #E52630;
     }
     .c1:focus + span {
-      border-color: #E52630;
-      border-width: 1px;
-    }
-    .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;
-      margin-bottom: 8px;
+      border: 1px solid #E52630;
     }
     <label

package/src/components/Molecules/{Logos/Logos.js → LogoLinked/LogoLinked.js} RENAMED Viewed

@@ -5,9 +5,9 @@ import styled, { css } from 'styled-components';
 import Logo from '../../Atoms/Logo/Logo';
 const TitleLabel = styled.span`
-  line-height: 0;
+  line-height: 0;
   font-size: 0;
-  color: transparent;
+  color: transparent;
 `;
 const LogoLink = styled.a`
@@ -25,8 +25,8 @@ const LogoLink = styled.a`
   `}
 `;
-const Logos = ({
-  campaign = 'Comic Relief', animateRotate = false, sizeSm, sizeMd
+const LogoLinked = ({
+  campaign = 'Comic Relief', title = 'Go to Comic Relief homepage', animateRotate = false, sizeSm, sizeMd
 }) => {
   if (campaign === 'Sport Relief Gameon') {
     return (
@@ -62,18 +62,19 @@ const Logos = ({
   }
   return (
-    <LogoLink href="/" title="Go to Comic Relief homepage" animateRotate={animateRotate}>
-      <Logo rotate={false} campaign="Comic Relief" title="Go to Comic Relief homepage" sizeSm={sizeSm} sizeMd={sizeMd} />
-      <TitleLabel>Go to Comic Relief homepage</TitleLabel>
+    <LogoLink href="/" title={title} animateRotate={animateRotate}>
+      <Logo rotate={false} campaign="Comic Relief" title={title} sizeSm={sizeSm} sizeMd={sizeMd} />
+      <TitleLabel>{title}</TitleLabel>
     </LogoLink>
   );
 };
-Logos.propTypes = {
+LogoLinked.propTypes = {
   campaign: PropTypes.string,
   animateRotate: PropTypes.bool,
+  title: PropTypes.string,
   sizeSm: PropTypes.string,
   sizeMd: PropTypes.string
 };
-export default Logos;
+export default LogoLinked;

package/src/components/Molecules/LogoLinked/LogoLinked.md ADDED Viewed

@@ -0,0 +1,11 @@
+# Comic Relief Logo without animation
+```js
+<LogoLinked sizeSm="50px" sizeMd="60px" />
+```
+# Comic Relief Logo with hover animation and custom hovertext
+```js
+<LogoLinked animateRotate sizeSm="50px" title="I'm a custom title" sizeMd="60px" />
+```

package/src/components/Organisms/Header/Header.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Logos from '../../Molecules/Logos/Logos';
+import LogoLinked from '../../Molecules/LogoLinked/LogoLinked';
 import MainNav from './Nav/Nav';
 import {
   Brand, HeaderWrapper, InnerWrapper, MetaIcons
@@ -13,7 +13,7 @@ const Header = ({
   <HeaderWrapper navItems {...rest}>
     <InnerWrapper>
       <Brand>
-        <Logos campaign={campaign} />
+        <LogoLinked campaign={campaign} />
       </Brand>
       <MainNav navItems={navItems} />
       <MetaIcons>{metaIcons}</MetaIcons>

package/src/components/Organisms/Header2025/Header2025.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Logos from '../../Molecules/Logos/Logos';
+import LogoLinked from '../../Molecules/LogoLinked/LogoLinked';
 import HeaderNav2025 from './HeaderNav2025/HeaderNav2025';
 import {
   Brand, Header2025Wrapper, InnerWrapper,
@@ -15,7 +15,7 @@ const Header2025 = ({
   <Header2025Wrapper navItems showBoxShadow={showBoxShadow} {...rest}>
     <InnerWrapper>
       <Brand>
-        <Logos
+        <LogoLinked
           campaign={campaign}
           sizeSm="50px"
           sizeMd="55px"

package/src/index.js CHANGED Viewed

@@ -63,6 +63,7 @@ export { default as Chip } from './components/Molecules/Chip/Chip';
 export { default as Descriptor } from './components/Molecules/Descriptor/Descriptor';
 export { default as Lookup } from './components/Molecules/Lookup/Lookup';
 export { default as SimpleSchoolLookup } from './components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup';
+export { default as LogoLinked } from './components/Molecules/LogoLinked/LogoLinked';
 /* Organisms */
 export {

package/dist/components/Molecules/Logos/Logos.md DELETED Viewed

@@ -1,5 +0,0 @@
-# Comic Relief Logo
-```js
-<Logos rotate={false} sizeSm="50px" sizeMd="60px" />
-```

package/src/components/Molecules/Logos/Logos.md DELETED Viewed

@@ -1,5 +0,0 @@
-# Comic Relief Logo
-```js
-<Logos rotate={false} sizeSm="50px" sizeMd="60px" />
-```