@phillips/seldon 1.169.3 → 1.170.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/patterns/FavoritesCollectionTile/FavoritesCollectionTile.d.ts +16 -9
- package/dist/patterns/FavoritesCollectionTile/FavoritesCollectionTile.js +177 -107
- package/dist/patterns/FavoritesCollectionTile/FavoritesCollectionTile.stories.d.ts +1 -0
- package/dist/scss/patterns/FavoritesCollectionTile/_favoritesCollectionTile.scss +17 -6
- package/package.json +1 -1
|
@@ -69,15 +69,22 @@ export interface FavoritesCollectionTileProps extends ComponentProps<'div'> {
|
|
|
69
69
|
* Custom icon size for the icon in the tile
|
|
70
70
|
*/
|
|
71
71
|
iconSize?: number;
|
|
72
|
+
/**
|
|
73
|
+
* ARIA label for the popover menu trigger
|
|
74
|
+
*/
|
|
75
|
+
menuAriaLabel?: string;
|
|
76
|
+
/**
|
|
77
|
+
* ARIA label for the create variant container
|
|
78
|
+
*/
|
|
79
|
+
favoritesAriaLabel?: string;
|
|
80
|
+
/**
|
|
81
|
+
* ARIA label for the lists empty state
|
|
82
|
+
*/
|
|
83
|
+
emptyListAriaLabel?: string;
|
|
84
|
+
/**
|
|
85
|
+
* ARIA label for list
|
|
86
|
+
*/
|
|
87
|
+
listAriaLabel?: string;
|
|
72
88
|
}
|
|
73
|
-
/**
|
|
74
|
-
* ## Overview
|
|
75
|
-
*
|
|
76
|
-
* Overview of this widget
|
|
77
|
-
*
|
|
78
|
-
* [Figma Link](https://www.figma.com/design/rIefa3bRPyZbZmtyV9PSQv/My-Account?node-id=61-14355&m=dev)
|
|
79
|
-
*
|
|
80
|
-
* [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/patterns-FavoritesCollectionTile--overview)
|
|
81
|
-
*/
|
|
82
89
|
declare const FavoritesCollectionTile: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<FavoritesCollectionTileProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>>;
|
|
83
90
|
export default FavoritesCollectionTile;
|
|
@@ -1,90 +1,214 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { Root as
|
|
1
|
+
import { jsx as t, jsxs as c } from "react/jsx-runtime";
|
|
2
|
+
import { Root as q, Trigger as B, Portal as G, Content as H } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
|
|
3
3
|
import l from "../../node_modules/classnames/index.js";
|
|
4
|
-
import { memo as
|
|
4
|
+
import { memo as J, forwardRef as Q, useRef as U } from "react";
|
|
5
5
|
import $ from "../../components/Icon/Icon.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { TextVariants as
|
|
9
|
-
import
|
|
10
|
-
import { getCommonProps as
|
|
11
|
-
const
|
|
12
|
-
|
|
6
|
+
import W from "../../components/Link/Link.js";
|
|
7
|
+
import X from "../../components/SeldonImage/SeldonImage.js";
|
|
8
|
+
import { TextVariants as g } from "../../components/Text/types.js";
|
|
9
|
+
import v from "../../components/Text/Text.js";
|
|
10
|
+
import { getCommonProps as Z } from "../../utils/index.js";
|
|
11
|
+
const S = ({
|
|
12
|
+
baseClassName: e,
|
|
13
|
+
iconSize: o,
|
|
14
|
+
createFirstListText: a,
|
|
15
|
+
onClick: r
|
|
16
|
+
}) => /* @__PURE__ */ t(
|
|
17
|
+
"button",
|
|
18
|
+
{
|
|
19
|
+
type: "button",
|
|
20
|
+
className: `${e}__create-variant`,
|
|
21
|
+
"data-testid": "create-list",
|
|
22
|
+
"aria-label": a,
|
|
23
|
+
onClick: (n) => {
|
|
24
|
+
n.stopPropagation(), r?.(n);
|
|
25
|
+
},
|
|
26
|
+
children: /* @__PURE__ */ t("span", { className: l(`${e}__empty`, `${e}__empty--create-list`), children: /* @__PURE__ */ c("span", { className: `${e}__empty__content`, children: [
|
|
27
|
+
/* @__PURE__ */ t(
|
|
28
|
+
$,
|
|
29
|
+
{
|
|
30
|
+
icon: "Add",
|
|
31
|
+
width: o,
|
|
32
|
+
height: o,
|
|
33
|
+
color: "$dark-gray",
|
|
34
|
+
className: l(`${e}__icon`, `${e}__icon-circle`),
|
|
35
|
+
"aria-hidden": "true"
|
|
36
|
+
}
|
|
37
|
+
),
|
|
38
|
+
/* @__PURE__ */ t("span", { className: `${e}__text`, children: a })
|
|
39
|
+
] }) })
|
|
40
|
+
}
|
|
41
|
+
), N = ({
|
|
42
|
+
baseClassName: e,
|
|
43
|
+
iconSize: o,
|
|
44
|
+
text: a,
|
|
45
|
+
ariaLabel: r,
|
|
46
|
+
dataTestId: n
|
|
47
|
+
}) => /* @__PURE__ */ t("div", { className: `${e}__media-container`, "data-testid": n, "aria-label": r, role: "region", children: /* @__PURE__ */ t("div", { className: l(`${e}__empty`, `${e}__empty--bg`), children: /* @__PURE__ */ c("div", { className: `${e}__empty__content`, children: [
|
|
48
|
+
/* @__PURE__ */ t(
|
|
49
|
+
$,
|
|
50
|
+
{
|
|
51
|
+
icon: "Favorite",
|
|
52
|
+
width: o,
|
|
53
|
+
height: o,
|
|
54
|
+
color: "$dark-gray",
|
|
55
|
+
className: l(`${e}__icon`),
|
|
56
|
+
"aria-hidden": "true"
|
|
57
|
+
}
|
|
58
|
+
),
|
|
59
|
+
/* @__PURE__ */ t("div", { className: `${e}__text`, children: a })
|
|
60
|
+
] }) }) }), z = ({
|
|
61
|
+
baseClassName: e,
|
|
62
|
+
imageRef: o,
|
|
63
|
+
listAriaLabel: a,
|
|
64
|
+
name: r,
|
|
65
|
+
imageSrc: n
|
|
66
|
+
}) => /* @__PURE__ */ t(
|
|
67
|
+
"div",
|
|
68
|
+
{
|
|
69
|
+
className: `${e}__media-container`,
|
|
70
|
+
ref: o,
|
|
71
|
+
"aria-label": a,
|
|
72
|
+
"data-testid": "list",
|
|
73
|
+
role: "region",
|
|
74
|
+
children: /* @__PURE__ */ t(
|
|
75
|
+
X,
|
|
76
|
+
{
|
|
77
|
+
alt: r,
|
|
78
|
+
aspectRatio: "1/1",
|
|
79
|
+
className: `${e}__media`,
|
|
80
|
+
objectFit: "contain",
|
|
81
|
+
src: n,
|
|
82
|
+
style: {
|
|
83
|
+
cursor: "pointer"
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
}
|
|
88
|
+
), lt = J(
|
|
89
|
+
Q(
|
|
13
90
|
({
|
|
14
|
-
id:
|
|
15
|
-
className:
|
|
16
|
-
count:
|
|
17
|
-
name:
|
|
18
|
-
imageSrc:
|
|
19
|
-
variant:
|
|
20
|
-
element:
|
|
21
|
-
href:
|
|
22
|
-
emptyFavoritesText:
|
|
23
|
-
emptyListsText:
|
|
91
|
+
id: e,
|
|
92
|
+
className: o,
|
|
93
|
+
count: a,
|
|
94
|
+
name: r,
|
|
95
|
+
imageSrc: n,
|
|
96
|
+
variant: _,
|
|
97
|
+
element: L = W,
|
|
98
|
+
href: k,
|
|
99
|
+
emptyFavoritesText: w = "You have not added any objects to your Favorites yet.",
|
|
100
|
+
emptyListsText: b = "You have not added any objects to your List yet.",
|
|
24
101
|
createFirstListText: x = "Create your first List.",
|
|
25
|
-
editListText:
|
|
102
|
+
editListText: I = "Edit List",
|
|
26
103
|
deleteListText: T = "Delete List",
|
|
27
|
-
onEdit:
|
|
28
|
-
onDelete:
|
|
29
|
-
formatlotStr:
|
|
30
|
-
linkClassName:
|
|
31
|
-
iconSize:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
104
|
+
onEdit: E,
|
|
105
|
+
onDelete: F,
|
|
106
|
+
formatlotStr: u = (i, p = i === 1 ? "LOT" : "LOTS") => `${i} ${p}`,
|
|
107
|
+
linkClassName: P,
|
|
108
|
+
iconSize: d = 22,
|
|
109
|
+
menuAriaLabel: R = "Manage List",
|
|
110
|
+
favoritesAriaLabel: V = "Favorites",
|
|
111
|
+
emptyListAriaLabel: j = "Empty List",
|
|
112
|
+
listAriaLabel: C = "List",
|
|
113
|
+
...y
|
|
114
|
+
}, O) => {
|
|
115
|
+
const { className: i, ...p } = Z({ id: e, ...y }, "FavoritesCollectionTile"), D = U(null), m = r && a !== null && a !== void 0, h = a === 0, f = _ === "lists", A = _ === "create", M = _ === "favorites" && h, Y = m && h && f, K = () => A ? /* @__PURE__ */ t(
|
|
116
|
+
S,
|
|
117
|
+
{
|
|
118
|
+
baseClassName: i,
|
|
119
|
+
iconSize: d,
|
|
120
|
+
createFirstListText: x,
|
|
121
|
+
onClick: y.onClick
|
|
122
|
+
}
|
|
123
|
+
) : /* @__PURE__ */ c(L, { href: k, className: l(`${i}__media-link`, P), tabIndex: 0, children: [
|
|
124
|
+
M && /* @__PURE__ */ t(
|
|
125
|
+
N,
|
|
126
|
+
{
|
|
127
|
+
baseClassName: i,
|
|
128
|
+
iconSize: d,
|
|
129
|
+
text: w,
|
|
130
|
+
ariaLabel: V,
|
|
131
|
+
dataTestId: "favorites"
|
|
132
|
+
}
|
|
133
|
+
),
|
|
134
|
+
Y && /* @__PURE__ */ t(
|
|
135
|
+
N,
|
|
136
|
+
{
|
|
137
|
+
baseClassName: i,
|
|
138
|
+
iconSize: d,
|
|
139
|
+
text: b,
|
|
140
|
+
ariaLabel: j,
|
|
141
|
+
dataTestId: "empty-list"
|
|
142
|
+
}
|
|
143
|
+
),
|
|
144
|
+
!h && m && /* @__PURE__ */ t(
|
|
145
|
+
z,
|
|
146
|
+
{
|
|
147
|
+
baseClassName: i,
|
|
148
|
+
imageRef: D,
|
|
149
|
+
listAriaLabel: C,
|
|
150
|
+
name: r,
|
|
151
|
+
imageSrc: n,
|
|
152
|
+
iconSize: d
|
|
153
|
+
}
|
|
154
|
+
)
|
|
155
|
+
] });
|
|
156
|
+
return /* @__PURE__ */ t("div", { ...p, className: l(i, o), ref: O, id: e, children: /* @__PURE__ */ c("div", { className: `${i}__content`, children: [
|
|
157
|
+
/* @__PURE__ */ c("div", { className: `${i}__header`, children: [
|
|
158
|
+
/* @__PURE__ */ c("div", { className: `${i}__info`, children: [
|
|
159
|
+
m && /* @__PURE__ */ t(v, { element: "span", className: `${i}__count`, variant: g.body3, children: u && m && u(a) }),
|
|
160
|
+
r && /* @__PURE__ */ t(v, { element: "h3", className: `${i}__title`, variant: g.heading5, children: r })
|
|
40
161
|
] }),
|
|
41
|
-
|
|
42
|
-
/* @__PURE__ */ t(
|
|
162
|
+
m && f && /* @__PURE__ */ c(q, { children: [
|
|
163
|
+
/* @__PURE__ */ t(B, { asChild: !0, children: /* @__PURE__ */ t(
|
|
43
164
|
"div",
|
|
44
165
|
{
|
|
45
|
-
className: `${
|
|
166
|
+
className: `${i}__actions`,
|
|
46
167
|
"data-testid": "menu-trigger",
|
|
47
168
|
tabIndex: 0,
|
|
48
169
|
role: "button",
|
|
170
|
+
"aria-label": R,
|
|
171
|
+
"aria-haspopup": "menu",
|
|
49
172
|
onKeyDown: (s) => {
|
|
50
173
|
s.key === "Enter" && (s.preventDefault(), s.stopPropagation(), s.target.click());
|
|
51
174
|
},
|
|
52
|
-
children: /* @__PURE__ */ t("div", { className: `${
|
|
175
|
+
children: /* @__PURE__ */ t("div", { className: `${i}__icon-rotate`, children: /* @__PURE__ */ t(
|
|
53
176
|
$,
|
|
54
177
|
{
|
|
55
178
|
icon: "Icon",
|
|
56
|
-
width:
|
|
57
|
-
height:
|
|
179
|
+
width: d,
|
|
180
|
+
height: d,
|
|
58
181
|
color: "$dark-gray",
|
|
59
|
-
className: `${
|
|
182
|
+
className: `${i}__icon-button`,
|
|
183
|
+
"aria-hidden": "true"
|
|
60
184
|
}
|
|
61
185
|
) })
|
|
62
186
|
}
|
|
63
187
|
) }),
|
|
64
|
-
/* @__PURE__ */ t(
|
|
65
|
-
|
|
188
|
+
/* @__PURE__ */ t(G, { children: /* @__PURE__ */ t(
|
|
189
|
+
H,
|
|
66
190
|
{
|
|
67
191
|
avoidCollisions: !0,
|
|
68
192
|
collisionPadding: 10,
|
|
69
193
|
sideOffset: 5,
|
|
70
194
|
align: "start",
|
|
71
195
|
alignOffset: 5,
|
|
72
|
-
className: `${
|
|
73
|
-
children: /* @__PURE__ */
|
|
196
|
+
className: `${i}__popover-content`,
|
|
197
|
+
children: /* @__PURE__ */ c("div", { className: `${i}__dropdown`, "data-testid": "dropdown-menu", children: [
|
|
74
198
|
/* @__PURE__ */ t(
|
|
75
199
|
"button",
|
|
76
200
|
{
|
|
77
|
-
className: `${
|
|
78
|
-
onClick: (s) =>
|
|
201
|
+
className: `${i}__dropdown--item`,
|
|
202
|
+
onClick: (s) => E?.(e, s),
|
|
79
203
|
type: "button",
|
|
80
|
-
children:
|
|
204
|
+
children: I
|
|
81
205
|
}
|
|
82
206
|
),
|
|
83
207
|
/* @__PURE__ */ t(
|
|
84
208
|
"button",
|
|
85
209
|
{
|
|
86
|
-
className: `${
|
|
87
|
-
onClick: (s) =>
|
|
210
|
+
className: `${i}__dropdown--item`,
|
|
211
|
+
onClick: (s) => F?.(e, s),
|
|
88
212
|
type: "button",
|
|
89
213
|
children: T
|
|
90
214
|
}
|
|
@@ -92,67 +216,13 @@ const ae = H(
|
|
|
92
216
|
] })
|
|
93
217
|
}
|
|
94
218
|
) })
|
|
95
|
-
] })
|
|
219
|
+
] })
|
|
96
220
|
] }),
|
|
97
|
-
|
|
98
|
-
r && h === "favorites" && /* @__PURE__ */ t("div", { className: `${e}__media-container`, "data-testid": "favorites", "aria-label": "Favorites", children: /* @__PURE__ */ t("div", { className: l(`${e}__empty`, `${e}__empty--bg`), children: /* @__PURE__ */ a("div", { className: `${e}__empty__content`, children: [
|
|
99
|
-
/* @__PURE__ */ t(
|
|
100
|
-
$,
|
|
101
|
-
{
|
|
102
|
-
icon: "Favorite",
|
|
103
|
-
width: o,
|
|
104
|
-
height: o,
|
|
105
|
-
color: "$dark-gray",
|
|
106
|
-
className: `${e}__icon`
|
|
107
|
-
}
|
|
108
|
-
),
|
|
109
|
-
/* @__PURE__ */ t("div", { className: `${e}__text`, children: k })
|
|
110
|
-
] }) }) }),
|
|
111
|
-
(r || !i) && (m || n) && /* @__PURE__ */ a(f, { children: [
|
|
112
|
-
n && /* @__PURE__ */ t("div", { className: `${e}__create-spacing` }),
|
|
113
|
-
/* @__PURE__ */ t("div", { className: `${e}__media-container`, "data-testid": "list", "aria-label": "Lists", children: /* @__PURE__ */ t(
|
|
114
|
-
"div",
|
|
115
|
-
{
|
|
116
|
-
className: l(`${e}__empty`, {
|
|
117
|
-
[`${e}__empty--create-list`]: !i && (m || n),
|
|
118
|
-
[`${e}__empty--bg`]: r && !n
|
|
119
|
-
}),
|
|
120
|
-
children: /* @__PURE__ */ a("div", { className: `${e}__empty__content`, children: [
|
|
121
|
-
/* @__PURE__ */ t(
|
|
122
|
-
$,
|
|
123
|
-
{
|
|
124
|
-
icon: N ? "Favorite" : "Add",
|
|
125
|
-
width: o,
|
|
126
|
-
height: o,
|
|
127
|
-
color: "$dark-gray",
|
|
128
|
-
className: l(`${e}__icon`, {
|
|
129
|
-
[`${e}__icon-circle`]: !i && (m || n)
|
|
130
|
-
})
|
|
131
|
-
}
|
|
132
|
-
),
|
|
133
|
-
/* @__PURE__ */ t("div", { className: `${e}__text`, children: N ? w : x })
|
|
134
|
-
] })
|
|
135
|
-
}
|
|
136
|
-
) })
|
|
137
|
-
] }),
|
|
138
|
-
!r && i && /* @__PURE__ */ t("div", { className: `${e}__media-container`, ref: E, children: /* @__PURE__ */ t(
|
|
139
|
-
G,
|
|
140
|
-
{
|
|
141
|
-
alt: _,
|
|
142
|
-
aspectRatio: "1/1",
|
|
143
|
-
className: `${e}__media`,
|
|
144
|
-
objectFit: "cover",
|
|
145
|
-
src: b,
|
|
146
|
-
style: {
|
|
147
|
-
cursor: "pointer"
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
) })
|
|
151
|
-
] })
|
|
221
|
+
K()
|
|
152
222
|
] }) });
|
|
153
223
|
}
|
|
154
224
|
)
|
|
155
225
|
);
|
|
156
226
|
export {
|
|
157
|
-
|
|
227
|
+
lt as default
|
|
158
228
|
};
|
|
@@ -109,6 +109,7 @@
|
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
&__media-container {
|
|
112
|
+
background-color: $soft-gray;
|
|
112
113
|
position: relative;
|
|
113
114
|
width: 100%;
|
|
114
115
|
}
|
|
@@ -132,6 +133,7 @@
|
|
|
132
133
|
}
|
|
133
134
|
|
|
134
135
|
&--create-list {
|
|
136
|
+
background-color: $white;
|
|
135
137
|
border: 1px solid #0000001f;
|
|
136
138
|
border-radius: 0;
|
|
137
139
|
}
|
|
@@ -145,8 +147,7 @@
|
|
|
145
147
|
}
|
|
146
148
|
|
|
147
149
|
&__icon {
|
|
148
|
-
|
|
149
|
-
justify-self: start;
|
|
150
|
+
justify-content: flex-start;
|
|
150
151
|
pointer-events: none;
|
|
151
152
|
|
|
152
153
|
&-rotate {
|
|
@@ -156,7 +157,9 @@
|
|
|
156
157
|
&-circle {
|
|
157
158
|
border: 2px solid $dark-gray;
|
|
158
159
|
border-radius: 50%;
|
|
159
|
-
|
|
160
|
+
height: 1.5rem;
|
|
161
|
+
justify-content: flex-start;
|
|
162
|
+
width: 1.5rem;
|
|
160
163
|
}
|
|
161
164
|
}
|
|
162
165
|
|
|
@@ -173,11 +176,19 @@
|
|
|
173
176
|
text-transform: none;
|
|
174
177
|
}
|
|
175
178
|
|
|
176
|
-
|
|
177
|
-
|
|
179
|
+
[data-radix-popper-content-wrapper] > * {
|
|
180
|
+
all: unset;
|
|
178
181
|
}
|
|
179
182
|
|
|
180
|
-
|
|
183
|
+
&__create-variant {
|
|
181
184
|
all: unset;
|
|
185
|
+
background: none;
|
|
186
|
+
height: 100%;
|
|
187
|
+
margin-top: calc($spacing-xsm + var(--body-line-height-size3) + var(--heading-line-height-size5));
|
|
188
|
+
width: 100%;
|
|
189
|
+
|
|
190
|
+
&:focus-visible {
|
|
191
|
+
outline: 1px solid $pure-black;
|
|
192
|
+
}
|
|
182
193
|
}
|
|
183
194
|
}
|