@skyscanner/backpack-web 16.1.0 → 17.0.0

package/README.md

@@ -40,7 +40,6 @@ To contribute please see [contributing.md](CONTRIBUTING.md).
 [`bpk-component-chip`](/packages/bpk-component-chip)
 [`bpk-component-close-button`](/packages/bpk-component-close-button)
 [`bpk-component-code`](/packages/bpk-component-code)
-[`bpk-component-content-container`](/packages/bpk-component-content-container)
 [`bpk-component-datatable`](/packages/bpk-component-datatable)
 [`bpk-component-datepicker`](/packages/bpk-component-datepicker)
 [`bpk-component-description-list`](/packages/bpk-component-description-list)

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

@@ -36,34 +36,34 @@ $bpk-spacing-v2: true;
   @include bpk-themeable-property(
     color,
     --bpk-calendar-date-text-color,
-    $bpk-calendar-day-color
+    $bpk-text-primary-day
   );
 
   @include bpk-hover {
     &:not(.bpk-calendar-date--selected) {
-      background-color: $bpk-calendar-day-hover-background-color;
+      background-color: $bpk-canvas-contrast-day;
 
       @include bpk-themeable-property(
         color,
         --bpk-calendar-date-text-hover-color,
-        $bpk-calendar-day-hover-color
+        $bpk-text-primary-day
       );
     }
   }
 
   &:not(.bpk-calendar-date--selected):active {
-    background-color: $bpk-calendar-day-active-background-color;
+    background-color: $bpk-canvas-contrast-day;
 
     @include bpk-themeable-property(
       color,
       --bpk-calendar-date-text-active-color,
-      $bpk-calendar-day-active-color
+      $bpk-text-primary-day
     );
   }
 
   &--outside {
     background-color: transparent;
-    color: $bpk-calendar-day-outside-color;
+    color: $bpk-text-disabled-day;
   }
 
   &--selected {
@@ -72,7 +72,7 @@ $bpk-spacing-v2: true;
     @include bpk-themeable-property(
       color,
       --bpk-calendar-date-text-selected-color,
-      $bpk-calendar-day-selected-color
+      $bpk-text-primary-inverse-day
     );
   }
 
@@ -94,33 +94,29 @@ $bpk-spacing-v2: true;
   }
 
   &--focused:not(:disabled):not(.bpk-calendar-date--selected) {
-    box-shadow: 0 0 0 2px $bpk-calendar-day-focused-border-color inset;
+    box-shadow: 0 0 0 2px $bpk-core-accent-day inset;
     box-shadow: 0 0 0 2px
-      var(
-        --bpk-calendar-date-focused-border-color,
-        $bpk-calendar-day-focused-border-color
-      )
-      inset;
+      var(--bpk-calendar-date-focused-border-color, $bpk-core-accent-day) inset;
 
     @include bpk-themeable-property(
       color,
       --bpk-calendar-date-text-focus-color,
-      $bpk-calendar-day-focused-color
+      $bpk-core-accent-day
     );
   }
 
   &:disabled,
   &--blocked {
     background-color: transparent;
-    color: $bpk-calendar-day-disabled-color;
+    color: $bpk-text-disabled-day;
     cursor: not-allowed;
 
     @include bpk-hover {
-      color: $bpk-calendar-day-disabled-color;
+      color: $bpk-text-disabled-day;
     }
 
     &:active {
-      color: $bpk-calendar-day-disabled-color;
+      color: $bpk-text-disabled-day;
     }
   }
 }

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

@@ -47,14 +47,14 @@
     @include bpk-themeable-property(
       color,
       --bpk-calendar-nudger-icon-color,
-      $bpk-calendar-nav-icon-fill
+      $bpk-text-primary-day
     );
 
     @include bpk-hover {
       @include bpk-themeable-property(
         color,
         --bpk-calendar-nudger-icon-hover-color,
-        $bpk-calendar-nav-icon-hover-fill
+        $bpk-text-primary-day
       );
     }
 
@@ -62,7 +62,7 @@
       @include bpk-themeable-property(
         color,
         --bpk-calendar-nudger-icon-active-color,
-        $bpk-calendar-nav-icon-active-fill
+        $bpk-text-primary-day
       );
     }
 
