@skyscanner/backpack-web 0.0.5 → 0.2.0

package/bpk-component-datepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-datepicker",
-  "version": "15.2.1",
+  "version": "15.2.11",
   "description": "Backpack datepicker component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,20 +14,20 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-breakpoint": "^3.1.0",
-    "bpk-component-calendar": "^11.1.1",
-    "bpk-component-input": "^6.1.1",
-    "bpk-component-modal": "^3.1.1",
-    "bpk-component-popover": "^4.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-breakpoint": "^3.1.6",
+    "bpk-component-calendar": "^11.1.11",
+    "bpk-component-input": "^6.1.9",
+    "bpk-component-modal": "^3.1.8",
+    "bpk-component-popover": "^4.1.9",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-storybook-utils": "^1.1.0"
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

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

@@ -16,12 +16,13 @@
  * limitations under the License.
  */
 
+import PropTypes from 'prop-types';
+import React, { 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 PropTypes from 'prop-types';
-import React, { Component } from 'react';
 import BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint';
 import {
   composeCalendar,

package/bpk-component-description-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-description-list",
-  "version": "3.1.0",
+  "version": "3.1.6",
   "description": "Backpack description list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-description-list/src/ComponentFactory.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkDescriptionList.module.scss';

package/bpk-component-dialog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-dialog",
-  "version": "4.1.1",
+  "version": "4.1.7",
   "description": "Backpack dialog component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.1",
-    "bpk-component-flare": "^2.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
-    "bpk-scrim-utils": "^5.1.0",
+    "bpk-component-close-button": "^3.1.7",
+    "bpk-component-flare": "^2.1.7",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
+    "bpk-scrim-utils": "^5.1.5",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-text": "^6.1.1"
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-component-text": "^7.0.0"
   }
 }

package/bpk-component-dialog/src/BpkDialog.js

@@ -19,6 +19,7 @@
 /* @flow strict */
 
 import React from 'react';
+
 import { cssModules, Portal } from '../../bpk-react-utils';
 import BpkCloseButton from '../../bpk-component-close-button';
 

package/bpk-component-dialog/src/BpkDialogInner.js

@@ -19,8 +19,9 @@
 /* @flow strict */
 
 import React from 'react';
+
 import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
-import { withScrim } from '../../bpk-react-utils';
+import { withScrim } from '../../bpk-scrim-utils';
 import { BpkContentBubble } from '../../bpk-component-flare';
 
 import {

package/bpk-component-drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-drawer",
-  "version": "4.1.1",
+  "version": "4.1.7",
   "description": "Backpack drawer component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-close-button": "^3.1.1",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-link": "^3.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
-    "bpk-scrim-utils": "^5.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-close-button": "^3.1.7",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-component-link": "^3.1.6",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
+    "bpk-scrim-utils": "^5.1.5",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -28,7 +28,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-text": "^6.1.1"
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-text": "^7.0.0"
   }
 }

package/bpk-component-drawer/src/BpkDrawer.js

@@ -20,8 +20,9 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+
 import { Portal, cssModules } from '../../bpk-react-utils';
-import { withScrim } from '../../bpk-react-utils';
+import { withScrim } from '../../bpk-scrim-utils';
 
 import BpkDrawerContent from './BpkDrawerContent';
 import STYLES from './BpkDrawer.module.scss';

package/bpk-component-drawer/src/BpkDrawerContent.js

@@ -22,6 +22,7 @@ import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
 import Transition from 'react-transition-group/Transition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
 import { cssModules } from '../../bpk-react-utils';
 import { BpkButtonLink } from '../../bpk-component-link';
 import BpkCloseButton from '../../bpk-component-close-button';

package/bpk-component-fieldset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-fieldset",
-  "version": "4.1.1",
+  "version": "4.1.11",
   "description": "Backpack fieldset component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,23 +14,23 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-form-validation": "^4.2.1",
-    "bpk-component-label": "^5.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-form-validation": "^4.2.9",
+    "bpk-component-label": "^5.1.6",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-autosuggest": "^6.1.1",
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-calendar": "^11.1.1",
-    "bpk-component-checkbox": "^4.1.1",
-    "bpk-component-datepicker": "^15.2.1",
-    "bpk-component-input": "^6.1.1",
-    "bpk-component-select": "^5.1.0",
-    "bpk-component-textarea": "^4.2.0"
+    "bpk-component-autosuggest": "^6.1.9",
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-calendar": "^11.1.11",
+    "bpk-component-checkbox": "^4.1.8",
+    "bpk-component-datepicker": "^15.2.11",
+    "bpk-component-input": "^6.1.9",
+    "bpk-component-select": "^5.1.6",
+    "bpk-component-textarea": "^4.2.6"
   }
 }

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -19,6 +19,7 @@
 
 import PropTypes from 'prop-types';
 import React, { cloneElement, type Element } from 'react';
+
 import BpkLabel from '../../bpk-component-label';
 import BpkFormValidation from '../../bpk-component-form-validation';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-flare/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-flare",
