@skyscanner/backpack-web 25.8.4 → 26.0.0-beta.1

package/{bpk-storybook-utils/src/BpkStorybookUtils.js → bpk-mixins/sass-functions.js}

@@ -15,17 +15,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable global-require, no-console, import/no-mutable-exports */
-let action = (...args) => () => console.info(args);
-try {
-  const storybookAction = require('@storybook/addon-actions').action;
-  if (storybookAction) {
-    action = storybookAction;
-  }
-} catch (e) {
-  console.info('Storybook action is not available. Falling back to `console.log`.');
-}
-export default {
-  action
+
+// We disable eslint here as this package is listed as a peerDep so consumers are required to install this when using this package.
+// eslint-disable-next-line import/no-unresolved
+const nodeSass = require('node-sass');
+
+module.exports = {
+  'encodebase64($string)': (str) => {
+    const buffer = Buffer.from(str.getValue());
+
+    return nodeSass.types.String(buffer.toString('base64'));
+  },
 };
-export { action };

package/{bpk-storybook-utils/index.js → bpk-mixins/src/_bonds.scss}

@@ -14,10 +14,6 @@
  * 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 { action } from "./src/BpkStorybookUtils";
-import BpkDarkExampleWrapper from "./src/BpkDarkExampleWrapper";
-export default {
-  action,
-  BpkDarkExampleWrapper
-};
-export { action, BpkDarkExampleWrapper };
+ */
+
+@import '~@skyscanner/bpk-foundations-web/tokens/base.default';

package/bpk-mixins/src/mixins/_badges.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';
+
+$bpk-spacing-v2: true;
+
+////
+/// @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-caption;
+}
+
+/// 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-surface-highlight-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-status-warning-fill-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-text-on-light-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-status-success-fill-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-text-on-light-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-status-danger-fill-day;
+  color: $bpk-text-on-light-day;
+  fill: $bpk-text-on-light-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/_borders.scss

@@ -0,0 +1,266 @@
+/*
+ * 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';
+
+////
+/// @group borders
+////
+
+/// Full border utility.
+///
+/// @access private
+
+@mixin _bpk-border($size, $color, $inset) {
+  box-shadow: 0 0 0 $size $color #{$inset};
+}
+
+/// Top border utility.
+///
+/// @access private
+
+@mixin _bpk-border-top($size, $color, $inset) {
+  $offset-y: if($inset == inset, $size, -#{$size});
+
+  box-shadow: 0 $offset-y 0 0 $color #{$inset};
+}
+
+/// Right border utility.
+///
+/// @access private
+
+@mixin _bpk-border-right($size, $color, $inset) {
+  $offset-x: if($inset == inset, -#{$size}, $size);
+
+  box-shadow: $offset-x 0 0 0 $color #{$inset};
+}
+
+/// Bottom border utility.
+///
+/// @access private
+
+@mixin _bpk-border-bottom($size, $color, $inset) {
+  $offset-y: if($inset == inset, -#{$size}, $size);
+
+  box-shadow: 0 $offset-y 0 0 $color #{$inset};
+}
+
+/// Left border utility.
+///
+/// @access private
+
+@mixin _bpk-border-left($size, $color, $inset) {
+  $offset-x: if($inset == inset, $size, -#{$size});
+
+  box-shadow: $offset-x 0 0 0 $color #{$inset};
+}
+
+/// Small "1px" border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-sm($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-sm($color, $inset: inset) {
+  @include _bpk-border($bpk-border-size-sm, $color, $inset);
+}
+
+/// Small "1px" top border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-top-sm($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-top-sm($color, $inset: inset) {
+  @include _bpk-border-top($bpk-border-size-sm, $color, $inset);
+}
+
+/// Small "1px" right border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-right-sm($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-right-sm($color, $inset: inset) {
+  @include _bpk-border-right($bpk-border-size-sm, $color, $inset);
+}
+
+/// Small "1px" bottom border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-bottom-sm($color, $inset: inset) {
+  @include _bpk-border-bottom($bpk-border-size-sm, $color, $inset);
+}
+
+/// Small "1px" left border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-left-sm($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-left-sm($color, $inset: inset) {
+  @include _bpk-border-left($bpk-border-size-sm, $color, $inset);
+}
+
+/// Large "2px" border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-lg($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-lg($color, $inset: inset) {
+  @include _bpk-border($bpk-border-size-lg, $color, $inset);
+}
+
+/// Large "2px" top border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-top-lg($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-top-lg($color, $inset: inset) {
+  @include _bpk-border-top($bpk-border-size-lg, $color, $inset);
+}
+
+/// Large "2px" right border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-right-lg($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-right-lg($color, $inset: inset) {
+  @include _bpk-border-right($bpk-border-size-lg, $color, $inset);
+}
+
+/// Large "2px" bottom border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-bottom-lg($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-bottom-lg($color, $inset: inset) {
+  @include _bpk-border-bottom($bpk-border-size-lg, $color, $inset);
+}
+
+/// Large "2px" left border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-left-lg($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-left-lg($color, $inset: inset) {
+  @include _bpk-border-left($bpk-border-size-lg, $color, $inset);
+}
+
+/// Extra large "3px" border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-xl($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-xl($color, $inset: inset) {
+  @include _bpk-border($bpk-border-size-xl, $color, $inset);
+}
+
+/// Extra large "3px" top border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-top-xl($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-top-xl($color, $inset: inset) {
+  @include _bpk-border-top($bpk-border-size-xl, $color, $inset);
+}
+
+/// Extra large "3px" right border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-right-xl($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-right-xl($color, $inset: inset) {
+  @include _bpk-border-right($bpk-border-size-xl, $color, $inset);
+}
+
+/// Extra large "3px" bottom border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-bottom-xl($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-bottom-xl($color, $inset: inset) {
+  @include _bpk-border-bottom($bpk-border-size-xl, $color, $inset);
+}
+
+/// Extra large "3px" left border.
+///
+/// Applied using box-shadow which preserves vertical rhythm on elements without a fixed height.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-left-xl($bpk-color-sky-gray-tint-06);
+///   }
+
+@mixin bpk-border-left-xl($color, $inset: inset) {
+  @include _bpk-border-left($bpk-border-size-xl, $color, $inset);
+}