@skyscanner/backpack-web 29.3.1 → 29.4.1

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

@@ -21,35 +21,12 @@ import focusStore from 'a11y-focus-store';
 import { Portal, cssModules } from "../../bpk-react-utils";
 import keyboardFocusScope from "./keyboardFocusScope";
 import STYLES from "./BpkPopover.module.css";
-import BpkPopover, { propTypes as popoverPropTypes, defaultProps as popoverDefaultProps } from "./BpkPopover";
+import BpkPopover from "./BpkPopover";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-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.arrayOf(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 {
-  static propTypes = propTypes;
-  static defaultProps = defaultProps;
   constructor() {
     super();
     this.popper = null;
@@ -189,4 +166,53 @@ class BpkPopoverPortal extends Component {
     });
   }
 }
+const propTypes = {
+  // BpkPopover props - when migrating the popover to TS, we can import the type from BpkPopover
+  children: PropTypes.node.isRequired,
+  closeButtonText: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  closeButtonIcon: PropTypes.bool,
+  closeButtonProps: PropTypes.object,
+  labelAsTitle: PropTypes.bool,
+  padded: PropTypes.bool,
+  // BpkPopoverPortal additional props
+  /**
+   * In order to attach the popover to a regular DOM element, provide a function which returns it to `target`.
+   * `target` can be a DOM element with a `ref` attached to it or a function that returns a DOM element.
+   */
+  target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  portalStyle: PropTypes.object,
+  portalClassName: PropTypes.string,
+  renderTarget: PropTypes.func,
+  /**
+   * 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.
+   */
+  popperModifiers: PropTypes.arrayOf(PropTypes.object)
+};
+const defaultProps = {
+  // BpkPopover props - when migrating the popover to TS, we can import the type from BpkPopover
+  className: null,
+  closeButtonIcon: true,
+  closeButtonProps: null,
+  labelAsTitle: false,
+  padded: true,
+  // BpkPopoverPortal additional props
+  placement: 'bottom',
+  portalStyle: null,
+  portalClassName: null,
+  renderTarget: null,
+  popperModifiers: null
+};
+BpkPopoverPortal.propTypes = {
+  ...propTypes
+};
+BpkPopoverPortal.defaultProps = {
+  ...defaultProps
+};
 export default BpkPopoverPortal;

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

@@ -36,26 +36,26 @@ const renderSteps = numberOfSteps => {
   }
   return steps;
 };
