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

package/bpk-component-map/src/DefaultLoadingElement.module.scss

@@ -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 '~bpk-mixins/index.scss';
-
-.bpk-map-default-loading-element {
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-  background-color: $bpk-surface-highlight-day;
-}

package/bpk-component-mobile-scroll-container/README.md

@@ -1,71 +0,0 @@
-# bpk-component-mobile-scroll-container
-
-> Backpack mobile scroll container component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';
-import BpkMobileScrollContainer from '@skyscanner/backpack-web/bpk-component-mobile-scroll-container';
-
-import STYLES from './MyComponent.scss';
-
-const getClassName = cssModules(STYLES);
-
-export default () => (
-  <BpkMobileScrollContainer>
-    <div className={getClassName('my-component')}>
-      {new Array(10).fill().map((item, index) => {
-        const classNames = ['my-component__item'];
-
-        if (index % 2 === 0) {
-          classNames.push('my-component__item--alternate');
-        }
-
-        return (
-          <div key={index} className={classNames.map(getClassName).join(' ')}>
-            {index}
-          </div>
-        );
-      })}
-    </div>
-  </BpkMobileScrollContainer>
-);
-```
-
-*`MyComponent.scss`:*
-```scss
-@import '~bpk-mixins/index.scss';
-
-.my-component {
-  display: flex;
-
-  &__item {
-    display: flex;
-    min-width: $bpk-spacing-xxl * 5;
-    height: $bpk-spacing-xxl * 5;
-    justify-content: center;
-    align-items: center;
-    background-color: $bpk-color-sky-gray-tint-07;
-
-    &--alternate {
-      background-color: $bpk-color-sky-gray-tint-06;
-    }
-  }
-}
-```
-
-## Props
-
-| Property                    | PropType | Required | Default Value |
-| --------------------------- | -------- | -------- | ------------- |
-| children                    | node     | true     | -             |
-| className                   | string   | false    | null          |
-| leadingIndicatorClassName   | string   | false    | null          |
-| scrollerRef                 | func     | false    | null          |
-| trailingIndicatorClassName  | string   | false    | null          |
-| showScrollbar               | bool     | false    | false         |

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.scss

@@ -1,52 +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-mobile-scroll-container {
-  position: relative;
-  overflow: hidden;
-
-  &--left-indicator {
-    @include bpk-scroll-indicator-left($bpk-color-white);
-  }
-
-  &--right-indicator {
-    @include bpk-scroll-indicator-right($bpk-color-white);
-  }
-
-  &__scroller {
-    white-space: nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-
-    &:not(.bpk-mobile-scroll-container__showScrollbar) {
-      scrollbar-width: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-
-  &__inner {
-    width: 100%;
-  }
-}

package/bpk-component-modal/README.md

@@ -1,113 +0,0 @@
-# bpk-component-modal
-
-> Backpack modal component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { Component } from 'react';
-import BpkModal from '@skyscanner/backpack-web/bpk-component-modal';
-import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
-import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
-
-class App extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      isOpen: false,
-    };
-  }
-
-  onOpen = () => {
-    this.setState({
-      isOpen: true,
-    });
-  };
-
-  onClose = () => {
-    this.setState({
-      isOpen: false,
-    });
-  };
-
-  render() {
-    return (
-      <div id="modal-container">
-        <div id="pagewrap">
-          <BpkButton onClick={this.onOpen}>Open modal</BpkButton>
-        </div>
-        <BpkModal
-          id="my-modal"
-          isOpen={this.state.isOpen}
-          onClose={this.onClose}
-          title="Modal title"
-          closeLabel="Close modal"
-          getApplicationElement={() => document.getElementById('pagewrap')}
-          renderTarget={() => document.getElementById('modal-container')}
-          accessoryView={
-            <BpkNavigationBarButtonLink
-              label="Close"
-              onClick={this.onClose}
-              className={getClassName('bpk-modal__leading-button')}
-            >
-              <div>
-                Back to results
-              </div>
-            </BpkNavigationBarButtonLink>
-          }
-        >
-          This is a modal. You can put anything you want in here.
-        </BpkModal>
-      </div>
-    );
-  }
-}
-```
-
-> **Note:** In order to "hide" your application from screen readers whilst the modal is open you need to let it know what
-> the root element for your application is by returning it's DOM node via the function passed to the
-> `getApplicationElement` prop (see the example above). The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
-
-> **Theming:** In order to theme the modal, a `renderTarget` needs to be supplied as a function which returns a DOM node
-> in the scope of a `BpkThemeProvider`.
-
-## Props
-
-| Property              | PropType | Required | Default Value |
-| --------------------- | -------- | -------- | ------------- |
-| id                    | string   | true     | -             |
-| children              | node     | true     | -             |
-| isOpen                | bool     | true     | -             |
-| onClose               | func     | true     | -             |
-| getApplicationElement | func     | true     | -             |
-| dialogRef             | func     | false    | () => null    |
-| title                 | string   | false    | null          |
-| accessoryView         | node     | false    | null          |
-| className             | string   | false    | null          |
-| contentClassName      | string   | false    | null          |
-| closeLabel            | string   | false    | null          |
-| closeText             | string   | false    | null          |
-| renderTarget          | func     | false    | null          |
-| wide                  | bool     | false    | false         |
-| fullScreenOnMobile    | bool     | false    | true          |
-| fullScreen            | bool     | false    | false         |
-| closeOnScrimClick     | bool     | false    | true          |
-| showHeader            | bool     | false    | true          |
-| closeOnEscPressed     | bool     | false    | true          |
-| padded                | bool     | false    | true          |
-
-## `accessoryView`
-
-The accessory view allows for icons and actions to be placed in front of the main title inside the modal header. To be used with `BpkNavigationBarButtonLink`
-
-## Theme Props
-
-- `linkColor`
-- `linkHoverColor`
-- `linkActiveColor`
-- `linkVisitedColor`

