@skyscanner/backpack-web 31.10.0 → 32.0.0

package/unstable__bpk-mixins/_icons.scss

@@ -0,0 +1,88 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use 'tokens.scss';
+@use 'utils.scss';
+
+////
+/// @group svgs
+////
+
+/// Button alignment utility.
+///
+/// @access private
+
+@mixin _bpk-svg--align-to-button() {
+  vertical-align: text-bottom;
+}
+
+/// Large button alignment utility.
+///
+/// @access private
+
+@mixin _bpk-svg--align-to-large-button() {
+  margin-top: (tokens.$bpk-private-button-line-height - tokens.$bpk-icon-size-lg) * 0.5;
+  vertical-align: top;
+}
+
+/// Align to button. Modifies the bpk-icon-sm mixin.
+///
+/// @require {mixin} bpk-icon-sm
+///
+/// @example scss
+///   .selector {
+///     @include bpk-icon-sm(flight-sky-gray-tint-02);
+///     @include bpk-icon-sm--align-to-button();
+///   }
+
+@mixin bpk-icon-sm--align-to-button() {
+  @include _bpk-svg--align-to-button;
+}
+
+/// Align to large button. Modifies the bpk-icon-lg mixin.
+///
+/// @require {mixin} bpk-icon-lg
+///
+/// @example scss
+///   .selector {
+///     @include bpk-icon-lg(flight-sky-gray-tint-02);
+///     @include bpk-icon-lg--align-to-large-button();
+///   }
+
+@mixin bpk-icon-lg--align-to-large-button() {
+  @include _bpk-svg--align-to-large-button;
+}
+
+/// RTL support. Modifies the bpk-icon-sm or bpk-icon-lg mixin.
+///
+/// @require {mixin} bpk-icon-sm
+/// @require {mixin} bpk-icon-lg
+///
+/// @example scss
+///   .selector {
+///     @include bpk-icon-sm(flight-sky-gray-tint-02);
+///     @include bpk-icon--rtl-support();
+///   }
+
+@mixin bpk-icon--rtl-support() {
+  @include utils.bpk-rtl {
+    transform: scaleX(-1);
+  }
+}

package/{bpk-mixins/sass-functions.js → unstable__bpk-mixins/_index.scss}

@@ -16,14 +16,23 @@
  * limitations under the License.
  */
 
-// We disable eslint here as this package is listed as a peerDep so consumers are required to install this when using this package.
- 
-const nodeSass = require('node-sass');
+@forward 'tokens';
+@forward 'badges';
+@forward 'borders';
+@forward 'breakpoints';
+@forward 'buttons';
+@forward 'cards';
+@forward 'chips';
+@forward 'forms';
+@forward 'icons';
+@forward 'layers';
+@forward 'margins';
+@forward 'panels';
+@forward 'radii';
+@forward 'scroll-indicators';
+@forward 'shadows';
+@forward 'spinners';
+@forward 'typography';
+@forward 'utils';
 
-module.exports = {
-  'encodebase64($string)': (str) => {
-    const buffer = Buffer.from(str.getValue());
-
-    return nodeSass.types.String(buffer.toString('base64'));
-  },
-};
+@warn "You're using blank import of all mixins. This might affect performance of your build tool and your bundle size. \nConsider switching to more granular imports, e.g. @use '@skyscanner/backpack-web/bpk-mixins/buttons'";

package/unstable__bpk-mixins/_layers.scss

