@skyscanner/backpack-web 0.0.1

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

@@ -0,0 +1,34 @@
+{
+  "name": "bpk-component-banner-alert",
+  "version": "6.1.0",
+  "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": "^5.0.0",
+    "bpk-animate-height": "^4.1.0",
+    "bpk-component-close-button": "^3.1.0",
+    "bpk-component-icon": "^9.2.0",
+    "bpk-mixins": "^26.1.0",
+    "bpk-react-utils": "^4.1.0",
+    "prop-types": "^15.7.2",
+    "react-transition-group": "^2.5.3"
+  },
+  "devDependencies": {
+    "bpk-component-aria-live": "^2.1.0",
+    "bpk-component-button": "^5.1.0",
+    "bpk-storybook-utils": "^1.1.0"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

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

@@ -0,0 +1,184 @@
+/*
+ * 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 { cssModules } from 'bpk-react-utils';
+import BpkAnimateHeight from 'bpk-animate-height';
+import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+
+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

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

package/bpk-component-banner-alert/src/BpkAnimateAndFade.module.scss

@@ -0,0 +1,53 @@
+/*
+ * 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-animate-and-fade {
+  $invisible: 0.01;
+
+  &--enter {
+    transition: opacity $bpk-duration-sm ease-in-out;
+    opacity: $invisible;
+    transition-delay: $bpk-duration-sm;
+  }
+
+  &--enter-active {
+    opacity: 1;
+  }
+
+  &--leave {
+    transition: opacity $bpk-duration-sm ease-in-out;
+    opacity: 1;
+  }
+
+  &--leave-active {
+    transition: opacity $bpk-duration-sm ease-in-out;
+    opacity: $invisible;
+  }
+
+  &--appear {
+    transition: opacity $bpk-duration-sm ease-in-out;
+    opacity: $invisible;
+    transition-delay: $bpk-duration-sm;
+  }
+
+  &--appear-active {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,37 @@
+/*
+ * 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 React from 'react';
+
+import {
+  type CommonProps,
+  COMMON_PROP_TYPES,
+  COMMON_DEFAULT_PROPS,
+} from './common-types';
+import BpkBannerAlertInner from './BpkBannerAlertInner';
+
+type Props = {
+  ...$Exact<CommonProps>,
+};
+
+const BpkBannerAlert = (props: Props) => <BpkBannerAlertInner {...props} />;
+
+BpkBannerAlert.propTypes = COMMON_PROP_TYPES;
+BpkBannerAlert.defaultProps = COMMON_DEFAULT_PROPS;
+
+export default BpkBannerAlert;

package/bpk-component-banner-alert/src/BpkBannerAlert.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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-banner-alert{background-color:#fff;overflow:hidden;border-radius:.375rem}.bpk-banner-alert--primary{box-shadow:0 0 0 1px var(--bpk-banner-alert-primary-color, #0770e3) }.bpk-banner-alert--success{box-shadow:0 0 0 1px var(--bpk-banner-alert-success-color, #00a698) }.bpk-banner-alert--warn{box-shadow:0 0 0 1px var(--bpk-banner-alert-warn-color, #ffb54d) }.bpk-banner-alert--error{box-shadow:0 0 0 1px var(--bpk-banner-alert-error-color, #d1435b) }.bpk-banner-alert--neutral{box-shadow:0 0 0 1px #68697f }.bpk-banner-alert--event{box-shadow:0 0 0 1px #5a489b }.bpk-banner-alert__header{display:flex;padding:0.5rem;flex-direction:row;align-items:center}.bpk-banner-alert__header--expandable{cursor:pointer}.bpk-no-touch-support .bpk-banner-alert__header--expandable:hover:not(:active):not(:disabled){background-color:#f1f2f8}:global(.bpk-no-touch-support) .bpk-banner-alert__header--expandable:hover:not(:active):not(:disabled){background-color:#f1f2f8}.bpk-banner-alert__header--expandable:active{background-color:#dddde5}.bpk-banner-alert__icon,.bpk-banner-alert__message,.bpk-banner-alert__toggle{display:inline-block}.bpk-banner-alert__message{padding:0 0.5rem;flex-grow:1}.bpk-banner-alert__primary-icon{fill:#0770e3;fill:var(--bpk-banner-alert-primary-color, #0770e3)}.bpk-banner-alert__success-icon{fill:#00a698;fill:var(--bpk-banner-alert-success-color, #00a698)}.bpk-banner-alert__warn-icon{fill:#ffb54d;fill:var(--bpk-banner-alert-warn-color, #ffb54d)}.bpk-banner-alert__error-icon{fill:#d1435b;fill:var(--bpk-banner-alert-error-color, #d1435b)}.bpk-banner-alert__neutral-icon{fill:#68697f}.bpk-banner-alert__event-icon{fill:#5a489b}.bpk-banner-alert__toggle-button{padding:0;border:0;background-color:transparent;cursor:pointer;appearance:none}.bpk-banner-alert__expand-icon{fill:#444560}.bpk-banner-alert__expand-icon--flipped{transform:scaleY(-1)}.bpk-banner-alert__children-container{padding:0 2.5rem 0.5rem 2.125rem;color:#68697f;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}

package/bpk-component-banner-alert/src/BpkBannerAlert.module.scss

@@ -0,0 +1,163 @@
+/*
+ * 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;
+
+.bpk-banner-alert {
+  background-color: $bpk-banner-alert-background-color;
+  overflow: hidden;
+
+  @include bpk-border-radius-sm;
+
+  &--primary {
+    @include bpk-border-sm(
+      var(--bpk-banner-alert-primary-color, $bpk-banner-alert-primary-color),
+      ''
+    );
+  }
+
+  &--success {
+    @include bpk-border-sm(
+      var(--bpk-banner-alert-success-color, $bpk-banner-alert-success-color),
+      ''
+    );
+  }
+
+  &--warn {
+    @include bpk-border-sm(
+      var(--bpk-banner-alert-warn-color, $bpk-banner-alert-warn-color),
+      ''
+    );
+  }
+
+  &--error {
+    @include bpk-border-sm(
+      var(--bpk-banner-alert-error-color, $bpk-banner-alert-error-color),
+      ''
+    );
+  }
+
+  &--neutral {
+    @include bpk-border-sm($bpk-banner-alert-neutral-color, '');
+  }
+
+  &--event {
+    @include bpk-border-sm($bpk-banner-alert-event-color, '');
+  }
+
+  &__header {
+    display: flex;
+    padding: bpk-spacing-md();
+    flex-direction: row;
+    align-items: center;
+
+    &--expandable {
+      cursor: pointer;
+
+      @include bpk-hover {
+        background-color: $bpk-banner-alert-header-expandable-hover-background-color;
+      }
+
+      &:active {
+        background-color: $bpk-banner-alert-header-expandable-active-background-color;
+      }
+    }
+  }
+
+  // Make sure the items in the flexbox are display: inline-block; for older IE's
+  &__icon,
+  &__message,
+  &__toggle {
+    display: inline-block;
+  }
+
+  &__message {
+    padding: 0 bpk-spacing-md();
+    flex-grow: 1;
+  }
+
+  &__primary-icon {
+    @include bpk-themeable-property(
+      fill,
+      --bpk-banner-alert-primary-color,
+      $bpk-banner-alert-primary-color
+    );
+  }
+
+  &__success-icon {
+    @include bpk-themeable-property(
+      fill,
+      --bpk-banner-alert-success-color,
+      $bpk-banner-alert-success-color
+    );
+  }
+
+  &__warn-icon {
+    @include bpk-themeable-property(
+      fill,
+      --bpk-banner-alert-warn-color,
+      $bpk-banner-alert-warn-color
+    );
+  }
+
+  &__error-icon {
+    @include bpk-themeable-property(
+      fill,
+      --bpk-banner-alert-error-color,
+      $bpk-banner-alert-error-color
+    );
+  }
+
+  &__neutral-icon {
+    fill: $bpk-banner-alert-neutral-color;
+  }
+
+  &__event-icon {
+    fill: $bpk-banner-alert-event-color;
+  }
+
+  &__toggle-button {
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  &__expand-icon {
+    fill: $bpk-banner-alert-expand-icon-fill;
+
+    &--flipped {
+      transform: scaleY(-1);
+    }
+  }
+
+  &__children-container {
+    // Temporarily adding an extra 2px padding to align alert message and description until the icon size changes to 16px
+    $extra-padding: 2 * $bpk-one-pixel-rem;
+
+    padding: 0 bpk-spacing-xxl() bpk-spacing-md() bpk-spacing-xl() +
+      $extra-padding;
+    color: $bpk-banner-alert-children-color;
+
+    @include bpk-text;
+    @include bpk-caption;
+  }
+}

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

@@ -0,0 +1,52 @@
+/*
+ * 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 {
+  type CommonProps,
+  type OnDismissHandler,
+  COMMON_PROP_TYPES,
+  COMMON_DEFAULT_PROPS,
+} from './common-types';
+import BpkBannerAlertInner, { CONFIGURATION } from './BpkBannerAlertInner';
+
+type Props = {
+  ...$Exact<CommonProps>,
+  dismissButtonLabel: string,
+  onDismiss: OnDismissHandler,
+};
+
+const BpkBannerAlertDismissable = (props: Props) => (
+  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+  <BpkBannerAlertInner configuration={CONFIGURATION.DISMISSABLE} {...props} />
+);
+
+BpkBannerAlertDismissable.propTypes = {
+  ...COMMON_PROP_TYPES,
+  dismissButtonLabel: PropTypes.string.isRequired,
+  onDismiss: PropTypes.func,
+};
+BpkBannerAlertDismissable.defaultProps = {
+  ...COMMON_DEFAULT_PROPS,
+  onDismiss: null,
+};
+
+export default BpkBannerAlertDismissable;

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

@@ -0,0 +1,63 @@
+/*
+ * 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 } from 'react';
+
+import {
+  type CommonProps,
+  type OnExpandToggleHandler,
+  COMMON_PROP_TYPES,
+  COMMON_DEFAULT_PROPS,
+} from './common-types';
+import BpkBannerAlertInner, { CONFIGURATION } from './BpkBannerAlertInner';
+
+type Props = {
+  ...$Exact<CommonProps>,
+  children: Node,
+  expanded: boolean,
+  toggleButtonLabel: string,
+  onExpandToggle: OnExpandToggleHandler,
+};
+
+const BpkBannerAlertExpandable = (props: Props) => {
+  const { children, ...rest } = props;
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <BpkBannerAlertInner configuration={CONFIGURATION.EXPANDABLE} {...rest}>
+      {children}
+    </BpkBannerAlertInner>
+  );
+};
+
+BpkBannerAlertExpandable.propTypes = {
+  ...COMMON_PROP_TYPES,
+  children: PropTypes.node.isRequired,
+  toggleButtonLabel: PropTypes.string.isRequired,
+  expanded: PropTypes.bool,
+  onExpandToggle: PropTypes.func,
+};
+
+BpkBannerAlertExpandable.defaultProps = {
+  ...COMMON_DEFAULT_PROPS,
+  expanded: false,
+  onExpandToggle: null,
+};
+
+export default BpkBannerAlertExpandable;