@skyscanner/backpack-web 22.0.0 → 22.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 (22) hide show
  1. package/bpk-component-accordion/README.md +6 -4
  2. package/bpk-component-accordion/src/BpkAccordion.js +22 -7
  3. package/bpk-component-accordion/src/BpkAccordion.module.scss +4 -0
  4. package/bpk-component-accordion/src/BpkAccordionItem.js +50 -9
  5. package/bpk-component-accordion/src/BpkAccordionItem.module.scss +28 -2
  6. package/bpk-component-icon/lg/baggage-cabin-add.js +1 -1
  7. package/bpk-component-icon/lg/baggage-cabin-not-included.js +1 -1
  8. package/bpk-component-icon/lg/baggage-cabin.js +1 -1
  9. package/bpk-component-icon/lg/baggage-checked-add.js +1 -1
  10. package/bpk-component-icon/lg/baggage-checked-not-included.js +1 -1
  11. package/bpk-component-icon/lg/baggage-checked.js +1 -1
  12. package/bpk-component-icon/lg/baggage-generic.js +1 -1
  13. package/bpk-component-icon/sm/baggage-cabin-add.js +1 -1
  14. package/bpk-component-icon/sm/baggage-cabin-not-included.js +1 -1
  15. package/bpk-component-icon/sm/baggage-cabin.js +1 -1
  16. package/bpk-component-icon/sm/baggage-checked-add.js +1 -1
  17. package/bpk-component-icon/sm/baggage-checked-not-included.js +1 -1
  18. package/bpk-component-icon/sm/baggage-checked.js +1 -1
  19. package/bpk-component-icon/sm/baggage-generic.js +1 -1
  20. package/bpk-component-price/README.md +17 -13
  21. package/bpk-component-price/src/BpkPrice.js +1 -1
  22. package/package.json +3 -3
package/bpk-component-accordion/README.md CHANGED
@@ -80,10 +80,12 @@ const AlignedStopsIcon = withAlignment(StopsIcon, lineHeightBase, iconSizeSm);
80
80
 
81
81
  ### BpkAccordion
82
82
 
83
- | Property | PropType | Required | Default Value |
84
- | --------- | -------- | -------- | ------------- |
85
- | children | node | true | - |
86
- | className | string | false | null |
83
+ | Property | PropType | Required | Default Value |
84
+ | --------------- | -------- | -------- | ------------- |
85
+ | children | node | true | - |
86
+ | className | string | false | null |
87
+ | onDark | bool | false | false |
88
+ | divider | bool | false | true |
87
89
 
88
90
  ### BpkAccordionItem
89
91
 
package/bpk-component-accordion/src/BpkAccordion.js CHANGED
@@ -19,7 +19,7 @@
19
19
  /* @flow strict */
20
20
 
21
21
  import PropTypes from 'prop-types';
22
- import type { Node } from 'react';
22
+ import { createContext, Node } from 'react';
23
23
 
24
24
  import { cssModules } from '../../bpk-react-utils';
25
25
 
@@ -29,26 +29,41 @@ const getClassName = cssModules(STYLES);
29
29
 
30
30
  type Props = { children: Node, className: ?string };
31
31
 
32
+ export const BpkAccordionContext = createContext({
33
+ onDark: false,
34
+ divider: true,
35
+ });
36
+
32
37
  const BpkAccordion = (props: Props) => {
33
- const { children, className, ...rest } = props;
38
+ const { children, className, divider, onDark, ...rest } = props;
34
39
 
35
- const classNames = getClassName('bpk-accordion', className);
40
+ const classNames = getClassName(
41
+ 'bpk-accordion',
42
+ onDark && 'bpk-accordion--on-dark',
43
+ className,
44
+ );
36
45
 
37
46
  return (
38
- // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
39
- <dl className={classNames} {...rest}>
40
- {children}
41
- </dl>
47
+ <BpkAccordionContext.Provider value={{ onDark, divider }}>
48
+ {/* // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */}
49
+ <dl className={classNames} {...rest}>
50
+ {children}
51
+ </dl>
52
+ </BpkAccordionContext.Provider>
42
53
  );
43
54
  };
44
55
 
45
56
  BpkAccordion.propTypes = {
46
57
  children: PropTypes.node.isRequired,
47
58
  className: PropTypes.string,
59
+ onDark: PropTypes.bool,
60
+ divider: PropTypes.bool,
48
61
  };
49
62
 
50
63
  BpkAccordion.defaultProps = {
51
64
  className: null,
65
+ onDark: false,
66
+ divider: true,
52
67
  };
53
68
 
54
69
  export default BpkAccordion;
package/bpk-component-accordion/src/BpkAccordion.module.scss CHANGED
@@ -20,4 +20,8 @@
20
20
 
21
21
  .bpk-accordion {
22
22
  margin: 0;
23
+
24
+ &--on-dark {
25
+ color: $bpk-text-on-dark-day;
26
+ }
23
27
  }