@@ -0,0 +1,199 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use 'tokens.scss';
+@use 'radii.scss';
+@use 'shadows.scss';
+@use 'utils.scss';
+
+////
+/// @group layers
+////
+
+/// Layer base styles.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-layer;
+///   }
+
+@mixin bpk-layer(
+  $background-color: tokens.$bpk-color-white,
+  $border-color: tokens.$bpk-surface-highlight-day
+) {
+  border: tokens.$bpk-one-pixel-rem solid $border-color;
+  background-color: $background-color;
+
+  @include radii.bpk-border-radius-sm;
+  @include shadows.bpk-box-shadow-lg;
+}
+
+/// Layer arrow base styles.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-layer-arrow(1rem);
+///   }
+
+@mixin bpk-layer-arrow($arrow-size) {
+  position: absolute;
+  pointer-events: none;
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: '';
+    display: block;
+  }
+
+  &::before {
+    border: ($arrow-size + tokens.$bpk-one-pixel-rem) solid transparent;
+  }
+
+  &::after {
+    border: $arrow-size solid transparent;
+  }
+}
+
+/// Layer top arrow.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-layer-arrow(1rem);
+///     @include bpk-layer-arrow-top(1rem);
+///   }
+
+@mixin bpk-layer-arrow-top(
+  $arrow-size,
+  $arrow-color: tokens.$bpk-color-white,
+  $border-color: tokens.$bpk-color-sky-gray-tint-06
+) {
+  bottom: 100%;
+  width: ($arrow-size * 2);
+  height: $arrow-size;
+
+  &::before {
+    top: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem);
+    margin-left: -1 * tokens.$bpk-one-pixel-rem;
+    border-bottom-color: $border-color;
+
+    @include utils.bpk-rtl {
+      margin-right: -1 * tokens.$bpk-one-pixel-rem;
+      margin-left: 0;
+    }
+  }
+
+  &::after {
+    top: -1 * $arrow-size + tokens.$bpk-one-pixel-rem;
+    border-bottom-color: $arrow-color;
+  }
+}
+
+/// Layer right arrow.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-layer-arrow(1rem);
+///     @include bpk-layer-arrow-right(1rem);
+///   }
+
+@mixin bpk-layer-arrow-right(
+  $arrow-size,
+  $arrow-color: tokens.$bpk-color-white,
+  $border-color: tokens.$bpk-color-sky-gray-tint-06
+) {
+  left: 100%;
+  width: $arrow-size;
+  height: ($arrow-size * 2);
+
+  &::before {
+    right: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem);
+    margin-top: -1 * tokens.$bpk-one-pixel-rem;
+    border-left-color: $border-color;
+  }
+
+  &::after {
+    right: -1 * $arrow-size + tokens.$bpk-one-pixel-rem;
+    border-left-color: $arrow-color;
+  }
+}
+
+/// Layer bottom arrow.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-layer-arrow(1rem);
+///     @include bpk-layer-arrow-bottom(1rem);
+///   }
+
+@mixin bpk-layer-arrow-bottom(
+  $arrow-size,
+  $arrow-color: tokens.$bpk-color-white,
+  $border-color: tokens.$bpk-color-sky-gray-tint-06
+) {
+  top: 100%;
+  width: ($arrow-size * 2);
+  height: $arrow-size;
+
+  &::before {
+    bottom: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem);
+    margin-left: -1 * tokens.$bpk-one-pixel-rem;
+    border-top-color: $border-color;
+
+    @include utils.bpk-rtl {
+      margin-right: -1 * tokens.$bpk-one-pixel-rem;
+      margin-left: 0;
+    }
+  }
+
+  &::after {
+    bottom: -1 * $arrow-size + tokens.$bpk-one-pixel-rem;
+    border-top-color: $arrow-color;
+  }
+}
+
+/// Layer left arrow.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-layer-arrow(1rem);
+///     @include bpk-layer-arrow-left(1rem);
+///   }
+
+@mixin bpk-layer-arrow-left(
+  $arrow-size,
+  $arrow-color: tokens.$bpk-color-white,
+  $border-color: tokens.$bpk-color-sky-gray-tint-06
+) {
+  right: 100%;
+  width: $arrow-size;
+  height: ($arrow-size * 2);
+
+  &::before {
+    left: -1 * ($arrow-size + tokens.$bpk-one-pixel-rem);
+    margin-top: -1 * tokens.$bpk-one-pixel-rem;
+    border-right-color: $border-color;
+  }
+
+  &::after {
+    left: -1 * $arrow-size + tokens.$bpk-one-pixel-rem;
+    border-right-color: $arrow-color;
+  }
+}

package/unstable__bpk-mixins/_margins.scss

@@ -0,0 +1,75 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use 'utils.scss';
+
+/// RTL aware leading margin
+///
+/// @param {string} $margin The desired leading margin.
+/// @param {boolean} $resetOppositeMargin [true] Whether to reset the opposite margin to 0.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-margin-leading(bpk-spacing-base());
+///   }
+@mixin bpk-margin-leading($margin, $resetOppositeMargin: true) {
+  margin-left: $margin;
+
+  @if $resetOppositeMargin {
+    margin-right: 0;
+  }
+
+  @include utils.bpk-rtl {
+    @if $resetOppositeMargin {
+      margin-left: 0;
+    }
+
+    margin-right: $margin;
+  }
+}
+
+/// RTL aware trailing margin
+///
+/// @param {string} $margin The desired trailing margin.
+/// @param {boolean} $resetOppositeMargin [true] Whether to reset the opposite margin to 0.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-margin-trailing(bpk-spacing-base());
+///   }
+@mixin bpk-margin-trailing($margin, $resetOppositeMargin: true) {
+  @if $resetOppositeMargin {
+    margin-left: 0;
+  }
+
+  margin-right: $margin;
+
+  @include utils.bpk-rtl {
+    margin-left: $margin;
+
+    @if $resetOppositeMargin {
+      margin-right: 0;
+    }
+  }
+}

package/unstable__bpk-mixins/_panels.scss

