@skyscanner/backpack-web 9.0.0 → 9.2.0-beta.1

package/bpk-component-datepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-datepicker",
-  "version": "18.0.0",
+  "version": "18.0.1",
   "description": "Backpack datepicker component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-breakpoint": "^5.0.0",
-    "bpk-component-calendar": "^12.0.0",
-    "bpk-component-input": "^7.0.0",
-    "bpk-component-modal": "^6.0.0",
-    "bpk-component-popover": "^8.0.0",
-    "bpk-mixins": "^31.2.0",
+    "bpk-component-breakpoint": "^5.0.1",
+    "bpk-component-calendar": "^12.0.1",
+    "bpk-component-input": "^7.0.1",
+    "bpk-component-modal": "^6.0.1",
+    "bpk-component-popover": "^8.0.1",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -27,7 +27,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.3.0",
-    "bpk-storybook-utils": "^2.0.0"
+    "@skyscanner/bpk-foundations-web": "^8.5.0",
+    "bpk-storybook-utils": "^2.0.1"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-description-list",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Backpack description list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.2.0",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-dialog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-dialog",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Backpack dialog component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^4.0.0",
-    "bpk-component-flare": "^3.0.0",
-    "bpk-mixins": "^31.2.0",
+    "bpk-component-close-button": "^4.0.1",
+    "bpk-component-flare": "^3.0.1",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
-    "bpk-scrim-utils": "^6.0.0",
+    "bpk-scrim-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.0",
-    "bpk-component-icon": "^10.0.0",
-    "bpk-component-text": "^8.0.0"
+    "bpk-component-button": "^7.0.1",
+    "bpk-component-icon": "^10.0.1",
+    "bpk-component-text": "^8.0.1"
   }
 }

package/bpk-component-drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-drawer",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Backpack drawer component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.3.0",
-    "bpk-component-close-button": "^4.0.0",
-    "bpk-component-icon": "^10.0.0",
-    "bpk-component-link": "^4.0.0",
-    "bpk-mixins": "^31.2.0",
+    "@skyscanner/bpk-foundations-web": "^8.5.0",
+    "bpk-component-close-button": "^4.0.1",
+    "bpk-component-icon": "^10.0.1",
+    "bpk-component-link": "^4.0.1",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
-    "bpk-scrim-utils": "^6.0.0",
+    "bpk-scrim-utils": "^6.0.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -28,7 +28,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.0",
-    "bpk-component-text": "^8.0.0"
+    "bpk-component-button": "^7.0.1",
+    "bpk-component-text": "^8.0.1"
   }
 }

package/bpk-component-fieldset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-fieldset",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Backpack fieldset component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-form-validation": "^5.0.0",
-    "bpk-component-label": "^6.0.0",
-    "bpk-mixins": "^31.2.0",
+    "bpk-component-form-validation": "^5.0.1",
+    "bpk-component-label": "^6.0.1",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -24,13 +24,13 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-autosuggest": "^7.0.0",
-    "bpk-component-button": "^7.0.0",
-    "bpk-component-calendar": "^12.0.0",
-    "bpk-component-checkbox": "^5.0.0",
-    "bpk-component-datepicker": "^18.0.0",
-    "bpk-component-input": "^7.0.0",
-    "bpk-component-select": "^6.0.0",
-    "bpk-component-textarea": "^5.0.0"
+    "bpk-component-autosuggest": "^7.0.1",
+    "bpk-component-button": "^7.0.1",
+    "bpk-component-calendar": "^12.0.1",
+    "bpk-component-checkbox": "^5.0.1",
+    "bpk-component-datepicker": "^18.0.1",
+    "bpk-component-input": "^7.0.1",
+    "bpk-component-select": "^6.0.1",
+    "bpk-component-textarea": "^5.0.1"
   }
 }

package/bpk-component-flare/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-flare",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Backpack FlareBar and ContentBubble component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,9 +17,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-label": "^6.0.0",
-    "bpk-component-text": "^8.0.0",
-    "bpk-mixins": "^31.2.0",
+    "bpk-component-label": "^6.0.1",
+    "bpk-component-text": "^8.0.1",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-flare/src/bpk-flare-bar.module.scss

@@ -44,7 +44,7 @@ $bpk-spacing-v2: true;
     height: $bpk-flare-height-desktop;
     margin-left: 50%;
     transform: translateX(-50%);
-    fill: $bpk-color-white;
+    fill: $bpk-surface-default-day;
 
     @include bpk-rtl {
       margin-right: 50%;
@@ -63,7 +63,7 @@ $bpk-spacing-v2: true;
     left: 0;
     width: $bpk-flare-corner-radius;
     height: $bpk-flare-corner-radius;
-    fill: $bpk-color-white;
+    fill: $bpk-surface-default-day;
 
     &--trailing {
       right: 0;

package/bpk-component-floating-notification/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-floating-notification",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Backpack floating-notification component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,10 +13,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-aria-live": "^3.0.0",
-    "bpk-component-button": "^7.0.0",
-    "bpk-component-text": "^8.0.0",
-    "bpk-mixins": "^31.2.0",
+    "bpk-component-aria-live": "^3.0.1",
+    "bpk-component-button": "^7.0.1",
+    "bpk-component-text": "^8.0.1",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-form-validation",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^5.0.0",
-    "bpk-mixins": "^31.2.0",
+    "bpk-animate-height": "^5.0.1",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,12 +23,12 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.3.0",
-    "bpk-component-button": "^7.0.0",
-    "bpk-component-checkbox": "^5.0.0",
-    "bpk-component-icon": "^10.0.0",
-    "bpk-component-input": "^7.0.0",
-    "bpk-component-select": "^6.0.0",
-    "bpk-component-textarea": "^5.0.0"
+    "@skyscanner/bpk-foundations-web": "^8.5.0",
+    "bpk-component-button": "^7.0.1",
+    "bpk-component-checkbox": "^5.0.1",
+    "bpk-component-icon": "^10.0.1",
+    "bpk-component-input": "^7.0.1",
+    "bpk-component-select": "^6.0.1",
+    "bpk-component-textarea": "^5.0.1"
   }
 }

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

