@skyscanner/backpack-web 35.3.1 → 35.5.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 (5) hide show
  1. package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.js +32 -27
  2. package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.module.css +1 -1
  3. package/bpk-component-price/src/BpkPrice.js +22 -6
  4. package/bpk-component-price/src/common-types.js +1 -0
  5. package/package.json +1 -1
package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.js CHANGED
@@ -40,7 +40,8 @@ const TabWrap = ({
40
40
  className: tabStyling,
41
41
  href: tab.href,
42
42
  onClick: e => onClick(e),
43
- "aria-current": selected ? 'page' : false,
43
+ role: "tab",
44
+ "aria-selected": selected,
44
45
  children: children
45
46
  }) : /*#__PURE__*/_jsx("button", {
46
47
  ...tab,
@@ -48,8 +49,8 @@ const TabWrap = ({
48
49
  className: tabStyling,
49
50
  type: "button",
50
51
  onClick: e => onClick(e),
51
- role: "link",
52
- "aria-current": selected ? 'page' : false,
52
+ role: "tab",
53
+ "aria-selected": selected,
53
54
  children: children
54
55
  });
55
56
  };
@@ -74,30 +75,34 @@ const BpkNavigationTabGroup = ({
74
75
  className: containerStyling,
75
76
  role: "navigation",
76
77
  "aria-label": ariaLabel,
77
- children: tabs.map((tab, index) => {
78
- const selected = index === selectedTab;
79
- const {
80
- icon,
81
- text,
82
- ...tabWrapItem
83
- } = tab;
84
- const Icon = icon;
85
- return /*#__PURE__*/_jsx(TabWrap, {
86
- tab: tabWrapItem,
87
- selected: selected,
88
- onClick: e => handleButtonClick(e, tab, index),
89
- type: type,
90
- children: /*#__PURE__*/_jsxs(_Fragment, {
91
- children: [Icon && /*#__PURE__*/_jsx("span", {
92
- className: getClassName('bpk-navigation-tab-icon', `bpk-navigation-tab-icon--${type}`, selected && `bpk-navigation-tab-icon--${type}-selected`),
93
- children: /*#__PURE__*/_jsx(Icon, {})
94
- }), /*#__PURE__*/_jsx(BpkText, {
95
- tagName: "span",
96
- textStyle: TEXT_STYLES.label2,
97
- children: text
98
- })]
99
- })
100
- }, `index-${index.toString()}`);
78
+ children: /*#__PURE__*/_jsx("div", {
79
+ role: "tablist",
80
+ className: getClassName('bpk-navigation-tab-list'),
81
+ children: tabs.map((tab, index) => {
82
+ const selected = index === selectedTab;
83
+ const {
84
+ icon,
85
+ text,
86
+ ...tabWrapItem
87
+ } = tab;
88
+ const Icon = icon;
89
+ return /*#__PURE__*/_jsx(TabWrap, {
90
+ tab: tabWrapItem,
91
+ selected: selected,
92
+ onClick: e => handleButtonClick(e, tab, index),
93
+ type: type,
94
+ children: /*#__PURE__*/_jsxs(_Fragment, {
95
+ children: [Icon && /*#__PURE__*/_jsx("span", {
96
+ className: getClassName('bpk-navigation-tab-icon', `bpk-navigation-tab-icon--${type}`, selected && `bpk-navigation-tab-icon--${type}-selected`),
97
+ children: /*#__PURE__*/_jsx(Icon, {})
98
+ }), /*#__PURE__*/_jsx(BpkText, {
99
+ tagName: "span",
100
+ textStyle: TEXT_STYLES.label2,
101
+ children: text
102
+ })]
103
+ })
104
+ }, `index-${index.toString()}`);
105
+ })
101
106
  })
102
107
  });
103
108
  };
package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-navigation-tab-group{display:flex}.bpk-navigation-tab-group .bpk-navigation-tab-wrap{height:2.25rem;padding:0 1rem;border:none;border-radius:6.25rem;margin-inline-end:.25rem;display:flex;align-items:center;text-decoration:none;white-space:nowrap}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast:hover{background-color:#154679;box-shadow:0 0 0 1px #154679 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast-selected{background-color:#0062e3;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast-selected:hover{background-color:#0062e3;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default:hover{color:#161616;box-shadow:0 0 0 1px #161616 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default-selected{background-color:#0062e3;color:#fff;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default-selected:hover{background-color:#0062e3;color:#fff;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-icon{height:1rem;margin-inline-end:.5rem}.bpk-navigation-tab-group .bpk-navigation-tab-icon--surface-contrast{fill:#fff}.bpk-navigation-tab-group .bpk-navigation-tab-icon--canvas-default-selected{fill:#fff}
18
+ .bpk-navigation-tab-group{display:flex}.bpk-navigation-tab-group .bpk-navigation-tab-list{display:flex}.bpk-navigation-tab-group .bpk-navigation-tab-wrap{height:2.25rem;padding:0 1rem;border:none;border-radius:6.25rem;margin-inline-end:.25rem;display:flex;align-items:center;text-decoration:none;white-space:nowrap}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast:hover{background-color:#154679;box-shadow:0 0 0 1px #154679 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast-selected{background-color:#0062e3;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast-selected:hover{background-color:#0062e3;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default:hover{color:#161616;box-shadow:0 0 0 1px #161616 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default-selected{background-color:#0062e3;color:#fff;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default-selected:hover{background-color:#0062e3;color:#fff;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-icon{height:1rem;margin-inline-end:.5rem}.bpk-navigation-tab-group .bpk-navigation-tab-icon--surface-contrast{fill:#fff}.bpk-navigation-tab-group .bpk-navigation-tab-icon--canvas-default-selected{fill:#fff}
package/bpk-component-price/src/BpkPrice.js CHANGED
@@ -21,6 +21,21 @@ import { SIZES, ALIGNS } from "./common-types";
21
21
  import STYLES from "./BpkPrice.module.css";
22
22
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
23
23
  const getClassName = cssModules(STYLES);
24
+ const getPriceTextStyle = size => {
25
+ if (size === SIZES.small) {
26
+ return TEXT_STYLES.heading4;
27
+ }
28
+ if (size === SIZES.large) {
29
+ return TEXT_STYLES.xxl;
30
+ }
31
+ return TEXT_STYLES.heading5;
32
+ };
33
+ const getDefaultTextStyle = size => {
34
+ if (size === SIZES.large) {
35
+ return TEXT_STYLES.sm;
36
+ }
37
+ return TEXT_STYLES.xs;
38
+ };
24
39
  const BpkPrice = props => {
25
40
  const {
26
41
  align,
@@ -33,7 +48,8 @@ const BpkPrice = props => {
33
48
  trailingText,
34
49
  ...rest
35
50
  } = props;
36
- const isSmall = size === SIZES.small;
51
+ const defaultTextStyle = getDefaultTextStyle(size);
52
+ const priceTextStyle = getPriceTextStyle(size);
37
53
  const isAlignRight = align === ALIGNS.right;
38
54
  return /*#__PURE__*/_jsxs("div", {
39
55
  className: getClassName('bpk-price', isAlignRight && 'bpk-price--right', className)
@@ -45,19 +61,19 @@ const BpkPrice = props => {
45
61
  children: [previousPrice && /*#__PURE__*/_jsx("span", {
46
62
  className: getClassName('bpk-price__previous-price'),
47
63
  children: /*#__PURE__*/_jsx(BpkText, {
48
- textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
64
+ textStyle: defaultTextStyle,
49
65
  tagName: "span",
50
66
  children: previousPrice
51
67
  })
52
68
  }), previousPrice && leadingText && /*#__PURE__*/_jsx("span", {
53
69
  className: getClassName('bpk-price__separator'),
54
70
  children: /*#__PURE__*/_jsx(BpkText, {
55
- textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
71
+ textStyle: defaultTextStyle,
56
72
  tagName: "span",
57
73
  children: "\uD802\uDD1F"
58
74
  })
59
75
  }), leadingText && /*#__PURE__*/_jsx(BpkText, {
60
- textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
76
+ textStyle: defaultTextStyle,
61
77
  tagName: "span",
62
78
  children: leadingText
63
79
  })]
@@ -66,14 +82,14 @@ const BpkPrice = props => {
66
82
  children: [/*#__PURE__*/_jsx("span", {
67
83
  className: getClassName('bpk-price__price', !isAlignRight && 'bpk-price__spacing'),
68
84
  children: /*#__PURE__*/_jsx(BpkText, {
69
- textStyle: isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl,
85
+ textStyle: priceTextStyle,
70
86
  tagName: "span",
71
87
  children: price
72
88
  })
73
89
  }), trailingText && /*#__PURE__*/_jsx("span", {
74
90
  className: getClassName('bpk-price__trailing'),
75
91
  children: /*#__PURE__*/_jsx(BpkText, {
76
- textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
92
+ textStyle: defaultTextStyle,
77
93
  tagName: "span",
78
94
  children: trailingText
79
95
  })
package/bpk-component-price/src/common-types.js CHANGED
@@ -15,6 +15,7 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */export const SIZES = {
18
+ xsmall: 'xsmall',
18
19
  small: 'small',
19
20
  large: 'large'
20
21
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "35.3.1",
3
+ "version": "35.5.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",