@skyscanner/backpack-web 42.19.0 → 42.19.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-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-icon/scripts/generate-figma-connect.js +2 -2
- package/package.json +1 -1
|
@@ -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{--bpk-checkbox-card-default-
|
|
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 var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-border-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(255, 255, 255);--bpk-checkbox-card-checked-text-color: rgb(22, 22, 22);--bpk-checkbox-card-checked-border-color: rgb(5, 32, 60);--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 var(--bpk-checkbox-card-hover-border-color, rgb(5, 32, 60))}: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 var(--bpk-checkbox-card-hover-border-color, rgb(5, 32, 60))}.bpk-checkbox-card-root--cars[data-state=checked]{box-shadow:inset 0 0 0 2px var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars[data-state=checked]{border:.0125rem solid var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}}.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){transition:none;box-shadow:inset 0 0 0 2px var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){border:.0125rem solid var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}}.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}@media(hover: hover)and (pointer: fine){.bpk-checkbox-card-root--cars:has(:focus-visible){box-shadow:inset 0 0 0 2px #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
|
})
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
* a single .figma.tsx file that maps every icon to its Figma component.
|
|
27
27
|
*
|
|
28
28
|
* Usage:
|
|
29
|
-
* FIGMA_ACCESS_TOKEN=<token> node packages/bpk-component-icon/scripts/generate-figma-connect.js
|
|
29
|
+
* FIGMA_ACCESS_TOKEN=<token> node packages/backpack-web/src/bpk-component-icon/scripts/generate-figma-connect.js
|
|
30
30
|
*
|
|
31
31
|
* The generated file is written to:
|
|
32
|
-
* packages/bpk-component-icon/BpkIcon.figma.tsx
|
|
32
|
+
* packages/backpack-web/src/bpk-component-icon/BpkIcon.figma.tsx
|
|
33
33
|
*/
|
|
34
34
|
const fs = require('fs');
|
|
35
35
|
const path = require('path');
|