@skyscanner/backpack-web 42.0.0-test → 42.0.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 (44) hide show
  1. package/bpk-component-button/index.d.ts +3 -3
  2. package/bpk-component-button/index.js +3 -3
  3. package/bpk-component-button/src/BpkButton.d.ts +3 -0
  4. package/bpk-component-button/src/{BpkButton/BpkButton.js → BpkButton.js} +39 -7
  5. package/bpk-component-button/src/BpkButton.module.css +18 -0
  6. package/bpk-component-button/src/{BpkButton/common-types.d.ts → common-types.d.ts} +2 -0
  7. package/bpk-component-button/src/themeAttributes.d.ts +1 -0
  8. package/bpk-component-button/src/themeAttributes.js +2 -1
  9. package/bpk-component-chip/index.d.ts +2 -2
  10. package/bpk-component-chip/index.js +2 -2
  11. package/bpk-component-chip/src/BpkSelectableChip.module.css +1 -1
  12. package/bpk-component-chip/src/themeAttributes.d.ts +4 -0
  13. package/bpk-component-chip/src/themeAttributes.js +7 -1
  14. package/bpk-component-pagination/src/BpkPaginationPage.module.css +1 -1
  15. package/bpk-component-scrollable-calendar/src/utils.d.ts +1 -1
  16. package/bpk-component-segmented-control/index.d.ts +2 -0
  17. package/bpk-component-segmented-control/index.js +2 -1
  18. package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.d.ts +19 -0
  19. package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.js +81 -0
  20. package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.module.css +18 -0
  21. package/bpk-component-segmented-control/src/BpkSegmentedControlV2/common-types.d.ts +57 -0
  22. package/bpk-component-segmented-control/src/BpkSegmentedControlV2/common-types.js +24 -0
  23. package/bpk-component-table/index.d.ts +13 -0
  24. package/bpk-component-table/index.js +3 -1
  25. package/bpk-component-table/src/BpkTable.d.ts +8 -0
  26. package/bpk-component-table/src/BpkTable.js +7 -14
  27. package/bpk-component-table/src/BpkTableBody.d.ts +7 -0
  28. package/bpk-component-table/src/BpkTableBody.js +3 -5
  29. package/bpk-component-table/src/BpkTableCell.d.ts +9 -0
  30. package/bpk-component-table/src/BpkTableCell.js +7 -15
  31. package/bpk-component-table/src/BpkTableHead.d.ts +7 -0
  32. package/bpk-component-table/src/BpkTableHead.js +3 -5
  33. package/bpk-component-table/src/BpkTableHeadCell.d.ts +9 -0
  34. package/bpk-component-table/src/BpkTableHeadCell.js +2 -6
  35. package/bpk-component-table/src/BpkTableRow.d.ts +7 -0
  36. package/bpk-component-table/src/BpkTableRow.js +3 -5
  37. package/bpk-mixins/_buttons.scss +168 -76
  38. package/bpk-mixins/_chips.scss +104 -18
  39. package/bpk-mixins/_index.scss +1 -0
  40. package/bpk-mixins/_segmented-control.scss +263 -0
  41. package/package.json +2 -1
  42. package/bpk-component-button/src/BpkButton/BpkButton.d.ts +0 -3
  43. package/bpk-component-button/src/BpkButton/BpkButton.module.css +0 -18
  44. /package/bpk-component-button/src/{BpkButton/common-types.js → common-types.js} +0 -0
package/bpk-component-button/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import BpkButton from './src/BpkButton/BpkButton';
2
- export { BUTTON_TYPES, SIZE_TYPES, type ButtonType, type SizeType, type Props, } from './src/BpkButton/common-types';
3
- export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, } from './src/themeAttributes';
1
+ import BpkButton from './src/BpkButton';
2
+ export { BUTTON_TYPES, SIZE_TYPES, type ButtonType, type SizeType, type Props, } from './src/common-types';
3
+ export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, linkThemeAttributes, } from './src/themeAttributes';
4
4
  export default BpkButton;
package/bpk-component-button/index.js CHANGED
@@ -16,7 +16,7 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import BpkButton from "./src/BpkButton/BpkButton";
20
- export { BUTTON_TYPES, SIZE_TYPES } from "./src/BpkButton/common-types";
21
- export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes } from "./src/themeAttributes";
19
+ import BpkButton from "./src/BpkButton";
20
+ export { BUTTON_TYPES, SIZE_TYPES } from "./src/common-types";
21
+ export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, linkThemeAttributes } from "./src/themeAttributes";
22
22
  export default BpkButton;
