@skyscanner/backpack-web 6.0.0-alpha.0 → 6.0.0-alpha.1

package/bpk-component-chip/README.md

@@ -0,0 +1,111 @@
+# bpk-component-chip
+
+> Backpack chip component.
+
+## Installation
+
+```sh
+npm install bpk-component-chip --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkSelectableChip, { BpkDismissibleChip, CHIP_TYPES } from 'bpk-component-chip';
+import BeachIconSm from '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 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.light`, `CHIP_TYPES.primary`, `CHIP_TYPES.success`) |
+
+### 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          |
+| disabled             | bool                                                                  | false    | false         |
+| leadingAccessoryView | node                                                                  | false    | null          |
+| type                 | oneOf(`CHIP_TYPES.light`, `CHIP_TYPES.primary`, `CHIP_TYPES.success`) |
+
+## Theme Props
+
+### Primary
+
+- `chipPrimarySelectedBackgroundColor`
+- `chipPrimarySelectedHoverBackgroundColor`
+- `chipPrimarySelectedActiveBackgroundColor`
+- `chipPrimarySelectedTextColor`
+
+### Light
+
+- `chipLightSelectedBackgroundColor`
+- `chipLightSelectedHoverBackgroundColor`
+- `chipLightSelectedActiveBackgroundColor`
+- `chipLightSelectedTextColor`
+
+### Success
+
+- `chipSuccessSelectedBackgroundColor`
+- `chipSuccessSelectedHoverBackgroundColor`
+- `chipSuccessSelectedActiveBackgroundColor`
+- `chipSuccessSelectedTextColor`

package/bpk-component-chip/index.js

@@ -1,38 +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
  *
@@ -50,5 +15,20 @@ 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 { CHIP_TYPES } from './src/commonTypes';
+import themeAttributes from './src/themeAttributes';
+
+export type BpkSelectableChipProps = SelectableProps;
+export type BpkDismissibleChipProps = DismissibleProps;
+
+export default BpkSelectableChip;
+export { BpkDismissibleChip, CHIP_TYPES, themeAttributes };

package/bpk-component-chip/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "bpk-component-chip",
+  "version": "5.2.16",
+  "description": "Backpack chip component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
+  "dependencies": {
+    "bpk-component-icon": "^9.2.12",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^5.0.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-aria-live": "^2.1.18",
+    "bpk-component-text": "^7.0.5"
+  }
+}

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

@@ -1,34 +1,55 @@
-"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 _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({}, 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 selected={false} and a trailing accessory view
+of a close icon.
+*/
+
+import React from 'react';
+import CloseCircleIconSm from '../../bpk-component-icon/sm/close-circle';
+
+import BpkSelectableChip from './BpkSelectableChip';
+import {
+  COMMON_PROP_TYPES,
+  COMMON_DEFAULT_PROPS,
+  type CommonProps,
+} from './commonTypes';
+
+export type Props = CommonProps;
+
+const BpkDismissibleChip = (props: Props) => {
+  const { ...rest } = props;
+
+  return (
+    <BpkSelectableChip
+      {...rest}
+      trailingAccessoryView={<CloseCircleIconSm />}
+      selected={false}
+      role="button" // Override role="checkbox" because this chip is not selectable.
+    />
+  );
 };
 
-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/BpkSelectableChip.js

@@ -1,45 +1,45 @@
-"use strict";
-
-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.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);
+/*
+ * 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 */
+
+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 => {
+const BpkSelectableChip = (props: Props) => {
   const {
     accessibilityLabel,
     children,
@@ -49,40 +49,56 @@ const BpkSelectableChip = props => {
     role,
     selected,
     trailingAccessoryView,
-    type
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
+    type,
+    ...rest
+  } = props;
+
+  const classNames = getClassName(
+    'bpk-chip',
+    `bpk-chip--${type}`,
+    disabled && 'bpk-chip--disabled',
+    !disabled && selected && `bpk-chip--${type}-selected`,
+    className,
+  );
 
-  const classNames = getClassName('bpk-chip', `bpk-chip--${type}`, disabled && 'bpk-chip--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.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';
+
+.bpk-chip {
+  @include bpk-chip;
+}

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

@@ -1,14 +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
  *
@@ -26,30 +15,46 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const CHIP_TYPES = {
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import { type Node } from 'react';
+
+export const CHIP_TYPES = {
   light: 'light',
   primary: 'primary',
-  success: 'success'
+  success: 'success',
 };
-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.primary,
 };
-exports.COMMON_DEFAULT_PROPS = COMMON_DEFAULT_PROPS;

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

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,5 +15,20 @@ exports.default = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = ['chipPrimarySelectedBackgroundColor', 'chipPrimarySelectedHoverBackgroundColor', 'chipPrimarySelectedActiveBackgroundColor', 'chipPrimarySelectedTextColor', 'chipLightSelectedBackgroundColor', 'chipLightSelectedHoverBackgroundColor', 'chipLightSelectedActiveBackgroundColor', 'chipLightSelectedTextColor', 'chipSuccessSelectedBackgroundColor', 'chipSuccessSelectedHoverBackgroundColor', 'chipSuccessSelectedActiveBackgroundColor', 'chipSuccessSelectedTextColor'];
-exports.default = _default;
+
+/* @flow strict */
+
+export default [
+  'chipPrimarySelectedBackgroundColor',
+  'chipPrimarySelectedHoverBackgroundColor',
+  'chipPrimarySelectedActiveBackgroundColor',
+  'chipPrimarySelectedTextColor',
+  'chipLightSelectedBackgroundColor',
+  'chipLightSelectedHoverBackgroundColor',
+  'chipLightSelectedActiveBackgroundColor',
+  'chipLightSelectedTextColor',
+  'chipSuccessSelectedBackgroundColor',
+  'chipSuccessSelectedHoverBackgroundColor',
+  'chipSuccessSelectedActiveBackgroundColor',
+  'chipSuccessSelectedTextColor',
+];

package/bpk-component-close-button/README.md

@@ -0,0 +1,27 @@
+# bpk-component-close-button
+
+> Backpack close button component.
+
+## Installation
+
+```sh
+npm install bpk-component-close-button --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkCloseButton from 'bpk-component-close-button';
+
+export default () => (
+  <BpkCloseButton label="Close" onClick={() => console.log('click')} />
+);
+```
+
+## Props
+
+| Property | PropType | Required | Default Value |
+| -------- | -------- | -------- | ------------- |
+| label    | string   | true     | -             |
+| onClick  | func     | true     | -             |

package/bpk-component-close-button/index.js

@@ -1,14 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _BpkCloseButton = _interopRequireDefault(require("./src/BpkCloseButton"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -26,5 +15,9 @@ 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 = _BpkCloseButton.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkCloseButton from './src/BpkCloseButton';
+
+export default BpkCloseButton;