@skyscanner/backpack-web 16.0.0 → 16.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 (11) hide show
  1. package/bpk-component-overlay/README.md +13 -11
  2. package/bpk-component-overlay/index.js +2 -1
  3. package/bpk-component-overlay/src/BpkOverlay.js +31 -11
  4. package/bpk-component-overlay/src/BpkOverlay.module.scss +124 -2
  5. package/bpk-component-page-indicator/README.md +11 -11
  6. package/bpk-component-pagination/src/BpkPaginationList.module.scss +1 -0
  7. package/bpk-component-pagination/src/BpkPaginationNudger.module.scss +4 -1
  8. package/bpk-component-popover/README.md +2 -2
  9. package/bpk-component-switch/src/BpkSwitch.module.scss +1 -1
  10. package/bpk-component-tooltip/README.md +1 -1
  11. package/package.json +1 -1
package/bpk-component-overlay/README.md CHANGED
@@ -15,24 +15,25 @@ import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from '@skyscanner/bac
15
15
 
16
16
  export default () => (
17
17
  <div>
18
- { /* Basic example */}
19
- <BpkOverlay>
18
+ { /* Basic example with tint */}
19
+ <BpkOverlay
20
+ overlayType={OVERLAY_TYPES.solid}
21
+ overlayLevel={OVERLAY_LEVELS.high}
22
+ >
20
23
  <BpkText>Hotels in Canada</BpkText>
21
24
  </BpkOverlay>
22
25
 
23
26
  { /* With the tint invisible */}
24
- <BpkOverlay overlayType={OVERLAY_TYPES.none}>
25
- <BpkText>Hotels in Canada</BpkText>
26
- </BpkOverlay>
27
-
28
- { /* With a border radius style */}
29
- <BpkOverlay borderRadiusStyle={BORDER_RADIUS_STYLES.sm}>
27
+ <BpkOverlay>
30
28
  <BpkText>Hotels in Canada</BpkText>
31
29
  </BpkOverlay>
32
30
 
33
31
  { /* With foreground content */}
34
32
  <BpkOverlay foregroundContent={<BpkText>Visit Ottawa</BpkText>}>
35
- <BpkText>Hotels in Canada</BpkText>
33
+ <BpkImage
34
+ altText="altText here"
35
+ aspectRatio={16}
36
+ src="" />
36
37
  </BpkOverlay>
37
38
  </div>
38
39
  );
