@skyscanner/backpack-web 25.2.0 → 25.4.0-alpha

package/bpk-component-modal/index.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { BpkModalV2 } from './src/BpkModalV2/BpkModal';
+import themeAttributes from './src/themeAttributes';
+import BpkModal from './src/BpkModal';
+import type { Props } from './src/BpkModal';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { propTypes, defaultProps } from './src/legacy-prop-types';
+
+export type BpkModalProps = Props;
+
+export default BpkModal;
+export { propTypes, defaultProps, themeAttributes, BpkModalV2 };

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

@@ -0,0 +1,46 @@
+/*
+ * 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

@@ -0,0 +1,46 @@
+/*
+ * 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

@@ -0,0 +1,109 @@
+/*
+ * 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

@@ -0,0 +1,202 @@
+/*
+ * 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();
+  });
+});

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

@@ -0,0 +1,125 @@
+/*
+ * 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;
+  margin: 0;
+  flex-direction: column;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.bpk-modal {
+  z-index: $bpk-zindex-modal;
+  width: 100%;
+  max-width: $bpk-modal-max-width;
+  margin: auto;
+  transform: scale(1);
+  transition: opacity $bpk-duration-sm ease-in-out,
+    transform $bpk-duration-sm ease-in-out;
+  outline: 0;
+  background-color: $bpk-modal-background-color;
+  opacity: $bpk-modal-opacity;
+
+  // required to prevent the header extending beyond the rounded corners
+  overflow: hidden;
+
+  // FIX: Prevents ugly flickering when tapping inside the modal in Mobile Safari
+  -webkit-tap-highlight-color: transparent;
+
+  @include bpk-box-shadow-xl;
+  @include bpk-border-radius-sm;
+
+  &--full-screen-mobile {
+    @include bpk-breakpoint-mobile {
+      @include fullscreen;
+    }
+  }
+
+  &--full-screen {
+    max-width: none;
+
+    @include fullscreen;
+  }
+
+  &--wide {
+    @include bpk-breakpoint-above-mobile {
+      max-width: $bpk-modal-wide-max-width;
+    }
+  }
+
+  &--appear {
+    transform: scale(0.9);
+    opacity: $bpk-modal-initial-opacity;
+  }
+
+  &--appear-active {
+    transform: scale(1);
+    opacity: $bpk-modal-opacity;
+  }
+
+  &__header {
+    @include bpk-border-bottom-sm($bpk-line-day);
+  }
+
+  &__navigation {
+    display: flex;
+    justify-content: space-between;
+    background-color: $bpk-modal-background-color;
+  }
+
+  &__heading {
+    @include bpk-text;
+    @include bpk-label-1;
+  }
+
+  &__close-button {
+    position: relative; // Override position: absolute coming from BpkNavigationBar
+    right: auto;
+
+    @include bpk-margin-leading(bpk-spacing-base());
+
+    @include bpk-rtl {
+      left: auto;
+    }
+  }
+
+  &__accessory-view {
+    position: relative; // Override position: absolute coming from BpkNavigationBar
+    left: auto;
+    margin-right: bpk-spacing-base();
+
+    @include bpk-rtl {
+      right: auto;
+      margin-left: bpk-spacing-base();
+    }
+  }
+
+  &__content {
+    flex: 1;
+    overflow-y: auto;
+
+    &--padded {
+      padding: $bpk-modal-content-padding;
+    }
+  }
+}