@comicrelief/component-library 6.1.5 → 6.3.0

package/cypress/integration/components/Organisms/Donate.spec.js

@@ -1,283 +1,283 @@
 describe('Donate component', () => {
-    before(() => {
-        // go to donate component
-        cy.visit('/#donate');
-    });
+  before(() => {
+    // go to donate component
+    cy.visit('/#donate');
+  });
 
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Donate-container"] button[name="rsg-usage"]')
-                .contains('Props & methods')
-                .as('propsBtn');
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Donate-container"] button[name="rsg-usage"]')
+        .contains('Props & methods')
+        .as('propsBtn');
 
-            cy.get('@propsBtn')
-                .closest('[class^=rsg--tabs]')
-                .as('container');
-        });
+      cy.get('@propsBtn')
+        .closest('[class^=rsg--tabs]')
+        .as('container');
+    });
 
-        it('is present', () => {
-            cy.get('@propsBtn').should('exist');
-        });
+    it('is present', () => {
+      cy.get('@propsBtn').should('exist');
+    });
 
-        it('does not show table initially', () => {
-            cy.get('@container')
-                .find('table')
-                .should('not.exist');
-        });
+    it('does not show table initially', () => {
+      cy.get('@container')
+        .find('table')
+        .should('not.exist');
+    });
 
-        it('shows the table on button click', () => {
-            cy.get('@propsBtn').click();
-            cy.get('@container')
-                .find('table')
-                .should('contain', 'Prop name');
-        });
+    it('shows the table on button click', () => {
+      cy.get('@propsBtn').click();
+      cy.get('@container')
+        .find('table')
+        .should('contain', 'Prop name');
     });
+  });
 
-    describe('Donate Form align right section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Donate-example-1"]')
-                .as('container')
-                .find('[data-preview="Donate"]')
-                .as('preview');
+  describe('Donate Form align right section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Donate-example-1"]')
+        .as('container')
+        .find('[data-preview="Donate"]')
+        .as('preview');
 
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
 
-        it('renders donate form align right preview', () => {
-            //monthly
-            cy.get('@container')
-                .find('label[for="give-once"]')
-                .contains('Give once');
-            cy.get('@container')
-                .find('label[for="give-monthly"]')
-                .contains('Give monthly')
-                .click();
-            cy.get('@container')
-                .find('#mship-1--moneyBuy-box2')
-                .should('exist')
-                .click();
-            cy.get('@container')
-                .find('[id="mship-1--MoneyBuy-userInput"]')
-                .should('have.value','10')
-                .clear()
-                .type('15.99')
-                .clear()
-                .type(' ');
-            cy.get('@container')
-                .find('p:nth-child(5)')
-                .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places')
-            cy.get('@container')
-                .find('[id="mship-1--MoneyBuy-userInput"]')
-                .type('15.999');
-            cy.get('@container')
-                .find('p:nth-child(5)')
-                .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
-            cy.get('@container')
-                .find('form > fieldset > input')
-                .contains('Donate monthly');
-            cy.get('@container')
-                .find('h2')
-                .should('exist');
-        });
+    it('renders donate form align right preview', () => {
+      // monthly
+      cy.get('@container')
+        .find('label[for="give-once"]')
+        .contains('Single');
+      cy.get('@container')
+        .find('label[for="give-monthly"]')
+        .contains('Monthly')
+        .click();
+      cy.get('@container')
+        .find('#mship-1--moneyBuy-box2')
+        .should('exist')
+        .click();
+      cy.get('@container')
+        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .should('have.value', '10')
+        .clear()
+        .type('15.99')
+        .clear()
+        .type(' ');
+      cy.get('@container')
+        .find('p:nth-child(5)')
+        .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
+      cy.get('@container')
+        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .type('15.999');
+      cy.get('@container')
+        .find('p:nth-child(5)')
+        .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
+      cy.get('@container')
+        .find('form > fieldset > input')
+        .contains('Donate monthly');
+      cy.get('@container')
+        .find('h2')
+        .should('exist');
+    });
 
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
+    it('has view code button', () => {
+      cy.get('@viewCodeBtn').should('exist');
+    });
 
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
+    it('shows code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('exist');
+    });
 
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-        });
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
     });
