@skyscanner/backpack-web 19.0.0 → 20.1.0

package/bpk-component-datepicker/src/BpkDatepicker.js

@@ -22,7 +22,7 @@ import { createRef, Component } from 'react';
 import BpkInput, { withOpenEvents } from '../../bpk-component-input';
 import BpkModal from '../../bpk-component-modal';
 import BpkPopover from '../../bpk-component-popover';
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint';
 import {
   composeCalendar,
@@ -319,10 +319,6 @@ BpkDatepicker.propTypes = {
   // Optional
   calendarComponent: PropTypes.elementType,
   inputComponent: PropTypes.elementType,
-  date: deprecated(
-    PropTypes.instanceOf(Date),
-    'Use selectionConfiguration to set date',
-  ),
   dateModifiers: CustomPropTypes.DateModifiers,
   fixedWidth: PropTypes.bool,
   inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
@@ -334,11 +330,6 @@ BpkDatepicker.propTypes = {
   onOpenChange: PropTypes.func,
   onMonthChange: PropTypes.func,
   selectionConfiguration: CustomPropTypes.SelectionConfiguration,
-  // eslint-disable-next-line react/require-default-props
-  showWeekendSeparator: deprecated(
-    PropTypes.bool,
-    'The showWeekendSeparator prop in Week is now deprecated as no longer part of the calendar, so is no longer required',
-  ),
   initiallyFocusedDate: PropTypes.instanceOf(Date),
   renderTarget: PropTypes.func,
   isOpen: PropTypes.bool,
@@ -351,7 +342,6 @@ BpkDatepicker.propTypes = {
 BpkDatepicker.defaultProps = {
   calendarComponent: DefaultCalendar,
   inputComponent: null,
-  date: null,
   dateModifiers: DefaultCalendar.defaultProps.dateModifiers,
   inputProps: {},
   fixedWidth: true,

package/bpk-component-flare/src/svgs/pointer.svg

@@ -1 +1 @@
-<svg viewBox="0 0 14832 55"><path d="M7501.307 8.517l-68.043 39.341c-10.632 6.185-23.795 6.185-34.528 0l-68.144-39.34c-8.91-5.173-18.988-8.215-29.316-8.518H0v55h14832V0H7530.671a63.604 63.604 0 00-29.364 8.517z"/></svg>
+<svg viewBox="0 0 14832 55"><path d="m7501.307 8.517-68.043 39.341c-10.632 6.185-23.795 6.185-34.528 0l-68.144-39.34c-8.91-5.173-18.988-8.215-29.316-8.518H0v55h14832V0H7530.671a63.604 63.604 0 0 0-29.364 8.517z"/></svg>

package/bpk-component-icon/index.js

@@ -36,11 +36,7 @@ function withLargeButtonAlignment(WrappedComponent) {
   return withAlignment(WrappedComponent, buttonLargeLineHeight, iconSizeLg);
 }
 
-// alias to maintain backwards compat, can be deprecated in due course
-// alias to maintain backwards compat, can be deprecated in due course
 export {
-  withButtonAlignment as alignToButton,
-  withLargeButtonAlignment as alignToLargeButton,
   withButtonAlignment,
   withLargeButtonAlignment,
   withAlignment,

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -23,10 +23,9 @@ import PropTypes from 'prop-types';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import { BpkSpinner } from '../../bpk-component-spinner';
 
-import { widthHeightAspectRatioPropType } from './customPropTypes';
 import STYLES from './BpkBackgroundImage.module.scss';
 
 const getClassName = cssModules(STYLES);
@@ -34,11 +33,9 @@ const getClassName = cssModules(STYLES);
 export type BpkBackgroundImageProps = {
   children: Node,
   aspectRatio: ?number,
-  height: ?number,
   inView: boolean,
   loading: boolean,
   src: string,
-  width: ?number,
   className: ?string,
   onLoad: ?() => mixed,
   style: ?{},
@@ -55,15 +52,7 @@ class BpkBackgroundImage extends Component<BpkBackgroundImageProps> {
   onBackgroundImageLoad: () => mixed;
 
   static propTypes = {
-    aspectRatio: widthHeightAspectRatioPropType,
-    height: deprecated(
-      widthHeightAspectRatioPropType,
-      'Use "aspectRatio" instead of "width" and "height".',
-    ),
-    width: deprecated(
-      widthHeightAspectRatioPropType,
-      'Use "aspectRatio" instead of "width" and "height".',
-    ),
+    aspectRatio: PropTypes.number.isRequired,
     src: PropTypes.string.isRequired,
     className: PropTypes.string,
     inView: PropTypes.bool,
@@ -74,9 +63,6 @@ class BpkBackgroundImage extends Component<BpkBackgroundImageProps> {
   };
 
   static defaultProps = {
-    width: null,
-    height: null,
-    aspectRatio: null,
     className: null,
     inView: true,
     loading: false,
@@ -113,9 +99,6 @@ class BpkBackgroundImage extends Component<BpkBackgroundImageProps> {
     if (this.props.aspectRatio) {
       return this.props.aspectRatio;
     }
-    if (this.props.width && this.props.height) {
-      return this.props.width / this.props.height;
-    }
     return 1;
   };
 

package/bpk-component-image/src/BpkImage.js

@@ -23,10 +23,9 @@ import PropTypes from 'prop-types';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import { BpkSpinner } from '../../bpk-component-spinner';
 
-import { widthHeightAspectRatioPropType } from './customPropTypes';
 import STYLES from './BpkImage.module.scss';
 import BORDER_RADIUS_STYLES from './BpkImageBorderRadiusStyles';
 
@@ -93,11 +92,9 @@ class Image extends Component<ImageProps> {
 type BpkImageProps = {
   altText: string,
   aspectRatio: ?number,
-  height: ?number,
   inView: boolean,
   loading: boolean,
   src: string,
-  width: ?number,
   borderRadiusStyle: $Keys<typeof BORDER_RADIUS_STYLES>,
   className: ?string,
   onLoad: ?() => mixed,
@@ -113,7 +110,7 @@ class BpkImage extends Component<BpkImageProps> {
   static propTypes = {
     altText: PropTypes.string.isRequired,
     src: PropTypes.string.isRequired,
-    aspectRatio: widthHeightAspectRatioPropType,
+    aspectRatio: PropTypes.number.isRequired,
     borderRadiusStyle: PropTypes.oneOf(Object.keys(BORDER_RADIUS_STYLES)),
     className: PropTypes.string,
     inView: PropTypes.bool,
@@ -121,27 +118,16 @@ class BpkImage extends Component<BpkImageProps> {
     onLoad: PropTypes.func,
     style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     suppressHydrationWarning: PropTypes.bool,
-    height: deprecated(
-      widthHeightAspectRatioPropType,
-      'Use "aspectRatio" instead of "width" and "height".',
-    ),
-    width: deprecated(
-      widthHeightAspectRatioPropType,
-      'Use "aspectRatio" instead of "width" and "height".',
-    ),
   };
 
   static defaultProps = {
-    aspectRatio: null,
     borderRadiusStyle: BORDER_RADIUS_STYLES.none,
     className: null,
-    height: null,
     inView: true,
     loading: false,
     onLoad: null,
     style: {},
     suppressHydrationWarning: false,
-    width: null,
   };
 
   onImageLoad = (): void => {
@@ -154,9 +140,6 @@ class BpkImage extends Component<BpkImageProps> {
     if (this.props.aspectRatio) {
       return this.props.aspectRatio;
     }
-    if (this.props.width && this.props.height) {
-      return this.props.width / this.props.height;
-    }
     return 1;
   };
 
@@ -166,12 +149,10 @@ class BpkImage extends Component<BpkImageProps> {
       aspectRatio,
       borderRadiusStyle,
       className,
-      height,
       inView,
       loading,
       onLoad,
       style,
-      width,
       ...rest
     } = this.props;
 

package/bpk-component-input/index.js

@@ -23,28 +23,19 @@ import {
   propTypes,
   defaultProps,
   CLEAR_BUTTON_MODES,
-  INPUT_TYPES as TYPES,
+  INPUT_TYPES,
   type Props,
 } from './src/common-types';
 import themeAttributes from './src/themeAttributes';
 
 export default BpkInput;
 
-// TODO: Remove these in the next major
-const DEPRECATED_INPUT_TYPES = {
-  TEXT: 'text',
-  EMAIL: 'email',
-  NUMBER: 'number',
-  PASSWORD: 'password',
-  TEL: 'tel',
-};
-
 export type BpkInputProps = Props;
-export const INPUT_TYPES = { ...DEPRECATED_INPUT_TYPES, ...TYPES };
 export {
   propTypes,
   defaultProps,
   withOpenEvents,
+  INPUT_TYPES,
   CLEAR_BUTTON_MODES,
   themeAttributes,
 };

package/bpk-component-link/src/BpkButtonLink.js

@@ -32,15 +32,14 @@ type Props = {
   children: Node,
   className: ?string,
   onClick: (event: SyntheticEvent<>) => mixed,
-  white: boolean,
   alternate: boolean,
 };
 
 const BpkButtonLink = (props: Props) => {
-  const { alternate, children, className, onClick, white, ...rest } = props;
+  const { alternate, children, className, onClick, ...rest } = props;
   const classNames = [getClassName('bpk-link')];
 
-  if (white || alternate) {
+  if (alternate) {
     classNames.push(getClassName('bpk-link--alternate'));
   }
   if (className) {
@@ -65,15 +64,11 @@ BpkButtonLink.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   alternate: PropTypes.bool,
-  // DEPRECATED
-  white: PropTypes.bool,
 };
 
 BpkButtonLink.defaultProps = {
   className: null,
   alternate: false,
-  // DEPRECATED
-  white: false,
 };
 
 export { themeAttributes };

package/bpk-component-link/src/BpkLink.js

@@ -38,7 +38,6 @@ type Props = {
   blank: boolean,
   rel: ?string,
   alternate: boolean,
-  white: boolean,
 };
 
 const BpkLink = (props: Props) => {
@@ -50,7 +49,6 @@ const BpkLink = (props: Props) => {
     href,
     onClick,
     rel: propRel,
-    white,
     ...rest
   } = props;
 
@@ -59,7 +57,7 @@ const BpkLink = (props: Props) => {
   const target = blank ? '_blank' : null;
   const rel = blank ? propRel || 'noopener noreferrer' : propRel;
 
-  if (white || alternate) {
+  if (alternate) {
     classNames.push(getClassName('bpk-link--alternate'));
   }
   if (className) {
@@ -92,8 +90,6 @@ BpkLink.propTypes = {
   blank: PropTypes.bool,
   rel: PropTypes.string,
   alternate: PropTypes.bool,
-  // DEPRECATED
-  white: PropTypes.bool,
 };
 
 BpkLink.defaultProps = {
@@ -102,8 +98,6 @@ BpkLink.defaultProps = {
   blank: false,
   rel: null,
   alternate: false,
-  // DEPRECATED
-  white: false,
 };
 
 export default BpkLink;

package/bpk-component-overlay/README.md

@@ -10,7 +10,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 
 ```js
 import BpkText from '@skyscanner/backpack-web/bpk-component-text';
-import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from '@skyscanner/backpack-web/bpk-component-overlay';
+import BpkOverlay, { OVERLAY_TYPES } from '@skyscanner/backpack-web/bpk-component-overlay';
 
 export default () => (
   <div>
@@ -43,7 +43,6 @@ export default () => (
 | Property  | PropType | Required | Default Value |
 | --------- | -------- | -------- | ------------- |
 | children | Node | true | - |
-| borderRadiusStyle (deprecated) | BORDER_RADIUS_STYLES | false | BORDER_RADIUS_STYLES.none |
 | className | string | false | null |
 | foregroundContent | Node | false | null |
 | overlayType | oneOf(OVERLAY_TYPES) | false | OVERLAY_TYPES.solid |

package/bpk-component-overlay/index.js

@@ -20,10 +20,9 @@
 import BpkOverlay, {
   OVERLAY_TYPES,
   OVERLAY_LEVELS,
-  BORDER_RADIUS_STYLES,
   type Props as BpkOverlayProps,
 } from './src/BpkOverlay';
 
 export type { BpkOverlayProps };
 export default BpkOverlay;
-export { OVERLAY_TYPES, OVERLAY_LEVELS, BORDER_RADIUS_STYLES };
+export { OVERLAY_TYPES, OVERLAY_LEVELS };

package/bpk-component-overlay/src/BpkOverlay.js

@@ -20,7 +20,7 @@
 import PropTypes from 'prop-types';
 import type { Node } from 'react';
 
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkOverlay.module.scss';
 
@@ -42,14 +42,7 @@ export const OVERLAY_LEVELS = {
   off: 'off',
 };
 
-// DEPRECATED
-export const BORDER_RADIUS_STYLES = {
-  none: 'none',
-  sm: 'sm',
-};
-
 export type Props = {
-  borderRadiusStyle: ?$Keys<typeof BORDER_RADIUS_STYLES>,
   children: Node,
   overlayType: ?$Keys<typeof OVERLAY_TYPES>,
   overlayLevel: ?$Keys<typeof OVERLAY_LEVELS>,
@@ -59,7 +52,6 @@ export type Props = {
 
 const BpkOverlay = (props: Props) => {
   const {
-    borderRadiusStyle,
     children,
     className,
     foregroundContent,
@@ -88,10 +80,6 @@ const BpkOverlay = (props: Props) => {
 
 BpkOverlay.propTypes = {
   children: PropTypes.node.isRequired,
-  borderRadiusStyle: deprecated(
-    PropTypes.oneOf(Object.keys(BORDER_RADIUS_STYLES)),
-    'This property is deprecated and radius will now be set based on the content. Please remove usage of this property.',
-  ),
   className: PropTypes.string,
   foregroundContent: PropTypes.node,
   overlayType: PropTypes.oneOf(Object.keys(OVERLAY_TYPES)),
@@ -99,7 +87,6 @@ BpkOverlay.propTypes = {
 };
 
 BpkOverlay.defaultProps = {
-  borderRadiusStyle: null,
   className: null,
   foregroundContent: null,
   overlayType: OVERLAY_TYPES.solid,

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -21,7 +21,7 @@ import { Component } from 'react';
 import { startOfDay, startOfMonth } from 'date-fns';
 import { VariableSizeList as List } from 'react-window';
 
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import {
   DateUtils,
   BpkCalendarGridPropTypes,
@@ -174,10 +174,6 @@ BpkScrollableCalendarGridList.propTypes = {
   className: PropTypes.string,
   minDate: PropTypes.instanceOf(Date).isRequired,
   maxDate: PropTypes.instanceOf(Date).isRequired,
-  selectedDate: deprecated(
-    PropTypes.instanceOf(Date),
-    'Use selectionConfiguration to set selectedDate',
-  ),
   focusedDate: PropTypes.instanceOf(Date),
   ...BpkCalendarGridPropTypes,
 };
@@ -185,7 +181,6 @@ BpkScrollableCalendarGridList.propTypes = {
 BpkScrollableCalendarGridList.defaultProps = {
   className: null,
   focusedDate: null,
-  selectedDate: null,
 };
 
 export default BpkScrollableCalendarGridList;

package/bpk-component-switch/index.js

@@ -17,12 +17,9 @@
  */
 /* @flow strict */
 
-import BpkSwitch, {
-  type Props as BpkSwitchProps,
-  SWITCH_TYPES,
-} from './src/BpkSwitch';
+import BpkSwitch, { type Props as BpkSwitchProps } from './src/BpkSwitch';
 import themeAttributes from './src/themeAttributes';
 
 export type { BpkSwitchProps };
-export { themeAttributes, SWITCH_TYPES };
+export { themeAttributes };
 export default BpkSwitch;

package/bpk-component-switch/src/BpkSwitch.js

@@ -20,32 +20,22 @@
 import PropTypes from 'prop-types';
 import type { Node } from 'react';
 
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkSwitch.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-export const SWITCH_TYPES = {
-  primary: 'primary',
-  event: 'event',
-};
-
-export type SwitchTypeValue = $Values<typeof SWITCH_TYPES>;
-
 export type Props = {
   label: Node,
-  type: SwitchTypeValue,
   className: ?string,
 };
 
 const BpkSwitch = (props: Props) => {
-  const { className, label, small, type, ...rest } = props;
-  const resolvedType = type || SWITCH_TYPES.primary;
+  const { className, label, small, ...rest } = props;
 
   const switchClassNames = getClassName(
     'bpk-switch__switch',
-    `bpk-switch__switch--${resolvedType}`,
     small && 'bpk-switch__switch--small',
   );
 
@@ -68,17 +58,12 @@ const BpkSwitch = (props: Props) => {
 
 BpkSwitch.propTypes = {
   label: PropTypes.node.isRequired,
-  type: deprecated(
-    PropTypes.oneOf([SWITCH_TYPES.primary, SWITCH_TYPES.event]),
-    'This property is deprecated and only one type supported, please remove your usage of this property',
-  ),
   className: PropTypes.string,
   small: PropTypes.bool,
 };
 
 BpkSwitch.defaultProps = {
   className: null,
-  type: null,
   small: false,
 };
 

package/bpk-component-switch/src/BpkSwitch.module.scss

@@ -34,18 +34,11 @@ $border-width: $bpk-one-pixel-rem * 2;
     opacity: 0;
 
     &:checked ~ .bpk-switch__switch {
-      &--primary {
-        @include bpk-themeable-property(
-          background,
-          --bpk-switch-checked-color,
-          $bpk-core-accent-day
-        );
-      }
-
-      // This is now deprecated and will be removed in the future.
-      &--event {
-        background: $bpk-color-abisko;
-      }
+      @include bpk-themeable-property(
+        background,
+        --bpk-switch-checked-color,
+        $bpk-core-accent-day
+      );
 
       &::before {
         left: ($width - $height) + $border-width;
@@ -54,8 +47,8 @@ $border-width: $bpk-one-pixel-rem * 2;
   }
 
   &__label {
-    margin-right: bpk-spacing-md();
     line-height: $height;
+    margin-inline-end: bpk-spacing-md();
   }
 
   // The 'track'.

package/bpk-component-table/README.md

@@ -59,5 +59,4 @@ export default () => (
 | Property               | PropType | Required | Default Value |
 | ---------------------- | -------- | -------- | ------------- |
 | children               | node     | true     | -             |
-| alternate (deprecated) | bool     | false    | false         |
 

package/bpk-component-table/src/BpkTable.js

@@ -21,7 +21,7 @@
 import PropTypes from 'prop-types';
 import type { Node } from 'react';
 
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTable.module.scss';
 
@@ -30,17 +30,12 @@ const getClassName = cssModules(STYLES);
 type Props = {
   children: Node,
   className: ?string,
-  alternate: ?boolean,
 };
 
 const BpkTable = (props: Props) => {
-  const { alternate, children, className, ...rest } = props;
+  const { children, className, ...rest } = props;
 
-  const classNames = getClassName(
-    'bpk-table',
-    className,
-    alternate && 'bpk-table--alternate',
-  );
+  const classNames = getClassName('bpk-table', className);
 
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
@@ -53,15 +48,10 @@ const BpkTable = (props: Props) => {
 BpkTable.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
-  alternate: deprecated(
-    PropTypes.bool,
-    'Alternate prop is deprecated, please remove your usage of this property.',
-  ),
 };
 
 BpkTable.defaultProps = {
   className: null,
-  alternate: null,
 };
 
 export default BpkTable;

package/bpk-component-table/src/BpkTable.module.scss

@@ -21,19 +21,11 @@
 .bpk-table {
   @include bpk-table;
 
-  &--alternate {
-    @include bpk-table--alternate;
-  }
-
   &__cell {
     @include bpk-table__cell;
 
     &--head {
       @include bpk-table__cell--head;
     }
-
-    &--head-alternate {
-      @include bpk-table__cell--head-alternate;
-    }
   }
 }

package/bpk-component-table/src/BpkTableHeadCell.js

@@ -21,20 +21,20 @@
 import PropTypes from 'prop-types';
 import type { Node } from 'react';
 
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTable.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-type Props = { children: Node, alternate: ?boolean, className: ?string };
+type Props = { children: Node, className: ?string };
 
 const BpkTableHeadCell = (props: Props) => {
-  const { alternate, className, ...rest } = props;
+  const { className, ...rest } = props;
 
   const classNames = getClassName(
     'bpk-table__cell',
-    alternate ? 'bpk-table__cell--head-alternate' : 'bpk-table__cell--head',
+    'bpk-table__cell--head',
     className,
   );
 
@@ -43,15 +43,10 @@ const BpkTableHeadCell = (props: Props) => {
 
 BpkTableHeadCell.propTypes = {
   children: PropTypes.node.isRequired,
-  alternate: deprecated(
-    PropTypes.bool,
-    'Alternate prop is deprecated, please remove your usage of this property.',
-  ),
   className: PropTypes.string,
 };
 
 BpkTableHeadCell.defaultProps = {
-  alternate: null,
   className: null,
 };
 

package/package.json

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

package/bpk-component-button/BpkButtonOutline.js

@@ -1,21 +0,0 @@
-/*
- * 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 { default } from './src/BpkButtonOutline';