@phillips/seldon 1.169.0 → 1.169.2
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/dist/patterns/FiltersInline/FilterButton.js +16 -15
- package/dist/patterns/FiltersInline/FiltersInline.d.ts +20 -1
- package/dist/patterns/FiltersInline/FiltersInline.js +20 -18
- package/dist/patterns/FiltersInline/FiltersInline.stories.d.ts +1 -1
- package/dist/patterns/FiltersInline/MainFilterDropdown.js +35 -34
- package/dist/patterns/FiltersInline/SubFilterDropdown.js +54 -52
- package/dist/patterns/FiltersInline/types.d.ts +4 -18
- package/dist/patterns/FiltersInline/types.js +3 -2
- package/dist/patterns/FiltersInline/utils.d.ts +6 -6
- package/dist/patterns/FiltersInline/utils.js +1 -1
- package/dist/patterns/SaleCard/SaleCard.d.ts +2 -2
- package/dist/patterns/SaleCard/SaleCard.js +13 -13
- package/dist/patterns/SaleCard/SaleCard.stories.d.ts +1 -0
- package/dist/scss/patterns/FiltersInline/_filterButton.scss +5 -1
- package/dist/scss/patterns/FiltersInline/_filterDropdownMenu.scss +4 -0
- package/dist/scss/patterns/FiltersInline/_filtersInline.scss +1 -1
- package/dist/scss/patterns/SaleCard/_saleCard.scss +1 -0
- package/package.json +1 -1
|
@@ -1,35 +1,36 @@
|
|
|
1
1
|
import { jsxs as p, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import u from "../../node_modules/classnames/index.js";
|
|
3
3
|
import b from "react";
|
|
4
|
-
import
|
|
5
|
-
import { ButtonVariants as
|
|
4
|
+
import $ from "../../components/Button/Button.js";
|
|
5
|
+
import { ButtonVariants as h } from "../../components/Button/types.js";
|
|
6
6
|
import x from "../../components/Icon/Icon.js";
|
|
7
7
|
import { TextVariants as v } from "../../components/Text/types.js";
|
|
8
|
-
import
|
|
8
|
+
import F from "../../components/Text/Text.js";
|
|
9
9
|
import { px as t } from "../../utils/index.js";
|
|
10
|
-
import { getIcon as
|
|
11
|
-
const
|
|
12
|
-
({ className: m, label: n, onClick: l, isSelected: a, type: r = "ChevronDown", count: s, id:
|
|
13
|
-
|
|
10
|
+
import { getIcon as w } from "./utils.js";
|
|
11
|
+
const B = b.forwardRef(
|
|
12
|
+
({ className: m, label: n, onClick: l, isSelected: a, type: r = "ChevronDown", count: s, id: i, ariaLabel: f, isMobile: c, totalCount: o }, d) => /* @__PURE__ */ p(
|
|
13
|
+
$,
|
|
14
14
|
{
|
|
15
15
|
ref: d,
|
|
16
16
|
className: u(`${t}-filter-button`, m, {
|
|
17
|
-
[`${t}-filter-button--selected`]: a || s > 0 || r === "Filter" &&
|
|
17
|
+
[`${t}-filter-button--selected`]: a || s > 0 || r === "Filter" && o > 0,
|
|
18
|
+
[`${t}-filter-button--filter`]: r === "Filter"
|
|
18
19
|
}),
|
|
19
20
|
"aria-label": f,
|
|
20
|
-
variant:
|
|
21
|
-
"data-testid": `${
|
|
21
|
+
variant: h.secondary,
|
|
22
|
+
"data-testid": `${i}-filter-button`,
|
|
22
23
|
"data-viewport": c ? "mobile" : "desktop",
|
|
23
24
|
onClick: l,
|
|
24
25
|
children: [
|
|
25
|
-
/* @__PURE__ */ e(
|
|
26
|
-
/* @__PURE__ */ e(x, { icon:
|
|
27
|
-
|
|
26
|
+
/* @__PURE__ */ e(F, { variant: v.string2, "data-testid": `${i}-filter-label`, children: n }),
|
|
27
|
+
/* @__PURE__ */ e(x, { icon: w(r, a), height: 8, width: 8, className: `${t}__icon` }),
|
|
28
|
+
o > 0 && r === "Filter" && /* @__PURE__ */ e("div", { className: `${t}-filter-button--count`, "data-testid": `${i}-filter-count`, children: o })
|
|
28
29
|
]
|
|
29
30
|
}
|
|
30
31
|
)
|
|
31
32
|
);
|
|
32
|
-
|
|
33
|
+
B.displayName = "FilterButton";
|
|
33
34
|
export {
|
|
34
|
-
|
|
35
|
+
B as FilterButton
|
|
35
36
|
};
|
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { BaseFilterProps, DropdownMenuTranslation, FilterButtonType } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the FiltersInline component (main component).
|
|
5
|
+
*/
|
|
6
|
+
export interface FiltersInlineProps extends BaseFilterProps {
|
|
7
|
+
/** Unique id for component testing */
|
|
8
|
+
id: string;
|
|
9
|
+
/** Handler for filter button click */
|
|
10
|
+
handleFilterClick?: () => void;
|
|
11
|
+
/** List of states for the filter buttons */
|
|
12
|
+
filtersListState?: boolean[];
|
|
13
|
+
/** Setter for the filter button states */
|
|
14
|
+
setFiltersLabelListState?: (state: boolean[]) => void;
|
|
15
|
+
/** Main filter button type (e.g., 'Filter', 'Sort') */
|
|
16
|
+
mainFilterLabel: FilterButtonType;
|
|
17
|
+
/** Object containing translated strings for dropdown menu actions.*/
|
|
18
|
+
dropdownMenuTranslation?: DropdownMenuTranslation;
|
|
19
|
+
/** Whether to hide the desktop sort button */
|
|
20
|
+
hideDesktopSortButton?: boolean;
|
|
21
|
+
}
|
|
3
22
|
/**
|
|
4
23
|
* ## Overview
|
|
5
24
|
*
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { getCommonProps as
|
|
5
|
-
import { MainFilterDropdown as
|
|
6
|
-
import { SubFilterDropdown as
|
|
7
|
-
const
|
|
1
|
+
import { jsxs as N, jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import h from "../../node_modules/classnames/index.js";
|
|
3
|
+
import x from "react";
|
|
4
|
+
import { getCommonProps as T } from "../../utils/index.js";
|
|
5
|
+
import { MainFilterDropdown as j } from "./MainFilterDropdown.js";
|
|
6
|
+
import { SubFilterDropdown as w } from "./SubFilterDropdown.js";
|
|
7
|
+
const y = x.forwardRef(
|
|
8
8
|
({
|
|
9
9
|
id: o,
|
|
10
10
|
className: c,
|
|
@@ -17,12 +17,13 @@ const w = h.forwardRef(
|
|
|
17
17
|
resultsCount: b,
|
|
18
18
|
mainFilterLabel: m,
|
|
19
19
|
dropdownMenuTranslation: p,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
hideDesktopSortButton: d = !0,
|
|
21
|
+
...f
|
|
22
|
+
}, $) => {
|
|
23
|
+
const { className: i, ...B } = T({ id: o, ...f }, "FiltersInline");
|
|
24
|
+
return /* @__PURE__ */ N("div", { ref: $, className: h(i, c), ...B, id: o, children: [
|
|
24
25
|
/* @__PURE__ */ u(
|
|
25
|
-
|
|
26
|
+
j,
|
|
26
27
|
{
|
|
27
28
|
id: `${o}-${m}-button`,
|
|
28
29
|
filterButtonLabel: m,
|
|
@@ -37,29 +38,30 @@ const w = h.forwardRef(
|
|
|
37
38
|
},
|
|
38
39
|
`${o}-${m}-button`
|
|
39
40
|
),
|
|
40
|
-
a?.map((t,
|
|
41
|
-
|
|
41
|
+
a?.map((t, I) => /* @__PURE__ */ u(
|
|
42
|
+
w,
|
|
42
43
|
{
|
|
43
44
|
id: `${o}-${t.label}-button`,
|
|
44
45
|
filterButtonLabel: t.label,
|
|
45
46
|
buttonType: t.buttonType,
|
|
46
47
|
handleClick: r,
|
|
47
48
|
filtersListState: n,
|
|
48
|
-
filterId:
|
|
49
|
+
filterId: I + 1,
|
|
49
50
|
filters: a,
|
|
50
51
|
onSelectFilter: e,
|
|
51
52
|
onApplyFilter: l,
|
|
52
53
|
onClickClear: s,
|
|
53
54
|
resultsCount: b,
|
|
54
55
|
filterButtonLabelTranslated: t.filterButtonLabelTranslated,
|
|
55
|
-
dropdownMenuTranslation: p
|
|
56
|
+
dropdownMenuTranslation: p,
|
|
57
|
+
hideDesktopSortButton: d
|
|
56
58
|
},
|
|
57
59
|
`${o}-${t.label}-button`
|
|
58
60
|
))
|
|
59
61
|
] });
|
|
60
62
|
}
|
|
61
63
|
);
|
|
62
|
-
|
|
64
|
+
y.displayName = "FiltersInline";
|
|
63
65
|
export {
|
|
64
|
-
|
|
66
|
+
y as default
|
|
65
67
|
};
|
|
@@ -4,7 +4,7 @@ import { FilterDropdownMenuProps, FilterType } from './types';
|
|
|
4
4
|
*/
|
|
5
5
|
declare const meta: {
|
|
6
6
|
title: string;
|
|
7
|
-
component: import('react').ForwardRefExoticComponent<import('./
|
|
7
|
+
component: import('react').ForwardRefExoticComponent<import('./FiltersInline').FiltersInlineProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
8
8
|
};
|
|
9
9
|
export default meta;
|
|
10
10
|
export declare const Playground: {
|
|
@@ -1,66 +1,67 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as l, Fragment as A, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import N from "../../node_modules/classnames/index.js";
|
|
3
3
|
import x from "react";
|
|
4
|
-
import
|
|
4
|
+
import c from "../../components/Button/Button.js";
|
|
5
5
|
import { ButtonVariants as g } from "../../components/Button/types.js";
|
|
6
6
|
import k from "../../components/Drawer/Drawer.js";
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
7
|
+
import B from "../../components/Filter/Filter.js";
|
|
8
|
+
import D from "../../components/Filter/FilterHeader.js";
|
|
9
|
+
import M from "../../components/Filter/FilterInput.js";
|
|
10
10
|
import { px as t } from "../../utils/index.js";
|
|
11
|
-
import
|
|
11
|
+
import j from "../FilterMenu/FilterMenu.js";
|
|
12
12
|
import { FilterButton as H } from "./FilterButton.js";
|
|
13
|
+
import { FilterButtonIconType as I } from "./types.js";
|
|
13
14
|
import { countActiveFilters as O, getFilterButtonClickHandler as R, resetAllFilters as S } from "./utils.js";
|
|
14
|
-
const
|
|
15
|
+
const T = x.forwardRef(
|
|
15
16
|
({
|
|
16
17
|
className: f,
|
|
17
|
-
filterButtonLabel:
|
|
18
|
-
handleClick:
|
|
19
|
-
filtersListState:
|
|
18
|
+
filterButtonLabel: n,
|
|
19
|
+
handleClick: a,
|
|
20
|
+
filtersListState: i,
|
|
20
21
|
filters: m,
|
|
21
22
|
onSelectFilter: u,
|
|
22
|
-
onApplyFilter:
|
|
23
|
-
onClickClear:
|
|
23
|
+
onApplyFilter: b,
|
|
24
|
+
onClickClear: w,
|
|
24
25
|
resultsCount: F,
|
|
25
26
|
dropdownMenuTranslation: d,
|
|
26
27
|
ariaLabels: s = {},
|
|
27
28
|
id: h
|
|
28
29
|
}, _) => {
|
|
29
|
-
const
|
|
30
|
-
return /* @__PURE__ */
|
|
30
|
+
const p = i?.[0] ?? !1, { totalCount: y, filterCount: C } = O(m, n);
|
|
31
|
+
return /* @__PURE__ */ l(A, { children: [
|
|
31
32
|
/* @__PURE__ */ o(
|
|
32
33
|
H,
|
|
33
34
|
{
|
|
34
35
|
ref: _,
|
|
35
36
|
className: f,
|
|
36
|
-
isSelected:
|
|
37
|
-
count:
|
|
38
|
-
label:
|
|
39
|
-
totalCount:
|
|
37
|
+
isSelected: p,
|
|
38
|
+
count: C,
|
|
39
|
+
label: n,
|
|
40
|
+
totalCount: y,
|
|
40
41
|
id: h,
|
|
41
|
-
ariaLabel: s.button || `${
|
|
42
|
-
onClick: R(
|
|
42
|
+
ariaLabel: s.button || `${n} button`,
|
|
43
|
+
onClick: R(i, a, 0),
|
|
43
44
|
isMobile: !1,
|
|
44
|
-
type:
|
|
45
|
+
type: I.Filter
|
|
45
46
|
}
|
|
46
47
|
),
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
+
/* @__PURE__ */ l(
|
|
48
49
|
k,
|
|
49
50
|
{
|
|
50
|
-
isOpen:
|
|
51
|
+
isOpen: p,
|
|
51
52
|
drawerOpenSide: "left",
|
|
52
|
-
onClose: () => S(
|
|
53
|
+
onClose: () => S(i, a),
|
|
53
54
|
className: `${t}-filter-drawer`,
|
|
54
55
|
"aria-label": s.drawer || "Filter drawer",
|
|
55
56
|
children: [
|
|
56
|
-
/* @__PURE__ */ o(
|
|
57
|
-
/* @__PURE__ */ o(
|
|
57
|
+
/* @__PURE__ */ o(j, { className: `${t}-filter-drawer-menu`, children: m?.map((r) => /* @__PURE__ */ l(B, { name: r.label, children: [
|
|
58
|
+
/* @__PURE__ */ o(D, { heading: r.label }),
|
|
58
59
|
Array.from(r.filterDimensions).map((e) => /* @__PURE__ */ o(
|
|
59
|
-
|
|
60
|
+
M,
|
|
60
61
|
{
|
|
61
62
|
id: e.label,
|
|
62
63
|
labelText: e.label,
|
|
63
|
-
onChange: (
|
|
64
|
+
onChange: ($) => u?.($, r.buttonType),
|
|
64
65
|
type: r.type,
|
|
65
66
|
disabled: e?.disabled,
|
|
66
67
|
name: e.label,
|
|
@@ -69,7 +70,7 @@ const I = x.forwardRef(
|
|
|
69
70
|
e.label
|
|
70
71
|
))
|
|
71
72
|
] }, r.id)) }),
|
|
72
|
-
/* @__PURE__ */
|
|
73
|
+
/* @__PURE__ */ l(
|
|
73
74
|
"div",
|
|
74
75
|
{
|
|
75
76
|
className: N(
|
|
@@ -78,15 +79,15 @@ const I = x.forwardRef(
|
|
|
78
79
|
),
|
|
79
80
|
children: [
|
|
80
81
|
/* @__PURE__ */ o(
|
|
81
|
-
|
|
82
|
+
c,
|
|
82
83
|
{
|
|
83
84
|
className: `${t}-filter-dropdown-menu__button`,
|
|
84
85
|
variant: g.secondary,
|
|
85
|
-
onClick: () =>
|
|
86
|
+
onClick: () => w?.("all"),
|
|
86
87
|
children: d?.clearAll || "Clear all"
|
|
87
88
|
}
|
|
88
89
|
),
|
|
89
|
-
/* @__PURE__ */ o(
|
|
90
|
+
/* @__PURE__ */ o(c, { className: `${t}-filter-dropdown-menu__button`, onClick: () => b?.(!1), children: d?.showAuctions || `Show ${F} Auctions` })
|
|
90
91
|
]
|
|
91
92
|
}
|
|
92
93
|
)
|
|
@@ -96,7 +97,7 @@ const I = x.forwardRef(
|
|
|
96
97
|
] });
|
|
97
98
|
}
|
|
98
99
|
);
|
|
99
|
-
|
|
100
|
+
T.displayName = "MainFilterDropdown";
|
|
100
101
|
export {
|
|
101
|
-
|
|
102
|
+
T as MainFilterDropdown
|
|
102
103
|
};
|
|
@@ -1,72 +1,74 @@
|
|
|
1
|
-
import { jsxs as g, Fragment as
|
|
2
|
-
import { Root as
|
|
1
|
+
import { jsxs as g, Fragment as S, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { Root as f, Trigger as j, Portal as v, Content as P } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
|
|
3
3
|
import _ from "react";
|
|
4
|
-
import
|
|
4
|
+
import q from "../../components/Drawer/Drawer.js";
|
|
5
5
|
import { SSRMediaQuery as D } from "../../providers/SeldonProvider/utils.js";
|
|
6
|
-
import { px as
|
|
6
|
+
import { px as E } from "../../utils/index.js";
|
|
7
7
|
import { FilterButton as O } from "./FilterButton.js";
|
|
8
|
-
import { FilterDropdownMenuDesktop as
|
|
9
|
-
import { FilterDropdownMenuMobile as
|
|
10
|
-
import {
|
|
11
|
-
|
|
8
|
+
import { FilterDropdownMenuDesktop as H } from "./FilterDropdownMenuDesktop.js";
|
|
9
|
+
import { FilterDropdownMenuMobile as N } from "./FilterDropdownMenuMobile.js";
|
|
10
|
+
import { FilterButtonType as Q } from "./types.js";
|
|
11
|
+
import { countActiveFilters as k, getFilterButtonClickHandler as d, getFilterButtonLabel as z } from "./utils.js";
|
|
12
|
+
const A = _.forwardRef(
|
|
12
13
|
({
|
|
13
14
|
filterId: e = 0,
|
|
14
|
-
className:
|
|
15
|
+
className: w,
|
|
15
16
|
filterButtonLabel: r,
|
|
16
|
-
buttonType:
|
|
17
|
+
buttonType: n,
|
|
17
18
|
handleClick: m,
|
|
18
19
|
filtersListState: a,
|
|
19
|
-
filters:
|
|
20
|
-
onSelectFilter:
|
|
20
|
+
filters: l,
|
|
21
|
+
onSelectFilter: b,
|
|
21
22
|
onApplyFilter: h,
|
|
22
23
|
onClickClear: F,
|
|
23
24
|
resultsCount: $,
|
|
24
|
-
filterButtonLabelTranslated:
|
|
25
|
+
filterButtonLabelTranslated: c,
|
|
25
26
|
dropdownMenuTranslation: M,
|
|
26
|
-
ariaLabels:
|
|
27
|
+
ariaLabels: i = {},
|
|
28
|
+
hideDesktopSortButton: R,
|
|
27
29
|
id: p
|
|
28
30
|
}, x) => {
|
|
29
|
-
const
|
|
30
|
-
return /* @__PURE__ */ g(
|
|
31
|
+
const t = a?.[e] ?? !1, { totalCount: C, filterCount: s } = k(l, n), u = z(r, s, c || null);
|
|
32
|
+
return R && n === Q.Sort ? null : /* @__PURE__ */ g(S, { children: [
|
|
31
33
|
/* @__PURE__ */ g(D.Media, { lessThan: "md", children: [
|
|
32
34
|
/* @__PURE__ */ o(
|
|
33
35
|
O,
|
|
34
36
|
{
|
|
35
37
|
ref: x,
|
|
36
|
-
className:
|
|
37
|
-
isSelected:
|
|
38
|
+
className: w,
|
|
39
|
+
isSelected: t,
|
|
38
40
|
count: s,
|
|
39
|
-
label:
|
|
41
|
+
label: u,
|
|
40
42
|
id: p,
|
|
41
43
|
totalCount: C,
|
|
42
|
-
ariaLabel:
|
|
43
|
-
onClick:
|
|
44
|
+
ariaLabel: i.button || `${r} button`,
|
|
45
|
+
onClick: d(a, m, e),
|
|
44
46
|
isMobile: !0,
|
|
45
|
-
type:
|
|
47
|
+
type: n
|
|
46
48
|
}
|
|
47
49
|
),
|
|
48
50
|
/* @__PURE__ */ o(
|
|
49
|
-
|
|
51
|
+
q,
|
|
50
52
|
{
|
|
51
53
|
drawerOpenSide: "bottom",
|
|
52
|
-
isOpen:
|
|
53
|
-
onClose:
|
|
54
|
-
"aria-label":
|
|
55
|
-
className: `${
|
|
56
|
-
bottomContentLabel: `${
|
|
54
|
+
isOpen: t,
|
|
55
|
+
onClose: d(a, m, e),
|
|
56
|
+
"aria-label": i.drawer || `${r} drawer`,
|
|
57
|
+
className: `${E}-filter-drawer-mobile`,
|
|
58
|
+
bottomContentLabel: `${u} Filter`,
|
|
57
59
|
children: /* @__PURE__ */ o(
|
|
58
|
-
|
|
60
|
+
N,
|
|
59
61
|
{
|
|
60
|
-
buttonType:
|
|
61
|
-
filters:
|
|
62
|
+
buttonType: n,
|
|
63
|
+
filters: l,
|
|
62
64
|
filterIndex: e,
|
|
63
|
-
onSelectFilter:
|
|
65
|
+
onSelectFilter: b,
|
|
64
66
|
onApplyFilter: h,
|
|
65
67
|
onClickClear: F,
|
|
66
68
|
resultsCount: $,
|
|
67
|
-
ariaLabels:
|
|
69
|
+
ariaLabels: i?.ariaLabel,
|
|
68
70
|
filterButtonLabel: r,
|
|
69
|
-
filterButtonLabelTranslated:
|
|
71
|
+
filterButtonLabelTranslated: c,
|
|
70
72
|
dropdownMenuTranslation: M
|
|
71
73
|
}
|
|
72
74
|
)
|
|
@@ -74,25 +76,25 @@ const k = _.forwardRef(
|
|
|
74
76
|
)
|
|
75
77
|
] }),
|
|
76
78
|
/* @__PURE__ */ o(D.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ g(
|
|
77
|
-
|
|
79
|
+
f,
|
|
78
80
|
{
|
|
79
|
-
open:
|
|
80
|
-
onOpenChange:
|
|
81
|
+
open: t,
|
|
82
|
+
onOpenChange: d(a, m, e),
|
|
81
83
|
children: [
|
|
82
84
|
/* @__PURE__ */ o(j, { asChild: !0, children: /* @__PURE__ */ o(
|
|
83
85
|
O,
|
|
84
86
|
{
|
|
85
87
|
ref: x,
|
|
86
|
-
className:
|
|
87
|
-
isSelected:
|
|
88
|
+
className: w,
|
|
89
|
+
isSelected: t,
|
|
88
90
|
count: s,
|
|
89
|
-
label:
|
|
91
|
+
label: u,
|
|
90
92
|
totalCount: C,
|
|
91
93
|
id: p,
|
|
92
|
-
ariaLabel:
|
|
93
|
-
onClick:
|
|
94
|
+
ariaLabel: i.ariaLabel || `${r} button`,
|
|
95
|
+
onClick: d(a, m, e),
|
|
94
96
|
isMobile: !1,
|
|
95
|
-
type:
|
|
97
|
+
type: n
|
|
96
98
|
}
|
|
97
99
|
) }),
|
|
98
100
|
/* @__PURE__ */ o(v, { children: /* @__PURE__ */ o(
|
|
@@ -103,20 +105,20 @@ const k = _.forwardRef(
|
|
|
103
105
|
sideOffset: 5,
|
|
104
106
|
align: "start",
|
|
105
107
|
alignOffset: 5,
|
|
106
|
-
"aria-label":
|
|
108
|
+
"aria-label": i.ariaLabel || `${r} dropdown`,
|
|
107
109
|
children: /* @__PURE__ */ o(
|
|
108
|
-
|
|
110
|
+
H,
|
|
109
111
|
{
|
|
110
|
-
buttonType:
|
|
111
|
-
filters:
|
|
112
|
+
buttonType: n,
|
|
113
|
+
filters: l,
|
|
112
114
|
filterIndex: e,
|
|
113
|
-
onSelectFilter:
|
|
115
|
+
onSelectFilter: b,
|
|
114
116
|
onApplyFilter: h,
|
|
115
117
|
onClickClear: F,
|
|
116
118
|
resultsCount: $,
|
|
117
|
-
ariaLabels:
|
|
119
|
+
ariaLabels: i?.ariaLabel,
|
|
118
120
|
filterButtonLabel: r,
|
|
119
|
-
filterButtonLabelTranslated:
|
|
121
|
+
filterButtonLabelTranslated: c,
|
|
120
122
|
dropdownMenuTranslation: M
|
|
121
123
|
}
|
|
122
124
|
)
|
|
@@ -129,7 +131,7 @@ const k = _.forwardRef(
|
|
|
129
131
|
] });
|
|
130
132
|
}
|
|
131
133
|
);
|
|
132
|
-
|
|
134
|
+
A.displayName = "SubFilterDropdown";
|
|
133
135
|
export {
|
|
134
|
-
|
|
136
|
+
A as SubFilterDropdown
|
|
135
137
|
};
|
|
@@ -7,8 +7,9 @@ export declare enum FilterButtonType {
|
|
|
7
7
|
Sort = "Sort",// Sort filter
|
|
8
8
|
Sale = "Sale",// Sale filter
|
|
9
9
|
Departments = "Departments",// Departments filter
|
|
10
|
+
Location = "Location",// Location filter
|
|
10
11
|
Month = "Month",// Month filter
|
|
11
|
-
|
|
12
|
+
Empty = ""
|
|
12
13
|
}
|
|
13
14
|
/**
|
|
14
15
|
* Enum for the icon types used in filter buttons.
|
|
@@ -105,23 +106,6 @@ export interface FilterButtonAriaLabels {
|
|
|
105
106
|
/** Aria-label for filter button */
|
|
106
107
|
ariaLabel?: string;
|
|
107
108
|
}
|
|
108
|
-
/**
|
|
109
|
-
* Props for the FiltersInline component (main component).
|
|
110
|
-
*/
|
|
111
|
-
export interface FiltersInlineProps extends BaseFilterProps {
|
|
112
|
-
/** Unique id for component testing */
|
|
113
|
-
id: string;
|
|
114
|
-
/** Handler for filter button click */
|
|
115
|
-
handleFilterClick?: () => void;
|
|
116
|
-
/** List of states for the filter buttons */
|
|
117
|
-
filtersListState?: boolean[];
|
|
118
|
-
/** Setter for the filter button states */
|
|
119
|
-
setFiltersLabelListState?: (state: boolean[]) => void;
|
|
120
|
-
/** Main filter button type (e.g., 'Filter', 'Sort') */
|
|
121
|
-
mainFilterLabel: FilterButtonType;
|
|
122
|
-
/** Object containing translated strings for dropdown menu actions.*/
|
|
123
|
-
dropdownMenuTranslation?: DropdownMenuTranslation;
|
|
124
|
-
}
|
|
125
109
|
/**
|
|
126
110
|
* Props for an individual filter button.
|
|
127
111
|
*/
|
|
@@ -146,6 +130,8 @@ export interface FilterDropdownProps extends BaseFilterProps {
|
|
|
146
130
|
filterButtonLabelTranslated?: string;
|
|
147
131
|
/** Object containing translated strings for dropdown menu actions.*/
|
|
148
132
|
dropdownMenuTranslation?: DropdownMenuTranslation;
|
|
133
|
+
/** Whether to hide the desktop sort button */
|
|
134
|
+
hideDesktopSortButton?: boolean;
|
|
149
135
|
}
|
|
150
136
|
/**
|
|
151
137
|
* Object containing translated strings for dropdown menu actions.
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
var
|
|
1
|
+
var a = /* @__PURE__ */ ((r) => (r.Filter = "Filter", r.Sort = "Sort", r.Sale = "Sale", r.Departments = "Departments", r.Location = "Location", r.Month = "Month", r.Empty = "", r))(a || {}), h = /* @__PURE__ */ ((r) => (r.Filter = "Filter", r.Sort = "Sort", r.ChevronUp = "ChevronUp", r.ChevronDown = "ChevronDown", r))(h || {});
|
|
2
2
|
export {
|
|
3
|
-
|
|
3
|
+
h as FilterButtonIconType,
|
|
4
|
+
a as FilterButtonType
|
|
4
5
|
};
|
|
@@ -17,6 +17,12 @@ export declare const FiltersInlineFilters: {
|
|
|
17
17
|
value: string;
|
|
18
18
|
active: boolean;
|
|
19
19
|
}[];
|
|
20
|
+
Location: {
|
|
21
|
+
id: string;
|
|
22
|
+
label: string;
|
|
23
|
+
value: string;
|
|
24
|
+
active: boolean;
|
|
25
|
+
}[];
|
|
20
26
|
Month: ({
|
|
21
27
|
id: string;
|
|
22
28
|
label: string;
|
|
@@ -30,12 +36,6 @@ export declare const FiltersInlineFilters: {
|
|
|
30
36
|
active: boolean;
|
|
31
37
|
disabled: boolean;
|
|
32
38
|
})[];
|
|
33
|
-
Location: {
|
|
34
|
-
id: string;
|
|
35
|
-
label: string;
|
|
36
|
-
value: string;
|
|
37
|
-
active: boolean;
|
|
38
|
-
}[];
|
|
39
39
|
};
|
|
40
40
|
export declare const SalesMockData: {
|
|
41
41
|
auctionType: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FilterButtonType as e } from "./types.js";
|
|
2
|
-
e.Filter, e.Sort, e.Sale, e.Departments, e.
|
|
2
|
+
e.Filter, e.Sort, e.Sale, e.Departments, e.Location, e.Month;
|
|
3
3
|
const f = (n, t) => {
|
|
4
4
|
if (!n) return { totalCount: 0, filterCount: 0 };
|
|
5
5
|
const r = n.filter((o) => o.id !== "Sort").reduce(
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentProps } from 'react';
|
|
2
|
-
import { SaleCardVariants } from './types';
|
|
3
2
|
import { SaleCardActions } from './SaleCardActions';
|
|
3
|
+
import { SaleCardVariants } from './types';
|
|
4
4
|
/** * Props for the SaleCard component. */
|
|
5
5
|
export interface SaleCardProps extends ComponentProps<'div'> {
|
|
6
6
|
/** * The source URL of the image to be displayed. */
|
|
@@ -20,7 +20,7 @@ export interface SaleCardProps extends ComponentProps<'div'> {
|
|
|
20
20
|
/** * The text to be displayed for the modal link. */
|
|
21
21
|
modalButtonText?: string;
|
|
22
22
|
/** * The callback function to be executed when the modal link is clicked. */
|
|
23
|
-
modalButtonOnClick?: () => void;
|
|
23
|
+
modalButtonOnClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
24
24
|
/** * The variant of the SaleCard component.
|
|
25
25
|
* - 'default': The default style of the SaleCard component.
|
|
26
26
|
* - 'relatedSaleTile': A variant with a smaller image size and horizontal layout on mobile devices.
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsxs as m, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import y from "../../
|
|
2
|
+
import E from "../../node_modules/classnames/index.js";
|
|
3
|
+
import { forwardRef as b } from "react";
|
|
4
|
+
import y from "../../components/Button/Button.js";
|
|
5
|
+
import { ButtonVariants as A } from "../../components/Button/types.js";
|
|
6
|
+
import L from "../../components/SeldonImage/SeldonImage.js";
|
|
5
7
|
import { TextVariants as e } from "../../components/Text/types.js";
|
|
6
8
|
import i from "../../components/Text/Text.js";
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { ButtonVariants as T } from "../../components/Button/types.js";
|
|
10
|
-
import { SSRMediaQuery as x } from "../../providers/SeldonProvider/utils.js";
|
|
9
|
+
import { SSRMediaQuery as T } from "../../providers/SeldonProvider/utils.js";
|
|
10
|
+
import { getCommonProps as x } from "../../utils/index.js";
|
|
11
11
|
import { SaleCardVariants as d } from "./types.js";
|
|
12
|
-
const I =
|
|
12
|
+
const I = b(
|
|
13
13
|
({
|
|
14
14
|
className: p,
|
|
15
15
|
imageSrc: o,
|
|
@@ -25,11 +25,11 @@ const I = E(
|
|
|
25
25
|
children: g,
|
|
26
26
|
...c
|
|
27
27
|
}, u) => {
|
|
28
|
-
const { className: a, ...v } =
|
|
28
|
+
const { className: a, ...v } = x(c, "SaleCard"), S = E(a, p, {
|
|
29
29
|
[`${a}--${s}`]: s
|
|
30
30
|
}), C = { ...v, ...c };
|
|
31
31
|
return /* @__PURE__ */ m("article", { ...C, className: S, ref: u, children: [
|
|
32
|
-
o ? /* @__PURE__ */ r(
|
|
32
|
+
o ? /* @__PURE__ */ r(L, { src: o, alt: _, className: `${a}__image` }) : null,
|
|
33
33
|
/* @__PURE__ */ m("div", { className: `${a}__details`, children: [
|
|
34
34
|
/* @__PURE__ */ r(i, { variant: e.badge, className: `${a}__auction-type`, children: f }),
|
|
35
35
|
/* @__PURE__ */ r(i, { variant: e.title3, children: h }),
|
|
@@ -38,17 +38,17 @@ const I = E(
|
|
|
38
38
|
/* @__PURE__ */ r(i, { variant: e.string2, children: $ }),
|
|
39
39
|
/* @__PURE__ */ r(i, { variant: e.string2, children: N }),
|
|
40
40
|
n && l && /* @__PURE__ */ r("div", { className: `${a}__modal-link`, children: /* @__PURE__ */ r(
|
|
41
|
-
|
|
41
|
+
y,
|
|
42
42
|
{
|
|
43
43
|
onClick: l,
|
|
44
|
-
variant:
|
|
44
|
+
variant: A.tertiary,
|
|
45
45
|
className: `${a}__modal-link-button`,
|
|
46
46
|
children: n
|
|
47
47
|
}
|
|
48
48
|
) })
|
|
49
49
|
] })
|
|
50
50
|
] }),
|
|
51
|
-
s !== d.RELATED_SALE_TILE && /* @__PURE__ */ r(
|
|
51
|
+
s !== d.RELATED_SALE_TILE && /* @__PURE__ */ r(T.Media, { greaterThanOrEqual: "md", children: g })
|
|
52
52
|
] });
|
|
53
53
|
}
|
|
54
54
|
);
|
|
@@ -21,3 +21,4 @@ export declare const SaleCardWithPrimaryCTA: () => import("react/jsx-runtime").J
|
|
|
21
21
|
export declare const SaleCardWithSecondaryCTA: () => import("react/jsx-runtime").JSX.Element;
|
|
22
22
|
export declare const SaleCardWithDownloadLink: () => import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
export declare const SaleCardNoCTA: () => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export declare const SaleCardWithLink: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,12 +3,16 @@
|
|
|
3
3
|
.#{$px}-filter-button {
|
|
4
4
|
border: 1px solid $light-gray;
|
|
5
5
|
gap: 4px;
|
|
6
|
-
padding: $spacing-xsm $spacing-
|
|
6
|
+
padding: $spacing-xsm $spacing-xsm;
|
|
7
7
|
|
|
8
8
|
&--selected {
|
|
9
9
|
border: 1px solid $pure-black;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
+
&--filter {
|
|
13
|
+
border-radius: 8px;
|
|
14
|
+
}
|
|
15
|
+
|
|
12
16
|
&--count {
|
|
13
17
|
background: $pure-black;
|
|
14
18
|
border: 2px solid $white;
|