feat(PPDSC-2005) Layer manager (#146)

* fix(PPDSC-1972): select panel - add zindex * fix(PPDSC-1972): merge - update snapshots * fix(PPDSC-1972): failing tests - mock datetime * fix(PPDSC-1972): add comment * feat(PPDSC-0000): wip * feat(PPDSC-2005): add layer manager * feat(PPDSC-2005): delete portal component * feat(PPDSC-2005): add layers * feat(PPDSC-2005): update layer organizer * feat(PPDSC-2005): cleanup * feat(PPDSC-2005): clean up & new story * feat(PPDSC-2005): fixx select and inline prop on modal/drawer * feat(PPDSC-2005): fix unit tests * feat(PPDSC-2005): add comments * feat(PPDSC-2005): test LM on docs site * feat(PPDSC-2005): add tests * feat(PPDSC-2005): add unit tests to layer * feat(PPDSC-2005): fix unit tests * feat(PPDSC-2005): fix e2e tests * feat(PPDSC-2005): add srr * feat(PPDSC-2005): custom portal * feat(PPDSC-2005): add portal * feat(PPDSC-2005): improvements * feat(PPDSC-2005): update layer manager * feat(PPDSC-2005): fix ts * feat(PPDSC-2005): fix e2e tests * feat(PPDSC-2005): fix coverage * feat(PPDSC-2005): fix snapshots * feat(PPDSC-2005): fix LO * feat(PPDSC-2005): fix e2e tests * feat(PPDSC-2005): clean up * feat(PPDSC-2005): clean up * feat(PPDSC-2005): clean up * feat(PPDSC-2005): fix snapshots * feat(PPDSC-2005): add NewskitProvider * feat(PPDSC-2005): add select story * feat(PPDSC-2005): add warnings * feat(PPDSC-2005): remove mediaQueryProvider from select * feat(PPDSC-2005): update test-utils with newskitprovider * feat(PPDSC-2005): update newskit/theme provider docs * feat(PPDSC-2005): update snapshots * feat(PPDSC-2005): fix coverage * feat(PPDSC-2005): fix types and tests cleanup * feat(PPDSC-2005): update e2e tests * feat(PPDSC-2005): fix snapshots * feat(PPDSC-2005): fix coverage * feat(PPDSC-2005): fix unit tests * feat(PPDSC-2005): ignore test-utils from coverage * feat(PPDSC-2005): address comments * feat(PPDSC-2005): add docs * feat(PPDSC-2005): update snapshots * feat(PPDSC-2005): remove comment * feat(PPDSC-2005): update select snapshots * feat(PPDSC-2005): update docs snapshots * feat(PPDSC-2005): update mediaQueruContext * feat(PPDSC-2005): update docs * feat(PPDSC-2005): rename file * feat(PPDSC-2005): rename NewskitProvider to NewsKitProvider * feat(PPDSC-2005): fix typo * feat(PPDSC-2005): add waitBeforeCapture Co-authored-by: Stoyan Delev <[email protected]> Co-authored-by: Stoyan Delev <[email protected]>
newscorp-ghfb · Jul 25, 2022 · 63c3556 · 63c3556
1 parent dfcdd4d
commit 63c3556
Show file tree

Hide file tree

Showing 65 changed files with 19,408 additions and 17,065 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -2,13 +2,7 @@ import React from 'react';
 import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport';
 import {withPerformance} from 'storybook-addon-performance';
 
-import {
-  ThemeProvider,
-  MediaQueryProvider,
-  styled,
-  getColorCssFromTheme,
-} from '../src';
-
+import {NewsKitProvider, styled, getColorCssFromTheme} from '../src';
 import {getThemeObject} from '../src/test/theme-select-object';
 
 const unlimitedScenarios = [
@@ -107,32 +101,15 @@ export const decorators = [
       </Decorator>
     );
   },
-  // Disabled MediaQueryProvider for some stories,
-  // this needs to placed before theme Decorator so that the order matters
-  (Story, context) => {
-    const {parameters} = context;
-    const shouldDisableMQDecorator =
-      parameters && parameters.disableMediaQueryDecorator;
-
-    const Decorator = shouldDisableMQDecorator
-      ? NoDecorator
-      : MediaQueryProviderDecorator;
-
-    return (
-      <Decorator>
-        <Story />
-      </Decorator>
-    );
-  },
   (Story, context) => {
     return (
-      <ThemeProvider
+      <NewsKitProvider
         theme={getThemeObject(context?.globals?.backgrounds?.value)}
       >
         <Background>
           <Story />
         </Background>
-      </ThemeProvider>
+      </NewsKitProvider>
     );
   },
   withPerformance,

diff --git a/cypress/components/drawer.spec.js b/cypress/components/drawer.spec.js
@@ -1,40 +1,36 @@
 describe('drawer', () => {
   beforeEach(() => {
-    cy.visit('?name=drawer');
+    cy.visit('?name=drawer-e2e');
   });
 
   it('page cant scroll when drawer panel is open', () => {
-    cy.get('[data-testid="scrollable-drawer"]').within(() => {
-      cy.get('[data-testid="drawer-open-button"]').first().click();
+    cy.get('[data-testid="drawer-open-button"]').first().click();
 
-      cy.wait(1000);
+    cy.wait(1000);
 
-      cy.window().then($el =>
-        expect($el.document.body.style.overflow).to.eq('hidden'),
-      );
+    cy.window().then($el =>
+      expect($el.document.body.style.overflow).to.eq('hidden'),
+    );
 
-      cy.get('[data-testid="overlay"]').click();
+    cy.get('[data-testid="overlay"]').click();
 
-      cy.wait(1000);
+    cy.wait(1000);
 
-      cy.window().then($el =>
-        expect($el.document.body.style.overflow).to.eq('visible'),
-      );
-    });
+    cy.window().then($el =>
+      expect($el.document.body.style.overflow).to.eq('visible'),
+    );
   });
 
   it('scrolling drawer panel is possible', () => {
-    cy.get('[data-testid="scrollable-drawer"]').within(() => {
-      cy.get('[data-testid="drawer-open-button"]').first().click();
-
-      cy.wait(1000);
-
-      cy.get('[data-testid="drawer"]')
-        .first()
-        .find('[data-testid="dialog-content"]')
-        .scrollTo('bottom')
-        .its('scrollY')
-        .should('not.equal', 0);
-    });
+    cy.get('[data-testid="drawer-open-button"]').first().click();
+
+    cy.wait(1000);
+
+    cy.get('[data-testid="drawer"]')
+      .first()
+      .find('[data-testid="dialog-content"]')
+      .scrollTo('bottom')
+      .its('scrollY')
+      .should('not.equal', 0);
   });
 });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -4,25 +4,24 @@ Cypress.Commands.add('mockConsentAndVisit', url => {
   cy.visit(url);
 });
 
+const globalRulesConfig = {
+  'page-has-heading-one': {enabled: false},
+  // we don't need this rule when testing components, its disabled because our Layer component is attached to body and need a region
+  'landmark-one-main': {enabled: false},
+};
+
 Cypress.Commands.add('checkA11yWithDefaultRules', () => {
   cy.checkA11y(null, {
-    rules: {
-      'page-has-heading-one': {enabled: false},
-    },
+    rules: globalRulesConfig,
   });
 });
 
 Cypress.Commands.add('checkA11yWithCustomRule', disabledRules => {
   cy.checkA11y(null, {
-    rules: disabledRules.reduce(
-      (acc, rule) => {
-        acc[rule] = {enabled: false};
-        return acc;
-      },
-      {
-        'page-has-heading-one': {enabled: false},
-      },
-    ),
+    rules: disabledRules.reduce((acc, rule) => {
+      acc[rule] = {enabled: false};
+      return acc;
+    }, globalRulesConfig),
   });
 });
 

diff --git a/e2e/index.tsx b/e2e/index.tsx
@@ -2,12 +2,12 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import tests from './tests';
-import {newskitLightTheme, ThemeProvider, compileTheme} from '../src/theme';
+import {newskitLightTheme, compileTheme, NewsKitProvider} from '../src';
 
 const app = (
-  <ThemeProvider theme={compileTheme(newskitLightTheme)}>
+  <NewsKitProvider theme={compileTheme(newskitLightTheme)}>
     {tests()}
-  </ThemeProvider>
+  </NewsKitProvider>
 );
 
 ReactDOM.render(app, document.getElementById('root'));
diff --git a/scripts/generate-a11y-tests.js b/scripts/generate-a11y-tests.js
@@ -3,7 +3,7 @@ const parser = require('@babel/parser');
 const fs = require('fs');
 const path = require('path');
 
-const ignoreScenarios = ['image-e2e', 'use-media-query'];
+const ignoreScenarios = ['image-e2e', 'use-media-query', 'layer'];
 
 const files = fg.sync('./src/**/**.stories.tsx');
 const testsConfig = files