@skyscanner/backpack-web 14.2.0-beta.1 → 15.1.0

package/bpk-component-chip/README.md

@@ -0,0 +1,136 @@
+# bpk-component-chip
+
+> Backpack chip component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import React from 'react';
+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`

package/bpk-component-chip/index.js

@@ -1,32 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BpkDismissibleChip", {
-  enumerable: true,
-  get: function () {
-    return _BpkDismissibleChip.default;
-  }
-});
-Object.defineProperty(exports, "CHIP_TYPES", {
-  enumerable: true,
-  get: function () {
-    return _commonTypes.CHIP_TYPES;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.default;
-  }
-});
-var _BpkSelectableChip = _interopRequireDefault(require("./src/BpkSelectableChip"));
-var _BpkDismissibleChip = _interopRequireDefault(require("./src/BpkDismissibleChip"));
-var _commonTypes = require("./src/commonTypes");
-var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -44,5 +15,24 @@ 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 = _BpkSelectableChip.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkSelectableChip, {
+  type Props as SelectableProps,
+} from './src/BpkSelectableChip';
+import BpkDismissibleChip, {
+  type Props as DismissibleProps,
+} from './src/BpkDismissibleChip';
+import BpkDropdownChip, {
+  type Props as DropdownProps,
+} from './src/BpkDropdownChip';
+import { CHIP_TYPES } from './src/commonTypes';
+import themeAttributes from './src/themeAttributes';
+
+export type BpkSelectableChipProps = SelectableProps;
+export type BpkDismissibleChipProps = DismissibleProps;
+export type BpkDropdownChipProps = DropdownProps;
+
+export default BpkSelectableChip;
+export { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES, themeAttributes };

package/bpk-component-chip/src/BpkDismissibleChip.js

@@ -1,26 +1,67 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _closeCircle = _interopRequireDefault(require("../../bpk-component-icon/sm/close-circle"));
-var _BpkSelectableChip = _interopRequireDefault(require("./BpkSelectableChip"));
-var _commonTypes = require("./commonTypes");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const BpkDismissibleChip = props => {
-  const rest = _extends({}, (_objectDestructuringEmpty(props), props));
-  return /*#__PURE__*/_react.default.createElement(_BpkSelectableChip.default, _extends({}, rest, {
-    trailingAccessoryView: /*#__PURE__*/_react.default.createElement(_closeCircle.default, null),
-    selected: false,
-    role: "button" // Override role="checkbox" because this chip is not selectable.
-  }));
+/*
+ * 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.
+ */
+
+/* @flow strict */
+
+/*
+The dismissible chip component is just a selectable chip that's
+been hard coded to have disabled={false}, selected and a trailing
+accessory view of a close icon.
+*/
+
+import React from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+import CloseCircleIconSm from '../../bpk-component-icon/sm/close-circle';
+
+import BpkSelectableChip from './BpkSelectableChip';
+import {
+  COMMON_PROP_TYPES,
+  COMMON_DEFAULT_PROPS,
+  type CommonProps,
+} from './commonTypes';
+import STYLES from './BpkSelectableChip.module.scss';
+
+export type Props = CommonProps;
+
+const getClassName = cssModules(STYLES);
+
+const BpkDismissibleChip = (props: Props) => {
+  const { className, type, ...rest } = props;
+  const iconClassNames = getClassName(
+    `bpk-chip--${type}-dismissible__trailing-accessory-view`,
+  );
+  const classNames = getClassName(`bpk-chip--${type}-dismissible`, className);
+
+  return (
+    <BpkSelectableChip
+      {...rest}
+      disabled={false}
+      trailingAccessoryView={<CloseCircleIconSm className={iconClassNames} />}
+      selected
+      type={type}
+      role="button" // Override role="checkbox" because this chip is not selectable.
+      className={classNames}
+    />
+  );
 };
 
-BpkDismissibleChip.propTypes = _commonTypes.COMMON_PROP_TYPES;
-BpkDismissibleChip.defaultProps = _commonTypes.COMMON_DEFAULT_PROPS;
-var _default = BpkDismissibleChip;
-exports.default = _default;
+BpkDismissibleChip.propTypes = COMMON_PROP_TYPES;
+BpkDismissibleChip.defaultProps = COMMON_DEFAULT_PROPS;
+
+export default BpkDismissibleChip;

package/bpk-component-chip/src/BpkDropdownChip.js

@@ -0,0 +1,53 @@
+/*
+ * 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.
+ */
+
+/* @flow strict */
+
+/*
+The dropdown chip component is just a selectable chip component
+with a trailing accessory view of a chevron down icon.
+*/
+
+import React from 'react';
+
+import ChevronDownIconSm from '../../bpk-component-icon/sm/chevron-down';
+
+import BpkSelectableChip from './BpkSelectableChip';
+import {
+  COMMON_PROP_TYPES,
+  COMMON_DEFAULT_PROPS,
+  type CommonProps,
+} from './commonTypes';
+
+export type Props = CommonProps;
+
+const BpkDropdownChip = (props: Props) => {
+  const { ...rest } = props;
+
+  return (
+    <BpkSelectableChip
+      {...rest}
+      trailingAccessoryView={<ChevronDownIconSm />}
+    />
+  );
+};
+
+BpkDropdownChip.propTypes = COMMON_PROP_TYPES;
+BpkDropdownChip.defaultProps = COMMON_DEFAULT_PROPS;
+
+export default BpkDropdownChip;

package/bpk-component-chip/src/BpkSelectableChip.js

@@ -1,68 +1,106 @@
-"use strict";
+/*
+ * 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.
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _bpkComponentText = _interopRequireWildcard(require("../../bpk-component-text"));
-var _BpkSelectableChipModule = _interopRequireDefault(require("./BpkSelectableChip.module.css"));
-var _commonTypes = require("./commonTypes");
-const _excluded = ["accessibilityLabel", "children", "className", "disabled", "leadingAccessoryView", "role", "selected", "trailingAccessoryView", "type"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-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)(_BpkSelectableChipModule.default);
-const BpkSelectableChip = props => {
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import React, { type Node } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
+
+import STYLES from './BpkSelectableChip.module.scss';
+import {
+  COMMON_PROP_TYPES,
+  COMMON_DEFAULT_PROPS,
+  type CommonProps,
+} from './commonTypes';
+
+const getClassName = cssModules(STYLES);
+
+export type Props = {
+  ...CommonProps,
+  role: string,
+  selected: boolean,
+  trailingAccessoryView: ?Node,
+};
+
+const BpkSelectableChip = (props: Props) => {
   const {
-      accessibilityLabel,
-      children,
-      className,
-      disabled,
-      leadingAccessoryView,
-      role,
-      selected,
-      trailingAccessoryView,
-      type
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
-  const classNames = getClassName('bpk-chip', `bpk-chip--${type}`, disabled && 'bpk-chip--disabled', !disabled && selected && `bpk-chip--${type}-selected`, className);
+    accessibilityLabel,
+    children,
+    className,
+    disabled,
+    leadingAccessoryView,
+    role,
+    selected,
+    trailingAccessoryView,
+    type,
+    ...rest
+  } = props;
+
+  const classNames = getClassName(
+    'bpk-chip',
+    `bpk-chip--${type}`,
+    disabled && 'bpk-chip--disabled',
+    disabled && `bpk-chip--${type}-disabled`,
+    !disabled && selected && `bpk-chip--${type}-selected`,
+    className,
+  );
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'
-    _react.default.createElement("button", _extends({
-      "aria-checked": role === 'button' ? null : selected,
-      className: classNames,
-      disabled: disabled,
-      role: role,
-      title: accessibilityLabel,
-      type: "button"
-    }, rest), leadingAccessoryView && /*#__PURE__*/_react.default.createElement("span", {
-      className: getClassName('bpk-chip__leading-accessory-view')
-    }, leadingAccessoryView), /*#__PURE__*/_react.default.createElement(_bpkComponentText.default, {
-      textStyle: _bpkComponentText.TEXT_STYLES.footnote
-    }, children), trailingAccessoryView && /*#__PURE__*/_react.default.createElement("span", {
-      className: getClassName('bpk-chip__trailing-accessory-view')
-    }, trailingAccessoryView))
+    <button
+      aria-checked={role === 'button' ? null : selected}
+      className={classNames}
+      disabled={disabled}
+      role={role}
+      title={accessibilityLabel}
+      type="button"
+      {...rest}
+    >
+      {leadingAccessoryView && (
+        <span className={getClassName('bpk-chip__leading-accessory-view')}>
+          {leadingAccessoryView}
+        </span>
+      )}
+      <BpkText textStyle={TEXT_STYLES.footnote}>{children}</BpkText>
+      {trailingAccessoryView && (
+        <span className={getClassName('bpk-chip__trailing-accessory-view')}>
+          {trailingAccessoryView}
+        </span>
+      )}
+    </button>
   );
 };
-BpkSelectableChip.propTypes = _objectSpread(_objectSpread({}, _commonTypes.COMMON_PROP_TYPES), {}, {
-  role: _propTypes.default.string,
-  selected: _propTypes.default.bool,
-  trailingAccessoryView: _propTypes.default.node
-});
-BpkSelectableChip.defaultProps = _objectSpread(_objectSpread({}, _commonTypes.COMMON_DEFAULT_PROPS), {}, {
+
+BpkSelectableChip.propTypes = {
+  ...COMMON_PROP_TYPES,
+  role: PropTypes.string,
+  selected: PropTypes.bool,
+  trailingAccessoryView: PropTypes.node,
+};
+
+BpkSelectableChip.defaultProps = {
+  ...COMMON_DEFAULT_PROPS,
   role: 'checkbox',
   selected: false,
-  trailingAccessoryView: null
-});
-var _default = BpkSelectableChip;
-exports.default = _default;
+  trailingAccessoryView: null,
+};
+
+export default BpkSelectableChip;

package/bpk-component-chip/src/BpkSelectableChip.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:1.125rem}.bpk-chip--light{background-color:#fff;color:#111236;box-shadow:0 0 0 1px #8f90a0 inset}.bpk-no-touch-support .bpk-chip--light:hover:not(:active):not(:disabled){background-color:#f1f2f8}:global(.bpk-no-touch-support) .bpk-chip--light:hover:not(:active):not(:disabled){background-color:#f1f2f8}.bpk-chip--light:active:not(:disabled){background-color:#dddde5}.bpk-chip--light-selected{color:#fff;color:var(--bpk-chip-light-selected-text-color, #fff);background-color:#0062e3;background-color:var(--bpk-chip-light-selected-background-color, #0062e3);box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--light-selected:hover:not(:active):not(:disabled){background-color:#084eb2;background-color:var(--bpk-chip-light-selected-hover-background-color, #084eb2)}:global(.bpk-no-touch-support) .bpk-chip--light-selected:hover:not(:active):not(:disabled){background-color:#084eb2;background-color:var(--bpk-chip-light-selected-hover-background-color, #084eb2)}.bpk-chip--light-selected:active:not(:disabled){background-color:#042759;background-color:var(--bpk-chip-light-selected-active-background-color, #042759)}.bpk-chip--primary{background-color:#dddde5;color:#111236}.bpk-no-touch-support .bpk-chip--primary:hover:not(:active):not(:disabled){background-color:#cdcdd7}:global(.bpk-no-touch-support) .bpk-chip--primary:hover:not(:active):not(:disabled){background-color:#cdcdd7}.bpk-chip--primary:active:not(:disabled){background-color:#b2b2bf}.bpk-chip--primary-selected{color:#fff;color:var(--bpk-chip-primary-selected-text-color, #fff);background-color:#0062e3;background-color:var(--bpk-chip-primary-selected-background-color, #0062e3);box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--primary-selected:hover:not(:active):not(:disabled){background-color:#084eb2;background-color:var(--bpk-chip-primary-selected-hover-background-color, #084eb2)}:global(.bpk-no-touch-support) .bpk-chip--primary-selected:hover:not(:active):not(:disabled){background-color:#084eb2;background-color:var(--bpk-chip-primary-selected-hover-background-color, #084eb2)}.bpk-chip--primary-selected:active:not(:disabled){background-color:#042759;background-color:var(--bpk-chip-primary-selected-active-background-color, #042759)}.bpk-chip--success{background-color:#dddde5;color:#111236}.bpk-no-touch-support .bpk-chip--success:hover:not(:active):not(:disabled){background-color:#cdcdd7}:global(.bpk-no-touch-support) .bpk-chip--success:hover:not(:active):not(:disabled){background-color:#cdcdd7}.bpk-chip--success:active:not(:disabled){background-color:#b2b2bf}.bpk-chip--success-selected{color:#111236;color:var(--bpk-chip-success-selected-text-color, #111236);background-color:#73cec6;background-color:var(--bpk-chip-success-selected-background-color, #73cec6)}.bpk-no-touch-support .bpk-chip--success-selected:hover:not(:active):not(:disabled){background-color:#4dc1b7;background-color:var(--bpk-chip-success-selected-hover-background-color, #4dc1b7)}:global(.bpk-no-touch-support) .bpk-chip--success-selected:hover:not(:active):not(:disabled){background-color:#4dc1b7;background-color:var(--bpk-chip-success-selected-hover-background-color, #4dc1b7)}.bpk-chip--success-selected:active:not(:disabled){background-color:#00a698;background-color:var(--bpk-chip-success-selected-active-background-color, #00a698)}.bpk-chip--disabled{background-color:#dddde5;color:#cdcdd7;box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentColor;margin-left:0;margin-right:.5rem}html[dir='rtl'] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentColor;margin-left:.5rem;margin-right:0}html[dir='rtl'] .bpk-chip__trailing-accessory-view{margin-left:0;margin-right:.5rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:1.125rem}.bpk-chip--light{background-color:#fff;color:#111236;box-shadow:0 0 0 1px #8f90a0 inset}.bpk-no-touch-support .bpk-chip--light:hover:not(:active):not(:disabled){background-color:#f1f2f8}:global(.bpk-no-touch-support) .bpk-chip--light:hover:not(:active):not(:disabled){background-color:#f1f2f8}.bpk-chip--light:active:not(:disabled){background-color:#dddde5}.bpk-chip--light-selected{color:#fff;color:var(--bpk-chip-light-selected-text-color, #fff);background-color:#0770e3;background-color:var(--bpk-chip-light-selected-background-color, #0770e3);box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--light-selected:hover:not(:active):not(:disabled){background-color:#084eb2;background-color:var(--bpk-chip-light-selected-hover-background-color, #084eb2)}:global(.bpk-no-touch-support) .bpk-chip--light-selected:hover:not(:active):not(:disabled){background-color:#084eb2;background-color:var(--bpk-chip-light-selected-hover-background-color, #084eb2)}.bpk-chip--light-selected:active:not(:disabled){background-color:#042759;background-color:var(--bpk-chip-light-selected-active-background-color, #042759)}.bpk-chip--primary{background-color:#dddde5;color:#111236}.bpk-no-touch-support .bpk-chip--primary:hover:not(:active):not(:disabled){background-color:#cdcdd7}:global(.bpk-no-touch-support) .bpk-chip--primary:hover:not(:active):not(:disabled){background-color:#cdcdd7}.bpk-chip--primary:active:not(:disabled){background-color:#b2b2bf}.bpk-chip--primary-selected{color:#fff;color:var(--bpk-chip-primary-selected-text-color, #fff);background-color:#0770e3;background-color:var(--bpk-chip-primary-selected-background-color, #0770e3);box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--primary-selected:hover:not(:active):not(:disabled){background-color:#084eb2;background-color:var(--bpk-chip-primary-selected-hover-background-color, #084eb2)}:global(.bpk-no-touch-support) .bpk-chip--primary-selected:hover:not(:active):not(:disabled){background-color:#084eb2;background-color:var(--bpk-chip-primary-selected-hover-background-color, #084eb2)}.bpk-chip--primary-selected:active:not(:disabled){background-color:#042759;background-color:var(--bpk-chip-primary-selected-active-background-color, #042759)}.bpk-chip--success{background-color:#dddde5;color:#111236}.bpk-no-touch-support .bpk-chip--success:hover:not(:active):not(:disabled){background-color:#cdcdd7}:global(.bpk-no-touch-support) .bpk-chip--success:hover:not(:active):not(:disabled){background-color:#cdcdd7}.bpk-chip--success:active:not(:disabled){background-color:#b2b2bf}.bpk-chip--success-selected{color:#111236;color:var(--bpk-chip-success-selected-text-color, #111236);background-color:#73cec6;background-color:var(--bpk-chip-success-selected-background-color, #73cec6)}.bpk-no-touch-support .bpk-chip--success-selected:hover:not(:active):not(:disabled){background-color:#4dc1b7;background-color:var(--bpk-chip-success-selected-hover-background-color, #4dc1b7)}:global(.bpk-no-touch-support) .bpk-chip--success-selected:hover:not(:active):not(:disabled){background-color:#4dc1b7;background-color:var(--bpk-chip-success-selected-hover-background-color, #4dc1b7)}.bpk-chip--success-selected:active:not(:disabled){background-color:#00a698;background-color:var(--bpk-chip-success-selected-active-background-color, #00a698)}.bpk-chip--disabled{background-color:#dddde5;color:#cdcdd7;box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentColor;margin-left:0;margin-right:.5rem}html[dir='rtl'] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentColor;margin-left:.5rem;margin-right:0}html[dir='rtl'] .bpk-chip__trailing-accessory-view{margin-left:0;margin-right:.5rem}

package/bpk-component-chip/src/BpkSelectableChip.module.scss

@@ -0,0 +1,23 @@
+/*
+ * 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-chip {
+  @include bpk-chip;
+}

package/bpk-component-chip/src/commonTypes.js

@@ -1,11 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.COMMON_PROP_TYPES = exports.COMMON_DEFAULT_PROPS = exports.CHIP_TYPES = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -24,30 +16,45 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * limitations under the License.
  */
 
-const CHIP_TYPES = {
-  light: 'light',
-  primary: 'primary',
-  success: 'success'
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import { type Node } from 'react';
+
+export const CHIP_TYPES = {
+  default: 'default',
+  onDark: 'on-dark',
+  onImage: 'on-image',
 };
-exports.CHIP_TYPES = CHIP_TYPES;
-const COMMON_PROP_TYPES = {
-  accessibilityLabel: _propTypes.default.string.isRequired,
-  children: _propTypes.default.node.isRequired,
-  onClick: _propTypes.default.func.isRequired,
-  className: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  leadingAccessoryView: _propTypes.default.node,
-  selected: _propTypes.default.bool,
-  trailingAccessoryView: _propTypes.default.node,
-  type: _propTypes.default.oneOf(Object.keys(CHIP_TYPES))
+
+export type CommonProps = {
+  accessibilityLabel: string,
+  children: Node,
+  disabled: boolean,
+  onClick: (event: SyntheticEvent<>) => mixed,
+  selected: boolean,
+  type: $Keys<typeof CHIP_TYPES>,
+  className: ?string,
+  leadingAccessoryView: ?Node,
 };
-exports.COMMON_PROP_TYPES = COMMON_PROP_TYPES;
-const COMMON_DEFAULT_PROPS = {
+
+export const COMMON_PROP_TYPES = {
+  accessibilityLabel: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  leadingAccessoryView: PropTypes.node,
+  selected: PropTypes.bool,
+  trailingAccessoryView: PropTypes.node,
+  type: PropTypes.oneOf(Object.keys(CHIP_TYPES)),
+};
+
+export const COMMON_DEFAULT_PROPS = {
   className: null,
   disabled: false,
   leadingAccessoryView: null,
   selected: false,
   trailingAccessoryView: null,
-  type: CHIP_TYPES.primary
+  type: CHIP_TYPES.default,
 };
-exports.COMMON_DEFAULT_PROPS = COMMON_DEFAULT_PROPS;