@skyscanner/backpack-web 9.2.0-beta.3 → 10.0.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.3",
   "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.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-datatable/README.md

@@ -38,12 +38,11 @@ export default () => (
 );
 ```
 
-By default `BpkDataTable` sorts the column using the value of `dataKey`. For use cases where the data might more complex and requires custom sorting you can pass a `sort` function along with `sortBy` and `sortDirection` and they will be handled as explained in react-virtualized's [docs] (https://github.com/bvaughn/react-virtualized/blob/main/docs/Table.md#prop-types)
+By default `BpkDataTable` sorts the column using the value of `dataKey`. For use cases where the data might more complex and requires custom sorting you can pass a `sort` function along with `sortBy` and `sortDirection`.
 
 ```js
 import React from 'react';
 import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';
-import _sortBy from 'lodash/sortBy';
 
 const complexRows = [
     {
@@ -65,21 +64,16 @@ const complexRows = [
 
 let sortByValue = 'seat';
 let sortDirectionValue = 'DESC';
-const sortFunction = ({ sortBy, sortDirection }) => {
-  if (sortBy === 'seat') {
-    complexRows = _sortBy(complexRows, [
-      row => row.seat.office,
-      row => row.seat.desk,
-    ]);
+const sortFunction = (rowA, rowB, id, desc) => {
+  const deskA = rowA.values.seat.desk;
+  const deskB = rowB.values.seat.desk;
+
+  if (deskA === deskB) {
+      return 0;
   } else {
-    complexRows = _sortBy(complexRows, sortBy);
-  }
-  if (sortDirection === 'DESC') {
-    complexRows.reverse();
+      return deskA > deskB ? 1 : -1;
   }
-  sortByValue = sortBy;
-  sortDirectionValue = sortDirection;
-};
+}
 
 export default () => (
   <BpkDataTable
@@ -118,10 +112,6 @@ export default () => (
 
 ### BpkDataTable
 
-Supports all properties defined in [`Table`](https://github.com/bvaughn/react-virtualized/blob/main/docs/Table.md) (from `react-virtualized`),
-in addition to the following:
-
-
 | Property               | PropType                    | Required | Default Value        |
 | ---------------------- | --------------------------- | -------- | -------------------- |
 | rows                   | arrayOf(Object)             | true     | -                    |
@@ -130,12 +120,79 @@ in addition to the following:
 | width                  | number                      | false    | full width of parent |
 | headerHeight           | number                      | false    | 60                   |
 | rowHeight              | number                      | false    | 60                   |
+| rowStyle               | object                      | false    | {}                   |
+| onRowClick             | func                        | false    | null                 |
+| className              | string                      | false    | null                 |
 | defaultColumnSortIndex | number                      | false    | 0                    |
 | sort                   | func                        | false    | null                 |
 | sortBy                 | string                      | false    | null                 |
-| sortDirection          | oneOf('ASC', 'DESC')        | false    | null                 |
+| sortDirection          | oneOf('ASC', 'DESC')        | false    | 'ASC'                |
 
 
 ### BpkDataTableColumn
 
-Supports all properties defined in [`Column`](https://github.com/bvaughn/react-virtualized/blob/master/docs/Column.md) (from `react-virtualized`)
+| Property               | PropType                    | Required | Default Value        |
+| ---------------------- | --------------------------- | -------- | -------------------- |
+| dataKey                | string                      | true     | -                    |
+| width                  | number                      | true     | -                    |
+| flexGrow               | number                      | false    | 0                    |
+| label                  | string                      | false    | null                 |
+| headerRenderer         | func                        | false    | null                 |
+| headerClassName        | string                      | false    | null                 |
+| headerStyle            | object                      | false    | {}                   |
+| cellRenderer           | func                        | false    | null                 |
+| cellDataGetter         | func                        | false    | null                 |
+| disableSort            | bool                        | false    | false                |
+| defaultSortDirection   | oneOf('ASC', 'DESC')        | false    | 'ASC'                |
+| className              | string                      | false    | null                 |
+
+### Prop Details
+
+
+#### sort, sortBy, sortDirection
+
+For custom sorting, pass a `sort` function.
+Use `sortBy` to specify which column the custom sorting will be applied to.
+Use `sortDirection` to set the direction of sorting. By default, it will be ascending.
+
+#### defaultColumnSortIndex
+
+The data will be sorted by default based on this column.
+
+#### headerRenderer
+
+To handle more complex header data that needs any custom processing, pass a function or component to `headerRenderer` prop. This will only be formatting the header value - all styling will be handled by the component.
+It should implement the following signature:
+
+```
+  function ({
+  dataKey: string, disableSort: boolean, label: string
+  }): element
+```
+
+#### cellDataGetter
+
+To handle more complex cell data that needs any custom processing, pass a function or component to `cellDataGetter` prop. This will only be formatting the cell value - all styling will be handled by the component.
+It should implement the following signature:
+
+```
+function ({
+  dataKey: string,
+  rowData: any
+}): any
+```
+
+#### cellRenderer
+
+To handle more complex cell data that needs any custom processing, pass a function or component to `cellRenderer` prop. This will only be formatting the cell value - all styling will be handled by the component. To maintain backward compatibility, both `cellRenderer` and `cellDataGetter` will be supported, however, they are interchangeable as they both can only format the cell value.
+It should implement the following signature:
+
+```
+function ({
+  cellData: any,
+  columnIndex: number,
+  dataKey: string,
+  rowData: any,
+  rowIndex: any,
+}): node
+```

package/bpk-component-datatable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-datatable",
-  "version": "5.0.1",
+  "version": "6.0.0",
   "description": "Backpack datatable component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
-    "lodash": "^4.17.20",
     "prop-types": "^15.7.2",
-    "react-virtualized": "^9.22.3"
+    "react-table": "^7.8.0"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0"
+    "@skyscanner/bpk-foundations-web": "^9.2.0"
   }
 }