@skyscanner/backpack-web 38.3.0 → 38.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 (9) hide show
  1. package/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.d.ts +1 -1
  2. package/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.js +10 -4
  3. package/bpk-component-inset-banner/src/BpkInsetBannerV2/common-types.d.ts +2 -0
  4. package/bpk-component-text/index.d.ts +2 -2
  5. package/bpk-component-text/index.js +2 -2
  6. package/bpk-component-text/src/BpkText.d.ts +15 -1
  7. package/bpk-component-text/src/BpkText.js +15 -13
  8. package/bpk-component-text/src/BpkText.module.css +1 -1
  9. package/package.json +1 -1
package/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { type CommonProps } from './common-types';
2
- declare const BpkInsetBannerSponsored: ({ accessibilityLabel, backgroundColor, callToAction, image, logo, subheadline, title, variant, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
2
+ declare const BpkInsetBannerSponsored: ({ accessibilityLabel, adInfoA11yLabel, ariaAdScenicA11yLabel, backgroundColor, callToAction, image, logo, subheadline, title, variant, }: CommonProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export default BpkInsetBannerSponsored;
package/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.js CHANGED
@@ -29,6 +29,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
29
29
  const getClassName = cssModules(STYLES);
30
30
  const BpkInsetBannerSponsored = ({
31
31
  accessibilityLabel,
32
+ adInfoA11yLabel = '',
33
+ ariaAdScenicA11yLabel = '',
32
34
  backgroundColor = surfaceHighlightDay,
33
35
  callToAction,
34
36
  image,
@@ -51,7 +53,7 @@ const BpkInsetBannerSponsored = ({
51
53
  children: logo && /*#__PURE__*/_jsx("img", {
52
54
  className: getClassName('bpk-inset-banner--image'),
53
55
  src: logo,
54
- alt: "",
56
+ alt: ariaAdScenicA11yLabel,
55
57
  "aria-hidden": true
56
58
  })
57
59
  }), /*#__PURE__*/_jsxs("div", {
@@ -85,6 +87,7 @@ const BpkInsetBannerSponsored = ({
85
87
  children: callToAction.text
86
88
  }), /*#__PURE__*/_jsx("div", {
87
89
  className: getClassName('bpk-inset-banner--cta-info-icon'),
90
+ "aria-label": adInfoA11yLabel,
88
91
  children: /*#__PURE__*/_jsx(InfoIcon, {})
89
92
  })]
90
93
  })
@@ -101,12 +104,15 @@ const BpkInsetBannerSponsored = ({
101
104
  className: getClassName('bpk-inset-banner--bottom-sheet-content'),
102
105
  children: [/*#__PURE__*/_jsx("div", {
103
106
  className: getClassName('bpk-inset-banner--bottom-sheet-icon'),
107
+ "data-testid": "bottom-sheet-icon-container",
104
108
  children: index === 0 ? /*#__PURE__*/_jsx(ViewIcon, {
105
109
  height: 24,
106
- width: 24
107
- }) : /*#__PURE__*/_jsx(InfoIcon, {
110
+ width: 24,
111
+ "data-testid": "view-icon"
112
+ }) : callToAction.bottomSheetContent.length > 1 && /*#__PURE__*/_jsx(InfoIcon, {
108
113
  height: 24,
109
- width: 24
114
+ width: 24,
115
+ "data-testid": "info-icon"
110
116
  })
111
117
  }), /*#__PURE__*/_jsxs("div", {
112
118
  className: getClassName('bpk-inset-banner--bottom-sheet-text'),
package/bpk-component-inset-banner/src/BpkInsetBannerV2/common-types.d.ts CHANGED
@@ -36,5 +36,7 @@ export type CommonProps = {
36
36
  altText: string;
37
37
  aspectRatio: number;
38
38
  };
39
+ adInfoA11yLabel?: string;
40
+ ariaAdScenicA11yLabel?: string;
39
41
  };
40
42
  export {};
package/bpk-component-text/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import component, { TEXT_STYLES } from './src/BpkText';
1
+ import component, { TEXT_COLORS, TEXT_STYLES } from './src/BpkText';
2
2
  export default component;
3
- export { TEXT_STYLES };
3
+ export { TEXT_COLORS, TEXT_STYLES };
package/bpk-component-text/index.js CHANGED
@@ -16,6 +16,6 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import component, { TEXT_STYLES } from "./src/BpkText";
19
+ import component, { TEXT_COLORS, TEXT_STYLES } from "./src/BpkText";
20
20
  export default component;
21
- export { TEXT_STYLES };
21
+ export { TEXT_COLORS, TEXT_STYLES };
package/bpk-component-text/src/BpkText.d.ts CHANGED
@@ -32,6 +32,20 @@ export declare const TEXT_STYLES: {
32
32
  readonly editorial2: "editorial-2";
33
33
  readonly editorial3: "editorial-3";
34
34
  };
35
+ export declare const TEXT_COLORS: {
36
+ readonly textDisabled: "text-disabled";
37
+ readonly textDisabledOnDark: "text-disabled-on-dark";
38
+ readonly textError: "text-error";
39
+ readonly textHero: "text-hero";
40
+ readonly textLink: "text-link";
41
+ readonly textOnDark: "text-on-dark";
42
+ readonly textOnLight: "text-on-light";
43
+ readonly textPrimary: "text-primary";
44
+ readonly textPrimaryInverse: "text-primary-inverse";
45
+ readonly textSecondary: "text-secondary";
46
+ readonly textSuccess: "text-success";
47
+ };
48
+ export type TextColor = (typeof TEXT_COLORS)[keyof typeof TEXT_COLORS];
35
49
  export type TextStyle = (typeof TEXT_STYLES)[keyof typeof TEXT_STYLES];
36
50
  export type Tag = 'span' | 'p' | 'text' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
37
51
  type Props = {
@@ -39,7 +53,7 @@ type Props = {
39
53
  textStyle?: TextStyle;
40
54
  tagName?: Tag;
41
55
  className?: string | null;
42
- color?: string | null;
56
+ color?: TextColor | null;
43
57
  id?: string;
44
58
  [rest: string]: any;
45
59
  };
package/bpk-component-text/src/BpkText.js CHANGED
@@ -53,6 +53,19 @@ export const TEXT_STYLES = {
53
53
  editorial2: 'editorial-2',
54
54
  editorial3: 'editorial-3'
55
55
  };
56
+ export const TEXT_COLORS = {
57
+ textDisabled: 'text-disabled',
58
+ textDisabledOnDark: 'text-disabled-on-dark',
59
+ textError: 'text-error',
60
+ textHero: 'text-hero',
61
+ textLink: 'text-link',
62
+ textOnDark: 'text-on-dark',
63
+ textOnLight: 'text-on-light',
64
+ textPrimary: 'text-primary',
65
+ textPrimaryInverse: 'text-primary-inverse',
66
+ textSecondary: 'text-secondary',
67
+ textSuccess: 'text-success'
68
+ };
56
69
  const BpkText = ({
57
70
  children,
58
71
  className = null,
@@ -61,25 +74,14 @@ const BpkText = ({
61
74
  textStyle = TEXT_STYLES.bodyDefault,
62
75
  ...rest
63
76
  }) => {
64
- const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, className);
65
- const {
66
- style,
67
- ...otherProps
68
- } = rest;
69
- const computedStyles = {
70
- ...style,
71
- ...(color ? {
72
- color
73
- } : {})
74
- };
77
+ const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, color ? `bpk-text--${color}` : '', className);
75
78
  return (
76
79
  /*#__PURE__*/
77
80
  // Allowed, TagName is always a dom element.
78
81
  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
79
82
  _jsx(TagName, {
80
83
  className: classNames,
81
- style: computedStyles,
82
- ...otherProps,
84
+ ...rest,
83
85
  children: children
84
86
  })
85
87
  );
package/bpk-component-text/src/BpkText.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-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-3{font-size:4.75rem;line-height:4.75rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-4{font-size:4rem;line-height:4rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-5{font-size:3rem;line-height:3rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-6{font-size:2.5rem;line-height:2.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--editorial-1{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:400}
18
+ .bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4rem;font-weight:700;letter-spacing:-0.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-3{font-size:4.75rem;line-height:4.75rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-4{font-size:4rem;line-height:4rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-5{font-size:3rem;line-height:3rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--hero-6{font-size:2.5rem;line-height:2.5rem;font-weight:900;letter-spacing:-0.04em}.bpk-text--editorial-1{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:3rem;line-height:3.5rem;font-weight:300}.bpk-text--editorial-2{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:2rem;line-height:2.5rem;font-weight:300}.bpk-text--editorial-3{font-family:"Larken","Noto Sans Arabic","Noto Sans Hebrew","Noto Serif","Noto Serif Devanagari","Noto Serif Thai","Noto Sans SC","Noto Sans TC","Noto Sans JP","Noto Sans KR",sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text.bpk-text--text-disabled{color:rgba(0,0,0,.2)}.bpk-text.bpk-text--text-disabled-on-dark{color:hsla(0,0%,100%,.5)}.bpk-text.bpk-text--text-error{color:#e70866}.bpk-text.bpk-text--text-hero{color:#0062e3}.bpk-text.bpk-text--text-link{color:#0062e3}.bpk-text.bpk-text--text-on-dark{color:#fff}.bpk-text.bpk-text--text-on-light{color:#161616}.bpk-text.bpk-text--text-primary{color:#161616}.bpk-text.bpk-text--text-primary-inverse{color:#fff}.bpk-text.bpk-text--text-secondary{color:#626971}.bpk-text.bpk-text--text-success{color:#0c838a}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "38.3.0",
3
+ "version": "38.5.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",