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

package/bpk-component-graphic-promotion/src/{BpkGraphicPromo.js → BpkGraphicPromo.tsx}

@@ -15,14 +15,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
-import PropTypes from 'prop-types';
 import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkText from '../../bpk-component-text';
-import BpkButton from '../../bpk-component-button';
+import { cssModules } from 'bpk-react-utils';
+import BpkText from 'bpk-component-text';
+import BpkButton from 'bpk-component-button';
 
 import STYLES from './BpkGraphicPromo.module.scss';
 
@@ -41,64 +38,66 @@ export const TEXT_ALIGN = {
   start: 'start',
   center: 'center',
   end: 'end',
-};
+} as const;
 
 export type Props = {
-  className: ?string,
-  contentId: ?string,
-  tagline: ?string,
-  headline: string,
-  subheading: ?string,
-  sponsor: ?{
-    label: string,
-    logo: string,
-    altText: string,
-  },
-  buttonText: string,
-  onClick: () => void,
-  invertVertically: boolean,
-  textAlign: TEXT_ALIGN,
-  style: ?{},
+  buttonText: string;
+  className?: string | null;
+  contentId?: string | null;
+  headline: string;
+  invertVertically?: boolean;
+  onClick: () => void;
+  sponsor?: {
+    label: string;
+    logo: string;
+    altText: string;
+  } | null;
+  style?: {};
+  subheading?: string | null;
+  tagline?: string | null;
+  textAlign: typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
 };
 