package/bpk-component-accordion/src/BpkAccordionItem.js CHANGED
@@ -19,8 +19,7 @@
19
19
  /* @flow strict */
20
20
 
21
21
  import PropTypes from 'prop-types';
22
- import type { Node, Element } from 'react';
23
- import { cloneElement } from 'react';
22
+ import { Node, Element, useContext, cloneElement } from 'react';
24
23
 
25
24
  import AnimateHeight from '../../bpk-animate-height';
26
25
  import { withButtonAlignment } from '../../bpk-component-icon';
@@ -28,6 +27,7 @@ import ChevronDownIcon from '../../bpk-component-icon/sm/chevron-down';
28
27
  import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
29
28
  import { cssModules } from '../../bpk-react-utils';
30
29
 
30
+ import { BpkAccordionContext } from './BpkAccordion';
31
31
  import STYLES from './BpkAccordionItem.module.scss';
32
32
 
33
33
  const getClassName = cssModules(STYLES);
@@ -46,7 +46,11 @@ type Props = {
46
46
  };
47
47
 
48
48
  const BpkAccordionItem = (props: Props) => {
49
+ const { divider, onDark } = useContext(BpkAccordionContext);
49
50
  const iconClassNames = [getClassName('bpk-accordion__item-expand-icon')];
51
+ const titleTextClassNames = [getClassName('bpk-accordion__title-text')];
52
+ const titleClassNames = [getClassName('bpk-accordion__title')];
53
+ const contentClassNames = [getClassName('bpk-accordion__content-container')];
50
54
  const {
51
55
  children,
52
56
  expanded,
@@ -65,10 +69,50 @@ const BpkAccordionItem = (props: Props) => {
65
69
  // $FlowFixMe[prop-missing] - see above
66
70
  delete rest.initiallyExpanded;
67
71
 
68
- if (expanded) {
72
+ if (expanded && !onDark) {
69
73
  iconClassNames.push(
70
74
  getClassName('bpk-accordion__item-expand-icon--flipped'),
71
75
  );
76
+ if (divider) {
77
+ contentClassNames.push(
78
+ getClassName('bpk-accordion__content-container--expanded'),
79
+ );
80
+ }
81
+ }
82
+
83
+ if (expanded && onDark) {
84
+ iconClassNames.push(
85
+ getClassName('bpk-accordion__item-expand-icon--flipped'),
86
+ );
87
+ iconClassNames.push(
88
+ getClassName('bpk-accordion__item-expand-icon--on-dark'),
89
+ );
90
+ if (divider) {
91
+ contentClassNames.push(
92
+ getClassName('bpk-accordion__content-container--expanded-on-dark'),
93
+ );
94
+ }
95
+ titleTextClassNames.push(
96
+ getClassName('bpk-accordion__title-text--on-dark'),
97
+ );
98
+ }
99
+
100
+ if (!expanded && onDark) {
101
+ iconClassNames.push(
102
+ getClassName('bpk-accordion__item-expand-icon--on-dark'),
103
+ );
104
+ if (divider) {
105
+ titleClassNames.push(
106
+ getClassName('bpk-accordion__title--collapsed-on-dark'),
107
+ );
108
+ }
109
+ titleTextClassNames.push(
110
+ getClassName('bpk-accordion__title-text--on-dark'),
111
+ );
112
+ }
113
+
114
+ if (!expanded && !onDark && divider) {
115
+ titleClassNames.push(getClassName('bpk-accordion__title--collapsed'));
72
116
  }
73
117
 
74
118
  const contentId = `${id}_content`;
@@ -81,7 +125,7 @@ const BpkAccordionItem = (props: Props) => {
81
125
  return (
82
126
  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
83
127
  <div id={id} {...rest}>
84
- <dt className={getClassName('bpk-accordion__title')}>
128
+ <dt className={titleClassNames.join(' ')}>
85
129
  <button
86
130
  type="button"
87
131
  aria-expanded={expanded}
@@ -93,7 +137,7 @@ const BpkAccordionItem = (props: Props) => {
93
137
  <BpkText
94
138
  textStyle={textStyle}
95
139
  tagName={tagName}
96
- className={getClassName('bpk-accordion__title-text')}
140
+ className={titleTextClassNames.join(' ')}
97
141
  >
98
142
  {clonedIcon}
99
143
  {title}
@@ -104,10 +148,7 @@ const BpkAccordionItem = (props: Props) => {
104
148
  </span>
105
149
  </button>
106
150
  </dt>
107
- <dd
108
- id={contentId}
109
- className={getClassName('bpk-accordion__content-container')}
110
- >
151
+ <dd id={contentId} className={contentClassNames.join(' ')}>
111
152
  <AnimateHeight duration={200} height={expanded ? 'auto' : 0}>
112
153
  {children}
113
154
  </AnimateHeight>
package/bpk-component-accordion/src/BpkAccordionItem.module.scss CHANGED
@@ -24,7 +24,13 @@ $bpk-spacing-v2: true;
24
24
  &__title {
25
25
  height: auto;
26
26
 
27
- @include bpk-border-bottom-sm($bpk-line-day);
27
+ &--collapsed {
28
+ @include bpk-border-bottom-sm($bpk-line-day);
29
+
30
+ &-on-dark {
31
+ @include bpk-border-bottom-sm($bpk-line-on-dark-day);
32
+ }
33
+ }
28
34
  }
29
35
 
30
36
  &__toggle-button {
@@ -45,13 +51,17 @@ $bpk-spacing-v2: true;
45
51
  &__flex-container {
46
52
  display: inline-flex;
47
53
  width: 100%;
48
- margin: (bpk-spacing-md()) 0;
54
+ margin: (bpk-spacing-base()) 0;
49
55
  flex-direction: row;
50
56
  }
51
57
 
52
58
  &__title-text {
53
59
  display: inline-block;
54
60
  flex-grow: 1;
61
+
62
+ &--on-dark {
63
+ color: $bpk-canvas-day;
64
+ }
55
65
  }
56
66
 
57
67
  &__icon-wrapper {
@@ -68,9 +78,25 @@ $bpk-spacing-v2: true;
68
78
  &--flipped {
69
79
  transform: scaleY(-1);
70
80
  }
81
+
82
+ &--on-dark {
83
+ fill: $bpk-canvas-day;
84
+ }
71
85
  }
72
86
 
73
87
  &__content-container {
74
88
  margin: 0;
89
+
90
+ &--expanded {
91
+ padding-bottom: bpk-spacing-base();
92
+
93
+ @include bpk-border-bottom-sm($bpk-line-day);
94
+
95
+ &-on-dark {
96
+ padding-bottom: bpk-spacing-base();
97
+
98
+ @include bpk-border-bottom-sm($bpk-line-on-dark-day);
99
+ }
100
+ }
75
101
  }
76
102
  }
package/bpk-component-icon/lg/baggage-cabin-add.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
6
  width: "1.5rem",
7
7
  height: "1.5rem"
8
- }} {...props}><path d="M6 2.333C6 1.597 6.597 1 7.333 1h3.334C11.403 1 12 1.597 12 2.333V10.5a.5.5 0 01-1 0V3H7v7.5a.5.5 0 01-1 0V2.333zM5 12h5.594c.506 0 .747.752.393 1.114A6.977 6.977 0 009 18c0 .794.132 1.556.375 2.268.12.347-.125.732-.492.732H7v1a1 1 0 11-2 0v-1a2 2 0 01-2-2v-5a2 2 0 012-2zm16.001 6.001A5 5 0 1111 18a5 5 0 0110.001.001zm-2 0a1 1 0 00-1-1h-1v-1a1 1 0 10-2 0v1h-1A1 1 0 0014 19h1v1a1 1 0 102 0v-1h1a1 1 0 001-1z" /></svg>);
8
+ }} {...props}><path d="M6 2.498A1.5 1.5 0 017.5 1h3A1.5 1.5 0 0112 2.5V12h1c.212 0 .416.033.608.094.2.064.176.325-.016.409a6.001 6.001 0 00-2.993 8.114c.085.174-.037.383-.23.383H7v1a1 1 0 11-2 0v-1a2 2 0 01-2-2v-5a2 2 0 012-2h1V2.498zm1.5.002A.5.5 0 007 3v9h4V3a.5.5 0 00-.5-.5h-3zm13.501 15.501A5 5 0 1111 18a5 5 0 0110.001.001zm-2.001 0a1 1 0 00-1-1h-1v-1a1 1 0 10-2 0v1h-1A1 1 0 0014 19h1v1a1 1 0 102 0v-1h1a1 1 0 001-1z" /></svg>);
package/bpk-component-icon/lg/baggage-cabin-not-included.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
6
  width: "1.5rem",
7
7
  height: "1.5rem"
8
- }} {...props}><path d="M9 2.333C9 1.597 9.597 1 10.333 1h3.334C14.403 1 15 1.597 15 2.333V7.55l6.254-6.254a1 1 0 011.414 0l.036.035a1 1 0 010 1.414L15 10.45l-.548.549L13.449 12l-7.407 7.408L2.748 22.7a1 1 0 01-1.414 0l-.036-.035a1 1 0 010-1.415L6 16.55V14a2 2 0 012-2h2.55L14 8.55V3h-4v7.5a.5.5 0 01-1 0V2.333zm7.503 9.73A2 2 0 0118 14v5a2 2 0 01-2 2v1a1 1 0 11-2 0v-1h-4v1a1 1 0 11-2 0v-1.515a.5.5 0 01.146-.354l7.94-7.94a.438.438 0 01.417-.127z" /></svg>);
8
+ }} {...props}><path d="M9 2.498A1.5 1.5 0 0110.5 1h3A1.5 1.5 0 0115 2.5v5.017l6.257-6.221a1 1 0 011.415 0l.035.035a1 1 0 010 1.415L2.743 22.71a1 1 0 01-1.414 0l-.036-.036a1 1 0 010-1.414L6 16.53V14a2 2 0 012-2h1V2.498zm5 6.013V3a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5v9h.511l1.988-1.996L14 8.51zM8 20.603a.25.25 0 01.073-.176l8.242-8.289a.233.233 0 01.228-.063A2.001 2.001 0 0118 14v5a2 2 0 01-2 2v1a1 1 0 11-2 0v-1h-4v1a1 1 0 11-2 0v-1.397z" /></svg>);
package/bpk-component-icon/lg/baggage-cabin.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
6
  width: "1.5rem",
