@skyscanner/backpack-web 14.1.0 → 15.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/bpk-component-chip/README.md +46 -19
  2. package/bpk-component-chip/index.js +5 -1
  3. package/bpk-component-chip/src/BpkDismissibleChip.js +16 -5
  4. package/bpk-component-chip/src/BpkDropdownChip.js +53 -0
  5. package/bpk-component-chip/src/BpkSelectableChip.js +1 -0
  6. package/bpk-component-chip/src/commonTypes.js +4 -4
  7. package/bpk-component-chip/src/themeAttributes.js +8 -12
  8. package/bpk-component-fieldset/src/BpkFieldset.module.scss +1 -1
  9. package/bpk-component-theme-toggle/src/theming.js +10 -14
  10. package/package.json +4 -4
package/bpk-component-chip/README.md CHANGED
@@ -10,7 +10,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
10
10
 
11
11
  ```js
12
12
  import React from 'react';
13
- import BpkSelectableChip, { BpkDismissibleChip, CHIP_TYPES } from '@skyscanner/backpack-web/bpk-component-chip';
13
+ import BpkSelectableChip, { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES } from '@skyscanner/backpack-web/bpk-component-chip';
14
14
  import BeachIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/beach';
15
15
 
16
16
  export default () => (
@@ -35,6 +35,25 @@ export default () => (
35
35
  Toggle me
36
36
  </BpkSelectableChip>
37
37
 
38
+ // Standard dropdown chip.
39
+ <BpkDropdownChip
40
+ accessibilityLabel="Press to toggle chip"
41
+ selected={false}
42
+ onClick={() => { /* Use state to set 'selected={true}' */ }}
43
+ >
44
+ Toggle me
45
+ </BpkDropdownChip>
46
+
47
+ // Dropdown chip with an icon.
48
+ <BpkDropdownChip
49
+ accessibilityLabel="Press to toggle chip"
50
+ selected={false}
51
+ onClick={() => { /* Use state to set 'selected={true}' */ }}
52
+ leadingAccessoryView={<BeachIconSm />}
53
+ >
54
+ Toggle me
55
+ </BpkDropdownChip>
56
+
38
57
  // Standard dismissible chip.
39
58
  <BpkDismissibleChip
40
59
  accessibilityLabel="Press to dismiss chip"
@@ -69,7 +88,20 @@ export default () => (
69
88
  | leadingAccessoryView | node | false | null |
70
89
  | selected | bool | false | false |
71
90
  | trailingAccessoryView | node | false | null |
72
- | type | oneOf(`CHIP_TYPES.light`, `CHIP_TYPES.primary`, `CHIP_TYPES.success`) |
91
+ | type | oneOf(`CHIP_TYPES.onDark`, `CHIP_TYPES.default`, `CHIP_TYPES.onImage`) |
92
+
93
+ ### BpkDropdownChip
94
+
95
+ | Property | PropType | Required | Default Value |
96
+ | --------------------- | --------------------------------------------------------------------- | -------- | ------------- |
97
+ | accessibilityLabel | string | true | - |
98
+ | children | node | true | - |
99
+ | onClick | func | true | - |
100
+ | className | string | false | null |
101
+ | disabled | bool | false | false |
102
+ | leadingAccessoryView | node | false | null |
103
+ | selected | bool | false | false |
104
+ | type | oneOf(`CHIP_TYPES.onDark`, `CHIP_TYPES.default`, `CHIP_TYPES.onImage`) |
73
105
 
74
106
  ### BpkDismissibleChip
75
107
 
@@ -81,29 +113,24 @@ Dismissible chips are selectable chips that have been preconfigured to have a 'c
81
113
  | children | node | true | - |
82
114
  | onClick | func | true | - |
83
115
  | className | string | false | null |
84
- | disabled | bool | false | false |
85
116
  | leadingAccessoryView | node | false | null |
86
- | type | oneOf(`CHIP_TYPES.light`, `CHIP_TYPES.primary`, `CHIP_TYPES.success`) |
117
+ | type | oneOf(`CHIP_TYPES.onDark`, `CHIP_TYPES.default`, `CHIP_TYPES.onImage`) |
87
118
 
88
119
  ## Theme Props
89
120
 
90
- ### Primary
121
+ ### Default
91
122
 
92
- - `chipPrimarySelectedBackgroundColor`
93
- - `chipPrimarySelectedHoverBackgroundColor`
94
- - `chipPrimarySelectedActiveBackgroundColor`
95
- - `chipPrimarySelectedTextColor`
123
+ - `chipDefaultSelectedBackgroundColor`
124
+ - `chipDefaultSelectedTextColor`
96
125
 
97
- ### Light
126
+ ### On Dark
98
127
 
99
- - `chipLightSelectedBackgroundColor`
100
- - `chipLightSelectedHoverBackgroundColor`
101
- - `chipLightSelectedActiveBackgroundColor`
102
- - `chipLightSelectedTextColor`
128
+ - `chipOnDarkSelectedBackgroundColor`
129
+ - `chipOnDarkSelectedTextColor`
103
130
 
104
- ### Success
131
+ ### On Image
105
132
 
106
- - `chipSuccessSelectedBackgroundColor`
107
- - `chipSuccessSelectedHoverBackgroundColor`
108
- - `chipSuccessSelectedActiveBackgroundColor`
109
- - `chipSuccessSelectedTextColor`
133
+ - `chipOnImageSelectedBackgroundColor`
134
+ - `chipOnImageSelectedHoverBackgroundColor`
135
+ - `chipOnImageSelectedActiveBackgroundColor`
136
+ - `chipOnImageSelectedTextColor`
package/bpk-component-chip/index.js CHANGED
@@ -24,11 +24,15 @@ import BpkSelectableChip, {
24
24
  import BpkDismissibleChip, {
25
25
  type Props as DismissibleProps,
26
26
  } from './src/BpkDismissibleChip';
27
+ import BpkDropdownChip, {
28
+ type Props as DropdownProps,
29
+ } from './src/BpkDropdownChip';
27
30
  import { CHIP_TYPES } from './src/commonTypes';
28
31
  import themeAttributes from './src/themeAttributes';
29
32
 
30
33
  export type BpkSelectableChipProps = SelectableProps;
31
34
  export type BpkDismissibleChipProps = DismissibleProps;
35
+ export type BpkDropdownChipProps = DropdownProps;
32
36
 
33
37
  export default BpkSelectableChip;
34
- export { BpkDismissibleChip, CHIP_TYPES, themeAttributes };
38
+ export { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES, themeAttributes };
package/bpk-component-chip/src/BpkDismissibleChip.js CHANGED
@@ -20,12 +20,13 @@
20
20
 
21
21
  /*
22
22
  The dismissible chip component is just a selectable chip that's
23
- been hard coded to have selected={false} and a trailing accessory view
24
- of a close icon.
23
+ been hard coded to have disabled={false}, selected and a trailing
24
+ accessory view of a close icon.
25
25
  */
26
26
 
27
27
  import React from 'react';
28
28
 
29
+ import { cssModules } from '../../bpk-react-utils';
29
30
  import CloseCircleIconSm from '../../bpk-component-icon/sm/close-circle';
30
31
 
31
32
  import BpkSelectableChip from './BpkSelectableChip';
@@ -34,18 +35,28 @@ import {
34
35
  COMMON_DEFAULT_PROPS,
35
36
  type CommonProps,
36
37
  } from './commonTypes';
38
+ import STYLES from './BpkSelectableChip.module.scss';
37
39
 
38
40
  export type Props = CommonProps;
39
41
 
42
+ const getClassName = cssModules(STYLES);
43
+
40
44
  const BpkDismissibleChip = (props: Props) => {
41
- const { ...rest } = props;
45
+ const { className, type, ...rest } = props;
46
+ const iconClassNames = getClassName(
47
+ `bpk-chip--${type}-dismissible__trailing-accessory-view`,
48
+ );
49
+ const classNames = getClassName(`bpk-chip--${type}-dismissible`, className);
42
50
 
43
51
  return (
44
52
  <BpkSelectableChip
45
53
  {...rest}
46
- trailingAccessoryView={<CloseCircleIconSm />}
47
- selected={false}
54
+ disabled={false}
55
+ trailingAccessoryView={<CloseCircleIconSm className={iconClassNames} />}
56
+ selected
57
+ type={type}
48
58
  role="button" // Override role="checkbox" because this chip is not selectable.
59
+ className={classNames}
49
60
  />
50
61
  );
51
62
  };
package/bpk-component-chip/src/BpkDropdownChip.js ADDED
@@ -0,0 +1,53 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2016 Skyscanner Ltd
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+
19
+ /* @flow strict */
20
+
21
+ /*
22
+ The dropdown chip component is just a selectable chip component
23
+ with a trailing accessory view of a chevron down icon.
24
+ */
25
+
26
+ import React from 'react';
27
+
28
+ import ChevronDownIconSm from '../../bpk-component-icon/sm/chevron-down';
29
+
30
+ import BpkSelectableChip from './BpkSelectableChip';
31
+ import {
32
+ COMMON_PROP_TYPES,
33
+ COMMON_DEFAULT_PROPS,
34
+ type CommonProps,
35
+ } from './commonTypes';
36
+
37
+ export type Props = CommonProps;
38
+
39
+ const BpkDropdownChip = (props: Props) => {
40
+ const { ...rest } = props;
41
+
42
+ return (
43
+ <BpkSelectableChip
44
+ {...rest}
45
+ trailingAccessoryView={<ChevronDownIconSm />}
46
+ />
47
+ );
48
+ };
49
+
50
+ BpkDropdownChip.propTypes = COMMON_PROP_TYPES;
51
+ BpkDropdownChip.defaultProps = COMMON_DEFAULT_PROPS;
52
+
53
+ export default BpkDropdownChip;
package/bpk-component-chip/src/BpkSelectableChip.js CHANGED
@@ -58,6 +58,7 @@ const BpkSelectableChip = (props: Props) => {
58
58
  'bpk-chip',
59
59
  `bpk-chip--${type}`,
60
60
  disabled && 'bpk-chip--disabled',
61
+ disabled && `bpk-chip--${type}-disabled`,
61
62
  !disabled && selected && `bpk-chip--${type}-selected`,
62
63
  className,
63
64
  );
package/bpk-component-chip/src/commonTypes.js CHANGED
@@ -22,9 +22,9 @@ import PropTypes from 'prop-types';
22
22
  import { type Node } from 'react';
23
23
 
24
24
  export const CHIP_TYPES = {
25
- light: 'light',
26
- primary: 'primary',
27
- success: 'success',
25
+ onDark: 'on-dark',
26
+ default: 'default',
27
+ onImage: 'on-image',
28
28
  };
29
29
 
30
30
  export type CommonProps = {
@@ -56,5 +56,5 @@ export const COMMON_DEFAULT_PROPS = {
56
56
  leadingAccessoryView: null,
57
57
  selected: false,
58
58
  trailingAccessoryView: null,
59
- type: CHIP_TYPES.primary,
59
+ type: CHIP_TYPES.default,
60
60
  };
package/bpk-component-chip/src/themeAttributes.js CHANGED
@@ -19,16 +19,12 @@
19
19
  /* @flow strict */
20
20
 
21
21
  export default [
22
- 'chipPrimarySelectedBackgroundColor',
23
- 'chipPrimarySelectedHoverBackgroundColor',
24
- 'chipPrimarySelectedActiveBackgroundColor',
25
- 'chipPrimarySelectedTextColor',
26
- 'chipLightSelectedBackgroundColor',
27
- 'chipLightSelectedHoverBackgroundColor',
28
- 'chipLightSelectedActiveBackgroundColor',
29
- 'chipLightSelectedTextColor',
30
- 'chipSuccessSelectedBackgroundColor',
31
- 'chipSuccessSelectedHoverBackgroundColor',
32
- 'chipSuccessSelectedActiveBackgroundColor',
33
- 'chipSuccessSelectedTextColor',
22
+ 'chipDefaultSelectedBackgroundColor',
23
+ 'chipDefaultSelectedTextColor',
24
+ 'chipOnDarkSelectedBackgroundColor',
25
+ 'chipOnDarkSelectedTextColor',
26
+ 'chipOnImageSelectedBackgroundColor',
27
+ 'chipOnImageSelectedHoverBackgroundColor',
28
+ 'chipOnImageSelectedActiveBackgroundColor',
29
+ 'chipOnImageSelectedTextColor',
34
30
  ];
package/bpk-component-fieldset/src/BpkFieldset.module.scss CHANGED
@@ -34,6 +34,6 @@ $bpk-spacing-v2: true;
34
34
  }
35
35
 
36
36
  &__label {
37
- margin-bottom: bpk-spacing-md();
37
+ margin-bottom: bpk-spacing-sm();
38
38
  }
39
39
  }
package/bpk-component-theme-toggle/src/theming.js CHANGED
@@ -107,20 +107,16 @@ const generateTheme = ({
107
107
  buttonDestructiveHoverBackgroundColor: colorWhite,
108
108
  buttonDestructiveActiveBackgroundColor: colorWhite,
109
109
 
110
- chipPrimarySelectedBackgroundColor: primaryColor500,
111
- chipPrimarySelectedHoverBackgroundColor: primaryColor600,
112
- chipPrimarySelectedActiveBackgroundColor: primaryColor700,
113
- chipPrimarySelectedTextColor: colorWhite,
114
-
115
- chipSuccessSelectedBackgroundColor: secondaryColor500,
116
- chipSuccessSelectedHoverBackgroundColor: secondaryColor600,
117
- chipSuccessSelectedActiveBackgroundColor: secondaryColor700,
118
- chipSuccessSelectedTextColor: colorWhite,
119
-
120
- chipLightSelectedBackgroundColor: primaryColor500,
121
- chipLightSelectedHoverBackgroundColor: primaryColor600,
122
- chipLightSelectedActiveBackgroundColor: primaryColor700,
123
- chipLightSelectedTextColor: colorWhite,
110
+ chipDefaultSelectedBackgroundColor: primaryColor500,
111
+ chipDefaultSelectedTextColor: colorWhite,
112
+
113
+ chipOnDarkSelectedBackgroundColor: primaryColor500,
114
+ chipOnDarkSelectedTextColor: colorWhite,
115
+
116
+ chipOnImageSelectedBackgroundColor: primaryColor500,
117
+ chipOnImageSelectedHoverBackgroundColor: primaryColor500,
118
+ chipOnImageSelectedActiveBackgroundColor: primaryColor500,
119
+ chipOnImageSelectedTextColor: colorWhite,
124
120
 
125
121
  fieldsetLabelTextColor: secondaryColor500,
126
122
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "14.1.0",
3
+ "version": "15.0.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",
@@ -24,11 +24,11 @@
24
24
  "dependencies": {
25
25
  "@popperjs/core": "^2.11.5",
26
26
  "@react-google-maps/api": "^2.12.0",
27
- "@skyscanner/bpk-foundations-web": "^12.1.0",
28
- "@skyscanner/bpk-svgs": "^15.1.4",
27
+ "@skyscanner/bpk-foundations-web": "^12.1.2",
28
+ "@skyscanner/bpk-svgs": "^15.1.6",
29
29
  "a11y-focus-scope": "^1.1.3",
30
30
  "a11y-focus-store": "^1.0.0",
31
- "bpk-mixins": "^35.0.0",
31
+ "bpk-mixins": "^36.0.0",
32
32
  "d3-path": "^2.0.0",
33
33
  "d3-scale": "^4.0.2",
34
34
  "date-fns": "^2.21.1",