@skyscanner/backpack-web 31.10.1 → 32.0.0

package/unstable__bpk-mixins/_utils.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.
+ */
+
+/* stylelint-disable at-rule-disallowed-list */
+
+@use "sass:string";
+@use 'tokens.scss';
+
+////
+/// @group utils
+////
+
+/// Standard focus indicator for elements.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-focus-indicator();
+///   }
+
+@mixin bpk-focus-indicator {
+  outline: (tokens.$bpk-one-pixel-rem * 2) solid tokens.$bpk-text-link-day;
+  outline-offset: (tokens.$bpk-one-pixel-rem * 2);
+}
+
+/// Hide visually and from screen readers.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-hidden();
+///   }
+
+@mixin bpk-hidden {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
+/// Hide only visually, but have it available for screen readers:
+///
+/// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+///
+/// @example scss
+///   .selector {
+///     @include bpk-visually-hidden();
+///   }
+
+@mixin bpk-visually-hidden {
+  position: absolute;
+  width: 1px; /* stylelint-disable-line unit-disallowed-list */
+  height: 1px; /* stylelint-disable-line unit-disallowed-list */
+  margin: -1px; /* stylelint-disable-line unit-disallowed-list */
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+
+/// Modifies the bpk-visually-hidden mixin to allow the element to be focusable when navigated to via the keyboard:
+///
+/// https://www.drupal.org/node/897638
+///
+/// @require {mixin} bpk-visually-hidden
+///
+/// @example scss
+///   .selector {
+///     @include bpk-visually-hidden();
+///     @include bpk-visually-hidden--focusable();
+///   }
+
+@mixin bpk-visually-hidden--focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}
+
+/// Hide visually and from screen readers, but maintain layout.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-invisible();
+///   }
+
+@mixin bpk-invisible {
+  visibility: hidden;
+}
+
+/// Clearfix: contain floats.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-clearfix();
+///   }
+
+@mixin bpk-clearfix {
+  &::before,
+  &::after {
+    content: '';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}
+
+/// Target RTL specific styles.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-rtl() {
+///       /* RTL scss goes here */
+///     }
+///   }
+
+@mixin bpk-rtl {
+  html[dir='rtl'] & {
+    @content;
+  }
+}
+
+/// :hover pseudo selector wrapper which prevents styles displaying on touch devices
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-hover() {
+///       /* Non-touch specific hover scss goes here */
+///     }
+///   }
+
+@mixin bpk-hover {
+  .bpk-no-touch-support &:hover:not(:active):not(:disabled) {
+    @content;
+  }
+
+  // Duplicating the above rule with `:global(...)` pseudo selector around the
+  // global `.bpk-no-touch-support` class to provide support for CSS modules.
+  // - when processed through css-loader, the `:global(...)` pseudo selector will be dropped
+  //   leaving a duplicate rule which in turn will be 'uglified' out - so no worries there
+  // - when processed through node-sass only, the `:global(...)` pseudo selector will be left
+  //   intact and ignored by all browsers
+  // stylelint-disable-next-line selector-pseudo-class-no-unknown
+  :global(.bpk-no-touch-support) &:hover:not(:active):not(:disabled) {
+    @content;
+  }
+}
+
+/// Target locale specific styles.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-locale('ja-JP') {
+///       /* ja-JP scss goes here */
+///     }
+///   }
+
+@mixin bpk-locale($locale) {
+  html[lang='#{$locale}'] &,
+  html[lang='#{string.to_lower_case($locale)}'] & {
+    @content;
+  }
+}
+
+/// Create a Backpack themeable property with
+/// fallback support for old browsers and when
+/// the CSS variable is not defined.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-themeable-property(color, --bpk-link-text-color, $fallback-text-color);
+///   }
+
+@mixin bpk-themeable-property($property, $variableName, $fallback) {
+  #{$property}: $fallback;
+  #{$property}: var($variableName, $fallback);
+}
+
+/// Create a property that uses the Backpack primary color blue-500.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-apply-primary-color-to(color);
+///   }
+@mixin bpk-apply-primary-color-to($property) {
+  @include bpk-themeable-property(
+    $property,
+    --bpk-primary-color,
+    tokens.$bpk-color-sky-blue
+  );
+}
+
+/// Replace part of a string with another string.
+///
+/// @param {string} $string - The string inside which the replacement should take place.
+/// @param {string} $search - The substring to be replaced.
+/// @param {string} $replace [''] - The string to replace $search.
+
+@function str-replace($string, $search, $replace: '') {
+  /* Disabling rule here as the recommendation method is for newer sass versions that we don't yet support */
+  /* stylelint-disable-next-line scss/no-global-function-names */
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        string.slice($string, $index + string.length($search)),
+        $search,
+        $replace
+      );
+  }
+
+  @return $string;
+}
+
+/// Increases the tappable area of the element to the
+/// minimum required for touch devices.
+///
+/// @content
+///
+/// @example scss
+///   .selector {
+///     @include bpk-touch-area;
+///   }
+
+@mixin bpk-touch-tappable {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    /* stylelint-disable-next-line function-calc-no-invalid */
+    top: calc((-#{tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm()} / 2) + 50%);
+    /* stylelint-disable-next-line function-calc-no-invalid */
+    left: calc((-#{tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm()} / 2) + 50%);
+    content: '';
+    width: tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm();
+    height: tokens.bpk-spacing-xxl() + tokens.bpk-spacing-sm();
+  }
+}

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

@@ -1,22 +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.
- */
-
-/// <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

@@ -1,47 +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 { 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

@@ -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-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-component-datatable/src/BpkDataTableColumn.js

@@ -1,54 +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 { SORT_DIRECTION_TYPES } from "./sort-types";
-import { jsx as _jsx } from "react/jsx-runtime";
-// BpkDataTableColumn is just a props wrapper
-// to maintain backwards compatibility with the old API of BpkDataTable which takes columns as children
-// The `react-table` library however expects columns as an array of objects
-
-const BpkDataTableColumn = props => /*#__PURE__*/_jsx("div", {
-  ...props
-});
-BpkDataTableColumn.propTypes = {
-  dataKey: PropTypes.string.isRequired,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  className: PropTypes.string,
-  disableSort: PropTypes.bool,
-  defaultSortDirection: PropTypes.oneOf(Object.keys(SORT_DIRECTION_TYPES)),
-  flexGrow: PropTypes.number,
-  label: PropTypes.string,
-  headerRenderer: PropTypes.func,
-  headerClassName: PropTypes.string,
-  headerStyle: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
-  cellRenderer: PropTypes.func,
-  cellDataGetter: PropTypes.func
-};
-BpkDataTableColumn.defaultProps = {
-  className: null,
-  disableSort: false,
-  defaultSortDirection: SORT_DIRECTION_TYPES.ASC,
-  flexGrow: 0,
-  label: null,
-  headerRenderer: null,
-  headerClassName: null,
-  headerStyle: null,
-  cellRenderer: null,
-  cellDataGetter: null
-};
-export default BpkDataTableColumn;

package/bpk-component-datatable/src/BpkDataTableColumn.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-data-table-column{margin:1rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bpk-data-table-column__header{display:inline-block;max-width:100%;text-overflow:ellipsis;overflow:hidden}.bpk-data-table-column__sort-icons{margin:0 0 0 .75rem}html[dir='rtl'] .bpk-data-table-column__sort-icons{margin:0 .75rem 0 0}.bpk-data-table-column__sort-icon{display:block;fill:#b2b2bf}.bpk-data-table-column__sort-icon:hover{fill:#68697f}.bpk-data-table-column__sort-icon--selected,.bpk-data-table-column__sort-icon--selected:hover{fill:#084eb2}.bpk-data-table-column__sort-icon--up{margin-bottom:-0.25rem}

package/bpk-component-datatable/src/hasChildrenOfType.js

@@ -1,35 +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 { Children } from 'react';
-export function getDisplayName(Component) {
-  return Component.displayName || Component.name || (typeof Component === 'string' && Component.length > 0 ? Component : 'Unknown');
-}
-const hasChildrenOfType = (type, atLeast = 1) => (props, propType, componentName) => {
-  if (Children.count(props[propType]) < atLeast) {
-    const inflectedNoun = atLeast === 1 ? 'child' : 'children';
-    return Error(`${componentName} requires at least ${atLeast} '${getDisplayName(type)}' ${inflectedNoun}.`);
-  }
-  const children = Children.toArray(props[propType]);
-  for (let i = 0; i < children.length; i += 1) {
-    const child = children[i];
-    if (child.type !== type && !(child.type.prototype instanceof type)) {
-      return Error(`${componentName} only allows '${getDisplayName(type)}' as children. Found '${getDisplayName(child.type)}'.`);
-    }
-  }
-  return undefined;
-};
-export default hasChildrenOfType;