7
7
  height: "1.5rem"
8
- }} {...props}><path d="M9 2.333C9 1.597 9.597 1 10.333 1h3.334C14.403 1 15 1.597 15 2.333V10.5a.5.5 0 01-1 0V3h-4v7.5a.5.5 0 01-1 0V2.333zM8 12h8a2 2 0 012 2v5a2 2 0 01-2 2v1a1 1 0 11-2 0v-1h-4v1a1 1 0 11-2 0v-1a2 2 0 01-2-2v-5a2 2 0 012-2z" /></svg>);
8
+ }} {...props}><path d="M9 2.498V12H8a2 2 0 00-2 2v5a2 2 0 002 2v1a1 1 0 102 0v-1h4v1a1 1 0 102 0v-1a2 2 0 002-2v-5a2 2 0 00-2-2h-1V2.5A1.5 1.5 0 0013.5 1h-3A1.5 1.5 0 009 2.498zM10 3a.5.5 0 01.5-.5h3a.5.5 0 01.5.5v9h-4V3z" /></svg>);
package/bpk-component-icon/lg/baggage-checked-add.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
6
  width: "1.5rem",
7
7
  height: "1.5rem"
8
- }} {...props}><path d="M7.333 1C6.597 1 6 1.597 6 2.333c0 .03.002.06.006.09A.504.504 0 006 2.5v1a.5.5 0 001 0V3h4v.5a.5.5 0 001 0v-1a.505.505 0 00-.006-.077.675.675 0 00.006-.09C12 1.597 11.403 1 10.667 1H7.333zM3 7a2 2 0 012-2h8a2 2 0 012 2v3.637a.527.527 0 01-.427.509 7.003 7.003 0 00-5.198 9.122c.12.347-.125.732-.492.732H7v1a1 1 0 11-2 0v-1a2 2 0 01-2-2V7zm18.001 11.001A5 5 0 1111 18a5 5 0 0110.001.001zm-2 0a1 1 0 00-1-1h-1v-1a1 1 0 10-2 0v1h-1A1 1 0 0014 19h1v1a1 1 0 102 0v-1h1a1 1 0 001-1z" /></svg>);
8
+ }} {...props}><path d="M6 2.498A1.5 1.5 0 017.5 1h3A1.5 1.5 0 0112 2.5V5h1a2 2 0 012 2v4.871a.258.258 0 01-.208.25 6.002 6.002 0 00-4.193 8.496c.085.174-.037.383-.23.383H7v1a1 1 0 11-2 0v-1a2 2 0 01-2-2V7a2 2 0 012-2h1V2.498zm1.5.002A.5.5 0 007 3v2h4V3a.5.5 0 00-.5-.5h-3zm13.501 15.501A5 5 0 1111 18a5 5 0 0110.001.001zm-2.001 0a1 1 0 00-1-1h-1v-1a1 1 0 10-2 0v1h-1A1 1 0 0014 19h1v1a1 1 0 102 0v-1h1a1 1 0 001-1z" /></svg>);
package/bpk-component-icon/lg/baggage-checked-not-included.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
6
  width: "1.5rem",
