@skyscanner/backpack-web 9.3.0 → 11.1.0

package/bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-button--primary-on-dark {
   @include bpk-button--primary-on-dark;

package/bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-button--primary-on-light {
   @include bpk-button--primary-on-light;

package/bpk-component-button/src/BpkButtonSecondary.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-button--secondary {
   @include bpk-button--secondary;

package/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-button--secondary-on-dark {
   @include bpk-button--secondary-on-dark;

package/bpk-component-calendar/DOCS.md

@@ -20,10 +20,4 @@ Calendar components -
 
     - `Week` - This is a container that will take the `DateComponent` to display each of the dates in the calendar
 
-  - `BpkCalendarDate` - is each date cell that would be displayed inside the calendar grid. This would be used to customise how each date cell is displayed e.g. coloured or with special pricing displayed.
-
-  It has a `cellType` prop which can be used to set a custom colour. An exported `CELL_TYPES` object offers the following cell types:
-    - `CELL_TYPES.positive` - sets the calendar cell to `Monteverde`
-    - `CELL_TYPES.neutral` - sets the calendar cell to `Erfoud`
-    - `CELL_TYPES.negative` - sets the calendar cell to `Panjin`
-    - `CELL_TYPES.default` - sets the calendar cell to `Sky Gray Tint 02`
+  - `BpkCalendarDate` - is each date cell that would be displayed inside the calendar grid. This would be used to customise how each date cell is displayed e.g. coloured or with special pricing displayed.

package/bpk-component-calendar/README.md

@@ -248,7 +248,6 @@ The BpkCalendarDate component is used to render the content of a cell
 | Property              | PropType             | Required | Default Value    |
 | --------------------- | -------------------- | -------- | ---------------- |
 | date                  | Date                 | true     | -                |
-| cellType              | oneOf(CELL_TYPES.default, CELL_TYPES.positive, CELL_TYPES.neutral, CELL_TYPES.negative)                     | false    | null             |
 | isBlocked             | bool                 | false    | false            |
 | isFocused             | bool                 | false    | false            |
 | isKeyboardFocusable   | bool                 | false    | true             |
@@ -261,15 +260,6 @@ The BpkCalendarDate component is used to render the content of a cell
 | selectionType         | oneOf(SELECTION_TYPES.single, SELECTION_TYPES.start, SELECTION_TYPES.middle, SELECTION_TYPES.end)      | false    | SELECTION_TYPES.single             |
 | style                 | object               | false    | null             |
 
-#### `cellType` prop
-
-This prop determines what the colour date cell is to be displayed.
-
-- `CELL_TYPES.positive` - sets the calendar cell to `Monteverde`
-- `CELL_TYPES.neutral` - sets the calendar cell to `Erfoud`
-- `CELL_TYPES.negative` - sets the calendar cell to `Panjin`
-- `CELL_TYPES.default` - sets the calendar cell to `Sky Gray Tint 02`
-
 #### `selectionType` prop
 
 This property determines which selected styles will be applied to the date cell. If using ranges use `start`, `middle` and `end` to apply the correct range styles.

package/bpk-component-calendar/index.js

@@ -26,7 +26,6 @@ import BpkCalendarGrid, {
 import BpkCalendarGridHeader from './src/BpkCalendarGridHeader';
 import BpkCalendarNav from './src/BpkCalendarNav';
 import BpkCalendarDate, {
-  CELL_TYPES,
   ROW_TYPES,
   SELECTION_TYPES,
   propTypes as BpkCalendarDatePropTypes,
@@ -47,7 +46,6 @@ export {
   BpkCalendarDate,
   CustomPropTypes,
   DateUtils,
-  CELL_TYPES,
   CALENDAR_SELECTION_TYPE,
   ROW_TYPES,
   SELECTION_TYPES,

package/bpk-component-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-calendar",
-  "version": "12.0.2",
+  "version": "13.0.2",
   "description": "Backpack calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-aria-live": "^3.0.2",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-select": "^6.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-aria-live": "^3.1.2",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-component-select": "^6.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "date-fns": "^2.21.1",
     "prop-types": "^15.7.2"
   },
@@ -27,8 +27,8 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-component-button": "^7.0.5",
+    "bpk-component-text": "^8.0.5",
+    "bpk-storybook-utils": "^2.0.5"
   }
 }

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

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
-@import 'variables';
+@import '~bpk-mixins/index.scss';
+@import 'variables.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-calendar/src/BpkCalendarDate.js

@@ -26,13 +26,6 @@ import STYLES from './BpkCalendarDate.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-export const CELL_TYPES = {
-  default: 'default',
-  negative: 'negative',
-  neutral: 'neutral',
-  positive: 'positive',
-};
-
 export const SELECTION_TYPES = {
   none: 'none',
   single: 'single',
@@ -99,7 +92,6 @@ class BpkCalendarDate extends PureComponent {
 
   render() {
     const {
-      cellType,
       className,
       date,
       isBlocked,
@@ -126,11 +118,6 @@ class BpkCalendarDate extends PureComponent {
       }
     });
 
-    if (cellType) {
-      classNames.push(getClassName(`bpk-calendar-date--colored`));
-      classNames.push(getClassName(`bpk-calendar-date--colored-${cellType}`));
-    }
-
     if (isFocused) {
       classNames.push(getClassName('bpk-calendar-date--focused'));
     }
@@ -183,7 +170,6 @@ export const propTypes = {
   // Required
   date: PropTypes.instanceOf(Date).isRequired,
   // Optional
-  cellType: PropTypes.oneOf(Object.keys(CELL_TYPES)),
   className: PropTypes.string,
   isBlocked: PropTypes.bool,
   isFocused: PropTypes.bool,
@@ -203,7 +189,6 @@ BpkCalendarDate.propTypes = { ...propTypes };
 
 export const defaultProps = {
   className: null,
-  cellType: null,
   isBlocked: false,
   isFocused: false,
   isKeyboardFocusable: true,

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 
@@ -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

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
-@import 'variables';
+@import '~bpk-mixins/index.scss';
+@import 'variables.scss';
 
 .bpk-calendar-grid {
   width: 100%;
@@ -40,23 +40,24 @@
     &--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%
       );
     }
   }
+
   &__week {
     display: flex;
     padding-top: bpk-spacing-lg();

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

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
-@import 'variables';
+@import '~bpk-mixins/index.scss';
+@import 'variables.scss';
 
 .bpk-calendar-header {
   display: table;

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

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
-@import 'variables';
+@import '~bpk-mixins/index.scss';
+@import 'variables.scss';
 
 .bpk-calendar-grid-transition {
   position: relative;

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

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
-@import 'variables';
+@import '~bpk-mixins/index.scss';
+@import 'variables.scss';
 
 .bpk-calendar-nav {
   display: table;
@@ -67,7 +67,7 @@
     }
 
     .bpk-calendar-nav__icon {
-      fill: currentColor;
+      fill: currentcolor;
 
       @include bpk-icon--rtl-support;
     }

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

@@ -16,9 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
-$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.4",
   "description": "Backpack card component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-link": "^4.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-link": "^4.0.5",
+    "bpk-component-text": "^8.0.5"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-card/src/BpkCard.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-card {
   @include bpk-card;

package/bpk-component-checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-checkbox",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "description": "Backpack checkbox component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-storybook-utils": "^2.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-storybook-utils": "^2.0.5"
   }
 }

package/bpk-component-checkbox/src/BpkCheckbox.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-chip",
-  "version": "6.0.2",
+  "version": "6.0.5",
   "description": "Backpack chip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^3.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-aria-live": "^3.1.2",
+    "bpk-component-text": "^8.0.5"
   }
 }

package/bpk-component-chip/src/BpkSelectableChip.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-chip {
   @include bpk-chip;

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-close-button",
-  "version": "4.0.2",
+  "version": "4.0.5",
   "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-react-utils": "^7.0.0",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-storybook-utils": "^2.0.5"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-close-button/src/BpkCloseButton.module.scss

@@ -16,13 +16,14 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 $button-padding: $bpk-spacing-xs / 2;
 
 .bpk-close-button {
   width: $bpk-spacing-base;
   height: $bpk-spacing-base;
+
   // The margin here is used to ensure that the icon is aligned to
   // the leading or trailing edge of its parent container
   margin-right: -#{$button-padding};
@@ -46,6 +47,6 @@ $button-padding: $bpk-spacing-xs / 2;
 
   &__icon {
     vertical-align: -#{$button-padding};
-    fill: currentColor;
+    fill: currentcolor;
   }
 }

package/bpk-component-code/package.json

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

package/bpk-component-code/src/BpkCode.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-code {
   @include bpk-code;

package/bpk-component-code/src/BpkCodeBlock.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-code {
   &--block {

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-content-cards",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "Backpack content-cards component.",
   "license": "Apache-2.0",
   "repository": {
@@ -8,14 +8,14 @@
     "url": "git@github.com:Skyscanner/backpack.git"
   },
   "author": "Backpack Design System <backpack@skyscanner.net>",
-  "main": "index.ts",
+  "main": "index.js",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-text": "^8.0.2",
-    "bpk-mixins": "^31.1.6",
-    "bpk-react-utils": "^7.0.0"
+    "bpk-component-text": "^8.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1"
   },
   "peerDependencies": {
     "react": "^17.0.2"