@skyscanner/backpack-web 36.18.0 → 37.1.0

package/bpk-mixins/_typography.scss

@@ -782,6 +782,8 @@
 ///   }
 
 @mixin bpk-link {
+  position: relative;
+  display: inline-block;
   padding: 0;
   border: 0;
   background-color: transparent;
@@ -789,34 +791,117 @@
   cursor: pointer;
   appearance: none;
 
-  @include bpk-themeable-property(color, --bpk-link-color, $bpk-text-link-day);
+  @include bpk-themeable-property(
+    color,
+    --bpk-link-color,
+    $bpk-text-primary-day
+  );
 
   @include bpk-hover {
-    text-decoration: underline;
+    text-decoration: none;
 
     @include bpk-themeable-property(
       color,
       --bpk-link-hover-color,
-      $bpk-text-link-day
+      $bpk-text-primary-day
     );
+
+    &::after {
+      width: 0%;
+    }
   }
 
   &:visited {
     @include bpk-themeable-property(
       color,
       --bpk-link-visited-color,
-      $bpk-text-link-day
+      $bpk-text-primary-day
     );
   }
 
+  &:active {
+    @include bpk-themeable-property(
+      color,
+      --bpk-link-active-color,
+      $bpk-text-primary-day
+    );
+
+    &::after {
+      width: 0%;
+    }
+  }
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    content: '';
+    display: block;
+    width: 100%;
+    height: tokens.$bpk-border-size-sm;
+    transition:
+      width 0.2s ease 0s,
+      left 0.2s ease 0s;
+
+    @include bpk-themeable-property(
+      background,
+      --bpk-link-color,
+      $bpk-text-primary-day
+    );
+
+    @media (prefers-reduced-motion) {
+      transition:
+        width 0s ease 0s,
+        left 0s ease 0s;
+    }
+  }
+}
+
+/// Implicit inline link.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-link();
+///     @include bpk-link--implicit();
+///   }
+
+@mixin bpk-link--implicit {
+  @include bpk-themeable-property(
+    color,
+    --bpk-link-color,
+    $bpk-text-primary-day
+  );
+
+  @include bpk-hover {
+    @include bpk-themeable-property(
+      color,
+      --bpk-link-hover-color,
+      $bpk-text-primary-day
+    );
+
+    &::after {
+      width: 100%;
+    }
+  }
+
+  &::after {
+    width: 0;
+    transition:
+      width 0.2s ease 0s,
+      left 0.2s ease 0s;
+  }
+
   &:active {
     text-decoration: underline;
 
     @include bpk-themeable-property(
       color,
       --bpk-link-active-color,
-      $bpk-text-link-day
+      $bpk-text-primary-day
     );
+
+    &::after {
+      width: 100%;
+    }
   }
 }
 
@@ -845,6 +930,14 @@
     );
   }
 