+const propTypes = {
+  max: PropTypes.number.isRequired,
+  min: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+  stepped: PropTypes.bool,
+  small: PropTypes.bool,
+  className: PropTypes.string,
+  onComplete: PropTypes.func,
+  onCompleteTransitionEnd: PropTypes.func,
+  getValueText: PropTypes.func
+};
+const defaultProps = {
+  className: null,
+  stepped: false,
+  small: false,
+  onComplete: () => null,
+  onCompleteTransitionEnd: () => null,
+  getValueText: null
+};
 class BpkProgress extends Component {
-  static propTypes = {
-    max: PropTypes.number.isRequired,
-    min: PropTypes.number.isRequired,
-    value: PropTypes.number.isRequired,
-    stepped: PropTypes.bool,
-    small: PropTypes.bool,
-    className: PropTypes.string,
-    onComplete: PropTypes.func,
-    onCompleteTransitionEnd: PropTypes.func,
-    getValueText: PropTypes.func
-  };
-  static defaultProps = {
-    className: null,
-    stepped: false,
-    small: false,
-    onComplete: () => null,
-    onCompleteTransitionEnd: () => null,
-    getValueText: null
-  };
   componentDidUpdate(previousProps) {
     const {
       max,
@@ -119,4 +119,10 @@ class BpkProgress extends Component {
     );
   }
 }
+BpkProgress.propTypes = {
+  ...propTypes
+};
+BpkProgress.defaultProps = {
+  ...defaultProps
+};
 export default BpkProgress;

package/bpk-component-select/src/BpkSelect.js

@@ -62,11 +62,13 @@ const BpkSelect = props => {
 BpkSelect.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  // The below "value" prop is only relevant if the user is wanting a controlled component
-  // In some cases, users may want to create an uncontrolled select as described here: https://beta.reactjs.org/reference/react-dom/components/select
-  // In this case value is not required and nor should it be given a default value (as the linter thinks)
-  // Prop types are not expressive enough (without a drastic increase in complexity of writing a custom validator) to encode this relationship. Equally, this wouldn't actually solve the linting issue (AFAIK).
-  // As a solution, the require-default-props has been disabled for this line.
+  /**
+   * The "value" prop is only relevant if the user is wanting a controlled component
+   * In some cases, users may want to create an uncontrolled select as described here: https://beta.reactjs.org/reference/react-dom/components/select
+   * In this case value is not required and nor should it be given a default value (as the linter thinks)
+   * Prop types are not expressive enough (without a drastic increase in complexity of writing a custom validator) to encode this relationship. Equally, this wouldn't actually solve the linting issue (AFAIK).
+   * As a solution, the require-default-props has been disabled for this line.
+   */
 
   value: PropTypes.string,
   className: PropTypes.string,

package/bpk-component-tooltip/src/BpkTooltipPortal.d.ts

@@ -21,7 +21,15 @@ import { Component } from 'react';
 import type { ReactNode, ReactElement } from 'react';
 import type { TooltipProps } from './BpkTooltip';
 export type Props = TooltipProps & {
+    /**
+     * Tooltips are invisible to assistive technologies such as screen readers.
+     * To improve accessibility, `ariaLabel` is required to describe the content of the tooltip to assistive technologies.
+     * The label will be used on the `target` element, so any existing `aria-label` attached to `target` will be overridden.
+     */
     ariaLabel: string;
+    /**
+     * "target" should be a DOM element with a "ref" attached to it.
+     */
     target: ReactElement<any>;
     children: ReactNode | string;
     placement?: 'top' | 'right' | 'bottom' | 'left' | 'auto';
@@ -29,6 +37,10 @@ export type Props = TooltipProps & {
     portalStyle?: object;
     portalClassName?: string;
     renderTarget: null | (() => null | HTMLElement);
+    /**
+     * 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 tooltip to overflow the viewport etc.
+     */
     popperModifiers?: object[];
 };
 type State = {

package/bpk-mixins/src/mixins/_buttons.scss

@@ -389,7 +389,6 @@
   $vertical-padding: $bpk-one-pixel-rem * 6;
   $vertical-padding-large: $bpk-one-pixel-rem * 12;
 
-  border-radius: 0;
   background: none; /* stylelint-disable-line order/order, order/properties-order */
   box-shadow: none;
 

package/bpk-mixins/src/mixins/_utils.scss

@@ -20,6 +20,20 @@
 /// @group utils
 ////
 
+/// Standard focus indicator for elements.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-focus-indicator();
+///   }
+
+@mixin bpk-focus-indicator {
+  outline: ($bpk-one-pixel-rem * 2) solid $bpk-text-link-day !important; /* stylelint-disable-line declaration-no-important */
+  outline-offset: (
+    $bpk-one-pixel-rem * 2
+  ) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /// Hide visually and from screen readers.
 ///
 /// @example scss

package/bpk-stylesheets/base.css

@@ -16,5 +16,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  * 
- *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}:global(body.scaffold-font-size){font-size:13px}:global(body.enable-font-smoothing){-webkit-font-smoothing:antialiased}:global(.hidden),:global(.hide){display:none !important}:global(.visuallyhidden),:global(.visually-hidden){position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}:global(.visuallyhidden.focusable):active,:global(.visuallyhidden.focusable):focus,:global(.visually-hidden.focusable):active,:global(.visually-hidden.focusable):focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}:global(.invisible){visibility:hidden}:global(.clearfix)::before,:global(.clearfix)::after{content:'';display:table}:global(.clearfix)::after{clear:both}
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}:global(body.scaffold-font-size){font-size:13px}:global(body.enable-font-smoothing){-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3 !important;outline-offset:.125rem !important}:global(.hidden),:global(.hide){display:none !important}:global(.visuallyhidden),:global(.visually-hidden){position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}:global(.visuallyhidden.focusable):active,:global(.visuallyhidden.focusable):focus,:global(.visually-hidden.focusable):active,:global(.visually-hidden.focusable):focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}:global(.invisible){visibility:hidden}:global(.clearfix)::before,:global(.clearfix)::after{content:'';display:table}:global(.clearfix)::after{clear:both}
 

package/bpk-stylesheets/index.scss

@@ -50,6 +50,10 @@ body {
   }
 }
 
+:focus-visible {
+  @include bpk-focus-indicator;
+}
+
 :global(.hidden),
 :global(.hide) {
   @include bpk-hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "29.3.1",
+  "version": "29.4.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",