-  "version": "2.1.1",
+  "version": "2.1.7",
   "description": "Backpack FlareBar and ContentBubble component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,10 +17,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-label": "^5.1.0",
-    "bpk-component-text": "^6.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-label": "^5.1.6",
+    "bpk-component-text": "^7.0.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-flare/src/BpkContentBubble.js

@@ -18,6 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import BpkFlareBar from './BpkFlareBar';

package/bpk-component-flare/src/BpkFlareBar.js

@@ -18,6 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './bpk-flare-bar.module.scss';

package/bpk-component-form-validation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-form-validation",
-  "version": "4.2.1",
+  "version": "4.2.9",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,21 +14,21 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^4.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-animate-height": "^4.1.6",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-checkbox": "^4.1.1",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-input": "^6.1.1",
-    "bpk-component-select": "^5.1.0",
-    "bpk-component-textarea": "^4.2.0"
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-checkbox": "^4.1.8",
+    "bpk-component-icon": "^9.2.7",
+    "bpk-component-input": "^6.1.9",
+    "bpk-component-select": "^5.1.6",
+    "bpk-component-textarea": "^4.2.6"
   }
 }

package/bpk-component-form-validation/src/BpkFormValidation.js

@@ -18,15 +18,16 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AnimateHeight from '../../bpk-animate-height';
-import { cssModules } from '../../bpk-react-utils';
-import BpkSmallExclamationIcon from '../../bpk-component-icon/sm/exclamation-circle';
-import { withAlignment } from '../../bpk-component-icon';
 import {
   lineHeightSm,
   iconSizeSm,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
+import AnimateHeight from '../../bpk-animate-height';
+import { cssModules } from '../../bpk-react-utils';
+import BpkSmallExclamationIcon from '../../bpk-component-icon/sm/exclamation-circle';
+import { withAlignment } from '../../bpk-component-icon';
+
 import STYLES from './BpkFormValidation.module.scss';
 
 const getClassName = cssModules(STYLES);

package/bpk-component-graphic-promotion/README.md

@@ -0,0 +1,68 @@
+# bpk-component-graphic-promotion
+
+## Installation
+
+```sh
+npm install bpk-component-graphic-promotion --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkGraphicPromo from 'bpk-component-graphic-promotion';
+
+export default () => (
+  <BpkGraphicPromo
+    tagline="Tagline"
+    headline="Ride your wave"
+    subheading="Portugal and 6 more countries have just been added to the UK travel green list"
+    sponsor={{
+      label: 'Sponsored',
+      logo: './path/to/sponsor/logo.png',
+      altText: 'Sponsor Name',
+    }}
+    buttonText="Learn more"
+    onClick={() => redirect("https://www.sponsor-name.com/promotion")}
+    textAlign={TEXT_ALIGN.start}
+    invertVertically
+  />
+);
+```
+
+## Props
+
+| Property         | PropType          | Required | Default Value |
+| ---------------- | ----------------- | -------- | ------------- |
+| buttonText       | string            | true     | -             |
+| headline         | string            | true     | -             |
+| invertVertically | bool              | true     | -             |
+| onClick          | func              | true     | -             |
+| textAlign        | oneOf(TEXT_ALIGN) | true     | -             |
+| className        | string            | false    | null          |
+| style            | object            | false    | {}            |
+| tagline          | string            | false    | null          |
+| sponsor          | object            | false    | null          |
+| subheading       | string            | false    | null          |
+
+### Prop Details
+
+#### sponsor
+
+An object that groups together all the sponsor related properties. This should only be provided if the graphic promo is sponsored, in which case all of the object's properties are required.
+
+The object consists of the following fields:
+
+- `altText`: string
+- `label`: string
+- `logo`: string
+
+##### Example
+
+```typescript
+const sponsor = {
+  label: 'Sponsored',
+  altText: 'Skyscanner',
+  logo: './path/to/skyscanner/logo.png',
+};
+```

package/{bpk-component-grid-toggle/examples.js → bpk-component-graphic-promotion/index.js}

@@ -1,7 +1,7 @@
 /*
  * Backpack - Skyscanner's Design System
  *
- * Copyright 2016 Skyscanner Ltd
+ * Copyright 2022 Skyscanner Ltd
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,11 +15,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/* @flow strict */
 
-import React from 'react';
+import BpkGraphicPromo, {
+  type Props as BpkGraphicPromoProps,
+  TEXT_ALIGN,
+} from './src/BpkGraphicPromo';
 
-import BpkGridToggle from './index';
-
-const DefaultExample = () => <BpkGridToggle />;
-
-export default DefaultExample;
+export type { BpkGraphicPromoProps };
+export { TEXT_ALIGN };
+export default BpkGraphicPromo;

package/bpk-component-graphic-promotion/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "bpk-component-graphic-promotion",
+  "version": "3.0.0",
+  "description": "Backpack graphic-promotion component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-card": "^4.1.7",
+    "bpk-component-text": "^7.0.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}