@@ -76,7 +76,7 @@
       cursor: not-allowed;
 
       .bpk-calendar-nav__icon {
-        fill: $bpk-calendar-nav-icon-disabled-fill;
+        fill: $bpk-text-disabled-day;
       }
     }
   }

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

@@ -63,6 +63,10 @@ $bpk-spacing-v2: true;
       }
     }
 
+    &:disabled {
+      cursor: inherit;
+    }
+
     &-white {
       background-color: $bpk-surface-default-day;
     }

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

@@ -67,7 +67,7 @@ $bpk-spacing-v2: true;
   }
 
   &--headline {
-    margin-bottom: $bpk-heading-margin-bottom;
+    margin-bottom: bpk-spacing-sm();
 
     @include bpk-heading-4;
   }

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

@@ -40,7 +40,7 @@ $bpk-spacing-v2: true;
       minmax($bpk-one-pixel-rem * 50, 1fr)
     );
     grid-auto-flow: column;
-    gap: bpk-spacing-base();
+    gap: bpk-spacing-lg();
 
     @include bpk-breakpoint-small-tablet {
       grid-template-columns: 1fr;

package/bpk-component-overlay/README.md

@@ -47,5 +47,5 @@ export default () => (
 | borderRadiusStyle (deprecated) | BORDER_RADIUS_STYLES | false | BORDER_RADIUS_STYLES.none |
 | className | string | false | null |
 | foregroundContent | Node | false | null |
-| overlayType | oneOf(OVERLAY_TYPES) | false | null |
-| overlayLevel | oneOf(OVERLAY_LEVELS) | false | null |
+| overlayType | oneOf(OVERLAY_TYPES) | false | OVERLAY_TYPES.solid |
+| overlayLevel | oneOf(OVERLAY_LEVELS) | false | OVERLAY_LEVELS.low |

package/bpk-component-overlay/src/BpkOverlay.js

@@ -102,8 +102,8 @@ BpkOverlay.defaultProps = {
   borderRadiusStyle: null,
   className: null,
   foregroundContent: null,
-  overlayType: null,
-  overlayLevel: null,
+  overlayType: OVERLAY_TYPES.solid,
+  overlayLevel: OVERLAY_LEVELS.low,
 };
 
 export default BpkOverlay;

package/bpk-component-page-indicator/README.md

@@ -28,15 +28,15 @@ export default () =>
 
 ## Props
 
-| Property        | PropType       | Required | Default Value   |
-|-----------------|----------------|----------|-----------------|
-| currentIndex    | number         | true     | -               |
-| totalIndicators | number         | true     | -               |
-| indicatorLabel  | string         | true     | -               |
-| prevNavLabel    | string         | true     | -               |
-| nextNavLabel    | string         | true     | -               |
-| className       | string         | false    | null            |
-| showNav         | bool           | false    | false           |
-| variant         | oneOf(VARIANT) | false    | VARIANT.default |
-| onClick         | func           | false    | null            |
+| Property        | PropType                                  | Required | Default Value   |
+|-----------------|-------------------------------------------|----------|-----------------|
+| currentIndex    | number                                    | true     | -               |
+| totalIndicators | number                                    | true     | -               |
+| indicatorLabel  | string                                    | true     | -               |
+| prevNavLabel    | string                                    | true     | -               |
+| nextNavLabel    | string                                    | true     | -               |
+| className       | string                                    | false    | null            |
+| showNav         | bool                                      | false    | false           |
+| variant         | oneOf(VARIANT.default, VARIANT.overImage) | false    | VARIANT.default |
+| onClick         | func                                      | false    | null            |
 

package/bpk-component-pagination/src/BpkPaginationList.module.scss

@@ -24,6 +24,7 @@ $bpk-spacing-v2: true;
   display: flex;
   margin: 0;
   padding: 0;
+  align-items: baseline;
   list-style: none;
 
   &__item {

package/bpk-component-pagination/src/BpkPaginationNudger.module.scss

@@ -26,7 +26,6 @@ $bpk-spacing-v2: true;
 
   &__button {
     height: $bpk-button-height;
-    padding: 0 bpk-spacing-md();
     border: none;
     background: none;
     cursor: pointer;
@@ -34,6 +33,10 @@ $bpk-spacing-v2: true;
 
     @include bpk-button--link;
 
+    // Using stylelint-disable as we need to override padding provided by bpk-button--link otherwise it shifts the arrow buttons out of alignment.
+    /* stylelint-disable-next-line order/properties-order, order/order */
+    padding: 0;
+
     &:disabled {
       cursor: not-allowed;
     }

package/bpk-component-radio/src/BpkRadio.module.scss

@@ -44,6 +44,10 @@ $bpk-radio-size: bpk-spacing-lg() - ($bpk-one-pixel-rem * 4);
   &__input {
     @include bpk-radio__input;
 
+    &:disabled {
+      cursor: inherit;
+    }
+
     &:checked {
       + .bpk-radio__circle {
         display: block;

package/bpk-component-theme-toggle/src/theming.js

@@ -19,12 +19,11 @@ import {
   horizontalNavLinkColor,
   horizontalNavLinkHoverColor,
   horizontalNavLinkActiveColor,
-  calendarDayHoverColor,
-  calendarDayActiveColor,
   colorSkyGrayTint02,
   colorSkyGrayTint06,
   colorWhite,
   colorMonteverde,
+  textPrimaryDay,
 } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 const generateTheme = ({
@@ -159,8 +158,8 @@ const generateTheme = ({
   progressBarFillColor: primaryColor500,
 
   calendarDateTextColor: primaryColor500,
-  calendarDateTextHoverColor: calendarDayHoverColor,
-  calendarDateTextActiveColor: calendarDayActiveColor,
+  calendarDateTextHoverColor: textPrimaryDay,
+  calendarDateTextActiveColor: textPrimaryDay,
   calendarDateTextFocusColor: primaryColor500,
   calendarDateTextSelectedColor: colorWhite,
   calendarDateSelectedBackgroundColor: primaryColor700,

package/bpk-scrim-utils/src/bpk-scrim.module.scss

@@ -27,22 +27,19 @@
   z-index: $bpk-zindex-scrim;
   transition: opacity $bpk-duration-sm ease-in-out;
   background-color: $bpk-scrim-day;
-
-  // We will need to remove this on hex launch as opacity will be built into the above colour.
-  opacity: $bpk-scrim-opacity;
   overflow: hidden;
 
   &--full-screen {
     @include bpk-breakpoint-mobile {
-      opacity: $bpk-scrim-mobile-opacity;
+      opacity: 1;
     }
   }
 
   &--appear {
-    opacity: $bpk-scrim-initial-opacity;
+    opacity: 0;
   }
 
   &--appear-active {
-    opacity: $bpk-scrim-opacity;
+    opacity: 0.7;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "16.1.0",
+  "version": "17.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^13.0.0",
-    "@skyscanner/bpk-svgs": "^16.0.0",
+    "@skyscanner/bpk-foundations-web": "^13.3.0",
+    "@skyscanner/bpk-svgs": "^16.0.5",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-mixins": "^36.1.1",
+    "bpk-mixins": "^37.1.0",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
     "date-fns": "^2.21.1",

package/bpk-component-content-container/README.md

@@ -1,31 +0,0 @@
-# bpk-component-content-container
-
-> Backpack content container component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import React from 'react';
-import BpkContentContainer from '@skyscanner/backpack-web/bpk-component-content-container';
-
-export default () => (
-  <BpkContentContainer>
-    <h1>My heading</h1>
-    <p>My paragraph.</p>
-  </BpkContentContainer>
-);
-```
-
-## Props
-
-| Property                | PropType                                     | Required | Default Value |
-| ----------------------- | -------------------------------------------- | -------- | ------------- |
-| children                | -                                            | false    | null          |
-| dangerouslySetInnerHTML | { __html: string }                           | false    | null          |
-| tagName                 | 'article', 'aside', 'div', 'main', 'section' | false    | 'div'         |
-| bareHtml                | bool                                         | false    | false         |
-| alternate               | bool                                         | false    | false         |

package/bpk-component-content-container/index.js

@@ -1,21 +0,0 @@
-/*
- * 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 component from './src/BpkContentContainer';
-
-export default component;

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

@@ -1,85 +0,0 @@
-/*
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkContentContainer.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const BpkContentContainer = (props) => {
-  const {
-    alternate,
-    bareHtml,
-    children,
-    className,
-    dangerouslySetInnerHTML,
-    tagName: TagName,
-    ...rest
-  } = props;
-  const classNames = [getClassName('bpk-content-container')];
-
-  if (bareHtml) {
-    classNames.push(getClassName('bpk-content-container--bare-html'));
-
-    if (alternate) {
-      classNames.push(
-        getClassName('bpk-content-container--bare-html-alternate'),
-      );
-    }
-  }
-
-  if (className) {
-    classNames.push(className);
-  }
-
-  return (
-    <TagName
-      className={classNames.join(' ')}
-      dangerouslySetInnerHTML={dangerouslySetInnerHTML}
-      {...rest}
-    >
-      {children}
-    </TagName>
-  );
-};
-
-BpkContentContainer.propTypes = {
-  children: PropTypes.node,
-  dangerouslySetInnerHTML: PropTypes.shape({
-    __html: PropTypes.string.isRequired,
-  }),
-  tagName: PropTypes.oneOf(['article', 'aside', 'div', 'main', 'section']),
-  bareHtml: PropTypes.bool,
-  alternate: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-BpkContentContainer.defaultProps = {
-  children: null,
-  dangerouslySetInnerHTML: null,
-  tagName: 'div',
-  bareHtml: false,
-  alternate: false,
-  className: null,
-};
-
-export default BpkContentContainer;

package/bpk-component-content-container/src/BpkContentContainer.module.css

@@ -1,18 +0,0 @@
-/*
- * 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-container>h1:not(:first-child),.bpk-content-container>h2:not(:first-child),.bpk-content-container>h3:not(:first-child),.bpk-content-container>h4:not(:first-child){margin-top:1.875rem}.bpk-content-container>.bpk-content-container{margin-bottom:.75rem}.bpk-content-container>*:last-child{margin-bottom:0}.bpk-content-container--bare-html h1{margin-top:0;margin-bottom:.75rem;font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}@media (max-width: 32.25rem){.bpk-content-container--bare-html h1{font-size:2rem;line-height:2.5rem;font-weight:700}}.bpk-content-container--bare-html h2{margin-top:0;margin-bottom:.75rem;font-size:2rem;line-height:2.5rem;font-weight:700}@media (max-width: 32.25rem){.bpk-content-container--bare-html h2{font-size:1.5rem;line-height:2rem;font-weight:400}}.bpk-content-container--bare-html h3{margin-top:0;margin-bottom:.75rem;font-size:1.5rem;line-height:2rem;font-weight:400}@media (max-width: 32.25rem){.bpk-content-container--bare-html h3{font-size:1rem;line-height:1.5rem;font-weight:400;font-weight:700}}.bpk-content-container--bare-html h4{margin-top:0;margin-bottom:.375rem;font-size:1rem;line-height:1.5rem;font-weight:400}@media (max-width: 32.25rem){.bpk-content-container--bare-html h4{font-size:.75rem;line-height:1rem;font-weight:400;font-weight:700}}.bpk-content-container--bare-html h5{margin-top:0;margin-bottom:.75rem;font-size:.75rem;line-height:1rem;font-weight:400}@media (max-width: 32.25rem){.bpk-content-container--bare-html h5{font-size:.75rem;line-height:1rem;font-weight:400;font-weight:700}}.bpk-content-container--bare-html h6{margin-top:0;margin-bottom:.75rem;font-size:.75rem;line-height:1rem;font-weight:400}@media (max-width: 32.25rem){.bpk-content-container--bare-html h6{font-size:.75rem;line-height:1rem;font-weight:400;font-weight:700}}.bpk-content-container--bare-html a{padding:0;border:0;background-color:transparent;text-decoration:none;cursor:pointer;appearance:none;color:#0770e3;color:var(--bpk-link-color, #0770e3)}.bpk-no-touch-support .bpk-content-container--bare-html a:hover:not(:active):not(:disabled){text-decoration:underline;color:#084eb2;color:var(--bpk-link-hover-color, #084eb2)}:global(.bpk-no-touch-support) .bpk-content-container--bare-html a:hover:not(:active):not(:disabled){text-decoration:underline;color:#084eb2;color:var(--bpk-link-hover-color, #084eb2)}.bpk-content-container--bare-html a:visited{color:#0770e3;color:var(--bpk-link-visited-color, #0770e3)}.bpk-content-container--bare-html a:active{text-decoration:underline;color:#042759;color:var(--bpk-link-active-color, #042759)}.bpk-content-container--bare-html p{margin-top:0;margin-bottom:.375rem;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-content-container--bare-html ul,.bpk-content-container--bare-html ol{margin-top:0;margin-bottom:.75rem;padding-left:1.5rem}.bpk-content-container--bare-html ul ul,.bpk-content-container--bare-html ul ol,.bpk-content-container--bare-html ol ul,.bpk-content-container--bare-html ol ol{margin-top:0;margin-bottom:0}.bpk-content-container--bare-html ul li,.bpk-content-container--bare-html ol li{margin-top:0;margin-bottom:0}.bpk-content-container--bare-html table{width:100%;margin-bottom:0.5rem;border-collapse:collapse;table-layout:fixed;box-shadow:0 0 0 1px #dddde5 }.bpk-content-container--bare-html table td{padding:1rem}.bpk-content-container--bare-html table th{padding:1rem;background-color:#f1f2f8;font-weight:normal;text-align:left}html[dir='rtl'] .bpk-content-container--bare-html table th{text-align:right}.bpk-content-container--bare-html code{display:inline;padding:0 .375rem;background-color:#f1f2f8;color:#444560;text-align:left;text-shadow:0 .0625rem #fff;white-space:nowrap;vertical-align:bottom;border-radius:.25rem}html[dir='rtl'] .bpk-content-container--bare-html code{direction:ltr}.bpk-content-container--bare-html pre{margin:0 0 .75rem;padding:1.5rem;background-color:#f1f2f8;border-radius:.25rem}.bpk-content-container--bare-html pre>code{display:block;margin:0;padding:0;background-color:transparent;white-space:inherit;overflow:auto;-ms-overflow-style:none}.bpk-content-container--bare-html pre>code::-webkit-scrollbar{display:none}.bpk-content-container--bare-html blockquote{margin:0 0 1rem 0;padding:1.5rem;background-color:#f1f2f8;color:#68697f;box-shadow:2px 0 0 0 #0770e3 inset;box-shadow:2px 0 0 0 var(--bpk-blockquote-bar-color, #0770e3) inset}html[dir='rtl'] .bpk-content-container--bare-html blockquote{padding:1.5rem;border-left:0;box-shadow:-2px 0 0 0 #0770e3 inset;box-shadow:-2px 0 0 0 var(--bpk-blockquote-bar-color, #0770e3) inset}.bpk-content-container--bare-html blockquote>*:last-child{margin-bottom:0}.bpk-content-container--bare-html-alternate code{background-color:#cddff8;text-shadow:none}.bpk-content-container--bare-html-alternate pre{background-color:transparent;box-shadow:0 0 0 1px #b2b2bf inset}.bpk-content-container--bare-html-alternate pre>code{display:block;margin:0;padding:0;background-color:transparent;white-space:inherit;overflow:auto;-ms-overflow-style:none}.bpk-content-container--bare-html-alternate pre>code::-webkit-scrollbar{display:none}.bpk-content-container--bare-html-alternate table{box-shadow:0 0 0 1px #b2b2bf }.bpk-content-container--bare-html-alternate table th{background-color:#fff;text-align:left;font-weight:700}html[dir='rtl'] .bpk-content-container--bare-html-alternate table th{text-align:right}

package/bpk-component-content-container/src/BpkContentContainer.module.scss

@@ -1,41 +0,0 @@
-/*
- * 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 '~bpk-mixins/index.scss';
-
-.bpk-content-container {
-  > {
-    @include bpk-content-container;
-
-    .bpk-content-container {
-      margin-bottom: $bpk-spacing-sm;
-    }
-
-    *:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &--bare-html {
-    @include bpk-content-container--bare-html;
-  }
-
-  &--bare-html-alternate {
-    @include bpk-content-container--bare-html-alternate;
-  }
-}