+  &::after {
+    @include bpk-themeable-property(
+      background,
+      --bpk-link-alternate-color,
+      $bpk-text-on-dark-day
+    );
+  }
+
   &:visited {
     @include bpk-themeable-property(
       color,
@@ -877,14 +970,14 @@
 ///   }
 
 @mixin bpk-link--active {
-  color: $bpk-text-link-day;
+  color: $bpk-text-primary-day;
 
   &:visited {
-    color: $bpk-text-link-day;
+    color: $bpk-text-primary-day;
   }
 
   &:active {
-    color: $bpk-text-link-day;
+    color: $bpk-text-primary-day;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "36.18.0",
+  "version": "37.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -27,8 +27,8 @@
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-slider": "1.1.2",
     "@react-google-maps/api": "^2.19.3",
-    "@skyscanner/bpk-foundations-web": "^19.1.0",
-    "@skyscanner/bpk-svgs": "^20.1.1",
+    "@skyscanner/bpk-foundations-web": "^19.4.1",
+    "@skyscanner/bpk-svgs": "^20.4.1",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",

package/unstable__bpk-mixins/_buttons.scss

@@ -395,7 +395,11 @@
   background: none; /* stylelint-disable-line order/order, order/properties-order */
   box-shadow: none;
 
-  @include typography.bpk-link;
+  @include typography.bpk-link--implicit;
+
+  &::after {
+    bottom: auto;
+  }
 
   padding: $vertical-padding 0; /* stylelint-disable-line order/order, order/properties-order */
   color: tokens.$bpk-private-button-link-normal-foreground-day;

package/unstable__bpk-mixins/_forms.scss

@@ -18,8 +18,6 @@
 
 /* stylelint-disable at-rule-disallowed-list */
 
-@use "sass:math";
-
 @use 'tokens.scss';
 @use 'typography.scss';
 @use 'utils.scss';
@@ -629,34 +627,13 @@
 ///     @include bpk-checkbox__checkmark();
 ///   }
 @mixin bpk-checkbox__checkmark {
-  &::before,
-  &::after {
-    position: absolute;
-    content: '';
-    transform: rotate(45deg);
-    border-radius: tokens.$bpk-border-size-lg;
-    background-color: tokens.$bpk-text-primary-inverse-day;
-  }
-
-  &::before {
-    top: tokens.bpk-spacing-md() - tokens.$bpk-one-pixel-rem;
-    left: 0;
-    width: math.div(tokens.bpk-spacing-lg(), 3);
-    height: tokens.bpk-spacing-sm() - tokens.$bpk-one-pixel-rem;
-  }
-
-  &::after {
-    top: tokens.bpk-spacing-sm() * 0.5;
-    left: tokens.bpk-spacing-md() - tokens.$bpk-one-pixel-rem;
-    width: tokens.bpk-spacing-sm() - tokens.$bpk-one-pixel-rem;
-    height: tokens.bpk-spacing-md() + (tokens.$bpk-one-pixel-rem * 3);
-  }
+  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
+  background-repeat: no-repeat;
+  background-position: tokens.$bpk-one-pixel-rem center;
+  background-size: calc(100% - tokens.$bpk-one-pixel-rem * 2.5) auto;
 
   &:disabled {
-    &::before,
-    &::after {
-      background-color: tokens.$bpk-text-disabled-day;
-    }
+    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
   }
 }
 

package/unstable__bpk-mixins/_typography.scss

@@ -782,6 +782,8 @@
 ///   }
 
 @mixin bpk-link {
+  position: relative;
+  display: inline-block;
   padding: 0;
   border: 0;
   background-color: transparent;
@@ -789,34 +791,117 @@
   cursor: pointer;
   appearance: none;
 
-  @include utils.bpk-themeable-property(color, --bpk-link-color, tokens.$bpk-text-link-day);
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-link-color,
+    tokens.$bpk-text-primary-day
+  );
 
   @include utils.bpk-hover {
-    text-decoration: underline;
+    text-decoration: none;
 
     @include utils.bpk-themeable-property(
       color,
       --bpk-link-hover-color,
-      tokens.$bpk-text-link-day
+      tokens.$bpk-text-primary-day
     );
+
+    &::after {
+      width: 0%;
+    }
   }
 
   &:visited {
     @include utils.bpk-themeable-property(
       color,
       --bpk-link-visited-color,
-      tokens.$bpk-text-link-day
+      tokens.$bpk-text-primary-day
     );
   }
 
+  &:active {
+    @include utils.bpk-themeable-property(
+      color,
+      --bpk-link-active-color,
+      tokens.$bpk-text-primary-day
+    );
+
+    &::after {
+      width: 0%;
+    }
+  }
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    content: '';
+    display: block;
+    width: 100%;
+    height: tokens.$bpk-border-size-sm;
+    transition:
+      width 0.2s ease 0s,
+      left 0.2s ease 0s;
+
+    @include utils.bpk-themeable-property(
+      background,
+      --bpk-link-color,
+      tokens.$bpk-text-primary-day
+    );
+
+    @media (prefers-reduced-motion) {
+      transition:
+        width 0s ease 0s,
+        left 0s ease 0s;
+    }
+  }
+}
+
+/// Implicit inline link.
+///
+/// @example scss
+///   .selector {
+///     @include bpk-link();
+///     @include bpk-link--implicit();
+///   }
+
+@mixin bpk-link--implicit {
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-link-color,
+    tokens.$bpk-text-primary-day
+  );
+
+  @include utils.bpk-hover {
+    @include utils.bpk-themeable-property(
+      color,
+      --bpk-link-hover-color,
+      tokens.$bpk-text-primary-day
+    );
+
+    &::after {
+      width: 100%;
+    }
+  }
+
+  &::after {
+    width: 0;
+    transition:
+      width 0.2s ease 0s,
+      left 0.2s ease 0s;
+  }
+
   &:active {
     text-decoration: underline;
 
     @include utils.bpk-themeable-property(
       color,
       --bpk-link-active-color,
-      tokens.$bpk-text-link-day
+      tokens.$bpk-text-primary-day
     );
+
+    &::after {
+      width: 100%;
+    }
   }
 }
 
@@ -845,6 +930,14 @@
     );
   }
 
