@skyscanner/backpack-web 30.2.0 → 31.0.0

package/bpk-component-badge/index.d.ts

@@ -18,7 +18,7 @@
 
 import component, { BADGE_TYPES, type Props } from './src/BpkBadge';
 import themeAttributes from './src/themeAttributes';
-
+import BpkBadgeV2 from './src/BpkBadgeV2/BpkBadge';
 export type BpkBadgeProps = Props;
 export default component;
-export { BADGE_TYPES, themeAttributes };
+export { BADGE_TYPES, themeAttributes, BpkBadgeV2 };

package/bpk-component-badge/index.js

@@ -18,5 +18,7 @@
 
 import component, { BADGE_TYPES } from "./src/BpkBadge";
 import themeAttributes from "./src/themeAttributes";
+import BpkBadgeV2 from "./src/BpkBadgeV2/BpkBadge";
+;
 export default component;
-export { BADGE_TYPES, themeAttributes };
+export { BADGE_TYPES, themeAttributes, BpkBadgeV2 };

package/bpk-component-badge/src/BpkBadgeV2/BpkBadge.d.ts

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+/// <reference types="react" />
+import type { Props } from '../BpkBadge';
+declare const BpkBadgeV2: ({ centered, className, docked, type, ...rest }: Props) => JSX.Element;
+export default BpkBadgeV2;

package/bpk-component-badge/src/BpkBadgeV2/BpkBadge.js

@@ -0,0 +1,47 @@
+/*
+ * 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 { cssModules } from "../../../bpk-react-utils";
+import { BADGE_TYPES } from "../BpkBadge";
+import STYLES from "./BpkBadge.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const badgeTypeClassNames = {
+  [BADGE_TYPES.warning]: getClassName('bpk-badge--warning'),
+  [BADGE_TYPES.success]: getClassName('bpk-badge--success'),
+  [BADGE_TYPES.critical]: getClassName('bpk-badge--critical'),
+  [BADGE_TYPES.normal]: getClassName('bpk-badge--normal'),
+  [BADGE_TYPES.inverse]: getClassName('bpk-badge--inverse'),
+  [BADGE_TYPES.outline]: getClassName('bpk-badge--outline'),
+  [BADGE_TYPES.strong]: getClassName('bpk-badge--strong'),
+  [BADGE_TYPES.brand]: getClassName('bpk-badge--brand')
+};
+const BpkBadgeV2 = ({
+  centered = false,
+  className = null,
+  docked = null,
+  type = BADGE_TYPES.normal,
+  ...rest
+}) => {
+  const classNames = getClassName('bpk-badge', badgeTypeClassNames[type], docked === 'right' && 'bpk-badge--docked-right', docked === 'left' && 'bpk-badge--docked-left', centered && 'bpk-badge--centered', className);
+  return /*#__PURE__*/_jsx("span", {
+    className: classNames,
+    ...rest
+  });
+};
+export default BpkBadgeV2;

