@skyscanner/backpack-web 0.0.1

package/bpk-component-chip/examples.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-chip-examples__wrapper{display:flex;flex-wrap:wrap}.bpk-chip-examples__chip{margin-right:.375rem;margin-bottom:.75rem}

package/bpk-component-chip/examples.module.scss

@@ -0,0 +1,33 @@
+/*
+ * 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';
+
+$custom-color: $bpk-color-sagano;
+
+.bpk-chip-examples {
+  &__wrapper {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__chip {
+    margin-right: $bpk-spacing-xs;
+    margin-bottom: $bpk-spacing-sm;
+  }
+}

package/bpk-component-chip/index.js

@@ -0,0 +1,34 @@
+/*
+ * 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 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.0",
+  "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.0",
+    "bpk-mixins": "^26.1.0",
+    "bpk-react-utils": "^4.1.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "bpk-component-aria-live": "^2.1.0",
+    "bpk-component-text": "^6.1.0"
+  }
+}

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

@@ -0,0 +1,55 @@
+/*
+ * 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 = COMMON_PROP_TYPES;
+BpkDismissibleChip.defaultProps = COMMON_DEFAULT_PROPS;
+
+export default BpkDismissibleChip;

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

@@ -0,0 +1,104 @@
+/*
+ * 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: Props) => {
+  const {
+    accessibilityLabel,
+    children,
+    className,
+    disabled,
+    leadingAccessoryView,
+    role,
+    selected,
+    trailingAccessoryView,
+    type,
+    ...rest
+  } = props;
+
+  const classNames = getClassName(
+    'bpk-chip',
+    `bpk-chip--${type}`,
+    disabled && 'bpk-chip--disabled',
+    !disabled && selected && `bpk-chip--${type}-selected`,
+    className,
+  );
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'
+    <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.sm}>{children}</BpkText>
+      {trailingAccessoryView && (
+        <span className={getClassName('bpk-chip__trailing-accessory-view')}>
+          {trailingAccessoryView}
+        </span>
+      )}
+    </button>
+  );
+};
+
+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,
+};
+
+export default BpkSelectableChip;

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

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

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

@@ -0,0 +1,60 @@
+/*
+ * 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 { type Node } from 'react';
+
+export const CHIP_TYPES = {
+  light: 'light',
+  primary: 'primary',
+  success: 'success',
+};
+
+export type CommonProps = {
+  accessibilityLabel: string,
+  children: Node,
+  disabled: boolean,
+  onClick: (event: SyntheticEvent<>) => mixed,
+  selected: boolean,
+  type: $Keys<typeof CHIP_TYPES>,
+  className: ?string,
+  leadingAccessoryView: ?Node,
+};
+
+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,
+};

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

@@ -0,0 +1,34 @@
+/*
+ * 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 */
+
+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/examples.js

@@ -0,0 +1,30 @@
+/*
+ * 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 React from 'react';
+import { action } from 'bpk-storybook-utils';
+
+import BpkCloseButton from './index';
+
+const DefaultExample = () => (
+  <BpkCloseButton label="Close" onClick={action('Close button clicked')} />
+);
+
+export default DefaultExample;

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

@@ -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.
+ */
+
+/* @flow strict */
+
+import BpkCloseButton from './src/BpkCloseButton';
+
+export default BpkCloseButton;

package/bpk-component-close-button/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-close-button",
+  "version": "3.1.0",
+  "description": "Backpack close button 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": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
+  "dependencies": {
+    "bpk-component-icon": "^9.2.0",
+    "bpk-mixins": "^26.1.0",
+    "bpk-react-utils": "^4.1.0",
+    "prop-types": "^15.7.2"
+  },
+  "devDependencies": {
+    "bpk-storybook-utils": "^1.1.0"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-component-close-button/src/BpkCloseButton.js

@@ -0,0 +1,73 @@
+/*
+ * 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 StatelessFunctionalComponent } from 'react';
+import CloseIcon from 'bpk-component-icon/sm/close';
+import { cssModules } from 'bpk-react-utils';
+
+import STYLES from './BpkCloseButton.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  label: string,
+  onClick: (event: SyntheticEvent<>) => mixed,
+  className: ?string,
+  customIcon: ?StatelessFunctionalComponent<any>,
+};
+
+const BpkCloseButton = (props: Props) => {
+  const classNames = [getClassName('bpk-close-button')];
+  const { className, customIcon, label, onClick, ...rest } = props;
+  const Icon = customIcon || CloseIcon;
+
+  if (className) {
+    classNames.push(className);
+  }
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
+    <button
+      type="button"
+      title={label}
+      onClick={onClick}
+      aria-label={label}
+      className={classNames.join(' ')}
+      {...rest}
+    >
+      <Icon className={getClassName('bpk-close-button__icon')} />
+    </button>
+  );
+};
+
+BpkCloseButton.propTypes = {
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  customIcon: PropTypes.func,
+};
+
+BpkCloseButton.defaultProps = {
+  className: null,
+  customIcon: null,
+};
+
+export default BpkCloseButton;

package/bpk-component-close-button/src/BpkCloseButton.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-close-button{width:1.5rem;height:1.5rem;margin-right:-.1875rem;margin-left:-.1875rem;padding:0;border:0;background-color:transparent;color:#68697f;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc((-2.625rem / 2) + 50%);left:calc((-2.625rem / 2) + 50%);content:'';width:2.625rem;height:2.625rem}.bpk-no-touch-support .bpk-close-button:hover:not(:active):not(:disabled){color:#444560}:global(.bpk-no-touch-support) .bpk-close-button:hover:not(:active):not(:disabled){color:#444560}.bpk-close-button:active{color:#111236}.bpk-close-button__icon{vertical-align:-.1875rem;fill:currentColor}

package/bpk-component-close-button/src/BpkCloseButton.module.scss

@@ -0,0 +1,51 @@
+/*
+ * 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';
+
+$button-padding: $bpk-spacing-xs / 2;
+
+.bpk-close-button {
+  width: $bpk-spacing-base;
+  height: $bpk-spacing-base;
+  // The margin here is used to ensure that the icon is aligned to
+  // the leading or trailing edge of its parent container
+  margin-right: -#{$button-padding};
+  margin-left: -#{$button-padding};
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: $bpk-color-sky-gray-tint-02;
+  cursor: pointer;
+  appearance: none;
+
+  @include bpk-touch-tappable;
+
+  @include bpk-hover {
+    color: $bpk-color-sky-gray-tint-01;
+  }
+
+  &:active {
+    color: $bpk-color-sky-gray;
+  }
+
+  &__icon {
+    vertical-align: -#{$button-padding};
+    fill: currentColor;
+  }
+}