-const constructAriaLabel = ({
-  buttonText,
-  headline,
-  sponsor,
-  subheading,
-  tagline,
-}: Props) => {
-  const text = [];
-  const addText = (value) => value && text.push(value);
+const constructAriaLabel = (
+  buttonText: Props['buttonText'],
+  headline: Props['headline'],
+  sponsor: Props['sponsor'],
+  subheading: Props['subheading'],
+  tagline: Props['tagline'],
+) => {
+  const text: string[] = [];
+  const addText = (value: string) => value && text.push(value);
 
   if (sponsor) {
     addText(sponsor.label);
     addText(sponsor.altText);
-  } else {
+  } else if (tagline) {
     addText(tagline);
   }
+
+  if (subheading) {
+    addText(subheading);
+  }
+
   addText(headline);
-  addText(subheading);
   addText(buttonText);
 
   return text.join('. ');
 };
 
-const BpkGraphicPromo = (props: Props) => {
-  const {
-    buttonText,
-    className,
-    contentId,
-    headline,
-    invertVertically,
-    onClick,
-    sponsor,
-    style,
-    subheading,
-    tagline,
-    textAlign,
-  } = props;
-
+const BpkGraphicPromo = ({
+  buttonText,
+  className = null,
+  contentId,
+  headline,
+  invertVertically = false,
+  onClick,
+  sponsor = null,
+  style = {},
+  subheading = null,
+  tagline = null,
+  textAlign,
+}: Props) => {
   // FIXME: Use useCallback() here when React is updated.
   const onClickWrapper = (event: React.MouseEvent<HTMLElement>) => {
     event.stopPropagation();
@@ -122,15 +121,26 @@ const BpkGraphicPromo = (props: Props) => {
     // clicks and key presses (Enter/Space) for the whole component, as described here:
     // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
     <div
+      id={contentId || ''}
       className={cardClasses}
       style={style}
       role="link"
-      aria-label={constructAriaLabel(props)}
+      aria-label={constructAriaLabel(
+        buttonText,
+        headline,
+        sponsor,
+        subheading,
+        tagline,
+      )}
       tabIndex={0}
       onClick={onClickWrapper}
       onKeyDown={onKeyWrapper}
     >
-      <div id={contentId} className={containerClasses} aria-hidden>
+      <div
+        id={(contentId && `${contentId}__content`) || ''}
+        className={containerClasses}
+        aria-hidden
+      >
         <div className={getTextClasses('bpk-graphic-promo__sponsor-content')}>
           {sponsor && (
             <>
@@ -185,30 +195,4 @@ const BpkGraphicPromo = (props: Props) => {
   );
 };
 
-BpkGraphicPromo.propTypes = {
-  className: PropTypes.string,
-  tagline: PropTypes.string,
-  headline: PropTypes.string.isRequired,
-  subheading: PropTypes.string,
-  sponsor: PropTypes.shape({
-    label: PropTypes.string,
-    logo: PropTypes.string,
-    altText: PropTypes.string,
-  }),
-  buttonText: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  invertVertically: PropTypes.bool,
-  textAlign: PropTypes.oneOf(Object.values(TEXT_ALIGN)).isRequired,
-  style: PropTypes.shape({ [PropTypes.string]: PropTypes.string }),
-};
-
-BpkGraphicPromo.defaultProps = {
-  className: null,
-  tagline: null,
-  subheading: null,
-  sponsor: null,
-  invertVertically: false,
-  style: {},
-};
-
 export default BpkGraphicPromo;

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

@@ -0,0 +1,147 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import BpkGraphicPromo, { TEXT_ALIGN } from './BpkGraphicPromo';
+
+const sponsor = {
+  label: 'Sponsored',
+  logo: 'path/to/logo.png',
+  altText: 'Airline Name',
+};
+const buttonText = 'Learn more';
+const onClick = () => {
+  window.location.href = 'https://www.skyscanner.net';
+};
+
+const tagline = 'Tagline';
+const headline = 'Ride your wave';
+const subheading =
+  'Portugal and 6 more countries have just been added to the UK travel green list';
+
+describe('BpkGraphicPromo accessibility tests', () => {
+  // TODO: Temporarily disabling tests due to a newer version of jest-axe which causes tests to fail when using nested interactive elements
+
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const { container } = render(
+      <BpkGraphicPromo
+        buttonText={buttonText}
+        className="test"
+        headline={headline}
+        invertVertically={false}
+        onClick={onClick}
+        sponsor={sponsor}
+        subheading={subheading}
+        tagline={tagline}
+        textAlign={TEXT_ALIGN.start}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should not have programmatically-detectable accessibility issues in centre aligned', async () => {
+    const { container } = render(
+      <BpkGraphicPromo
+        buttonText={buttonText}
+        headline={headline}
+        invertVertically={false}
+        onClick={onClick}
+        sponsor={sponsor}
+        subheading={subheading}
+        tagline={tagline}
+        textAlign={TEXT_ALIGN.center}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should not have programmatically-detectable accessibility issues in right aligned', async () => {
+    const { container } = render(
+      <BpkGraphicPromo
+        buttonText={buttonText}
+        headline={headline}
+        invertVertically={false}
+        onClick={onClick}
+        sponsor={sponsor}
+        subheading={subheading}
+        tagline={tagline}
+        textAlign={TEXT_ALIGN.end}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should not have programmatically-detectable accessibility issues in inverted portrait', async () => {
+    const { container } = render(
+      <BpkGraphicPromo
+        buttonText={buttonText}
+        headline={headline}
+        invertVertically
+        onClick={onClick}
+        sponsor={sponsor}
+        subheading={subheading}
+        tagline={tagline}
+        textAlign={TEXT_ALIGN.start}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should not have programmatically-detectable accessibility issues when optional text is missing', async () => {
+    const { container } = render(
+      <BpkGraphicPromo
+        buttonText={buttonText}
+        headline={headline}
+        invertVertically={false}
+        onClick={onClick}
+        sponsor={sponsor}
+        textAlign={TEXT_ALIGN.start}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('should not have programmatically-detectable accessibility issues in non-sponsored', async () => {
+    const { container } = render(
+      <BpkGraphicPromo
+        buttonText={buttonText}
+        headline={headline}
+        invertVertically={false}
+        onClick={onClick}
+        subheading={subheading}
+        tagline={tagline}
+        textAlign={TEXT_ALIGN.start}
+      />,
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/bpk-component-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Backpack grid components.",
   "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-grid-toggle/package.json

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

package/bpk-component-horizontal-nav/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-mobile-scroll-container": "^4.0.0",
-    "bpk-mixins": "^31.2.0",
+    "bpk-component-mobile-scroll-container": "^4.0.1",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,8 +23,8 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.3.0",
-    "bpk-component-text": "^8.0.0",
-    "bpk-storybook-utils": "^2.0.0"
+    "@skyscanner/bpk-foundations-web": "^8.5.0",
+    "bpk-component-text": "^8.0.1",
+    "bpk-storybook-utils": "^2.0.1"
   }
 }

package/bpk-component-icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-icon",
-  "version": "10.0.0",
+  "version": "10.0.1",
   "description": "Backpack icon components.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,16 +17,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.3.0",
-    "@skyscanner/bpk-svgs": "^14.3.4",
-    "bpk-mixins": "^31.2.0",
+    "@skyscanner/bpk-foundations-web": "^8.5.0",
+    "@skyscanner/bpk-svgs": "^14.3.6",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.0",
-    "bpk-component-list": "^5.0.0",
-    "bpk-component-text": "^8.0.0"
+    "bpk-component-button": "^7.0.1",
+    "bpk-component-list": "^5.0.1",
+    "bpk-component-text": "^8.0.1"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.3.0",
-    "bpk-component-spinner": "^6.0.0",
-    "bpk-mixins": "^31.2.0",
+    "@skyscanner/bpk-foundations-web": "^8.5.0",
+    "bpk-component-spinner": "^6.0.1",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
@@ -25,7 +25,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-mobile-scroll-container": "^4.0.0",
-    "bpk-component-text": "^8.0.0"
+    "bpk-component-mobile-scroll-container": "^4.0.1",
+    "bpk-component-text": "^8.0.1"
   }
 }

package/bpk-component-infinite-scroll/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-infinite-scroll",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Backpack infinite scroll 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",
     "intersection-observer": "^0.7.0",
     "prop-types": "^15.7.2"
@@ -23,9 +23,9 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.0",
-    "bpk-component-list": "^5.0.0",
-    "bpk-component-spinner": "^6.0.0",
-    "bpk-storybook-utils": "^2.0.0"
+    "bpk-component-button": "^7.0.1",
+    "bpk-component-list": "^5.0.1",
+    "bpk-component-spinner": "^6.0.1",
+    "bpk-storybook-utils": "^2.0.1"
   }
 }

package/bpk-component-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Backpack input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^10.0.0",
-    "bpk-mixins": "^31.2.0",
+    "bpk-component-icon": "^10.0.1",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,8 +23,8 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-banner-alert": "^7.0.0",
-    "bpk-component-label": "^6.0.0",
-    "bpk-storybook-utils": "^2.0.0"
+    "bpk-component-banner-alert": "^7.0.1",
+    "bpk-component-label": "^6.0.1",
+    "bpk-storybook-utils": "^2.0.1"
   }
 }

package/bpk-component-label/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-label",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Backpack label 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-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-link",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Backpack link 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"
   },
@@ -22,7 +22,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-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-list",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Backpack 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-loading-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-loading-button",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Backpack loading button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^7.0.0",
-    "bpk-component-icon": "^10.0.0",
-    "bpk-component-spinner": "^6.0.0",
-    "bpk-mixins": "^31.2.0",
+    "bpk-component-button": "^7.0.1",
+    "bpk-component-icon": "^10.0.1",
+    "bpk-component-spinner": "^6.0.1",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.0"
+    "bpk-storybook-utils": "^2.0.1"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-map",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Backpack map component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,8 +15,8 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@react-google-maps/api": "^2.8.1",
-    "bpk-component-spinner": "^6.0.0",
-    "bpk-mixins": "^31.2.0",
+    "bpk-component-spinner": "^6.0.1",
+    "bpk-mixins": "^31.4.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },
@@ -24,9 +24,9 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-icon": "^10.0.0",
-    "bpk-component-text": "^8.0.0",
-    "bpk-storybook-utils": "^2.0.0",
+    "bpk-component-icon": "^10.0.1",
+    "bpk-component-text": "^8.0.1",
+    "bpk-storybook-utils": "^2.0.1",
     "prop-types": "^15.5.8"
   }
 }

package/bpk-component-mobile-scroll-container/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-mobile-scroll-container",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Backpack mobile scroll container 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",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2"
@@ -23,6 +23,6 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.3.0"
+    "@skyscanner/bpk-foundations-web": "^8.5.0"
   }
 }