package/bpk-component-badge/src/BpkBadgeV2/BpkBadge.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.
+*/
+.bpk-badge{display:inline-flex;padding:0.25rem 0.5rem;align-items:center;border-radius:.25rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir='rtl'] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir='rtl'] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--warning{background-color:#eff1f2;color:#161616;fill:#f55d42}.bpk-badge--success{background-color:#eff1f2;color:#161616;fill:#0c838a}.bpk-badge--critical{background-color:#eff1f2;color:#161616;fill:#e70866}.bpk-badge--normal{background-color:#eff1f2;color:#161616;fill:#161616}.bpk-badge--inverse{background-color:#fff;color:#161616;fill:#161616}.bpk-badge--outline{background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff;fill:#fff}.bpk-badge--strong{background-color:#05203c;color:#fff;fill:#fff}.bpk-badge--brand{background-color:#0062e3;color:#fff;fill:#fff}

package/bpk-mixins/src/mixins/_badges-v2.scss

@@ -0,0 +1,238 @@
+/*
+ * 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 '../bonds.scss';
+@import 'typography.scss';
+@import 'radii.scss';
+@import 'utils.scss';
+
+////
+/// @group badges
+////
+
+/// Standard badge.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///   }
+
+@mixin bpk-badge {
+  display: inline-flex;
+  padding: bpk-spacing-sm() bpk-spacing-md();
+  align-items: center;
+
+  @include bpk-border-radius-xs;
+  @include bpk-text;
+  @include bpk-footnote;
+}
+
+/// Centered badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--centered();
+///   }
+
+@mixin bpk-badge--centered {
+  vertical-align: text-bottom;
+}
+
+/// Right-docked badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--docked-right();
+///   }
+
+@mixin bpk-badge--docked-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  @include bpk-rtl {
+    right: inherit;
+    left: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: $bpk-border-radius-xs;
+  }
+}
+
+/// Left-docked badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--docked-left();
+///   }
+
+@mixin bpk-badge--docked-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 0;
+
+  @include bpk-rtl {
+    right: 0;
+    left: inherit;
+    border-bottom-left-radius: $bpk-border-radius-xs;
+    border-bottom-right-radius: 0;
+  }
+}
+
+/// Normal badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--normal();
+///   }
+
+@mixin bpk-badge--normal {
+  background-color: $bpk-private-badge-background-normal-day;
+  color: $bpk-text-primary-day;
+  fill: $bpk-text-primary-day;
+}
+
+/// Warning badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--warning();
+///   }
+
+@mixin bpk-badge--warning {
+  background-color: $bpk-private-badge-background-normal-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-status-warning-spot-day;
+}
+
+/// Success badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--success();
+///   }
+
+@mixin bpk-badge--success {
+  background-color: $bpk-private-badge-background-normal-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-status-success-spot-day;
+}
+
+/// Critical badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--critical();
+///   }
+
+@mixin bpk-badge--critical {
+  background-color: $bpk-private-badge-background-normal-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-status-danger-spot-day;
+}
+
+/// Inverse badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--inverse();
+///   }
+
+@mixin bpk-badge--inverse {
+  background-color: $bpk-surface-default-day;
+  color: $bpk-text-primary-day;
+  fill: $bpk-text-primary-day;
+}
+
+/// Outline badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--outline();
+///   }
+
+@mixin bpk-badge--outline {
+  background-color: transparent;
+  color: $bpk-text-on-dark-day;
+  box-shadow: inset 0 0 0 $bpk-border-size-sm $bpk-text-on-dark-day;
+  fill: $bpk-text-on-dark-day;
+}
+
+/// Strong badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--strong();
+///   }
+
+@mixin bpk-badge--strong {
+  background-color: $bpk-core-primary-day;
+  color: $bpk-text-on-dark-day;
+  fill: $bpk-text-on-dark-day;
+}
+
+/// Brand badge. Modifies the bpk-badge mixin.
+///
+/// @require {mixin} bpk-badge
+///
+/// @example scss
+///   .selector {
+///     @include bpk-badge();
+///     @include bpk-badge--brand();
+///   }
+
+@mixin bpk-badge--brand {
+  background-color: $bpk-core-accent-day;
+  color: $bpk-text-primary-inverse-day;
+  fill: $bpk-text-primary-inverse-day;
+}

package/bpk-mixins/src/mixins/_svgs.scss

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-@import '~@skyscanner/bpk-svgs/index.scss';
 @import '../bonds.scss';
 @import './utils.scss';
 
@@ -30,34 +29,6 @@
 /// @group svgs
 ////
 
-/// Icon factory.
-///
-/// @param {variable} $spacing
-/// @param {key} $icon
-///
-/// @access private
-
-@mixin _bpk-icon-factory($map, $size, $icon) {
-  @if map_has_key($map, $icon) != true {
-    $err: (
-      'Could not find "' +
-        $icon +
-        '" icon. Refer to ' +
-        'https://skyscanner.design/latest/components/icon/overview.html' +
-        ' for the list of supported icons.'
-    );
-
-    @error $err;
-  }
-
-  content: '';
-  display: inline-block;
-  width: $size;
-  height: $size;
-  background: url(map-get($map, $icon)) no-repeat;
-  background-size: cover;
-}
-
 /// Button alignment utility.
 ///
 /// @access private
@@ -75,70 +46,6 @@
   vertical-align: top;
 }
 
-/// Icon.
-///
-/// > **Note:** You will need to pass the sassFunction `encodebase64` to your node-sass process to use this mixin:
-/// >
-/// > ```js
-/// > var sass = require('node-sass');
-/// > var sassFunctions = require('bpk-mixins/sass-functions');
-/// > ...
-/// > sass.render({
-/// >   file: 'mysassfile.scss',
-/// >   functions: sassFunctions,
-/// > });
-/// > ```
-///
-/// @param {key} $icon
-/// @param {variable} $color
-/// @param {key} $size
-///
-/// @example scss
-///   .selector {
-///     @include bpk-icon(flight, $bpk-color-sky-gray-tint-02, large);
-///   }
-
-@mixin bpk-icon($icon, $color, $size: small) {
-  @if function-exists(encodebase64) != true {
-    $err: (
-      'Could not find encodebase64 function. Refer to ' +
-        'https://backpack.github.io/sassdoc/#svgs-mixin-bpk-icon' +
-        ' on how to provide it to node-sass.'
-    );
-
-    @error $err;
-  }
-
-  $icon-map: if($size == large, $bpk-icons-no-color-lg, $bpk-icons-no-color-sm);
-
-  @if map_has_key($icon-map, $icon) != true {
-    $err: (
-      'Could not find "' +
-        $icon +
-        '" icon. Refer to' +
-        'https://skyscanner.design/latest/components/icon/overview.html' +
-        ' for the list of supported icons.'
-    );
-
-    @error $err;
-  }
-
-  $icon-size: if($size == large, $bpk-icon-size-lg, $bpk-icon-size-sm);
-
-  /* Disabling rule here as this method is for newer sass versions that we don't yet support */
-  /* stylelint-disable-next-line scss/no-global-function-names */
-  $raw-svg: map-get($icon-map, $icon);
-  $svg-string: str-replace($raw-svg, '$$COLOR$$', $color);
-  $datauri: 'data:image/svg+xml;base64,' + encodebase64($svg-string);
-
-  content: '';
-  display: inline-block;
-  width: $icon-size;
-  height: $icon-size;
-  background: url($datauri) no-repeat;
-  background-size: cover;
-}
-
 /// Align to button. Modifies the bpk-icon-sm mixin.
 ///
 /// @require {mixin} bpk-icon-sm

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "30.2.0",
+  "version": "31.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,8 +24,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^17.2.0",
-    "@skyscanner/bpk-svgs": "^18.1.2",
+    "@skyscanner/bpk-foundations-web": "^17.4.0",
+    "@skyscanner/bpk-svgs": "^19.0.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",