@skyscanner/backpack-web 22.0.0 → 22.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 (30) 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-link/README.md +1 -0
  21. package/bpk-component-link/src/BpkLink.js +4 -3
  22. package/bpk-component-navigation-bar/src/BpkNavigationBar.module.scss +4 -3
  23. package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.scss +4 -4
  24. package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.scss +3 -3
  25. package/bpk-component-price/README.md +17 -13
  26. package/bpk-component-price/src/BpkPrice.js +1 -1
  27. package/bpk-component-rating/README.md +8 -1
  28. package/bpk-component-rating/src/BpkRating.js +15 -11
  29. package/bpk-component-rating/src/BpkRating.module.scss +10 -13
  30. 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-link/README.md CHANGED
@@ -39,6 +39,7 @@ If you're using a SPA framework like `react-router-dom` or `Next.js` to navigate
39
39
  | blank | bool | false | false |
40
40
  | rel | string | false | null |
41
41
  | alternate | bool | false | false |
42
+ | ref | any | false | null |
42
43
 
43
44
  ### BpkButtonLink
44
45
 
package/bpk-component-link/src/BpkLink.js CHANGED
@@ -17,9 +17,9 @@
17
17
  */
18
18
 
19
19
  /* @flow strict */
20
-
21
20
  import PropTypes from 'prop-types';
22
21
  import type { Node } from 'react';
22
+ import { forwardRef } from 'react';
23
23
 
24
24
  import { cssModules } from '../../bpk-react-utils';
25
25
 
@@ -40,7 +40,7 @@ type Props = {
40
40
  alternate: boolean,
41
41
  };
42
42
 
43
- const BpkLink = (props: Props) => {
43
+ const BpkLink = forwardRef((props: Props, ref) => {
44
44
  const {
45
45
  alternate,
46
46
  blank,
@@ -72,12 +72,13 @@ const BpkLink = (props: Props) => {
72
72
  onClick={onClick}
73
73
  target={target}
74
74
  rel={rel}
75
+ ref={ref}
75
76
  {...rest}
76
77
  >
77
78
  {children}
78
79
  </a>
79
80
  );
80
- };
81
+ });
81
82
 
82
83
  BpkLink.propTypes = {
83
84
  children: PropTypes.oneOfType([
package/bpk-component-navigation-bar/src/BpkNavigationBar.module.scss CHANGED
@@ -32,15 +32,14 @@ $bpk-spacing-v2: true;
32
32
  @include bpk-themeable-property(
33
33
  background-color,
34
34
  --bpk-navigation-bar-background-color,
35
- $bpk-core-accent-day
35
+ $bpk-surface-default-day
36
36
  );
37
- @include bpk-border-bottom-sm($bpk-line-day);
38
37
 
39
38
  &__title {
40
39
  @include bpk-themeable-property(
41
40
  color,
42
41
  --bpk-navigation-bar-title-color,
43
- $bpk-text-primary-inverse-day
42
+ $bpk-text-primary-day
44
43
  );
45
44
  }
46
45
 
@@ -73,5 +72,7 @@ $bpk-spacing-v2: true;
73
72
  position: sticky;
74
73
  top: 0;
75
74
  z-index: $bpk-zindex-tooltip - 1; // Allow tooltips/modals/... to be displayed above the navigation bar
75
+
76
+ @include bpk-box-shadow-sm;
76
77
  }
77
78
  }
package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.scss CHANGED
@@ -22,14 +22,14 @@
22
22
  @include bpk-themeable-property(
23
23
  color,
24
24
  --bpk-navigation-bar-button-link-color,
25
- $bpk-text-primary-inverse-day
25
+ $bpk-text-primary-day
26
26
  );
27
27
 
28
28
  @include bpk-hover {
29
29
  @include bpk-themeable-property(
30
30
  color,
31
31
  --bpk-navigation-bar-button-link-hover-color,
32
- $bpk-text-primary-inverse-day
32
+ $bpk-text-primary-day
33
33
  );
34
34
  }
35
35
 
@@ -37,7 +37,7 @@
37
37
  @include bpk-themeable-property(
38
38
  color,
39
39
  --bpk-navigation-bar-button-link-active-color,
40
- $bpk-text-primary-inverse-day
40
+ $bpk-text-primary-day
41
41
  );
42
42
  }
43
43
 
@@ -45,7 +45,7 @@
45
45
  @include bpk-themeable-property(
46
46
  color,
47
47
  --bpk-navigation-bar-button-link-visited-color,
48
- $bpk-text-primary-inverse-day
48
+ $bpk-text-primary-day
49
49
  );
50
50
  }
51
51
  }
package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.scss CHANGED
@@ -22,14 +22,14 @@
22
22
  @include bpk-themeable-property(
23
23
  color,
24
24
  --bpk-navigation-bar-icon-button-color,
25
- $bpk-text-primary-inverse-day
25
+ $bpk-text-primary-day
26
26
  );
27
27
 
28
28
  @include bpk-hover {
29
29
  @include bpk-themeable-property(
30
30
  color,
31
31
  --bpk-navigation-bar-icon-button-hover-color,
32
- $bpk-text-primary-inverse-day
32
+ $bpk-text-primary-day
33
33
  );
34
34
  }
35
35
 
@@ -37,7 +37,7 @@
37
37
  @include bpk-themeable-property(
38
38
  color,
39
39
  --bpk-navigation-bar-icon-button-active-color,
40
- $bpk-text-primary-inverse-day
40
+ $bpk-text-primary-day
41
41
  );
