@comicrelief/component-library 6.2.0 → 6.3.0

package/dist/components/Organisms/Donate/assets/close.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.70694 4.99994L9.85344 0.853438C10.0487 0.658188 10.0487 0.341688 9.85344 0.146437C9.65819 -0.0488125 9.34169 -0.0488125 9.14644 0.146437L4.99994 4.29294L0.853438 0.146437C0.658188 -0.0488125 0.341688 -0.0488125 0.146437 0.146437C-0.0488125 0.341688 -0.0488125 0.658188 0.146437 0.853438L4.29294 4.99994L0.146437 9.14644C-0.0488125 9.34169 -0.0488125 9.65819 0.146437 9.85344C0.244188 9.95119 0.371938 9.99994 0.499938 9.99994C0.627937 9.99994 0.755688 9.95119 0.853438 9.85344L4.99994 5.70694L9.14644 9.85344C9.24419 9.95119 9.37194 9.99994 9.49994 9.99994C9.62794 9.99994 9.75569 9.95119 9.85344 9.85344C10.0487 9.65819 10.0487 9.34169 9.85344 9.14644L5.70694 4.99994Z" fill="#222222"/>
+</svg>

package/dist/components/Organisms/Membership/Membership.md

@@ -4,14 +4,14 @@
 
 ```js
 import data from './dev-data/data';
-const pictures = require('../../../styleguide/data/data').default;
+const defaultData = require('../../../styleguide/data/data').defaultData;
 
 <Membership
   alt="Background image"
   backgroundColor="orange_light"
   formAligntRight={true}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -26,13 +26,13 @@ const pictures = require('../../../styleguide/data/data').default;
 
 ```js
 import data from './dev-data/data';
-const pictures = require('../../../styleguide/data/data').default;
+const defaultData = require('../../../styleguide/data/data').defaultData;
 
 <Membership
   backgroundColor="orange_light"
   formAligntRight={false}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"

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

@@ -10,17 +10,17 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWith
 
 var _Membership = _interopRequireDefault(require("./Membership"));
 
-var _data = _interopRequireDefault(require("../../../styleguide/data/data"));
+var _data = require("../../../styleguide/data/data");
 
 var _data2 = _interopRequireDefault(require("./dev-data/data"));
 