package/bpk-component-modal/src/BpkModal-test.tsx

@@ -1,46 +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 BpkModal from './BpkModal';
-
-describe('BpkModal', () => {
-  it('should render correctly in the given target if renderTarget is supplied', () => {
-    const customRenderTarget = document.createElement('div');
-
-    const { asFragment } = render(
-      <BpkModal
-        id="my-modal"
-        title="Modal title"
-        onClose={jest.fn()}
-        closeLabel="Close"
-        dialogRef={jest.fn()}
-        isIphone={false}
-        getApplicationElement={jest.fn()}
-        isOpen
-        renderTarget={() => customRenderTarget}
-      >
-        Modal content inside a custom target
-      </BpkModal>,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-    expect(customRenderTarget).toMatchSnapshot();
-  });
-});

package/bpk-component-modal/src/BpkModal.module.scss

@@ -1,46 +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-spacing-v2: true;
-
-@mixin fullscreen() {
-  display: flex;
-  padding: 0;
-}
-
-.bpk-modal__container {
-  display: flex;
-  padding: bpk-spacing-lg();
-
-  // IE11 and below hack for buggy flexbox support
-  @media screen\0 {
-    display: block;
-  }
-
-  &--full-screen-mobile {
-    @include bpk-breakpoint-mobile {
-      @include fullscreen;
-    }
-  }
-
-  &--full-screen {
-    @include fullscreen;
-  }
-}

package/bpk-component-modal/src/BpkModal.tsx

@@ -1,109 +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 type { ReactNode } from 'react';
-
-import { withScrim } from '../../bpk-scrim-utils';
-import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
-
-import STYLES from './BpkModal.module.scss';
-import BpkModalInner from './BpkModalInner';
-import type { Props as ModalDialogProps } from './BpkModalInner';
-
-const getClassName = cssModules(STYLES);
-const ScrimBpkModalInner = withScrim(BpkModalInner);
-
-export type Props = Partial<ModalDialogProps> & {
-  id: string;
-  children: ReactNode;
-  dialogRef?: (ref: HTMLElement | null | undefined) => void; // TODO - remove this in a later release as it is not being used. The dialogRef is injected in the withScrim HOC
-  isOpen: boolean;
-  closeOnScrimClick?: boolean;
-  closeOnEscPressed?: boolean;
-  renderTarget?: null | HTMLElement | (() => null | HTMLElement);
-  onClose?: (
-    arg0?: TouchEvent | MouseEvent | KeyboardEvent,
-    arg1?: {
-      source: 'ESCAPE' | 'DOCUMENT_CLICK';
-    },
-  ) => void;
-  getApplicationElement: () => HTMLElement | null;
-};
-
-const BpkModal = ({
-  accessoryView = null,
-  className = null,
-  closeLabel = '',
-  closeOnEscPressed = true,
-  closeOnScrimClick = true,
-  closeText = null,
-  contentClassName = null,
-  dialogRef = () => null,
-  fullScreen = false,
-  fullScreenOnMobile = true,
-  isIphone = isDeviceIphone(),
-  isOpen,
-  onClose = () => null,
-  padded = true,
-  renderTarget = null,
-  showHeader = true,
-  title = null,
-  wide = false,
-  ...rest
-}: Props) => {
-  const containerClass = [getClassName('bpk-modal__container')];
-
-  if (fullScreen || isIphone) {
-    containerClass.push(getClassName('bpk-modal__container--full-screen'));
-  } else if (fullScreenOnMobile) {
-    containerClass.push(
-      getClassName('bpk-modal__container--full-screen-mobile'),
-    );
-  }
-
-  return (
-    <Portal
-      isOpen={isOpen}
-      onClose={onClose}
-      renderTarget={renderTarget}
-      closeOnEscPressed={closeOnEscPressed}
-    >
-      <ScrimBpkModalInner
-        onClose={onClose}
-        fullScreenOnMobile={fullScreenOnMobile}
-        fullScreen={fullScreen}
-        closeOnScrimClick={closeOnScrimClick}
-        containerClassName={containerClass.join(' ')}
-        isIphone={isIphone}
-        title={title}
-        className={className}
-        contentClassName={contentClassName}
-        closeLabel={closeLabel}
-        closeText={closeText}
-        wide={wide}
-        showHeader={showHeader}
-        padded={padded}
-        accessoryView={accessoryView}
-        dialogRef={dialogRef}
-        {...rest}
-      />
-    </Portal>
-  );
-};
-
-export default BpkModal;

package/bpk-component-modal/src/BpkModalInner-test.tsx

@@ -1,202 +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';
-
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { BpkNavigationBarButtonLink } from '../../bpk-component-navigation-bar';
-
-import BpkModalInner from './BpkModalInner';
-
-describe('BpkModalInner', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(
-      <BpkModalInner
-        id="my-modal"
-        title="Modal title"
-        closeLabel="Close"
-        dialogRef={jest.fn()}
-        onClose={jest.fn()}
-        isIphone={false}
-      >
-        Modal content
-      </BpkModalInner>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly when it has a className', () => {
-    const { asFragment } = render(
-      <BpkModalInner
-        id="my-modal"
-        title="Modal title"
-        closeLabel="Close"
-        dialogRef={jest.fn()}
-        onClose={jest.fn()}
-        isIphone={false}
-        className="my-classname"
-      >
-        Modal content
-      </BpkModalInner>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly with wide prop', () => {
-    const { asFragment } = render(
-      <BpkModalInner
-        id="my-modal"
-        title="Modal title"
-        closeLabel="Close"
-        dialogRef={jest.fn()}
-        onClose={jest.fn()}
-        isIphone={false}
-        wide
-      >
-        Modal content
-      </BpkModalInner>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly with closeText prop', () => {
-    const { asFragment } = render(
-      <BpkModalInner
-        id="my-modal"
-        title="Modal title"
-        dialogRef={jest.fn()}
-        onClose={jest.fn()}
-        isIphone={false}
-        closeText="Dismiss"
-      >
-        Modal content
-      </BpkModalInner>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly when is iPhone', () => {
-    const { asFragment } = render(
-      <BpkModalInner
-        id="my-modal"
-        title="Modal title"
-        closeLabel="Close"
-        dialogRef={jest.fn()}
-        onClose={jest.fn()}
-        isIphone
-      >
-        Modal content
-      </BpkModalInner>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly when it does not fills the screen on mobile', () => {
-    const { asFragment } = render(
-      <BpkModalInner
-        id="my-modal"
-        title="Modal title"
-        closeLabel="Close"
-        dialogRef={jest.fn()}
-        onClose={jest.fn()}
-        isIphone={false}
-        fullScreenOnMobile={false}
-      >
-        Modal content
-      </BpkModalInner>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly when it is fullscreen', () => {
-    const { asFragment } = render(
-      <BpkModalInner
-        id="my-modal"
-        title="Modal title"
-        closeLabel="Close"
-        dialogRef={jest.fn()}
-        onClose={jest.fn()}
-        isIphone={false}
-        fullScreen
-      >
-        Modal content
-      </BpkModalInner>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly with no padding', () => {
-    const { asFragment } = render(
-      <BpkModalInner
-        id="my-modal"
-        title="Modal title"
-        closeLabel="Close"
-        dialogRef={jest.fn()}
-        onClose={jest.fn()}
-        isIphone={false}
-        padded={false}
-      >
-        Modal content
-      </BpkModalInner>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly with a custom content classname', () => {
-    const { asFragment } = render(
-      <BpkModalInner
-        id="my-modal"
-        title="Modal title"
-        closeLabel="Close"
-        dialogRef={jest.fn()}
-        onClose={jest.fn()}
-        isIphone={false}
-        contentClassName="my-classname"
-      >
-        Modal content
-      </BpkModalInner>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly with an accessory view', () => {
-    const { asFragment } = render(
-      <BpkModalInner
-        id="my-modal"
-        title="Modal title"
-        closeLabel="Close"
-        dialogRef={jest.fn()}
-        onClose={jest.fn()}
-        isIphone={false}
-        contentClassName="my-classname"
-        accessoryView={
-          <BpkNavigationBarButtonLink
-            label="Close"
-            onClick={jest.fn()}
-            className="bpk-modal__leading-button"
-          >
-            <div>Testing</div>
-          </BpkNavigationBarButtonLink>
-        }
-      >
-        Modal content
-      </BpkModalInner>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-});