@stapel/listings-react 0.13.0 → 0.14.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/CHANGELOG.md +42 -0
- package/dist/default/ListingCard.d.ts +59 -3
- package/dist/default/ListingCard.d.ts.map +1 -1
- package/dist/default/ListingCard.js +79 -17
- package/dist/default/ListingCard.js.map +1 -1
- package/dist/default/ListingPhoto.d.ts +30 -0
- package/dist/default/ListingPhoto.d.ts.map +1 -1
- package/dist/default/ListingPhoto.js +33 -0
- package/dist/default/ListingPhoto.js.map +1 -1
- package/dist/default/ListingSerpCard.d.ts +11 -0
- package/dist/default/ListingSerpCard.d.ts.map +1 -1
- package/dist/default/ListingSerpCard.js +7 -15
- package/dist/default/ListingSerpCard.js.map +1 -1
- package/dist/default/index.d.ts +2 -2
- package/dist/default/index.d.ts.map +1 -1
- package/dist/default/index.js +5 -2
- package/dist/default/index.js.map +1 -1
- package/llms.txt +4 -3
- package/manifest.json +20 -1
- package/nav-manifest.json +1 -1
- package/package.json +2 -2
- package/src/analytics/generated/events.json +1 -1
- package/src/default/ListingCard.tsx +209 -110
- package/src/default/ListingPhoto.tsx +64 -0
- package/src/default/ListingSerpCard.tsx +130 -135
- package/src/default/index.ts +12 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,47 @@
|
|
|
1
1
|
# @stapel/listings-react
|
|
2
2
|
|
|
3
|
+
## 0.14.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- The desktop result card is a list row, and it has the phone card's gallery
|
|
8
|
+
|
|
9
|
+
Measured on a live 1440px result page in "list" view: **one offer per screen**
|
|
10
|
+
— a 974×835 card of which the photograph was 974×731 — showing a SINGLE photo,
|
|
11
|
+
with no carousel, and that photo inside the card's own link. The phone card,
|
|
12
|
+
measured in the same run, was correct on every count: three photos per card,
|
|
13
|
+
dots on all of them, a 17px peek, and the strip a sibling of the anchor.
|
|
14
|
+
|
|
15
|
+
Two changes, both to `<ListingCard>`, and the second to `<ListingSerpCard>` as
|
|
16
|
+
well.
|
|
17
|
+
|
|
18
|
+
**The photos are a strip, outside the anchor.** `<ListingPhotoStrip>` is now
|
|
19
|
+
the one gallery both card surfaces draw: a `SkinCarousel` over every stored
|
|
20
|
+
photo, peeking and dotted above one photo, one slide for a listing with none.
|
|
21
|
+
It sits BESIDE the anchor rather than inside it, because a swipeable strip is a
|
|
22
|
+
control, a link may not contain one, and a horizontal swipe that ends inside an
|
|
23
|
+
`<a>` is a swipe the browser may deliver as a click — the defect that made the
|
|
24
|
+
desktop gallery unreachable. The "the card is the link" ruling is otherwise
|
|
25
|
+
untouched: the price, the title, the badges and the place are still inside one
|
|
26
|
+
real `<a href>` whose accessible name is the title.
|
|
27
|
+
|
|
28
|
+
**The card lays out as a row when it is wide enough to be one.** Above
|
|
29
|
+
`LISTING_CARD_ROW_MIN` (560px of the CARD's own inline size, asked with a
|
|
30
|
+
`@container` query and never a viewport breakpoint) the strip moves beside the
|
|
31
|
+
reading column at a fixed `LISTING_CARD_ROW_MEDIA` (260px), so several offers
|
|
32
|
+
fit a screen. In a grid the column is never that wide, so nothing about a grid
|
|
33
|
+
changes.
|
|
34
|
+
|
|
35
|
+
New from `@stapel/listings-react/default`: `ListingPhotoStrip`,
|
|
36
|
+
`LISTING_CARD_ROW_MIN` and `LISTING_CARD_ROW_MEDIA`. The frame's own class
|
|
37
|
+
names (`CARD_QUERY_CLASS`, `CARD_FRAME_CLASS`, `CARD_MEDIA_CLASS`,
|
|
38
|
+
`CARD_MAIN_CLASS`, `CARD_BLEED_CLASS`) stay on the module, beside
|
|
39
|
+
`cardTargetCss`, where the other card surfaces read them.
|
|
40
|
+
|
|
41
|
+
Demos photograph both cards at both widths — a 320px grid cell and a 960px list
|
|
42
|
+
row — and the suite asserts the structure the layout acts on plus the rule text
|
|
43
|
+
a browser applies.
|
|
44
|
+
|
|
3
45
|
## 0.13.0
|
|
4
46
|
|
|
5
47
|
### Minor Changes
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
* Nothing on a classified works that way: the card IS the target, and the only
|
|
17
17
|
* separate control on it is the favourite heart.
|
|
18
18
|
*
|
|
19
|
-
* So the
|
|
20
|
-
*
|
|
21
|
-
*
|
|
19
|
+
* So the price, the title, the badges and the location live INSIDE one anchor
|
|
20
|
+
* that covers the whole card, and `listings.card.open` is retired rather than
|
|
21
|
+
* left orphaned in three catalogues.
|
|
22
22
|
*
|
|
23
23
|
* What that must not cost is the anchor semantics won earlier: this is a real
|
|
24
24
|
* `<a href>`, so middle-click opens a tab, ⌘-click opens a tab, "copy link
|
|
@@ -44,6 +44,29 @@
|
|
|
44
44
|
* A listing with no title falls back to `listings.card.untitled`, because a
|
|
45
45
|
* link announced as nothing is worse than one announced as untitled.
|
|
46
46
|
*
|
|
47
|
+
* ── The photos moved OUT of the anchor, and the card became a ROW ─────────
|
|
48
|
+
*
|
|
49
|
+
* Both from the same measurement of the live desktop SERP, in list view:
|
|
50
|
+
* **one card per screen** — 974×835, of which the photograph was 974×731 —
|
|
51
|
+
* showing a SINGLE photo, with no carousel, and that photo inside the anchor.
|
|
52
|
+
* The phone card beside it was correct on every count.
|
|
53
|
+
*
|
|
54
|
+
* The photo used to be inside the anchor on the argument that a still `<img>`
|
|
55
|
+
* in a link is just a bigger link, which is true and stops being true the
|
|
56
|
+
* moment there is more than one photo: a swipeable strip is a control, a link
|
|
57
|
+
* may not contain one, and a horizontal swipe that ends inside an `<a>` is a
|
|
58
|
+
* swipe the browser may deliver as a click. So the strip is a SIBLING of the
|
|
59
|
+
* anchor — the arrangement `<ListingSerpCard>` has always used, and the reason
|
|
60
|
+
* the phone gallery works — and the anchor still covers everything a person
|
|
61
|
+
* READS. `<ListingPhotoStrip>` is the one gallery both cards draw.
|
|
62
|
+
*
|
|
63
|
+
* The row is the other half. A grid card handed a full-page-wide track keeps
|
|
64
|
+
* its shape and becomes a banner; this card now asks its OWN width
|
|
65
|
+
* (`@container`, see {@link LISTING_CARD_ROW_MIN}) and lays the photo beside
|
|
66
|
+
* the text above 560px. In a grid its column is never that wide, so nothing
|
|
67
|
+
* about the grid changes; in a list several rows fit a screen, which is the
|
|
68
|
+
* only reason a list exists.
|
|
69
|
+
*
|
|
47
70
|
* ── Why the heart is a row under the card and not floating on the photo ────
|
|
48
71
|
*
|
|
49
72
|
* Because for a signed-out visitor — which is most of the traffic a storefront
|
|
@@ -131,8 +154,41 @@ export type ListingCardOpenProps = {
|
|
|
131
154
|
export type ListingCardBlockedReason = "text" | "line";
|
|
132
155
|
/** The class the whole-card target carries, for {@link cardTargetCss}. */
|
|
133
156
|
export declare const CARD_TARGET_CLASS = "stapel-listing-card-target";
|
|
157
|
+
/** The class the card's OUTER box carries — the size container the row layout
|
|
158
|
+
* is asked about. A container cannot answer a query about itself, which is why
|
|
159
|
+
* this is a wrapper and not the frame. */
|
|
160
|
+
export declare const CARD_QUERY_CLASS = "stapel-listing-card-q";
|
|
161
|
+
/** The class the media/reading frame carries. */
|
|
162
|
+
export declare const CARD_FRAME_CLASS = "stapel-listing-card-frame";
|
|
163
|
+
/** The class the photo strip's box carries. */
|
|
164
|
+
export declare const CARD_MEDIA_CLASS = "stapel-listing-card-media";
|
|
165
|
+
/** The class the reading column carries. */
|
|
166
|
+
export declare const CARD_MAIN_CLASS = "stapel-listing-card-main";
|
|
167
|
+
/** Added to the frame by a card whose media is FULL-BLEED when stacked
|
|
168
|
+
* (`<ListingCard>`), so the row arm gets the inset the stacked arm does not. */
|
|
169
|
+
export declare const CARD_BLEED_CLASS = "stapel-listing-card-bleed";
|
|
134
170
|
/** The `href` the hoisted card stylesheet is deduplicated by. */
|
|
135
171
|
export declare const CARD_TARGET_STYLE_HREF = "stapel-listings-card-target";
|
|
172
|
+
/**
|
|
173
|
+
* The card's own inline size above which it stops being a card and becomes a
|
|
174
|
+
* ROW.
|
|
175
|
+
*
|
|
176
|
+
* Measured on the live desktop SERP in "list" view: **one card per screen**,
|
|
177
|
+
* 974×835, of which the photograph was 974×731 — a grid card handed a
|
|
178
|
+
* full-page track and asked to keep its shape. A shopper comparing offers got
|
|
179
|
+
* one offer per scroll.
|
|
180
|
+
*
|
|
181
|
+
* 560px is the width at which a 4:3 photo stops being a banner: below it a
|
|
182
|
+
* two-column row leaves the text nothing, above it the photo is a thumbnail
|
|
183
|
+
* beside a paragraph. A `@container` query rather than a media query because
|
|
184
|
+
* the card does not know the viewport and must not care: the same card is a
|
|
185
|
+
* grid cell 300px wide on a 1440px screen and a full-width row on a 700px one,
|
|
186
|
+
* and only its OWN width decides which it is.
|
|
187
|
+
*/
|
|
188
|
+
export declare const LISTING_CARD_ROW_MIN = 560;
|
|
189
|
+
/** The photo's width in the row arm. Wide enough to read the goods, narrow
|
|
190
|
+
* enough that several rows fit a screen — the whole point of a list. */
|
|
191
|
+
export declare const LISTING_CARD_ROW_MEDIA = 260;
|
|
136
192
|
/**
|
|
137
193
|
* The one rule an inline style cannot express: `:focus-visible`.
|
|
138
194
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListingCard.d.ts","sourceRoot":"","sources":["../../src/default/ListingCard.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"ListingCard.d.ts","sourceRoot":"","sources":["../../src/default/ListingCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Button, Card, Flex, Typography, theme as antdTheme } from "antd";
|
|
3
3
|
import { GatedControl, SkinTheme } from "@stapel/tokens-antd/skin";
|
|
4
4
|
import { useActionGate, useT } from "@stapel/core";
|
|
@@ -10,12 +10,45 @@ import { useFavoriteToggle } from "../headless/Favorites.js";
|
|
|
10
10
|
import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
|
|
11
11
|
import { HeartIcon } from "./icons.js";
|
|
12
12
|
import { SignInLink } from "./SignInLink.js";
|
|
13
|
-
import {
|
|
13
|
+
import { ListingPhotoStrip } from "./ListingPhoto.js";
|
|
14
14
|
import { ListingPrice } from "./ListingPrice.js";
|
|
15
15
|
/** The class the whole-card target carries, for {@link cardTargetCss}. */
|
|
16
16
|
export const CARD_TARGET_CLASS = "stapel-listing-card-target";
|
|
17
|
+
/** The class the card's OUTER box carries — the size container the row layout
|
|
18
|
+
* is asked about. A container cannot answer a query about itself, which is why
|
|
19
|
+
* this is a wrapper and not the frame. */
|
|
20
|
+
export const CARD_QUERY_CLASS = "stapel-listing-card-q";
|
|
21
|
+
/** The class the media/reading frame carries. */
|
|
22
|
+
export const CARD_FRAME_CLASS = "stapel-listing-card-frame";
|
|
23
|
+
/** The class the photo strip's box carries. */
|
|
24
|
+
export const CARD_MEDIA_CLASS = "stapel-listing-card-media";
|
|
25
|
+
/** The class the reading column carries. */
|
|
26
|
+
export const CARD_MAIN_CLASS = "stapel-listing-card-main";
|
|
27
|
+
/** Added to the frame by a card whose media is FULL-BLEED when stacked
|
|
28
|
+
* (`<ListingCard>`), so the row arm gets the inset the stacked arm does not. */
|
|
29
|
+
export const CARD_BLEED_CLASS = "stapel-listing-card-bleed";
|
|
17
30
|
/** The `href` the hoisted card stylesheet is deduplicated by. */
|
|
18
31
|
export const CARD_TARGET_STYLE_HREF = "stapel-listings-card-target";
|
|
32
|
+
/**
|
|
33
|
+
* The card's own inline size above which it stops being a card and becomes a
|
|
34
|
+
* ROW.
|
|
35
|
+
*
|
|
36
|
+
* Measured on the live desktop SERP in "list" view: **one card per screen**,
|
|
37
|
+
* 974×835, of which the photograph was 974×731 — a grid card handed a
|
|
38
|
+
* full-page track and asked to keep its shape. A shopper comparing offers got
|
|
39
|
+
* one offer per scroll.
|
|
40
|
+
*
|
|
41
|
+
* 560px is the width at which a 4:3 photo stops being a banner: below it a
|
|
42
|
+
* two-column row leaves the text nothing, above it the photo is a thumbnail
|
|
43
|
+
* beside a paragraph. A `@container` query rather than a media query because
|
|
44
|
+
* the card does not know the viewport and must not care: the same card is a
|
|
45
|
+
* grid cell 300px wide on a 1440px screen and a full-width row on a 700px one,
|
|
46
|
+
* and only its OWN width decides which it is.
|
|
47
|
+
*/
|
|
48
|
+
export const LISTING_CARD_ROW_MIN = 560;
|
|
49
|
+
/** The photo's width in the row arm. Wide enough to read the goods, narrow
|
|
50
|
+
* enough that several rows fit a screen — the whole point of a list. */
|
|
51
|
+
export const LISTING_CARD_ROW_MEDIA = 260;
|
|
19
52
|
/**
|
|
20
53
|
* The one rule an inline style cannot express: `:focus-visible`.
|
|
21
54
|
*
|
|
@@ -29,9 +62,33 @@ export const CARD_TARGET_STYLE_HREF = "stapel-listings-card-target";
|
|
|
29
62
|
* design system's ROLE catalogue and this is a component's private plumbing.
|
|
30
63
|
*/
|
|
31
64
|
export function cardTargetCss() {
|
|
65
|
+
const q = `.${CARD_QUERY_CLASS}`;
|
|
66
|
+
const frame = `.${CARD_FRAME_CLASS}`;
|
|
67
|
+
const media = `.${CARD_MEDIA_CLASS}`;
|
|
68
|
+
const main = `.${CARD_MAIN_CLASS}`;
|
|
69
|
+
const bleed = `.${CARD_BLEED_CLASS}`;
|
|
32
70
|
return [
|
|
33
71
|
`.${CARD_TARGET_CLASS}{display:block;color:inherit;text-decoration:none}`,
|
|
34
72
|
`.${CARD_TARGET_CLASS}:focus-visible{outline:2px solid var(--listing-card-focus);outline-offset:2px}`,
|
|
73
|
+
// The card asks about its OWN width, not the window's — see
|
|
74
|
+
// `LISTING_CARD_ROW_MIN`.
|
|
75
|
+
`${q}{container-type:inline-size}`,
|
|
76
|
+
`${frame}{display:flex;flex-direction:column;min-inline-size:0}`,
|
|
77
|
+
`${media}{min-inline-size:0}`,
|
|
78
|
+
`${main}{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0}`,
|
|
79
|
+
// The row arm. `align-items:flex-start` so a short text column does not
|
|
80
|
+
// stretch the photo, and a fixed media basis so the picture cannot grow
|
|
81
|
+
// into the 974px banner the live SERP was measured at.
|
|
82
|
+
`@container (min-width:${String(LISTING_CARD_ROW_MIN)}px){` +
|
|
83
|
+
`${frame}{flex-direction:row;align-items:flex-start}` +
|
|
84
|
+
`${media}{flex:0 0 ${String(LISTING_CARD_ROW_MEDIA)}px;` +
|
|
85
|
+
`max-inline-size:${String(LISTING_CARD_ROW_MEDIA)}px}` +
|
|
86
|
+
// A full-bleed stacked card has no padding of its own to give the row
|
|
87
|
+
// arm, so the row arm states its own; the reading column's padding is
|
|
88
|
+
// what separates the two.
|
|
89
|
+
`${bleed}{padding-block:var(--listing-card-inset);` +
|
|
90
|
+
`padding-inline-start:var(--listing-card-inset)}` +
|
|
91
|
+
`}`,
|
|
35
92
|
].join("");
|
|
36
93
|
}
|
|
37
94
|
/** The anchor: a block that inherits the card's own type colour rather than
|
|
@@ -120,8 +177,9 @@ export function ListingCard(props) {
|
|
|
120
177
|
// as untitled.
|
|
121
178
|
const targetLabel = title.length > 0 ? title : t(LISTINGS_I18N_KEYS.cardUntitled);
|
|
122
179
|
/**
|
|
123
|
-
* Everything a person
|
|
124
|
-
*
|
|
180
|
+
* Everything a person READS on the card, in the order a classified reads it:
|
|
181
|
+
* price, title, the seller's own spec line, the badges, the place. The
|
|
182
|
+
* photos are not here — they are the strip beside this, outside the anchor.
|
|
125
183
|
*
|
|
126
184
|
* The search projection carries `title`, `price`, `currency`,
|
|
127
185
|
* `location_label`, `image` and `published_at` and NO feature badges — so
|
|
@@ -129,20 +187,24 @@ export function ListingCard(props) {
|
|
|
129
187
|
* all of them absent. That is why the photo and the price carry the layout:
|
|
130
188
|
* they are the two fields a result always has.
|
|
131
189
|
*/
|
|
132
|
-
const content = (_jsxs(
|
|
133
|
-
|
|
134
|
-
return (_jsxs(SkinTheme, { surface: "bare", ...(props.mode !== undefined ? { mode: props.mode } : {}), children: [_jsx("style", { href: CARD_TARGET_STYLE_HREF, precedence: "default", children: cardTargetCss() }),
|
|
190
|
+
const content = (_jsxs(Flex, { vertical: true, gap: spacing[1], style: { minWidth: 0, padding: token.paddingSM }, children: [props.badge, _jsx(Typography.Text, { strong: true, "data-testid": "listings-card-price", children: _jsx(ListingPrice, { amount: listing.price, ...(listing.currency !== undefined ? { currency: listing.currency } : {}) }) }), _jsx(Typography.Text, { ellipsis: true, "data-testid": "listings-card-title", children: title }), titleDaos.length > 0 ? (_jsx(Typography.Text, { type: "secondary", ellipsis: true, children: _jsx(FeatureBadges, { features: featuresFromDaoList(titleDaos, copy).map((view) => view.feature), values: featuresDtoFromDaoList(titleDaos) }) })) : null, badgeFeatures.length > 0 ? (_jsx(FeatureBadges, { features: badgeFeatures.map((view) => view.feature), values: badgeValues })) : null, listing.location_label !== undefined &&
|
|
191
|
+
listing.location_label.length > 0 ? (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-card-location", children: listing.location_label })) : null] }));
|
|
192
|
+
return (_jsxs(SkinTheme, { surface: "bare", ...(props.mode !== undefined ? { mode: props.mode } : {}), children: [_jsx("style", { href: CARD_TARGET_STYLE_HREF, precedence: "default", children: cardTargetCss() }), _jsx(Card, { size: "small", "data-testid": "listings-card", "data-listing-id": listing.id, ...(status !== undefined
|
|
135
193
|
? { "data-listing-status": status.status }
|
|
136
194
|
: {}),
|
|
137
|
-
// The body's own padding is zero because the
|
|
138
|
-
//
|
|
139
|
-
//
|
|
140
|
-
// back, from the same token
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
:
|
|
195
|
+
// The body's own padding is zero because the frame fills the card and
|
|
196
|
+
// the photo runs edge to edge when it is stacked: padding here would
|
|
197
|
+
// be a strip of card around a picture. The text block inside the
|
|
198
|
+
// anchor carries the same padding back, from the same token, and the
|
|
199
|
+
// row arm states its own inset (`--listing-card-inset`).
|
|
200
|
+
styles: { body: { minWidth: 0, padding: 0 } }, style: {
|
|
201
|
+
["--listing-card-focus"]: token.colorPrimary,
|
|
202
|
+
["--listing-card-inset"]: `${String(token.paddingSM)}px`,
|
|
203
|
+
}, children: _jsx("div", { className: CARD_QUERY_CLASS, children: _jsxs("div", { className: `${CARD_FRAME_CLASS} ${CARD_BLEED_CLASS}`, children: [_jsx("div", { className: CARD_MEDIA_CLASS, children: _jsx(ListingPhotoStrip, { images: listing.images ?? [], title: title.length > 0 ? title : String(listing.id), testId: "listings-card-photos" }) }), _jsxs("div", { className: CARD_MAIN_CLASS, children: [_jsx(CardTarget, { ...props, listingId: listing.id, label: targetLabel, children: content }), props.showFavorite === false ? null : (_jsxs("div", { style: {
|
|
204
|
+
paddingInline: token.paddingSM,
|
|
205
|
+
paddingBlockEnd: token.paddingSM,
|
|
206
|
+
}, children: [_jsx(GatedControl, { gate: favorite.gate, testId: "listings-card-actions", style: { width: "100%" }, children: (bind) => (_jsx(Flex, { justify: "flex-end", style: { width: "100%" }, children: _jsx(Button, { disabled: bind.disabled, "data-disabled-reason": "the enclosing <GatedControl> renders the gate's reason beside this button", ...(bind["aria-describedby"] !== undefined
|
|
207
|
+
? { "aria-describedby": bind["aria-describedby"] }
|
|
208
|
+
: {}), "aria-label": favoriteLabel, "aria-pressed": favorite.favorited, "data-testid": "listings-card-favorite", "data-favorited": String(favorite.favorited), "data-analytics": "none", "data-analytics-reason": "business action \u2014 host app wraps with its own tracked()", onClick: favorite.toggle, icon: _jsx(HeartIcon, { filled: favorite.favorited }) }) })) }), favoriteGate.reason === undefined || blockedReason === "line" ? null : (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-card-favorite-blocked", children: _jsx(SignInLink, { cta: props.signIn, testId: "listings-card-sign-in" }) }))] }))] })] }) }) })] }));
|
|
147
209
|
}
|
|
148
210
|
//# sourceMappingURL=ListingCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListingCard.js","sourceRoot":"","sources":["../../src/default/ListingCard.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"ListingCard.js","sourceRoot":"","sources":["../../src/default/ListingCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -34,4 +34,34 @@ export interface ListingPhotoProps {
|
|
|
34
34
|
readonly style?: CSSProperties;
|
|
35
35
|
}
|
|
36
36
|
export declare function ListingPhoto(props: ListingPhotoProps): ReactElement;
|
|
37
|
+
/**
|
|
38
|
+
* A listing's photos as ONE swipeable strip — the shape every card surface in
|
|
39
|
+
* this pair uses, so there is one gallery and not three.
|
|
40
|
+
*
|
|
41
|
+
* ── Why the strip is never inside a card's anchor ──────────────────────────
|
|
42
|
+
*
|
|
43
|
+
* A `<SkinCarousel>` is a scroll container with its own tab stop, and a
|
|
44
|
+
* horizontal swipe that ends inside an `<a>` is a swipe the browser may
|
|
45
|
+
* deliver as a click: every attempt to look at photo two would open the
|
|
46
|
+
* listing. A link may not contain a control, and a swipeable strip is a
|
|
47
|
+
* control. So a card renders this as a SIBLING of its anchor and keeps the
|
|
48
|
+
* anchor around everything a person READS — which is the arrangement
|
|
49
|
+
* `<ListingSerpCard>` has shipped since it existed, and the one the live phone
|
|
50
|
+
* SERP was measured correct on while the desktop card (a still `<img>` inside
|
|
51
|
+
* the anchor, one photo, no dots) was not.
|
|
52
|
+
*
|
|
53
|
+
* A listing with no photos still gets one slide, so a row's height does not
|
|
54
|
+
* depend on whether a seller uploaded anything, and a ONE-photo strip gets
|
|
55
|
+
* neither peek nor dots: the sliver of a next slide is an affordance for
|
|
56
|
+
* something that is there.
|
|
57
|
+
*/
|
|
58
|
+
export declare function ListingPhotoStrip(props: {
|
|
59
|
+
/** The stored references, in the seller's order. */
|
|
60
|
+
readonly images: readonly string[];
|
|
61
|
+
/** The listing's title — the fallback alt for a single photo. */
|
|
62
|
+
readonly title: string;
|
|
63
|
+
/** The surface's own test id, so a screen holding two kinds of card does
|
|
64
|
+
* not hand a test two elements under one name. */
|
|
65
|
+
readonly testId: string;
|
|
66
|
+
}): ReactElement;
|
|
37
67
|
//# sourceMappingURL=ListingPhoto.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListingPhoto.d.ts","sourceRoot":"","sources":["../../src/default/ListingPhoto.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ListingPhoto.d.ts","sourceRoot":"","sources":["../../src/default/ListingPhoto.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAUzD;;4BAE4B;AAC5B,eAAO,MAAM,oBAAoB,UAAU,CAAC;AAE5C,MAAM,WAAW,iBAAiB;IAChC,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,uEAAuE;IACvE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AAwBD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAmEnE;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IACvC,oDAAoD;IACpD,QAAQ,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,iEAAiE;IACjE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;sDACkD;IAClD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB,GAAG,YAAY,CAgCf"}
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useMemo } from "react";
|
|
3
3
|
import { Typography, theme as antdTheme } from "antd";
|
|
4
4
|
import { Image } from "@stapel/image";
|
|
5
|
+
import { SkinCarousel } from "@stapel/tokens-antd/skin";
|
|
5
6
|
import { useT } from "@stapel/core";
|
|
6
7
|
import { radii, spacing } from "@stapel/tokens";
|
|
7
8
|
import { useListingsRuntime } from "../model/context.js";
|
|
@@ -55,4 +56,36 @@ export function ListingPhoto(props) {
|
|
|
55
56
|
...props.style,
|
|
56
57
|
} }));
|
|
57
58
|
}
|
|
59
|
+
/**
|
|
60
|
+
* A listing's photos as ONE swipeable strip — the shape every card surface in
|
|
61
|
+
* this pair uses, so there is one gallery and not three.
|
|
62
|
+
*
|
|
63
|
+
* ── Why the strip is never inside a card's anchor ──────────────────────────
|
|
64
|
+
*
|
|
65
|
+
* A `<SkinCarousel>` is a scroll container with its own tab stop, and a
|
|
66
|
+
* horizontal swipe that ends inside an `<a>` is a swipe the browser may
|
|
67
|
+
* deliver as a click: every attempt to look at photo two would open the
|
|
68
|
+
* listing. A link may not contain a control, and a swipeable strip is a
|
|
69
|
+
* control. So a card renders this as a SIBLING of its anchor and keeps the
|
|
70
|
+
* anchor around everything a person READS — which is the arrangement
|
|
71
|
+
* `<ListingSerpCard>` has shipped since it existed, and the one the live phone
|
|
72
|
+
* SERP was measured correct on while the desktop card (a still `<img>` inside
|
|
73
|
+
* the anchor, one photo, no dots) was not.
|
|
74
|
+
*
|
|
75
|
+
* A listing with no photos still gets one slide, so a row's height does not
|
|
76
|
+
* depend on whether a seller uploaded anything, and a ONE-photo strip gets
|
|
77
|
+
* neither peek nor dots: the sliver of a next slide is an affordance for
|
|
78
|
+
* something that is there.
|
|
79
|
+
*/
|
|
80
|
+
export function ListingPhotoStrip(props) {
|
|
81
|
+
const t = useT();
|
|
82
|
+
const { images, title } = props;
|
|
83
|
+
const many = images.length > 1;
|
|
84
|
+
return (_jsx(SkinCarousel, { label: t(LISTINGS_I18N_KEYS.cardPhotos), aspectRatio: LISTING_PHOTO_ASPECT, peek: many, dots: many, "data-testid": props.testId, children: images.length === 0 ? (_jsx(ListingPhoto, { imageRef: undefined, alt: title })) : (images.map((reference, index) => (_jsx(ListingPhoto, { imageRef: reference, alt: many
|
|
85
|
+
? t(LISTINGS_I18N_KEYS.detailPhotoAlt, {
|
|
86
|
+
index: index + 1,
|
|
87
|
+
total: images.length,
|
|
88
|
+
})
|
|
89
|
+
: title }, reference)))) }));
|
|
90
|
+
}
|
|
58
91
|
//# sourceMappingURL=ListingPhoto.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListingPhoto.js","sourceRoot":"","sources":["../../src/default/ListingPhoto.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ListingPhoto.js","sourceRoot":"","sources":["../../src/default/ListingPhoto.tsx"],"names":[],"mappings":"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"}
|
|
@@ -34,6 +34,17 @@
|
|
|
34
34
|
* covers the four things that identify the listing — price, title, specs,
|
|
35
35
|
* badges — so the card opens from everything a person reads.
|
|
36
36
|
*
|
|
37
|
+
* ── One column on a phone, one ROW on a desktop ───────────────────────────
|
|
38
|
+
*
|
|
39
|
+
* The card is still one per row; what changes with width is where the photo
|
|
40
|
+
* sits. Full-bleed above the text is right at 390px and wrong at 974px, where
|
|
41
|
+
* it makes the picture the whole screen and the offer a footnote — measured on
|
|
42
|
+
* the live desktop SERP as one card per scroll. Above
|
|
43
|
+
* {@link LISTING_CARD_ROW_MIN} the strip moves BESIDE the text at a fixed
|
|
44
|
+
* width, from the card's own `@container` query rather than a viewport
|
|
45
|
+
* breakpoint: this card knows how wide it is and has no business knowing how
|
|
46
|
+
* wide the window is.
|
|
47
|
+
*
|
|
37
48
|
* ── The two slots, and what they are honestly for ─────────────────────────
|
|
38
49
|
*
|
|
39
50
|
* `sellerSlot` is the seller's name and rating. It is a SLOT because a rating
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListingSerpCard.d.ts","sourceRoot":"","sources":["../../src/default/ListingSerpCard.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"ListingSerpCard.d.ts","sourceRoot":"","sources":["../../src/default/ListingSerpCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpE,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAoBtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAG7D,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEtE;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,6EAA6E;IAC7E,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,yEAAyE;IACzE,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,wBACf,SAAQ,aAAa,EACnB,oBAAoB;IACtB,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAC;IAClC;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,4EAA4E;IAC5E,QAAQ,CAAC,UAAU,CAAC,EAAE,iBAAiB,CAAC;IACxC;0CACsC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;IAChC;gEAC4D;IAC5D,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC;wDACoD;IACpD,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B;oEACgE;IAChE,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,GAAG,oBAAoB,CAAC;AAUnF,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAoMzE"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Card, Flex, Typography, theme as antdTheme } from "antd";
|
|
3
|
-
import {
|
|
3
|
+
import { SkinTheme } from "@stapel/tokens-antd/skin";
|
|
4
4
|
import { useT } from "@stapel/core";
|
|
5
5
|
import { fontSize, spacing } from "@stapel/tokens";
|
|
6
6
|
import { FeatureBadges } from "@stapel/attributes-react/default";
|
|
@@ -9,8 +9,8 @@ import { lifecycleCaption } from "../model/status.js";
|
|
|
9
9
|
import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
|
|
10
10
|
import { PriceTrendIcon } from "./icons.js";
|
|
11
11
|
import { FavoriteHeart } from "./favorite.js";
|
|
12
|
-
import { CARD_TARGET_STYLE_HREF, CardTarget, cardTargetCss, } from "./ListingCard.js";
|
|
13
|
-
import {
|
|
12
|
+
import { CARD_FRAME_CLASS, CARD_MAIN_CLASS, CARD_MEDIA_CLASS, CARD_QUERY_CLASS, CARD_TARGET_STYLE_HREF, CardTarget, cardTargetCss, } from "./ListingCard.js";
|
|
13
|
+
import { ListingPhotoStrip } from "./ListingPhoto.js";
|
|
14
14
|
import { ListingPrice } from "./ListingPrice.js";
|
|
15
15
|
/** The trailing column. Fixed width contribution: it must not take room from
|
|
16
16
|
* the text as the actions grow. */
|
|
@@ -40,21 +40,13 @@ export function ListingSerpCard(props) {
|
|
|
40
40
|
const targetLabel = title.length > 0 ? title : t(LISTINGS_I18N_KEYS.cardUntitled);
|
|
41
41
|
const photos = listing.images ?? [];
|
|
42
42
|
const currency = listing.currency !== undefined ? { currency: listing.currency } : {};
|
|
43
|
-
// A one-photo strip gets neither a peek nor dots: the sliver of a next slide
|
|
44
|
-
// is an affordance for something that is there, and on a single photo it is
|
|
45
|
-
// just a strip of dead space at the trailing edge (`SkinCarousel` says the
|
|
46
|
-
// same thing from its own side).
|
|
47
|
-
const many = photos.length > 1;
|
|
48
43
|
const rail = props.actionsRail !== undefined || props.showFavorite !== false ? (_jsxs(Flex, { vertical: true, align: "flex-end", gap: spacing[2], style: RAIL, "data-testid": "listings-serp-actions", children: [props.actionsRail, props.showFavorite === false ? null : (_jsx(FavoriteHeart, { listingId: listing.id, favorited: listing.is_favorited, testId: "listings-serp-favorite" }))] })) : null;
|
|
49
44
|
return (_jsxs(SkinTheme, { surface: "bare", ...(props.mode !== undefined ? { mode: props.mode } : {}), children: [_jsx("style", { href: CARD_TARGET_STYLE_HREF, precedence: "default", children: cardTargetCss() }), _jsx(Card, { size: "small", "data-testid": "listings-serp-card", "data-listing-id": listing.id, ...(status !== undefined
|
|
50
45
|
? { "data-listing-status": status.status }
|
|
51
|
-
: {}), styles: { body: { minWidth: 0, padding: token.paddingSM } }, style: { ["--listing-card-focus"]: token.colorPrimary }, children: _jsxs(
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
? LISTINGS_I18N_KEYS.cardPriceDropped
|
|
56
|
-
: LISTINGS_I18N_KEYS.cardPriceRaised) }))] }), priceTrend !== undefined && (_jsxs(Flex, { align: "baseline", gap: spacing[1], "data-testid": "listings-serp-old-price", children: [_jsx(Typography.Text, { type: "secondary", children: t(LISTINGS_I18N_KEYS.cardPriceWas) }), _jsx(Typography.Text, { type: "secondary", delete: true, children: _jsx(ListingPrice, { amount: priceTrend.oldPrice, ...currency }) })] })), _jsx(Typography.Text, { "data-testid": "listings-serp-title", children: title }), props.specsLine !== undefined && props.specsLine.length > 0 ? (_jsx(Typography.Text, { type: "secondary", ellipsis: true, "data-testid": "listings-serp-specs", children: props.specsLine })) : titleDaos.length > 0 ? (_jsx(Typography.Text, { type: "secondary", ellipsis: true, "data-testid": "listings-serp-specs", children: _jsx(FeatureBadges, { features: featuresFromDaoList(titleDaos, copy).map((view) => view.feature), values: featuresDtoFromDaoList(titleDaos) }) })) : null, badgeFeatures.length > 0 ? (_jsx(FeatureBadges, { features: badgeFeatures.map((view) => view.feature), values: badgeValues })) : null] }), props.sellerSlot ?? null, listing.location_label !== undefined &&
|
|
57
|
-
listing.location_label.length > 0 ? (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-serp-location", children: listing.location_label })) : null] }), rail] })] }) })] }));
|
|
46
|
+
: {}), styles: { body: { minWidth: 0, padding: token.paddingSM } }, style: { ["--listing-card-focus"]: token.colorPrimary }, children: _jsx("div", { className: CARD_QUERY_CLASS, children: _jsxs("div", { className: CARD_FRAME_CLASS, style: { gap: spacing[3] }, children: [_jsx("div", { className: CARD_MEDIA_CLASS, children: _jsx(ListingPhotoStrip, { images: photos, title: title.length > 0 ? title : String(listing.id), testId: "listings-serp-photos" }) }), _jsx("div", { className: CARD_MAIN_CLASS, children: _jsxs(Flex, { gap: spacing[3], align: "flex-start", children: [_jsxs(Flex, { vertical: true, gap: spacing[1], style: BODY, children: [_jsxs(CardTarget, { ...openProps(props), listingId: listing.id, label: targetLabel, testId: "listings-serp-open", bodyTestId: "listings-serp-body", children: [props.badge, _jsxs(Flex, { align: "center", gap: spacing[2], wrap: true, children: [_jsx(Typography.Text, { strong: true, style: { fontSize: fontSize.xl.fontSize }, "data-testid": "listings-serp-price", children: _jsx(ListingPrice, { amount: listing.price, ...currency }) }), priceTrend !== undefined && (_jsx(PriceTrendIcon, { direction: priceTrend.direction, label: t(priceTrend.direction === "down"
|
|
47
|
+
? LISTINGS_I18N_KEYS.cardPriceDropped
|
|
48
|
+
: LISTINGS_I18N_KEYS.cardPriceRaised) }))] }), priceTrend !== undefined && (_jsxs(Flex, { align: "baseline", gap: spacing[1], "data-testid": "listings-serp-old-price", children: [_jsx(Typography.Text, { type: "secondary", children: t(LISTINGS_I18N_KEYS.cardPriceWas) }), _jsx(Typography.Text, { type: "secondary", delete: true, children: _jsx(ListingPrice, { amount: priceTrend.oldPrice, ...currency }) })] })), _jsx(Typography.Text, { "data-testid": "listings-serp-title", children: title }), props.specsLine !== undefined && props.specsLine.length > 0 ? (_jsx(Typography.Text, { type: "secondary", ellipsis: true, "data-testid": "listings-serp-specs", children: props.specsLine })) : titleDaos.length > 0 ? (_jsx(Typography.Text, { type: "secondary", ellipsis: true, "data-testid": "listings-serp-specs", children: _jsx(FeatureBadges, { features: featuresFromDaoList(titleDaos, copy).map((view) => view.feature), values: featuresDtoFromDaoList(titleDaos) }) })) : null, badgeFeatures.length > 0 ? (_jsx(FeatureBadges, { features: badgeFeatures.map((view) => view.feature), values: badgeValues })) : null] }), props.sellerSlot ?? null, listing.location_label !== undefined &&
|
|
49
|
+
listing.location_label.length > 0 ? (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-serp-location", children: listing.location_label })) : null] }), rail] }) })] }) }) })] }));
|
|
58
50
|
}
|
|
59
51
|
/**
|
|
60
52
|
* The three-armed open union, narrowed back out of this card's own props.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListingSerpCard.js","sourceRoot":"","sources":["../../src/default/ListingSerpCard.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"ListingSerpCard.js","sourceRoot":"","sources":["../../src/default/ListingSerpCard.tsx"],"names":[],"mappings":"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"}
|
package/dist/default/index.d.ts
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
* that wrapped its own composition in `<ListingsSkinTheme>` imports
|
|
34
34
|
* `<SkinTheme>` from the substrate instead — same props, plus a `surface`.
|
|
35
35
|
*/
|
|
36
|
-
export { ListingCard } from "./ListingCard.js";
|
|
36
|
+
export { ListingCard, LISTING_CARD_ROW_MIN, LISTING_CARD_ROW_MEDIA, } from "./ListingCard.js";
|
|
37
37
|
export type { ListingCardProps, ListingCardBaseProps, ListingCardOpenProps, ListingCardBlockedReason, } from "./ListingCard.js";
|
|
38
38
|
export { ListingSerpCard } from "./ListingSerpCard.js";
|
|
39
39
|
export type { ListingSerpCardProps, ListingSerpCardBaseProps, ListingPriceTrend, } from "./ListingSerpCard.js";
|
|
@@ -51,7 +51,7 @@ export { FavoritesPane, FAVORITES_CARD_MIN } from "./FavoritesPane.js";
|
|
|
51
51
|
export type { FavoritesPaneProps, FavoritesPaneOpenProps, } from "./FavoritesPane.js";
|
|
52
52
|
export { LifecycleTag, ListingStatusBlock, ModerationNote } from "./StatusTags.js";
|
|
53
53
|
export type { ListingStatusProps } from "./StatusTags.js";
|
|
54
|
-
export { ListingPhoto, LISTING_PHOTO_ASPECT } from "./ListingPhoto.js";
|
|
54
|
+
export { ListingPhoto, ListingPhotoStrip, LISTING_PHOTO_ASPECT, } from "./ListingPhoto.js";
|
|
55
55
|
export type { ListingPhotoProps } from "./ListingPhoto.js";
|
|
56
56
|
export { SignInLink } from "./SignInLink.js";
|
|
57
57
|
export type { SignInLinkProps } from "./SignInLink.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/default/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EACL,WAAW,EAGX,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EACV,oBAAoB,EACpB,wBAAwB,EACxB,iBAAiB,GAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EACV,oBAAoB,EACpB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC5D,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC7F,YAAY,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EACL,mBAAmB,EACnB,0BAA0B,EAC1B,gBAAgB,EAChB,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,wBAAwB,EACxB,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,2BAA2B,GAC5B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACvE,YAAY,EACV,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACnF,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,YAAY,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
|
package/dist/default/index.js
CHANGED
|
@@ -33,7 +33,10 @@
|
|
|
33
33
|
* that wrapped its own composition in `<ListingsSkinTheme>` imports
|
|
34
34
|
* `<SkinTheme>` from the substrate instead — same props, plus a `surface`.
|
|
35
35
|
*/
|
|
36
|
-
export { ListingCard
|
|
36
|
+
export { ListingCard,
|
|
37
|
+
// The card's row arm, for a container that wants to lay out against the same
|
|
38
|
+
// threshold (and for a test that measures it). See `<ListingCard>`'s header.
|
|
39
|
+
LISTING_CARD_ROW_MIN, LISTING_CARD_ROW_MEDIA, } from "./ListingCard.js";
|
|
37
40
|
export { ListingSerpCard } from "./ListingSerpCard.js";
|
|
38
41
|
export { ListingFeedCard } from "./ListingFeedCard.js";
|
|
39
42
|
export { FeedGrid, FEED_GRID_COLUMNS } from "./FeedGrid.js";
|
|
@@ -42,6 +45,6 @@ export { ListingComposerPage, COMPOSER_DETAILS_PLACEMENT, COMPOSER_MEASURE, comp
|
|
|
42
45
|
export { MyListingsPane } from "./MyListingsPane.js";
|
|
43
46
|
export { FavoritesPane, FAVORITES_CARD_MIN } from "./FavoritesPane.js";
|
|
44
47
|
export { LifecycleTag, ListingStatusBlock, ModerationNote } from "./StatusTags.js";
|
|
45
|
-
export { ListingPhoto, LISTING_PHOTO_ASPECT } from "./ListingPhoto.js";
|
|
48
|
+
export { ListingPhoto, ListingPhotoStrip, LISTING_PHOTO_ASPECT, } from "./ListingPhoto.js";
|
|
46
49
|
export { SignInLink } from "./SignInLink.js";
|
|
47
50
|
//# sourceMappingURL=index.js.map
|