@skyscanner/backpack-web 2.0.1 → 3.1.0

package/bpk-component-navigation-bar/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "bpk-component-navigation-bar",
+  "version": "3.1.12",
+  "description": "Backpack nativation bar 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.11",
+    "bpk-component-link": "^3.1.10",
+    "bpk-component-text": "^7.0.4",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "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.11",
+    "bpk-storybook-utils": "^1.1.9"
+  }
+}

package/bpk-component-navigation-stack/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "bpk-component-navigation-stack",
+  "version": "3.1.12",
+  "description": "Backpack navigation stack 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": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.7.2",
+    "react-transition-group": "^2.5.3"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-button": "^6.2.5",
+    "bpk-component-icon": "^9.2.11",
+    "bpk-component-navigation-bar": "^3.1.12",
+    "bpk-component-rtl-toggle": "^3.1.10"
+  }
+}

package/bpk-component-nudger/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "bpk-component-nudger",
+  "version": "7.0.4",
+  "description": "Backpack nudger 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": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-button": "^6.2.5",
+    "bpk-component-icon": "^9.2.11",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "lodash.clamp": "^4.0.3",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-label": "^5.1.10",
+    "bpk-storybook-utils": "^1.1.9"
+  }
+}

package/bpk-component-overlay/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-overlay",
+  "version": "2.1.11",
+  "description": "Backpack overlay 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/"
+  },
+  "dependencies": {
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-image": "^5.1.11",
+    "bpk-component-text": "^7.0.4"
+  },
+  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8"
+}

package/bpk-component-pagination/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-pagination",
+  "version": "4.0.9",
+  "description": "Backpack pagination 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-button": "^6.2.5",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-icon": "^9.2.11"
+  }
+}

package/bpk-component-panel/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bpk-component-panel",
+  "version": "3.1.10",
+  "description": "Backpack panel 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": "5c156b97cb0ba5e75851d3c763334578714c895e",
+  "dependencies": {
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-component-phone-input/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "bpk-component-phone-input",
+  "version": "7.1.15",
+  "description": "Backpack phone input 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": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-input": "^6.1.13",
+    "bpk-component-label": "^5.1.10",
+    "bpk-component-select": "^5.1.10",
+    "bpk-component-text": "^7.0.4",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-fieldset": "^4.1.15",
+    "bpk-component-image": "^5.1.11"
+  }
+}

package/bpk-component-popover/README.md

