@skyscanner/backpack-web 14.0.0 → 15.0.0

package/bpk-component-chip/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-chip --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkSelectableChip, { BpkDismissibleChip, CHIP_TYPES } from 'bpk-component-chip';
-import BeachIconSm from 'bpk-component-icon/sm/beach';
+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 () => (
 
@@ -37,6 +35,25 @@ export default () => (
       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"
@@ -71,7 +88,20 @@ export default () => (
 | leadingAccessoryView  | node                                                                  | false    | null          |
 | selected              | bool                                                                  | false    | false         |
 | trailingAccessoryView | node                                                                  | false    | null          |
-| type                  | oneOf(`CHIP_TYPES.light`, `CHIP_TYPES.primary`, `CHIP_TYPES.success`) |
+| 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
 
@@ -83,29 +113,24 @@ Dismissible chips are selectable chips that have been preconfigured to have a 'c
 | 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`) |
+| type                 | oneOf(`CHIP_TYPES.onDark`, `CHIP_TYPES.default`, `CHIP_TYPES.onImage`) |
 
 ## Theme Props
 
-### Primary
+### Default
 
-- `chipPrimarySelectedBackgroundColor`
-- `chipPrimarySelectedHoverBackgroundColor`
-- `chipPrimarySelectedActiveBackgroundColor`
-- `chipPrimarySelectedTextColor`
+- `chipDefaultSelectedBackgroundColor`
+- `chipDefaultSelectedTextColor`
 
-### Light
+### On Dark
 
-- `chipLightSelectedBackgroundColor`
-- `chipLightSelectedHoverBackgroundColor`
-- `chipLightSelectedActiveBackgroundColor`
-- `chipLightSelectedTextColor`
+- `chipOnDarkSelectedBackgroundColor`
+- `chipOnDarkSelectedTextColor`
 
-### Success
+### On Image
 
-- `chipSuccessSelectedBackgroundColor`
-- `chipSuccessSelectedHoverBackgroundColor`
-- `chipSuccessSelectedActiveBackgroundColor`
-- `chipSuccessSelectedTextColor`
+- `chipOnImageSelectedBackgroundColor`
+- `chipOnImageSelectedHoverBackgroundColor`
+- `chipOnImageSelectedActiveBackgroundColor`
+- `chipOnImageSelectedTextColor`

package/bpk-component-chip/index.js

@@ -24,11 +24,15 @@ import 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, CHIP_TYPES, themeAttributes };
+export { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES, themeAttributes };

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

@@ -20,12 +20,13 @@
 
 /*
 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.
+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';
@@ -34,18 +35,28 @@ import {
   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 { ...rest } = 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}
-      trailingAccessoryView={<CloseCircleIconSm />}
-      selected={false}
+      disabled={false}
+      trailingAccessoryView={<CloseCircleIconSm className={iconClassNames} />}
+      selected
+      type={type}
       role="button" // Override role="checkbox" because this chip is not selectable.
+      className={classNames}
     />
   );
 };

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

@@ -58,6 +58,7 @@ const BpkSelectableChip = (props: Props) => {
     'bpk-chip',
     `bpk-chip--${type}`,
     disabled && 'bpk-chip--disabled',
+    disabled && `bpk-chip--${type}-disabled`,
     !disabled && selected && `bpk-chip--${type}-selected`,
     className,
   );

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

@@ -22,9 +22,9 @@ import PropTypes from 'prop-types';
 import { type Node } from 'react';
 
 export const CHIP_TYPES = {
-  light: 'light',
-  primary: 'primary',
-  success: 'success',
+  onDark: 'on-dark',
+  default: 'default',
+  onImage: 'on-image',
 };
 
 export type CommonProps = {
@@ -56,5 +56,5 @@ export const COMMON_DEFAULT_PROPS = {
   leadingAccessoryView: null,
   selected: false,
   trailingAccessoryView: null,
-  type: CHIP_TYPES.primary,
+  type: CHIP_TYPES.default,
 };

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

@@ -19,16 +19,12 @@
 /* @flow strict */
 
 export default [
-  'chipPrimarySelectedBackgroundColor',
-  'chipPrimarySelectedHoverBackgroundColor',
-  'chipPrimarySelectedActiveBackgroundColor',
-  'chipPrimarySelectedTextColor',
-  'chipLightSelectedBackgroundColor',
-  'chipLightSelectedHoverBackgroundColor',
-  'chipLightSelectedActiveBackgroundColor',
-  'chipLightSelectedTextColor',
-  'chipSuccessSelectedBackgroundColor',
-  'chipSuccessSelectedHoverBackgroundColor',
-  'chipSuccessSelectedActiveBackgroundColor',
-  'chipSuccessSelectedTextColor',
+  'chipDefaultSelectedBackgroundColor',
+  'chipDefaultSelectedTextColor',
+  'chipOnDarkSelectedBackgroundColor',
+  'chipOnDarkSelectedTextColor',
+  'chipOnImageSelectedBackgroundColor',
+  'chipOnImageSelectedHoverBackgroundColor',
+  'chipOnImageSelectedActiveBackgroundColor',
+  'chipOnImageSelectedTextColor',
 ];

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

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-close-button --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkCloseButton from 'bpk-component-close-button';
+import BpkCloseButton from '@skyscanner/backpack-web/bpk-component-close-button';
 
 export default () => (
   <BpkCloseButton label="Close" onClick={() => console.log('click')} />

package/bpk-component-code/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-code --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import { BpkCode, BpkCodeBlock } from 'bpk-component-code';
-import BpkText from 'bpk-component-text';
+import { BpkCode, BpkCodeBlock } from '@skyscanner/backpack-web/bpk-component-code';
+import BpkText from '@skyscanner/backpack-web/bpk-component-text';
 
 const codeBlock = `import React from 'react';
 import ReactDOM from 'react-dom';

package/bpk-component-content-cards/README.md

@@ -7,9 +7,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-content-cards --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 

package/bpk-component-content-container/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-content-container --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkContentContainer from 'bpk-component-content-container';
+import BpkContentContainer from '@skyscanner/backpack-web/bpk-component-content-container';
 
 export default () => (
   <BpkContentContainer>

package/bpk-component-datatable/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-datatable --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';
+import { BpkDataTable, BpkDataTableColumn } from '@skyscanner/backpack-web/bpk-component-datatable';
 
 const rows = [
   { name: 'Jose', description: 'Software Engineer' },
@@ -42,7 +40,7 @@ By default `BpkDataTable` sorts the column using the value of `dataKey`. For use
 
 ```js
 import React from 'react';
-import { BpkDataTable, BpkDataTableColumn } from 'bpk-component-datatable';
+import { BpkDataTable, BpkDataTableColumn } from '@skyscanner/backpack-web/bpk-component-datatable';
 
 const complexRows = [
     {

package/bpk-component-datepicker/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-datepicker --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkDatepicker, { CALENDAR_SELECTION_TYPE } from 'bpk-component-datepicker';
+import BpkDatepicker, { CALENDAR_SELECTION_TYPE } from '@skyscanner/backpack-web/bpk-component-datepicker';
 import format from 'date-fns/format';
 
 const formatDate = date => format(date, 'dd/MM/yyyy');
@@ -74,7 +72,7 @@ By default `BpkCalendar` is used but the calendar component is fully configurabl
 
 ```js
 import React, { Component } from 'react';
-import BpkDatepicker from 'bpk-component-datepicker';
+import BpkDatepicker from '@skyscanner/backpack-web/bpk-component-datepicker';
 import {
   BpkCalendarNav,
   BpkCalendarGridHeader,
@@ -82,7 +80,7 @@ import {
   BpkCalendarDate,
   withCalendarState,
   composeCalendar,
-} from 'bpk-component-calendar';
+} from '@skyscanner/backpack-web/bpk-component-calendar';
 import { colorSagano } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 const ColoredCalendarDate = props =>

package/bpk-component-description-list/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-description-list --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails } from 'bpk-component-description-list';
+import { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails } from '@skyscanner/backpack-web/bpk-component-description-list';
 
 export default () => (
   <BpkDescriptionList>

package/bpk-component-dialog/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-dialog --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkDialog from 'bpk-component-dialog';
-import BpkButton from 'bpk-component-button';
+import BpkDialog from '@skyscanner/backpack-web/bpk-component-dialog';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 
 class App extends Component {
   constructor() {

package/bpk-component-drawer/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-drawer --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkDrawer from 'bpk-component-drawer';
-import BpkButton from 'bpk-component-button';
+import BpkDrawer from '@skyscanner/backpack-web/bpk-component-drawer';
+import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 
 class App extends Component {
   constructor() {

package/bpk-component-fieldset/README.md

@@ -4,16 +4,14 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-fieldset --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkFieldset from 'bpk-component-fieldset';
-import BpkInput, { INPUT_TYPES } from 'bpk-component-input';
+import BpkFieldset from '@skyscanner/backpack-web/bpk-component-fieldset';
+import BpkInput, { INPUT_TYPES } from '@skyscanner/backpack-web/bpk-component-input';
 
 class FieldsetContainer extends Component {
   constructor(props) {

package/bpk-component-fieldset/src/BpkFieldset.module.scss

@@ -34,6 +34,6 @@ $bpk-spacing-v2: true;
   }
 
   &__label {
-    margin-bottom: bpk-spacing-md();
+    margin-bottom: bpk-spacing-sm();
   }
 }

package/bpk-component-flare/README.md

@@ -4,9 +4,7 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-flare --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
@@ -16,7 +14,7 @@ Note that the default background color is white. You will need to apply a custom
 
 ```js
 import React from 'react';
-import { BpkContentBubble } from 'bpk-component-flare';
+import { BpkContentBubble } from '@skyscanner/backpack-web/bpk-component-flare';
 
 export default MyComponent = () => (
   <div>

package/bpk-component-floating-notification/README.md

@@ -2,15 +2,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-floating-notification --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkFloatingNotification from 'bpk-component-floating-notification';
+import BpkFloatingNotification from '@skyscanner/backpack-web/bpk-component-floating-notification';
 import BpkIconHeart from '../../packages/bpk-component-icon/sm/heart';
 
 export default () => (

package/bpk-component-form-validation/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-form-validation --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkFormValidation from 'bpk-component-form-validation';
+import BpkFormValidation from '@skyscanner/backpack-web/bpk-component-form-validation';
 
 export default () => (
   <BpkFormValidation id="my-form-validation" expanded>

package/bpk-component-graphic-promotion/README.md

@@ -2,15 +2,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-graphic-promotion --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```tsx
 import React from 'react';
-import BpkGraphicPromo from 'bpk-component-graphic-promotion';
+import BpkGraphicPromo from '@skyscanner/backpack-web/bpk-component-graphic-promotion';
 
 export default () => (
   <BpkGraphicPromo

package/bpk-component-grid/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-grid --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import { BpkGridContainer, BpkGridRow, BpkGridColumn } from 'bpk-component-grid';
+import { BpkGridContainer, BpkGridRow, BpkGridColumn } from '@skyscanner/backpack-web/bpk-component-grid';
 
 export default () => (
   <BpkGridContainer>

package/bpk-component-grid-toggle/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-grid-toggle --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React from 'react';
-import BpkGridToggle from 'bpk-component-grid-toggle';
+import BpkGridToggle from '@skyscanner/backpack-web/bpk-component-grid-toggle';
 
 export default () => (
   <BpkGridToggle />

package/bpk-component-grid-toggle/src/BpkGridToggle.module.scss

@@ -35,7 +35,7 @@
       height: auto;
       background: linear-gradient(
           to bottom,
-          rgba($bpk-color-panjin, 0.3) 0,
+          rgba($bpk-status-danger-spot-day, 0.3) 0,
           transparent $bpk-one-pixel-rem
         )
         repeat left 0;

package/bpk-component-horizontal-nav/README.md

@@ -4,15 +4,13 @@
 
 ## Installation
 
-```sh
-npm install bpk-component-horizontal-nav --save-dev
-```
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
 
 ## Usage
 
 ```js
 import React, { Component } from 'react';
-import BpkHorizontalNav, { BpkHorizontalNavItem } from 'bpk-component-horizontal-nav';
+import BpkHorizontalNav, { BpkHorizontalNavItem } from '@skyscanner/backpack-web/bpk-component-horizontal-nav';
 
 export default class App extends Component {
   constructor() {