@skyscanner/backpack-web 33.5.0 → 33.6.0

package/bpk-component-chip/src/BpkDismissibleChip.js

@@ -21,6 +21,8 @@ The dismissible chip component is just a selectable chip that's
 been hard coded to have disabled={false}, selected and a trailing
 accessory view of a close icon.
 */
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { chipColors } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CloseCircleIconSm from "../../bpk-component-icon/sm/close-circle";
@@ -36,23 +38,18 @@ const BpkDismissibleChip = ({
   type = CHIP_TYPES.default,
   ...rest
 }) => {
-  const iconClassNames = getClassName(`bpk-chip--${type}-dismissible__trailing-accessory-view`);
   const classNames = getClassName(`bpk-chip--${type}-dismissible`, className);
   return /*#__PURE__*/_jsx(BpkSelectableChip, {
     ...rest,
     leadingAccessoryView: leadingAccessoryView,
     disabled: false,
-    trailingAccessoryView: /*#__PURE__*/_jsx(CloseCircleIconSm
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    , {
-      className: iconClassNames
+    dismissible: true,
+    trailingAccessoryView: /*#__PURE__*/_jsx(CloseCircleIconSm, {
+      fill: type === CHIP_TYPES.default || type === CHIP_TYPES.onImage ? chipColors.privateChipOnDarkOnDismissIconNight : chipColors.privateChipOnDarkOnDismissIconDay
     }),
     selected: true,
     type: type,
     role: "button" // Override role="checkbox" because this chip is not selectable.
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
     ,
     className: classNames
   });

package/bpk-component-chip/src/BpkSelectableChip.js

@@ -27,6 +27,7 @@ const BpkSelectableChip = ({
   children,
   className,
   disabled = false,
+  dismissible = false,
   leadingAccessoryView = null,
   role = 'checkbox',
   selected = false,
@@ -34,7 +35,7 @@ const BpkSelectableChip = ({
   type = CHIP_TYPES.default,
   ...rest
 }) => {
-  const classNames = getClassName('bpk-chip', `bpk-chip--${type}`, disabled && 'bpk-chip--disabled', disabled && `bpk-chip--${type}-disabled`, !children && 'bpk-chip--icon-only', !disabled && selected && `bpk-chip--${type}-selected`, className);
+  const classNames = getClassName('bpk-chip', `bpk-chip--${type}`, disabled && 'bpk-chip--disabled', disabled && `bpk-chip--${type}-disabled`, !children && 'bpk-chip--icon-only', !disabled && selected && `bpk-chip--${type}-selected`, dismissible && `bpk-chip--${type}-dismissible`, className);
   return /*#__PURE__*/_jsxs("button", {
     "aria-checked": role === 'button' || role === 'tab' ? undefined : selected,
     className: classNames,

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

@@ -23,10 +23,7 @@ import BpkInput, { withOpenEvents } from "../../bpk-component-input";
 import BpkModal from "../../bpk-component-modal";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkPopover from "../../bpk-component-popover";
-import { cssModules } from "../../bpk-react-utils";
-import STYLES from "./BpkDatepicker.module.css";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
 const Input = withOpenEvents(BpkInput);
 const DefaultCalendar = withCalendarState(composeCalendar(BpkCalendarNav, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate));
 class BpkDatepicker extends Component {
@@ -192,7 +189,6 @@ class BpkDatepicker extends Component {
     delete rest.onOpenChange;
     delete rest.isOpen;
     const input = inputComponent || /*#__PURE__*/_jsx("div", {
-      className: getClassName('bpk-datepicker__input'),
       ref: this.inputRef,
       children: /*#__PURE__*/_jsx(Input, {
         id: id,
@@ -210,7 +206,6 @@ class BpkDatepicker extends Component {
     });
     const calendarProps = {
       id: `${id}-calendar`,
-      className: getClassName('bpk-datepicker__calendar'),
       changeMonthLabel,
       dateModifiers,
       daysOfWeek,

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-height:0;padding:0;color:#fff;margin-inline-start:auto;word-break:keep-all}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}
+.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-height:0;padding:0;color:#fff;margin-inline-start:auto;word-break:keep-all}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}

package/bpk-component-map/src/BpkMap.js

@@ -84,7 +84,8 @@ const BpkMap = props => {
       rotateControl: false,
       clickableIcons: false,
       // https://developers.google.com/maps/documentation/javascript/reference/map#MapTypeStyle
-      styles: mapOptionStyles
+      styles: mapOptionStyles,
+      scaleControl: true
     },
     onDragEnd: () => {
       if (ref && ref.current && onRegionChange) {

package/bpk-component-phone-input/src/BpkPhoneInput.js

@@ -84,14 +84,13 @@ const BpkPhoneInput = props => {
     ...wrapperProps,
     className: getClassName('bpk-phone-input', wrapperProps.className),
     children: [/*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx(BpkLabel, {
-        htmlFor: dialingCodeProps.id,
-        disabled: disabled
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
+      children: [/*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-phone-input__label'),
-        children: dialingCodeProps.label
+        children: /*#__PURE__*/_jsx(BpkLabel, {
+          htmlFor: dialingCodeProps.id,
+          disabled: disabled,
+          children: dialingCodeProps.label
+        })
       }), /*#__PURE__*/_jsx(BpkSelect, {
         ...commonProps,
         ...dialingCodeProps,
@@ -116,14 +115,13 @@ const BpkPhoneInput = props => {
       })]
     }), /*#__PURE__*/_jsxs("div", {
       className: getClassName('bpk-phone-input__phone-number'),
-      children: [/*#__PURE__*/_jsx(BpkLabel, {
-        htmlFor: id,
-        disabled: disabled
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
+      children: [/*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-phone-input__label'),
-        children: label
+        children: /*#__PURE__*/_jsx(BpkLabel, {
+          htmlFor: id,
+          disabled: disabled,
+          children: label
+        })
       }), /*#__PURE__*/_jsx(BpkInput, {
         ...commonProps,
         ...rest,

package/bpk-component-spinner/src/BpkSpinner.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-spinner{width:1rem;height:1rem;animation:bpk-keyframe-spin 600ms linear infinite}.bpk-spinner--primary{fill:#0062e3;fill:var(--bpk-spinner-primary-color, rgb(0, 98, 227))}.bpk-spinner--light{fill:#fff}.bpk-spinner--dark{fill:#161616}.bpk-spinner--large{width:1.5rem;height:1.5rem}.bpk-spinner--extra-large{width:2rem;height:2rem}.bpk-spinner--align-to-button{vertical-align:baseline}.bpk-spinner--align-to-large-button{margin-top:0rem;vertical-align:top}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-spinner{display:block;width:1rem;height:1rem;animation:bpk-keyframe-spin 600ms linear infinite}.bpk-spinner--primary{fill:#0062e3;fill:var(--bpk-spinner-primary-color, rgb(0, 98, 227))}.bpk-spinner--light{fill:#fff}.bpk-spinner--dark{fill:#161616}.bpk-spinner--large{width:1.5rem;height:1.5rem}.bpk-spinner--extra-large{width:2rem;height:2rem}.bpk-spinner--align-to-button{vertical-align:baseline}.bpk-spinner--align-to-large-button{margin-top:0rem;vertical-align:top}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "33.5.0",
+  "version": "33.6.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",

package/bpk-component-datepicker/src/BpkDatepicker.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.
- */
-.bpk-datepicker__calendar{margin:0 auto}.bpk-datepicker__input{display:inline-block;width:100%}