@@ -84,7 +84,7 @@ class App extends Component {
 | labelAsTitle          | bool                                      | false    | false         |
 | padded                | bool                                      | false    | true          |
 | placement             | oneOf(['top', 'right', 'bottom', 'left']) | false    | 'bottom'      |
-| popperModifiers       | object                                    | false    | null          |
+| popperModifiers       | arrayOf(object)                           | false    | null          |
 | portalClassName       | string                                    | false    | null          |
 | portalStyle           | object                                    | false    | null          |
 | renderTarget          | func                                      | false    | null          |
@@ -118,7 +118,7 @@ const onClose = (event, {
 
 #### popperModifiers
 
-Please refer to the [documentation](https://github.com/FezVrasta/popper.js/blob/v1.12.9/docs/_includes/popper-documentation.md#modifiers) for the underlying positioning library "Popper.js". You can achieve various behaviours such as allowing the popover to overflow the viewport etc.
+Please refer to the [documentation](https://popper.js.org/docs/v2/modifiers/) for the underlying positioning library "Popper.js". You can achieve various behaviours such as allowing the popover to overflow the viewport etc.
 
 ## Theme Props
 

package/bpk-component-popover/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "bpk-component-popover",
+  "version": "5.0.0",
+  "description": "Backpack popover 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": {
+    "@popperjs/core": "^2.11.5",
+    "a11y-focus-scope": "^1.1.3",
+    "a11y-focus-store": "^1.0.0",
+    "bpk-component-close-button": "^3.1.11",
+    "bpk-component-link": "^3.1.10",
+    "bpk-component-text": "^7.0.4",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-button": "^6.2.5",
+    "bpk-component-content-container": "^5.0.4",
+    "bpk-component-input": "^6.1.13"
+  }
+}

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

@@ -109,6 +109,7 @@ const BpkPopover = (props: Props) => {
           id={ARROW_ID}
           className={getClassName('bpk-popover__arrow')}
           role="presentation"
+          data-popper-arrow
         />
         {labelAsTitle ? (
           <header className={getClassName('bpk-popover__header')}>

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

@@ -20,7 +20,8 @@
 
 $bpk-spacing-v2: true;
 
-$arrow-size: bpk-spacing-sm() * 3;
+$arrow-size: bpk-spacing-lg();
+$arrow-inset-margin: -($bpk-one-pixel-rem * 11);
 
 .bpk-popover-portal {
   z-index: $bpk-zindex-popover;
@@ -29,22 +30,6 @@ $arrow-size: bpk-spacing-sm() * 3;
     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 {
@@ -68,22 +53,39 @@ $arrow-size: bpk-spacing-sm() * 3;
   }
 
   &__arrow {
-    @include bpk-layer-arrow($arrow-size);
+    position: aboslute;
+    width: $arrow-size;
+    height: $arrow-size;
+    transform: rotate(45deg);
+    border: $bpk-one-pixel-rem solid transparent;
+    background: inherit;
+
+    .bpk-popover-portal[data-popper-placement='top'] & {
+      bottom: $arrow-inset-margin;
+      border-right-color: $bpk-color-sky-gray-tint-06;
+      border-bottom-color: $bpk-color-sky-gray-tint-06;
+    }
 
-    .bpk-popover-portal[x-placement='top'] & {
-      @include bpk-layer-arrow-bottom($arrow-size);
+    .bpk-popover-portal[data-popper-placement='right'] & {
+      left: $arrow-inset-margin;
+      border-bottom-color: $bpk-color-sky-gray-tint-06;
+      border-left-color: $bpk-color-sky-gray-tint-06;
     }
 
-    .bpk-popover-portal[x-placement='right'] & {
-      @include bpk-layer-arrow-left($arrow-size);
+    .bpk-popover-portal[data-popper-placement='bottom'] & {
+      top: $arrow-inset-margin;
+      border-top-color: $bpk-color-sky-gray-tint-06;
+      border-left-color: $bpk-color-sky-gray-tint-06;
     }
 
-    .bpk-popover-portal[x-placement='bottom'] & {
-      @include bpk-layer-arrow-top($arrow-size);
+    .bpk-popover-portal[data-popper-placement='left'] & {
+      right: $arrow-inset-margin;
+      border-top-color: $bpk-color-sky-gray-tint-06;
+      border-right-color: $bpk-color-sky-gray-tint-06;
     }
 
-    .bpk-popover-portal[x-placement='left'] & {
-      @include bpk-layer-arrow-right($arrow-size);
+    &[data-hide] {
+      visibility: hidden;
     }
   }
 

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

@@ -18,7 +18,7 @@
 
 /* @flow strict */
 
-import Popper from '@skyscanner/popper.js';
+import { createPopper, basePlacements } from '@popperjs/core';
 import PropTypes from 'prop-types';
 import React, { Component, type Node } from 'react';
 import focusStore from 'a11y-focus-store';
@@ -32,7 +32,6 @@ import BpkPopover, {
   defaultProps as popoverDefaultProps,
   type Props as PopoverProps,
 } from './BpkPopover';
-import { ARROW_ID } from './constants';
 
 const getClassName = cssModules(STYLES);
 
@@ -52,7 +51,7 @@ export const propTypes = {
   target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  placement: PropTypes.oneOf(basePlacements),
   portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   portalClassName: PropTypes.string,
   renderTarget: PropTypes.func,
@@ -69,7 +68,7 @@ export const defaultProps = {
 };
 
 class BpkPopoverPortal extends Component<Props> {
-  popper: ?typeof Popper;
+  popper: ?typeof createPopper;
 
   suppressRestoreFocus: boolean;
 
@@ -140,34 +139,61 @@ class BpkPopoverPortal extends Component<Props> {
       this.popper = null;
     }
 
+    // Custom modifier that makes the arrow display at the edge of the target.
+    const applyArrowHide = {
+      name: 'applyArrowHide',
+      enabled: true,
+      phase: 'write',
+      fn({ state }) {
+        const { arrow } = state.elements;
+        if (arrow) {
+          if (state.modifiersData.arrow.centerOffset !== 0) {
+            arrow.setAttribute('data-hide', '');
+          } else {
+            arrow.removeAttribute('data-hide');
+          }
+        }
+      },
+    };
+
+    // The default modifiers for the popper
     // Note that GPU acceleration should be disabled otherwise Popper will use `translate3d`
     // which can cause blurriness in Safari and Chrome.
+    const stdModifiers = [
+      {
+        name: 'computeStyles',
+        options: {
+          gpuAcceleration: false,
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 17],
+        },
+      },
+      applyArrowHide,
+    ];
+
     if (!this.popper) {
-      this.popper = new Popper(targetElement, popoverElement, {
+      this.popper = createPopper(targetElement, popoverElement, {
         placement: this.props.placement,
-        onCreate: () => {
+        onFirstUpdate: () => {
           if (targetElement) {
             targetElement.focus();
           }
           focusStore.storeFocus();
           keyboardFocusScope.scopeFocus(popoverElement);
         },
-        modifiers: {
-          ...this.props.popperModifiers,
-          computeStyle: {
-            gpuAcceleration: false,
-          },
-          arrow: {
-            element: `#${ARROW_ID}`,
-          },
-        },
+        modifiers: this.props.popperModifiers
+          ? [...this.props.popperModifiers, ...stdModifiers]
+          : stdModifiers,
       });
     }
 
     this.previousTargetElement = targetElement;
-
     if (this.popper) {
-      this.popper.scheduleUpdate();
+      this.popper.update();
     }
   }
 

package/bpk-component-price/README.md

@@ -0,0 +1,35 @@
+# bpk-component-price
+
+> Backpack example component.
+
+## Installation
+
+```sh
+npm install bpk-component-price --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkPrice, { SIZES } from 'bpk-component-price';
+
+export default () => (
+  <BpkPrice
+    size={SIZES.large}
+    subtitle="£209"
+    title="£1,830"
+    description="/ night"
+  />
+);
+```
+
+## Props
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| title     | string   | true     | -             |
+| size | oneOf(SIZES)   | false    | SIZES.small         |
+| subtitle  | string   | false    | null          |
+| description | string   | false    | null          |
+| className | string   | false    | null          |

package/bpk-component-price/index.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 BpkPrice, { SIZES } from './src/BpkPrice';
+
+export default BpkPrice;
+export { SIZES };

package/bpk-component-price/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bpk-component-price",
+  "version": "1.0.0",
+  "description": "Backpack price 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/"
+  },
+  "dependencies": {
+    "bpk-component-text": "^7.0.4",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-component-price/src/BpkPrice.js

@@ -0,0 +1,106 @@
+/*
+ * 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 BpkText, { TEXT_STYLES } from '../../bpk-component-text';
+
+import STYLES from './BpkPrice.module.scss';
+
+export const SIZES = {
+  small: 'small',
+  large: 'large',
+};
+
+type Props = {
+  title: string,
+  size: $Values<typeof SIZES>,
+  className: ?string,
+  subtitle: ?string,
+  description: ?string,
+};
+
+const getClassName = cssModules(STYLES);
+
+const BpkPrice = (props: Props) => {
+  const { className, description, size, subtitle, title, ...rest } = props;
+
+  const isSmall = size === SIZES.small;
+
+  return (
+    <div
+      className={getClassName(
+        'bpk-price',
+        isSmall && 'bpk-price--small',
+        className,
+      )}
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+      {...rest}
+    >
+      {subtitle && (
+        <BpkText
+          className={getClassName('bpk-price__subtitle')}
+          textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
+          tagName="span"
+        >
+          {subtitle}
+        </BpkText>
+      )}
+      <div className={isSmall && getClassName('bpk-price__titleColumn')}>
+        <BpkText
+          textStyle={isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl}
+          tagName="span"
+        >
+          {title}
+        </BpkText>
+        {description && (
+          <BpkText
+            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
+            tagName="span"
+            className={getClassName(
+              'bpk-price__description',
+              !isSmall && 'bpk-price__descriptionSpacing',
+            )}
+          >
+            {description}
+          </BpkText>
+        )}
+      </div>
+    </div>
+  );
+};
+
+BpkPrice.propTypes = {
+  title: PropTypes.string.isRequired,
+  size: PropTypes.oneOf(Object.keys(SIZES)),
+  className: PropTypes.string,
+  subtitle: PropTypes.string,
+  description: PropTypes.string,
+};
+
+BpkPrice.defaultProps = {
+  size: SIZES.small,
+  className: null,
+  subtitle: null,
+  description: null,
+};
+
+export default BpkPrice;