@@ -43,7 +44,8 @@ export default () => (
43
44
  | Property | PropType | Required | Default Value |
44
45
  | --------- | -------- | -------- | ------------- |
45
46
  | children | Node | true | - |
46
- | borderRadiusStyle | oneOf(BORDER_RADIUS_STYLES.none, BORDER_RADIUS_STYLES.sm) | false | BORDER_RADIUS_STYLES.none |
47
+ | borderRadiusStyle (deprecated) | BORDER_RADIUS_STYLES | false | BORDER_RADIUS_STYLES.none |
47
48
  | className | string | false | null |
48
49
  | foregroundContent | Node | false | null |
49
- | overlayType | oneOf(OVERLAY_TYPES) | false | OVERLAY_TYPES.tint |
50
+ | overlayType | oneOf(OVERLAY_TYPES) | false | OVERLAY_TYPES.solid |
51
+ | overlayLevel | oneOf(OVERLAY_LEVELS) | false | OVERLAY_LEVELS.low |
package/bpk-component-overlay/index.js CHANGED
@@ -19,10 +19,11 @@
19
19
 
20
20
  import BpkOverlay, {
21
21
  OVERLAY_TYPES,
22
+ OVERLAY_LEVELS,
22
23
  BORDER_RADIUS_STYLES,
23
24
  type Props as BpkOverlayProps,
24
25
  } from './src/BpkOverlay';
25
26
 
26
27
  export type { BpkOverlayProps };
27
28
  export default BpkOverlay;
28
- export { OVERLAY_TYPES, BORDER_RADIUS_STYLES };
29
+ export { OVERLAY_TYPES, OVERLAY_LEVELS, BORDER_RADIUS_STYLES };
package/bpk-component-overlay/src/BpkOverlay.js CHANGED
@@ -20,26 +20,39 @@
20
20
  import PropTypes from 'prop-types';
21
21
  import React, { type Node } from 'react';
22
22
 
23
- import { cssModules } from '../../bpk-react-utils';
23
+ import { cssModules, deprecated } from '../../bpk-react-utils';
24
24
 
25
25
  import STYLES from './BpkOverlay.module.scss';
26
26
 
27
27
  const getClassName = cssModules(STYLES);
28
28
 
29
29
  export const OVERLAY_TYPES = {
30
- none: 'none',
31
- tint: 'tint',
30
+ solid: 'solid',
31
+ top: 'top',
32
+ bottom: 'bottom',
33
+ left: 'left',
34
+ right: 'right',
35
+ vignette: 'vignette',
36
+ };
37
+
38
+ export const OVERLAY_LEVELS = {
39
+ low: 'low',
40
+ medium: 'medium',
41
+ high: 'high',
42
+ off: 'off',
32
43
  };
33
44
 
45
+ // DEPRECATED
34
46
  export const BORDER_RADIUS_STYLES = {
35
47
  none: 'none',
36
48
  sm: 'sm',
37
49
  };
38
50
 
39
51
  export type Props = {
40
- borderRadiusStyle: $Keys<typeof BORDER_RADIUS_STYLES>,
52
+ borderRadiusStyle: ?$Keys<typeof BORDER_RADIUS_STYLES>,
41
53
  children: Node,
42
- overlayType: $Keys<typeof OVERLAY_TYPES>,
54
+ overlayType: ?$Keys<typeof OVERLAY_TYPES>,
55
+ overlayLevel: ?$Keys<typeof OVERLAY_LEVELS>,
43
56
  className: ?string,
44
57
  foregroundContent: ?Node,
45
58
  };
@@ -50,6 +63,7 @@ const BpkOverlay = (props: Props) => {
50
63
  children,
51
64
  className,
52
65
  foregroundContent,
66
+ overlayLevel,
53
67
  overlayType,
54
68
  ...rest
55
69
  } = props;
@@ -57,9 +71,10 @@ const BpkOverlay = (props: Props) => {
57
71
  const wrapperClassNames = getClassName('bpk-overlay__wrapper', className);
58
72
  const overlayClassNames = getClassName(
59
73
  'bpk-overlay__overlay',
60
- borderRadiusStyle === BORDER_RADIUS_STYLES.sm &&
61
- 'bpk-overlay__overlay--border-radius-sm',
62
- overlayType === OVERLAY_TYPES.tint && 'bpk-overlay__overlay--tint',
74
+ overlayType !== null &&
75
+ (overlayType !== OVERLAY_TYPES.vignette
76
+ ? `bpk-overlay__overlay--${overlayType}-${overlayLevel}`
77
+ : `bpk-overlay__overlay--${overlayType}`),
63
78
  );
64
79
 
65
80
  return (
@@ -73,17 +88,22 @@ const BpkOverlay = (props: Props) => {
73
88
 
74
89
  BpkOverlay.propTypes = {
75
90
  children: PropTypes.node.isRequired,
76
- borderRadiusStyle: PropTypes.oneOf(Object.keys(BORDER_RADIUS_STYLES)),
91
+ borderRadiusStyle: deprecated(
92
+ PropTypes.oneOf(Object.keys(BORDER_RADIUS_STYLES)),
93
+ 'This property is deprecated and radius will now be set based on the content. Please remove usage of this property.',
94
+ ),
77
95
  className: PropTypes.string,
78
96
  foregroundContent: PropTypes.node,
79
97
  overlayType: PropTypes.oneOf(Object.keys(OVERLAY_TYPES)),
98
+ overlayLevel: PropTypes.oneOf(Object.keys(OVERLAY_LEVELS)),
80
99
  };
81
100
 
82
101
  BpkOverlay.defaultProps = {
83
- borderRadiusStyle: BORDER_RADIUS_STYLES.none,
102
+ borderRadiusStyle: null,
84
103
  className: null,
85
104
  foregroundContent: null,
86
- overlayType: OVERLAY_TYPES.tint,
105
+ overlayType: OVERLAY_TYPES.solid,
106
+ overlayLevel: OVERLAY_LEVELS.low,
87
107
  };
88
108
 
89
109
  export default BpkOverlay;
package/bpk-component-overlay/src/BpkOverlay.module.scss CHANGED
@@ -21,6 +21,9 @@
21
21
  .bpk-overlay {
22
22
  &__wrapper {
23
23
  position: relative;
24
+ width: 100%;
25
+ height: 100%;
26
+ border-radius: inherit;
24
27
  }
25
28
 
26
29
  &__overlay {
@@ -29,13 +32,132 @@
29
32
  left: 0;
30
33
  width: 100%;
31
34
  height: 100%;
35
+ border-radius: inherit;
32
36
 
33
37
  &--tint {
34
38
  background: rgba($bpk-color-sky-blue-shade-03, 0.56);
35
39
  }
36
40
 
37
- &--border-radius-sm {
38
- @include bpk-border-radius-sm;
41
+ &--solid {
42
+ &-low {
43
+ background: rgba($bpk-text-primary-day, 0.15);
44
+ }
45
+
46
+ &-medium {
47
+ background: rgba($bpk-text-primary-day, 0.3);
48
+ }
49
+
50
+ &-high {
51
+ background: rgba($bpk-text-primary-day, 0.4);
52
+ }
53
+ }
54
+
55
+ &--top {
56
+ &-low {
57
+ background: linear-gradient(
58
+ 180deg,
59
+ rgba($bpk-text-primary-day, 0.15) 0%,
60
+ rgba($bpk-text-primary-day, 0) 100%
61
+ );
62
+ }
63
+
64
+ &-medium {
65
+ background: linear-gradient(
66
+ 180deg,
67
+ rgba($bpk-text-primary-day, 0.3) 0%,
68
+ rgba($bpk-text-primary-day, 0) 100%
69
+ );
70
+ }
71
+
72
+ &-high {
73
+ background: linear-gradient(
74
+ 180deg,
75
+ rgba($bpk-text-primary-day, 0.4) 0%,
76
+ rgba($bpk-text-primary-day, 0) 100%
77
+ );
78
+ }
79
+ }
80
+
81
+ &--bottom {
82
+ &-low {
83
+ background: linear-gradient(
84
+ 180deg,
85
+ rgba($bpk-text-primary-day, 0) 0%,
86
+ rgba($bpk-text-primary-day, 0.15) 100%
87
+ );
88
+ }
89
+
90
+ &-medium {
91
+ background: linear-gradient(
92
+ 180deg,
93
+ rgba($bpk-text-primary-day, 0) 0%,
94
+ rgba($bpk-text-primary-day, 0.3) 100%
95
+ );
96
+ }
97
+
98
+ &-high {
99
+ background: linear-gradient(
100
+ 180deg,
101
+ rgba($bpk-text-primary-day, 0) 0%,
102
+ rgba($bpk-text-primary-day, 0.4) 100%
103
+ );
104
+ }
105
+ }
106
+
107
+ &--left {
108
+ &-low {
109
+ background: linear-gradient(
110
+ 90deg,
111
+ rgba($bpk-text-primary-day, 0.15) 0%,
112
+ rgba($bpk-text-primary-day, 0) 98.5%
113
+ );
114
+ }
115
+
116
+ &-medium {
117
+ background: linear-gradient(
118
+ 90deg,
119
+ rgba($bpk-text-primary-day, 0.3) 0%,
120
+ rgba($bpk-text-primary-day, 0) 98.5%
121
+ );
122
+ }
123
+
124
+ &-high {
125
+ background: linear-gradient(
126
+ 90deg,
127
+ rgba($bpk-text-primary-day, 0.4) 0%,
128
+ rgba($bpk-text-primary-day, 0) 98.5%
129
+ );
130
+ }
131
+ }
132
+
133
+ &--right {
134
+ &-low {
135
+ background: linear-gradient(
136
+ 90deg,
137
+ rgba($bpk-text-primary-day, 0) 0%,
138
+ rgba($bpk-text-primary-day, 0.15) 98.5%
139
+ );
140
+ }
141
+
142
+ &-medium {
143
+ background: linear-gradient(
144
+ 90deg,
145
+ rgba($bpk-text-primary-day, 0) 0%,
146
+ rgba($bpk-text-primary-day, 0.3) 98.5%
147
+ );
148
+ }
149
+
150
+ &-high {
151
+ background: linear-gradient(
152
+ 90deg,
153
+ rgba($bpk-text-primary-day, 0) 0%,
154
+ rgba($bpk-text-primary-day, 0.4) 98.5%
155
+ );
156
+ }
157
+ }
158
+
159
+ &--vignette {
160
+ box-shadow: inset 0 0 50px rgba($bpk-text-primary-day, 0.12);
39
161
  }
40
162
  }
41
163
  }
package/bpk-component-page-indicator/README.md CHANGED
@@ -28,15 +28,15 @@ export default () =>
28
28
 
29
29
  ## Props
30
30
 
31
- | Property | PropType | Required | Default Value |
32
- |-----------------|----------------|----------|-----------------|
33
- | currentIndex | number | true | - |
34
- | totalIndicators | number | true | - |
35
- | indicatorLabel | string | true | - |
36
- | prevNavLabel | string | true | - |
37
- | nextNavLabel | string | true | - |
38
- | className | string | false | null |
39
- | showNav | bool | false | false |
40
- | variant | oneOf(VARIANT) | false | VARIANT.default |
41
- | onClick | func | false | null |
31
+ | Property | PropType | Required | Default Value |
32
+ |-----------------|-------------------------------------------|----------|-----------------|
33
+ | currentIndex | number | true | - |
34
+ | totalIndicators | number | true | - |
35
+ | indicatorLabel | string | true | - |
36
+ | prevNavLabel | string | true | - |
37
+ | nextNavLabel | string | true | - |
38
+ | className | string | false | null |
39
+ | showNav | bool | false | false |
40
+ | variant | oneOf(VARIANT.default, VARIANT.overImage) | false | VARIANT.default |
41
+ | onClick | func | false | null |
42
42
 
package/bpk-component-pagination/src/BpkPaginationList.module.scss CHANGED
@@ -24,6 +24,7 @@ $bpk-spacing-v2: true;
24
24
  display: flex;
25
25
  margin: 0;
26
26
  padding: 0;
27
+ align-items: baseline;
27
28
  list-style: none;
28
29
 
29
30
  &__item {
package/bpk-component-pagination/src/BpkPaginationNudger.module.scss CHANGED
@@ -26,7 +26,6 @@ $bpk-spacing-v2: true;
26
26
 
27
27
  &__button {
28
28
  height: $bpk-button-height;
29
- padding: 0 bpk-spacing-md();
30
29
  border: none;
31
30
  background: none;
32
31
  cursor: pointer;
@@ -34,6 +33,10 @@ $bpk-spacing-v2: true;
34
33
 
35
34
  @include bpk-button--link;
36
35
 
36
+ // Using stylelint-disable as we need to override padding provided by bpk-button--link otherwise it shifts the arrow buttons out of alignment.
37
+ /* stylelint-disable-next-line order/properties-order, order/order */
38
+ padding: 0;
39
+
37
40
  &:disabled {
38
41
  cursor: not-allowed;
39
42
  }
package/bpk-component-popover/README.md CHANGED
@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
9
9
  ## Usage
10
10
 
11
11
  ```js
12
- import React, { Component } from 'react';
12
+ import React, { createRef } from 'react';
13
13
  import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
14
14
  import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';
15
15
  import BpkText from '@skyscanner/backpack-web/bpk-component-text';
@@ -18,7 +18,7 @@ class App extends Component {
18
18
  constructor() {
19
19
  super();
20
20
 
21
- this.ref = React.createRef();
21
+ this.ref = createRef();
22
22
  this.state = {
23
23
  isOpen: false,
24
24
  };
package/bpk-component-switch/src/BpkSwitch.module.scss CHANGED
@@ -67,7 +67,7 @@ $border-width: $bpk-one-pixel-rem * 2;
67
67
  height: $height;
68
68
  transition: background $bpk-duration-sm linear;
69
69
  border-radius: $height / 2;
70
- background: $bpk-surface-highlight-day;
70
+ background: $bpk-text-disabled-day;
71
71
  cursor: pointer;
72
72
 
73
73
  // The 'handle'.
package/bpk-component-tooltip/README.md CHANGED
@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
9
9
  ## Usage
10
10
 
11
11
  ```js
12
- import React, { Component } from 'react';
12
+ import React, { useRef } from 'react';
13
13
  import BpkText from '@skyscanner/backpack-web/bpk-component-text';
14
14
  import BpkTooltip from '@skyscanner/backpack-web/bpk-component-tooltip';
15
15
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "16.0.0",
3
+ "version": "16.2.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",