7
7
  height: "1.5rem"
8
- }} {...props}><path d="M10.333 1h3.334C14.403 1 15 1.597 15 2.333V3.5a.5.5 0 01-1 0V3h-4v.5a.5.5 0 01-1 0V2.333C9 1.597 9.597 1 10.333 1zM6 7a2 2 0 012-2h8c.437 0 .842.14 1.171.379l4.083-4.083a1 1 0 011.414 0l.036.035a1 1 0 010 1.414L18 7.45 6.042 19.408 2.748 22.7a1 1 0 01-1.414 0l-.036-.035a1 1 0 010-1.415L6 16.55V7zm2 13.485a.5.5 0 01.146-.354l9-9a.5.5 0 01.854.354V19a2 2 0 01-2 2v1a1 1 0 11-2 0v-1h-4v1a1 1 0 11-2 0v-1.515z" /></svg>);
8
+ }} {...props}><path d="M9 2.498A1.5 1.5 0 0110.5 1h3A1.5 1.5 0 0115 2.5V5h1c.432 0 .832.137 1.16.37l4.097-4.074a1 1 0 011.415 0l.035.035a1 1 0 010 1.415L2.743 22.71a1 1 0 01-1.414 0l-.036-.036a1 1 0 010-1.414L6 16.53V7a2 2 0 012-2h1V2.498zM8.073 20.38a.25.25 0 00-.073.177V22a1 1 0 102 0v-1h4v1a1 1 0 102 0v-1a2 2 0 002-2v-7.943a.25.25 0 00-.427-.177l-8.535 8.535-.965.965zM10.5 2.5a.5.5 0 00-.5.5v2h4V3a.5.5 0 00-.5-.5h-3z" /></svg>);
package/bpk-component-icon/lg/baggage-checked.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
6
  width: "1.5rem",
