@skyscanner/backpack-web 25.2.0 → 25.4.0-alpha

package/bpk-component-card/src/BpkDividedCard.module.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.
+ */
+
+@import '~bpk-mixins/index.scss';
+
+$min-vertical-width: 240;
+$max-vertical-width: 720;
+$min-horizontal-width: $max-vertical-width + 1;
+$min-horizontal-height: 292;
+$fixed-secondary-width: 216;
+
+.bpk-divided-card {
+  display: flex;
+  align-items: stretch;
+
+  &--vertical {
+    min-width: $bpk-one-pixel-rem * $min-vertical-width;
+    max-width: $bpk-one-pixel-rem * $max-vertical-width;
+    flex-direction: column;
+  }
+
+  &--horizontal {
+    min-width: $bpk-one-pixel-rem * $min-horizontal-width;
+    min-height: $bpk-one-pixel-rem * $min-horizontal-height;
+  }
+
+  &__primary {
+    &--horizontal {
+      flex: 1;
+    }
+  }
+
+  &__secondary {
+    &--vertical {
+      border-top: $bpk-input-border;
+    }
+
+    &--horizontal {
+      width: $bpk-one-pixel-rem * $fixed-secondary-width;
+      border-left: $bpk-input-border;
+
+      @include bpk-rtl {
+        border-right: $bpk-input-border;
+        border-left: unset;
+      }
+    }
+  }
+
+  &--no-elevation {
+    box-shadow: none;
+
+    &::after {
+      box-shadow: none;
+    }
+  }
+}

package/bpk-component-card/src/BpkDividedCard.tsx

