@skyscanner/backpack-web 9.2.0-beta.2 → 9.3.0

package/bpk-component-content-cards/src/BpkContentCards-test.tsx

@@ -0,0 +1,126 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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, screen } from '@testing-library/react';
+
+import BpkContentCards from './BpkContentCards';
+
+describe('Content Card widget', () => {
+  const contentContainerTestProps: React.ComponentProps<
+    typeof BpkContentCards
+  > = {
+    heading: 'Header for the component',
+    cards: [
+      {
+        image: {
+          url: 'http://skyscanner.net/card-1-image-link.jpg',
+          alt: 'People surfing in the ocean',
+        },
+        headline: 'Card 1 headline',
+        description: 'Card 1 description',
+        href: 'http://skyscanner.net/card-1-cta-link.html',
+      },
+      {
+        image: {
+          url: 'http://skyscanner.net/card-2-image-link.jpg',
+          alt: 'Man on boat in a fjord',
+        },
+        headline: 'Card 2 headline',
+        description: 'Card 2 description',
+        href: 'http://skyscanner.net/card-2-cta-link.html',
+      },
+      {
+        image: {
+          url: 'http://skyscanner.net/card-3-image-link.jpg',
+          alt: 'Airplane flying over mountains',
+        },
+        headline: 'Card 3 headline',
+        description: 'Card 3 description',
+        href: 'http://skyscanner.net/card-3-cta-link.html',
+      },
+    ],
+  };
+
+  it('renders correctly with 1 card', async () => {
+    const { asFragment } = render(
+      <BpkContentCards
+        heading={contentContainerTestProps.heading}
+        cards={contentContainerTestProps.cards.slice(0, 1)}
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders correctly with 2 cards', async () => {
+    const { asFragment } = render(
+      <BpkContentCards
+        heading={contentContainerTestProps.heading}
+        cards={contentContainerTestProps.cards.slice(0, 2)}
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders correctly with 3 cards', async () => {
+    const { asFragment } = render(
+      <BpkContentCards
+        heading={contentContainerTestProps.heading}
+        cards={contentContainerTestProps.cards}
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders the title, the headline and the description for each card', async () => {
+    render(
+      <BpkContentCards
+        heading={contentContainerTestProps.heading}
+        cards={contentContainerTestProps.cards}
+      />,
+    );
+
+    const expectedElements = [
+      'Header for the component',
+      'Card 1 headline',
+      'Card 1 description',
+      'Card 2 headline',
+      'Card 2 description',
+      'Card 3 headline',
+      'Card 3 description',
+    ];
+
+    expectedElements.forEach((element) =>
+      expect(screen.getByText(element)).toBeTruthy(),
+    );
+  });
+
+  it('does not render anything if the cards are not defined', () => {
+    const { container } = render(
+      <BpkContentCards
+        heading={contentContainerTestProps.heading}
+        cards={[]}
+      />,
+    );
+
+    expect(container.firstChild).toBe(null);
+  });
+});

package/bpk-component-content-cards/src/BpkContentCards.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-content-cards{display:flex}

package/bpk-component-content-cards/src/BpkContentCards.module.scss

@@ -0,0 +1,51 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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.
+ */
+
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable selector-max-compound-selectors */
+@import '~bpk-mixins/index';
+
+$bpk-spacing-v2: true;
+
+.bpk-content-cards {
+  &--header-text {
+    margin-bottom: bpk-spacing-base();
+
+    @include bpk-heading-2;
+
+    @include bpk-breakpoint-mobile {
+      @include bpk-heading-3;
+    }
+  }
+
+  &--layout {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax($bpk-one-pixel-rem * 50, 1fr)
+    );
+    grid-auto-flow: column;
+    gap: bpk-spacing-base();
+
+    @include bpk-breakpoint-small-tablet {
+      grid-template-columns: 1fr;
+      grid-auto-flow: row;
+      gap: bpk-spacing-lg();
+    }
+  }
+}

package/bpk-component-content-cards/src/BpkContentCards.tsx

@@ -0,0 +1,72 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkText from '../../bpk-component-text';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { cssModules } from '../../bpk-react-utils';
+
+import BpkContentCard from './BpkContentCard';
+import STYLES from './BpkContentCards.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  heading: string;
+  cards: Array<{
+    image: {
+      url: string;
+      alt?: string;
+    };
+    headline: string;
+    description: string;
+    href: string;
+  }>;
+};
+
+const BpkContentCards = ({ cards, heading }: Props) => {
+  if (cards.length === 0) {
+    return null;
+  }
+
+  return (
+    <div>
+      <BpkText
+        tagName="h2"
+        className={getClassName('bpk-content-cards--header-text')}
+      >
+        {heading}
+      </BpkText>
+      <div role="list" className={getClassName('bpk-content-cards--layout')}>
+        {cards.map((card) => (
+          <div role="listitem">
+            <BpkContentCard
+              key={card.image.url}
+              card={card}
+              layout={cards.length === 1 ? 'HORIZONTAL' : 'VERTICAL'}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BpkContentCards;

package/bpk-component-content-cards/src/accessibility-test.tsx

@@ -0,0 +1,64 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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 BpkContentCards from './BpkContentCards';
+
+const heading = 'Header for the component';
+const cards = [
+  {
+    image: {
+      url: 'http://skyscanner.net/card-1-image-link.jpg',
+      alt: '',
+    },
+    headline: 'Card 1 headline',
+    description: 'Card 1 description',
+    href: 'http://skyscanner.net/card-1-cta-link.html',
+  },
+  {
+    image: {
+      url: 'http://skyscanner.net/card-2-image-link.jpg',
+      alt: '',
+    },
+    headline: 'Card 2 headline',
+    description: 'Card 2 description',
+    href: 'http://skyscanner.net/card-2-cta-link.html',
+  },
+  {
+    image: {
+      url: 'http://skyscanner.net/card-3-image-link.jpg',
+      alt: '',
+    },
+    headline: 'Card 3 headline',
+    description: 'Card 3 description',
+    href: 'http://skyscanner.net/card-3-cta-link.html',
+  },
+];
+
+describe('BpkContentCards accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const { container } = render(
+      <BpkContentCards heading={heading} cards={cards} />,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/bpk-component-content-container/package.json

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

package/bpk-component-content-container/src/BpkContentContainer.js

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

package/bpk-component-datatable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-datatable",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Backpack datatable component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-icon": "^10.0.2",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "lodash": "^4.17.20",
     "prop-types": "^15.7.2",
@@ -25,6 +25,6 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0"
+    "@skyscanner/bpk-foundations-web": "^9.0.0"
   }
 }

package/bpk-component-datatable/src/BpkDataTable.js

@@ -20,9 +20,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Table, AutoSizer } from 'react-virtualized';
-import { cssModules } from 'bpk-react-utils';
 import _omit from 'lodash/omit';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkDataTable.module.scss';
 import BpkDataTableColumn from './BpkDataTableColumn';
 import hasChildrenOfType from './hasChildrenOfType';

package/bpk-component-datatable/src/BpkDataTableColumn.js

@@ -19,7 +19,8 @@
 
 import React, { type Element } from 'react';
 import { Column } from 'react-virtualized';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import bpkHeaderRenderer from './bpkHeaderRenderer';
 import STYLES from './BpkDataTableColumn.module.scss';

package/bpk-component-datatable/src/bpkHeaderRenderer.js

@@ -19,10 +19,11 @@
 
 import React from 'react';
 import { SortDirection } from 'react-virtualized';
-import { cssModules } from 'bpk-react-utils';
-import BpkSmallArrowDownIcon from 'bpk-component-icon/sm/arrow-down';
-import BpkSmallArrowUpIcon from 'bpk-component-icon/sm/arrow-up';
-import { withRtlSupport } from 'bpk-component-icon';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkSmallArrowDownIcon from '../../bpk-component-icon/sm/arrow-down';
+import BpkSmallArrowUpIcon from '../../bpk-component-icon/sm/arrow-up';
+import { withRtlSupport } from '../../bpk-component-icon';
 
 import { hasClassName } from './utils';
 import STYLES from './BpkDataTableColumn.module.scss';

package/bpk-component-datepicker/index.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { CALENDAR_SELECTION_TYPE } from 'bpk-component-calendar';
+import { CALENDAR_SELECTION_TYPE } from '../bpk-component-calendar';
 
 import BpkDatepicker from './src/BpkDatepicker';
 import themeAttributes from './src/themeAttributes';

package/bpk-component-datepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-datepicker",
-  "version": "18.0.1",
+  "version": "18.0.2",
   "description": "Backpack datepicker component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "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-component-breakpoint": "^5.0.2",
+    "bpk-component-calendar": "^12.0.2",
+    "bpk-component-input": "^7.0.2",
+    "bpk-component-modal": "^6.0.2",
+    "bpk-component-popover": "^8.0.2",
+    "bpk-mixins": "^31.5.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.5.0",
-    "bpk-storybook-utils": "^2.0.1"
+    "@skyscanner/bpk-foundations-web": "^9.0.0",
+    "bpk-storybook-utils": "^2.0.2"
   }
 }

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

@@ -16,13 +16,14 @@
  * limitations under the License.
  */
 
-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 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 BpkBreakpoint, { BREAKPOINTS } from '../../bpk-component-breakpoint';
 import {
   composeCalendar,
   BpkCalendarGridHeader,
@@ -33,7 +34,7 @@ import {
   CALENDAR_SELECTION_TYPE,
   DateUtils,
   BpkCalendarNav,
-} from 'bpk-component-calendar';
+} from '../../bpk-component-calendar';
 
 import STYLES from './BpkDatepicker.module.scss';
 

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

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-import { themeAttributes as calendarAttributes } from 'bpk-component-calendar';
-import { themeAttributes as modalAttributes } from 'bpk-component-modal';
-import { themeAttributes as popoverAttributes } from 'bpk-component-popover';
+import { themeAttributes as calendarAttributes } from '../../bpk-component-calendar';
+import { themeAttributes as modalAttributes } from '../../bpk-component-modal';
+import { themeAttributes as popoverAttributes } from '../../bpk-component-popover';
 
 export default [
   ...calendarAttributes,

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

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

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

@@ -18,7 +18,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+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": "7.0.1",
+  "version": "7.0.2",
   "description": "Backpack dialog component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^4.0.1",
-    "bpk-component-flare": "^3.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-close-button": "^4.0.2",
+    "bpk-component-flare": "^3.0.2",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
-    "bpk-scrim-utils": "^6.0.1",
+    "bpk-scrim-utils": "^6.0.2",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.1",
-    "bpk-component-icon": "^10.0.1",
-    "bpk-component-text": "^8.0.1"
+    "bpk-component-button": "^7.0.2",
+    "bpk-component-icon": "^10.0.2",
+    "bpk-component-text": "^8.0.2"
   }
 }

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

@@ -19,8 +19,9 @@
 /* @flow strict */
 
 import React from 'react';
-import { cssModules, Portal } from 'bpk-react-utils';
-import BpkCloseButton from 'bpk-component-close-button';
+
+import { cssModules, Portal } from '../../bpk-react-utils';
+import BpkCloseButton from '../../bpk-component-close-button';
 
 import BpkDialogInner from './BpkDialogInner';
 import { type Props, propTypes, defaultProps } from './common-types';

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

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

package/bpk-component-drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-drawer",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Backpack drawer component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@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",
+    "@skyscanner/bpk-foundations-web": "^9.0.0",
+    "bpk-component-close-button": "^4.0.2",
+    "bpk-component-icon": "^10.0.2",
+    "bpk-component-link": "^4.0.2",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
-    "bpk-scrim-utils": "^6.0.1",
+    "bpk-scrim-utils": "^6.0.2",
     "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.1",
-    "bpk-component-text": "^8.0.1"
+    "bpk-component-button": "^7.0.2",
+    "bpk-component-text": "^8.0.2"
   }
 }

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-scrim-utils';
+
+import { Portal, cssModules } from '../../bpk-react-utils';
+import { withScrim } from '../../bpk-scrim-utils';
 
 import BpkDrawerContent from './BpkDrawerContent';
 import STYLES from './BpkDrawer.module.scss';