@skyscanner/backpack-web 25.3.0 → 25.4.0-alpha

package/bpk-scrim-utils/src/{scroll-utils.js → scroll-utils.tsx}

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.unlockScroll = exports.unfixBody = exports.storeScroll = exports.restoreScroll = exports.lockScroll = exports.fixBody = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -23,75 +17,99 @@ exports.unlockScroll = exports.unfixBody = exports.storeScroll = exports.restore
  */
 
 let scrollOffset = 0;
-const getWindow = () => typeof window !== 'undefined' ? window : null;
-const getBodyElement = () => typeof document !== 'undefined' && typeof document.body !== 'undefined' ? document.body : null;
+
+const getWindow = () => (typeof window !== 'undefined' ? window : null);
+
+const getBodyElement = () =>
+  typeof document !== 'undefined' && typeof document.body !== 'undefined'
+    ? document.body
+    : null;
+
 const getScrollBarWidth = () => {
   let scrollBarWidth = 0;
+
   const window = getWindow();
   const body = getBodyElement();
+
   if (body === null || window === null) {
     return '';
   }
+
   const bodyIsOverflowing = body.clientWidth < window.innerWidth;
+
   if (bodyIsOverflowing) {
     const scrollDiv = document.createElement('div');
+
     scrollDiv.style.position = 'absolute';
     scrollDiv.style.top = '-9999px';
     scrollDiv.style.width = '50px';
     scrollDiv.style.height = '50px';
     scrollDiv.style.overflow = 'scroll';
+
     body.appendChild(scrollDiv);
     scrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
     body.removeChild(scrollDiv);
   }
+
   return scrollBarWidth === 0 ? '' : `${scrollBarWidth}px`;
 };
