@comicrelief/component-library 7.19.1 → 7.19.2

package/cypress/integration/components/molecules/singleMessageDs.spec.js

@@ -0,0 +1,248 @@
+describe('Single Message Ds component', () => {
+  before(() => {
+    // go to single message Ds component
+    cy.visit('/#singlemessageds');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SingleMessageDs-container"] button[name="rsg-usage"]')
+        .contains('Props & methods')
+        .as('propsBtn');
+
+      cy.get('@propsBtn')
+        .closest('[class^=rsg--tabs]')
+        .as('container');
+    });
+
+    it('is present', () => {
+      cy.get('@propsBtn').should('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');
+    });
+  });
+
+  describe('SingleMessageDs-example-1: Image align left and CTA are clickable', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SingleMessageDs-example-1"]')
+        .as('container')
+        .find('[data-preview="SingleMessageDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders image align left and CTA are clickable', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('h4')
+        .contains('Heading Line 1 Heading Line 2');
+      cy.get('@container')
+        .find('p')
+        .should('exist');
+      cy.get('@container')
+        .find('a')
+        .contains('Check out')
+        .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('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
+
+  describe('SingleMessageDs-example-3: Image align right and CTA are clickable', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SingleMessageDs-example-3"]')
+        .as('container')
+        .find('[data-preview="SingleMessageDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders image align right and CTA are clickable', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('h4')
+        .contains('Heading Line 1 Heading Line 2');
+      cy.get('@container')
+        .find('p')
+        .should('exist');
+      cy.get('@container')
+        .find('a')
+        .contains('Check out');
+    });
+
+    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('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
+
+  describe('SingleMessageDs-example-5: SingleMessageDs-example-5', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SingleMessageDs-example-5"]')
+        .as('container')
+        .find('[data-preview="SingleMessageDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders SingleMessageDs-example-5', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('h4')
+        .contains('Heading Line 1 Heading Line 2')
+        .should('exist');
+      cy.get('@container')
+        .find('p')
+        .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('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
+
+  describe('SingleMessageDs-example-7: Using the linkIcon prop', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SingleMessageDs-example-7"]')
+        .as('container')
+        .find('[data-preview="SingleMessageDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders Using the linkIcon prop', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('h1')
+        .should('not.exist');
+      cy.get('@container')
+        .find('p')
+        .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('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
+
+  describe('SingleMessageDs-example-9: Video with no CTA', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SingleMessageDs-example-9"]')
+        .as('container')
+        .find('[data-preview="SingleMessageDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders single message vertical height preview', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('h1')
+        .should('not.exist');
+      cy.get('@container')
+        .find('p')
+        .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('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
+});

package/cypress/integration/components/molecules/videoBanner.spec.js

@@ -0,0 +1,140 @@
+describe('Video Banner component', () => {
+  before(() => {
+    // go to video banner component
+    cy.visit('/#videobanner');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="VideoBanner-container"] button[name="rsg-usage"]')
+        .contains('Props & methods')
+        .as('propsBtn');
+
+      cy.get('@propsBtn')
+        .closest('[class^=rsg--tabs]')
+        .as('container');
+    });
+
+    it('is present', () => {
+      cy.get('@propsBtn').should('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');
+    });
+  });
+
+  describe('VideoBanner-example-1: Default Video Banner', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="VideoBanner-example-1"]')
+        .as('container')
+        .find('[data-preview="VideoBanner"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders video banner preview', () => {
+      cy.get('@container')
+        .find('video')
+        .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('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
+
+  describe('VideoBanner-example-3: Looping Video Banner With Controls', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="VideoBanner-example-3"]')
+        .as('container')
+        .find('[data-preview="VideoBanner"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders looping Video Banner With Controls preview', () => {
+      cy.get('@container')
+        .find('video')
+        .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('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
+
+  describe('VideoBanner-example-5: Non-autoplay Video Banner', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="VideoBanner-example-5"]')
+          .as('container')
+          .find('[data-preview="VideoBanner"]')
+          .as('preview');
+
+      cy.get('@container')
+          .find('button')
+          .contains('View Code')
+          .as('viewCodeBtn');
+    });
+
+    it('renders Non-autoplay Video Banner preview', () => {
+      cy.get('@container')
+          .find('video')
+          .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('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
+});

package/cypress/integration/components/organisms/cookieBanner.spec.js

@@ -0,0 +1,82 @@
+describe('Cookie Banner component', () => {
+  before(() => {
+    // go to cookie banner component
+    cy.visit('/#cookiebanner');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="CookieBanner-container"] button[name="rsg-usage"]')
+        .contains('Props & methods')
+        .as('propsBtn');
+
+      cy.get('@propsBtn')
+        .closest('[class^=rsg--tabs]')
+        .as('container');
+    });
+
+    it('is present', () => {
+      cy.get('@propsBtn').should('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');
+    });
+  });
+
+  describe('Cookie Banner section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="CookieBanner-example-1"]')
+        .as('container')
+        .find('[data-preview="CookieBanner"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders cookie banner preview', () => {
+      cy.get('@container')
+        .find('p')
+        .contains('Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about');
+      cy.get('@container')
+        .find('a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/cookies-policy')
+        .contains('our use of cookies');
+      cy.get('@container')
+        .find('p:nth-child(2) > a:nth-child(1)')
+        .contains('Accept')
+        .click();
+      cy.get('@container')
+        .find('p:nth-child(2) > a:nth-child(2)')
+        .should('exist')
+        .contains('here');
+    });
+
+    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('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
+});

package/cypress/integration/components/organisms/footer.spec.js

@@ -0,0 +1,166 @@
+describe('Footer component', () => {
+  before(() => {
+    // go to footer component
+    cy.visit('/#footer');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Footer-container"] button[name="rsg-usage"]')
+        .contains('Props & methods')
+        .as('propsBtn');
+
+      cy.get('@propsBtn')
+        .closest('[class^=rsg--tabs]')
+        .as('container');
+    });
+
+    it('is present', () => {
+      cy.get('@propsBtn').should('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');
+    });
+  });
+
+  describe('Footer section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Footer-example-1"]')
+        .as('container')
+        .find('[data-preview="Footer"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders footer preview', () => {
+      //Hear from us
+      cy.get('@container')
+        .find('ul > li:nth-child(1) > span')
+        .contains('Hear from us');
+      cy.get('@container')
+        .find('ul > li:nth-child(1) > ul > li:nth-child(1) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/#')
+        .contains('Get the newsletter');
+      cy.get('@container')
+        .find('ul > li:nth-child(1) > ul > li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/update-your-preferences')
+        .contains('How we contact you');
+
+      //Get in touch
+      cy.get('@container')
+        .find('ul > li:nth-child(2) > span')
+        .contains('Get in touch');
+      cy.get('@container')
+        .find('ul > li:nth-child(2) > ul > li:nth-child(1) > a')
+        .should('have.attr', 'href', '/contact-us')
+        .contains('Contact us');
+      cy.get('@container')
+        .find('ul > li:nth-child(2) > ul > li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://giftaid.comicrelief.com/update')
+        .contains('Your Gift Aid');
+      cy.get('@container')
+        .find('ul > li:nth-child(2) > ul > li:nth-child(3) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/frequently-asked-questions')
+        .contains('FAQs');
+      cy.get('@container')
+        .find('ul > li:nth-child(2) > ul > li:nth-child(4) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/red-nose-days-frequently-asked-questions')
+        .contains('Red Nose Day 2019 FAQs');
+
+      //About us
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > span')
+        .contains('About us');
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > ul > li:nth-child(1) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/about-comic-relief')
+        .contains('Mission');
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > ul > li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/about-comic-relief/history')
+        .contains('Our history');
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > ul > li:nth-child(3) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/about-comic-relief/finances')
+        .contains('Finances');
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > ul > li:nth-child(4) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/working-with-us')
+        .contains('Partners');
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > ul > li:nth-child(5) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/about-comic-relief/meet-the-team')
+        .contains('Meet the team');
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > ul > li:nth-child(6) > a')
+        .should('have.attr', 'href', 'https://www.sportrelief.com/')
+        .contains('Sport Relief');
+
+      //Careers
+      cy.get('@container')
+        .find('ul > li:nth-child(4) > span')
+        .contains('Careers');
+      cy.get('@container')
+        .find('ul > li:nth-child(4) > ul > li:nth-child(1) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/careers')
+        .contains('Working at Comic Relief');
+      cy.get('@container')
+        .find('ul > li:nth-child(4) > ul > li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://app.beapplied.com/org/comic-relief')
+        .contains('Open roles');
+
+      //News
+      cy.get('@container')
+        .find('ul > li:nth-child(5) > span')
+        .contains('News');
+      cy.get('@container')
+        .find('ul > li:nth-child(5) > ul > li:nth-child(1) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/news')
+        .contains('News');
+      cy.get('@container')
+        .find('ul > li:nth-child(5) > ul > li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/press-releases')
+        .contains('Press area');
+
+      //Legal
+      cy.get('@container')
+        .find('ul > li:nth-child(6) > span')
+        .contains('Legal');
+
+      //copyright
+      cy.get('@container')
+        .find('p')
+        .should('exist');
+
+      //logo
+      cy.get('@container')
+        .find('a[title="Go to Comic Relief homepage"]')
+        .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');
+    });
+  });
+});

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

@@ -1247,7 +1247,7 @@ exports[`renders correctly 1`] = `
           color="grey"
           size="s"
         >
-          Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 1st Floor, 89 Albert Embankment, London, SE1 7TP.
+          Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 6th Floor, The White Chapel Building, 10 Whitechapel High Street, London, E1 8QS.
         </p>
       </div>
     </div>

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

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  copy: 'Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 1st Floor, 89 Albert Embankment, London, SE1 7TP.'
+  copy: 'Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 6th Floor, The White Chapel Building, 10 Whitechapel High Street, London, E1 8QS.'
 };
 exports.default = _default;

package/package.json

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

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

@@ -1247,7 +1247,7 @@ exports[`renders correctly 1`] = `
           color="grey"
           size="s"
         >
-          Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 1st Floor, 89 Albert Embankment, London, SE1 7TP.
+          Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 6th Floor, The White Chapel Building, 10 Whitechapel High Street, London, E1 8QS.
         </p>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
 export default {
   copy:
-    'Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 1st Floor, 89 Albert Embankment, London, SE1 7TP.'
+    'Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 6th Floor, The White Chapel Building, 10 Whitechapel High Street, London, E1 8QS.'
 };