@skyscanner/backpack-web 2.0.1 → 3.0.0

package/bpk-component-nudger/src/BpkNudger.js

@@ -20,8 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import BpkConfigurableNudger from './BpkConfigurableNudger';
 import {

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

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { secondaryThemeAttributes as themeAttributes } from '../../bpk-component-button/themeAttributes';
+import { secondaryThemeAttributes as themeAttributes } from 'bpk-component-button/themeAttributes';
 
 export default themeAttributes;

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-overlay/src/BpkOverlay.js

@@ -19,8 +19,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkOverlay.module.scss';
 

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-pagination/src/BpkPagination.js

@@ -18,8 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import BpkPaginationList from './BpkPaginationList';
 import BpkPaginationNudger from './BpkPaginationNudger';

package/bpk-component-pagination/src/BpkPaginationList.js

@@ -18,8 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import BpkPaginationPage from './BpkPaginationPage';
 import BpkPaginationBreak from './BpkPaginationBreak';

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -18,11 +18,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
-import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
-import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';
+import { cssModules } from 'bpk-react-utils';
+import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
+import ArrowLeftIcon from 'bpk-component-icon/lg/arrow-left';
+import ArrowRightIcon from 'bpk-component-icon/lg/arrow-right';
 
 import STYLES from './BpkPaginationNudger.module.scss';
 

package/bpk-component-pagination/src/BpkPaginationPage.js

@@ -16,11 +16,10 @@
  * limitations under the License.
  */
 
+import BpkButton from 'bpk-component-button';
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import BpkButton from '../../bpk-component-button';
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkPaginationPage.module.scss';
 

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

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { secondaryThemeAttributes } from '../../bpk-component-button';
+import { secondaryThemeAttributes } from 'bpk-component-button';
 
 export default [
   ...secondaryThemeAttributes,

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-panel/src/BpkPanel.js

@@ -18,8 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkPanel.module.scss';
 

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-phone-input/src/BpkPhoneInput.js

@@ -20,11 +20,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkInput, { INPUT_TYPES } from '../../bpk-component-input';
-import BpkLabel from '../../bpk-component-label';
-import BpkSelect from '../../bpk-component-select';
+import { cssModules } from 'bpk-react-utils';
+import BpkInput, { INPUT_TYPES } from 'bpk-component-input';
+import BpkLabel from 'bpk-component-label';
+import BpkSelect from 'bpk-component-select';
 
 import STYLES from './BpkPhoneInput.module.scss';
 

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

@@ -20,11 +20,10 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-import { BpkButtonLink } from '../../bpk-component-link';
-import BpkCloseButton from '../../bpk-component-close-button';
-import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+import { BpkButtonLink } from 'bpk-component-link';
+import BpkCloseButton from 'bpk-component-close-button';
+import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkPopover.module.scss';
 import { ARROW_ID } from './constants';
@@ -109,6 +108,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,12 +18,11 @@
 
 /* @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';
-
-import { Portal, cssModules } from '../../bpk-react-utils';
+import { Portal, cssModules } from 'bpk-react-utils';
 
 import keyboardFocusScope from './keyboardFocusScope';
 import STYLES from './BpkPopover.module.scss';
@@ -32,7 +31,6 @@ import BpkPopover, {
   defaultProps as popoverDefaultProps,
   type Props as PopoverProps,
 } from './BpkPopover';
-import { ARROW_ID } from './constants';
 
 const getClassName = cssModules(STYLES);
 
@@ -52,7 +50,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 +67,7 @@ export const defaultProps = {
 };
 
 class BpkPopoverPortal extends Component<Props> {
-  popper: ?typeof Popper;
+  popper: ?typeof createPopper;
 
   suppressRestoreFocus: boolean;
 
@@ -140,34 +138,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-popover/src/themeAttributes.js

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { themeAttributes as linkAttributes } from '../../bpk-component-link';
+import { themeAttributes as linkAttributes } from 'bpk-component-link';
 
 export default [...linkAttributes];

package/bpk-component-progress/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "bpk-component-progress",
+  "version": "3.1.10",
+  "description": "Backpack progress 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": "5c156b97cb0ba5e75851d3c763334578714c895e",
+  "dependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "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-button": "^6.2.5",
+    "bpk-storybook-utils": "^1.1.9"
+  }
+}

package/bpk-component-progress/src/BpkProgress.js

@@ -22,8 +22,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { colorWhite } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import clamp from 'lodash.clamp';
-
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkProgress.module.scss';
 

package/bpk-component-radio/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-radio",
+  "version": "3.1.11",
+  "description": "Backpack radio button 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"
+  },
+  "devDependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-storybook-utils": "^1.1.9"
+  }
+}

package/bpk-component-radio/src/BpkRadio.js

@@ -20,8 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkRadio.module.scss';
 

package/bpk-component-rating/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "bpk-component-rating",
+  "version": "5.0.1",
+  "description": "Backpack rating 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": "^4.1.2",
+    "lodash.clamp": "^4.0.3",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "bpk-component-text": "^7.0.4"
+  }
+}