package/bpk-component-button/src/BpkButton.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { Props } from './common-types';
2
+ declare const BpkButton: ({ blank, children, className, disabled, fullWidth, href, iconOnly, implicit, loading, onClick, rel: propRel, size, submit, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
3
+ export default BpkButton;
package/bpk-component-button/src/{BpkButton/BpkButton.js → BpkButton.js} RENAMED
@@ -15,11 +15,23 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
18
+ import { BpkSpinner, BpkLargeSpinner, SPINNER_TYPES } from "../../bpk-component-spinner";
19
+ import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
19
20
  import { BUTTON_TYPES, SIZE_TYPES } from "./common-types";
20
21
  import COMMON_STYLES from "./BpkButton.module.css";
21
- import { jsx as _jsx } from "react/jsx-runtime";
22
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
22
23
  const getCommonClassName = cssModules(COMMON_STYLES);
24
+ const getSpinnerType = buttonType => {
25
+ switch (buttonType) {
26
+ case BUTTON_TYPES.secondary:
27
+ case BUTTON_TYPES.destructive:
28
+ case BUTTON_TYPES.link:
29
+ case BUTTON_TYPES.primaryOnDark:
30
+ return SPINNER_TYPES.dark;
31
+ default:
32
+ return SPINNER_TYPES.light;
33
+ }
34
+ };
23
35
  const BpkButton = ({
24
36
  blank = false,
25
37
  children,
@@ -29,6 +41,7 @@ const BpkButton = ({
29
41
  href = null,
30
42
  iconOnly = false,
31
43
  implicit = false,
44
+ loading = false,
32
45
  onClick = () => {},
33
46
  rel: propRel = undefined,
34
47
  size = SIZE_TYPES.small,
@@ -36,18 +49,36 @@ const BpkButton = ({
36
49
  type = BUTTON_TYPES.primary,
37
50
  ...rest
38
51
  }) => {
52
+ const isDisabled = disabled || loading;
39
53
  const isLinkType = type === BUTTON_TYPES.link || type === BUTTON_TYPES.linkOnDark;
40
54
  const alternate = type === BUTTON_TYPES.linkOnDark;
41
- const shouldUnderline = isLinkType && !iconOnly && !disabled;
42
- const classNames = getCommonClassName('bpk-button', size === SIZE_TYPES.large && 'bpk-button--large', iconOnly && 'bpk-button--icon-only', iconOnly && size === SIZE_TYPES.large && 'bpk-button--large-icon-only', `bpk-button--${type}`, fullWidth && 'bpk-button--full-width', isLinkType && iconOnly && 'bpk-button--link--icon-only', isLinkType && implicit && 'bpk-button--link--implicit', className);
55
+ const shouldUnderline = isLinkType && !iconOnly && !isDisabled;
56
+ const classNames = getCommonClassName('bpk-button', size === SIZE_TYPES.large && 'bpk-button--large', iconOnly && 'bpk-button--icon-only', iconOnly && size === SIZE_TYPES.large && 'bpk-button--large-icon-only', `bpk-button--${type}`, loading && 'bpk-button--loading', fullWidth && 'bpk-button--full-width', isLinkType && iconOnly && 'bpk-button--link--icon-only', isLinkType && implicit && 'bpk-button--link--implicit', className);
43
57
  const underlinedClassName = shouldUnderline ? getCommonClassName('bpk-button--link-underlined', implicit && !alternate && 'bpk-button--link-underlined--implicit', alternate && !implicit && 'bpk-button--link-underlined--alternate', implicit && alternate && 'bpk-button--link-underlined--implicit--alternate') : null;
44
- const content = underlinedClassName ? /*#__PURE__*/_jsx("span", {
58
+ const innerContent = underlinedClassName ? /*#__PURE__*/_jsx("span", {
45
59
  className: underlinedClassName,
46
60
  children: children
47
61
  }) : children;
62
+ const content = loading ? /*#__PURE__*/_jsxs("div", {
63
+ className: getCommonClassName('bpk-button__loading-container'),
64
+ children: [/*#__PURE__*/_jsx("span", {
65
+ className: getCommonClassName('bpk-button__loading-icon'),
66
+ "aria-hidden": "true",
67
+ children: size === SIZE_TYPES.large ? /*#__PURE__*/_jsx(BpkLargeSpinner, {
68
+ type: getSpinnerType(type),
69
+ alignToButton: true
70
+ }) : /*#__PURE__*/_jsx(BpkSpinner, {
71
+ type: getSpinnerType(type),
72
+ alignToButton: true
73
+ })
74
+ }), /*#__PURE__*/_jsx("div", {
75
+ className: getCommonClassName('bpk-button__content--hidden'),
76
+ children: innerContent
77
+ })]
78
+ }) : innerContent;
48
79
  const target = blank ? '_blank' : '';
49
80
  const rel = blank ? propRel || 'noopener noreferrer' : propRel;
50
- if (!disabled && href) {
81
+ if (!isDisabled && href) {
51
82
  return /*#__PURE__*/_jsx("a", {
52
83
  href: href,
53
84
  className: classNames,
@@ -61,9 +92,10 @@ const BpkButton = ({
61
92
  }
62
93
  return /*#__PURE__*/_jsx("button", {
63
94
  type: submit ? 'submit' : 'button',
64
- disabled: disabled,
95
+ disabled: isDisabled,
65
96
  className: classNames,
66
97
  ...getDataComponentAttribute('Button'),
98
+ "aria-busy": loading || undefined,
67
99
  onClick: onClick,
68
100
  ...rest,
69
101
  children: content
package/bpk-component-button/src/BpkButton.module.css ADDED
@@ -0,0 +1,18 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2016 Skyscanner Ltd
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+ .bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{padding-right:.625rem;padding-left:.625rem}.bpk-button--large-icon-only{padding-right:.75rem;padding-left:.75rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--destructive.bpk-button--loading:disabled{background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102));color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255))}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured.bpk-button--loading:disabled{background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175));color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255))}.bpk-button--link{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;position:relative;display:inline;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link::after{bottom:auto}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled,.bpk-button--link:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link.bpk-button--loading:disabled,.bpk-button--link.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:none;color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link:visited{color:#161616;color:var(--bpk-link-visited-color, rgb(22, 22, 22))}.bpk-button--link:active{color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link--icon-only{display:inline-flex;justify-content:center;align-items:center;vertical-align:middle}.bpk-button--link-on-dark{background:none;box-shadow:none;color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255));color:#fff;color:var(--bpk-link-alternate-color, rgb(255, 255, 255));--bpk-button-svg-display: inline-block;--bpk-button-svg-vertical-align: middle}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-on-dark::after{bottom:auto}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{background:none;color:#161616;color:var(--bpk-button-link-loading-color, rgb(22, 22, 22))}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled,.bpk-button--link-on-dark:disabled:active{color:hsla(0,0%,100%,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--link-on-dark.bpk-button--loading:disabled,.bpk-button--link-on-dark.bpk-button--loading:disabled:active{color:hsla(0,0%,100%,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-link-alternate-hover-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-link-alternate-visited-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:active{color:#fff;color:var(--bpk-link-alternate-active-color, rgb(255, 255, 255))}.bpk-button--link-on-dark--implicit{color:#161616;color:var(--bpk-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark--implicit:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-link-hover-color, rgb(22, 22, 22))}.bpk-button--link-on-dark--implicit:active{text-decoration:none;color:#161616;color:var(--bpk-link-active-color, rgb(22, 22, 22))}.bpk-button--link-underlined{gap:.5rem;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;padding-bottom:.0625rem;transition:background-size 200ms ease;background:linear-gradient(rgb(22, 22, 22), rgb(22, 22, 22));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit{background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--link-underlined--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px}.bpk-no-touch-support .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--alternate:hover:not(:active):not(:disabled){background-size:0 1px}.bpk-button--link-underlined--implicit--alternate{background:linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}.bpk-no-touch-support .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}:global(.bpk-no-touch-support) .bpk-button--link-underlined--implicit--alternate:hover:not(:active):not(:disabled){background-size:100% 1px}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-dark.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22))}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:hsla(0,0%,100%,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(4, 24, 45))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:hsla(0,0%,100%,.2)}.bpk-button--secondary-on-dark.bpk-button--loading:disabled{background-color:#04182d;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(4, 24, 45));color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255))}.bpk-button--full-width{display:block;width:100%}.bpk-button__loading-container{position:relative;display:inline-flex;justify-content:center;align-items:center}.bpk-button__loading-icon{position:absolute;display:inline-flex;--bpk-button-svg-display: block;--bpk-button-svg-vertical-align: baseline}.bpk-button__content--hidden{opacity:0}.bpk-button span>svg{display:var(--bpk-button-svg-display, block);vertical-align:var(--bpk-button-svg-vertical-align, baseline)}.bpk-button svg{fill:currentcolor}
package/bpk-component-button/src/{BpkButton/common-types.d.ts → common-types.d.ts} RENAMED
@@ -30,5 +30,7 @@ export type Props = {
30
30
  submit?: boolean;
31
31
  href?: string | null;
32
32
  blank?: boolean;
33
+ /** When true, shows a loading spinner and disables interaction. Layout is preserved. @default false */
34
+ loading?: boolean;
33
35
  [rest: string]: any;
34
36
  };
package/bpk-component-button/src/themeAttributes.d.ts CHANGED
@@ -6,3 +6,4 @@ export declare const secondaryThemeAttributes: string[];
6
6
  export declare const secondaryOnDarkThemeAttributes: string[];
7
7
  export declare const featuredThemeAttributes: string[];
8
8
  export declare const destructiveThemeAttributes: string[];
9
+ export declare const linkThemeAttributes: string[];
package/bpk-component-button/src/themeAttributes.js CHANGED
@@ -23,4 +23,5 @@ export const primaryOnLightThemeAttributes = ['buttonPrimaryOnLightTextColor', '
23
23
  export const secondaryThemeAttributes = ['buttonSecondaryTextColor', 'buttonSecondaryHoverTextColor', 'buttonSecondaryActiveTextColor', 'buttonSecondaryBorderColor', 'buttonSecondaryHoverBorderColor', 'buttonSecondaryActiveBorderColor', 'buttonSecondaryBackgroundColor', 'buttonSecondaryHoverBackgroundColor', 'buttonSecondaryActiveBackgroundColor'];
24
24
  export const secondaryOnDarkThemeAttributes = ['buttonSecondaryOnDarkTextColor', 'buttonSecondaryOnDarkHoverTextColor', 'buttonSecondaryOnDarkActiveTextColor', 'buttonSecondaryOnDarkBackgroundColor', 'buttonSecondaryOnDarkHoverBackgroundColor', 'buttonSecondaryOnDarkActiveBackgroundColor'];
25
25
  export const featuredThemeAttributes = ['buttonFeaturedTextColor', 'buttonFeaturedHoverTextColor', 'buttonFeaturedActiveTextColor', 'buttonFeaturedGradientStartColor', 'buttonFeaturedGradientEndColor', 'buttonFeaturedBackgroundColor', 'buttonFeaturedHoverBackgroundColor', 'buttonFeaturedActiveBackgroundColor'];
26
- export const destructiveThemeAttributes = ['buttonDestructiveTextColor', 'buttonDestructiveHoverTextColor', 'buttonDestructiveActiveTextColor', 'buttonDestructiveBorderColor', 'buttonDestructiveHoverBorderColor', 'buttonDestructiveActiveBorderColor', 'buttonDestructiveBackgroundColor', 'buttonDestructiveHoverBackgroundColor', 'buttonDestructiveActiveBackgroundColor'];
26
+ export const destructiveThemeAttributes = ['buttonDestructiveTextColor', 'buttonDestructiveHoverTextColor', 'buttonDestructiveActiveTextColor', 'buttonDestructiveBorderColor', 'buttonDestructiveHoverBorderColor', 'buttonDestructiveActiveBorderColor', 'buttonDestructiveBackgroundColor', 'buttonDestructiveHoverBackgroundColor', 'buttonDestructiveActiveBackgroundColor'];
27
+ export const linkThemeAttributes = ['buttonLinkLoadingColor'];
package/bpk-component-chip/index.d.ts CHANGED
@@ -3,10 +3,10 @@ import BpkDropdownChip from './src/BpkDropdownChip';
3
3
  import BpkIconChip from './src/BpkIconChip';
4
4
  import BpkSelectableChip, { type Props as SelectableProps } from './src/BpkSelectableChip';
5
5
  import { CHIP_TYPES } from './src/commonTypes';
6
- import themeAttributes from './src/themeAttributes';
6
+ import themeAttributes, { chipBorderRadiusThemeAttributes, chipDefaultThemeAttributes, chipOnDarkThemeAttributes, chipOnImageThemeAttributes } from './src/themeAttributes';
7
7
  import type { CommonProps } from './src/commonTypes';
8
8
  export type BpkSelectableChipProps = SelectableProps;
9
9
  export type BpkDismissibleChipProps = CommonProps;
10
10
  export type BpkDropdownChipProps = CommonProps;
11
11
  export default BpkSelectableChip;
12
- export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes };
12
+ export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes, chipBorderRadiusThemeAttributes, chipDefaultThemeAttributes, chipOnDarkThemeAttributes, chipOnImageThemeAttributes, };
package/bpk-component-chip/index.js CHANGED
@@ -21,6 +21,6 @@ import BpkDropdownChip from "./src/BpkDropdownChip";
21
21
  import BpkIconChip from "./src/BpkIconChip";
22
22
  import BpkSelectableChip from "./src/BpkSelectableChip";
23
23
  import { CHIP_TYPES } from "./src/commonTypes";
24
- import themeAttributes from "./src/themeAttributes";
24
+ import themeAttributes, { chipBorderRadiusThemeAttributes, chipDefaultThemeAttributes, chipOnDarkThemeAttributes, chipOnImageThemeAttributes } from "./src/themeAttributes";
25
25
  export default BpkSelectableChip;
26
- export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes };
26
+ export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes, chipBorderRadiusThemeAttributes, chipDefaultThemeAttributes, chipOnDarkThemeAttributes, chipOnImageThemeAttributes };
package/bpk-component-chip/src/BpkSelectableChip.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-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:.5rem;cursor:pointer}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px hsla(0,0%,100%,.5) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;color:#161616;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-chip--icon-only{padding-inline-end:.5rem;padding-inline-start:.5rem}.bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}html[dir=rtl] .bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}
18
+ .bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;cursor:pointer;border-radius:.5rem;border-radius:var(--bpk-chip-border-radius, 0.5rem)}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);background-color:var(--bpk-chip-on-dark-background-color, transparent);color:#fff;color:var(--bpk-chip-on-dark-text-color, rgb(255, 255, 255));box-shadow:0 0 0 1px hsla(0,0%,100%,.5) inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-border-color, rgba(255, 255, 255, 0.5)) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-hover-border-color, rgb(255, 255, 255)) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-hover-border-color, rgb(255, 255, 255)) inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset;box-shadow:0 0 0 1px var(--bpk-chip-on-dark-active-border-color, rgb(255, 255, 255)) inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-hover-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-hover-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-active-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);background-color:var(--bpk-chip-default-background-color, transparent);color:#161616;color:var(--bpk-chip-default-text-color, rgb(22, 22, 22));box-shadow:0 0 0 1px #c1c7cf inset;box-shadow:0 0 0 1px var(--bpk-chip-default-border-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);background-color:var(--bpk-chip-default-hover-background-color, transparent);box-shadow:0 0 0 1px #05203c inset;box-shadow:0 0 0 1px var(--bpk-chip-default-hover-border-color, rgb(5, 32, 60)) inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);background-color:var(--bpk-chip-default-hover-background-color, transparent);box-shadow:0 0 0 1px #05203c inset;box-shadow:0 0 0 1px var(--bpk-chip-default-hover-border-color, rgb(5, 32, 60)) inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset;box-shadow:0 0 0 1px var(--bpk-chip-default-active-border-color, rgb(5, 32, 60)) inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-default-selected-hover-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-default-selected-hover-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-default-selected-active-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;background-color:var(--bpk-chip-on-image-background-color, rgb(255, 255, 255));color:#161616;color:var(--bpk-chip-on-image-text-color, rgb(22, 22, 22));box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8;background-color:var(--bpk-chip-on-image-hover-background-color, rgb(239, 243, 248))}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8;background-color:var(--bpk-chip-on-image-hover-background-color, rgb(239, 243, 248))}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8;background-color:var(--bpk-chip-on-image-active-background-color, rgb(239, 243, 248))}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:hsla(0,0%,100%,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-chip--icon-only{padding-inline-end:.5rem;padding-inline-start:.5rem}.bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}html[dir=rtl] .bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}
package/bpk-component-chip/src/themeAttributes.d.ts CHANGED
@@ -1,2 +1,6 @@
1
1
  declare const _default: string[];
2
2
  export default _default;
3
+ export declare const chipBorderRadiusThemeAttributes: string[];
4
+ export declare const chipDefaultThemeAttributes: string[];
5
+ export declare const chipOnDarkThemeAttributes: string[];
6
+ export declare const chipOnImageThemeAttributes: string[];
package/bpk-component-chip/src/themeAttributes.js CHANGED
@@ -16,4 +16,10 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- export default ['chipDefaultSelectedBackgroundColor', 'chipDefaultSelectedTextColor', 'chipOnDarkSelectedBackgroundColor', 'chipOnDarkSelectedTextColor', 'chipOnImageSelectedBackgroundColor', 'chipOnImageSelectedHoverBackgroundColor', 'chipOnImageSelectedActiveBackgroundColor', 'chipOnImageSelectedTextColor'];
19
+ // Backward-compatible: original 8 selected-state attributes.
20
+ // Do not modify — existing consumers depend on this exact list.
21
+ export default ['chipDefaultSelectedBackgroundColor', 'chipDefaultSelectedTextColor', 'chipOnDarkSelectedBackgroundColor', 'chipOnDarkSelectedTextColor', 'chipOnImageSelectedBackgroundColor', 'chipOnImageSelectedHoverBackgroundColor', 'chipOnImageSelectedActiveBackgroundColor', 'chipOnImageSelectedTextColor'];
22
+ export const chipBorderRadiusThemeAttributes = ['chipBorderRadius'];
23
+ export const chipDefaultThemeAttributes = ['chipDefaultBackgroundColor', 'chipDefaultTextColor', 'chipDefaultBorderColor', 'chipDefaultHoverBackgroundColor', 'chipDefaultHoverBorderColor', 'chipDefaultActiveBorderColor', 'chipDefaultSelectedBackgroundColor', 'chipDefaultSelectedTextColor', 'chipDefaultSelectedHoverBackgroundColor', 'chipDefaultSelectedActiveBackgroundColor'];
24
+ export const chipOnDarkThemeAttributes = ['chipOnDarkBackgroundColor', 'chipOnDarkTextColor', 'chipOnDarkBorderColor', 'chipOnDarkHoverBorderColor', 'chipOnDarkActiveBorderColor', 'chipOnDarkSelectedBackgroundColor', 'chipOnDarkSelectedTextColor', 'chipOnDarkSelectedHoverBackgroundColor', 'chipOnDarkSelectedActiveBackgroundColor'];
25
+ export const chipOnImageThemeAttributes = ['chipOnImageBackgroundColor', 'chipOnImageTextColor', 'chipOnImageHoverBackgroundColor', 'chipOnImageActiveBackgroundColor', 'chipOnImageSelectedBackgroundColor', 'chipOnImageSelectedTextColor', 'chipOnImageSelectedHoverBackgroundColor', 'chipOnImageSelectedActiveBackgroundColor'];
package/bpk-component-pagination/src/BpkPaginationPage.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-pagination-page{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-pagination-page:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-pagination-page:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--not-selected{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}
18
+ .bpk-pagination-page{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;border-radius:.5rem;border-radius:var(--bpk-button-border-radius, 0.5rem);font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-pagination-page:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-pagination-page:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-pagination-page.bpk-button--loading:disabled{background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121));color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-pagination-page:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #05203c inset}.bpk-pagination-page--not-selected{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px var(--bpk-pagination-selected-background-color, rgb(193, 199, 207)) inset}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-pagination-page--not-selected:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-pagination-page--not-selected:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-pagination-page--not-selected.bpk-button--loading:disabled{background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207));color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}:global(.bpk-no-touch-support) .bpk-pagination-page--not-selected:hover:not(:active):not(:disabled){background-color:rgba(0,0,0,0);color:#161616}
package/bpk-component-scrollable-calendar/src/utils.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const getMonthsArray: (startDate: Date, count: number) => Date[];
1
+ declare const getMonthsArray: (startDate: Date, count: number) => any[];
2
2
  declare const getMonthItemHeights: (months: Date[], weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6, columnCount: number, rowHeight: number, baseMonthItemHeight: number) => number[];
3
3
  export { getMonthsArray, getMonthItemHeights };
package/bpk-component-segmented-control/index.d.ts CHANGED
@@ -2,3 +2,5 @@ import BpkSegmentedControl, { useSegmentedControlPanels, type Props as BpkSegmen
2
2
  export type { BpkSegmentControlProps, TabPanelProps };
3
3
  export { useSegmentedControlPanels };
4
4
  export default BpkSegmentedControl;
5
+ export { default as BpkSegmentedControlV2, SEGMENT_TYPES_V2 } from './src/BpkSegmentedControlV2/BpkSegmentedControlV2';
6
+ export type { BpkSegmentedControlV2RootProps, BpkSegmentedControlV2ItemProps, BpkSegmentedControlV2ItemTextProps, SegmentTypesV2, } from './src/BpkSegmentedControlV2/common-types';
package/bpk-component-segmented-control/index.js CHANGED
@@ -18,4 +18,5 @@
18
18
 
19
19
  import BpkSegmentedControl, { useSegmentedControlPanels } from "./src/BpkSegmentedControl";
20
20
  export { useSegmentedControlPanels };
21
- export default BpkSegmentedControl;
21
+ export default BpkSegmentedControl;
22
+ export { default as BpkSegmentedControlV2, SEGMENT_TYPES_V2 } from "./src/BpkSegmentedControlV2/BpkSegmentedControlV2";
package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import { SEGMENT_TYPES_V2 } from './common-types';
2
+ import type { BpkSegmentedControlV2ItemProps, BpkSegmentedControlV2ItemTextProps, BpkSegmentedControlV2RootProps } from './common-types';
3
+ declare const BpkSegmentedControlV2Root: ({ children, defaultValue, label, onChange, shadow, type, value, }: BpkSegmentedControlV2RootProps) => import("react/jsx-runtime").JSX.Element;
4
+ declare const BpkSegmentedControlV2Item: ({ children, value, }: BpkSegmentedControlV2ItemProps) => import("react/jsx-runtime").JSX.Element;
5
+ declare const BpkSegmentedControlV2ItemText: ({ children, }: BpkSegmentedControlV2ItemTextProps) => import("react/jsx-runtime").JSX.Element;
6
+ declare const BpkSegmentedControlV2ItemControl: () => import("react/jsx-runtime").JSX.Element;
7
+ declare const BpkSegmentedControlV2ItemHiddenInput: () => import("react/jsx-runtime").JSX.Element;
8
+ declare const BpkSegmentedControlV2Indicator: () => import("react/jsx-runtime").JSX.Element;
9
+ declare const BpkSegmentedControlV2: {
10
+ Root: ({ children, defaultValue, label, onChange, shadow, type, value, }: BpkSegmentedControlV2RootProps) => import("react/jsx-runtime").JSX.Element;
11
+ Item: ({ children, value, }: BpkSegmentedControlV2ItemProps) => import("react/jsx-runtime").JSX.Element;
12
+ ItemText: ({ children, }: BpkSegmentedControlV2ItemTextProps) => import("react/jsx-runtime").JSX.Element;
13
+ ItemControl: () => import("react/jsx-runtime").JSX.Element;
14
+ ItemHiddenInput: () => import("react/jsx-runtime").JSX.Element;
15
+ Indicator: () => import("react/jsx-runtime").JSX.Element;
16
+ };
17
+ export default BpkSegmentedControlV2;
18
+ export { BpkSegmentedControlV2Root, BpkSegmentedControlV2Item, BpkSegmentedControlV2ItemText, BpkSegmentedControlV2ItemControl, BpkSegmentedControlV2ItemHiddenInput, BpkSegmentedControlV2Indicator, SEGMENT_TYPES_V2, };
19
+ export type { BpkSegmentedControlV2RootProps, BpkSegmentedControlV2ItemProps, BpkSegmentedControlV2ItemTextProps, };
package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.js ADDED
@@ -0,0 +1,81 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2016 Skyscanner Ltd
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+
19
+ import { SegmentGroup } from '@ark-ui/react';
20
+ import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
21
+ import { SEGMENT_TYPES_V2 } from "./common-types";
22
+ import STYLES from "./BpkSegmentedControlV2.module.css";
23
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
+ const getClassName = cssModules(STYLES);
25
+ const BpkSegmentedControlV2Root = ({
26
+ children,
27
+ defaultValue,
28
+ label,
29
+ onChange,
30
+ shadow = false,
31
+ type = SEGMENT_TYPES_V2.CanvasDefault,
32
+ value
33
+ }) => {
34
+ const containerClass = getClassName('bpk-segmented-control-v2', `bpk-segmented-control-v2--${type}`, shadow && 'bpk-segmented-control-v2--shadow');
35
+ return /*#__PURE__*/_jsxs(SegmentGroup.Root, {
36
+ className: containerClass,
37
+ value: value,
38
+ defaultValue: defaultValue,
39
+ onValueChange: onChange ? ({
40
+ value: selectedValue
41
+ }) => {
42
+ if (selectedValue !== null) onChange(selectedValue);
43
+ } : undefined,
44
+ orientation: "horizontal",
45
+ ...getDataComponentAttribute('SegmentedControlV2'),
46
+ children: [/*#__PURE__*/_jsx(SegmentGroup.Label, {
47
+ children: label
48
+ }), children]
49
+ });
50
+ };
51
+ const BpkSegmentedControlV2Item = ({
52
+ children,
53
+ value
54
+ }) => /*#__PURE__*/_jsx(SegmentGroup.Item, {
55
+ value: value,
56
+ className: getClassName('bpk-segmented-control-v2__item'),
57
+ children: children
58
+ });
59
+ const BpkSegmentedControlV2ItemText = ({
60
+ children
61
+ }) => /*#__PURE__*/_jsx(SegmentGroup.ItemText, {
62
+ className: getClassName('bpk-segmented-control-v2__item-text'),
63
+ children: children
64
+ });
65
+ const BpkSegmentedControlV2ItemControl = () => /*#__PURE__*/_jsx(SegmentGroup.ItemControl, {
66
+ className: getClassName('bpk-segmented-control-v2__item-control')
67
+ });
68
+ const BpkSegmentedControlV2ItemHiddenInput = () => /*#__PURE__*/_jsx(SegmentGroup.ItemHiddenInput, {});
69
+ const BpkSegmentedControlV2Indicator = () => /*#__PURE__*/_jsx(SegmentGroup.Indicator, {
70
+ className: getClassName('bpk-segmented-control-v2__indicator')
71
+ });
72
+ const BpkSegmentedControlV2 = {
73
+ Root: BpkSegmentedControlV2Root,
74
+ Item: BpkSegmentedControlV2Item,
75
+ ItemText: BpkSegmentedControlV2ItemText,
76
+ ItemControl: BpkSegmentedControlV2ItemControl,
77
+ ItemHiddenInput: BpkSegmentedControlV2ItemHiddenInput,
78
+ Indicator: BpkSegmentedControlV2Indicator
79
+ };
80
+ export default BpkSegmentedControlV2;
81
+ export { BpkSegmentedControlV2Root, BpkSegmentedControlV2Item, BpkSegmentedControlV2ItemText, BpkSegmentedControlV2ItemControl, BpkSegmentedControlV2ItemHiddenInput, BpkSegmentedControlV2Indicator, SEGMENT_TYPES_V2 };
package/bpk-component-segmented-control/src/BpkSegmentedControlV2/BpkSegmentedControlV2.module.css ADDED
@@ -0,0 +1,18 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2016 Skyscanner Ltd
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+ .bpk-segmented-control-v2{position:relative;display:grid;grid-auto-columns:1fr;grid-auto-flow:column;border-radius:.5rem;background-color:#eff3f8;overflow:hidden}.bpk-segmented-control-v2--canvas-default{background-color:#eff3f8}.bpk-segmented-control-v2--canvas-contrast{background-color:#fff}.bpk-segmented-control-v2--canvas-contrast .bpk-segmented-control-v2__indicator{background-color:#fff}.bpk-segmented-control-v2--surface-default{background-color:#eff3f8}.bpk-segmented-control-v2--surface-default .bpk-segmented-control-v2__indicator{background-color:#eff3f8}.bpk-segmented-control-v2--surface-contrast{background-color:hsla(0,0%,100%,.1)}.bpk-segmented-control-v2--surface-contrast .bpk-segmented-control-v2__indicator{background-color:#024daf}.bpk-segmented-control-v2--surface-contrast .bpk-segmented-control-v2__item-text{color:#fff;border-inline-start-color:hsla(0,0%,100%,.5)}.bpk-segmented-control-v2--shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-segmented-control-v2>[data-part=label]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.bpk-segmented-control-v2__indicator{position:absolute;top:var(--top);left:var(--left);width:var(--width);height:var(--height);background-color:#05203c;--transition-duration: 0ms}.bpk-segmented-control-v2__item{display:grid;cursor:pointer}.bpk-segmented-control-v2__item:first-of-type .bpk-segmented-control-v2__item-text{border-inline-start:none}.bpk-segmented-control-v2__item:has([data-state=checked]) .bpk-segmented-control-v2__item-text{border-inline-start-color:rgba(0,0,0,0)}.bpk-segmented-control-v2__item:has([data-state=checked])+.bpk-segmented-control-v2__item .bpk-segmented-control-v2__item-text{border-inline-start-color:rgba(0,0,0,0)}.bpk-segmented-control-v2__item:has(:focus-visible){z-index:1;outline:.125rem solid #0062e3;outline-offset:-0.125rem}.bpk-segmented-control-v2__item-control{display:none}.bpk-segmented-control-v2__item-text{padding:.25rem .5rem;display:flex;z-index:1;min-height:2rem;grid-area:1/1;justify-content:center;align-items:center;transition:color 50ms ease-in-out;color:#161616;overflow:hidden;border-inline-start:1px solid #c1c7cf;pointer-events:none;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-segmented-control-v2__item-text svg{fill:currentcolor}.bpk-segmented-control-v2__item-text[data-state=checked]{color:#fff}
package/bpk-component-segmented-control/src/BpkSegmentedControlV2/common-types.d.ts ADDED
@@ -0,0 +1,57 @@
1
+ import type { ReactNode } from 'react';
2
+ export declare const SEGMENT_TYPES_V2: {
3
+ readonly CanvasDefault: "canvas-default";
4
+ readonly CanvasContrast: "canvas-contrast";
5
+ readonly SurfaceDefault: "surface-default";
6
+ readonly SurfaceContrast: "surface-contrast";
7
+ };
8
+ export type SegmentTypesV2 = (typeof SEGMENT_TYPES_V2)[keyof typeof SEGMENT_TYPES_V2];
9
+ export type BpkSegmentedControlV2RootProps = {
10
+ /**
11
+ * Slot content — one or more BpkSegmentedControlV2.Item elements.
12
+ */
13
+ children: ReactNode;
14
+ /**
15
+ * Controlled selected value. When provided, onChange must also be provided.
16
+ */
17
+ value?: string;
18
+ /**
19
+ * Initial selected value for uncontrolled usage.
20
+ */
21
+ defaultValue?: string;
22
+ /**
23
+ * Called when the selected segment changes. Receives the value of the newly selected item.
24
+ */
25
+ onChange?: (value: string) => void;
26
+ /**
27
+ * Pre-defined surface theme controlling default token values.
28
+ * @default 'canvas-default'
29
+ */
30
+ type?: SegmentTypesV2;
31
+ /**
32
+ * Applies a box shadow to the group container.
33
+ * @default false
34
+ */
35
+ shadow?: boolean;
36
+ /**
37
+ * Accessible label for the radiogroup. Always required to satisfy WCAG 4.1.2
38
+ * (the role="radiogroup" element must have an accessible name).
39
+ */
40
+ label: string;
41
+ };
42
+ export type BpkSegmentedControlV2ItemProps = {
43
+ /**
44
+ * Unique identifier for this segment within the group.
45
+ */
46
+ value: string;
47
+ /**
48
+ * Slot content — typically ItemText + ItemControl + ItemHiddenInput.
49
+ */
50
+ children: ReactNode;
51
+ };
52
+ export type BpkSegmentedControlV2ItemTextProps = {
53
+ /**
54
+ * Visible content of the segment — text, icons, or a combination.
55
+ */
56
+ children: ReactNode;
57
+ };
package/bpk-component-segmented-control/src/BpkSegmentedControlV2/common-types.js ADDED
@@ -0,0 +1,24 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2016 Skyscanner Ltd
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+
19
+ export const SEGMENT_TYPES_V2 = {
20
+ CanvasDefault: 'canvas-default',
21
+ CanvasContrast: 'canvas-contrast',
22
+ SurfaceDefault: 'surface-default',
23
+ SurfaceContrast: 'surface-contrast'
24
+ };
package/bpk-component-table/index.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import BpkTable from './src/BpkTable';
2
+ import BpkTableBody from './src/BpkTableBody';
3
+ import BpkTableCell from './src/BpkTableCell';
4
+ import BpkTableHead from './src/BpkTableHead';
5
+ import BpkTableHeadCell from './src/BpkTableHeadCell';
6
+ import BpkTableRow from './src/BpkTableRow';
7
+ export type { BpkTableProps } from './src/BpkTable';
8
+ export type { BpkTableHeadProps } from './src/BpkTableHead';
9
+ export type { BpkTableBodyProps } from './src/BpkTableBody';
10
+ export type { BpkTableRowProps } from './src/BpkTableRow';
11
+ export type { BpkTableCellProps } from './src/BpkTableCell';
12
+ export type { BpkTableHeadCellProps } from './src/BpkTableHeadCell';
13
+ export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell, };
package/bpk-component-table/index.js CHANGED
@@ -14,7 +14,9 @@
14
14
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
- */import BpkTable from "./src/BpkTable";
17
+ */
18
+
19
+ import BpkTable from "./src/BpkTable";
18
20
  import BpkTableBody from "./src/BpkTableBody";
19
21
  import BpkTableCell from "./src/BpkTableCell";
20
22
  import BpkTableHead from "./src/BpkTableHead";
package/bpk-component-table/src/BpkTable.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import type { ReactNode, HTMLAttributes } from 'react';
2
+ export interface BpkTableProps extends Omit<HTMLAttributes<HTMLTableElement>, 'className'> {
3
+ /** The content of the table */
4
+ children: ReactNode;
5
+ className?: string | null;
6
+ }
7
+ declare const BpkTable: ({ children, className, ...rest }: BpkTableProps) => import("react/jsx-runtime").JSX.Element;
8
+ export default BpkTable;
package/bpk-component-table/src/BpkTable.js CHANGED
@@ -14,7 +14,8 @@
14
14
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
- */import PropTypes from 'prop-types';
17
+ */
18
+
18
19
  import { cssModules } from "../../bpk-react-utils";
19
20
  import STYLES from "./BpkTable.module.css";
20
21
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,18 +26,10 @@ const BpkTable = ({
25
26
  ...rest
26
27
  }) => {
27
28
  const classNames = getClassName('bpk-table', className);
28
- return (
29
- /*#__PURE__*/
30
- // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
31
- _jsx("table", {
32
- className: classNames,
33
- ...rest,
34
- children: children
35
- })
36
- );
37
- };
38
- BpkTable.propTypes = {
39
- children: PropTypes.node.isRequired,
40
- className: PropTypes.string
29
+ return /*#__PURE__*/_jsx("table", {
30
+ className: classNames,
31
+ ...rest,
32
+ children: children
33
+ });
41
34
  };
42
35
  export default BpkTable;
package/bpk-component-table/src/BpkTableBody.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type { ReactNode, HTMLAttributes } from 'react';
2
+ export interface BpkTableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
3
+ /** The content of the table */
4
+ children: ReactNode;
5
+ }
6
+ declare const BpkTableBody: (props: BpkTableBodyProps) => import("react/jsx-runtime").JSX.Element;
7
+ export default BpkTableBody;