+  });
 
-    describe('Donate Form align left section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Donate-example-3"]')
-                .as('container')
-                .find('[data-preview="Donate"]')
-                .as('preview');
+  describe('Donate Form align left section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Donate-example-3"]')
+        .as('container')
+        .find('[data-preview="Donate"]')
+        .as('preview');
 
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
 
-        it('renders donate form align left preview', () => {
-            cy.get('@container')
-                .find('label[for="give-once"]')
-                .contains('Give once');
-            cy.get('@container')
-                .find('label[for="give-monthly"]')
-                .contains('Give monthly');
-            cy.get('@container')
-                .find('#mship-1--moneyBuy-box2')
-                .should('exist')
-                .click();
-            cy.get('@container')
-                .find('[id="mship-1--MoneyBuy-userInput"]')
-                .should('have.value','20')
-                .clear()
-                .type(' ');
-            cy.get('@container')
-                .find('p:nth-child(5)')
-                .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places')
-            cy.get('@container')
-                .find('[id="mship-1--MoneyBuy-userInput"]')
-                .type('10.999');
-            cy.get('@container')
-                .find('p:nth-child(5)')
-                .should('contain','Please enter an amount between £1 and £20000 and up to 2 decimal places');
-            cy.get('@container')
-                .find('form > fieldset > input')
-                .contains('Donate once');
-            cy.get('@container')
-                .find('h2')
-                .should('exist');
-        });
+    it('renders donate form align left preview', () => {
+      cy.get('@container')
+        .find('label[for="give-once"]')
+        .contains('Single');
+      cy.get('@container')
+        .find('label[for="give-monthly"]')
+        .contains('Monthly');
+      cy.get('@container')
+        .find('#mship-1--moneyBuy-box2')
+        .should('exist')
+        .click();
+      cy.get('@container')
+        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .should('have.value', '20')
+        .clear()
+        .type(' ');
+      cy.get('@container')
+        .find('p:nth-child(5)')
+        .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
+      cy.get('@container')
+        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .type('10.999');
+      cy.get('@container')
+        .find('p:nth-child(5)')
+        .should('contain', 'Please enter an amount between £1 and £20000 and up to 2 decimal places');
+      cy.get('@container')
+        .find('form > fieldset > input')
+        .contains('Donate now');
+      cy.get('@container')
+        .find('h2')
+        .should('exist');
+    });
 
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
+    it('has view code button', () => {
+      cy.get('@viewCodeBtn').should('exist');
+    });
 
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
+    it('shows code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('exist');
+    });
 
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-        });
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
     });
+  });
 
-    describe('Single Giving section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Donate-example-5"]')
-                .as('container')
-                .find('[data-preview="Donate"]')
-                .as('preview');
+  describe('Single Giving section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Donate-example-5"]')
+        .as('container')
+        .find('[data-preview="Donate"]')
+        .as('preview');
 
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
 
-        it('renders Single Giving preview', () => {
-            cy.get('@container')
-                .find('label[for="give-once"]')
-                .should('not.exist');
-            cy.get('@container')
-                .find('#mship-1--moneyBuy-box3')
-                .should('exist')
-                .click();
-            cy.get('@container')
-                .find('[id="mship-1--MoneyBuy-userInput"]')
-                .should('have.value','30')
-                .clear()
-                .type('10.99')
-                .clear()
-                .type(' ');
-            cy.get('@container')
-                .find('p:nth-child(5)')
-                .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places')
-            cy.get('@container')
-                .find('[id="mship-1--MoneyBuy-userInput"]')
-                .type('10.999');
-            cy.get('@container')
-                .find('p:nth-child(5)')
-                .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
-            cy.get('@container')
-                .find('form > fieldset > input')
-                .contains('Donate once');
-            cy.get('@container')
-                .find('h2')
-                .should('exist');
-        });
+    it('renders Single Giving preview', () => {
+      cy.get('@container')
+        .find('label[for="give-once"]')
+        .should('not.exist');
+      cy.get('@container')
+        .find('#mship-1--moneyBuy-box3')
+        .should('exist')
+        .click();
+      cy.get('@container')
+        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .should('have.value', '30')
+        .clear()
+        .type('10.99')
+        .clear()
+        .type(' ');
+      cy.get('@container')
+        .find('p:nth-child(5)')
+        .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
+      cy.get('@container')
+        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .type('10.999');
+      cy.get('@container')
+        .find('p:nth-child(5)')
+        .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
+      cy.get('@container')
+        .find('form > fieldset > input')
+        .contains('Donate now');
+      cy.get('@container')
+        .find('h2')
+        .should('exist');
+    });
 
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
+    it('has view code button', () => {
+      cy.get('@viewCodeBtn').should('exist');
+    });
 
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
+    it('shows code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('exist');
+    });
 
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-        });
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
     });
