@skyscanner/backpack-web 25.3.0 → 25.4.0-alpha

package/bpk-component-ticket/src/BpkTicket.js

@@ -1,14 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkTicketModule = _interopRequireDefault(require("./BpkTicket.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "href", "padded", "stub", "stubClassName", "stubProps", "vertical"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -26,83 +15,125 @@ const _excluded = ["children", "className", "href", "padded", "stub", "stubClass
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkTicketModule.default);
-const BpkTicket = props => {
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import type { Node } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkTicket.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  children: Node,
+  stub: Node,
+  stubProps: { [string]: any },
+  padded: boolean,
+  vertical: boolean,
+  className: ?string,
+  stubClassName: ?string,
+  href: ?string,
+};
+
+const BpkTicket = (props: Props) => {
   const {
-      children,
-      className,
-      href,
-      padded,
-      stub,
-      stubClassName,
-      stubProps,
-      vertical
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
-  const classNames = getClassName('bpk-ticket', className, vertical && 'bpk-ticket--vertical');
-  const mainClassNames = getClassName('bpk-ticket__paper', 'bpk-ticket__main', padded && 'bpk-ticket__main--padded', vertical && 'bpk-ticket__main--vertical', !vertical && 'bpk-ticket__main--horizontal');
-  const mainInnerClassNames = getClassName('bpk-ticket__main-inner', vertical && 'bpk-ticket__main-inner--vertical', !vertical && 'bpk-ticket__main-inner--horizontal');
-  const stubClassNames = getClassName('bpk-ticket__paper', 'bpk-ticket__stub', stubClassName, padded && 'bpk-ticket__stub--padded', vertical && 'bpk-ticket__stub--vertical', !vertical && 'bpk-ticket__stub--horizontal');
-  const stubInnerClassNames = getClassName('bpk-ticket__stub-inner', vertical && 'bpk-ticket__stub-inner--vertical', !vertical && 'bpk-ticket__stub-inner--horizontal');
-  const mainContent = padded ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: mainInnerClassNames,
-    children: children
-  });
-  const stubContent = padded ? stub : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: stubInnerClassNames,
-    children: stub
-  });
-  const contents = [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: mainClassNames,
-    children: mainContent
-  }, "main"),
-  /*#__PURE__*/
-  // $FlowFixMe[cannot-spread-indexer] - inexact rest. See 'decisions/flowfixme.md'.
-  (0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
-    className: stubClassNames
-  }, stubProps), {}, {
-    children: stubContent
-  }), "stub")];
+    children,
+    className,
+    href,
+    padded,
+    stub,
+    stubClassName,
+    stubProps,
+    vertical,
+    ...rest
+  } = props;
+
+  const classNames = getClassName(
+    'bpk-ticket',
+    className,
+    vertical && 'bpk-ticket--vertical',
+  );
+
+  const mainClassNames = getClassName(
+    'bpk-ticket__paper',
+    'bpk-ticket__main',
+    padded && 'bpk-ticket__main--padded',
+    vertical && 'bpk-ticket__main--vertical',
+    !vertical && 'bpk-ticket__main--horizontal',
+  );
+
+  const mainInnerClassNames = getClassName(
+    'bpk-ticket__main-inner',
+    vertical && 'bpk-ticket__main-inner--vertical',
+    !vertical && 'bpk-ticket__main-inner--horizontal',
+  );
+
+  const stubClassNames = getClassName(
+    'bpk-ticket__paper',
+    'bpk-ticket__stub',
+    stubClassName,
+    padded && 'bpk-ticket__stub--padded',
+    vertical && 'bpk-ticket__stub--vertical',
+    !vertical && 'bpk-ticket__stub--horizontal',
+  );
+
+  const stubInnerClassNames = getClassName(
+    'bpk-ticket__stub-inner',
+    vertical && 'bpk-ticket__stub-inner--vertical',
+    !vertical && 'bpk-ticket__stub-inner--horizontal',
+  );
+
+  const mainContent = padded ? (
+    children
+  ) : (
+    <div className={mainInnerClassNames}>{children}</div>
+  );
+
+  const stubContent = padded ? (
+    stub
+  ) : (
+    <div className={stubInnerClassNames}>{stub}</div>
+  );
+
+  const contents = [
+    <div key="main" className={mainClassNames}>
+      {mainContent}
+    </div>,
+    // $FlowFixMe[cannot-spread-indexer] - inexact rest. See 'decisions/flowfixme.md'.
+    <div key="stub" className={stubClassNames} {...stubProps}>
+      {stubContent}
+    </div>,
+  ];
+
   if (href) {
     return (
-      /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      (0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
-        href: href,
-        className: classNames
-      }, rest), {}, {
-        children: contents
-      }))
+      <a href={href} className={classNames} {...rest}>
+        {contents}
+      </a>
     );
   }
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    (0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
-      role: "button",
-      className: classNames
-    }, rest), {}, {
-      children: contents
-    }))
+    <div role="button" className={classNames} {...rest}>
+      {contents}
+    </div>
   );
 };
