@skyscanner/backpack-web 14.0.0 → 15.0.0

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

@@ -45,18 +45,17 @@ const BpkRadio = (props: Props) => {
   // treated as neither valid nor invalid
   const isInvalid = valid === false;
 
-  const classNames = [
-    getClassName(
-      'bpk-radio',
-      white && 'bpk-radio--white',
-      disabled && 'bpk-radio--disabled',
-      isInvalid && 'bpk-radio--invalid',
-      className,
-    ),
-  ];
+  const classNames = getClassName(
+    'bpk-radio',
+    white && 'bpk-radio--white',
+    disabled && 'bpk-radio--disabled',
+    white && disabled && 'bpk-radio--disabled--white',
+    isInvalid && 'bpk-radio--invalid',
+    className,
+  );
 
   return (
-    <label className={classNames.join(' ')}>
+    <label className={classNames}>
       {/* Deciding to support this because `aria-invalid` does often work with voiceover
       despite not being in the spec. */}
       {/* eslint-disable jsx-a11y/role-supports-aria-props */}

package/bpk-component-radio/src/BpkRadio.module.scss

@@ -31,6 +31,10 @@ $bpk-radio-size: bpk-spacing-lg() - ($bpk-one-pixel-rem * 4);
 
   &--disabled {
     @include bpk-radio--disabled;
+
+    &--white {
+      color: $bpk-text-disabled-on-dark-day;
+    }
   }
 
   &--invalid {

package/bpk-component-rating/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-rating --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkRating, { RATING_SIZES, RATING_SCALES } from 'bpk-component-rating';
+import BpkRating, { RATING_SIZES, RATING_SCALES } from '@skyscanner/backpack-web/bpk-component-rating';
 
 export default () => (
   <BpkRating

package/bpk-component-rtl-toggle/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-rtl-toggle --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkRtlToggle from 'bpk-component-rtl-toggle';
+import BpkRtlToggle from '@skyscanner/backpack-web/bpk-component-rtl-toggle';
 
 export default () => (
   <BpkRtlToggle />

package/bpk-component-scrollable-calendar/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-scrollable-calendar --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import { DateUtils } from 'bpk-component-calendar';
-import BpkScrollableCalendar, { CALENDAR_SELECTION_TYPE } from 'bpk-component-scrollable-calendar';
+import { DateUtils } from '@skyscanner/backpack-web/bpk-component-calendar';
+import BpkScrollableCalendar, { CALENDAR_SELECTION_TYPE } from '@skyscanner/backpack-web/bpk-component-scrollable-calendar';
 import format from 'date-fns/format';
 
 const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');

package/bpk-component-section-list/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-section-list --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkSectionList, { BpkSectionListSection, BpkSectionListItem } from 'bpk-component-section-list';
+import BpkSectionList, { BpkSectionListSection, BpkSectionListItem } from '@skyscanner/backpack-web/bpk-component-section-list';
 
 export default () => (
   <BpkSectionList>

package/bpk-component-select/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-select --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkSelect from 'bpk-component-select';
+import BpkSelect from '@skyscanner/backpack-web/bpk-component-select';
 
 export default () => (
   <BpkSelect

package/bpk-component-skip-link/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-skip-link --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkSkipLink from 'bpk-component-skip-link';
+import BpkSkipLink from '@skyscanner/backpack-web/bpk-component-skip-link';
 
 export default () => <BpkSkipLink href="#main" label="Skip to main content" />;
 ```

package/bpk-component-slider/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-slider --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkSlider from 'bpk-component-slider';
+import BpkSlider from '@skyscanner/backpack-web/bpk-component-slider';
 
 const Slider = () => (
   <BpkSlider

package/bpk-component-spinner/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-spinner --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import { BpkSpinner, BpkLargeSpinner, BpkExtraLargeSpinner, SPINNER_TYPES } from 'bpk-component-spinner';
+import { BpkSpinner, BpkLargeSpinner, BpkExtraLargeSpinner, SPINNER_TYPES } from '@skyscanner/backpack-web/bpk-component-spinner';
 
 export default () => (
   <div>

package/bpk-component-split-input/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-split-input --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkSplitInput, { INPUT_TYPES } from 'bpk-component-split-input';
+import BpkSplitInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-split-input';
 
 export default () => (
   <BpkSplitInput

package/bpk-component-star-rating/README.md

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-star-rating --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
@@ -17,7 +15,7 @@ import BpkStarRating, {
   STAR_TYPES,
   BpkInteractiveStarRating,
   withInteractiveStarRatingState
-} from 'bpk-component-star-rating';
+} from '@skyscanner/backpack-web/bpk-component-star-rating';
 
 const InteractiveStarRating = withInteractiveStarRatingState(BpkInteractiveStarRating);
 

package/bpk-component-switch/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-switch --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkSwitch from 'bpk-component-switch';
+import BpkSwitch from '@skyscanner/backpack-web/bpk-component-switch';
 
 export default () => (
   <div>

package/bpk-component-table/README.md

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-table --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
@@ -19,7 +17,7 @@ import {
   BpkTableRow,
   BpkTableCell,
   BpkTableHeadCell,
-} from 'bpk-component-table';
+} from '@skyscanner/backpack-web/bpk-component-table';
 
 export default () => (
   <BpkTable>

package/bpk-component-text/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-text --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```javascript
 import React from 'react';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from '@skyscanner/backpack-web/bpk-component-text';
 
 export default () => (
   <BpkText tagName="h1" textStyle={TEXT_STYLES.subheading}>My heading</BpkText>
@@ -25,8 +23,8 @@ When using the same style in many places repeating the `textStyle` and `tagName`
 
 ```javascript
 import React from 'react';
-import BpkText from 'bpk-component-text';
-import { withDefaultProps } from 'bpk-react-utils';
+import BpkText from '@skyscanner/backpack-web/bpk-component-text';
+import { withDefaultProps } from '@skyscanner/backpack-web/bpk-react-utils';
 
 const LargeParagraph = withDefaultProps(BpkText, { textStyle: 'bodyLongform', tagName: 'p' });
 const TinySpan = withDefaultProps(BpkText, { textStyle: 'caption', tagName: 'span' });
@@ -56,7 +54,7 @@ Heading `textStyle` should not be confused with heading `tagName` that provide s
 
 ```javascript
 import React from 'react';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from '@skyscanner/backpack-web/bpk-component-text';
 
 export default () => (
   <BpkText tagName="h1" textStyle={TEXT_STYLES.heading1}>My heading</BpkText>

package/bpk-component-textarea/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-textarea --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkTextarea from 'bpk-component-textarea';
+import BpkTextarea from '@skyscanner/backpack-web/bpk-component-textarea';
 
 export default () => (
   <BpkTextarea

package/bpk-component-theme-toggle/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-theme-toggle --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkThemeToggle from 'bpk-component-theme-toggle';
+import BpkThemeToggle from '@skyscanner/backpack-web/bpk-component-theme-toggle';
 
 export default () => (
   <BpkThemeToggle />
@@ -23,8 +21,8 @@ export default () => (
 
 ```js
 import React from 'react';
-import { updateOnThemeChange } from 'bpk-component-theme-toggle';
-import BpkThemeProvider from 'bpk-theming';
+import { updateOnThemeChange } from '@skyscanner/backpack-web/bpk-component-theme-toggle';
+import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
 
 const EnhancedThemeProvider = updateOnThemeChange(BpkThemeProvider);
 ```

package/bpk-component-theme-toggle/src/theming.js

@@ -107,20 +107,16 @@ const generateTheme = ({
   buttonDestructiveHoverBackgroundColor: colorWhite,
   buttonDestructiveActiveBackgroundColor: colorWhite,
 
-  chipPrimarySelectedBackgroundColor: primaryColor500,
-  chipPrimarySelectedHoverBackgroundColor: primaryColor600,
-  chipPrimarySelectedActiveBackgroundColor: primaryColor700,
-  chipPrimarySelectedTextColor: colorWhite,
-
-  chipSuccessSelectedBackgroundColor: secondaryColor500,
-  chipSuccessSelectedHoverBackgroundColor: secondaryColor600,
-  chipSuccessSelectedActiveBackgroundColor: secondaryColor700,
-  chipSuccessSelectedTextColor: colorWhite,
-
-  chipLightSelectedBackgroundColor: primaryColor500,
-  chipLightSelectedHoverBackgroundColor: primaryColor600,
-  chipLightSelectedActiveBackgroundColor: primaryColor700,
-  chipLightSelectedTextColor: colorWhite,
+  chipDefaultSelectedBackgroundColor: primaryColor500,
+  chipDefaultSelectedTextColor: colorWhite,
+
+  chipOnDarkSelectedBackgroundColor: primaryColor500,
+  chipOnDarkSelectedTextColor: colorWhite,
+
+  chipOnImageSelectedBackgroundColor: primaryColor500,
+  chipOnImageSelectedHoverBackgroundColor: primaryColor500,
+  chipOnImageSelectedActiveBackgroundColor: primaryColor500,
+  chipOnImageSelectedTextColor: colorWhite,
 
   fieldsetLabelTextColor: secondaryColor500,
 

package/bpk-component-ticket/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-ticket --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkTicket from 'bpk-component-ticket';
+import BpkTicket from '@skyscanner/backpack-web/bpk-component-ticket';
 
 export default () => (
   <BpkTicket stub="Lorem ipsum dolor sit amet.">

package/bpk-component-tooltip/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-tooltip --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkText from 'bpk-component-text';
-import BpkTooltip from 'bpk-component-tooltip';
+import BpkText from '@skyscanner/backpack-web/bpk-component-text';
+import BpkTooltip from '@skyscanner/backpack-web/bpk-component-tooltip';
 
 const App = () => (
   const targetRef = useRef(null);

package/bpk-react-utils/README.md

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-react-utils --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Portal.js
 
@@ -16,9 +14,9 @@ it's necessary in overcoming z-index issues when absolutely positioning elements
 ### Usage
 
 ```js
-import { Portal } from 'bpk-react-utils';
-import BpkButton from 'bpk-component-button';
-import { BpkCode } from 'bpk-component-code';
+import { Portal } from '@skyscanner/backpack-web/bpk-react-utils';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
+import { BpkCode } from '@skyscanner/backpack-web/bpk-component-code';
 import React, { Component } from 'react';
 
 class MyComponent extends Component {
@@ -81,7 +79,7 @@ A helpful utility which permits backwards compatibility with hard coded classes
 
 ```js
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';
 
 import STYLES from './MyComponent.scss';
 
@@ -119,7 +117,7 @@ Without CSS modules:
 The returned function accepts multiple class names and ignores values other than strings. e.g:
 
 ```js
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';
 
 import STYLES from './MyComponent.scss';
 
@@ -143,7 +141,7 @@ components initial mount. All you need to provide is two class names and a timeo
 
 ```js
 import React from 'react';
-import { TransitionInitialMount } from 'bpk-react-utils';
+import { TransitionInitialMount } from '@skyscanner/backpack-web/bpk-react-utils';
 
 const MyComponent = (props) => (
   <TransitionInitialMount
@@ -190,7 +188,7 @@ Returns true if the browser is showing content right-to-left.
 
 ```js
 import React from 'react';
-import { isRTL } from 'bpk-react-utils';
+import { isRTL } from '@skyscanner/backpack-web/bpk-react-utils';
 
 if (isRTL()) {
   // do RTL stuff
@@ -207,7 +205,7 @@ Returns true if the device is an iPhone.
 
 ```js
 import React from 'react';
-import { isDeviceIphone } from 'bpk-react-utils';
+import { isDeviceIphone } from '@skyscanner/backpack-web/bpk-react-utils';
 
 if (isDeviceIphone()) {
   // do iPhone specific stuff
@@ -224,7 +222,7 @@ Returns true if the device is an iPad.
 
 ```js
 import React from 'react';
-import { isDeviceIpad } from 'bpk-react-utils';
+import { isDeviceIpad } from '@skyscanner/backpack-web/bpk-react-utils';
 
 if (isDeviceIpad()) {
   // do iPad specific stuff
@@ -241,7 +239,7 @@ Returns true if the platform is iOS (iPhone/iPad).
 
 ```js
 import React from 'react';
-import { isDeviceIos } from 'bpk-react-utils';
+import { isDeviceIos } from '@skyscanner/backpack-web/bpk-react-utils';
 
 if (isDeviceIos()) {
   // do iOS specific stuff

package/bpk-scrim-utils/README.md

@@ -4,12 +4,10 @@
 
 ## Installation
 
-```sh
-npm install bpk-scrim-utils --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ```js
-import { withScrim } from 'bpk-scrim-utils';
+import { withScrim } from '@skyscanner/backpack-web/bpk-scrim-utils';
 
 const Box = props => (
   <div ref={props.dialogRef}>

package/bpk-theming/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-theming --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
-import BpkThemeProvider from 'bpk-theming';
+import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
 
-import BpkLink, { themeAttributes as linkThemeAttributes } from 'bpk-component-link';
+import BpkLink, { themeAttributes as linkThemeAttributes } from '@skyscanner/backpack-web/bpk-component-link';
 
 const theme = {
   linkColor: '#c00',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "14.0.0",
+  "version": "15.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^12.0.0",
-    "@skyscanner/bpk-svgs": "^15.0.2",
+    "@skyscanner/bpk-foundations-web": "^12.1.2",
+    "@skyscanner/bpk-svgs": "^15.1.6",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^34.0.1",
+    "bpk-mixins": "^36.0.0",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",