@@ -0,0 +1,71 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use 'tokens.scss';
+@use 'borders.scss';
+@use 'radii.scss';
+
+////
+/// @group panels
+////
+
+/// Basic panel.
+///
+/// @example scss
+///   .selector {
+///     @include @bpk-panel()
+///   }
+@mixin bpk-panel {
+  display: block;
+  background-color: tokens.$bpk-card-background-color;
+
+  @include borders.bpk-border-sm(tokens.$bpk-panel-border-color);
+  @include radii.bpk-border-radius-md;
+}
+
+/// Adds padding to panels. Modifies the bpk-panel mixin.
+///
+/// @require {mixin} bpk-panel
+///
+/// @example scss
+///   .selector {
+///     @include bpk-panel();
+///     @include bpk-panel--padded();
+///   }
+@mixin bpk-panel--padded {
+  padding: tokens.$bpk-card-padding;
+}
+
+/// Makes panel full width by removing left and right border.
+/// Modifies the bpk-panel mixin.
+///
+/// @require {mixin} bpk-panel
+///
+/// @example scss
+///   .selector {
+///     @include bpk-panel();
+///     @include bpk-panel--full-width();
+///   }
+@mixin bpk-panel--full-width {
+  border-radius: 0;
+  box-shadow:
+    tokens.$bpk-panel-border-color 0 -1 * tokens.$bpk-one-pixel-rem 0 0 inset,
+    tokens.$bpk-panel-border-color 0 tokens.$bpk-one-pixel-rem 0 0 inset;
+}

package/unstable__bpk-mixins/_radii.scss

@@ -0,0 +1,80 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use 'tokens.scss';
+
+////
+/// @group radii
+////
+
+/// Extra small border radius.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-radius-xs();
+///   }
+
+@mixin bpk-border-radius-xs {
+  border-radius: tokens.$bpk-border-radius-xs;
+}
+
+/// Small border radius.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-radius-sm();
+///   }
+
+@mixin bpk-border-radius-sm {
+  border-radius: tokens.$bpk-border-radius-sm;
+}
+
+/// Medium border radius.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-radius-md();
+///   }
+
+@mixin bpk-border-radius-md {
+  border-radius: tokens.$bpk-border-radius-md;
+}
+
+/// Large border radius.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-radius-lg();
+///   }
+
+@mixin bpk-border-radius-lg {
+  border-radius: tokens.$bpk-border-radius-lg;
+}
+
+/// Extra large border radius.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-border-radius-xl();
+///   }
+
+@mixin bpk-border-radius-xl {
+  border-radius: tokens.$bpk-border-radius-xl;
+}

package/unstable__bpk-mixins/_scroll-indicators.scss

@@ -0,0 +1,79 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use 'tokens.scss';
+
+////
+/// @group scroll-indicator
+////
+
+/// Scroll indicator utility.
+///
+/// @access private
+
+@mixin _bpk-scroll-indicator($gradient-color, $direction: 'left') {
+  $gradient-direction: if($direction == 'left', 90deg, 270deg);
+
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  content: ' ';
+  display: block;
+  z-index: 1;
+  width: tokens.bpk-spacing-xl();
+  background-image: linear-gradient(
+    $gradient-direction,
+    rgba($gradient-color, 1),
+    rgba($gradient-color, 0)
+  );
+  pointer-events: none;
+
+  @if $direction == 'left' {
+    left: 0;
+  } @else {
+    right: 0;
+  }
+}
+
+/// Left-sided scroll indicator.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-scroll-indicator-left($bpk-color-grey-100);
+///   }
+
+@mixin bpk-scroll-indicator-left($gradient-color) {
+  &::before {
+    @include _bpk-scroll-indicator($gradient-color, 'left');
+  }
+}
+
+/// Right-sided scroll indicator.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-scroll-indicator-right($bpk-color-grey-100);
+///   }
+
+@mixin bpk-scroll-indicator-right($gradient-color) {
+  &::after {
+    @include _bpk-scroll-indicator($gradient-color, 'right');
+  }
+}

package/unstable__bpk-mixins/_shadows.scss

@@ -0,0 +1,58 @@
+/*
+ * 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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use 'tokens.scss';
+
+////
+/// @group box-shadows
+////
+
+/// Small box shadow.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-box-shadow-sm();
+///   }
+
+@mixin bpk-box-shadow-sm {
+  box-shadow: tokens.$bpk-box-shadow-sm;
+}
+
+/// Large box shadow.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-box-shadow-lg();
+///   }
+
+@mixin bpk-box-shadow-lg {
+  box-shadow: tokens.$bpk-box-shadow-lg;
+}
+
+/// Extra large box shadow.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-box-shadow-xl();
+///   }
+
+@mixin bpk-box-shadow-xl {
+  box-shadow: tokens.$bpk-box-shadow-xl;
+}