+  });
 
-    describe('Single Giving "No Money Buys" section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Donate-example-7"]')
-                .as('container')
-                .find('[data-preview="Donate"]')
-                .as('preview');
+  describe('Single Giving "No Money Buys" section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Donate-example-7"]')
+        .as('container')
+        .find('[data-preview="Donate"]')
+        .as('preview');
 
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
 
-        it('renders Single Giving "No Money Buys" preview', () => {
-            cy.get('@container')
-                .find('label[for="give-once"]')
-                .should('not.exist');
-            cy.get('@container')
-                .find('#mship-1--moneyBuy-box1')
-                .should('not.exist');
-            cy.get('@container')
-                .find('[id="mship-1--MoneyBuy-userInput"]')
-                .should('exist')
-                .clear()
-                .type('5')
-                .clear();
-            cy.get('@container')
-                .find('p:nth-child(4)')
-                .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places')
-            cy.get('@container')
-                .find('[id="mship-1--MoneyBuy-userInput"]')
-                .type('10.999')
-                .clear()
-                .type('5')
-                .should('not.have','Please enter an amount between £1 and £20000 and up to 2 decimal places');
-            cy.get('@container')
-                .find('form > fieldset > input')
-                .contains('Donate');
-            cy.get('@container')
-                .find('h2')
-                .should('exist');
-        });
+    it('renders Single Giving "No Money Buys" preview', () => {
+      cy.get('@container')
+        .find('label[for="give-once"]')
+        .should('not.exist');
+      cy.get('@container')
+        .find('#mship-1--moneyBuy-box1')
+        .should('not.exist');
+      cy.get('@container')
+        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .should('exist')
+        .clear()
+        .type('5')
+        .clear();
+      cy.get('@container')
+        .find('p:nth-child(4)')
+        .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
+      cy.get('@container')
+        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .type('10.999')
+        .clear()
+        .type('5')
+        .should('not.have', 'Please enter an amount between £1 and £20000 and up to 2 decimal places');
+      cy.get('@container')
+        .find('form > fieldset > input')
+        .contains('Donate');
+      cy.get('@container')
+        .find('h2')
+        .should('exist');
+    });
 
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
+    it('has view code button', () => {
+      cy.get('@viewCodeBtn').should('exist');
+    });
 
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
+    it('shows code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('exist');
+    });
 
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-        });
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
     });
+  });
 });

package/dist/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/dist/components/Atoms/Picture/Picture.test.js

@@ -10,20 +10,20 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWith
 
 var _Picture = _interopRequireDefault(require("./Picture"));
 
-var _data = _interopRequireDefault(require("../../../styleguide/data/data"));
+var _data = require("../../../styleguide/data/data");
 
 it('renders correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Picture.default, {
-    images: _data.default.images,
-    image: _data.default.image,
+    images: _data.defaultData.images,
+    image: _data.defaultData.image,
     alt: "Test images"
   })).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c1 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    <div\n      className=\"c0 lazyload\"\n      height=\"auto\"\n      width=\"100%\"\n    >\n      <img\n        alt=\"Test images\"\n        className=\"c1 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=\"auto\"\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  ");
 });
 it('renders correctly with custom props', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Picture.default, {
-    images: _data.default.images,
-    image: _data.default.image,
+    images: _data.defaultData.images,
+    image: _data.defaultData.image,
     objectFit: "cover",
     width: "200px",
     height: "100px",

package/dist/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"