@skyscanner/backpack-web 42.18.0 → 42.19.0-dev-v26030392642.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/src/BpkCheckboxV2/BpkCheckboxV2.module.css +1 -1
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2HiddenInput.js +4 -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-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/package.json +1 -1
|
@@ -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{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-
|
|
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)}
|
|
@@ -17,7 +17,10 @@
|
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
import { Checkbox } from '@ark-ui/react';
|
|
20
|
+
import { cssModules } from "../../../bpk-react-utils";
|
|
21
|
+
import STYLES from "./BpkCheckboxV2.module.css";
|
|
20
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
26
|
// Accepts aria-* attributes so consumers can override the screen-reader
|
|
@@ -28,6 +31,7 @@ const BpkCheckboxV2HiddenInput = ({
|
|
|
28
31
|
'aria-label': ariaLabel,
|
|
29
32
|
'aria-labelledby': ariaLabelledby
|
|
30
33
|
} = {}) => /*#__PURE__*/_jsx(Checkbox.HiddenInput, {
|
|
34
|
+
className: getClassName('bpk-checkbox-v2__hidden-input'),
|
|
31
35
|
"aria-describedby": ariaDescribedby,
|
|
32
36
|
"aria-label": ariaLabel,
|
|
33
37
|
"aria-labelledby": ariaLabelledby
|
|
@@ -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}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars[data-state=checked]{box-shadow:inset 0 0 0 4px #05203c}}.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){box-shadow:inset 0 0 0 2px #05203c}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){box-shadow:inset 0 0 0 4px #05203c}}.bpk-checkbox-card-root--cars[data-disabled]:not([data-loading]){box-shadow:none}.bpk-checkbox-card-root--cars:has(:focus-visible){outline:none;outline-offset:0;box-shadow:inset 0 0 0 2px #0062e3}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars:has(:focus-visible){box-shadow:inset 0 0 0 4px #0062e3}}.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
|
})
|
|
@@ -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'];
|