@skyscanner/backpack-web 0.0.1

package/bpk-component-popover/src/BpkPopover.module.scss

@@ -0,0 +1,126 @@
+/*
+ * 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';
+
+$bpk-spacing-v2: true;
+
+$arrow-size: bpk-spacing-sm() * 3;
+
+.bpk-popover-portal {
+  z-index: $bpk-zindex-popover;
+
+  @include bpk-breakpoint-mobile {
+    margin-right: bpk-spacing-base();
+    margin-left: bpk-spacing-base();
+  }
+
+  &[x-placement='top'] {
+    margin-bottom: $arrow-size;
+  }
+
+  &[x-placement='right'] {
+    margin-left: $arrow-size;
+  }
+
+  &[x-placement='bottom'] {
+    margin-top: $arrow-size;
+  }
+
+  &[x-placement='left'] {
+    margin-right: $arrow-size;
+  }
+}
+
+.bpk-popover {
+  transition: opacity $bpk-duration-sm ease-in-out;
+  outline: 0;
+  opacity: 1;
+
+  @include bpk-layer;
+
+  @include bpk-breakpoint-above-mobile {
+    max-width: $bpk-breakpoint-mobile;
+    transition: opacity $bpk-duration-xs ease-in-out;
+  }
+
+  &--appear {
+    opacity: 0;
+  }
+
+  &--appear-active {
+    opacity: 1;
+  }
+
+  &__arrow {
+    @include bpk-layer-arrow($arrow-size);
+
+    .bpk-popover-portal[x-placement='top'] & {
+      @include bpk-layer-arrow-bottom($arrow-size);
+    }
+
+    .bpk-popover-portal[x-placement='right'] & {
+      @include bpk-layer-arrow-left($arrow-size);
+    }
+
+    .bpk-popover-portal[x-placement='bottom'] & {
+      @include bpk-layer-arrow-top($arrow-size);
+    }
+
+    .bpk-popover-portal[x-placement='left'] & {
+      @include bpk-layer-arrow-right($arrow-size);
+    }
+  }
+
+  &__body {
+    &--padded {
+      padding: bpk-spacing-base();
+    }
+  }
+
+  &__header {
+    display: flex;
+    padding: bpk-spacing-base();
+    justify-content: space-between;
+
+    @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06);
+  }
+
+  &__label {
+    @include bpk-visually-hidden;
+  }
+
+  &__close-button {
+    float: right;
+
+    @include bpk-rtl {
+      float: left;
+    }
+  }
+
+  &__footer {
+    padding: bpk-spacing-md() bpk-spacing-base();
+    text-align: right;
+
+    @include bpk-border-top-sm($bpk-color-sky-gray-tint-06);
+
+    @include bpk-rtl {
+      text-align: left;
+    }
+  }
+}

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -0,0 +1,210 @@
+/*
+ * 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 Popper from '@skyscanner/popper.js';
+import PropTypes from 'prop-types';
+import React, { Component, type Node } from 'react';
+import focusStore from 'a11y-focus-store';
+import { Portal, cssModules } from 'bpk-react-utils';
+
+import keyboardFocusScope from './keyboardFocusScope';
+import STYLES from './BpkPopover.module.scss';
+import BpkPopover, {
+  propTypes as popoverPropTypes,
+  defaultProps as popoverDefaultProps,
+  type Props as PopoverProps,
+} from './BpkPopover';
+import { ARROW_ID } from './constants';
+
+const getClassName = cssModules(STYLES);
+
+export type Props = {
+  ...$Exact<PopoverProps>,
+  target: (() => ?HTMLElement) | Node,
+  isOpen: boolean,
+  placement: ?('top' | 'right' | 'bottom' | 'left'),
+  portalStyle: ?Object,
+  portalClassName: ?string,
+  renderTarget: ?() => ?HTMLElement,
+  popperModifiers: ?Object,
+};
+
+export const propTypes = {
+  ...popoverPropTypes,
+  target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  portalClassName: PropTypes.string,
+  renderTarget: PropTypes.func,
+  popperModifiers: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+};
+
+export const defaultProps = {
+  ...popoverDefaultProps,
+  placement: 'bottom',
+  portalStyle: null,
+  portalClassName: null,
+  renderTarget: null,
+  popperModifiers: null,
+};
+
+class BpkPopoverPortal extends Component<Props> {
+  popper: ?typeof Popper;
+
+  suppressRestoreFocus: boolean;
+
+  previousTargetElement: ?HTMLElement;
+
+  static propTypes = propTypes;
+
+  static defaultProps = defaultProps;
+
+  constructor() {
+    super();
+
+    this.popper = null;
+    this.previousTargetElement = null;
+  }
+
+  onRender = (popoverElement: HTMLElement, targetElement: ?HTMLElement) => {
+    this.position(popoverElement, targetElement);
+  };
+
+  // The order of events here is as follows:
+  // - `onClose` is called by `Portal`
+  // - The consumer changes `isOpen` to `false`
+  // - `beforeClose` is called by `Portal`
+  // - `beforeClose` calls the `done` callback which closes the `Portal`
+
+  // `onClose` is called by the `Portal` to inform the consumer that `isOpen` should be made false.
+  // Before we pass this information to the consumer, we want to note if restoring focus should be suppressed
+  onClose = (event: Object, information: { source: string }) => {
+    // If the user has clicked outside the popover then we don't want focus to be restored
+    // otherwise it will be stolen back from the element they clicked on.
+    // Here we suppress restoring focus before the consumer is told about the close and updates state.
+    this.suppressRestoreFocus = information.source === 'DOCUMENT_CLICK';
+
+    if (this.props.onClose) {
+      this.props.onClose(event, information);
+    }
+  };
+
+  // `beforeClose` is called by the `Portal` when `isOpen` is changed to false.
+  // As a result, `onClose` is called first, followed by `beforeClose`.
+  beforeClose = (done: () => void) => {
+    if (this.popper) {
+      this.popper.destroy();
+      this.popper = null;
+      this.previousTargetElement = null;
+    }
+
+    keyboardFocusScope.unscopeFocus();
+    if (!this.suppressRestoreFocus) {
+      focusStore.restoreFocus();
+      this.suppressRestoreFocus = false;
+    }
+
+    done();
+  };
+
+  position(popoverElement: HTMLElement, targetElement: ?HTMLElement) {
+    if (!targetElement) {
+      return;
+    }
+
+    const targetElementHasChanged =
+      targetElement !== this.previousTargetElement;
+
+    if (targetElementHasChanged && this.popper) {
+      this.popper.destroy();
+      this.popper = null;
+    }
+
+    // Note that GPU acceleration should be disabled otherwise Popper will use `translate3d`
+    // which can cause blurriness in Safari and Chrome.
+    if (!this.popper) {
+      this.popper = new Popper(targetElement, popoverElement, {
+        placement: this.props.placement,
+        onCreate: () => {
+          if (targetElement) {
+            targetElement.focus();
+          }
+          focusStore.storeFocus();
+          keyboardFocusScope.scopeFocus(popoverElement);
+        },
+        modifiers: {
+          ...this.props.popperModifiers,
+          computeStyle: {
+            gpuAcceleration: false,
+          },
+          arrow: {
+            element: `#${ARROW_ID}`,
+          },
+        },
+      });
+    }
+
+    this.previousTargetElement = targetElement;
+
+    if (this.popper) {
+      this.popper.scheduleUpdate();
+    }
+  }
+
+  render() {
+    const {
+      isOpen,
+      onClose,
+      placement,
+      popperModifiers,
+      portalClassName,
+      portalStyle,
+      renderTarget,
+      target,
+      ...rest
+    } = this.props;
+
+    const classNames = [getClassName('bpk-popover-portal')];
+
+    if (portalClassName) {
+      classNames.push(portalClassName);
+    }
+
+    return (
+      <Portal
+        beforeClose={this.beforeClose}
+        className={classNames.join(' ')}
+        isOpen={isOpen}
+        onClose={this.onClose}
+        onRender={this.onRender}
+        style={portalStyle}
+        renderTarget={renderTarget}
+        target={target}
+      >
+        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+        <BpkPopover onClose={this.onClose} {...rest} />
+      </Portal>
+    );
+  }
+}
+
+export default BpkPopoverPortal;

package/bpk-component-popover/src/constants.js

@@ -0,0 +1,23 @@
+/*
+ * 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 */
+
+export const ARROW_ID = 'js-bpk-popover-arrow';
+
+export default { ARROW_ID };