+  &::after {
+    @include utils.bpk-themeable-property(
+      background,
+      --bpk-link-alternate-color,
+      tokens.$bpk-text-on-dark-day
+    );
+  }
+
   &:visited {
     @include utils.bpk-themeable-property(
       color,
@@ -877,14 +970,14 @@
 ///   }
 
 @mixin bpk-link--active {
-  color: tokens.$bpk-text-link-day;
+  color: tokens.$bpk-text-primary-day;
 
   &:visited {
-    color: tokens.$bpk-text-link-day;
+    color: tokens.$bpk-text-primary-day;
   }
 
   &:active {
-    color: tokens.$bpk-text-link-day;
+    color: tokens.$bpk-text-primary-day;
   }
 }
 

package/bpk-component-tooltip/src/BpkTooltipPortal.d.ts

@@ -1,54 +0,0 @@
-import { Component } from 'react';
-import type { ReactNode, ReactElement } from 'react';
-import { createPopper } from '@popperjs/core';
-import type { TooltipProps } from './BpkTooltip';
-export type Props = TooltipProps & {
-    /**
-     * Tooltips are invisible to assistive technologies such as screen readers.
-     * To improve accessibility, `ariaLabel` is required to describe the content of the tooltip to assistive technologies.
-     * The label will be used on the `target` element, so any existing `aria-label` attached to `target` will be overridden.
-     */
-    ariaLabel: string;
-    /**
-     * "target" should be a DOM element with a "ref" attached to it.
-     */
-    target: ReactElement<any>;
-    children: ReactNode | string;
-    placement?: 'top' | 'right' | 'bottom' | 'left' | 'auto';
-    hideOnTouchDevices?: boolean;
-    portalStyle?: object;
-    portalClassName?: string;
-    renderTarget: null | (() => null | HTMLElement);
-    /**
-     * Please refer to the [documentation](https://popper.js.org/docs/v2/modifiers/) for the underlying positioning library "Popper.js".
-     * You can achieve various behaviours such as allowing the tooltip to overflow the viewport etc.
-     */
-    popperModifiers?: object[];
-};
-type State = {
-    isOpen: boolean;
-};
-declare class BpkTooltipPortal extends Component<Props, State> {
-    popper?: ReturnType<typeof createPopper> | null;
-    targetRef?: Element | null;
-    static defaultProps: {
-        className: null;
-        padded: boolean;
-        type: "light";
-        placement: string;
-        hideOnTouchDevices: boolean;
-        portalStyle: null;
-        portalClassName: null;
-        renderTarget: null;
-        popperModifiers: null;
-    };
-    constructor(props: Props);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    onOpen: (tooltipElement: HTMLElement, targetElement?: HTMLElement | null | undefined) => void;
-    beforeClose: (done: () => void | null) => void;
-    openTooltip: () => void;
-    closeTooltip: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export default BpkTooltipPortal;

package/bpk-component-tooltip/src/BpkTooltipPortal.js

@@ -1,154 +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 { cloneElement, Component } from 'react';
-import { createPopper } from '@popperjs/core';
-import { Portal, cssModules } from "../../bpk-react-utils";
-import BpkTooltip from "./BpkTooltip";
-import { TOOLTIP_TYPES } from "./constants";
-import STYLES from "./BpkTooltip.module.css";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-const hasTouchSupport = () => !!(typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0));
-class BpkTooltipPortal extends Component {
-  static defaultProps = {
-    // Disabling as the rule doesn't work when types are defined in a different file
-    /* eslint-disable react/default-props-match-prop-types */
-    className: null,
-    padded: true,
-    type: TOOLTIP_TYPES.light,
-    /* eslint-enable */
-    placement: 'bottom',
-    hideOnTouchDevices: true,
-    portalStyle: null,
-    portalClassName: null,
-    renderTarget: null,
-    popperModifiers: null
-  };
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.popper = null;
-    this.targetRef = null;
-  }
-  componentDidMount() {
-    if (this.targetRef) {
-      const ref = this.targetRef;
-      ref.addEventListener('focusin', this.openTooltip);
-      ref.addEventListener('focusout', this.closeTooltip);
-      ref.addEventListener('mouseenter', this.openTooltip);
-      ref.addEventListener('mouseleave', this.closeTooltip);
-    }
-  }
-  componentWillUnmount() {
-    if (this.targetRef) {
-      const ref = this.targetRef;
-      ref.addEventListener('focusin', this.openTooltip);
-      ref.addEventListener('focusout', this.closeTooltip);
-      ref.removeEventListener('mouseenter', this.openTooltip);
-      ref.removeEventListener('mouseleave', this.closeTooltip);
-    }
-  }
-  onOpen = (tooltipElement, targetElement) => {
-    // The default modifiers for the popper
-    // Note that GPU acceleration should be disabled otherwise Popper will use `translate3d`
-    // which can cause blurriness in Safari and Chrome.
-    const stdModifiers = [{
-      name: 'computeStyles',
-      options: {
-        gpuAcceleration: false
-      }
-    }, {
-      name: 'offset',
-      options: {
-        offset: [0, 8]
-      }
-    }];
-    this.popper = createPopper(targetElement, tooltipElement, {
-      placement: this.props.placement,
-      modifiers: this.props.popperModifiers ? [...this.props.popperModifiers, ...stdModifiers] : stdModifiers
-    });
-    this.popper.update();
-  };
-  beforeClose = done => {
-    if (this.popper) {
-      this.popper.destroy();
-      this.popper = null;
-    }
-    done();
-  };
-  openTooltip = () => {
-    this.setState({
-      isOpen: true
-    });
-  };
-  closeTooltip = () => {
-    this.setState({
-      isOpen: false
-    });
-  };
-  render() {
-    const {
-      ariaLabel,
-      children,
-      hideOnTouchDevices,
-      padded,
-      placement,
-      popperModifiers,
-      portalClassName,
-      portalStyle,
-      renderTarget,
-      target,
-      ...rest
-    } = this.props;
-    const classNames = [getClassName('bpk-tooltip-portal')];
-    const renderPortal = !hasTouchSupport() || !hideOnTouchDevices;
-    const targetWithAccessibilityProps = /*#__PURE__*/cloneElement(target, {
-      tabIndex: '0',
-      'aria-label': ariaLabel
-    });
-    if (portalClassName) {
-      classNames.push(portalClassName);
-    }
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [targetWithAccessibilityProps, renderPortal && /*#__PURE__*/_jsx(Portal, {
-        target: targetWithAccessibilityProps,
-        targetRef: targetRef => {
-          this.targetRef = targetRef;
-        },
-        isOpen: this.state.isOpen,
-        onOpen: this.onOpen,
-        onClose: this.closeTooltip,
-        style: portalStyle,
-        renderTarget: renderTarget
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
-        className: classNames.join(' '),
-        children: /*#__PURE__*/_jsx(BpkTooltip, {
-          padded: padded,
-          ...rest,
-          children: children
-        })
-      })]
-    });
-  }
-}
-export default BpkTooltipPortal;