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

package/bpk-component-badge/index.js

@@ -1,26 +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 component, { BADGE_TYPES, type Props } from './src/BpkBadge';
-import themeAttributes from './src/themeAttributes';
-
-export type BpkBadgeProps = Props;
-export default component;
-export { BADGE_TYPES, themeAttributes };

package/bpk-component-badge/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "bpk-component-badge",
-  "version": "4.1.13",
-  "description": "Backpack badge 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-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-icon": "^9.2.13",
-    "bpk-storybook-utils": "^1.1.11"
-  }
-}

package/bpk-component-badge/src/BpkBadge.js

@@ -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.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkBadge.module.scss';
-
-export const BADGE_TYPES = {
-  warning: 'warning',
-  success: 'success',
-  destructive: 'destructive',
-  light: 'light',
-  inverse: 'inverse',
-  outline: 'outline',
-};
-
-const getClassName = cssModules(STYLES);
-
-const badgeTypeClassNames = {
-  [BADGE_TYPES.warning]: null,
-  [BADGE_TYPES.success]: getClassName('bpk-badge--success'),
-  [BADGE_TYPES.destructive]: getClassName('bpk-badge--destructive'),
-  [BADGE_TYPES.light]: getClassName('bpk-badge--light'),
-  [BADGE_TYPES.inverse]: getClassName('bpk-badge--inverse'),
-  [BADGE_TYPES.outline]: getClassName('bpk-badge--outline'),
-};
-
-export type Props = {
-  type: $Keys<typeof BADGE_TYPES>,
-  docked: ?string,
-  centered: boolean,
-  className: ?string,
-};
-
-const BpkBadge = (props: Props) => {
-  const { centered, className, docked, type, ...rest } = props;
-  const classNames = [getClassName('bpk-badge'), badgeTypeClassNames[type]];
-
-  if (docked === 'right') {
-    classNames.push(getClassName('bpk-badge--docked-right'));
-  }
-  if (docked === 'left') {
-    classNames.push(getClassName('bpk-badge--docked-left'));
-  }
-  if (centered) {
-    classNames.push(getClassName('bpk-badge--centered'));
-  }
-  if (className) {
-    classNames.push(className);
-  }
-
-  return (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <span className={classNames.join(' ')} {...rest} />
-  );
-};
-
-BpkBadge.propTypes = {
-  type: PropTypes.oneOf(Object.keys(BADGE_TYPES)),
-  docked: PropTypes.oneOf(['right', 'left', null]),
-  centered: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-BpkBadge.defaultProps = {
-  type: BADGE_TYPES.warning,
-  docked: null,
-  centered: false,
-  className: null,
-};
-
-export default BpkBadge;

package/bpk-component-badge/src/BpkBadge.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-badge{display:inline-flex;padding:.25rem .5rem;align-items:center;color:#111236;background-color:#ffb54d;background-color:var(--bpk-badge-background-color, #ffb54d);border-radius:.25rem;margin:0;font-size:.75rem;line-height:1rem;font-weight:400;font-weight:700}.bpk-badge>svg{width:1rem !important;height:1rem !important}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir='rtl'] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir='rtl'] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--success{background-color:#73cec6;background-color:var(--bpk-badge-success-background-color, #73cec6)}.bpk-badge--destructive{color:#fff;fill:#fff;background-color:#d1435b;background-color:var(--bpk-badge-destructive-background-color, #d1435b)}.bpk-badge--light{background-color:#f1f2f8;fill:#111236}.bpk-badge--inverse{background-color:#fff;fill:#111236}.bpk-badge--outline{background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff;fill:#fff}

package/bpk-component-badge/src/BpkBadge.module.scss

@@ -1,55 +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-badge {
-  @include bpk-badge;
-
-  &--centered {
-    @include bpk-badge--centered;
-  }
-
-  &--docked-right {
-    @include bpk-badge--docked-right;
-  }
-
-  &--docked-left {
-    @include bpk-badge--docked-left;
-  }
-
-  &--success {
-    @include bpk-badge--success;
-  }
-
-  &--destructive {
-    @include bpk-badge--destructive;
-  }
-
-  &--light {
-    @include bpk-badge--light;
-  }
-
-  &--inverse {
-    @include bpk-badge--inverse;
-  }
-
-  &--outline {
-    @include bpk-badge--outline;
-  }
-}

package/bpk-component-badge/src/themeAttributes.js

@@ -1,23 +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 [
-  'badgeBackgroundColor',
-  'badgeSuccessBackgroundColor',
-  'badgeDestructiveBackgroundColor',
-];

package/bpk-component-banner-alert/README.md

@@ -1,153 +0,0 @@
-# bpk-component-banner-alert
-
-> Backpack banner alert component.
-
-## Installation
-
-```sh
-npm install bpk-component-banner-alert --save-dev
-```
-
-## Usage
-
-### Default
-
-```js
-import React from 'react';
-import BpkBannerAlert, { ALERT_TYPES } from 'bpk-component-banner-alert';
-
-export default () => (
-  <BpkBannerAlert
-    message="Successful alert with more information."
-    type={ALERT_TYPES.SUCCESS}
-  />
-);
-```
-
-### Dismissable
-
-```js
-import React, { Component } from 'react';
-import { ALERT_TYPES, BpkBannerAlertDismissable } from 'bpk-component-banner-alert';
-
-class DismissableBpkBannerAlert extends Component {
-  constructor() {
-    super();
-
-
-    this.state = {
-      show: true,
-    };
-  }
-
-  setDismissed = () => {
-    this.setState({
-      show: false,
-    });
-  }
-
-  render() {
-    return (
-      <BpkBannerAlertDismissable
-        message="Successful alert with dismiss option."
-        type={ALERT_TYPES.SUCCESS}
-        onDismiss={this.setDismissed}
-        show={this.state.show}
-        dismissButtonLabel="Dismiss"
-      />
-    );
-  }
-}
-
-export default () => (
-  <DismissableBpkBannerAlert />
-);
-```
-
-### withBannerAlertState(BpkBannerAlert)
-
-```js
-import React, { Component } from 'react';
-import { ALERT_TYPES, withBannerAlertState, BpkBannerAlertDismissable, BpkBannerAlertExpandable } from 'bpk-component-banner-alert';
-
-const BannerAlertDismissableState = withBannerAlertState(BpkBannerAlertDismissable);
-const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable);
-
-<BannerAlertDismissableState
-  dismissButtonLabel="Dismiss"
-  message="Successful alert with dismiss option."
-  type={ALERT_TYPES.SUCCESS}
-/>
-
-<BannerAlertDismissableState
-  message="Successful alert that will disappear after 5 seconds."
-  hideAfter={5}
-  type={ALERT_TYPES.SUCCESS}
-/>
-
-<BannerAlertExpandableState
-  message="Successful alert with expandable option."
-  type={ALERT_TYPES.SUCCESS}
-  toggleButtonLabel="View more"
->
-  Lorem ipsum dolor sit amet.
-</BannerAlertExpandableState>
-```
-
-
-## Props
-
-### BpkBannerAlert
-
-| Property           | PropType               | Required | Default Value |
-| ------------------ | ---------------------- | -------- | ------------- |
-| type               | ALERT_TYPES (one of)   | true     | -             |
-| message            | node                   | true     | -             |
-| animateOnEnter     | bool                   | false    | false         |
-| animateOnLeave     | bool                   | false    | false         |
-| bannerClassName    | string                 | false    | null          |
-| icon               | BpkIcon                | false    | null          |
-| show               | bool                   | false    | true          |
-
-### BpkBannerAlertDismissable
-
-| Property           | PropType               | Required | Default Value |
-| ------------------ | ---------------------- | -------- | ------------- |
-| type               | ALERT_TYPES (one of)   | true     | -             |
-| message            | node                   | true     | -             |
-| animateOnEnter     | bool                   | false    | false         |
-| animateOnLeave     | bool                   | false    | false         |
-| bannerClassName    | string                 | false    | null          |
-| dismissButtonLabel | string                 | false    | null          |
-| icon               | BpkIcon                | false    | null          |
-| onDismiss          | func                   | false    | null          |
-| show               | bool                   | false    | true          |
-
-### BpkBannerAlertExpandable
-
-| Property           | PropType               | Required | Default Value |
-| ------------------ | ---------------------- | -------- | ------------- |
-| type               | ALERT_TYPES (one of)   | true     | -             |
-| message            | node                   | true     | -             |
-| animateOnEnter     | bool                   | false    | false         |
-| animateOnLeave     | bool                   | false    | false         |
-| bannerClassName    | string                 | false    | null          |
-| expanded           | bool                   | false    | false         |
-| icon               | BpkIcon                | false    | null          |
-| onExpandToggle     | func                   | false    | null          |
-| show               | bool                   | false    | true          |
-| toggleButtonLabel  | string                 | false    | null          |
-
-### withBannerAlertState(BpkBannerAlert)
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| hideAfter | number   | false    | null          |
-| onHide    | func     | false    | null          |
-
-## Theme Props
-
-* `bannerAlertPrimaryColor`
-* `bannerAlertSuccessColor`
-* `bannerAlertWarnColor`
-* `bannerAlertErrorColor`

package/bpk-component-banner-alert/index.js

@@ -1,34 +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 BpkBannerAlert from './src/BpkBannerAlert';
-import BpkBannerAlertDismissable from './src/BpkBannerAlertDismissable';
-import BpkBannerAlertExpandable from './src/BpkBannerAlertExpandable';
-import { ALERT_TYPES } from './src/common-types';
-import withBannerAlertState from './src/withBannerAlertState';
-import themeAttributes from './src/themeAttributes';
-
-export {
-  ALERT_TYPES,
-  BpkBannerAlertDismissable,
-  BpkBannerAlertExpandable,
-  withBannerAlertState,
-  themeAttributes,
-};
-export default BpkBannerAlert;

package/bpk-component-banner-alert/package.json

@@ -1,34 +0,0 @@
-{
-  "name": "bpk-component-banner-alert",
-  "version": "6.1.17",
-  "description": "Backpack banner alert 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": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
-  "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-animate-height": "^4.1.12",
-    "bpk-component-close-button": "^3.1.13",
-    "bpk-component-icon": "^9.2.13",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "prop-types": "^15.7.2",
-    "react-transition-group": "^2.5.3"
-  },
-  "devDependencies": {
-    "bpk-component-aria-live": "^2.1.19",
-    "bpk-component-button": "^6.2.7",
-    "bpk-storybook-utils": "^1.1.11"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  }
-}

package/bpk-component-banner-alert/src/AnimateAndFade.js

@@ -1,185 +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, { type Node, Component } from 'react';
-import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkAnimateHeight from '../../bpk-animate-height';
-
-import STYLES from './BpkAnimateAndFade.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const ANIMATION_DURATION = parseInt(durationSm, 10);
-
-type Props = {
-  animateOnEnter: boolean,
-  animateOnLeave: boolean,
-  children: Node,
-  show: boolean,
-  className: ?string,
-};
-
-type State = {
-  isExpanded: boolean,
-  visible: boolean,
-  initiateShow: boolean,
-  hideAnimationInProgress: boolean,
-  inDom: boolean,
-};
-
-class AnimateAndFade extends Component<Props, State> {
-  toggleImmediately: boolean;
-
-  static propTypes = {
-    animateOnEnter: PropTypes.bool,
-    animateOnLeave: PropTypes.bool,
-    children: PropTypes.node.isRequired,
-    show: PropTypes.bool.isRequired,
-    className: PropTypes.string,
-  };
-
-  static defaultProps = {
-    animateOnEnter: false,
-    animateOnLeave: false,
-    className: null,
-  };
-
-  constructor(props: Props) {
-    super(props);
-
-    this.toggleImmediately = this.props.show && this.props.animateOnEnter;
-    const initiallyShown = this.toggleImmediately ? false : this.props.show;
-
-    this.state = {
-      isExpanded: initiallyShown,
-      visible: initiallyShown,
-      initiateShow: false,
-      hideAnimationInProgress: false,
-      inDom: initiallyShown,
-    };
-  }
-
-  componentDidMount() {
-    if (this.toggleImmediately) {
-      this.toggle();
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.show === this.props.show) {
-      return;
-    }
-    this.toggle();
-  }
-
-  componentDidUpdate() {
-    if (this.state.initiateShow) {
-      // React doesn't like us calling setState from componentDidUpdate as it can lead to an infinite re-renders.
-      // I think it is ok here, however, as this will only happen conditionally (ie once)
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        initiateShow: false,
-        isExpanded: true,
-        visible: true,
-      });
-    }
-  }
-
-  onAnimateHeightComplete = () => {
-    if (this.state.isExpanded) {
-      return;
-    }
-    this.setState({
-      inDom: false,
-      hideAnimationInProgress: false,
-    });
-  };
-
-  onFadeComplete = () => {
-    if (!this.state.visible && this.state.hideAnimationInProgress) {
-      this.setState({ isExpanded: false });
-    }
-  };
-
-  toggle = () => {
-    if (this.state.visible && this.state.isExpanded) {
-      this.setState({
-        hideAnimationInProgress: true,
-        visible: false,
-      });
-    } else if (!this.state.visible && !this.state.isExpanded) {
-      this.setState({
-        inDom: true,
-        initiateShow: true,
-      });
-    }
-  };
-
-  render() {
-    const { animateOnEnter, animateOnLeave, children, className } = this.props;
-    const showPlaceholder =
-      !this.state.visible && !this.state.hideAnimationInProgress;
-    // While the expanding animation takes place, we render the child element
-    // close to invisible. If we don't do this, the animate-height container
-    // will take on height 0, and will never expand to allow the children to fade in
-    return this.state.inDom ? (
-      <BpkAnimateHeight
-        className={className}
-        onAnimationComplete={this.onAnimateHeightComplete}
-        duration={ANIMATION_DURATION}
-        height={this.state.isExpanded ? 'auto' : 0}
-      >
-        {showPlaceholder && <div style={{ opacity: 0.35 }}>{children}</div>}
-        <TransitionGroup
-          exit={animateOnLeave}
-          enter={animateOnEnter}
-          appear={animateOnEnter}
-          onTransitionEnd={this.onFadeComplete}
-        >
-          {this.state.visible && (
-            <CSSTransition
-              classNames={{
-                exit: getClassName('bpk-animate-and-fade--leave'),
-                exitActive: getClassName('bpk-animate-and-fade--leave-active'),
-                enter: getClassName('bpk-animate-and-fade--enter'),
-                enterActive: getClassName('bpk-animate-and-fade--enter-active'),
-                appear: getClassName('bpk-animate-and-fade--appear'),
-                appearActive: getClassName(
-                  'bpk-animate-and-fade--appear-active',
-                ),
-              }}
-              timeout={{
-                enter: ANIMATION_DURATION * 2,
-                exit: ANIMATION_DURATION * 2,
-              }}
-            >
-              {children}
-            </CSSTransition>
-          )}
-        </TransitionGroup>
-      </BpkAnimateHeight>
-    ) : null;
-  }
-}
-
-export default AnimateAndFade;

package/bpk-component-banner-alert/src/BpkAnimateAndFade.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-animate-and-fade--enter{transition:opacity 200ms ease-in-out;opacity:.01;transition-delay:200ms}.bpk-animate-and-fade--enter-active{opacity:1}.bpk-animate-and-fade--leave{transition:opacity 200ms ease-in-out;opacity:1}.bpk-animate-and-fade--leave-active{transition:opacity 200ms ease-in-out;opacity:.01}.bpk-animate-and-fade--appear{transition:opacity 200ms ease-in-out;opacity:.01;transition-delay:200ms}.bpk-animate-and-fade--appear-active{opacity:1}