package/bpk-component-popover/src/keyboardFocusScope.js

@@ -0,0 +1,86 @@
+/*
+ * 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.
+ */
+
+// This code is based on that from `a11y-focus-scope`.
+// Instead of completely preventing focus leaving the target element,
+// it only prevents it leaving due to keyboard events.
+// Clicks outside the target element will move focus as normal.
+
+import tabbable from 'tabbable';
+import focusin from 'focusin';
+
+let polyfilled = false;
+let focusTrapped = false;
+
+const init = (element) => {
+  // lazily polyfill focusin for firefox
+  if (!polyfilled) {
+    focusin.polyfill();
+    polyfilled = true;
+  }
+
+  const focus = () => {
+    (tabbable(element)[0] || element).focus();
+  };
+
+  const enableFocusTrapping = () => {
+    focusTrapped = true;
+  };
+
+  const disableFocusTrapping = () => {
+    focusTrapped = false;
+  };
+
+  const checkFocus = (event) => {
+    if (!focusTrapped) {
+      return;
+    }
+
+    if (element !== event.target && !element.contains(event.target)) {
+      focus();
+    }
+  };
+
+  focus();
+
+  // As we only want to trap focus for keyboard navigation, we enable focus trapping on keydown and disable it again on keyup.
+  // This means that focus is trapped when pressing the tab key, but not trapped for other navigation events such as mouse clicks.
+  document.addEventListener('keydown', enableFocusTrapping);
+  document.addEventListener('focusin', checkFocus);
+  document.addEventListener('keyup', disableFocusTrapping);
+
+  return () => {
+    document.removeEventListener('keydown', enableFocusTrapping);
+    document.removeEventListener('focusin', checkFocus);
+    document.removeEventListener('keyup', disableFocusTrapping);
+  };
+};
+
+let teardownFn;
+
+const scopeFocus = (element) => {
+  if (teardownFn) teardownFn();
+  teardownFn = init(element);
+};
+
+const unscopeFocus = () => {
+  if (teardownFn) teardownFn();
+  teardownFn = null;
+};
+
+export default { scopeFocus, unscopeFocus };

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

