@skyscanner/backpack-web 17.2.0 → 18.1.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 (13) hide show
  1. package/README.md +1 -1
  2. package/bpk-component-accordion/README.md +1 -1
  3. package/bpk-component-autosuggest/README.md +1 -1
  4. package/bpk-component-badge/README.md +1 -1
  5. package/bpk-component-badge/src/BpkBadge.js +15 -21
  6. package/bpk-component-badge/src/BpkBadge.module.scss +8 -4
  7. package/bpk-component-icon/lg/origin.js +8 -0
  8. package/bpk-component-icon/sm/origin.js +8 -0
  9. package/bpk-component-pagination/src/BpkPaginationPage.js +0 -1
  10. package/bpk-component-scrollable-calendar/README.md +3 -3
  11. package/bpk-component-select/README.md +22 -3
  12. package/bpk-component-select/src/BpkSelect.js +7 -1
  13. package/package.json +4 -4
package/README.md CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  ## Quick links
9
9
 
10
- - [Documentation](https://backpack.github.io/)
10
+ - [Documentation](skyscanner.design/)
11
11
  - [Changelog](./CHANGELOG.md)
12
12
 
13
13
  ## Usage
package/bpk-component-accordion/README.md CHANGED
@@ -60,7 +60,7 @@ export default () => (
60
60
 
61
61
  ### Displaying icons
62
62
 
63
- `BpkAccordionItem` supports the use of displaying icons alongside the title. To do this you will need to align your icon to the text using `withAlignment` and pass through the matching sizes for the icon you wish to use. For more information see [Alignment](https://backpack.github.io/components/alignment?platform=web)
63
+ `BpkAccordionItem` supports the use of displaying icons alongside the title. To do this you will need to align your icon to the text using `withAlignment` and pass through the matching sizes for the icon you wish to use. For more information see [Alignment](https://skyscanner.design/latest/components/alignment/web.html)
64
64
 
65
65
  ```js
66
66
  import React from 'react';
package/bpk-component-autosuggest/README.md CHANGED
@@ -110,7 +110,7 @@ class MyComponent extends Component {
110
110
 
111
111
  [Please refer to `react-autosuggest`'s documentation for a full list of props](https://github.com/moroshko/react-autosuggest#props).
112
112
 
113
- **Note:** The `inputProps` object is passed directly to a [`BpkInput`](https://backpack.github.io/components/text-input?platform=web) component, so its prop types apply also.
113
+ **Note:** The `inputProps` object is passed directly to a [`BpkInput`](../bpk-component-input/README.md#props) component, so its prop types apply also.
114
114
 
115
115
  *BpkAutosuggestSuggestion:*
116
116
 
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-icon/lg/origin.js ADDED
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ export default (({
3
+ styles = {},
4
+ ...props
5
+ }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
+ width: "1.5rem",
7
+ height: "1.5rem"
8
+ }} {...props}><path d="M12 18a6 6 0 110-12 6 6 0 010 12zm0 4c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" /></svg>);
package/bpk-component-icon/sm/origin.js ADDED
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ export default (({
3
+ styles = {},
4
+ ...props
5
+ }) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
6
+ width: "1rem",
7
+ height: "1rem"
8
+ }} {...props}><path d="M12 17.25a5.25 5.25 0 110-10.5 5.25 5.25 0 010 10.5zM12 21a9 9 0 100-18 9 9 0 000 18z" /></svg>);
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-scrollable-calendar/README.md CHANGED
@@ -73,7 +73,7 @@ It is composed of `BpkScrollableCalendarGrid` elements. It uses all the same pro
73
73
  as `BpkCalendarGrid`, but in addition `minDate` and `maxDate` are required to build
74
74
  the actual list.
75
75
 
76
- [Please refer to the props of BpkCalendarGrid here](https://backpack.github.io/components/calendar/?platform=web#bpkcalendargrid).
76
+ [Please refer to the props of BpkCalendarGrid here](../bpk-component-calendar/README.md#bpkcalendargrid).
77
77
 
78
78
  | Property | PropType | Required | Default Value |
79
79
  | -------- | -------- | -------- | ------------- |
@@ -88,7 +88,7 @@ used with `BpkScrollableCalendarDate`, it only displays days from
88
88
  that specific month. It is built on top of BpkCalendarGrid and
89
89
  uses the same props.
90
90
 
91
- [Please refer to the props of BpkCalendarGrid here](https://backpack.github.io/components/calendar/?platform=web#bpkcalendargrid).
91
+ [Please refer to the props of BpkCalendarGrid here](../bpk-component-calendar/README.md#bpkcalendargrid).
92
92
 
93
93
  ### BpkScrollableCalendarDate
94
94
 
@@ -97,4 +97,4 @@ The BpkScrollableCalendarDate component is used to render the content of a cell
97
97
  and uses the same props. The only difference is that when isOutside is true,
98
98
  null is returned in order to only display of specific month in the calendar grid.
99
99
 
100
- [Please refer to the props of BpkCalendarDate here](https://backpack.github.io/components/calendar?platform=web#bpkcalendardate).
100
+ [Please refer to the props of BpkCalendarDate here](../bpk-component-calendar/README.md#bpkcalendardate).
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.1.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": "^13.6.0",
28
- "@skyscanner/bpk-svgs": "^16.0.8",
27
+ "@skyscanner/bpk-foundations-web": "^14.0.0",
28
+ "@skyscanner/bpk-svgs": "^16.2.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": "^39.0.1",
32
32
  "d3-path": "^2.0.0",
33
33
  "d3-scale": "^4.0.2",
34
34
  "date-fns": "^2.21.1",