42
42
  }
43
43
  }
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/bpk-component-rating/README.md CHANGED
@@ -35,6 +35,13 @@ export default () => (
35
35
  value={2.3}
36
36
  />
37
37
 
38
+ // Subtitle only rating
39
+ <BpkRating
40
+ ariaLabel="4.8 2,420 reviews"
41
+ value={4.8}
42
+ subtitle="2,420 reviews"
43
+ />
44
+
38
45
  // Show scale rating
39
46
  <BpkRating
40
47
  ariaLabel="3.8 Good 530 reviews"
@@ -68,8 +75,8 @@ export default () => (
68
75
  | Property | PropType | Required | Default Value |
69
76
  | --------- | --------------------- | -------- | ----------------- |
70
77
  | ariaLabel | string | true | - |
71
- | title | oneOfType(string, node) | true | - |
72
78
  | value | oneOfType(string, number) | true | - |
79
+ | title | oneOfType(string, node) | false | - |
73
80
  | className | string | false | null |
74
81
  | ratingScale | oneOf(RATING_SCALES) | false | RATING_SCALES.zeroToFive |
75
82
  | size | oneOf(RATING_SIZES) | false | RATING_SIZES.base |
package/bpk-component-rating/src/BpkRating.js CHANGED
@@ -51,7 +51,7 @@ type Props = {
51
51
  showScale: ?boolean,
52
52
  size: $Values<typeof RATING_SIZES>,
53
53
  subtitle: ?string,
54
- title: string | Node,
54
+ title: ?string | Node,
55
55
  value: string | number,
56
56
  };
57
57
 
@@ -71,7 +71,7 @@ const BpkRating = (props: Props) => {
71
71
  const classNames = getClassName(
72
72
  'bpk-rating',
73
73
  className,
74
- size === RATING_SIZES.large && subtitle && 'bpk-rating--large',
74
+ size === RATING_SIZES.large && title && subtitle && 'bpk-rating--large',
75
75
  );
76
76
  const valueStyles = getClassName('bpk-rating__value');
77
77
  const scaleStyles = getClassName('bpk-rating__scale');
@@ -80,6 +80,7 @@ const BpkRating = (props: Props) => {
80
80
  size === RATING_SIZES.large && 'bpk-rating__text-wrapper--large',
81
81
  );
82
82
  const titleStyles = getClassName(
83
+ subtitle && 'bpk-rating__title--with-subtitle',
83
84
  size === RATING_SIZES.large && 'bpk-rating__title--large',
84
85
  );
85
86
  const subtitleStyles = getClassName(
@@ -132,14 +133,16 @@ const BpkRating = (props: Props) => {
132
133
  </BpkText>
133
134
 
134
135
  <div className={textWrapperStyles}>
135
- <BpkText
136
- textStyle={titleTextSize}
137
- className={titleStyles}
138
- tagName="span"
139
- aria-hidden="true"
140
- >
141
- {title}
142
- </BpkText>
136
+ {title && (
137
+ <BpkText
138
+ textStyle={titleTextSize}
139
+ className={titleStyles}
140
+ tagName="span"
141
+ aria-hidden="true"
142
+ >
143
+ {title}
144
+ </BpkText>
145
+ )}
143
146
 
144
147
  {subtitle && (
145
148
  <BpkText
@@ -158,13 +161,13 @@ const BpkRating = (props: Props) => {
158
161
 
159
162
  BpkRating.propTypes = {
160
163
  ariaLabel: PropTypes.string.isRequired,
161
- title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
162
164
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
163
165
  className: PropTypes.string,
164
166
  ratingScale: PropTypes.oneOf(Object.keys(RATING_SCALES)),
165
167
  size: PropTypes.oneOf(Object.keys(RATING_SIZES)),
166
168
  subtitle: PropTypes.string,
167
169
  showScale: PropTypes.bool,
170
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
168
171
  };
169
172
 
170
173
  BpkRating.defaultProps = {
@@ -173,6 +176,7 @@ BpkRating.defaultProps = {
173
176
  size: RATING_SIZES.base,
174
177
  subtitle: null,
175
178
  showScale: true,
179
+ title: null,
176
180
  };
177
181
 
178
182
  export default BpkRating;
package/bpk-component-rating/src/BpkRating.module.scss CHANGED
@@ -59,28 +59,25 @@ $bpk-spacing-v2: true;
59
59
  }
60
60
 
61
61
  &__title {
62
+ &--with-subtitle {
63
+ padding-right: bpk-spacing-md();
64
+
65
+ @include bpk-rtl {
66
+ padding-right: 0;
67
+ padding-left: bpk-spacing-md();
68
+ }
69
+ }
70
+
62
71
  &--large {
63
72
  padding-top: $bpk-one-pixel-rem;
64
73
  }
65
74
  }
66
75
 
67
76
  &__subtitle {
68
- padding-left: bpk-spacing-md();
69
77
  color: $bpk-text-secondary-day;
70
78
 
71
- @include bpk-rtl {
72
- padding-right: bpk-spacing-md();
73
- padding-left: 0;
74
- }
75
-
76
79
  &--large {
77
- padding-top: $bpk-one-pixel-rem;
78
- padding-left: 0;
79
-
80
- @include bpk-rtl {
81
- padding-right: 0;
82
- padding-left: 0;
83
- }
80
+ // padding-top: $bpk-one-pixel-rem;
84
81
  }
85
82
  }
86
83
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "22.0.0",
3
+ "version": "22.2.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",