@comicrelief/component-library 8.20.1 → 8.22.0

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

@@ -6,14 +6,14 @@ require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
 var _Link = _interopRequireDefault(require("./Link"));
 var _index = require("../Icons/index");
-it("renders a standard styled link correctly", () => {
+it('renders a standard styled link correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/test",
     type: "standard"
   }, "A standard link")).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      A standard link\n    </a>\n  ");
 });
-it("renders a button with an icon", () => {
+it('renders a button with an icon', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/test",
     type: "standard",
@@ -24,7 +24,7 @@ it("renders a button with an icon", () => {
   }, "Internal link")).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      display: -webkit-inline-box;\n      display: -webkit-inline-flex;\n      display: -ms-inline-flexbox;\n      display: inline-flex;\n      margin-left: 1rem;\n      -webkit-align-self: center;\n      -ms-flex-item-align: center;\n      align-self: center;\n      right: 1.5rem;\n      position: absolute;\n      right: -2rem;\n      top: 0;\n      bottom: 0;\n    }\n\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    .c2 {\n      fill: #FFFFFF;\n    }\n\n    @media (min-width:740px) {\n      .c1 {\n        width: auto;\n        right: auto;\n        position: relative;\n        position: absolute;\n        right: -2rem;\n        top: 0;\n        bottom: 0;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        fill: #FFFFFF;\n      }\n    }\n\n    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      Internal link\n      <span\n        className=\"c1\"\n        type=\"standard\"\n      >\n        <svg\n          className=\"c2\"\n          fill=\"#FFFFFF\"\n          height={24}\n          viewBox=\"0 0 96 96\"\n          width={24}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M90.871 50.776c-.016.016-.026.036-.043.052l-32 32C58.047 83.609 57.024 84 56 84s-2.047-.391-2.829-1.171a4 4 0 010-5.657L78.343 52H8a4 4 0 010-8h70.343L53.171 18.829a4 4 0 015.657-5.657l32 32c.016.016.027.036.043.052.167.172.321.357.455.557.069.104.118.216.176.325.065.121.138.236.191.364.057.137.09.279.13.42.032.109.074.214.097.327a4.017 4.017 0 010 1.568c-.023.113-.065.217-.097.327-.041.141-.074.283-.13.42-.053.128-.126.243-.191.364-.059.109-.107.221-.176.325a4.035 4.035 0 01-.455.555z\"\n          />\n        </svg>\n      </span>\n    </a>\n  ");
 });
-it("renders a standard styled link correctly with target blank and assistive text", () => {
+it('renders a standard styled link correctly with target blank and assistive text', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/test",
     type: "standard",
@@ -32,7 +32,7 @@ it("renders a standard styled link correctly with target blank and assistive tex
   }, "A standard link")).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    .c1 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      -webkit-clip-path: inset(50%);\n      clip-path: inset(50%);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n    }\n\n    <a\n      className=\"c0\"\n      color=\"red\"\n      href=\"/test\"\n      target=\"_blank\"\n      type=\"standard\"\n    >\n      A standard link\n      <span\n        className=\"c1\"\n      >\n        (opens in new window)\n      </span>\n    </a>\n  ");
 });
