@skyscanner/backpack-web 6.1.0 → 7.0.0-alpha.1

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -1,239 +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.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
-import React, { Component, type Node } from 'react';
-
-import { cssModules, isRTL } from '../../bpk-react-utils';
-
-import STYLES from './BpkMobileScrollContainer.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const computeScrollBarAwareHeight = (
-  scrollerEl: ?HTMLElement,
-  innerEl: ?HTMLElement,
-): ?string => {
-  if (!(scrollerEl && innerEl)) {
-    return null;
-  }
-
-  const scrollBarVisibile = scrollerEl.offsetHeight - innerEl.offsetHeight > 0;
-  return scrollBarVisibile ? `${innerEl.offsetHeight / 16}rem` : 'auto';
-};
-
-const computeScrollIndicatorClassName = (
-  scrollerEl: ?HTMLElement,
-  leadingIndicatorClassName: ?string = null,
-  trailingIndicatorClassName: ?string = null,
-) => {
-  if (!scrollerEl) {
-    return null;
-  }
-
-  const classNames = [];
-  const { offsetWidth, scrollLeft, scrollWidth } = scrollerEl;
-
-  const rtl = isRTL();
-  const scrollValue = rtl ? -Math.floor(scrollLeft) : Math.ceil(scrollLeft);
-  const showLeadingIndicator = scrollValue > 0;
-  const showTrailingIndicator = scrollValue < scrollWidth - offsetWidth;
-  const showLeftIndicator = rtl ? showTrailingIndicator : showLeadingIndicator;
-  const showRightIndicator = rtl ? showLeadingIndicator : showTrailingIndicator;
-
-  if (showLeftIndicator) {
-    classNames.push(
-      getClassName('bpk-mobile-scroll-container--left-indicator'),
-    );
-  }
-  if (showRightIndicator) {
-    classNames.push(
-      getClassName('bpk-mobile-scroll-container--right-indicator'),
-    );
-  }
-  if (showLeadingIndicator && leadingIndicatorClassName) {
-    classNames.push(leadingIndicatorClassName);
-  }
-  if (showTrailingIndicator && trailingIndicatorClassName) {
-    classNames.push(trailingIndicatorClassName);
-  }
-
-  return classNames;
-};
-
-type Props = {
-  children: Node,
-  innerContainerTagName: string,
-  className: ?string,
-  leadingIndicatorClassName: ?string,
-  trailingIndicatorClassName: ?string,
-  scrollerRef: ?Function,
-  style: ?Object,
-  showScrollbar: ?boolean,
-};
-
-type State = {
-  computedHeight: ?string,
-  scrollIndicatorClassName: ?string,
-};
-
-class BpkMobileScrollContainer extends Component<Props, State> {
-  innerEl: ?HTMLElement;
-
-  scrollerEl: ?HTMLElement;
-
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    scrollerRef: PropTypes.func,
-    innerContainerTagName: PropTypes.string,
-    className: PropTypes.string,
-    leadingIndicatorClassName: PropTypes.string,
-    trailingIndicatorClassName: PropTypes.string,
-    style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-    showScrollbar: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    scrollerRef: null,
-    innerContainerTagName: 'div',
-    className: null,
-    leadingIndicatorClassName: null,
-    trailingIndicatorClassName: null,
-    style: null,
-    showScrollbar: false,
-  };
-
-  constructor() {
-    super();
-
-    this.state = {
-      computedHeight: 'auto',
-      scrollIndicatorClassName: null,
-    };
-  }
-
-  componentDidMount() {
-    this.setScrollBarAwareHeight();
-    this.setScrollIndicatorClassName();
-    window.addEventListener('resize', this.onWindowResize);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.onWindowResize);
-  }
-
-  onWindowResize = debounce(() => {
-    this.setScrollBarAwareHeight();
-    this.setScrollIndicatorClassName();
-  }, 100);
-
-  setScrollIndicatorClassName = () => {
-    const classNames = computeScrollIndicatorClassName(
-      this.scrollerEl,
-      this.props.leadingIndicatorClassName,
-      this.props.trailingIndicatorClassName,
-    );
-
-    if (!classNames) {
-      return;
-    }
-
-    this.setState(() => ({
-      scrollIndicatorClassName: classNames.join(' '),
-    }));
-  };
-
-  setScrollBarAwareHeight = () => {
-    if (this.props.showScrollbar) {
-      return;
-    }
-    const computedHeight = computeScrollBarAwareHeight(
-      this.scrollerEl,
-      this.innerEl,
-    );
-
-    if (!computedHeight) {
-      return;
-    }
-
-    this.setState(() => ({ computedHeight }));
-  };
-
-  render() {
-    const classNames = [getClassName('bpk-mobile-scroll-container')];
-    const {
-      children,
-      className,
-      innerContainerTagName,
-      leadingIndicatorClassName,
-      scrollerRef,
-      showScrollbar,
-      style,
-      trailingIndicatorClassName,
-      ...rest
-    } = this.props;
-
-    if (className) {
-      classNames.push(className);
-    }
-    if (this.state.scrollIndicatorClassName) {
-      classNames.push(this.state.scrollIndicatorClassName);
-    }
-
-    const scrollerClassNames = getClassName(
-      'bpk-mobile-scroll-container__scroller',
-      showScrollbar && 'bpk-mobile-scroll-container__showScrollbar',
-    );
-
-    const InnerContainer = innerContainerTagName;
-
-    return (
-      <div
-        {...rest}
-        className={classNames.join(' ')}
-        style={{ ...style, height: this.state.computedHeight }}
-      >
-        <div
-          ref={(el) => {
-            if (scrollerRef) {
-              scrollerRef(el);
-            }
-            this.scrollerEl = el;
-          }}
-          onScroll={this.setScrollIndicatorClassName}
-          className={scrollerClassNames}
-        >
-          <InnerContainer
-            ref={(el) => {
-              this.innerEl = el;
-            }}
-            className={getClassName('bpk-mobile-scroll-container__inner')}
-          >
-            {children}
-          </InnerContainer>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default BpkMobileScrollContainer;
-export { computeScrollBarAwareHeight, computeScrollIndicatorClassName };

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

@@ -1,18 +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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-mobile-scroll-container{position:relative;overflow:hidden}.bpk-mobile-scroll-container--left-indicator::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(90deg, #fff, rgba(255,255,255,0));pointer-events:none;left:0}.bpk-mobile-scroll-container--right-indicator::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(270deg, #fff, rgba(255,255,255,0));pointer-events:none;right:0}.bpk-mobile-scroll-container__scroller{white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar){scrollbar-width:none}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar)::-webkit-scrollbar{display:none}.bpk-mobile-scroll-container__inner{width:100%}

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

@@ -1,50 +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';
-
-.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,114 +0,0 @@
-# bpk-component-modal
-
-> Backpack modal component.
-
-## Installation
-
-```sh
-npm install bpk-component-modal --save-dev
-```
-
-## Usage
-
-```js
-import React, { Component } from 'react';
-import BpkModal from 'bpk-component-modal';
-import BpkButton from 'bpk-component-button';
-import { BpkNavigationBarButtonLink } from '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     | -             |
-| title                 | string   | true     | -             |
-| 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/index.js

@@ -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.
- */
-
-/* @flow strict */
-
-import themeAttributes from './src/themeAttributes';
-import BpkModal, { type Props, propTypes, defaultProps } from './src/BpkModal';
-
-export type BpkModalProps = Props;
-
-export default BpkModal;
-export { propTypes, defaultProps, themeAttributes };

package/bpk-component-modal/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "bpk-component-modal",
-  "version": "5.0.0",
-  "description": "Backpack modal component.",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:Skyscanner/backpack.git"
-  },
-  "author": "Backpack Design System <backpack@skyscanner.net>",
-  "main": "index.js",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
-  "dependencies": {
-    "bpk-component-close-button": "^3.1.13",
-    "bpk-component-icon": "^9.2.13",
-    "bpk-component-link": "^3.1.12",
-    "bpk-component-navigation-bar": "^3.1.14",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "bpk-scrim-utils": "^5.1.11",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-text": "^7.0.6"
-  }
-}

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

@@ -1,124 +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.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { withScrim } from '../../bpk-scrim-utils';
-import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
-
-import STYLES from './BpkModal.module.scss';
-import BpkModalInner, {
-  propTypes as modalDialogPropTypes,
-  defaultProps as modalDialogDefaultProps,
-  type Props as ModalDialogProps,
-} from './BpkModalInner';
-
-const getClassName = cssModules(STYLES);
-const ScrimBpkModalInner = withScrim(BpkModalInner);
-
-// Please remove this type when `withScrim` is flow-typed
-type ScrimProps = {
-  isIphone: boolean,
-  dialogRef: () => ?HTMLElement,
-};
-
-export type Props = {
-  // The `withScrim` HOC satisfies some of the ModalDialogs required
-  // props but it's not flow typed yet so this
-  // diff will suffice for now.
-  ...$Exact<$Diff<ModalDialogProps, ScrimProps>>,
-  isOpen: boolean,
-  isIphone: boolean,
-  closeOnScrimClick: boolean,
-  closeOnEscPressed: boolean,
-  renderTarget: ?() => ?HTMLElement,
-  onClose: (event: SyntheticEvent<>) => void | null,
-};
-
-const BpkModal = (props: Props) => {
-  const {
-    closeOnEscPressed,
-    closeOnScrimClick,
-    fullScreen,
-    fullScreenOnMobile,
-    isIphone,
-    isOpen,
-    onClose,
-    renderTarget,
-    ...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}
-    >
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-      <ScrimBpkModalInner
-        onClose={onClose}
-        fullScreenOnMobile={fullScreenOnMobile}
-        fullScreen={fullScreen}
-        closeOnScrimClick={closeOnScrimClick}
-        containerClassName={containerClass.join(' ')}
-        isIphone={isIphone}
-        {...rest}
-      />
-    </Portal>
-  );
-};
-
-const { dialogRef, ...newModalDialogPropTypes } = modalDialogPropTypes;
-
-export const propTypes = {
-  ...newModalDialogPropTypes,
-  onClose: PropTypes.func,
-  isIphone: PropTypes.bool,
-  isOpen: PropTypes.bool.isRequired,
-  renderTarget: PropTypes.func,
-  closeOnScrimClick: PropTypes.bool,
-  closeOnEscPressed: PropTypes.bool,
-};
-
-export const defaultProps = {
-  ...modalDialogDefaultProps,
-  onClose: () => null,
-  renderTarget: null,
-  isIphone: isDeviceIphone(),
-  closeOnScrimClick: true,
-  closeOnEscPressed: true,
-};
-
-BpkModal.propTypes = { ...propTypes };
-BpkModal.defaultProps = { ...defaultProps };
-
-export default BpkModal;

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

@@ -1,18 +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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal__container{display:flex;padding:1.5rem}@media screen\0 {.bpk-modal__container{display:block}}@media (max-width: 32.25rem){.bpk-modal__container--full-screen-mobile{display:flex;padding:0}}.bpk-modal__container--full-screen{display:flex;padding:0}

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';
-
-$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;
-  }
-}