@skyscanner/backpack-web 19.0.0 → 20.0.0

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.0.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';

package/bpk-component-button/src/BpkButtonOutline.js

@@ -1,46 +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 */
-
-import { Props, defaultProps, propTypes } from './common-types';
-import BpkButtonBase, { cssModules } from './BpkButtonBase';
-import STYLES from './BpkButtonOutline.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const BpkButtonOutline = (props: Props) => {
-  const { className, ...rest } = props;
-
-  const classNames = [getClassName('bpk-button--outline')];
-
-  if (className) {
-    classNames.push(className);
-  }
-  const classNamesFinal = classNames.join(' ');
-
-  return (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <BpkButtonBase className={classNamesFinal} {...rest} />
-  );
-};
-
-BpkButtonOutline.propTypes = { ...propTypes };
-BpkButtonOutline.defaultProps = { ...defaultProps };
-
-export default BpkButtonOutline;

package/bpk-component-button/src/BpkButtonOutline.module.css

@@ -1,18 +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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button--outline{background-color:rgba(0,0,0,0);background-image:none;color:#fff;box-shadow:0 0 0 2px #fff inset}.bpk-no-touch-support .bpk-button--outline:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);box-shadow:0 0 0 2px rgba(255,255,255,0.5) inset}:global(.bpk-no-touch-support) .bpk-button--outline:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);box-shadow:0 0 0 2px rgba(255,255,255,0.5) inset}.bpk-button--outline:active{background-color:rgba(0,0,0,0);box-shadow:0 0 0 3px #fff inset}.bpk-button--outline:disabled{background-color:#dddde5;background-image:none;color:#b2b2bf;box-shadow:none}

package/bpk-component-button/src/BpkButtonOutline.module.scss

@@ -1,23 +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.
- */
-
-@import '~bpk-mixins/index.scss';
-
-.bpk-button--outline {
-  @include bpk-button--outline;
-}

package/bpk-component-grid/README.md

@@ -1,89 +0,0 @@
-# bpk-component-grid
-
-> Backpack grid components.
-
-This component is deprecated and will be removed in a future release.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { BpkGridContainer, BpkGridRow, BpkGridColumn } from '@skyscanner/backpack-web/bpk-component-grid';
-
-export default () => (
-  <BpkGridContainer>
-    <BpkGridRow>
-      <BpkGridColumn width={8} tabletWidth={12}>
-        Search controls
-      </BpkGridColumn>
-      <BpkGridColumn width={4} tabletWidth={0}>
-        MPU
-      </BpkGridColumn>
-    </BpkGridRow>
-    <BpkGridRow>
-      <BpkGridColumn width={12}>
-        Provider logos
-      </BpkGridColumn>
-    </BpkGridRow>
-    <BpkGridRow>
-      <BpkGridColumn width={4} mobileWidth={12}>
-        Content panel
-      </BpkGridColumn>
-      <BpkGridColumn width={4} mobileWidth={12}>
-        Content panel
-      </BpkGridColumn>
-      <BpkGridColumn width={4} mobileWidth={12}>
-        Content panel
-      </BpkGridColumn>
-    </BpkGridRow>
-    <BpkGridRow>
-      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
-        Confidence statement
-      </BpkGridColumn>
-      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
-        Confidence statement
-      </BpkGridColumn>
-      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
-        Confidence statement
-      </BpkGridColumn>
-      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
-        Confidence statement
-      </BpkGridColumn>
-    </BpkGridRow>
-  </BpkGridContainer>
-);
-```
-
-## Props
-
-### BpkGridContainer
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | node     | true     | -             |
-| debug     | bool     | false    | false         |
-| fullWidth | bool     | false    | false         |
-
-### BpkGridRow
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | node     | true     | -             |
-| padded    | bool     | false    | true          |
-
-### BpkGridColumn
-
-| Property     | PropType | Required | Default Value |
-| ------------ | -------- | -------- | ------------- |
-| children     | node     | true     | -             |
-| width        | number   | true     | -             |
-| mobileWidth  | number   | false    | null          |
-| tabletWidth  | number   | false    | null          |
-| offset       | number   | false    | null          |
-| mobileOffset | number   | false    | null          |
-| tabletOffset | number   | false    | null          |
-| padded       | bool     | false    | true          |
-| debug        | bool     | false    | false         |

package/bpk-component-grid/index.js

@@ -1,25 +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.
- */
-
-import Container from './src/BpkGridContainer';
-import Row from './src/BpkGridRow';
-import Column from './src/BpkGridColumn';
-
-export const BpkGridContainer = Container;
-export const BpkGridRow = Row;
-export const BpkGridColumn = Column;