@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

package/bpk-react-utils/src/TransitionInitialMount-test.tsx

@@ -1,37 +0,0 @@
-/*
- * 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';
-
-import TransitionInitialMount from './TransitionInitialMount';
-
-describe('TransitionInitialMount', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(
-      <TransitionInitialMount
-        appearClassName="block--appear"
-        appearActiveClassName="block--apear-active"
-        transitionTimeout={250}
-      >
-        <p>My transition</p>
-      </TransitionInitialMount>,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/bpk-react-utils/src/accessibility-test.tsx

@@ -1,73 +0,0 @@
-/*
- * 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';
-import { axe } from 'jest-axe';
-
-import Portal from './Portal';
-import TransitionInitialMount from './TransitionInitialMount';
-import withDefaultProps from './withDefaultProps';
-
-describe('Portal accessibility tests', () => {
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const { container } = render(
-      <Portal isOpen={false}>
-        <div>My portal content</div>
-      </Portal>,
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});
-
-describe('TransitionInitialMount accessibility tests', () => {
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const { container } = render(
-      <TransitionInitialMount
-        appearClassName="block--appear"
-        appearActiveClassName="block--apear-active"
-        transitionTimeout={250}
-      >
-        <p>My transition</p>
-      </TransitionInitialMount>,
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});
-
-describe('withDefaultProps accessibility tests', () => {
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const TestComponent = (props: any) => <div {...props} />;
-
-    const Component = withDefaultProps(TestComponent, {
-      a: 1,
-      b: 2,
-      c: { d: 3 },
-    });
-    const { container } = render(
-      <Component>
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-        ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
-        dis parturient montes, nascetur ridiculus mus.
-      </Component>,
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});

package/bpk-react-utils/src/cssModules-test.ts

@@ -1,65 +0,0 @@
-/*
- * 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 cssModules from './cssModules';
-
-describe('cssModules', () => {
-  it('should return a function', () => {
-    expect(cssModules()).toBeInstanceOf(Function);
-  });
-
-  describe('returned function', () => {
-    it('should pass through key as className if not found', () => {
-      const getClassName = cssModules();
-
-      expect(getClassName('foo')).toEqual('foo');
-      expect(getClassName('bar')).toEqual('bar');
-      expect(getClassName('baz')).toEqual('baz');
-    });
-
-    it('should resolve classNames for known keys', () => {
-      const getClassName = cssModules({
-        foo: 'a',
-        bar: 'b',
-        baz: 'c',
-      });
-
-      expect(getClassName('foo')).toEqual('a');
-      expect(getClassName('bar')).toEqual('b');
-      expect(getClassName('baz')).toEqual('c');
-    });
-
-    it('should resolve multiple class names', () => {
-      const getClassName = cssModules({
-        foo: 'a',
-      });
-
-      expect(getClassName('foo', 'bar')).toEqual('a bar');
-    });
-
-    it('should ignore values other than strings', () => {
-      const getClassName = cssModules({
-        foo: 'a',
-      });
-
-      expect(getClassName('foo', false, 1, undefined, {}, true, 'bar')).toEqual(
-        'a bar',
-      );
-    });
-  });
-});

package/bpk-react-utils/src/cssModules.ts

@@ -1,27 +0,0 @@
-/*
- * 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.
- */
-
-export default (styles: { [key: string]: any } = {}) =>
-  (...classNames: Array<string | boolean | number | {} | null | undefined>) =>
-    classNames.reduce((className: string, currentClass) => {
-      if (currentClass && typeof currentClass === 'string') {
-        const realName = styles[currentClass] || currentClass;
-        return className ? `${className} ${realName}` : realName;
-      }
-      return className;
-    }, '');

package/bpk-react-utils/src/deviceDetection-test.ts