+
 BpkTicket.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  stub: _propTypes.default.node.isRequired,
-  className: _propTypes.default.string,
-  href: _propTypes.default.string,
-  padded: _propTypes.default.bool,
-  vertical: _propTypes.default.bool,
-  stubClassName: _propTypes.default.string,
-  stubProps: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
+  children: PropTypes.node.isRequired,
+  stub: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  href: PropTypes.string,
+  padded: PropTypes.bool,
+  vertical: PropTypes.bool,
+  stubClassName: PropTypes.string,
+  stubProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
 BpkTicket.defaultProps = {
@@ -111,7 +142,7 @@ BpkTicket.defaultProps = {
   padded: true,
   vertical: false,
   stubClassName: null,
-  stubProps: {}
+  stubProps: {},
 };
-var _default = BpkTicket;
-exports.default = _default;
+
+export default BpkTicket;

package/bpk-component-ticket/src/BpkTicket.module.scss

@@ -0,0 +1,144 @@
+/*
+ * 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 '~bpk-mixins/index.scss';
+
+$bpk-spacing-v2: true;
+
+@mixin hidden-box-shadow-after {
+  z-index: 0;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: '';
+    display: block;
+    z-index: -1;
+    transition: opacity 200ms ease-in-out;
+    border-radius: inherit;
+    box-shadow: $bpk-box-shadow-sm;
+    opacity: 0;
+    pointer-events: none; // To prevent the pseudo element absorbing click events
+  }
+}
+
+.bpk-ticket {
+  $ticket-padding: bpk-spacing-base();
+
+  position: relative;
+  display: block;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  flex: none;
+  color: $bpk-text-primary-day;
+  text-decoration: none;
+  box-shadow: $bpk-box-shadow-sm;
+  cursor: pointer;
+
+  @include bpk-border-radius-md;
+  @include hidden-box-shadow-after;
+
+  @include bpk-hover {
+    &::after {
+      opacity: 1;
+    }
+
+    .bpk-ticket__paper::after {
+      opacity: 1;
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &__paper {
+    position: relative;
+    background-color: $bpk-card-background-color;
+  }
+
+  @mixin main-styles {
+    &--horizontal {
+      border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
+
+      @include bpk-rtl {
+        border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
+      }
+    }
+
+    &--vertical {
+      border-radius: $bpk-border-radius-md $bpk-border-radius-md 0 0;
+    }
+  }
+
+  &__main {
+    flex: 2 1 auto;
+
+    @include main-styles;
+
+    &--padded {
+      padding: $ticket-padding;
+    }
+  }
+
+  &__main-inner {
+    height: 100%;
+    overflow: hidden;
+
+    @include main-styles;
+  }
+
+  @mixin stub-styles {
+    &--horizontal {
+      min-width: 30%;
+      border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
+      box-shadow: inset $bpk-one-pixel-rem 0 0 $bpk-line-day;
+
+      @include bpk-rtl {
+        border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
+        box-shadow: inset (-$bpk-one-pixel-rem) 0 0 $bpk-line-day;
+      }
+    }
+
+    &--vertical {
+      border-radius: 0 0 $bpk-border-radius-md $bpk-border-radius-md;
+      box-shadow: inset 0 $bpk-one-pixel-rem 0 $bpk-line-day;
+    }
+  }
+
+  &__stub {
+    flex: 1 1 auto;
+
+    @include stub-styles;
+
+    &--padded {
+      padding: $ticket-padding;
+    }
+  }
+
+  &__stub-inner {
+    height: 100%;
+    overflow: hidden;
+
+    @include stub-styles;
+  }
+}

package/bpk-component-tooltip/README.md

@@ -0,0 +1,65 @@
+# bpk-component-tooltip
+
+> Backpack tooltip component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import { useRef } from 'react';
+import BpkText from '@skyscanner/backpack-web/bpk-component-text';
+import BpkTooltip from '@skyscanner/backpack-web/bpk-component-tooltip';
+
+const App = () => (
+  const targetRef = useRef(null);
+  const target = (
+    <div ref={targetRef} className={'my-tooltip-target'}>
+      <BpkText textStyle="lg">LHR</BpkText>
+    </div>
+  );
+
+  <BpkTooltip
+    ariaLabel="London Heathrow"
+    id="my-tooltip"
+    target={target}
+  >
+    London Heathrow
+  </BpkTooltip>
+);
+```
+
+## Props
+
+| Property              | PropType                                       | Required | Default Value       |
+| --------------------- | ---------------------------------------------- | -------- | ------------------- |
+| ariaLabel             | string                                         | true     | -                   |
+| id                    | string                                         | true     | -                   |
+| children              | node                                           | true     | -                   |
+| target                | node                                           | true     | -                   |
+| hideOnTouchDevices    | bool                                           | false    | true                |
+| placement             | oneOf(['top', 'right', 'bottom', 'left'])      | false    | 'bottom'            |
+| padded                | bool                                           | false    | true                |
+| portalStyle           | object                                         | false    | null                |
+| portalClassName       | string                                         | false    | null                |
+| popperModifiers       | arrayOf(object)                                | false    | null                |
+| renderTarget          | func                                           | false    | null                |
+| type                  | oneOf(`TOOLTIP_TYPES.light`, `TOOLTIP_TYPES.dark`) | false    | `TOOLTIP_TYPES.light` |
+
+### Prop Details
+
+#### `ariaLabel`
+
+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.
+
+#### `popperModifiers`
+
+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.
+
+#### target
+
+`target` should be a DOM element with a `ref` attached to it.

package/bpk-component-tooltip/index.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 BpkTooltipPortal from './src/BpkTooltipPortal';
+import type { Props } from './src/BpkTooltipPortal';
+import { TOOLTIP_TYPES } from './src/constants';
+
+export type BpkTooltipPortalProps = Props;
+
+export default BpkTooltipPortal;
+export { TOOLTIP_TYPES };

package/bpk-component-tooltip/src/BpkTooltip-test.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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 { render } from '@testing-library/react';
+
+import BpkTooltip from './BpkTooltip';
+import { TOOLTIP_TYPES } from './constants';
+
+describe('BpkTooltip', () => {
+  it('should render correctly', () => {
+    const { asFragment } = render(
+      <BpkTooltip id="my-popover">My tooltip content</BpkTooltip>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly with type=dark', () => {
+    const { asFragment } = render(
+      <BpkTooltip type={TOOLTIP_TYPES.dark} id="my-popover">
+        My tooltip content
+      </BpkTooltip>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly with "padded" attribute equal to false', () => {
+    const { asFragment } = render(
+      <BpkTooltip id="my-tooltip" padded={false}>
+        My tooltip content
+      </BpkTooltip>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly with "className" attribute', () => {
+    const { asFragment } = render(
+      <BpkTooltip id="my-tooltip" className="my-custom-class">
+        My tooltip content
+      </BpkTooltip>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/bpk-component-tooltip/src/BpkTooltip.module.scss

@@ -0,0 +1,149 @@
+/*
+ * 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 '~bpk-mixins/index.scss';
+
+$bpk-spacing-v2: true;
+$arrow-size: bpk-spacing-md();
+$arrow-inset-margin: -($bpk-one-pixel-rem * 3);
+$light-arrow-border-color: $bpk-line-day;
+$dark-background-color: $bpk-surface-contrast-day;
+
+.bpk-tooltip-portal {
+  z-index: $bpk-zindex-tooltip;
+
+  &--target {
+    display: inline-block;
+  }
+}
+
+.bpk-tooltip {
+  transition: opacity $bpk-duration-sm ease-in-out,
+    transform $bpk-duration-sm ease-in-out;
+  outline: 0;
+  opacity: 1;
+
+  &--appear {
+    opacity: 0;
+
+    .bpk-tooltip-portal[data-popper-placement='top']
+      &:not(.bpk-tooltip--appear-active) {
+      transform: translate(0, -1rem);
+      transition: none;
+    }
+
+    .bpk-tooltip-portal[data-popper-placement='right']
+      &:not(.bpk-tooltip--appear-active) {
+      transform: translate(1rem, 0);
+      transition: none;
+    }
+
+    .bpk-tooltip-portal[data-popper-placement='bottom']
+      &:not(.bpk-tooltip--appear-active) {
+      transform: translate(0, 1rem);
+      transition: none;
+    }
+
+    .bpk-tooltip-portal[data-popper-placement='left']
+      &:not(.bpk-tooltip--appear-active) {
+      transform: translate(-1rem, 0);
+      transition: none;
+    }
+  }
+
+  &--appear-active {
+    transform: translate(0, 0);
+    transition: opacity $bpk-duration-sm ease-in-out,
+      transform $bpk-duration-sm ease-in-out;
+    opacity: 1;
+  }
+
+  &__arrow {
+    position: aboslute;
+    width: $arrow-size;
+    height: $arrow-size;
+    transform: rotate(45deg);
+    border: $bpk-one-pixel-rem solid transparent;
+    background: inherit;
+    background-color: $bpk-surface-default-day;
+
+    .bpk-tooltip-portal[data-popper-placement='top'] & {
+      bottom: $arrow-inset-margin;
+      border-right-color: $light-arrow-border-color;
+      border-bottom-color: $light-arrow-border-color;
+    }
+
+    .bpk-tooltip-portal[data-popper-placement='right'] & {
+      left: $arrow-inset-margin;
+      border-bottom-color: $light-arrow-border-color;
+      border-left-color: $light-arrow-border-color;
+    }
+
+    .bpk-tooltip-portal[data-popper-placement='bottom'] & {
+      top: $arrow-inset-margin;
+      border-top-color: $light-arrow-border-color;
+      border-left-color: $light-arrow-border-color;
+    }
+
+    .bpk-tooltip-portal[data-popper-placement='left'] & {
+      right: $arrow-inset-margin;
+      border-top-color: $light-arrow-border-color;
+      border-right-color: $light-arrow-border-color;
+    }
+
+    &--dark {
+      background-color: $dark-background-color;
+
+      .bpk-tooltip-portal[data-popper-placement='top'] & {
+        border-right-color: $dark-background-color;
+        border-bottom-color: $dark-background-color;
+      }
+
+      .bpk-tooltip-portal[data-popper-placement='right'] & {
+        border-bottom-color: $dark-background-color;
+        border-left-color: $dark-background-color;
+      }
+
+      .bpk-tooltip-portal[data-popper-placement='bottom'] & {
+        border-top-color: $dark-background-color;
+        border-left-color: $dark-background-color;
+      }
+
+      .bpk-tooltip-portal[data-popper-placement='left'] & {
+        border-top-color: $dark-background-color;
+        border-right-color: $dark-background-color;
+      }
+    }
+  }
+
+  &__inner {
+    overflow: hidden;
+
+    @include bpk-layer;
+
+    &--padded {
+      padding: bpk-spacing-md() bpk-spacing-base();
+    }
+
+    &--dark {
+      color: $bpk-text-primary-inverse-day;
+
+      @include bpk-layer($dark-background-color, $dark-background-color);
+    }
+  }
+}