@@ -0,0 +1,83 @@
+/*
+ * 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 type { ReactNode } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import BpkCard from './BpkCard';
+import STYLES from './BpkDividedCard.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export const ORIENTATION = {
+  horizontal: 'horizontal',
+  vertical: 'vertical',
+} as const;
+
+export type Props = {
+  primaryContent: ReactNode;
+  secondaryContent: ReactNode;
+  orientation?: (typeof ORIENTATION)[keyof typeof ORIENTATION];
+  href?: string | null;
+  className?: string | null;
+  isElevated?: boolean;
+  [rest: string]: any;
+};
+
+const BpkDividedCard = ({
+  className = null,
+  href = null,
+  isElevated = true,
+  orientation = ORIENTATION.horizontal,
+  primaryContent,
+  secondaryContent,
+  ...rest
+}: Props) => {
+  const isVertical = orientation === ORIENTATION.vertical;
+  const classNames = getClassName(
+    'bpk-divided-card',
+    isVertical ? 'bpk-divided-card--vertical' : 'bpk-divided-card--horizontal',
+    !isElevated && 'bpk-divided-card--no-elevation',
+    className,
+  );
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <BpkCard className={classNames} href={href} padded={false} {...rest}>
+      <div
+        className={getClassName(
+          !isVertical && 'bpk-divided-card__primary--horizontal',
+        )}
+      >
+        {primaryContent}
+      </div>
+      <div
+        className={getClassName(
+          isVertical
+            ? 'bpk-divided-card__secondary--vertical'
+            : 'bpk-divided-card__secondary--horizontal',
+        )}
+      >
+        {secondaryContent}
+      </div>
+    </BpkCard>
+  );
+};
+
+export default BpkDividedCard;

package/bpk-component-checkbox/README.md

@@ -0,0 +1,44 @@
+# bpk-component-checkbox
+
+> Backpack checkbox component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import BpkCheckbox from '@skyscanner/backpack-web/bpk-component-checkbox';
+
+export default () => (
+  <BpkCheckbox
+    name="prefer-directs"
+    onChange={() => console.log('prefer directs changed!')}
+    label="Prefer directs"
+    checked
+  />
+);
+```
+
+## Props
+
+| Property      | PropType | Required | Default Value |
+| ------------- | -------- | -------- | ------------- |
+| name          | string   | true     | -             |
+| label         | node     | true     | -             |
+| checked       | bool     | false    | false         |
+| disabled      | bool     | false    | false         |
+| indeterminate | bool     | false    | false         |
+| required      | bool     | false    | false         |
+| smallLabel    | bool     | false    | false         |
+| valid         | bool     | false    | null          |
+| white         | bool     | false    | false         |
+
+## `indeterminate` prop
+
+The indeterminate prop is only a visual clue, it does not affect the checked state of the checkbox. If `indeterminate` is flagged then the checkbox will be displayed with a minus sign in the box.  This is used when there is a checkbox group and the parent displays this state when not all child checkboxes are selected.
+
+## Theme Props
+
++ `checkboxCheckedColor`

package/bpk-component-checkbox/index.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.default;
-  }
-});
-var _BpkCheckbox = _interopRequireDefault(require("./src/BpkCheckbox"));
-var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -30,5 +15,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkCheckbox.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkCheckbox from './src/BpkCheckbox';
+import themeAttributes from './src/themeAttributes';
+
+export default BpkCheckbox;
+export { themeAttributes };

package/bpk-component-checkbox/src/BpkCheckbox.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 _BpkCheckboxModule = _interopRequireDefault(require("./BpkCheckbox.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checked", "className", "disabled", "indeterminate", "label", "name", "required", "smallLabel", "valid", "white"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -26,74 +15,111 @@ const _excluded = ["checked", "className", "disabled", "indeterminate", "label",
  * 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)(_BpkCheckboxModule.default);
-const BpkCheckbox = props => {
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import type { Node } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkCheckbox.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  name: string,
+  label: Node,
+  required: boolean,
+  disabled: boolean,
+  white: boolean,
+  className: ?string,
+  smallLabel: boolean,
+  valid: ?boolean,
+  checked: boolean,
+  indeterminate: boolean,
+};
+
+const BpkCheckbox = (props: Props) => {
   const {
-      checked,
-      className,
-      disabled,
-      indeterminate,
-      label,
-      name,
-      required,
-      smallLabel,
-      valid,
-      white
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+    checked,
+    className,
+    disabled,
+    indeterminate,
+    label,
+    name,
+    required,
+    smallLabel,
+    valid,
+    white,
+    ...rest
+  } = props;
 
   // Explicit check for false primitive value as undefined is
   // treated as neither valid nor invalid
   const isInvalid = valid === false;
-  const classNames = getClassName('bpk-checkbox', white && 'bpk-checkbox--white', disabled && 'bpk-checkbox--disabled', white && disabled && 'bpk-checkbox--disabled--white', isInvalid && 'bpk-checkbox--invalid', className);
-  const labelClassNames = getClassName('bpk-checkbox__label', smallLabel && 'bpk-checkbox__label--small');
-  const inputClasses = getClassName('bpk-checkbox__input', white && 'bpk-checkbox__input-white', indeterminate && 'bpk-checkbox__input-indeterminate');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-    className: classNames,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({
-      type: "checkbox",
-      className: inputClasses,
-      name: name,
-      disabled: disabled,
-      "aria-label": label,
-      "aria-invalid": isInvalid,
-      "data-indeterminate": indeterminate,
-      ref: e => {
-        if (e) {
-          e.indeterminate = indeterminate;
-        }
-      },
-      checked: checked
-    }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      className: labelClassNames,
-      "aria-hidden": "true",
-      children: [label, !disabled && required && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: getClassName('bpk-checkbox__asterisk'),
-        children: "*"
-      })]
-    })]
-  });
+
+  const classNames: string = getClassName(
+    'bpk-checkbox',
+    white && 'bpk-checkbox--white',
+    disabled && 'bpk-checkbox--disabled',
+    white && disabled && 'bpk-checkbox--disabled--white',
+    isInvalid && 'bpk-checkbox--invalid',
+    className,
+  );
+  const labelClassNames: string = getClassName(
+    'bpk-checkbox__label',
+    smallLabel && 'bpk-checkbox__label--small',
+  );
+  const inputClasses: string = getClassName(
+    'bpk-checkbox__input',
+    white && 'bpk-checkbox__input-white',
+    indeterminate && 'bpk-checkbox__input-indeterminate',
+  );
+
+  return (
+    <label className={classNames}>
+      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+      <input
+        type="checkbox"
+        className={inputClasses}
+        name={name}
+        disabled={disabled}
+        aria-label={label}
+        aria-invalid={isInvalid}
+        data-indeterminate={indeterminate}
+        ref={(e) => {
+          if (e) {
+            e.indeterminate = indeterminate;
+          }
+        }}
+        checked={checked}
+        {...rest}
+      />
+
+      <span className={labelClassNames} aria-hidden="true">
+        {label}
+        {!disabled && required && (
+          <span className={getClassName('bpk-checkbox__asterisk')}>*</span>
+        )}
+      </span>
+    </label>
+  );
 };
+
 BpkCheckbox.propTypes = {
-  name: _propTypes.default.string.isRequired,
-  label: _propTypes.default.node.isRequired,
-  required: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  white: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  smallLabel: _propTypes.default.bool,
-  valid: _propTypes.default.bool,
-  checked: _propTypes.default.bool,
-  indeterminate: _propTypes.default.bool
+  name: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  white: PropTypes.bool,
+  className: PropTypes.string,
+  smallLabel: PropTypes.bool,
+  valid: PropTypes.bool,
+  checked: PropTypes.bool,
+  indeterminate: PropTypes.bool,
 };
+
 BpkCheckbox.defaultProps = {
   required: false,
   disabled: false,
@@ -102,7 +128,7 @@ BpkCheckbox.defaultProps = {
   smallLabel: false,
   valid: null,
   checked: false,
-  indeterminate: false
+  indeterminate: false,
 };
-var _default = BpkCheckbox;
-exports.default = _default;
+
+export default BpkCheckbox;

package/bpk-component-checkbox/src/BpkCheckbox.module.scss

@@ -0,0 +1,78 @@
+/*
+ * 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;
+
+.bpk-checkbox {
+  @include bpk-checkbox;
+
+  &__label {
+    @include bpk-checkbox__label;
+
+    &--small {
+      @include bpk-checkbox__label--small;
+    }
+  }
+
+  &--white {
+    @include bpk-checkbox--white;
+  }
+
+  &--disabled {
+    @include bpk-checkbox--disabled;
+
+    &--white {
+      color: $bpk-text-disabled-on-dark-day;
+    }
+  }
+
+  &--invalid {
+    @include bpk-checkbox--invalid;
+  }
+
+  &__input {
+    @include bpk-checkbox__input;
+
+    &-indeterminate {
+      &::before {
+        position: absolute;
+        top: bpk-spacing-sm() + $bpk-one-pixel-rem;
+        left: bpk-spacing-sm() / 2;
+        content: '';
+        width: bpk-spacing-xxl() / 4;
+        height: bpk-spacing-sm() - $bpk-one-pixel-rem;
+        border-radius: $bpk-border-size-lg;
+        background-color: $bpk-surface-default-day;
+      }
+    }
+
+    &:disabled {
+      cursor: inherit;
+    }
+
+    &-white {
+      background-color: $bpk-surface-default-day;
+    }
+  }
+
+  &__asterisk {
+    color: $bpk-status-danger-spot-day;
+  }
+}

package/bpk-component-checkbox/src/themeAttributes.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -21,5 +15,7 @@ exports.default = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = ['checkboxCheckedColor'];
-exports.default = _default;
+
+/* @flow strict */
+
+export default ['checkboxCheckedColor'];

