@skyscanner/backpack-web 9.3.0 → 10.0.0

package/bpk-component-calendar/src/BpkCalendarDate.module.scss

@@ -51,26 +51,6 @@ $bpk-spacing-v2: true;
     }
   }
 
-  &--colored {
-    color: $bpk-color-white;
-
-    &-default {
-      background-color: $bpk-color-sky-gray-tint-02;
-    }
-
-    &-positive {
-      background-color: $bpk-color-monteverde;
-    }
-
-    &-neutral {
-      background-color: $bpk-color-erfoud;
-    }
-
-    &-negative {
-      background-color: $bpk-color-panjin;
-    }
-  }
-
   &:not(.bpk-calendar-date--selected):active {
     background-color: $bpk-calendar-day-active-background-color;
 
@@ -89,11 +69,6 @@ $bpk-spacing-v2: true;
   &--selected {
     cursor: default;
 
-    @include bpk-themeable-property(
-      background-color,
-      --bpk-calendar-date-selected-background-color,
-      $bpk-calendar-day-selected-background-color
-    );
     @include bpk-themeable-property(
       color,
       --bpk-calendar-date-text-selected-color,
@@ -102,44 +77,36 @@ $bpk-spacing-v2: true;
   }
 
   &--middle {
-    background-color: $bpk-color-sky-blue-tint-03;
-    color: $bpk-color-sky-gray;
+    background-color: $bpk-surface-highlight-day;
+    color: $bpk-text-primary-day;
   }
 
   &--single {
-    background-color: $bpk-color-sky-blue;
+    background-color: $bpk-core-accent-day;
   }
 
   &--start {
-    background-color: $bpk-color-sky-blue;
+    background-color: $bpk-core-accent-day;
   }
 
   &--end {
-    background-color: $bpk-color-sky-blue;
+    background-color: $bpk-core-accent-day;
   }
 
   &--focused:not(:disabled):not(.bpk-calendar-date--selected) {
-    &:not(.bpk-calendar-date--colored) {
-      box-shadow: 0 0 0 2px $bpk-calendar-day-focused-border-color inset;
-      box-shadow: 0 0 0 2px
-        var(
-          --bpk-calendar-date-focused-border-color,
-          $bpk-calendar-day-focused-border-color
-        )
-        inset;
-
-      @include bpk-themeable-property(
-        color,
-        --bpk-calendar-date-text-focus-color,
-        $bpk-calendar-day-focused-color
-      );
-    }
+    box-shadow: 0 0 0 2px $bpk-calendar-day-focused-border-color inset;
+    box-shadow: 0 0 0 2px
+      var(
+        --bpk-calendar-date-focused-border-color,
+        $bpk-calendar-day-focused-border-color
+      )
+      inset;
 
-    &.bpk-calendar-date--colored {
-      border: (bpk-spacing-sm() / 2) solid
-        $bpk-calendar-day-focused-border-color;
-      box-shadow: 0 0 0 1px $bpk-color-white inset;
-    }
+    @include bpk-themeable-property(
+      color,
+      --bpk-calendar-date-text-focus-color,
+      $bpk-calendar-day-focused-color
+    );
   }
 
   &:disabled,

package/bpk-component-calendar/src/BpkCalendarGrid.module.scss

@@ -40,20 +40,20 @@
     &--start {
       background-image: linear-gradient(
         to right,
-        $bpk-color-white 50%,
-        $bpk-color-sky-blue-tint-03 50%
+        $bpk-surface-default-day 50%,
+        $bpk-surface-highlight-day 50%
       );
     }
 
     &--middle {
-      background-color: $bpk-color-sky-blue-tint-03;
+      background-color: $bpk-surface-highlight-day;
     }
 
     &--end {
       background-image: linear-gradient(
         to left,
-        $bpk-color-white 50%,
-        $bpk-color-sky-blue-tint-03 50%
+        $bpk-surface-default-day 50%,
+        $bpk-surface-highlight-day 50%
       );
     }
   }

package/bpk-component-calendar/src/_variables.scss

@@ -18,7 +18,5 @@
 
 @import '~bpk-mixins/index';
 
-$shadow-bottom: 0 1px 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-disallowed-list */
-$shadow-left: -1px 0 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-disallowed-list */
-$shadow-right: 1px 0 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-disallowed-list */
+$shadow-bottom: 0 1px 0 0 $bpk-line-day; /* stylelint-disable-line unit-disallowed-list */
 $calendar-width: 7 * ($bpk-calendar-day-size + (2 * $bpk-calendar-day-spacing));

package/bpk-component-card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-card",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "Backpack card component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-link": "^4.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-link": "^4.0.3",
+    "bpk-component-text": "^8.0.3"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-checkbox",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Backpack checkbox component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,7 +23,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-storybook-utils": "^2.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-storybook-utils": "^2.0.3"
   }
 }

package/bpk-component-chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-chip",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "Backpack chip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,7 +23,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^3.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-aria-live": "^3.1.0",
+    "bpk-component-text": "^8.0.3"
   }
 }

package/bpk-component-close-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-close-button",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Backpack close button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-storybook-utils": "^2.0.3"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-code/package.json

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

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-content-cards",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Backpack content-cards component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,7 +13,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-text": "^8.0.2",
+    "bpk-component-text": "^8.0.3",
     "bpk-mixins": "^31.1.6",
     "bpk-react-utils": "^7.0.0"
   },

package/bpk-component-content-cards/src/{BpkContentCard/BpkContentCard.tsx → BpkContentCard.tsx}

@@ -19,9 +19,9 @@
 import React from 'react';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkText from '../../../bpk-component-text';
+import BpkText from '../../bpk-component-text';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { cssModules } from '../../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkContentCard.module.scss';
 

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-content-container",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "Backpack content container component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.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.2",
+  "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.2",
-    "bpk-mixins": "^31.5.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": "^9.0.0"
+    "@skyscanner/bpk-foundations-web": "^9.2.0"
   }
 }