7
7
  height: "1.5rem"
8
- }} {...props}><path d="M10.333 1h3.334C14.403 1 15 1.597 15 2.333V3.5a.5.5 0 01-1 0V3h-4v.5a.5.5 0 01-1 0V2.333C9 1.597 9.597 1 10.333 1zM6 7a2 2 0 012-2h8a2 2 0 012 2v12a2 2 0 01-2 2v1a1 1 0 11-2 0v-1h-4v1a1 1 0 11-2 0v-1a2 2 0 01-2-2V7z" /></svg>);
8
+ }} {...props}><path d="M9 2.498V5H8a2 2 0 00-2 2v12a2 2 0 002 2v1a1 1 0 102 0v-1h4v1a1 1 0 102 0v-1a2 2 0 002-2V7a2 2 0 00-2-2h-1V2.5A1.5 1.5 0 0013.5 1h-3A1.5 1.5 0 009 2.498zM10 3a.5.5 0 01.5-.5h3a.5.5 0 01.5.5v2h-4V3z" /></svg>);
package/bpk-component-icon/lg/baggage-generic.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
6
  width: "1.5rem",
7
7
  height: "1.5rem"
8
- }} {...props}><path d="M6.333 1h3.334C10.403 1 11 1.597 11 2.333V10.5a.5.5 0 01-1 0V3H6v7.5a.5.5 0 01-1 0V2.333C5 1.597 5.597 1 6.333 1zM2 14a2 2 0 012-2h8a2 2 0 012 2v5a2 2 0 01-2 2v1a1 1 0 11-2 0v-1H6v1a1 1 0 11-2 0v-1a2 2 0 01-2-2v-5zM13 3.5V2.333C13 1.597 13.597 1 14.333 1h3.334C18.403 1 19 1.597 19 2.333V3.5a.5.5 0 01-1 0V3h-4v.5a.5.5 0 01-1 0zm3 17V14c0-1.728-1.095-3.2-2.63-3.76a.545.545 0 01-.37-.502V5.5a.5.5 0 01.5-.5H20a2 2 0 012 2v12a2 2 0 01-2 2v1a1 1 0 11-2 0v-1h-1.5a.5.5 0 01-.5-.5z" /></svg>);
8
+ }} {...props}><path d="M5 2.5v-.002A1.5 1.5 0 016.5 1h3A1.5 1.5 0 0111 2.5V12h1a2 2 0 012 2v5a2 2 0 01-2 2v1a1 1 0 11-2 0v-1H6v1a1 1 0 11-2 0v-1a2 2 0 01-2-2v-5a2 2 0 012-2h1V2.5zM6 3v9h4V3a.5.5 0 00-.5-.5h-3A.5.5 0 006 3zm7-.5v-.002A1.5 1.5 0 0114.5 1h3A1.5 1.5 0 0119 2.5V5h1a2 2 0 012 2v12a2 2 0 01-2 2v1a1 1 0 11-2 0v-1h-1.817c-.173 0-.294-.171-.256-.34.048-.212.073-.433.073-.66v-7a3 3 0 00-2.75-2.99.267.267 0 01-.25-.26V2.5zm1 .5v2h4V3a.5.5 0 00-.5-.5h-3a.5.5 0 00-.5.5z" /></svg>);
package/bpk-component-icon/sm/baggage-cabin-add.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
6
6
  width: "1rem",
7
7
  height: "1rem"
8
- }} {...props}><path d="M7.8 0h2.4A1.8 1.8 0 0112 1.746v9.504a.75.75 0 01-1.5 0V3h-3v8.25a.75.75 0 01-1.5 0V1.8A1.8 1.8 0 017.8 0zM5.25 13.5h5.172c.362 0 .541.477.3.747A6.725 6.725 0 009 18.75c0 1.137.28 2.207.777 3.147.14.265-.043.603-.343.603H7.5v.375a1.125 1.125 0 01-2.25 0V22.5A2.25 2.25 0 013 20.25v-4.5a2.25 2.25 0 012.25-2.25zM21 18.75a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0zm-6-3V18h-2.25a.75.75 0 000 1.5H15v2.25a.75.75 0 001.5 0V19.5h2.25a.75.75 0 000-1.5H16.5v-2.25a.75.75 0 00-1.5 0z" /></svg>);
8
+ }} {...props}><path d="M7.5 0h3a2.25 2.25 0 012.25 2.25V12h.75c.077 0 .153.004.228.011.332.034.315.441.01.578a6.751 6.751 0 00-3.211 9.308c.14.265-.043.603-.343.603H6.75v.375a1.125 1.125 0 01-2.25 0V22.5a2.25 2.25 0 01-2.25-2.25v-6A2.25 2.25 0 014.5 12h.75V2.248A2.25 2.25 0 017.5 0zm3.75 2.625a.375.375 0 00-.375-.375h-3.75a.375.375 0 00-.375.375V12h4.5V2.625zm10.5 16.125a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0zm-6-3V18H13.5a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0V19.5h2.25a.75.75 0 000-1.5h-2.25v-2.25a.75.75 0 00-1.5 0z" /></svg>);
package/bpk-component-icon/sm/baggage-cabin-not-included.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
6
6
  width: "1rem",
