@skyscanner/backpack-web 17.2.0 → 18.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 (7) hide show
  1. package/bpk-component-badge/README.md +1 -1
  2. package/bpk-component-badge/src/BpkBadge.js +15 -21
  3. package/bpk-component-badge/src/BpkBadge.module.scss +8 -4
  4. package/bpk-component-pagination/src/BpkPaginationPage.js +0 -1
  5. package/bpk-component-select/README.md +22 -3
  6. package/bpk-component-select/src/BpkSelect.js +7 -1
  7. package/package.json +3 -3
package/bpk-component-badge/README.md CHANGED
@@ -28,7 +28,7 @@ export default () => (
28
28
  | centered | bool | false | null |
29
29
  | className | string | false | null |
30
30
  | docked | oneOf('left', 'right') | false | null |
31
- | type | oneOf(BADGE_TYPES.warning, BADGE_TYPES.success, BADGE_TYPES.destructive, BADGE_TYPES.light, BADGE_TYPES.inverse, BADGE_TYPES.outline, BADGE_TYPES.strong, BADGE_TYPES.brand)| false | BADGE_TYPES.warning |
31
+ | type | oneOf(BADGE_TYPES.normal, BADGE_TYPES.warning, BADGE_TYPES.success, BADGE_TYPES.critical, BADGE_TYPES.light, BADGE_TYPES.inverse, BADGE_TYPES.outline, BADGE_TYPES.strong, BADGE_TYPES.brand)| false | BADGE_TYPES.normal |
32
32
 
33
33
  ## Theme props
34
34
 
package/bpk-component-badge/src/BpkBadge.js CHANGED
@@ -28,8 +28,8 @@ import STYLES from './BpkBadge.module.scss';
28
28
  export const BADGE_TYPES = {
29
29
  warning: 'warning',
30
30
  success: 'success',
31
- destructive: 'destructive',
32
- light: 'light',
31
+ critical: 'critical',
32
+ normal: 'normal',
33
33
  inverse: 'inverse',
34
34
  outline: 'outline',
35
35
  strong: 'strong',
@@ -39,10 +39,10 @@ export const BADGE_TYPES = {
39
39
  const getClassName = cssModules(STYLES);
40
40
 
41
41
  const badgeTypeClassNames = {
42
- [BADGE_TYPES.warning]: null,
42
+ [BADGE_TYPES.warning]: getClassName('bpk-badge--warning'),
43
43
  [BADGE_TYPES.success]: getClassName('bpk-badge--success'),
44
- [BADGE_TYPES.destructive]: getClassName('bpk-badge--destructive'),
45
- [BADGE_TYPES.light]: getClassName('bpk-badge--light'),
44
+ [BADGE_TYPES.critical]: getClassName('bpk-badge--critical'),
45
+ [BADGE_TYPES.normal]: getClassName('bpk-badge--normal'),
46
46
  [BADGE_TYPES.inverse]: getClassName('bpk-badge--inverse'),
47
47
  [BADGE_TYPES.outline]: getClassName('bpk-badge--outline'),
48
48
  [BADGE_TYPES.strong]: getClassName('bpk-badge--strong'),
@@ -58,24 +58,18 @@ export type Props = {
58
58
 
59
59
  const BpkBadge = (props: Props) => {
60
60
  const { centered, className, docked, type, ...rest } = props;
61
- const classNames = [getClassName('bpk-badge'), badgeTypeClassNames[type]];
62
-
63
- if (docked === 'right') {
64
- classNames.push(getClassName('bpk-badge--docked-right'));
65
- }
66
- if (docked === 'left') {
67
- classNames.push(getClassName('bpk-badge--docked-left'));
68
- }
69
- if (centered) {
70
- classNames.push(getClassName('bpk-badge--centered'));
71
- }
72
- if (className) {
73
- classNames.push(className);
74
- }
61
+ const classNames = getClassName(
62
+ 'bpk-badge',
63
+ badgeTypeClassNames[type],
64
+ docked === 'right' && 'bpk-badge--docked-right',
65
+ docked === 'left' && 'bpk-badge--docked-left',
66
+ centered && 'bpk-badge--centered',
67
+ className,
68
+ );
75
69
 
76
70
  return (
77
71
  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
78
- <span className={classNames.join(' ')} {...rest} />
72
+ <span className={classNames} {...rest} />
79
73
  );
80
74
  };
81
75
 
@@ -87,7 +81,7 @@ BpkBadge.propTypes = {
87
81
  };
88
82
 
89
83
  BpkBadge.defaultProps = {
90
- type: BADGE_TYPES.warning,
84
+ type: BADGE_TYPES.normal,
91
85
  docked: null,
92
86
  centered: false,
93
87
  className: null,
package/bpk-component-badge/src/BpkBadge.module.scss CHANGED
@@ -33,16 +33,20 @@
33
33
  @include bpk-badge--docked-left;
34
34
  }
35
35
 
36
+ &--warning {
37
+ @include bpk-badge--warning;
38
+ }
39
+
36
40
  &--success {
37
41
  @include bpk-badge--success;
38
42
  }
39
43
 
40
- &--destructive {
41
- @include bpk-badge--destructive;
44
+ &--critical {
45
+ @include bpk-badge--critical;
42
46
  }
43
47
 
44
- &--light {
45
- @include bpk-badge--light;
48
+ &--normal {
49
+ @include bpk-badge--normal;
46
50
  }
47
51
 
48
52
  &--inverse {
package/bpk-component-pagination/src/BpkPaginationPage.js CHANGED
@@ -37,7 +37,6 @@ const BpkPaginationPage = (props) => {
37
37
  return (
38
38
  <BpkButton
39
39
  primaryOnDark={!isSelected}
40
- primary={isSelected}
41
40
  onClick={onSelect}
42
41
  className={classNames.join(' ')}
43
42
  aria-label={pageLabel(page, isSelected)}
package/bpk-component-select/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
8
8
 
9
- ## Usage
9
+ ## Usage (controlled)
10
10
 
11
11
  ```js
12
12
  import React from 'react';
@@ -26,14 +26,33 @@ export default () => (
26
26
  );
27
27
  ```
28
28
 
29
+ ## Usage (uncontrolled)
30
+
31
+ ```js
32
+ import React from 'react';
33
+ import BpkSelect from '@skyscanner/backpack-web/bpk-component-select';
34
+
35
+ export default () => (
36
+ <BpkSelect
37
+ id="fruits"
38
+ name="fruits"
39
+ defaultValue="oranges"
40
+ >
41
+ <option value="apples">Apples</option>
42
+ <option value="oranges">Oranges</option>
43
+ <option value="pears">Pears</option>
44
+ </BpkSelect>
45
+ );
46
+ ```
47
+
29
48
  ## Props
30
49
 
31
50
  | Property | PropType | Required | Default Value |
32
51
  | ------------ | -------- | -------- | ------------- |
33
52
  | id | string | true | - |
34
53
  | name | string | true | - |
35
- | value | string | true | - |
36
- | onChange | func | true | - |
54
+ | value | string | false | use [defaultValue](https://reactjs.org/docs/dom-elements.html#value)|
55
+ | onChange | func | false | undefined |
37
56
  | valid | bool | false | null |
38
57
  | large | bool | false | false |
39
58
  | disabled | bool | false | false |
package/bpk-component-select/src/BpkSelect.js CHANGED
@@ -104,7 +104,13 @@ const BpkSelect = (props: Props) => {
104
104
  BpkSelect.propTypes = {
105
105
  id: PropTypes.string.isRequired,
106
106
  name: PropTypes.string.isRequired,
107
- value: PropTypes.string.isRequired,
107
+ // The below "value" prop is only relevant if the user is wanting a controlled component
108
+ // In some cases, users may want to create an uncontrolled select as described here: https://beta.reactjs.org/reference/react-dom/components/select
109
+ // In this case value is not required and nor should it be given a default value (as the linter thinks)
110
+ // Prop types are not expressive enough (without a drastic increase in complexity of writing a custom validator) to encode this relationship. Equally, this wouldn't actually solve the linting issue (AFAIK).
111
+ // As a solution, the require-default-props has been disabled for this line.
112
+ // eslint-disable-next-line react/require-default-props
113
+ value: PropTypes.string,
108
114
  className: PropTypes.string,
109
115
  disabled: PropTypes.bool,
110
116
  docked: PropTypes.bool,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "17.2.0",
3
+ "version": "18.0.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",
@@ -25,10 +25,10 @@
25
25
  "@popperjs/core": "^2.11.5",
26
26
  "@react-google-maps/api": "^2.12.0",
27
27
  "@skyscanner/bpk-foundations-web": "^13.6.0",
28
- "@skyscanner/bpk-svgs": "^16.0.8",
28
+ "@skyscanner/bpk-svgs": "^16.1.0",
29
29
  "a11y-focus-scope": "^1.1.3",
30
30
  "a11y-focus-store": "^1.0.0",
31
- "bpk-mixins": "^37.2.0",
31
+ "bpk-mixins": "^38.0.0",
32
32
  "d3-path": "^2.0.0",
33
33
  "d3-scale": "^4.0.2",
34
34
  "date-fns": "^2.21.1",