-it('renders correctly', function () {
+it("renders correctly", function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Membership.default, {
     alt: "Background image",
     backgroundColor: "orange_light",
     formAligntRight: false,
-    imageLow: _data.default.imageLow,
-    images: _data.default.images,
+    imageLow: _data.defaultData.pictures.imageLow,
+    images: _data.defaultData.pictures.images,
     data: _data2.default,
     mbshipID: "mship-1",
     donateLink: "https://donation.comicrelief.com/",
@@ -29,5 +29,5 @@ it('renders correctly', function () {
     subtitle: "Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.",
     otherDescription: "Your donation will help us fund amazing projects in the UK and around the world."
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1.5rem;\n      line-height: 1.5rem;\n      text-transform: inherit;\n      font-weight: 800;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c7 {\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    .c12 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c16 {\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    .c22 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: 500;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c14 {\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      width: 100%;\n    }\n\n    .c17 {\n      margin-bottom: 0.5rem;\n    }\n\n    .c19 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c19:focus {\n      border: 1px solid #666;\n    }\n\n    .c18 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c0 {\n      background-color: #FEE3CC;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      min-height: 100vh;\n    }\n\n    .c2 {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: auto;\n    }\n\n    .c2:before {\n      color: #FEE3CC;\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-shadow: inset 0px 4rem 2rem -2rem;\n    }\n\n    .c4 {\n      position: relative;\n      max-width: 320px;\n      text-align: center;\n      margin-bottom: 50%;\n    }\n\n    .c5 {\n      padding: 2rem 1rem 0;\n      margin-bottom: 2rem;\n    }\n\n    .c8 {\n      background-color: #FFFFFF;\n      box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n      height: 450px;\n    }\n\n    .c9 {\n      padding: 1rem;\n    }\n\n    .c9 h3 {\n      margin-top: 1rem;\n    }\n\n    .c9 input {\n      max-width: 100%;\n      margin: 0;\n    }\n\n    .c10 {\n      padding: 0;\n      margin: 0;\n      border: none;\n    }\n\n    .c10 >:not(:last-child):not(legend) {\n      margin-bottom: 2rem;\n    }\n\n    .c11 {\n      margin: 0;\n      padding: 0;\n    }\n\n    .c13 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: justify;\n      -webkit-justify-content: space-between;\n      -ms-flex-pack: justify;\n      justify-content: space-between;\n    }\n\n    .c13 label {\n      -webkit-flex: 0 0 30%;\n      -ms-flex: 0 0 30%;\n      flex: 0 0 30%;\n    }\n\n    .c13 label input {\n      cursor: pointer;\n      padding: 1rem;\n    }\n\n    .c13 label:hover input {\n      border-color: #E52630;\n    }\n\n    .c21 {\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    }\n\n    .c23 {\n      margin-right: auto;\n    }\n\n    .c24 {\n      position: relative;\n      -webkit-flex: 0 0 50%;\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      font-weight: 400;\n      display: block;\n    }\n\n    .c24 span {\n      position: absolute;\n      padding: 0px 15px;\n      font-size: 20px;\n      top: 50%;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      left: 0px;\n      font-weight: 500;\n    }\n\n    .c24 input {\n      border: 2px solid #E1E2E3;\n      background: transparent;\n      padding: 0.5rem 1rem 0.5rem 2rem;\n    }\n\n    .c24 input:focus {\n      border: 2px solid #E52630;\n    }\n\n    .c26 {\n      line-height: 1.5;\n    }\n\n    .c25 {\n      width: 100%;\n      color: #FFFFFF;\n      font-size: 1rem;\n      font-weight: bold;\n      cursor: pointer;\n      padding: 1rem 0.5rem;\n      background: #E52630;\n      border: none;\n      border-radius: 100px;\n    }\n\n    .c25:active,\n    .c25:focus,\n    .c25:hover {\n      background-color: #961D35;\n    }\n\n    .c15 {\n      display: block;\n    }\n\n    .c15 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n    }\n\n    .c20 {\n      display: block;\n    }\n\n    .c20 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n      border-color: #E52630;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    @media (min-width:740px) {\n      .c19 {\n        max-width: 290px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        -webkit-align-items: center;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n        -webkit-box-pack: inherit;\n        -webkit-justify-content: inherit;\n        -ms-flex-pack: inherit;\n        justify-content: inherit;\n        min-height: 750px;\n        height: 100vh;\n        max-height: 900px;\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        height: 100%;\n      }\n\n      .c2:before {\n        content: none;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        margin: 0 8rem;\n        max-width: 420px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c8 {\n        height: 430px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c24 {\n        -webkit-flex: 0 0 60%;\n        -ms-flex: 0 0 60%;\n        flex: 0 0 60%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c25 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      id=\"mship-1\"\n    >\n      <div\n        className=\"c1 c2\"\n        height=\"100%\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"Background image\"\n          className=\"c3 lazyload\"\n          data-lowsrc=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=100&h=50&q=100\"\n          data-sizes=\"auto\"\n          data-src={null}\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={null}\n          srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n          width=\"100%\"\n        />\n      </div>\n      <div\n        className=\"c4\"\n      >\n        <div\n          className=\"c5\"\n        >\n          <h2\n            className=\"c6\"\n            color=\"inherit\"\n            size=\"l\"\n          >\n            Help someone like Jordan see a better tomorrow\n          </h2>\n          <p\n            className=\"c7\"\n            color=\"inherit\"\n            size=\"s\"\n          >\n            Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n          </p>\n        </div>\n        <div\n          className=\"c8\"\n        >\n          <form\n            className=\"c9\"\n            onSubmit={[Function]}\n          >\n            <fieldset\n              className=\"c10\"\n            >\n              <legend\n                className=\"c11\"\n              >\n                <h3\n                  className=\"c12\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Choose your monthly donation\n                </h3>\n              </legend>\n              <div\n                className=\"c13\"\n              >\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box1\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box1\"\n                      aria-label=\"\xA35\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box1\"\n                      name=\"mship-1--moneyBuy1\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 5\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c20\"\n                  htmlFor=\"mship-1--moneyBuy-box2\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box2\"\n                      aria-label=\"\xA310\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box2\"\n                      name=\"mship-1--moneyBuy2\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 10\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box3\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box3\"\n                      aria-label=\"\xA320\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box3\"\n                      name=\"mship-1--moneyBuy3\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 20\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <div\n                className=\"c21\"\n              >\n                <span\n                  className=\"c22 c23\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Other amount\n                </span>\n                <label\n                  className=\"c14 c24\"\n                  htmlFor=\"mship-1--MoneyBuy-userInput\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\xA3\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--MoneyBuy-userInput\"\n                      aria-label=\"Input a different amount\"\n                      className=\"c19\"\n                      id=\"mship-1--MoneyBuy-userInput\"\n                      max=\"20000\"\n                      min=\"1\"\n                      name=\"membership_amount\"\n                      onChange={[Function]}\n                      onClick={[Function]}\n                      onKeyPress={[Function]}\n                      pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n                      placeholder=\"0.00\"\n                      required={false}\n                      step=\"0.01\"\n                      type=\"number\"\n                      value=\"\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <input\n                className=\"c25\"\n                type=\"submit\"\n                value=\"Donate\"\n              />\n              <p\n                className=\"c26\"\n              />\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    </div>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c6 {\n      font-size: 1.5rem;\n      line-height: 1.5rem;\n      text-transform: inherit;\n      font-weight: 800;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c7 {\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    .c12 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c16 {\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    .c22 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: 500;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c1 {\n      display: block;\n      width: 100%;\n      height: 100%;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: 100%;\n      display: block;\n      object-fit: cover;\n    }\n\n    .c14 {\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      width: 100%;\n    }\n\n    .c17 {\n      margin-bottom: 0.5rem;\n    }\n\n    .c19 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c19:focus {\n      border: 1px solid #666;\n    }\n\n    .c18 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c0 {\n      background-color: #FEE3CC;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: center;\n      -webkit-justify-content: center;\n      -ms-flex-pack: center;\n      justify-content: center;\n      min-height: 100vh;\n    }\n\n    .c2 {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: auto;\n    }\n\n    .c2:before {\n      color: #FEE3CC;\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-shadow: inset 0px 4rem 2rem -2rem;\n    }\n\n    .c4 {\n      position: relative;\n      max-width: 320px;\n      text-align: center;\n      margin-bottom: 50%;\n    }\n\n    .c5 {\n      padding: 2rem 1rem 0;\n      margin-bottom: 2rem;\n    }\n\n    .c8 {\n      background-color: #FFFFFF;\n      box-shadow: 0px 1rem 4rem rgba(0,0,0,0.3);\n      height: 450px;\n    }\n\n    .c9 {\n      padding: 1rem;\n    }\n\n    .c9 h3 {\n      margin-top: 1rem;\n    }\n\n    .c9 input {\n      max-width: 100%;\n      margin: 0;\n    }\n\n    .c10 {\n      padding: 0;\n      margin: 0;\n      border: none;\n    }\n\n    .c10 >:not(:last-child):not(legend) {\n      margin-bottom: 2rem;\n    }\n\n    .c11 {\n      margin: 0;\n      padding: 0;\n    }\n\n    .c13 {\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: justify;\n      -webkit-justify-content: space-between;\n      -ms-flex-pack: justify;\n      justify-content: space-between;\n    }\n\n    .c13 label {\n      -webkit-flex: 0 0 30%;\n      -ms-flex: 0 0 30%;\n      flex: 0 0 30%;\n    }\n\n    .c13 label input {\n      cursor: pointer;\n      padding: 1rem;\n    }\n\n    .c13 label:hover input {\n      border-color: #E52630;\n    }\n\n    .c21 {\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    }\n\n    .c23 {\n      margin-right: auto;\n    }\n\n    .c24 {\n      position: relative;\n      -webkit-flex: 0 0 50%;\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      font-weight: 400;\n      display: block;\n    }\n\n    .c24 span {\n      position: absolute;\n      padding: 0px 15px;\n      font-size: 20px;\n      top: 50%;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      left: 0px;\n      font-weight: 500;\n    }\n\n    .c24 input {\n      border: 2px solid #E1E2E3;\n      background: transparent;\n      padding: 0.5rem 1rem 0.5rem 2rem;\n    }\n\n    .c24 input:focus {\n      border: 2px solid #E52630;\n    }\n\n    .c26 {\n      line-height: 1.5;\n    }\n\n    .c25 {\n      width: 100%;\n      color: #FFFFFF;\n      font-size: 1rem;\n      font-weight: bold;\n      cursor: pointer;\n      padding: 1rem 0.5rem;\n      background: #E52630;\n      border: none;\n      border-radius: 100px;\n    }\n\n    .c25:active,\n    .c25:focus,\n    .c25:hover {\n      background-color: #961D35;\n    }\n\n    .c15 {\n      display: block;\n    }\n\n    .c15 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n    }\n\n    .c20 {\n      display: block;\n    }\n\n    .c20 input {\n      border: 2px solid #E1E2E3;\n      font-size: 1.5rem;\n      font-weight: 800;\n      -webkit-letter-spacing: -2px;\n      -moz-letter-spacing: -2px;\n      -ms-letter-spacing: -2px;\n      letter-spacing: -2px;\n      height: auto;\n      border-color: #E52630;\n      background-color: #E52630;\n      color: #FFFFFF;\n    }\n\n    @media (min-width:740px) {\n      .c19 {\n        max-width: 290px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c0 {\n        -webkit-align-items: center;\n        -webkit-box-align: center;\n        -ms-flex-align: center;\n        align-items: center;\n        -webkit-box-pack: inherit;\n        -webkit-justify-content: inherit;\n        -ms-flex-pack: inherit;\n        justify-content: inherit;\n        min-height: 750px;\n        height: 100vh;\n        max-height: 900px;\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        height: 100%;\n      }\n\n      .c2:before {\n        content: none;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c4 {\n        margin: 0 8rem;\n        max-width: 420px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c8 {\n        height: 430px;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c24 {\n        -webkit-flex: 0 0 60%;\n        -ms-flex: 0 0 60%;\n        flex: 0 0 60%;\n      }\n    }\n\n    @media (min-width:1024px) {\n      .c25 {\n        width: auto;\n        padding: 1rem 2rem;\n        margin: 0 auto 2rem;\n      }\n    }\n\n    <div\n      className=\"c0\"\n      id=\"mship-1\"\n    >\n      <div\n        className=\"c1 c2\"\n        height=\"100%\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"Background image\"\n          className=\"c3 lazyload\"\n          data-src={null}\n          height=\"100%\"\n          width=\"100%\"\n        />\n      </div>\n      <div\n        className=\"c4\"\n      >\n        <div\n          className=\"c5\"\n        >\n          <h2\n            className=\"c6\"\n            color=\"inherit\"\n            size=\"l\"\n          >\n            Help someone like Jordan see a better tomorrow\n          </h2>\n          <p\n            className=\"c7\"\n            color=\"inherit\"\n            size=\"s\"\n          >\n            Jordan was close to suicide - which is now the biggest killer of men under 45 in the UK. Join now and help save lives.\n          </p>\n        </div>\n        <div\n          className=\"c8\"\n        >\n          <form\n            className=\"c9\"\n            onSubmit={[Function]}\n          >\n            <fieldset\n              className=\"c10\"\n            >\n              <legend\n                className=\"c11\"\n              >\n                <h3\n                  className=\"c12\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Choose your monthly donation\n                </h3>\n              </legend>\n              <div\n                className=\"c13\"\n              >\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box1\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box1\"\n                      aria-label=\"\xA35\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box1\"\n                      name=\"mship-1--moneyBuy1\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 5\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c20\"\n                  htmlFor=\"mship-1--moneyBuy-box2\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box2\"\n                      aria-label=\"\xA310\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box2\"\n                      name=\"mship-1--moneyBuy2\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 10\"\n                    />\n                  </div>\n                  \n                </label>\n                <label\n                  className=\"c14 c15\"\n                  htmlFor=\"mship-1--moneyBuy-box3\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--moneyBuy-box3\"\n                      aria-label=\"\xA320\"\n                      className=\"c19\"\n                      id=\"mship-1--moneyBuy-box3\"\n                      name=\"mship-1--moneyBuy3\"\n                      onClick={[Function]}\n                      placeholder=\"\"\n                      required={false}\n                      type=\"button\"\n                      value=\"\xA3 20\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <div\n                className=\"c21\"\n              >\n                <span\n                  className=\"c22 c23\"\n                  color=\"inherit\"\n                  size=\"s\"\n                >\n                  Other amount\n                </span>\n                <label\n                  className=\"c14 c24\"\n                  htmlFor=\"mship-1--MoneyBuy-userInput\"\n                >\n                  <span\n                    className=\"c16 c17\"\n                    color=\"inherit\"\n                    dangerouslySetInnerHTML={\n                      Object {\n                        \"__html\": \"\xA3\",\n                      }\n                    }\n                    size=\"s\"\n                  />\n                  <div\n                    className=\"c18\"\n                  >\n                    \n                    <input\n                      aria-describedby=\"mship-1--MoneyBuy-userInput\"\n                      aria-label=\"Input a different amount\"\n                      className=\"c19\"\n                      id=\"mship-1--MoneyBuy-userInput\"\n                      max=\"20000\"\n                      min=\"1\"\n                      name=\"membership_amount\"\n                      onChange={[Function]}\n                      onClick={[Function]}\n                      onKeyPress={[Function]}\n                      pattern=\"[^[0-9]+([,.][0-9]+)?$]\"\n                      placeholder=\"0.00\"\n                      required={false}\n                      step=\"0.01\"\n                      type=\"number\"\n                      value=\"\"\n                    />\n                  </div>\n                  \n                </label>\n              </div>\n              <input\n                className=\"c25\"\n                type=\"submit\"\n                value=\"Donate\"\n              />\n              <p\n                className=\"c26\"\n              />\n            </fieldset>\n          </form>\n        </div>\n      </div>\n    </div>\n  ");
 });

package/dist/styleguide/data/data.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = {
+exports.mobileImages = exports.defaultData = void 0;
+var defaultData = {
   title: 'What your money does',
   text: 'When you donate to Comic Relief or Sport Relief, you’re supporting vulnerable people and communities in the UK and internationally.',
   pictures: {
@@ -18,4 +18,10 @@ var _default = {
   image: 'http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg',
   images: '//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'
 };
-exports.default = _default;
+exports.defaultData = defaultData;
+var mobileImages = {
+  imageLow: 'http://images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=100&h=50&q=100',
+  image: 'https://images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg',
+  images: '//https://images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=1440&h=1080&q=50 1440w'
+};
+exports.mobileImages = mobileImages;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -34,6 +34,7 @@
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.3.0",
     "react-modal": "^3.14.3",
+    "react-responsive": "^9.0.0",
     "react-scripts": "4.0.3",
     "react-spinners": "^0.11.0",
     "react-styleguidist": "^11.1.7",

package/src/components/Atoms/Picture/Picture.md

@@ -3,19 +3,17 @@ Picture has depenciy of <a href="https://github.com/aFarkas/lazysizes#readme" st
 Picture
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
-<Picture alt="test Image" imageLow={data.imageLow} images={data.images} />;
+const defaultData = require('../../../styleguide/data/data').defaultData;
+<Picture alt="test Image" imageLow={defaultData.imageLow} images={defaultData.images} />;
 ```
 
 Custom Size.
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-<Picture
+const defaultData = require('../../../styleguide/data/data').defaultData;<Picture
   alt="test Image"
-  imageLow={data.imageLow}
-  images={data.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   objectFit="cover"
   width="300px"
   height="200px"
@@ -25,6 +23,5 @@ const data = require('../../../styleguide/data/data').default;
 Single image
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-<Picture alt="test Image" image={data.image} objectFit="cover" />;
+const defaultData = require('../../../styleguide/data/data').defaultData;<Picture alt="test Image" image={defaultData.image} objectFit="cover" />;
 ```

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

@@ -2,11 +2,10 @@ import React from 'react';
 import 'jest-styled-components';
 import renderWithTheme from '../../../hoc/shallowWithTheme';
 import Picture from './Picture';
-import data from '../../../styleguide/data/data';
-
+import { defaultData } from '../../../styleguide/data/data';
 it('renders correctly', () => {
   const tree = renderWithTheme(
-    <Picture images={data.images} image={data.image} alt="Test images" />
+    <Picture images={defaultData.images} image={defaultData.image} alt="Test images" />
   ).toJSON();
 
   expect(tree).toMatchInlineSnapshot(`
@@ -48,8 +47,8 @@ it('renders correctly', () => {
 it('renders correctly with custom props', () => {
   const tree = renderWithTheme(
     <Picture
-      images={data.images}
-      image={data.image}
+      images={defaultData.images}
+      image={defaultData.image}
       objectFit="cover"
       width="200px"
       height="100px"

package/src/components/Molecules/ArticleTeaser/ArticleTeaser.md

@@ -1,13 +1,12 @@
 ### Article teaser
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-<div style={{ display: 'flex', background: '#E1E2E3' }}>
+const defaultData = require('../../../styleguide/data/data').defaultData;<div style={{ display: 'flex', background: '#E1E2E3' }}>
   <div style={{ margin: '1rem', width: '300px' }}>
     <ArticleTeaser
       href="/test"
-      images={data.images}
-      imageLow={data.imageLow}
+      images={defaultData.images}
+      imageLow={defaultData.imageLow}
       date=" 01 July 2019"
       title="News article"
       alt="Image's description"
@@ -17,8 +16,8 @@ const data = require('../../../styleguide/data/data').default;
   <div style={{ margin: '1rem', width: '300px' }}>
     <ArticleTeaser
       href="/test"
-      images={data.images}
-      imageLow={data.imageLow}
+      images={defaultData.images}
+      imageLow={defaultData.imageLow}
       date=" 01 July 2019"
       title="News article News article"
       alt="Image's description"
@@ -31,8 +30,7 @@ const data = require('../../../styleguide/data/data').default;
 ### Article teaser: Press release
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-<ArticleTeaser
+const defaultData = require('../../../styleguide/data/data').defaultData;<ArticleTeaser
   href="/test"
   category=""
   date=" 01 July 2019"

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

@@ -2,14 +2,13 @@ import React from 'react';
 import 'jest-styled-components';
 import renderWithTheme from '../../../hoc/shallowWithTheme';
 import ArticleTeaser from './ArticleTeaser';
-import data from '../../../styleguide/data/data';
-
+import { defaultData } from '../../../styleguide/data/data';
 it('renders article teaser correctly', () => {
   const tree = renderWithTheme(
     <ArticleTeaser
       href="/test"
-      images={data.images}
-      image={data.image}
+      images={defaultData.images}
+      image={defaultData.image}
       date=" 01 July 2019"
       title="News article"
       copy="News article copy"

package/src/components/Molecules/Box/Box.md

@@ -3,12 +3,11 @@
 ## Flexible container only (‘invisible’ to user)
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 <div style={{ display: 'flex', background: '#E1E2E3' }}>
   <div style={{ width: '50%', margin: '1rem' }}>
-    <Box imageLow={data.image} images={data.images} height="auto">
+    <Box imageLow={defaultData.image} images={defaultData.images} height="auto">
       <Text tag="h3" family="Anton" color="black" size="xl" uppercase>
         Title
       </Text>
@@ -16,7 +15,7 @@ import Link from '../../Atoms/Link/Link';
     </Box>
   </div>
   <div style={{ width: '50%', margin: '1rem' }}>
-    <Box imageLow={data.image} images={data.images} height="auto">
+    <Box imageLow={defaultData.image} images={defaultData.images} height="auto">
       <Text tag="h3" family="Anton" color="black" size="xl" uppercase>
         Title
       </Text>
@@ -29,7 +28,6 @@ import Link from '../../Atoms/Link/Link';
 ### Box no body
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
-<Box imageLow={data.image} images={data.image} />;
+const defaultData = require('../../../styleguide/data/data').defaultData;
+<Box imageLow={defaultData.image} images={defaultData.image} />;
 ```

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

@@ -2,11 +2,10 @@ import React from 'react';
 import 'jest-styled-components';
 import renderWithTheme from '../../../hoc/shallowWithTheme';
 import Box from './Box';
-import data from '../../../styleguide/data/data';
-
+import { defaultData } from '../../../styleguide/data/data';
 it('renders correctly', () => {
   const tree = renderWithTheme(
-    <Box imageLow={data.image} images={data.image}>
+    <Box imageLow={defaultData.image} images={defaultData.image}>
       <h2>Title</h2>
       <p>Description</p>
     </Box>

package/src/components/Molecules/Card/Card.md

@@ -1,13 +1,12 @@
 # Card
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <Card
-  imageLow={data.image}
-  images={data.images}
+  imageLow={defaultData.image}
+  images={defaultData.images}
   backgroundColor="yellow"
   height="auto"
 >
@@ -21,7 +20,6 @@ import Link from '../../Atoms/Link/Link';
 ### Card no body
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
-<Card imageLow={data.image} images={data.image} />;
+const defaultData = require('../../../styleguide/data/data').defaultData;
+<Card imageLow={defaultData.image} images={defaultData.image} />;
 ```

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

@@ -2,11 +2,10 @@ import React from 'react';
 import 'jest-styled-components';
 import renderWithTheme from '../../../hoc/shallowWithTheme';
 import Card from './Card';
-import data from '../../../styleguide/data/data';
-
+import { defaultData } from '../../../styleguide/data/data';
 it('renders correctly', () => {
   const tree = renderWithTheme(
-    <Card image={data.image} images={data.image} backgroundColor="yellow">
+    <Card image={defaultData.image} images={defaultData.image} backgroundColor="yellow">
       <h2>Title</h2>
       <p>Description</p>
     </Card>
@@ -17,7 +16,7 @@ it('renders correctly', () => {
 
 it('renders correctly with no body', () => {
   const tree = renderWithTheme(
-    <Card imageLow={data.image} images={data.image} backgroundColor="yellow" />
+    <Card imageLow={defaultData.image} images={defaultData.image} backgroundColor="yellow" />
   ).toJSON();
 
   expect(tree).toMatchSnapshot();

package/src/components/Molecules/CardDs/CardDs.md

@@ -4,8 +4,7 @@
 
 ### CardDs:  Image, Text & Link
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import { Internal } from '../../Atoms/Icons/index';
 
@@ -21,8 +20,8 @@ import { Internal } from '../../Atoms/Icons/index';
     target="_blank"
     link="/home"
     linkLabel="find out more"
-    imageLow={data.image}
-    images={data.images}
+    imageLow={defaultData.image}
+    images={defaultData.images}
     imageAltText="Happy man going to work"
     backgroundColor="white"
     height="auto"
@@ -39,8 +38,7 @@ import { Internal } from '../../Atoms/Icons/index';
 
 ### CardDs: Text & Link
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import { Download } from '../../Atoms/Icons/index';
 
@@ -70,8 +68,7 @@ import { Download } from '../../Atoms/Icons/index';
 
 ### CardDs: Text only
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 <div
   style={{
@@ -92,8 +89,7 @@ import Link from '../../Atoms/Link/Link';
 
 ### CardDs: Image & Text, No Link
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import { Internal } from '../../Atoms/Icons/index';
 
@@ -107,8 +103,8 @@ import { Internal } from '../../Atoms/Icons/index';
 >
   <CardDs
     target="_blank"
-    imageLow={data.image}
-    images={data.images}
+    imageLow={defaultData.image}
+    images={defaultData.images}
     imageAltText="Happy man going to work"
     backgroundColor="white"
     height="auto"

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

@@ -2,8 +2,7 @@ import React from 'react';
 import 'jest-styled-components';
 import renderWithTheme from '../../../hoc/shallowWithTheme';
 import CardDs from './CardDs';
-import data from '../../../styleguide/data/data';
-import { Internal } from '../../Atoms/Icons/index';
+import { defaultData }  from '../../../styleguide/data/data';import { Internal } from '../../Atoms/Icons/index';
 
 it('renders correctly', () => {
   const tree = renderWithTheme(
@@ -11,8 +10,8 @@ it('renders correctly', () => {
       target="_blank"
       link="/home"
       linkLabel="Find out more"
-      imageLow={data.image}
-      images={data.images}
+      imageLow={defaultData.image}
+      images={defaultData.images}
       backgroundColor="white"
       height="auto"
       icon={<Internal colour="white" />}

package/src/components/Molecules/PartnerLink/PartnerLink.md

@@ -1,9 +1,8 @@
 # Partner Link
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Picture from '../../Atoms/Picture/Picture';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Picture from '../../Atoms/Picture/Picture';
 <PartnerLink link="https://www.comicrelief.com">
-  <Picture alt="test Image" imageLow={data.imageLow} images={data.images} />
+  <Picture alt="test Image" imageLow={defaultData.imageLow} images={defaultData.images} />
 </PartnerLink>;
 ```

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

@@ -4,12 +4,11 @@ import 'jest-styled-components';
 import renderWithTheme from '../../../hoc/shallowWithTheme';
 import PartnerLink from './PartnerLink';
 import Picture from '../../Atoms/Picture/Picture';
-import data from '../../../styleguide/data/data';
-
+import { defaultData } from '../../../styleguide/data/data';
 it('renders correctly', () => {
   const tree = renderWithTheme(
     <PartnerLink link="https://www.comicrelief.com">
-      <Picture alt="test Image" imageLow={data.imageLow} images={data.images} />
+      <Picture alt="test Image" imageLow={defaultData.imageLow} images={defaultData.images} />
     </PartnerLink>
   ).toJSON();
 

package/src/components/Molecules/Promo/Promo.md

@@ -1,8 +1,7 @@
 Promo
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <div>
@@ -11,9 +10,9 @@ import Link from '../../Atoms/Link/Link';
 </Text>
 <Promo
   backgroundColor="blue_dark"
-  imageSet={data.promoImage}
-  image={data.promoImage}
-  imageLow={data.promoImage}
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
   imageAltText=""
   copyFirst={true}
   hasOverlay={true}
@@ -47,9 +46,9 @@ import Link from '../../Atoms/Link/Link';
 </Text>
 <Promo
   backgroundColor="blue_dark"
-  imageSet={data.promoImage}
-  image={data.promoImage}
-  imageLow={data.promoImage}
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
   imageAltText=""
   copyFirst={true}
   hasOverlay={true}
@@ -83,9 +82,9 @@ import Link from '../../Atoms/Link/Link';
 </Text>
 <Promo
   backgroundColor="blue_dark"
-  imageSet={data.promoImage}
-  image={data.promoImage}
-  imageLow={data.promoImage}
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
   imageAltText=""
   copyFirst={true}
   hasOverlay={true}
@@ -119,9 +118,9 @@ import Link from '../../Atoms/Link/Link';
 </Text>
 <Promo
   backgroundColor="blue_dark"
-  imageSet={data.promoImage}
-  image={data.promoImage}
-  imageLow={data.promoImage}
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
   imageAltText=""
   copyFirst={true}
   hasOverlay={true}

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

@@ -5,14 +5,13 @@ import Promo from './Promo';
 import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 it('renders Promo correctly', () => {
   const tree = renderWithTheme(
     <Promo
       backgroundColor="blue_dark"
-      imageSet={data.promoImage}
-      image={data.promoImage}
+      imageSet={defaultData.promoImage}
+      image={defaultData.promoImage}
       imageAltText=""
       copyFirst={false}
     >
@@ -45,8 +44,8 @@ it('renders Promo correctly end position', () => {
   const tree = renderWithTheme(
     <Promo
       backgroundColor="blue_dark"
-      imageSet={data.promoImage}
-      image={data.promoImage}
+      imageSet={defaultData.promoImage}
+      image={defaultData.promoImage}
       imageAltText=""
       copyFirst={false}
       position="end"