@skyscanner/backpack-web 13.0.0 → 14.1.0

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-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}>
@@ -41,7 +39,6 @@ const BoxWithScrim = withScrim(Box);
 | isIphone              | bool     | false    | `/iPhone/i.test(typeof window !== 'undefined' ? window.navigator.platform : '')` |
 | containerClassName    | string   | false    | ''                                                                               |
 | closeOnScrimClick     | bool     | false    | true                                                                             |
-| dark                  | bool     | false    | false                                                                            |
 
 ### Prop Details
 

package/bpk-scrim-utils/src/BpkScrim.js

@@ -33,7 +33,7 @@ const BpkScrim = (props) => (
   >
     <div
       role="presentation"
-      className={getClassName('bpk-scrim', props.dark && 'bpk-scrim--dark')}
+      className={getClassName('bpk-scrim')}
       onMouseDown={props.onClose}
       onTouchStart={props.onClose}
     />
@@ -41,12 +41,10 @@ const BpkScrim = (props) => (
 );
 
 BpkScrim.propTypes = {
-  dark: PropTypes.bool,
   onClose: PropTypes.func,
 };
 
 BpkScrim.defaultProps = {
-  dark: false,
   onClose: null,
 };
 

package/bpk-scrim-utils/src/bpk-scrim.module.scss

@@ -26,15 +26,12 @@
   left: 0;
   z-index: $bpk-zindex-scrim;
   transition: opacity $bpk-duration-sm ease-in-out;
-  background-color: $bpk-scrim-background-color;
+  background-color: $bpk-scrim-day;
+
+  // We will need to remove this on hex launch as opacity will be built into the above colour.
   opacity: $bpk-scrim-opacity;
   overflow: hidden;
 
-  &--dark {
-    background-color: $bpk-scrim-dark-background-color;
-    opacity: $bpk-scrim-dark-opacity;
-  }
-
   &--full-screen {
     @include bpk-breakpoint-mobile {
       opacity: $bpk-scrim-mobile-opacity;

package/bpk-scrim-utils/src/withScrim.js

@@ -47,7 +47,6 @@ const withScrim = (WrappedComponent) => {
     static propTypes = {
       getApplicationElement: PropTypes.func.isRequired,
       onClose: onClosePropType,
-      dark: PropTypes.bool,
       isIphone: PropTypes.bool,
       isIpad: PropTypes.bool,
       containerClassName: PropTypes.string,
@@ -55,7 +54,6 @@ const withScrim = (WrappedComponent) => {
     };
 
     static defaultProps = {
-      dark: false,
       onClose: null,
       isIphone: isDeviceIphone(),
       isIpad: isDeviceIpad(),
@@ -125,7 +123,6 @@ const withScrim = (WrappedComponent) => {
       const {
         closeOnScrimClick,
         containerClassName,
-        dark,
         getApplicationElement,
         isIpad,
         isIphone,
@@ -141,7 +138,7 @@ const withScrim = (WrappedComponent) => {
 
       return (
         <div className={classNames.join(' ')}>
-          <BpkScrim onClose={closeOnScrimClick ? onClose : null} dark={dark} />
+          <BpkScrim onClose={closeOnScrimClick ? onClose : null} />
           <WrappedComponent
             {...rest}
             isIphone={isIphone}

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": "13.0.0",
+  "version": "14.1.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": "^10.4.0",
-    "@skyscanner/bpk-svgs": "^14.5.9",
+    "@skyscanner/bpk-foundations-web": "^12.1.0",
+    "@skyscanner/bpk-svgs": "^15.1.4",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^32.2.0",
+    "bpk-mixins": "^35.0.0",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",