7
7
  height: "1rem"
8
- }} {...props}><g clipPath="url(#clip0_8306_178)"><path d="M10.8 0h2.4A1.8 1.8 0 0115 1.746V6.9L21.443.457a1.5 1.5 0 112.121 2.121L2.582 23.561a1.5 1.5 0 01-2.121-2.122L9 12.9V1.8A1.8 1.8 0 0110.8 0zm2.7 8.4V3h-3v8.25c-.02.17-.007.115-.02.17L13.5 8.4zM8.25 22.875v-.636a.25.25 0 01.073-.177l8.237-8.237a.234.234 0 01.278-.045A2.25 2.25 0 0118 15.75v4.5a2.25 2.25 0 01-2.25 2.25v.375a1.125 1.125 0 01-2.25 0V22.5h-3v.375a1.125 1.125 0 01-2.25 0z" /></g></svg>);
8
+ }} {...props}><g clipPath="url(#a)"><path d="M15.75 6.127L21.437.44a1.501 1.501 0 012.123 2.123L2.563 23.56A1.501 1.501 0 11.44 21.437l4.81-4.81V14.25A2.25 2.25 0 017.5 12h.75V2.248A2.25 2.25 0 0110.5 0h3a2.25 2.25 0 012.25 2.25v3.877zm-1.5 1.5V2.625a.375.375 0 00-.375-.375h-3.75a.375.375 0 00-.375.375V12h.127l4.373-4.373zm3.86 5.051c-.132-.135-.345-.118-.478.015L7.609 22.765a.318.318 0 00-.098.264 1.125 1.125 0 002.239-.154V22.5h4.5v.375a1.125 1.125 0 002.25 0V22.5a2.25 2.25 0 002.25-2.25v-6c0-.612-.244-1.166-.64-1.572z" /></g></svg>);
package/bpk-component-icon/sm/baggage-cabin.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
6
6
  width: "1rem",
7
7
  height: "1rem"
8
- }} {...props}><path d="M10.8 0h2.4A1.8 1.8 0 0115 1.746v9.504a.75.75 0 01-1.5 0V3h-3v8.25a.75.75 0 01-1.5 0V1.8A1.8 1.8 0 0110.8 0zM8.25 13.5h7.5A2.25 2.25 0 0118 15.75v4.5a2.25 2.25 0 01-2.25 2.25v.375a1.125 1.125 0 01-2.25 0V22.5h-3v.375a1.125 1.125 0 01-2.25 0V22.5A2.25 2.25 0 016 20.25v-4.5a2.25 2.25 0 012.25-2.25z" /></svg>);
8
+ }} {...props}><path d="M10.5 0h3a2.25 2.25 0 012.25 2.25V12h.75a2.25 2.25 0 012.25 2.25v6a2.25 2.25 0 01-2.25 2.25v.375a1.125 1.125 0 01-2.25 0V22.5h-4.5v.375a1.125 1.125 0 01-2.25 0V22.5a2.25 2.25 0 01-2.25-2.25v-6A2.25 2.25 0 017.5 12h.75V2.248A2.25 2.25 0 0110.5 0zm3.75 2.625a.375.375 0 00-.375-.375h-3.75a.375.375 0 00-.375.375V12h4.5V2.625z" /></svg>);
package/bpk-component-icon/sm/baggage-checked-add.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
6
6
  width: "1rem",
7
7
  height: "1rem"