@@ -0,0 +1,23 @@
+/*
+ * 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 as linkAttributes } from 'bpk-component-link';
+
+export default [...linkAttributes];

package/bpk-component-progress/README.md

@@ -0,0 +1,56 @@
+# bpk-component-progress
+
+> Backpack progress bar component.
+
+## Installation
+
+```sh
+npm install bpk-component-progress --save-dev
+```
+
+## Usage
+
+```js
+import React, { Component } from 'react';
+import BpkProgress from 'bpk-component-progress';
+
+const Progress = () => (
+  <BpkProgress
+    min={0}
+    max={100}
+    value={63}
+    aria-label="Searching"
+    onCompleteTransitionEnd={() => alert('Completed!')}
+  />
+);
+
+const Steps = () => (
+  <BpkProgress
+    stepped
+    min={0}
+    max={5}
+    value={1}
+    aria-label="Checkout"
+    getValueText={(value, min, max) => `Step ${value} of ${max}`}
+  />
+);
+```
+
+## Props
+
+| Property                 | PropType                      | Required | Default Value |
+| ------------------------ | ----------------------------- | -------- | ------------- |
+| max                      | number                        | true     | -             |
+| min                      | number                        | true     | -             |
+| value                    | number                        | true     | -             |
+| className                | string                        | false    | null          |
+| getValueText             | func                          | false    | null          |
+| small                    | bool                          | false    | false         |
+| onComplete               | func                          | false    | null          |
+| onCompleteTransitionEnd  | func                          | false    | null          |
+| stepped                  | bool                          | false    | false         |
+| stepColor                | string                        | false    | `colorWhite`    |
+
+## Theme props
+
+* `progressBarFillColor`

package/bpk-component-progress/examples.js

@@ -0,0 +1,130 @@
+/*
+ * 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, { Component } from 'react';
+import BpkButton from 'bpk-component-button';
+import { cssModules } from 'bpk-react-utils';
+
+import STYLES from './examples.module.scss';
+
+import BpkProgress from './index';
+
+const getClassName = cssModules(STYLES);
+
+class ProgressContainer extends Component<{}, { progress: number }> {
+  constructor() {
+    super();
+
+    this.state = {
+      progress: 0,
+    };
+  }
+
+  render() {
+    const { progress } = this.state;
+    return (
+      <div className={getClassName('bpkdocs-progress-container__flex')}>
+        <BpkButton
+          secondary
+          onClick={() => this.setState({ progress: 0 })}
+          disabled={progress === 0}
+        >
+          Reset
+        </BpkButton>
+        &nbsp;
+        <BpkButton
+          onClick={() => this.setState({ progress: progress + 50 })}
+          disabled={progress === 100}
+        >
+          Go!
+        </BpkButton>
+        &nbsp;
+        <div className={getClassName('bpkdocs-progress-container__flex-grow')}>
+          {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+          <BpkProgress min={0} max={100} value={progress} {...this.props} />
+        </div>
+      </div>
+    );
+  }
+}
+
+class SteppedProgressContainer extends Component<{}, { progress: number }> {
+  constructor() {
+    super();
+
+    this.state = {
+      progress: 1,
+    };
+  }
+
+  setProgress = (progress: number) => {
+    if (progress >= 1 && progress <= 5) {
+      this.setState({ progress });
+    }
+  };
+
+  render() {
+    return (
+      <div>
+        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+        <BpkProgress
+          min={0}
+          max={5}
+          value={this.state.progress}
+          stepped
+          {...this.props}
+        />
+        <br />
+        <div className={getClassName('bpkdocs-progress-container__flex')}>
+          <BpkButton
+            secondary
+            onClick={() => this.setProgress(this.state.progress - 1)}
+            disabled={this.state.progress <= 1}
+          >
+            Back
+          </BpkButton>
+          <span>{`Step ${this.state.progress} of 5`}</span>
+          <BpkButton
+            onClick={() => this.setProgress(this.state.progress + 1)}
+            disabled={this.state.progress === 5}
+          >
+            Continue
+          </BpkButton>
+        </div>
+      </div>
+    );
+  }
+}
+
+const DefaultExample = () => <ProgressContainer />;
+
+const SmallExample = () => <ProgressContainer small />;
+
+const SteppedExample = () => <SteppedProgressContainer />;
+
+const MixedExample = () => (
+  <div>
+    <DefaultExample />
+    <SmallExample />
+    <SteppedExample />
+  </div>
+);
+
+export { DefaultExample, SmallExample, SteppedExample, MixedExample };

package/bpk-component-progress/examples.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.
+*/
+.bpkdocs-progress-container__flex{display:flex;justify-content:space-between;align-items:center}.bpkdocs-progress-container__flex-grow{flex-grow:1}

package/bpk-component-progress/examples.module.scss

@@ -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.
+ */
+
+.bpkdocs-progress-container {
+  &__flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-grow {
+      flex-grow: 1;
+    }
+  }
+}