package/bpk-component-chip/README.md

@@ -0,0 +1,135 @@
+# bpk-component-chip
+
+> Backpack chip component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```tsx
+import BpkSelectableChip, { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES } from '@skyscanner/backpack-web/bpk-component-chip';
+import BeachIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/beach';
+
+export default () => (
+
+  <div style={{ display: 'flex' }}> // IMPORTANT: Flex styles make sure chips align with each other
+    // Standard selectable chip.
+    <BpkSelectableChip
+      accessibilityLabel="Press to toggle chip"
+      selected={false}
+      onClick={() => { /* Use state to set 'selected={true}' */ }}
+    >
+      Toggle me
+    </BpkSelectableChip>
+
+    // Selectable chip with an icon.
+    <BpkSelectableChip
+      accessibilityLabel="Press to toggle chip"
+      selected={false}
+      onClick={() => { /* Use state to set 'selected={true}' */ }}
+      leadingAccessoryView={<BeachIconSm />}
+    >
+      Toggle me
+    </BpkSelectableChip>
+
+    // Standard dropdown chip.
+    <BpkDropdownChip
+      accessibilityLabel="Press to toggle chip"
+      selected={false}
+      onClick={() => { /* Use state to set 'selected={true}' */ }}
+    >
+      Toggle me
+    </BpkDropdownChip>
+
+    // Dropdown chip with an icon.
+    <BpkDropdownChip
+      accessibilityLabel="Press to toggle chip"
+      selected={false}
+      onClick={() => { /* Use state to set 'selected={true}' */ }}
+      leadingAccessoryView={<BeachIconSm />}
+    >
+      Toggle me
+    </BpkDropdownChip>
+
+    // Standard dismissible chip.
+    <BpkDismissibleChip
+      accessibilityLabel="Press to dismiss chip"
+      onClick={() => { /* Use state to handle removing this chip. */ }}
+    >
+      Dismiss me
+    </BpkDismissibleChip>
+
+    // Dismissible chip with an icon.
+      <BpkDismissibleChip
+      accessibilityLabel="Press to dismiss chip"
+      onClick={() => { /* Use state to handle removing this chip. */ }}
+      leadingAccessoryView={<BeachIconSm />}
+    >
+      Dismiss me
+    </BpkDismissibleChip>
+  </div>
+);
+```
+
+## Props
+
+### BpkSelectableChip
+
+| Property              | PropType                                                              | Required | Default Value |
+| --------------------- | --------------------------------------------------------------------- | -------- | ------------- |
+| accessibilityLabel    | string                                                                | true     | -             |
+| children              | node                                                                  | true     | -             |
+| onClick               | func                                                                  | true     | -             |
+| className             | string                                                                | false    | null          |
+| disabled              | bool                                                                  | false    | false         |
+| leadingAccessoryView  | node                                                                  | false    | null          |
+| selected              | bool                                                                  | false    | false         |
+| trailingAccessoryView | node                                                                  | false    | null          |
+| type                  | oneOf(`CHIP_TYPES.onDark`, `CHIP_TYPES.default`, `CHIP_TYPES.onImage`) |
+
+### BpkDropdownChip
+
+| Property              | PropType                                                              | Required | Default Value |
+| --------------------- | --------------------------------------------------------------------- | -------- | ------------- |
+| accessibilityLabel    | string                                                                | true     | -             |
+| children              | node                                                                  | true     | -             |
+| onClick               | func                                                                  | true     | -             |
+| className             | string                                                                | false    | null          |
+| disabled              | bool                                                                  | false    | false         |
+| leadingAccessoryView  | node                                                                  | false    | null          |
+| selected              | bool                                                                  | false    | false         |
+| type                  | oneOf(`CHIP_TYPES.onDark`, `CHIP_TYPES.default`, `CHIP_TYPES.onImage`) |
+
+### BpkDismissibleChip
+
+Dismissible chips are selectable chips that have been preconfigured to have a 'close' icon trailing accessory view and cannot be selected, so they have the same props as `BpkSelectableChip`, minus `trailingAccessoryView` and `selected`.
+
+| Property             | PropType                                                              | Required | Default Value |
+| -------------------- | --------------------------------------------------------------------- | -------- | ------------- |
+| accessibilityLabel   | string                                                                | true     | -             |
+| children             | node                                                                  | true     | -             |
+| onClick              | func                                                                  | true     | -             |
+| className            | string                                                                | false    | null          |
+| leadingAccessoryView | node                                                                  | false    | null          |
+| type                 | oneOf(`CHIP_TYPES.onDark`, `CHIP_TYPES.default`, `CHIP_TYPES.onImage`) |
+
+## Theme Props
+
+### Default
+
+- `chipDefaultSelectedBackgroundColor`
+- `chipDefaultSelectedTextColor`
+
+### On Dark
+
+- `chipOnDarkSelectedBackgroundColor`
+- `chipOnDarkSelectedTextColor`
+
+### On Image
+
+- `chipOnImageSelectedBackgroundColor`
+- `chipOnImageSelectedHoverBackgroundColor`
+- `chipOnImageSelectedActiveBackgroundColor`
+- `chipOnImageSelectedTextColor`