8
- }} {...props}><path d="M6 1.8A1.8 1.8 0 017.8 0h2.4A1.8 1.8 0 0112 1.8v1.95a.75.75 0 01-1.5 0V3h-3v.75a.75.75 0 01-1.5 0V1.8zM5.25 6h7.5A2.25 2.25 0 0115 8.25v3.455a.39.39 0 01-.333.381 6.752 6.752 0 00-4.89 9.811c.14.265-.043.603-.343.603H7.5v.375a1.125 1.125 0 01-2.25 0V22.5A2.25 2.25 0 013 20.25v-12A2.25 2.25 0 015.25 6zM21 18.75a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0zm-6-3V18h-2.25a.75.75 0 000 1.5H15v2.25a.75.75 0 001.5 0V19.5h2.25a.75.75 0 000-1.5H16.5v-2.25a.75.75 0 00-1.5 0z" /></svg>);
8
+ }} {...props}><path d="M7.5 0a2.25 2.25 0 00-2.25 2.248V6H4.5a2.25 2.25 0 00-2.25 2.25v12A2.25 2.25 0 004.5 22.5v.375a1.125 1.125 0 002.25 0V22.5h3.434c.3 0 .483-.338.343-.603a6.752 6.752 0 014.89-9.81.39.39 0 00.333-.382V8.25A2.25 2.25 0 0013.5 6h-.75V2.25A2.25 2.25 0 0010.5 0h-3zm3.75 2.625V6h-4.5V2.625c0-.207.168-.375.375-.375h3.75c.207 0 .375.168.375.375zm10.5 16.125a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0zm-6-3V18H13.5a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0V19.5h2.25a.75.75 0 000-1.5h-2.25v-2.25a.75.75 0 00-1.5 0z" /></svg>);
package/bpk-component-icon/sm/baggage-checked-not-included.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
6
6
  width: "1rem",
7
7
  height: "1rem"
8
- }} {...props}><g clipPath="url(#clip0_8306_180)"><path d="M9 1.8A1.8 1.8 0 0110.8 0h2.4A1.8 1.8 0 0115 1.8v1.95a.75.75 0 01-1.5 0V3h-3v.75a.75.75 0 01-1.5 0V1.8zM8.25 6h7.5c.049 0 .097.002.146.005L21.453.446a1.485 1.485 0 012.1 2.1l-5.559 5.56L6 20.1l-3.45 3.45a1.485 1.485 0 11-2.1-2.1L6 15.9V8.25A2.25 2.25 0 018.25 6zm0 16.249c0-.1.04-.195.11-.266l9-9a.375.375 0 01.64.266v7.001a2.25 2.25 0 01-2.25 2.25v.375a1.125 1.125 0 01-2.25 0V22.5h-3v.375a1.125 1.125 0 01-2.25 0v-.626z" /></g></svg>);
8
+ }} {...props}><g clipPath="url(#a)"><path d="M15.877 6l5.56-5.56a1.501 1.501 0 012.123 2.123L2.563 23.56A1.501 1.501 0 11.44 21.437l4.81-4.81V8.25A2.25 2.25 0 017.5 6h.75V2.248A2.25 2.25 0 0110.5 0h3a2.25 2.25 0 012.25 2.25V6h.127zm2.873 6.48a.375.375 0 00-.64-.266l-10.5 10.5a.319.319 0 00-.1.265c.075.556.546 1.021 1.115 1.021.621 0 1.125-.504 1.125-1.125V22.5h4.5v.375a1.125 1.125 0 002.25 0V22.5a2.25 2.25 0 002.25-2.25v-7.77zm-4.5-9.855a.375.375 0 00-.375-.375h-3.75a.375.375 0 00-.375.375V6h4.5V2.625z" /></g></svg>);
package/bpk-component-icon/sm/baggage-checked.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
6
6
  width: "1rem",
7
7
  height: "1rem"
8
- }} {...props}><path d="M9 1.8A1.8 1.8 0 0110.8 0h2.4A1.8 1.8 0 0115 1.8v1.95a.75.75 0 01-1.5 0V3h-3v.75a.75.75 0 01-1.5 0V1.8zM8.25 6h7.5A2.25 2.25 0 0118 8.25v12a2.25 2.25 0 01-2.25 2.25v.375a1.125 1.125 0 01-2.25 0V22.5h-3v.375a1.125 1.125 0 01-2.25 0V22.5A2.25 2.25 0 016 20.25v-12A2.25 2.25 0 018.25 6z" /></svg>);
8
+ }} {...props}><path d="M10.5 0a2.25 2.25 0 00-2.25 2.248V6H7.5a2.25 2.25 0 00-2.25 2.25v12A2.25 2.25 0 007.5 22.5v.375a1.125 1.125 0 002.25 0V22.5h4.5v.375a1.125 1.125 0 002.25 0V22.5a2.25 2.25 0 002.25-2.25v-12A2.25 2.25 0 0016.5 6h-.75V2.25A2.25 2.25 0 0013.5 0h-3zm3.375 2.25c.207 0 .375.168.375.375V6h-4.5V2.625c0-.207.168-.375.375-.375h3.75z" /></svg>);
package/bpk-component-icon/sm/baggage-generic.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
6
6
  width: "1rem",
7
7
  height: "1rem"
