@skyscanner/backpack-web 18.1.0 → 18.2.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/README.md +1 -1
  2. package/bpk-component-card/README.md +16 -5
  3. package/bpk-component-card/src/BpkCard.js +13 -14
  4. package/bpk-component-card/src/BpkCard.module.scss +11 -0
  5. package/bpk-component-card/src/BpkDividedCard.js +5 -0
  6. package/bpk-component-card/src/BpkDividedCard.module.scss +9 -0
  7. package/bpk-component-datatable/README.md +1 -0
  8. package/bpk-component-datatable/src/BpkDataTable.js +14 -8
  9. package/bpk-component-image/src/BpkImage.module.scss +1 -1
  10. package/package.json +2 -2
package/README.md CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  ## Quick links
9
9
 
10
- - [Documentation](skyscanner.design/)
10
+ - [Documentation](https://www.skyscanner.design/)
11
11
  - [Changelog](./CHANGELOG.md)
12
12
 
13
13
  ## Usage
package/bpk-component-card/README.md CHANGED
@@ -30,11 +30,21 @@ import React from 'react';
30
30
  import { BpkDividedCard, ORIENTATION } from '@skyscanner/backpack-web/bpk-component-card';
31
31
 
32
32
  export default () => (
33
- <BpkDividedCard
34
- primaryContent={'foo'}
35
- secondaryContent={'bar'}
36
- orientation={ORIENTATION.vertical}
37
- />
33
+ <>
34
+ <BpkDividedCard
35
+ primaryContent={'foo'}
36
+ secondaryContent={'bar'}
37
+ orientation={ORIENTATION.vertical}
38
+ />
39
+
40
+ // Toggle shadow shadow with isElevated
41
+ <BpkDividedCard
42
+ primaryContent={'foo'}
43
+ secondaryContent={'bar'}
44
+ orientation={ORIENTATION.horizontal}
45
+ isElevated={false}
46
+ />
47
+ </>
38
48
  );
39
49
  ```
40
50
 
@@ -59,3 +69,4 @@ export default () => (
59
69
  | orientation | oneOf(ORIENTATION.horizontal, ORIENTATION.vertical) | false | ORIENTATION.horizontal |
60
70
  | href | string | false | null |
61
71
  | className | string | false | null |
72
+ | isElevated | bool | false | true |
package/bpk-component-card/src/BpkCard.js CHANGED
@@ -39,15 +39,12 @@ type Props = {
39
39
  const BpkCard = (props: Props) => {
40
40
  const { atomic, blank, children, className, href, padded, ...rest } = props;
41
41
 
42
- const classNames = [getClassName('bpk-card')];
43
- if (padded) {
44
- classNames.push(getClassName('bpk-card--padded'));
45
- }
46
- if (className) {
47
- classNames.push(className);
48
- }
49
-
50
- const classNameFinal = classNames.join(' ');
42
+ const classNames = getClassName(
43
+ 'bpk-card',
44
+ atomic && !href && 'bpk-card--atomic-button',
45
+ padded && 'bpk-card--padded',
46
+ className,
47
+ );
51
48
 
52
49
  const atomicProps: { tabIndex: ?number, role: ?string } = {};
53
50
 
@@ -68,7 +65,7 @@ const BpkCard = (props: Props) => {
68
65
  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
69
66
  <a
70
67
  href={href}
71
- className={classNameFinal}
68
+ className={classNames}
72
69
  {...atomicProps}
73
70
  {...blankProps}
74
71
  {...rest}
@@ -78,15 +75,17 @@ const BpkCard = (props: Props) => {
78
75
  );
79
76
  }
80
77
 
81
- // If the card is atomic, we need to enable keyboard focus and provide an appropriate role.
82
78
  if (atomic) {
83
- atomicProps.tabIndex = 0;
84
- atomicProps.role = 'button';
79
+ return (
80
+ <button type="button" className={classNames} {...rest}>
81
+ {children}
82
+ </button>
83
+ );
85
84
  }
86
85
 
87
86
  return (
88
87
  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
89
- <div {...atomicProps} className={classNameFinal} {...rest}>
88
+ <div className={classNames} {...rest}>
90
89
  {children}
91
90
  </div>
92
91
  );
package/bpk-component-card/src/BpkCard.module.scss CHANGED
@@ -21,6 +21,17 @@
21
21
  .bpk-card {
22
22
  @include bpk-card;
23
23
 
24
+ &--atomic-button {
25
+ width: 100%;
26
+ padding: 0;
27
+ border: none;
28
+ background: none;
29
+ color: inherit;
30
+ text-align: inherit;
31
+ cursor: pointer;
32
+ appearance: none;
33
+ }
34
+
24
35
  &--padded {
25
36
  @include bpk-card--padded;
26
37
  }
package/bpk-component-card/src/BpkDividedCard.js CHANGED
@@ -38,11 +38,13 @@ export type Props = {
38
38
  orientation: $Values<typeof ORIENTATION>,
39
39
  href: ?string,
40
40
  className: ?string,
41
+ isElevated: boolean,
41
42
  };
42
43
  const BpkDividedCard = (props: Props) => {
43
44
  const {
44
45
  className,
45
46
  href,
47
+ isElevated,
46
48
  orientation,
47
49
  primaryContent,
48
50
  secondaryContent,
@@ -52,6 +54,7 @@ const BpkDividedCard = (props: Props) => {
52
54
  const classNames = getClassName(
53
55
  'bpk-divided-card',
54
56
  isVertical ? 'bpk-divided-card--vertical' : 'bpk-divided-card--horizontal',
57
+ !isElevated && 'bpk-divided-card--no-elevation',
55
58
  className,
56
59
  );
57
60
 
@@ -84,12 +87,14 @@ BpkDividedCard.propTypes = {
84
87
  orientation: PropTypes.oneOf(Object.keys(ORIENTATION)),
85
88
  href: PropTypes.string,
86
89
  className: PropTypes.string,
90
+ isElevated: PropTypes.bool,
87
91
  };
88
92
 
89
93
  BpkDividedCard.defaultProps = {
90
94
  orientation: ORIENTATION.horizontal,
91
95
  href: null,
92
96
  className: null,
97
+ isElevated: true,
93
98
  };
94
99
 
95
100
  export default BpkDividedCard;
package/bpk-component-card/src/BpkDividedCard.module.scss CHANGED
@@ -26,6 +26,7 @@ $fixed-secondary-width: 216;
26
26
 
27
27
  .bpk-divided-card {
28
28
  display: flex;
29
+ align-items: stretch;
29
30
 
30
31
  &--vertical {
31
32
  min-width: $bpk-one-pixel-rem * $min-vertical-width;
@@ -59,4 +60,12 @@ $fixed-secondary-width: 216;
59
60
  }
60
61
  }
61
62
  }
63
+
64
+ &--no-elevation {
65
+ box-shadow: none;
66
+
67
+ &::after {
68
+ box-shadow: none;
69
+ }
70
+ }
62
71
  }
package/bpk-component-datatable/README.md CHANGED
@@ -117,6 +117,7 @@ export default () => (
117
117
  | height | number | true | - |
118
118
  | width | number | false | full width of parent |
119
119
  | headerHeight | number | false | 60 |
120
+ | rowClassName | string | false | null |
120
121
  | rowHeight | number | false | 60 |
121
122
  | rowStyle | object | false | {} |
122
123
  | onRowClick | func | false | null |
package/bpk-component-datatable/src/BpkDataTable.js CHANGED
@@ -41,7 +41,13 @@ const BpkDataTable = (props: Props) => {
41
41
  children,
42
42
  className,
43
43
  defaultColumnSortIndex,
44
+ headerClassName,
45
+ headerHeight,
44
46
  height,
47
+ onRowClick,
48
+ rowClassName,
49
+ rowHeight,
50
+ rowStyle,
45
51
  rows: data,
46
52
  sort,
47
53
  sortBy,
@@ -61,7 +67,7 @@ const BpkDataTable = (props: Props) => {
61
67
  const rowClassNames = getClassName(
62
68
  'bpk-data-table__row',
63
69
  rowSelected === index && 'bpk-data-table__row--selected',
64
- props.onRowClick !== undefined && 'bpk-data-table__row--clickable',
70
+ onRowClick !== undefined && 'bpk-data-table__row--clickable',
65
71
  index === -1 && 'bpk-data-table__header-row',
66
72
  consumerClassName &&
67
73
  (typeof consumerClassName === 'function'
@@ -74,7 +80,7 @@ const BpkDataTable = (props: Props) => {
74
80
  const headerClassNames = getClassName(
75
81
  'bpk-data-table__row',
76
82
  'bpk-data-table__header-row',
77
- props.headerClassName,
83
+ headerClassName,
78
84
  );
79
85
 
80
86
  const columns = useMemo(() => getColumns(children), [children]);
@@ -111,8 +117,8 @@ const BpkDataTable = (props: Props) => {
111
117
  } else {
112
118
  updateRowSelected(index);
113
119
  }
114
- if (props.onRowClick !== undefined) {
115
- props.onRowClick(rows[index].original);
120
+ if (onRowClick !== undefined) {
121
+ onRowClick(rows[index].original);
116
122
  }
117
123
  };
118
124
 
@@ -141,7 +147,7 @@ const BpkDataTable = (props: Props) => {
141
147
  {headerGroups.map((headerGroup) => (
142
148
  <div
143
149
  {...headerGroup.getHeaderGroupProps({
144
- style: { height: props.headerHeight },
150
+ style: { height: headerHeight },
145
151
  className: headerClassNames,
146
152
  })}
147
153
  >
@@ -169,10 +175,10 @@ const BpkDataTable = (props: Props) => {
169
175
  tabIndex={0}
170
176
  {...row.getRowProps({
171
177
  style: {
172
- ...props.rowStyle,
173
- height: props.rowHeight,
178
+ ...rowStyle,
179
+ height: rowHeight,
174
180
  },
175
- className: getRowClassNames(props.rowClassName, i),
181
+ className: getRowClassNames(rowClassName, i),
176
182
  })}
177
183
  >
178
184
  {row.cells.map((cell) => {
package/bpk-component-image/src/BpkImage.module.scss CHANGED
@@ -53,7 +53,7 @@
53
53
  }
54
54
 
55
55
  @mixin bpk-image--no-background {
56
- background-color: $bpk-surface-contrast-day;
56
+ background-color: transparent;
57
57
  }
58
58
 
59
59
  @mixin bpk-image {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "18.1.0",
3
+ "version": "18.2.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",
@@ -28,7 +28,7 @@
28
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": "^39.0.1",
31
+ "bpk-mixins": "^39.1.0",
32
32
  "d3-path": "^2.0.0",
33
33
  "d3-scale": "^4.0.2",
34
34
  "date-fns": "^2.21.1",