-const storeScroll = () => {
+
+export const storeScroll = () => {
   const window = getWindow();
+
   if (window) {
     scrollOffset = window.pageYOffset;
   }
 };
-exports.storeScroll = storeScroll;
-const restoreScroll = () => {
+
+export const restoreScroll = () => {
   const window = getWindow();
+
   if (window) {
     window.scrollTo(0, scrollOffset);
   }
 };
-exports.restoreScroll = restoreScroll;
-const fixBody = () => {
+
+export const fixBody = () => {
   const body = getBodyElement();
+
   if (!body) {
     return;
   }
+
   body.style.position = 'fixed';
 };
-exports.fixBody = fixBody;
-const unfixBody = () => {
+
+export const unfixBody = () => {
   const body = getBodyElement();
+
   if (!body) {
     return;
   }
+
   body.style.position = '';
 };
-exports.unfixBody = unfixBody;
-const lockScroll = () => {
+
+export const lockScroll = () => {
   const body = getBodyElement();
+
   if (!body) {
     return;
   }
+
   const paddingRight = getScrollBarWidth();
+
   body.style.overflow = 'hidden';
   body.style.paddingRight = paddingRight;
 };
-exports.lockScroll = lockScroll;
-const unlockScroll = () => {
+
+export const unlockScroll = () => {
   const body = getBodyElement();
+
   if (!body) {
     return;
   }
+
   body.style.overflow = '';
   body.style.paddingRight = '';
 };
-exports.unlockScroll = unlockScroll;

package/bpk-scrim-utils/src/withScrim-test.tsx

@@ -0,0 +1,222 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render } from '@testing-library/react';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import focusScope from 'a11y-focus-scope';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import focusStore from 'a11y-focus-store';
+import type { ComponentType } from 'react';
+
+import withScrim from './withScrim';
+import {
+  fixBody,
+  lockScroll,
+  restoreScroll,
+  storeScroll,
+  unfixBody,
+  unlockScroll,
+} from './scroll-utils';
+
+jest.mock('a11y-focus-scope', () => ({
+  scopeFocus: jest.fn(),
+  unscopeFocus: jest.fn(),
+}));
+
+jest.mock('a11y-focus-store', () => ({
+  storeFocus: jest.fn(),
+  restoreFocus: jest.fn(),
+}));
+
+jest.mock('./scroll-utils', () => ({
+  lockScroll: jest.fn(),
+  restoreScroll: jest.fn(),
+  storeScroll: jest.fn(),
+  unlockScroll: jest.fn(),
+  fixBody: jest.fn(),
+  unfixBody: jest.fn(),
+}));
+
+beforeEach(() => {
+  jest.resetAllMocks();
+});
+describe('BpkScrim', () => {
+  describe('render', () => {
+    let TestComponent: ComponentType<any> | string;
+    let Component: ComponentType<any>;
+
+    beforeEach(() => {
+      TestComponent = 'TestComponent';
+      Component = withScrim(TestComponent);
+    });
+
+    it('should render correctly', () => {
+      const { asFragment } = render(
+        <Component
+          onClose={jest.fn()}
+          getApplicationElement={jest.fn()}
+          isIphone={false}
+        />,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('should render correctly when is iPhone', () => {
+      const { asFragment } = render(
+        <Component
+          onClose={jest.fn()}
+          getApplicationElement={jest.fn()}
+          isIphone
+        />,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('should render correctly with containerClassName', () => {
+      const { asFragment } = render(
+        <Component
+          onClose={jest.fn()}
+          getApplicationElement={jest.fn()}
+          containerClassName="containerClassName"
+        />,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('should render correctly with closeOnScrimClick as false', () => {
+      const { asFragment } = render(
+        <Component
+          onClose={jest.fn()}
+          getApplicationElement={jest.fn()}
+          closeOnScrimClick={false}
+        />,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+
+  describe('componentDidMount', () => {
+    let TestComponent: ComponentType<any> | string;
+    let Component: ComponentType<any>;
+
+    beforeEach(() => {
+      TestComponent = () => <div>TestComponent</div>;
+      Component = withScrim(TestComponent);
+    });
+
+    it('should mount correctly when is iPhone', () => {
+      const mockSetAttribute = jest.fn();
+      const mockRemoveAttribute = jest.fn();
+      render(
+        <Component
+          onClose={jest.fn()}
+          getApplicationElement={jest.fn(() => ({
+            style: {},
+            setAttribute: mockSetAttribute,
+            removeAttribute: mockRemoveAttribute,
+          }))}
+          isIphone
+        />,
+      );
+      expect(storeScroll).toHaveBeenCalled();
+      expect(lockScroll).toHaveBeenCalled();
+      expect(fixBody).toHaveBeenCalled();
+      expect(focusStore.storeFocus).toHaveBeenCalled();
+      expect(mockSetAttribute).toHaveBeenCalledWith('aria-hidden', 'true');
+    });
+
+    it('should mount correctly when is not iPhone', () => {
+      const mockSetAttribute = jest.fn();
+      const mockRemoveAttribute = jest.fn();
+      render(
+        <Component
+          onClose={jest.fn()}
+          getApplicationElement={jest.fn(() => ({
+            style: {},
+            setAttribute: mockSetAttribute,
+            removeAttribute: mockRemoveAttribute,
+          }))}
+          isIphone={false}
+        />,
+      );
+      expect(lockScroll).toHaveBeenCalled();
+      expect(focusStore.storeFocus).toHaveBeenCalled();
+      expect(storeScroll).not.toHaveBeenCalled();
+      expect(fixBody).not.toHaveBeenCalled();
+      expect(mockSetAttribute).toHaveBeenCalledWith('aria-hidden', 'true');
+    });
+  });
+
+  describe('componentWillUnmount', () => {
+    let TestComponent: ComponentType<any> | string;
+    let Component: ComponentType<any>;
+
+    beforeEach(() => {
+      TestComponent = () => <div>TestComponent</div>;
+      Component = withScrim(TestComponent);
+    });
+
+    it('should unmount correctly when is iPhone', async () => {
+      const mockSetAttribute = jest.fn();
+      const mockRemoveAttribute = jest.fn();
+      const { unmount } = render(
+        <Component
+          onClose={jest.fn()}
+          getApplicationElement={jest.fn(() => ({
+            style: {},
+            setAttribute: mockSetAttribute,
+            removeAttribute: mockRemoveAttribute,
+          }))}
+          isIphone
+        />,
+      );
+      unmount();
+
+      expect(unlockScroll).toHaveBeenCalled();
+      expect(unfixBody).toHaveBeenCalled();
+      expect(focusStore.restoreFocus).toHaveBeenCalled();
+      expect(focusScope.unscopeFocus).toHaveBeenCalled();
+      expect(mockRemoveAttribute).toHaveBeenCalledWith('aria-hidden');
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(restoreScroll).toHaveBeenCalled();
+    });
+
+    it('should unmount correctly when is not iPhone', () => {
+      const mockRemoveAttribute = jest.fn();
+      const { unmount } = render(
+        <Component
+          onClose={jest.fn()}
+          getApplicationElement={jest.fn(() => ({
+            style: {},
+            setAttribute: jest.fn(),
+            removeAttribute: mockRemoveAttribute,
+          }))}
+          isIphone={false}
+        />,
+      );
+      unmount();
+
+      expect(unlockScroll).toHaveBeenCalled();
+      expect(restoreScroll).not.toHaveBeenCalled();
+      expect(unfixBody).not.toHaveBeenCalled();
+      expect(focusStore.storeFocus).toHaveBeenCalled();
+      expect(focusScope.unscopeFocus).toHaveBeenCalled();
+      expect(mockRemoveAttribute).toHaveBeenCalledWith('aria-hidden');
+    });
+  });
+});

package/bpk-scrim-utils/src/withScrim.tsx

@@ -0,0 +1,170 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import focusScope from 'a11y-focus-scope';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import focusStore from 'a11y-focus-store';
+import type { ComponentType } from 'react';
+import { Component } from 'react';
+
+import {
+  cssModules,
+  isDeviceIpad,
+  isDeviceIphone,
+  wrapDisplayName,
+} from '../../bpk-react-utils';
+
+import BpkScrim from './BpkScrim';
+import {
+  fixBody,
+  lockScroll,
+  restoreScroll,
+  storeScroll,
+  unfixBody,
+  unlockScroll,
+} from './scroll-utils';
+import STYLES from './bpk-scrim-content.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  getApplicationElement: () => HTMLElement | null;
+  onClose?: () => void | null;
+  isIphone?: boolean;
+  isIpad?: boolean;
+  containerClassName?: string;
+  closeOnScrimClick?: boolean;
+  [rest: string]: any;
+};
+
+const withScrim = <P extends object>(
+  WrappedComponent: ComponentType<P> | string,
+) => {
+  class WithScrim extends Component<Props & Omit<P, 'dialogRef'>> {
+    dialogElement?: HTMLElement | null | undefined;
+
+    public static displayName: string;
+
+    static defaultProps = {
+      onClose: null,
+      isIphone: isDeviceIphone(),
+      isIpad: isDeviceIpad(),
+      containerClassName: null,
+      closeOnScrimClick: true,
+    };
+
+    componentDidMount() {
+      const { getApplicationElement, isIpad, isIphone } = this.props;
+      const applicationElement = getApplicationElement();
+
+      /**
+       * iPhones & iPads need to have a fixed body
+       * and scrolling stored to prevent some iOS specific issues occuring
+       *
+       * Issue description:
+       * iOS safari does not prevent scrolling on the underlying content.
+       * Without the below fixes this results in users being able to scroll below any modal or dialog that uses withScrim.
+       *
+       * The fixes can be summaried here: https://markus.oberlehner.net/blog/simple-solution-to-prevent-body-scrolling-on-ios/
+       *
+       * The most dangerous of the fixes below is the fixBody, this function applies changes to the <body> style.
+       * This has the potential to override any custom styles already applied. The assumption here is that no one internally is making these changes to body.
+       *
+       * There is a corresponding set of functions in the componentWillUnmount block that deals with undoing these changes.
+       */
+      if (isIphone || isIpad) {
+        storeScroll();
+        fixBody();
+      }
+      /**
+       * lockScroll and the associated unlockScroll is how we control the scroll behaviour of the application when the scrim is active.
+       * The desired behaviour is to prevent the user from scrolling content behind the scrim. The above iOS fixes are in place because lockScroll alone does not solve due to iOS specific issues.
+       */
+
+      lockScroll();
+
+      if (applicationElement) {
+        applicationElement.setAttribute('aria-hidden', 'true');
+      }
+      focusStore.storeFocus();
+      if (this.dialogElement) {
+        focusScope.scopeFocus(this.dialogElement);
+      }
+    }
+
+    componentWillUnmount() {
+      const { getApplicationElement, isIpad, isIphone } = this.props;
+      const applicationElement = getApplicationElement();
+
+      if (isIphone || isIpad) {
+        setTimeout(restoreScroll, 0);
+        unfixBody();
+      }
+      unlockScroll();
+
+      if (applicationElement) {
+        applicationElement.removeAttribute('aria-hidden');
+      }
+
+      focusScope.unscopeFocus();
+      focusStore.restoreFocus();
+    }
+
+    dialogRef = (ref: HTMLElement | null | undefined) => {
+      this.dialogElement = ref;
+    };
+
+    render() {
+      const {
+        closeOnScrimClick,
+        containerClassName,
+        getApplicationElement,
+        isIpad,
+        isIphone,
+        onClose,
+        ...rest
+      } = this.props;
+
+      const classNames = [getClassName('bpk-scrim-content')];
+
+      if (containerClassName) {
+        classNames.push(containerClassName);
+      }
+
+      return (
+        <div className={classNames.join(' ')}>
+          <BpkScrim onClose={closeOnScrimClick ? onClose : undefined} />
+          <WrappedComponent
+            {...(rest as P)}
+            isIphone={isIphone}
+            isIpad={isIpad}
+            dialogRef={this.dialogRef}
+            onClose={onClose}
+          />
+        </div>
+      );
+    }
+  }
+
+  WithScrim.displayName = wrapDisplayName(WrappedComponent, 'withScrim');
+
+  return WithScrim;
+};
+
+export default withScrim;

package/bpk-theming/README.md

@@ -0,0 +1,41 @@
+# bpk-theming
+
+> Backpack theming utilities.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
+
+import BpkLink, { themeAttributes as linkThemeAttributes } from '@skyscanner/backpack-web/bpk-component-link';
+
+const theme = {
+  linkColor: '#c00',
+  linkHoverColor: '#d00',
+  linkActiveColor: '#a00',
+  linkVisitedColor: '#800',
+};
+
+export default class App extends Component {
+  render() {
+    return (
+      <BpkThemeProvider theme={theme} themeAttributes={[...linkThemeAttributes]}>
+        <BpkLink onClick={() => {}}>Book flight</BpkLink>
+      </BpkThemeProvider>
+    );
+  }
+}
+```
+
+## Props
+
+| Property            | PropType                           | Required         | Default Value |
+| -----------         | ---------------------------------- | ---------------- | ------------- |
+| children            | node                               | true             | -             |
+| themeAttributes     | arrayOf(string)                    | true             | -             |
+| component           | elementType                        | false            | div           |
+| theme               | object                             | false            | null          |

package/bpk-theming/index.js

@@ -1,11 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _BpkThemeProvider = _interopRequireDefault(require("./src/BpkThemeProvider"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -23,5 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkThemeProvider.default;
-exports.default = _default;
+
+import BpkThemeProvider from './src/BpkThemeProvider';
+
+export default BpkThemeProvider;