8
- }} {...props}><path d="M4.5 1.8A1.8 1.8 0 016.3 0h2.4a1.8 1.8 0 011.8 1.746v9.504a.75.75 0 01-1.5 0V3H6v8.25a.75.75 0 01-1.5 0V1.8zm-3 13.95a2.25 2.25 0 012.25-2.25h7.5a2.25 2.25 0 012.25 2.25v4.5a2.25 2.25 0 01-2.25 2.25v.375a1.125 1.125 0 01-2.25 0V22.5H6v.375a1.125 1.125 0 01-2.25 0V22.5a2.25 2.25 0 01-2.25-2.25v-4.5zm13.875 6.75a.375.375 0 01-.375-.375V15.75a3.752 3.752 0 00-2.703-3.602.403.403 0 01-.298-.38L12 6.393c0-.159.1-.303.255-.338.16-.036.325-.055.495-.055h7.5a2.25 2.25 0 012.25 2.25v12a2.25 2.25 0 01-2.25 2.25v.375a1.125 1.125 0 01-2.25 0V22.5h-2.625zM13.5 1.8A1.8 1.8 0 0115.3 0h2.4a1.8 1.8 0 011.8 1.8v1.95a.75.75 0 01-1.5 0V3h-3v.75a.75.75 0 01-1.5 0V1.8z" /></svg>);
8
+ }} {...props}><g clipPath="url(#a)"><path d="M3.75 2.248V12H3a2.25 2.25 0 00-2.25 2.25v6A2.25 2.25 0 003 22.5v.375a1.125 1.125 0 002.25 0V22.5h4.5v.375a1.125 1.125 0 002.25 0V22.5a2.25 2.25 0 002.25-2.25v-6A2.25 2.25 0 0012 12h-.75V2.25A2.25 2.25 0 009 0H6a2.25 2.25 0 00-2.25 2.248zm5.625.002c.207 0 .375.168.375.375V12h-4.5V2.625c0-.207.168-.375.375-.375h3.75zM15.75 13.5a3 3 0 00-2.626-2.977c-.205-.025-.374-.19-.374-.398V2.248A2.25 2.25 0 0115 0h3a2.25 2.25 0 012.25 2.25V6H21a2.25 2.25 0 012.25 2.25v12A2.25 2.25 0 0121 22.5v.375a1.125 1.125 0 01-2.25 0V22.5h-2.625a.375.375 0 01-.375-.375V13.5zm2.625-11.25h-3.75a.375.375 0 00-.375.375V6h4.5V2.625a.375.375 0 00-.375-.375z" /></g></svg>);
package/bpk-component-price/README.md CHANGED
@@ -9,27 +9,31 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
9
9
  ## Usage
10
10
 
11
11
  ```js
12
- import BpkPrice, { SIZES, ALIGNS } from '@skyscanner/backpack-web/bpk-component-price';
12
+ import BpkPrice, {
13
+ SIZES,
14
+ ALIGNS,
15
+ } from '@skyscanner/backpack-web/bpk-component-price';
13
16
 
14
17
  export default () => (
15
18
  <BpkPrice
16
19
  size={SIZES.large}
17
20
  align={ALIGNS.left}
18
- subtitle="£209"
19
- title="£1,830"
20
- description="a night"
21
+ price="£1,209"
22
+ previousPrice="£1,830"
23
+ leadingText="App only deal"
24
+ trailingText="a night"
21
25
  />
22
26
  );
23
27
  ```
24
28
 
25
29
  ## Props
26
30
 
27
- | Property | PropType | Required | Default Value |
28
- | --------- | -------- | -------- | ------------- |
29
- | price | string | true | - |
30
- | size | oneOf(SIZES) | false | SIZES.small |
31
- | align | oneOf(ALIGNS) | false | ALIGNS.left |
32
- | leadingText | string | false | null |
33
- | trailingText | string | false | null |
34
- | previousPrice | string | false | null |
35
- | className | string | false | null |
31
+ | Property | PropType | Required | Default Value |
32
+ | ------------- | ------------- | -------- | ------------- |
33
+ | price | string | true | - |
34
+ | size | oneOf(SIZES) | false | SIZES.small |
35
+ | align | oneOf(ALIGNS) | false | ALIGNS.left |
36
+ | leadingText | string | false | null |
37
+ | trailingText | string | false | null |
38
+ | previousPrice | string | false | null |
39
+ | className | string | false | null |
package/bpk-component-price/src/BpkPrice.js CHANGED
@@ -77,7 +77,7 @@ const BpkPrice = (props: Props) => {
77
77
  {previousPrice}
78
78
  </BpkText>
79
79
  )}
80
- {previousPrice && (
80
+ {previousPrice && leadingText && (
81
81
  <BpkText
82
82
  textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
83
83
  tagName="span"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "22.0.0",
3
+ "version": "22.1.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": "^15.2.0",
28
- "@skyscanner/bpk-svgs": "^16.2.4",
28
+ "@skyscanner/bpk-svgs": "^16.3.0",
29
29
  "a11y-focus-scope": "^1.1.3",
30
30
  "a11y-focus-store": "^1.0.0",
31
- "bpk-mixins": "^40.2.0",
31
+ "bpk-mixins": "^40.2.1",
32
32
  "d3-path": "^2.0.0",
33
33
  "d3-scale": "^4.0.2",
34
34
  "date-fns": "^2.21.1",