@@ -8,25 +8,25 @@ npm install bpk-component-graphic-promotion --save-dev
 
 ## Usage
 
-```js
+```tsx
 import React from 'react';
 import BpkGraphicPromo from 'bpk-component-graphic-promotion';
 
 export default () => (
   <BpkGraphicPromo
+    buttonText="Learn more"
     contentId="graphic-promo-1"
-    tagline="Tagline"
     headline="Ride your wave"
-    subheading="Portugal and 6 more countries have just been added to the UK travel green list"
+    invertVertically
+    onClick={() => redirect("https://www.sponsor-name.com/promotion")}
     sponsor={{
       label: 'Sponsored',
       logo: './path/to/sponsor/logo.png',
       altText: 'Sponsor Name',
     }}
-    buttonText="Learn more"
-    onClick={() => redirect("https://www.sponsor-name.com/promotion")}
+    subheading="Portugal and 6 more countries have just been added to the UK travel green list"
+    tagline="Tagline"
     textAlign={TEXT_ALIGN.start}
-    invertVertically
   />
 );
 ```
@@ -35,17 +35,17 @@ export default () => (
 
 | Property         | PropType          | Required | Default Value |
 | ---------------- | ----------------- | -------- | ------------- |
-| contentId        | string            | false    | null          |
 | 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          |
+| contentId        | string            | false    | null          |
+| invertVertically | bool              | false    | false         |
 | sponsor          | object            | false    | null          |
+| style            | object            | false    | {}            |
 | subheading       | string            | false    | null          |
+| tagline          | string            | false    | null          |
 
 ### Prop Details
 
@@ -61,7 +61,7 @@ The object consists of the following fields:
 
 ##### Example
 
-```typescript
+```ts
 const sponsor = {
   label: 'Sponsored',
   altText: 'Skyscanner',

package/bpk-component-graphic-promotion/{index.js → index.ts}

@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import BpkGraphicPromo, {
   type Props as BpkGraphicPromoProps,

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-graphic-promotion",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Backpack graphic-promotion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -8,16 +8,15 @@
     "url": "git@github.com:Skyscanner/backpack.git"
   },
   "author": "Backpack Design System <backpack@skyscanner.net>",
-  "main": "index.js",
+  "main": "index.ts",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-button": "^7.0.0",
-    "bpk-component-text": "^8.0.0",
-    "bpk-mixins": "^31.2.0",
-    "bpk-react-utils": "^7.0.0",
-    "prop-types": "^15.5.8"
+    "bpk-component-button": "^7.0.1",
+    "bpk-component-text": "^8.0.1",
+    "bpk-mixins": "^31.4.0",
+    "bpk-react-utils": "^7.0.0"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-graphic-promotion/src/BpkGraphicPromo-test.tsx

@@ -0,0 +1,131 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * 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.
+ * 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 React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { cssModules } from 'bpk-react-utils';
+
+import BpkGraphicPromo, { TEXT_ALIGN } from './BpkGraphicPromo';
+import type { Props } from './BpkGraphicPromo';
+import STYLES from './BpkGraphicPromo.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const props: Props = {
+  buttonText: 'Learn more',
+  headline: 'Ride your wave',
+  invertVertically: false,
+  onClick: jest.fn(),
+  sponsor: {
+    label: 'Sponsored',
+    logo: 'path/to/logo.png',
+    altText: 'Airline Name',
+  },
+  subheading:
+    'Portugal and 6 more countries have just been added to the UK travel green list',
+  tagline: 'Tagline',
+  textAlign: TEXT_ALIGN.start,
+};
+
+describe('BpkGraphicPromo', () => {
+  beforeEach(() => {
+    (props.onClick as jest.MockedFunction<Props['onClick']>).mockReset();
+  });
+
+  it('should render correctly with all properties set', () => {
+    const { asFragment } = render(<BpkGraphicPromo {...props} />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should support custom class names', () => {
+    const { asFragment } = render(
+      <BpkGraphicPromo className="custom-classname" {...props} />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly when centre aligned', () => {
+    const customProps = { ...props, textAlign: TEXT_ALIGN.center };
+    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly when right aligned', () => {
+    const customProps = { ...props, textAlign: TEXT_ALIGN.end };
+    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly when inverted portrait', () => {
+    const customProps = { ...props, invertVertically: true };
+    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should not display tagline or subheading when not provided', () => {
+    const customProps = { ...props };
+    delete customProps.tagline;
+    delete customProps.subheading;
+    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should display the tagline and no sponsor for non-sponsored ad', () => {
+    const customProps = { ...props };
+    delete customProps.sponsor;
+    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should redirect us to link when card is clicked', () => {
+    render(<BpkGraphicPromo {...props} />);
+
+    const graphicPromo = document.getElementsByClassName(
+      getClassName('bpk-graphic-promo'),
+    )[0];
+    fireEvent.click(graphicPromo);
+
+    expect(props.onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should redirect us to link when button is clicked', () => {
+    render(<BpkGraphicPromo {...props} />);
+
+    const graphicPromoCTA = document.getElementsByClassName(
+      getClassName('bpk-graphic-promo__cta'),
+    )[0];
+    fireEvent.click(graphicPromoCTA);
+
+    expect(props.onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render correctly with a content ID', () => {
+    const { asFragment } = render(
+      <BpkGraphicPromo contentId="content-id" {...props} />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});