@skyscanner/backpack-web 42.17.0 → 42.19.0-dev-v26021379435.1
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.
- package/bpk-component-checkbox/index.d.ts +1 -0
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.d.ts +2 -2
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.module.css +1 -1
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2HiddenInput.d.ts +6 -1
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2HiddenInput.js +17 -3
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.d.ts +2 -1
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.js +2 -0
- package/bpk-component-checkbox-card/src/BpkCheckboxCard.js +1 -3
- package/bpk-component-checkbox-card/src/BpkCheckboxCard.module.css +1 -1
- package/bpk-component-checkbox-card/src/BpkCheckboxCardRoot.js +1 -3
- package/bpk-component-fieldset/src/BpkFieldset.js +0 -1
- package/bpk-component-form-validation/index.d.ts +5 -0
- package/bpk-component-form-validation/src/BpkFormValidation.d.ts +12 -0
- package/bpk-component-form-validation/src/BpkFormValidation.js +0 -9
- package/bpk-component-form-validation/src/themeAttributes.d.ts +2 -0
- package/bpk-component-progress/index.d.ts +5 -0
- package/bpk-component-progress/index.js +3 -1
- package/bpk-component-progress/src/BpkProgress.d.ts +27 -0
- package/bpk-component-progress/src/BpkProgress.js +29 -50
- package/bpk-component-progress/src/themeAttributes.d.ts +2 -0
- package/bpk-component-progress/src/themeAttributes.js +3 -1
- package/bpk-component-radio/index.d.ts +5 -0
- package/bpk-component-radio/index.js +3 -1
- package/bpk-component-radio/src/BpkRadio.d.ts +13 -0
- package/bpk-component-radio/src/BpkRadio.js +3 -11
- package/bpk-component-radio/src/themeAttributes.d.ts +2 -0
- package/bpk-component-radio/src/themeAttributes.js +3 -1
- package/package.json +1 -1
|
@@ -9,3 +9,4 @@ export type { BpkCheckboxV2RootProps, BpkCheckboxV2CheckedState } from './src/Bp
|
|
|
9
9
|
export type { BpkCheckboxV2ControlProps } from './src/BpkCheckboxV2/BpkCheckboxV2Control';
|
|
10
10
|
export type { BpkCheckboxV2LabelProps } from './src/BpkCheckboxV2/BpkCheckboxV2Label';
|
|
11
11
|
export type { BpkCheckboxV2DescriptionProps } from './src/BpkCheckboxV2/BpkCheckboxV2Description';
|
|
12
|
+
export type { BpkCheckboxV2HiddenInputProps } from './src/BpkCheckboxV2/BpkCheckboxV2HiddenInput';
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
declare const BpkCheckboxV2: {
|
|
2
|
-
Root: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: import("./BpkCheckboxV2Root").BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
Root: ({ checked, children, "data-testid": dataTestId, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: import("./BpkCheckboxV2Root").BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
Control: ({ children }: import("./BpkCheckboxV2Control").BpkCheckboxV2ControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
Indicator: () => null;
|
|
5
5
|
Label: ({ children }: import("./BpkCheckboxV2Label").BpkCheckboxV2LabelProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
Description: ({ children }: import("./BpkCheckboxV2Description").BpkCheckboxV2DescriptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
HiddenInput: () => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
HiddenInput: ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }?: import("./BpkCheckboxV2HiddenInput").BpkCheckboxV2HiddenInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
};
|
|
9
9
|
export default BpkCheckboxV2;
|
|
@@ -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-checkbox-v2{display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;background-color:#fff;border-radius:.25rem;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-
|
|
18
|
+
.bpk-checkbox-v2{position:relative;display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;background-color:#fff;border-radius:.25rem;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-state=checked]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:.0625rem center;background-size:calc(100% - .15625rem) auto}.bpk-checkbox-v2__control[data-state=checked]:disabled{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__control[data-state=indeterminate]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227))}.bpk-checkbox-v2__control[data-state=indeterminate]::before{content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox-v2__control[data-invalid]{border-color:#e70866}.bpk-checkbox-v2__control[data-disabled]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked],.bpk-checkbox-v2__control[data-disabled][data-state=indeterminate]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked]{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2:has(.bpk-checkbox-v2__hidden-input:focus-visible) .bpk-checkbox-v2__control{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-checkbox-v2__label{color:#161616;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-checkbox-v2__label a{color:inherit}[data-disabled] .bpk-checkbox-v2__label{color:rgba(0,0,0,.2)}.bpk-checkbox-v2__description{display:block;margin-top:.25rem;color:#626971;font-size:.875rem;line-height:1.25rem;font-weight:400}[data-disabled] .bpk-checkbox-v2__description{color:rgba(0,0,0,.2)}
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
export type BpkCheckboxV2HiddenInputProps = {
|
|
2
|
+
'aria-label'?: string;
|
|
3
|
+
'aria-labelledby'?: string;
|
|
4
|
+
'aria-describedby'?: string;
|
|
5
|
+
};
|
|
6
|
+
declare const BpkCheckboxV2HiddenInput: ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }?: BpkCheckboxV2HiddenInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
7
|
export default BpkCheckboxV2HiddenInput;
|
|
@@ -17,9 +17,23 @@
|
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
import { Checkbox } from '@ark-ui/react';
|
|
20
|
-
|
|
20
|
+
import { cssModules } from "../../../bpk-react-utils";
|
|
21
|
+
import STYLES from "./BpkCheckboxV2.module.css";
|
|
22
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
|
+
const getClassName = cssModules(STYLES);
|
|
21
24
|
// Renders Ark's visually hidden native <input type="checkbox">.
|
|
22
25
|
// Include when the checkbox is inside a <form> for native form submission.
|
|
23
|
-
|
|
24
|
-
|
|
26
|
+
// Accepts aria-* attributes so consumers can override the screen-reader
|
|
27
|
+
// announcement when the visible <BpkCheckboxV2.Label> is missing or differs
|
|
28
|
+
// from the desired accessible name.
|
|
29
|
+
const BpkCheckboxV2HiddenInput = ({
|
|
30
|
+
'aria-describedby': ariaDescribedby,
|
|
31
|
+
'aria-label': ariaLabel,
|
|
32
|
+
'aria-labelledby': ariaLabelledby
|
|
33
|
+
} = {}) => /*#__PURE__*/_jsx(Checkbox.HiddenInput, {
|
|
34
|
+
className: getClassName('bpk-checkbox-v2__hidden-input'),
|
|
35
|
+
"aria-describedby": ariaDescribedby,
|
|
36
|
+
"aria-label": ariaLabel,
|
|
37
|
+
"aria-labelledby": ariaLabelledby
|
|
38
|
+
});
|
|
25
39
|
export default BpkCheckboxV2HiddenInput;
|
|
@@ -3,6 +3,7 @@ export type BpkCheckboxV2CheckedState = boolean | 'indeterminate';
|
|
|
3
3
|
export type BpkCheckboxV2RootProps = {
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
checked?: BpkCheckboxV2CheckedState;
|
|
6
|
+
'data-testid'?: string;
|
|
6
7
|
defaultChecked?: BpkCheckboxV2CheckedState;
|
|
7
8
|
disabled?: boolean;
|
|
8
9
|
id?: string;
|
|
@@ -12,5 +13,5 @@ export type BpkCheckboxV2RootProps = {
|
|
|
12
13
|
required?: boolean;
|
|
13
14
|
value?: string;
|
|
14
15
|
};
|
|
15
|
-
declare const BpkCheckboxV2Root: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare const BpkCheckboxV2Root: ({ checked, children, "data-testid": dataTestId, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
export default BpkCheckboxV2Root;
|
|
@@ -24,6 +24,7 @@ const getClassName = cssModules(STYLES);
|
|
|
24
24
|
const BpkCheckboxV2Root = ({
|
|
25
25
|
checked,
|
|
26
26
|
children,
|
|
27
|
+
'data-testid': dataTestId,
|
|
27
28
|
defaultChecked,
|
|
28
29
|
disabled = false,
|
|
29
30
|
id,
|
|
@@ -35,6 +36,7 @@ const BpkCheckboxV2Root = ({
|
|
|
35
36
|
}) => /*#__PURE__*/_jsx(Checkbox.Root, {
|
|
36
37
|
className: getClassName('bpk-checkbox-v2'),
|
|
37
38
|
checked: checked,
|
|
39
|
+
"data-testid": dataTestId,
|
|
38
40
|
defaultChecked: defaultChecked,
|
|
39
41
|
disabled: disabled,
|
|
40
42
|
id: id,
|
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
import { CheckboxHiddenInput } from '@ark-ui/react';
|
|
20
|
-
import { withButtonAlignment } from "../../bpk-component-icon";
|
|
21
20
|
import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
|
|
22
21
|
import { BpkSpinner, SPINNER_TYPES } from "../../bpk-component-spinner";
|
|
23
22
|
import BpkText, { TEXT_COLORS, TEXT_STYLES } from "../../bpk-component-text";
|
|
@@ -27,7 +26,6 @@ import { useCheckboxCardContext } from "./CheckboxCardContext";
|
|
|
27
26
|
import STYLES from "./BpkCheckboxCard.module.css";
|
|
28
27
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
29
28
|
const getClassName = cssModules(STYLES);
|
|
30
|
-
const AlignedTickCircleIcon = withButtonAlignment(TickCircleIcon);
|
|
31
29
|
|
|
32
30
|
// ─── HiddenInput ─────────────────────────────────────────────────────────────
|
|
33
31
|
|
|
@@ -169,7 +167,7 @@ function Indicator(_props = {}) {
|
|
|
169
167
|
return /*#__PURE__*/_jsx("div", {
|
|
170
168
|
className: getClassName('bpk-checkbox-card-indicator'),
|
|
171
169
|
"aria-hidden": true,
|
|
172
|
-
children: /*#__PURE__*/_jsx(
|
|
170
|
+
children: /*#__PURE__*/_jsx(TickCircleIcon, {})
|
|
173
171
|
});
|
|
174
172
|
}
|
|
175
173
|
|
|
@@ -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-checkbox-card-root{position:relative;display:block;min-width:2.75rem;height:100%;min-height:2.75rem;transition:background-color 200ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;border:1px solid var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-default-background-color, rgb(255, 255, 255));color:var(--bpk-checkbox-card-default-text-color, rgb(22, 22, 22));cursor:pointer;box-sizing:border-box}.bpk-checkbox-card-root:has(:focus-visible){outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}.bpk-checkbox-card-root[data-state=checked]{border-color:var(--bpk-checkbox-card-checked-border-color, transparent);background-color:var(--bpk-checkbox-card-checked-background-color, rgb(5, 32, 60));color:var(--bpk-checkbox-card-checked-text-color, rgb(255, 255, 255))}.bpk-checkbox-card-root[data-disabled]:not([data-loading]){border-color:var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-disabled-background-color, rgb(239, 243, 248));color:var(--bpk-checkbox-card-disabled-text-color, rgba(0, 0, 0, 0.2));cursor:not-allowed}.bpk-checkbox-card-root[data-loading]{cursor:not-allowed}.bpk-checkbox-card-root--radius-square{border-radius:0}.bpk-checkbox-card-root--radius-rounded{border-radius:.75rem}.bpk-checkbox-card-root--on-canvas-default{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207)}.bpk-checkbox-card-root--cars{
|
|
18
|
+
.bpk-checkbox-card-root{position:relative;display:block;min-width:2.75rem;height:100%;min-height:2.75rem;transition:background-color 200ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;border:1px solid var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-default-background-color, rgb(255, 255, 255));color:var(--bpk-checkbox-card-default-text-color, rgb(22, 22, 22));cursor:pointer;box-sizing:border-box}.bpk-checkbox-card-root:has(:focus-visible){outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}.bpk-checkbox-card-root[data-state=checked]{border-color:var(--bpk-checkbox-card-checked-border-color, transparent);background-color:var(--bpk-checkbox-card-checked-background-color, rgb(5, 32, 60));color:var(--bpk-checkbox-card-checked-text-color, rgb(255, 255, 255))}.bpk-checkbox-card-root[data-disabled]:not([data-loading]){border-color:var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-disabled-background-color, rgb(239, 243, 248));color:var(--bpk-checkbox-card-disabled-text-color, rgba(0, 0, 0, 0.2));cursor:not-allowed}.bpk-checkbox-card-root[data-loading]{cursor:not-allowed}.bpk-checkbox-card-root--radius-square{border-radius:0}.bpk-checkbox-card-root--radius-rounded{border-radius:.75rem}.bpk-checkbox-card-root--on-canvas-default{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207)}.bpk-checkbox-card-root--cars{transition:background-color 200ms ease-in-out,box-shadow 200ms ease-in-out,color 200ms ease-in-out;border:none;box-shadow:inset 0 0 0 1px #c1c7cf;--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-checked-background-color: rgb(255, 255, 255);--bpk-checkbox-card-checked-text-color: rgb(22, 22, 22);--bpk-checkbox-card-indicator-background-color: rgb(5, 32, 60)}.bpk-checkbox-card-root--cars.bpk-checkbox-card-root--cars--radius-rounded{border-radius:1.5rem}.bpk-no-touch-support .bpk-checkbox-card-root--cars:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root--cars:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){box-shadow:inset 0 0 0 1px #05203c}:global(.bpk-no-touch-support) .bpk-checkbox-card-root--cars:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root--cars:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){box-shadow:inset 0 0 0 1px #05203c}.bpk-checkbox-card-root--cars[data-state=checked]{box-shadow:inset 0 0 0 2px #05203c}.bpk-checkbox-card-root--cars[data-disabled]:not([data-loading]){box-shadow:none}.bpk-checkbox-card-root--on-canvas-contrast{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-background-color: rgb(239, 243, 248)}.bpk-checkbox-card-root--on-surface-contrast{--bpk-checkbox-card-default-background-color: rgba(255, 255, 255, 0.1);--bpk-checkbox-card-default-text-color: rgb(255, 255, 255);--bpk-checkbox-card-secondary-text-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(0, 98, 227);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: transparent;--bpk-checkbox-card-disabled-border-color: transparent}.bpk-checkbox-card-content{width:100%;padding:.5rem}.bpk-checkbox-card-label{display:-webkit-box;width:100%;color:inherit;text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-label-line-clamp, 2);line-clamp:var(--bpk-label-line-clamp, 2)}.bpk-checkbox-card-label>*{text-align:inherit}.bpk-checkbox-card-description{display:-webkit-box;width:100%;color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113));text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-description-line-clamp, 3);line-clamp:var(--bpk-description-line-clamp, 3);margin:0}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-description{color:inherit}.bpk-checkbox-card-root--cars[data-state=checked] .bpk-checkbox-card-description{color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113))}.bpk-checkbox-card-description>*{text-align:inherit}.bpk-checkbox-card-price{display:flex;align-items:center;gap:.25rem}.bpk-checkbox-card-indicator{position:absolute;top:.5rem;display:none;z-index:1;width:1.25rem;height:1.25rem;inset-inline-end:.5rem;pointer-events:none}.bpk-checkbox-card-indicator svg{width:100%;height:100%;fill:var(--bpk-checkbox-card-indicator-background-color, rgb(0, 98, 227))}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-indicator{display:block}.bpk-checkbox-card-root--cars .bpk-checkbox-card-indicator{width:1rem;height:1rem}
|
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
|
|
19
19
|
import { useMemo } from 'react';
|
|
20
20
|
import { CheckboxRoot } from '@ark-ui/react';
|
|
21
|
-
import { withButtonAlignment } from "../../bpk-component-icon";
|
|
22
21
|
import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
|
|
23
22
|
import { cssModules } from "../../bpk-react-utils";
|
|
24
23
|
import { CheckboxCardContext } from "./CheckboxCardContext";
|
|
@@ -26,7 +25,6 @@ import { CHECKBOX_CARD_VARIANTS, CHECKBOX_CARD_RADIUS } from "./common-types";
|
|
|
26
25
|
import STYLES from "./BpkCheckboxCard.module.css";
|
|
27
26
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
28
27
|
const getClassName = cssModules(STYLES);
|
|
29
|
-
const AlignedTickCircleIcon = withButtonAlignment(TickCircleIcon);
|
|
30
28
|
/**
|
|
31
29
|
* BpkCheckboxCard.Root - Root container for checkbox card compound component.
|
|
32
30
|
*
|
|
@@ -93,7 +91,7 @@ export function Root({
|
|
|
93
91
|
children: [variant === CHECKBOX_CARD_VARIANTS.cars && /*#__PURE__*/_jsx("div", {
|
|
94
92
|
className: getClassName('bpk-checkbox-card-indicator'),
|
|
95
93
|
"aria-hidden": true,
|
|
96
|
-
children: /*#__PURE__*/_jsx(
|
|
94
|
+
children: /*#__PURE__*/_jsx(TickCircleIcon, {})
|
|
97
95
|
}), children]
|
|
98
96
|
})
|
|
99
97
|
})
|
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
import { cloneElement } from 'react';
|
|
20
|
-
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
21
20
|
import BpkFormValidation from "../../bpk-component-form-validation";
|
|
22
21
|
import BpkLabel from "../../bpk-component-label";
|
|
23
22
|
import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { type Props as AnimateHeightProps } from '../../bpk-animate-height';
|
|
3
|
+
export type Props = Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
id: string;
|
|
6
|
+
expanded: boolean;
|
|
7
|
+
isCheckbox?: boolean;
|
|
8
|
+
className?: string | null;
|
|
9
|
+
containerProps?: Partial<AnimateHeightProps>;
|
|
10
|
+
};
|
|
11
|
+
declare const BpkFormValidation: ({ children, className, containerProps, expanded, isCheckbox, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export default BpkFormValidation;
|
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import PropTypes from 'prop-types';
|
|
20
19
|
import { lineHeightSm, iconSizeSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
|
|
21
20
|
import AnimateHeight from "../../bpk-animate-height";
|
|
22
21
|
import { withAlignment } from "../../bpk-component-icon";
|
|
@@ -53,12 +52,4 @@ const BpkFormValidation = ({
|
|
|
53
52
|
})
|
|
54
53
|
});
|
|
55
54
|
};
|
|
56
|
-
BpkFormValidation.propTypes = {
|
|
57
|
-
children: PropTypes.node.isRequired,
|
|
58
|
-
id: PropTypes.string.isRequired,
|
|
59
|
-
expanded: PropTypes.bool.isRequired,
|
|
60
|
-
isCheckbox: PropTypes.bool,
|
|
61
|
-
className: PropTypes.string,
|
|
62
|
-
containerProps: PropTypes.object // eslint-disable-line react/forbid-prop-types
|
|
63
|
-
};
|
|
64
55
|
export default BpkFormValidation;
|
|
@@ -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
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
import BpkProgress from "./src/BpkProgress";
|
|
18
20
|
import themeAttributes from "./src/themeAttributes";
|
|
19
21
|
export default BpkProgress;
|
|
20
22
|
export { themeAttributes };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { Component, type HTMLAttributes } from 'react';
|
|
2
|
+
type NativeDivProps = HTMLAttributes<HTMLDivElement>;
|
|
3
|
+
export type Props = Omit<NativeDivProps, 'className'> & {
|
|
4
|
+
max: number;
|
|
5
|
+
min: number;
|
|
6
|
+
value: number;
|
|
7
|
+
stepped?: boolean;
|
|
8
|
+
small?: boolean;
|
|
9
|
+
className?: string | null;
|
|
10
|
+
onComplete?: (() => unknown) | null;
|
|
11
|
+
onCompleteTransitionEnd?: (() => unknown) | null;
|
|
12
|
+
getValueText?: ((value: number, min: number, max: number) => string) | null;
|
|
13
|
+
};
|
|
14
|
+
declare class BpkProgress extends Component<Props> {
|
|
15
|
+
static defaultProps: {
|
|
16
|
+
className: null;
|
|
17
|
+
stepped: boolean;
|
|
18
|
+
small: boolean;
|
|
19
|
+
onComplete: () => null;
|
|
20
|
+
onCompleteTransitionEnd: () => null;
|
|
21
|
+
getValueText: null;
|
|
22
|
+
};
|
|
23
|
+
componentDidUpdate(previousProps: Props): void;
|
|
24
|
+
handleCompleteTransitionEnd: () => void;
|
|
25
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
}
|
|
27
|
+
export default BpkProgress;
|
|
@@ -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
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
18
19
|
import { Component } from 'react';
|
|
19
20
|
import clamp from 'lodash.clamp';
|
|
20
21
|
import { cssModules } from "../../bpk-react-utils";
|
|
@@ -35,27 +36,15 @@ const renderSteps = numberOfSteps => {
|
|
|
35
36
|
}
|
|
36
37
|
return steps;
|
|
37
38
|
};
|
|
38
|
-
const propTypes = {
|
|
39
|
-
max: PropTypes.number.isRequired,
|
|
40
|
-
min: PropTypes.number.isRequired,
|
|
41
|
-
value: PropTypes.number.isRequired,
|
|
42
|
-
stepped: PropTypes.bool,
|
|
43
|
-
small: PropTypes.bool,
|
|
44
|
-
className: PropTypes.string,
|
|
45
|
-
onComplete: PropTypes.func,
|
|
46
|
-
onCompleteTransitionEnd: PropTypes.func,
|
|
47
|
-
getValueText: PropTypes.func,
|
|
48
|
-
tabIndex: PropTypes.number
|
|
49
|
-
};
|
|
50
|
-
const defaultProps = {
|
|
51
|
-
className: null,
|
|
52
|
-
stepped: false,
|
|
53
|
-
small: false,
|
|
54
|
-
onComplete: () => null,
|
|
55
|
-
onCompleteTransitionEnd: () => null,
|
|
56
|
-
getValueText: null
|
|
57
|
-
};
|
|
58
39
|
class BpkProgress extends Component {
|
|
40
|
+
static defaultProps = {
|
|
41
|
+
className: null,
|
|
42
|
+
stepped: false,
|
|
43
|
+
small: false,
|
|
44
|
+
onComplete: () => null,
|
|
45
|
+
onCompleteTransitionEnd: () => null,
|
|
46
|
+
getValueText: null
|
|
47
|
+
};
|
|
59
48
|
componentDidUpdate(previousProps) {
|
|
60
49
|
const {
|
|
61
50
|
max,
|
|
@@ -84,6 +73,8 @@ class BpkProgress extends Component {
|
|
|
84
73
|
getValueText,
|
|
85
74
|
max,
|
|
86
75
|
min,
|
|
76
|
+
onComplete,
|
|
77
|
+
onCompleteTransitionEnd,
|
|
87
78
|
small,
|
|
88
79
|
stepped,
|
|
89
80
|
value,
|
|
@@ -94,35 +85,23 @@ class BpkProgress extends Component {
|
|
|
94
85
|
const adjustedValue = clamp(value, min, max);
|
|
95
86
|
const percentage = 100 * (adjustedValue / (max - min));
|
|
96
87
|
const numberOfSteps = stepped ? max - min - 1 : 0;
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
width: `${percentage}%`
|
|
115
|
-
},
|
|
116
|
-
onTransitionEnd: this.handleCompleteTransitionEnd
|
|
117
|
-
}), renderSteps(numberOfSteps)]
|
|
118
|
-
})
|
|
119
|
-
);
|
|
88
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
89
|
+
className: classNames,
|
|
90
|
+
role: "progressbar",
|
|
91
|
+
"aria-valuetext": getValueText ? getValueText(value, min, max) : undefined,
|
|
92
|
+
"aria-valuenow": value,
|
|
93
|
+
"aria-valuemin": min,
|
|
94
|
+
"aria-valuemax": max,
|
|
95
|
+
tabIndex: 0,
|
|
96
|
+
...rest,
|
|
97
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
98
|
+
className: valueClassName,
|
|
99
|
+
style: {
|
|
100
|
+
width: `${percentage}%`
|
|
101
|
+
},
|
|
102
|
+
onTransitionEnd: this.handleCompleteTransitionEnd
|
|
103
|
+
}), renderSteps(numberOfSteps)]
|
|
104
|
+
});
|
|
120
105
|
}
|
|
121
106
|
}
|
|
122
|
-
BpkProgress.propTypes = {
|
|
123
|
-
...propTypes
|
|
124
|
-
};
|
|
125
|
-
BpkProgress.defaultProps = {
|
|
126
|
-
...defaultProps
|
|
127
|
-
};
|
|
128
107
|
export default BpkProgress;
|
|
@@ -14,4 +14,6 @@
|
|
|
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
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
export default ['progressBarFillColor'];
|
|
@@ -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
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
import BpkRadio from "./src/BpkRadio";
|
|
18
20
|
import themeAttributes from "./src/themeAttributes";
|
|
19
21
|
export default BpkRadio;
|
|
20
22
|
export { themeAttributes };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
type NativeInputProps = InputHTMLAttributes<HTMLInputElement>;
|
|
3
|
+
export type Props = Omit<NativeInputProps, 'type' | 'className'> & {
|
|
4
|
+
name: string;
|
|
5
|
+
label: ReactNode;
|
|
6
|
+
ariaLabel?: string | null;
|
|
7
|
+
className?: string | null;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
white?: boolean;
|
|
10
|
+
valid?: boolean | null;
|
|
11
|
+
};
|
|
12
|
+
declare const BpkRadio: ({ ariaLabel, className, disabled, label, name, valid, white, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export default BpkRadio;
|
|
@@ -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
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
18
19
|
import { cssModules } from "../../bpk-react-utils";
|
|
19
20
|
import STYLES from "./BpkRadio.module.css";
|
|
20
21
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -40,7 +41,7 @@ const BpkRadio = ({
|
|
|
40
41
|
className: getClassName('bpk-radio__input'),
|
|
41
42
|
name: name,
|
|
42
43
|
disabled: disabled,
|
|
43
|
-
"aria-label": ariaLabel || label,
|
|
44
|
+
"aria-label": ariaLabel || (typeof label === 'string' ? label : undefined),
|
|
44
45
|
"aria-invalid": isInvalid,
|
|
45
46
|
...rest
|
|
46
47
|
}), /*#__PURE__*/_jsx("div", {
|
|
@@ -51,13 +52,4 @@ const BpkRadio = ({
|
|
|
51
52
|
})]
|
|
52
53
|
});
|
|
53
54
|
};
|
|
54
|
-
BpkRadio.propTypes = {
|
|
55
|
-
name: PropTypes.string.isRequired,
|
|
56
|
-
label: PropTypes.node.isRequired,
|
|
57
|
-
ariaLabel: PropTypes.string,
|
|
58
|
-
disabled: PropTypes.bool,
|
|
59
|
-
white: PropTypes.bool,
|
|
60
|
-
className: PropTypes.string,
|
|
61
|
-
valid: PropTypes.bool
|
|
62
|
-
};
|
|
63
55
|
export default BpkRadio;
|
|
@@ -14,4 +14,6 @@
|
|
|
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
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
export default ['radioCheckedColor'];
|