@@ -1,92 +0,0 @@
-/*
- * 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 { isDeviceIphone, isDeviceIpad, isDeviceIos } from './deviceDetection';
-
-describe('isIphone tests', () => {
-  beforeEach(() => {
-    jest.resetModules();
-  });
-
-  it('should return a boolean', () => {
-    expect(typeof isDeviceIphone()).toBe('boolean');
-  });
-
-  it('should return false by default', () => {
-    expect(isDeviceIphone()).toBe(false);
-  });
-
-  it('should return true if an iPhone', () => {
-    const platform = jest.spyOn(window.navigator, 'userAgent', 'get');
-    platform.mockReturnValue('iPhone');
-
-    expect(isDeviceIphone()).toBe(true);
-  });
-});
-
-describe('isIpad tests', () => {
-  beforeEach(() => {
-    jest.resetModules();
-  });
-
-  it('should return a boolean', () => {
-    expect(typeof isDeviceIpad()).toBe('boolean');
-  });
-
-  it('should return false by default', () => {
-    expect(isDeviceIpad()).toBe(false);
-  });
-
-  it('should return true if an iPad', () => {
-    const platform = jest.spyOn(window.navigator, 'userAgent', 'get');
-    platform.mockReturnValue('iPad');
-
-    expect(isDeviceIpad()).toBe(true);
-  });
-});
-
-describe('isIos tests', () => {
-  beforeEach(() => {
-    jest.resetModules();
-  });
-
-  it('should return a boolean', () => {
-    expect(typeof isDeviceIos()).toBe('boolean');
-  });
-
-  it('should return false by default', () => {
-    const platform = jest.spyOn(window.navigator, 'userAgent', 'get');
-    platform.mockReturnValue('Mac');
-
-    expect(isDeviceIos()).toBe(false);
-  });
-
-  it('should return true if an iPhone', () => {
-    const platform = jest.spyOn(window.navigator, 'userAgent', 'get');
-    platform.mockReturnValue('iPhone');
-
-    expect(isDeviceIos()).toBe(true);
-  });
-
-  it('should return true if an iPad', () => {
-    const platform = jest.spyOn(window.navigator, 'userAgent', 'get');
-    platform.mockReturnValue('iPad');
-
-    expect(isDeviceIos()).toBe(true);
-  });
-});

package/bpk-react-utils/src/isRTL-test.ts

@@ -1,53 +0,0 @@
-/*
- * 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 isRTL from './isRTL';
-
-describe('isRTL undefined', () => {
-  it('should return a boolean', () => {
-    expect(typeof isRTL()).toBe('boolean');
-  });
-
-  it('should return false by default', () => {
-    expect(isRTL()).toBe(false);
-  });
-});
-
-describe('isRTL document defined', () => {
-  Object.defineProperty(document, `documentElement`, {
-    value: {
-      getAttribute: jest.fn(),
-    },
-    writable: false,
-  });
-  it('should return true when documentElement direction attribute is `ltr`', () => {
-    const { documentElement } = document;
-    if (documentElement) {
-      (documentElement.getAttribute as jest.Mock).mockReturnValue('ltr');
-    }
-    expect(isRTL()).toBe(false);
-  });
-
-  it('should return true when documentElement direction attribute is `rtl`', () => {
-    const { documentElement } = document;
-    if (documentElement) {
-      (documentElement.getAttribute as jest.Mock).mockReturnValue('rtl');
-    }
-    expect(isRTL()).toBe(true);
-  });
-});

package/bpk-react-utils/src/withDefaultProps-test.tsx

@@ -1,58 +0,0 @@
-/*
- * 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';
-
-import withDefaultProps from './withDefaultProps';
-
-const TestComponent = ({ ...props }: any) => <div {...props} />;
-
-describe('withDefaultProps', () => {
-  it('should render correctly', () => {
-    const Component = withDefaultProps(TestComponent, {
-      a: 1,
-      b: 2,
-      c: { d: 3 },
-    });
-    const { asFragment } = render(
-      <Component>
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-        ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
-        dis parturient montes, nascetur ridiculus mus.
-      </Component>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should merge classNames', () => {
-    const Component = withDefaultProps(TestComponent, {
-      a: 1,
-      b: 2,
-      c: { d: 3 },
-      className: 'a',
-    });
-    const { asFragment } = render(
-      <Component className="b">
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-        ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
-        dis parturient montes, nascetur ridiculus mus.
-      </Component>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/bpk-react-utils/src/wrapDisplayName-test.tsx

@@ -1,37 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 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 wrapDisplayName from './wrapDisplayName';
-
-test('wrapDisplayName adds hoc name to component', () => {
-  const SimpleComponent = () => <div />;
-
-  expect(wrapDisplayName(SimpleComponent, 'wrappedName')).toBe(
-    'wrappedName(SimpleComponent)',
-  );
-});
-
-test('wrapDisplayName adds string hoc name to component', () => {
-  expect(wrapDisplayName('SomeString', 'wrappedName')).toBe(
-    'wrappedName(SomeString)',
-  );
-});
-
-test('wrapDisplayName returns undefined when no component is supplied', () => {
-  expect(wrapDisplayName(null, 'wrappedName')).toBe('wrappedName()');
-});

package/bpk-scrim-utils/README.md

@@ -1,47 +0,0 @@
-# bpk-scrim-utils
-
-> Higher order component that adds a scrim behind components and manages scroll states
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-```js
-import { withScrim } from '@skyscanner/backpack-web/bpk-scrim-utils';
-
-const Box = props => (
-  <div ref={props.dialogRef}>
-    <BpkButton onClick={props.onClose}>Close</BpkButton>
-    Hello
-  </div>
-);
-
-const BoxWithScrim = withScrim(Box);
-```
-
-`withScrim` sends all props it receives down to the component, except `getApplicationElement` and `padded`. It also adds some props that are used for a11y and closing the modal:
-
-* `dialogRef` should be set as the ref on the visible container on top of the scrim; it is used to set focus
-* `onClose` should be set as the `onClick` action on a button or a link
-* `isIphone` can be used to apply iPhone only styles or behaviour, as it has different scrolling behaviour
-
-`containerClassName` can be used to apply styles to the full-screen container into which the enriched component is inserted
-(e.g. `display: flex` or `display: grid`)
-
-> **Note:** the `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
-
-### Props
-
-| Property              | PropType | Required | Default Value                                                                    |
-| --------------------- | -------- | -------- | -------------------------------------------------------------------------------- |
-| onClose               | func     | true     | See prop details                                                                 |
-| getApplicationElement | func     | true     | -                                                                                |
-| isIphone              | bool     | false    | `/iPhone/i.test(typeof window !== 'undefined' ? window.navigator.platform : '')` |
-| containerClassName    | string   | false    | ''                                                                               |
-| closeOnScrimClick     | bool     | false    | true                                                                             |
-
-### Prop Details
-
-#### onClose
-
-This is required unless `closeOnScrimClick` is false.

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

@@ -1,28 +0,0 @@
-/*
- * 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';
-
-import BpkScrim from './BpkScrim';
-
-describe('BpkScrim', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(<BpkScrim />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

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

@@ -1,47 +0,0 @@
-/*
- * 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';
-import { axe } from 'jest-axe';
-
-import BpkScrim from './BpkScrim';
-import withScrim from './withScrim';
-
-describe('BpkScrim accessibility tests', () => {
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const { container } = render(<BpkScrim />);
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});
-
-describe('withScrim accessibility tests', () => {
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const TestComponent = (props: any) => <div {...props} />;
-    const Component = withScrim(TestComponent);
-    const { container } = render(
-      <Component
-        onClose={jest.fn()}
-        getApplicationElement={jest.fn()}
-        isIphone={false}
-      />,
-    );
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});

package/bpk-scrim-utils/src/bpk-scrim-content.module.scss

@@ -1,32 +0,0 @@
-/*
- * 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 '~bpk-mixins/index.scss';
-
-.bpk-scrim-content {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $bpk-zindex-scrim;
-  overflow: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}

package/bpk-scrim-utils/src/bpk-scrim.module.scss

@@ -1,45 +0,0 @@
-/*
- * 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 '~bpk-mixins/index.scss';
-
-.bpk-scrim {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $bpk-zindex-scrim;
-  transition: opacity $bpk-duration-sm ease-in-out;
-  background-color: $bpk-scrim-day;
-  overflow: hidden;
-
-  &--full-screen {
-    @include bpk-breakpoint-mobile {
-      opacity: 1;
-    }
-  }
-
-  &--appear {
-    opacity: 0;
-  }
-
-  &--appear-active {
-    opacity: 0.7;
-  }
-}