-it("renders link styled as button correctly", () => {
+it('renders link styled as button correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Link.default, {
     href: "/test",
     type: "button",

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

@@ -6,7 +6,7 @@ require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
 var _ArticleTeaser = _interopRequireDefault(require("./ArticleTeaser"));
 var _data = require("../../../styleguide/data/data");
-it("renders article teaser correctly", () => {
+it('renders article teaser correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
     href: "/test",
     images: _data.defaultData.images,
@@ -20,7 +20,7 @@ it("renders article teaser correctly", () => {
   })).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c8 {\n      font-size: 0.75rem;\n      line-height: 0.75rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c10 {\n      font-size: 2rem;\n      line-height: 2rem;\n      text-transform: uppercase;\n      font-weight: normal;\n      line-height: 2rem;\n      font-family: 'Anton',Impact,sans-serif;\n      -webkit-letter-spacing: 0.03rem;\n      -moz-letter-spacing: 0.03rem;\n      -ms-letter-spacing: 0.03rem;\n      letter-spacing: 0.03rem;\n    }\n\n    .c4 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c6 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c1 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      font-weight: normal;\n    }\n\n    .c1:hover {\n      color: #000000;\n    }\n\n    .c0 {\n      width: 100%;\n      height: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      background-color: #FFFFFF;\n      border-radius: 1rem;\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n      -webkit-transition: all 0.2s;\n      transition: all 0.2s;\n    }\n\n    .c0:hover {\n      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);\n      -webkit-transform: translateY(-4px);\n      -ms-transform: translateY(-4px);\n      transform: translateY(-4px);\n    }\n\n    .c2 {\n      padding: 0;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      height: 100%;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n    }\n\n    .c3 {\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      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      position: relative;\n    }\n\n    .c3 img {\n      border-radius: 1rem 1rem 0 0;\n    }\n\n    .c7 {\n      padding: 2rem;\n      height: 100%;\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    }\n\n    .c11 {\n      margin: 0;\n    }\n\n    .c9 {\n      display: block;\n      margin-bottom: 1rem;\n    }\n\n    .c5 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n    }\n\n    @media (min-width:740px) {\n      .c2 {\n        -webkit-flex-direction: row;\n        -ms-flex-direction: row;\n        flex-direction: row;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c2 {\n        -webkit-flex-direction: column;\n        -ms-flex-direction: column;\n        flex-direction: column;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c3 {\n        width: 45%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 0 0 1rem;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c3 {\n        width: 100%;\n      }\n\n      .c3 img {\n        border-radius: 1rem 1rem 0 0;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c7 {\n        width: 55%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c7 {\n        width: 100%;\n      }\n    }\n\n    <article\n      className=\"c0\"\n    >\n      <a\n        className=\"c1 c2\"\n        color=\"red\"\n        href=\"/test\"\n        target=\"_self\"\n        type=\"standard\"\n      >\n        <div\n          className=\"c3\"\n        >\n          <div\n            className=\"c4 c5\"\n            height=\"100%\"\n            width=\"100%\"\n          >\n            <img\n              alt=\"Image's description\"\n              className=\"c6 lazyload\"\n              data-lowsrc={null}\n              data-sizes=\"auto\"\n              data-src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n              height=\"100%\"\n              src=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg\"\n              srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n              width=\"100%\"\n            />\n          </div>\n        </div>\n        <div\n          className=\"c7\"\n        >\n          <span\n            className=\"c8 c9\"\n            color=\"inherit\"\n            size=\"xs\"\n          >\n             01 July 2019\n          </span>\n          <h3\n            className=\"c10 c11\"\n            color=\"inherit\"\n            height=\"2rem\"\n            size=\"xl\"\n          >\n            News article\n          </h3>\n        </div>\n      </a>\n    </article>\n  ");
 });
-it("renders press realese correctly", () => {
+it('renders press realese correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
     href: "/test",
     category: "",

package/dist/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -7,7 +7,7 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/sh
 var _PartnerLink = _interopRequireDefault(require("./PartnerLink"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _data = require("../../../styleguide/data/data");
-it("renders correctly", () => {
+it('renders correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_PartnerLink.default, {
     link: "https://www.comicrelief.com"
   }, /*#__PURE__*/_react.default.createElement(_Picture.default, {

package/dist/components/Organisms/CookieBanner/CookieBanner.test.js

@@ -5,15 +5,15 @@ var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
 var _CookieBanner = _interopRequireDefault(require("./CookieBanner"));
-it("renders correctly", () => {
+it('renders correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CookieBanner.default, {
     acceptCookie: e => {
       e.preventDefault();
-      return "User accept";
+      return 'User accept';
     },
     denyCookie: e => {
       e.preventDefault();
-      return "User does not accept cookies";
+      return 'User does not accept cookies';
     },
     cookiePolicyUrl: "https://www.comicrelief.com/cookies-policy"
   })).toJSON();

package/dist/components/Organisms/Footer/Footer.js

@@ -10,6 +10,7 @@ var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 var _Logo = _interopRequireDefault(require("../../Atoms/Logo/Logo"));
 var _Nav = _interopRequireDefault(require("./Nav/Nav"));
 var _SocialIcons = _interopRequireDefault(require("../../Atoms/SocialIcons/SocialIcons"));
+var _FundraisingRegulatorLogo = _interopRequireDefault(require("./FundraisingRegulatorLogo"));
 var _Footer = require("./Footer.style");
 const Footer = _ref => {
   let {
@@ -18,6 +19,7 @@ const Footer = _ref => {
     campaign = 'Comic Relief',
     additionalLegalLine = '',
     overrideallowList = false,
+    showFundraisingRegulatorLogo = false,
     ...rest
   } = _ref;
   // Remove white space between words
@@ -40,7 +42,7 @@ const Footer = _ref => {
   }))), /*#__PURE__*/_react.default.createElement(_Nav.default, Object.assign({
     navItems: navItems,
     overrideallowList: overrideallowList
-  }, rest)), /*#__PURE__*/_react.default.createElement(_Footer.FooterCopyright, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, rest)), showFundraisingRegulatorLogo && /*#__PURE__*/_react.default.createElement(_FundraisingRegulatorLogo.default, null), /*#__PURE__*/_react.default.createElement(_Footer.FooterCopyright, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
     color: "grey"
   }, footerCopy)))));

package/dist/components/Organisms/Footer/Footer.md

@@ -16,12 +16,13 @@ import footerCopy from './data/footerCopy';
       overrideallowList 
     />
     
-    <p>Adding a additionalLegalLine to the top of the footer</p>
+    <p>Adding a additionalLegalLine to the top of the footer, add FR logo</p>
     <Footer 
       additionalLegalLine="CHICKEN RUN: DAWN OF THE NUGGET ™/ © Aardman. Netflix ™/© Netflix. Used with permission/Wallace & Gromit Ltd. All rights reserved/ Shaun the Sheep © & TM /Morph ©/TM Aardman Animations Ltd. All rights reserved." 
       navItems={data} 
       footerCopy={footerCopy.copy} 
       campaign="Comic Relief" 
+      showFundraisingRegulatorLogo
     />
 </>
 ```

package/dist/components/Organisms/Footer/Footer.style.js

@@ -49,7 +49,7 @@ const FooterBranding = exports.FooterBranding = _styledComponents.default.div.wi
 const FooterCopyright = exports.FooterCopyright = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__FooterCopyright",
   componentId: "sc-167xaf5-5"
-})(["display:block;width:100%;height:100%;text-align:left;margin-top:", ";p{font-size:15px;line-height:24px;margin-bottom:5px;@media ", "{font-size:16px;line-height:27px;}}"], (0, _spacing.default)('lg'), _ref4 => {
+})(["display:block;width:100%;height:100%;text-align:left;margin-top:0;p{font-size:15px;line-height:24px;margin-bottom:5px;@media ", "{font-size:16px;line-height:27px;}}"], _ref4 => {
   let {
     theme
   } = _ref4;

package/dist/components/Organisms/Footer/FundraisingRegulatorLogo.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
+const FundraisingRegulatorWrapper = _styledComponents.default.div.withConfig({
+  displayName: "FundraisingRegulatorLogo__FundraisingRegulatorWrapper",
+  componentId: "sc-1uvaky7-0"
+})(["width:75%;margin:", " 0;max-width:200px;img{display:block;}"], (0, _spacing.default)('lg'));
+const FundraisingRegulatorLogo = () => /*#__PURE__*/_react.default.createElement(FundraisingRegulatorWrapper, null, /*#__PURE__*/_react.default.createElement("a", {
+  href: "https://www.fundraisingregulator.org.uk/validate?registrant=COMIC+RELIEF",
+  className: "fr-digital-badge",
+  style: {
+    height: 'auto',
+    width: '150px',
+    textDecoration: 'none'
+  },
+  target: "_blank",
+  rel: "noreferrer"
+}, /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://www.fundraisingregulator.org.uk/fr-badge/80983ed7-ea80-40db-8e52-4a3351d9e77d/en/white",
+  width: "100%",
+  alt: "Fundraising Regulator badge with validation link",
+  loading: "lazy"
+})));
+var _default = exports.default = FundraisingRegulatorLogo;

package/dist/components/Organisms/Footer/Nav/Nav.style.js

@@ -8,6 +8,7 @@ exports.SubNavMenu = exports.SubNavLink = exports.SubNavItem = exports.NavMenu =
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
 var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
+var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"));
 const NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "Navstyle__NavLinkClass",
   componentId: "sc-uzf5hs-0"
@@ -96,10 +97,15 @@ const SubNavLink = exports.SubNavLink = (0, _styledComponents.default)(NavLinkCl
 const NavMenu = exports.NavMenu = _styledComponents.default.ul.withConfig({
   displayName: "Navstyle__NavMenu",
   componentId: "sc-uzf5hs-5"
-})(["background-color:inherit;list-style:none outside;padding:0;margin:0;@media ", "{display:flex;flex-wrap:wrap;justify-content:start;}"], _ref10 => {
+})(["background-color:inherit;list-style:none outside;padding:0 0  ", ";border-bottom:1px solid ", ";@media ", "{display:flex;flex-wrap:wrap;justify-content:start;}"], (0, _spacing.default)('xl'), _ref10 => {
   let {
     theme
   } = _ref10;
+  return theme.color('white');
+}, _ref11 => {
+  let {
+    theme
+  } = _ref11;
   return theme.allBreakpoints('M');
 });
 
@@ -117,39 +123,39 @@ const NavLink = exports.NavLink = (0, _styledComponents.default)(NavLinkClass).w
 const NavItem = exports.NavItem = _styledComponents.default.li.withConfig({
   displayName: "Navstyle__NavItem",
   componentId: "sc-uzf5hs-7"
-})(["position:relative;font-weight:700;margin:0;margin-bottom:1rem;@media ", "{flex:0 0 30%;margin:0;}@media ", "{flex:0 0 calc(25% - 1rem);margin-right:1rem;margin-bottom:1rem;> span{padding:0;}}a{width:auto;padding:0;height:auto;position:relative;background-color:inherit;font-size:19px;line-height:40px;font-weight:800;@media ", "{font-size:20px;line-height:40px;}&:after{content:'\\2303';position:absolute;font-family:Arial;margin-left:4px;overflow:hidden;line-height:19px;font-size:23px;color:", ";font-weight:100;transition:transform 0.2s ease;transform:", ";top:", ";right:-25px;}@media ", "{cursor:default;display:inline;&:after{content:none;}}}"], _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.allBreakpoints('M');
-}, _ref12 => {
+})(["position:relative;font-weight:700;margin:0;margin-bottom:1rem;@media ", "{flex:0 0 30%;margin:0;}@media ", "{flex:0 0 calc(25% - 1rem);margin-right:1rem;margin-bottom:1rem;> span{padding:0;}}a{width:auto;padding:0;height:auto;position:relative;background-color:inherit;font-size:19px;line-height:40px;font-weight:800;@media ", "{font-size:20px;line-height:40px;}&:after{content:'\\2303';position:absolute;font-family:Arial;margin-left:4px;overflow:hidden;line-height:19px;font-size:23px;color:", ";font-weight:100;transition:transform 0.2s ease;transform:", ";top:", ";right:-25px;}@media ", "{cursor:default;display:inline;&:after{content:none;}}}"], _ref12 => {
   let {
     theme
   } = _ref12;
-  return theme.allBreakpoints('L');
+  return theme.allBreakpoints('M');
 }, _ref13 => {
   let {
     theme
   } = _ref13;
-  return theme.allBreakpoints('M');
+  return theme.allBreakpoints('L');
 }, _ref14 => {
   let {
     theme
   } = _ref14;
-  return theme.color('white');
+  return theme.allBreakpoints('M');
 }, _ref15 => {
   let {
-    isSubMenuOpen
+    theme
   } = _ref15;
-  return isSubMenuOpen ? 'rotate(0deg)' : 'rotate(180deg)';
+  return theme.color('white');
 }, _ref16 => {
   let {
     isSubMenuOpen
   } = _ref16;
-  return isSubMenuOpen ? '6px' : '0';
+  return isSubMenuOpen ? 'rotate(0deg)' : 'rotate(180deg)';
 }, _ref17 => {
   let {
-    theme
+    isSubMenuOpen
   } = _ref17;
+  return isSubMenuOpen ? '6px' : '0';
+}, _ref18 => {
+  let {
+    theme
+  } = _ref18;
   return theme.allBreakpoints('M');
 });

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

@@ -239,8 +239,8 @@ exports[`renders correctly 1`] = `
 .c13 {
   background-color: inherit;
   list-style: none outside;
-  padding: 0;
-  margin: 0;
+  padding: 0 0 4rem;
+  border-bottom: 1px solid #FFFFFF;
 }
 
 .c14 {
@@ -320,7 +320,7 @@ exports[`renders correctly 1`] = `
   width: 100%;
   height: 100%;
   text-align: left;
-  margin-top: 3rem;
+  margin-top: 0;
 }
 
 .c24 p {

package/package.json

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

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

@@ -1,10 +1,10 @@
-import React from "react";
-import "jest-styled-components";
-import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
-import Link from "./Link";
-import { Internal } from "../Icons/index";
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import Link from './Link';
+import { Internal } from '../Icons/index';
 
-it("renders a standard styled link correctly", () => {
+it('renders a standard styled link correctly', () => {
   const tree = renderWithTheme(
     <Link href="/test" type="standard">
       A standard link
@@ -40,7 +40,7 @@ it("renders a standard styled link correctly", () => {
   `);
 });
 
-it("renders a button with an icon", () => {
+it('renders a button with an icon', () => {
   const tree = renderWithTheme(
     <Link
       href="/test"
@@ -136,7 +136,7 @@ it("renders a button with an icon", () => {
   `);
 });
 
-it("renders a standard styled link correctly with target blank and assistive text", () => {
+it('renders a standard styled link correctly with target blank and assistive text', () => {
   const tree = renderWithTheme(
     <Link href="/test" type="standard" target="blank">
       A standard link
@@ -192,7 +192,7 @@ it("renders a standard styled link correctly with target blank and assistive tex
   `);
 });
 
-it("renders link styled as button correctly", () => {
+it('renders link styled as button correctly', () => {
   const tree = renderWithTheme(
     <Link href="/test" type="button" color="yellow">
       A yellow button

package/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -1,9 +1,9 @@
-import React from "react";
-import "jest-styled-components";
-import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
-import ArticleTeaser from "./ArticleTeaser";
-import { defaultData } from "../../../styleguide/data/data";
-it("renders article teaser correctly", () => {
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import ArticleTeaser from './ArticleTeaser';
+import { defaultData } from '../../../styleguide/data/data';
+it('renders article teaser correctly', () => {
   const tree = renderWithTheme(
     <ArticleTeaser
       href="/test"
@@ -258,7 +258,7 @@ it("renders article teaser correctly", () => {
   `);
 });
 
-it("renders press realese correctly", () => {
+it('renders press realese correctly', () => {
   const tree = renderWithTheme(
     <ArticleTeaser
       href="/test"

package/src/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -1,11 +1,11 @@
-import React from "react";
-import "jest-styled-components";
+import React from 'react';
+import 'jest-styled-components';
 
-import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
-import PartnerLink from "./PartnerLink";
-import Picture from "../../Atoms/Picture/Picture";
-import { defaultData } from "../../../styleguide/data/data";
-it("renders correctly", () => {
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import PartnerLink from './PartnerLink';
+import Picture from '../../Atoms/Picture/Picture';
+import { defaultData } from '../../../styleguide/data/data';
+it('renders correctly', () => {
   const tree = renderWithTheme(
     <PartnerLink link="https://www.comicrelief.com">
       <Picture

package/src/components/Organisms/CookieBanner/CookieBanner.test.js

@@ -1,18 +1,18 @@
-import React from "react";
-import "jest-styled-components";
-import renderWithTheme from "../../../../tests/hoc/shallowWithTheme";
-import CookieBanner from "./CookieBanner";
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import CookieBanner from './CookieBanner';
 
-it("renders correctly", () => {
+it('renders correctly', () => {
   const tree = renderWithTheme(
     <CookieBanner
       acceptCookie={(e) => {
         e.preventDefault();
-        return "User accept";
+        return 'User accept';
       }}
       denyCookie={(e) => {
         e.preventDefault();
-        return "User does not accept cookies";
+        return 'User does not accept cookies';
       }}
       cookiePolicyUrl="https://www.comicrelief.com/cookies-policy"
     />

package/src/components/Organisms/Footer/Footer.js

@@ -4,6 +4,7 @@ import Text from '../../Atoms/Text/Text';
 import Logo from '../../Atoms/Logo/Logo';
 import FooterNav from './Nav/Nav';
 import SocialIcons from '../../Atoms/SocialIcons/SocialIcons';
+import FundraisingRegulatorLogo from './FundraisingRegulatorLogo';
 
 import {
   FooterWrapper,
@@ -16,7 +17,7 @@ import {
 } from './Footer.style';
 
 const Footer = ({
-  navItems = {}, footerCopy = '', campaign = 'Comic Relief', additionalLegalLine = '', overrideallowList = false, ...rest
+  navItems = {}, footerCopy = '', campaign = 'Comic Relief', additionalLegalLine = '', overrideallowList = false, showFundraisingRegulatorLogo = false, ...rest
 }) => {
   // Remove white space between words
   const campaignName = campaign.replace(/\s/g, '').toLowerCase();
@@ -32,11 +33,15 @@ const Footer = ({
             <SocialIconWrapper>
               <SocialIcons campaign={campaignName} />
             </SocialIconWrapper>
+
             <Brand href="/" title={`Go to ${campaign} homepage`}>
               <Logo sizeSm="48px" sizeMd="72px" rotate={false} campaign={campaign} />
             </Brand>
           </FooterBranding>
           <FooterNav navItems={navItems} overrideallowList={overrideallowList} {...rest} />
+
+          { showFundraisingRegulatorLogo && <FundraisingRegulatorLogo /> }
+
           <FooterCopyright>
             <Text tag="p" color="grey">
               {footerCopy}
@@ -53,7 +58,8 @@ Footer.propTypes = {
   footerCopy: PropTypes.string,
   campaign: PropTypes.string,
   overrideallowList: PropTypes.bool,
-  additionalLegalLine: PropTypes.string
+  additionalLegalLine: PropTypes.string,
+  showFundraisingRegulatorLogo: PropTypes.bool
 };
 
 export default Footer;

package/src/components/Organisms/Footer/Footer.md

@@ -16,12 +16,13 @@ import footerCopy from './data/footerCopy';
       overrideallowList 
     />
     
-    <p>Adding a additionalLegalLine to the top of the footer</p>
+    <p>Adding a additionalLegalLine to the top of the footer, add FR logo</p>
     <Footer 
       additionalLegalLine="CHICKEN RUN: DAWN OF THE NUGGET ™/ © Aardman. Netflix ™/© Netflix. Used with permission/Wallace & Gromit Ltd. All rights reserved/ Shaun the Sheep © & TM /Morph ©/TM Aardman Animations Ltd. All rights reserved." 
       navItems={data} 
       footerCopy={footerCopy.copy} 
       campaign="Comic Relief" 
+      showFundraisingRegulatorLogo
     />
 </>
 ```

package/src/components/Organisms/Footer/Footer.style.js

@@ -60,7 +60,7 @@ const FooterCopyright = styled.div`
   width: 100%;
   height: 100%;
   text-align: left;
-  margin-top: ${spacing('lg')};
+  margin-top: 0;
 
   p {
     font-size: 15px;

package/src/components/Organisms/Footer/FundraisingRegulatorLogo.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import spacing from '../../../theme/shared/spacing';
+
+const FundraisingRegulatorWrapper = styled.div`
+  // Overriding the baked-in styles for ease of update
+  width: 75%;
+  margin: ${spacing('lg')} 0;
+  max-width: 200px;
+
+  img {
+    display: block;
+  }
+`;
+
+const FundraisingRegulatorLogo = () => (
+  <FundraisingRegulatorWrapper>
+    {/* Code from https://www.fundraisingregulator.org.uk/ */}
+    <a href="https://www.fundraisingregulator.org.uk/validate?registrant=COMIC+RELIEF" className="fr-digital-badge" style={{ height: 'auto', width: '150px', textDecoration: 'none' }} target="_blank" rel="noreferrer">
+      <img src="https://www.fundraisingregulator.org.uk/fr-badge/80983ed7-ea80-40db-8e52-4a3351d9e77d/en/white" width="100%" alt="Fundraising Regulator badge with validation link" loading="lazy" />
+    </a>
+  </FundraisingRegulatorWrapper>
+);
+
+export default FundraisingRegulatorLogo;

package/src/components/Organisms/Footer/Nav/Nav.style.js

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import Link from '../../../Atoms/Link/Link';
 import hideVisually from '../../../../theme/shared/hideVisually';
+import spacing from '../../../../theme/shared/spacing';
 
 const NavLinkClass = styled(Link)`
   border: 0;
@@ -119,8 +120,8 @@ const SubNavLink = styled(NavLinkClass)`
 const NavMenu = styled.ul`
   background-color: inherit;
   list-style: none outside;
-  padding: 0;
-  margin: 0;
+  padding: 0 0  ${spacing('xl')};
+  border-bottom: 1px solid ${({ theme }) => theme.color('white')};
 
   @media ${({ theme }) => theme.allBreakpoints('M')} {
     display: flex;

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

@@ -239,8 +239,8 @@ exports[`renders correctly 1`] = `
 .c13 {
   background-color: inherit;
   list-style: none outside;
-  padding: 0;
-  margin: 0;
+  padding: 0 0 4rem;
+  border-bottom: 1px solid #FFFFFF;
 }
 
 .c14 {
@@ -320,7 +320,7 @@ exports[`renders correctly 1`] = `
   width: 100%;
   height: 100%;
   text-align: left;
-  margin-top: 3rem;
+  margin-top: 0;
 }
 
 .c24 p {