@stapel/listings-react 0.13.0 → 0.14.0

package/src/default/ListingSerpCard.tsx

@@ -34,6 +34,17 @@
  * covers the four things that identify the listing — price, title, specs,
  * badges — so the card opens from everything a person reads.
  *
+ * ── One column on a phone, one ROW on a desktop ───────────────────────────
+ *
+ * The card is still one per row; what changes with width is where the photo
+ * sits. Full-bleed above the text is right at 390px and wrong at 974px, where
+ * it makes the picture the whole screen and the offer a footnote — measured on
+ * the live desktop SERP as one card per scroll. Above
+ * {@link LISTING_CARD_ROW_MIN} the strip moves BESIDE the text at a fixed
+ * width, from the card's own `@container` query rather than a viewport
+ * breakpoint: this card knows how wide it is and has no business knowing how
+ * wide the window is.
+ *
  * ── The two slots, and what they are honestly for ─────────────────────────
  *
  * `sellerSlot` is the seller's name and rating. It is a SLOT because a rating
@@ -64,7 +75,7 @@
  */
 import type { CSSProperties, ReactElement, ReactNode } from "react";
 import { Card, Flex, Typography, theme as antdTheme } from "antd";
-import { SkinCarousel, SkinTheme } from "@stapel/tokens-antd/skin";
+import { SkinTheme } from "@stapel/tokens-antd/skin";
 import { useT } from "@stapel/core";
 import { fontSize, spacing } from "@stapel/tokens";
 import { FeatureBadges } from "@stapel/attributes-react/default";
@@ -80,12 +91,16 @@ import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
 import { PriceTrendIcon } from "./icons.js";
 import { FavoriteHeart } from "./favorite.js";
 import {
+  CARD_FRAME_CLASS,
+  CARD_MAIN_CLASS,
+  CARD_MEDIA_CLASS,
+  CARD_QUERY_CLASS,
   CARD_TARGET_STYLE_HREF,
   CardTarget,
   cardTargetCss,
 } from "./ListingCard.js";
 import type { ListingCardOpenProps } from "./ListingCard.js";
-import { LISTING_PHOTO_ASPECT, ListingPhoto } from "./ListingPhoto.js";
+import { ListingPhotoStrip } from "./ListingPhoto.js";
 import { ListingPrice } from "./ListingPrice.js";
 import type { CategoryFeaturesProp, ThemeModeProp } from "./types.js";
 
@@ -177,12 +192,6 @@ export function ListingSerpCard(props: ListingSerpCardProps): ReactElement {
   const currency =
     listing.currency !== undefined ? { currency: listing.currency } : {};
 
-  // A one-photo strip gets neither a peek nor dots: the sliver of a next slide
-  // is an affordance for something that is there, and on a single photo it is
-  // just a strip of dead space at the trailing edge (`SkinCarousel` says the
-  // same thing from its own side).
-  const many = photos.length > 1;
-
   const rail =
     props.actionsRail !== undefined || props.showFavorite !== false ? (
       <Flex
@@ -221,144 +230,130 @@ export function ListingSerpCard(props: ListingSerpCardProps): ReactElement {
         styles={{ body: { minWidth: 0, padding: token.paddingSM } }}
         style={{ ["--listing-card-focus" as string]: token.colorPrimary }}
       >
-        <Flex vertical gap={spacing[3]}>
-          {/* The strip is a SIBLING of the anchor, never a child — see the
-              file header. A listing with no photos still gets one slide, so
-              the card's height does not depend on whether a seller uploaded
-              anything. */}
-          <SkinCarousel
-            label={t(LISTINGS_I18N_KEYS.cardPhotos)}
-            aspectRatio={LISTING_PHOTO_ASPECT}
-            peek={many}
-            dots={many}
-            data-testid="listings-serp-photos"
-          >
-            {photos.length === 0 ? (
-              <ListingPhoto
-                imageRef={undefined}
-                alt={title.length > 0 ? title : String(listing.id)}
+        <div className={CARD_QUERY_CLASS}>
+          <div className={CARD_FRAME_CLASS} style={{ gap: spacing[3] }}>
+            {/* The strip is a SIBLING of the anchor, never a child — see the
+                file header. A listing with no photos still gets one slide, so
+                the card's height does not depend on whether a seller uploaded
+                anything. */}
+            <div className={CARD_MEDIA_CLASS}>
+              <ListingPhotoStrip
+                images={photos}
+                title={title.length > 0 ? title : String(listing.id)}
+                testId="listings-serp-photos"
               />
-            ) : (
-              photos.map((reference, index) => (
-                <ListingPhoto
-                  key={reference}
-                  imageRef={reference}
-                  alt={t(LISTINGS_I18N_KEYS.detailPhotoAlt, {
-                    index: index + 1,
-                    total: photos.length,
-                  })}
-                />
-              ))
-            )}
-          </SkinCarousel>
-
-          <Flex gap={spacing[3]} align="flex-start">
-            <Flex vertical gap={spacing[1]} style={BODY}>
-              <CardTarget
-                {...openProps(props)}
-                listingId={listing.id}
-                label={targetLabel}
-                testId="listings-serp-open"
-                bodyTestId="listings-serp-body"
-              >
-                {props.badge}
+            </div>
 
-                {/* PRICE FIRST, and loud. `fontSize.xl` rather than an antd
-                    heading: this is a price, not a section title, and it must
-                    not enter the document outline of a page holding twenty of
-                    them. */}
-                <Flex align="center" gap={spacing[2]} wrap>
-                  <Typography.Text
-                    strong
-                    style={{ fontSize: fontSize.xl.fontSize }}
-                    data-testid="listings-serp-price"
+            <div className={CARD_MAIN_CLASS}>
+              <Flex gap={spacing[3]} align="flex-start">
+                <Flex vertical gap={spacing[1]} style={BODY}>
+                  <CardTarget
+                    {...openProps(props)}
+                    listingId={listing.id}
+                    label={targetLabel}
+                    testId="listings-serp-open"
+                    bodyTestId="listings-serp-body"
                   >
-                    <ListingPrice amount={listing.price} {...currency} />
-                  </Typography.Text>
-                  {priceTrend !== undefined && (
-                    <PriceTrendIcon
-                      direction={priceTrend.direction}
-                      label={t(
-                        priceTrend.direction === "down"
-                          ? LISTINGS_I18N_KEYS.cardPriceDropped
-                          : LISTINGS_I18N_KEYS.cardPriceRaised
+                    {props.badge}
+
+                    {/* PRICE FIRST, and loud. `fontSize.xl` rather than an antd
+                        heading: this is a price, not a section title, and it must
+                        not enter the document outline of a page holding twenty of
+                        them. */}
+                    <Flex align="center" gap={spacing[2]} wrap>
+                      <Typography.Text
+                        strong
+                        style={{ fontSize: fontSize.xl.fontSize }}
+                        data-testid="listings-serp-price"
+                      >
+                        <ListingPrice amount={listing.price} {...currency} />
+                      </Typography.Text>
+                      {priceTrend !== undefined && (
+                        <PriceTrendIcon
+                          direction={priceTrend.direction}
+                          label={t(
+                            priceTrend.direction === "down"
+                              ? LISTINGS_I18N_KEYS.cardPriceDropped
+                              : LISTINGS_I18N_KEYS.cardPriceRaised
+                          )}
+                        />
                       )}
-                    />
-                  )}
-                </Flex>
+                    </Flex>
 
-                {priceTrend !== undefined && (
-                  <Flex
-                    align="baseline"
-                    gap={spacing[1]}
-                    data-testid="listings-serp-old-price"
-                  >
-                    {/* The strike-through is what a sighted reader sees and
-                        nothing a screen reader announces, so the word is on
-                        the line too rather than left to the styling. */}
-                    <Typography.Text type="secondary">
-                      {t(LISTINGS_I18N_KEYS.cardPriceWas)}
-                    </Typography.Text>
-                    <Typography.Text type="secondary" delete>
-                      <ListingPrice amount={priceTrend.oldPrice} {...currency} />
+                    {priceTrend !== undefined && (
+                      <Flex
+                        align="baseline"
+                        gap={spacing[1]}
+                        data-testid="listings-serp-old-price"
+                      >
+                        {/* The strike-through is what a sighted reader sees and
+                            nothing a screen reader announces, so the word is on
+                            the line too rather than left to the styling. */}
+                        <Typography.Text type="secondary">
+                          {t(LISTINGS_I18N_KEYS.cardPriceWas)}
+                        </Typography.Text>
+                        <Typography.Text type="secondary" delete>
+                          <ListingPrice amount={priceTrend.oldPrice} {...currency} />
+                        </Typography.Text>
+                      </Flex>
+                    )}
+
+                    <Typography.Text data-testid="listings-serp-title">
+                      {title}
                     </Typography.Text>
-                  </Flex>
-                )}
 
-                <Typography.Text data-testid="listings-serp-title">
-                  {title}
-                </Typography.Text>
+                    {props.specsLine !== undefined && props.specsLine.length > 0 ? (
+                      <Typography.Text
+                        type="secondary"
+                        ellipsis
+                        data-testid="listings-serp-specs"
+                      >
+                        {props.specsLine}
+                      </Typography.Text>
+                    ) : titleDaos.length > 0 ? (
+                      <Typography.Text
+                        type="secondary"
+                        ellipsis
+                        data-testid="listings-serp-specs"
+                      >
+                        <FeatureBadges
+                          features={featuresFromDaoList(titleDaos, copy).map(
+                            (view) => view.feature,
+                          )}
+                          values={featuresDtoFromDaoList(titleDaos)}
+                        />
+                      </Typography.Text>
+                    ) : null}
 
-                {props.specsLine !== undefined && props.specsLine.length > 0 ? (
-                  <Typography.Text
-                    type="secondary"
-                    ellipsis
-                    data-testid="listings-serp-specs"
-                  >
-                    {props.specsLine}
-                  </Typography.Text>
-                ) : titleDaos.length > 0 ? (
-                  <Typography.Text
-                    type="secondary"
-                    ellipsis
-                    data-testid="listings-serp-specs"
-                  >
-                    <FeatureBadges
-                      features={featuresFromDaoList(titleDaos, copy).map(
-                        (view) => view.feature,
-                      )}
-                      values={featuresDtoFromDaoList(titleDaos)}
-                    />
-                  </Typography.Text>
-                ) : null}
+                    {badgeFeatures.length > 0 ? (
+                      <FeatureBadges
+                        features={badgeFeatures.map((view) => view.feature)}
+                        values={badgeValues}
+                      />
+                    ) : null}
+                  </CardTarget>
 
-                {badgeFeatures.length > 0 ? (
-                  <FeatureBadges
-                    features={badgeFeatures.map((view) => view.feature)}
-                    values={badgeValues}
-                  />
-                ) : null}
-              </CardTarget>
+                  {/* Outside the anchor, both of them: a seller line usually holds
+                      a link to the seller, and the place is the last thing read
+                      rather than part of what the card is called. */}
+                  {props.sellerSlot ?? null}
 
-              {/* Outside the anchor, both of them: a seller line usually holds
-                  a link to the seller, and the place is the last thing read
-                  rather than part of what the card is called. */}
-              {props.sellerSlot ?? null}
-
-              {listing.location_label !== undefined &&
-              listing.location_label.length > 0 ? (
-                <Typography.Text
-                  type="secondary"
-                  data-testid="listings-serp-location"
-                >
-                  {listing.location_label}
-                </Typography.Text>
-              ) : null}
-            </Flex>
+                  {listing.location_label !== undefined &&
+                  listing.location_label.length > 0 ? (
+                    <Typography.Text
+                      type="secondary"
+                      data-testid="listings-serp-location"
+                    >
+                      {listing.location_label}
+                    </Typography.Text>
+                  ) : null}
+                </Flex>
 
-            {rail}
-          </Flex>
-        </Flex>
+                {rail}
+              </Flex>
+            </div>
+          </div>
+        </div>
       </Card>
     </SkinTheme>
   );

package/src/default/index.ts

@@ -33,7 +33,13 @@
  * that wrapped its own composition in `<ListingsSkinTheme>` imports
  * `<SkinTheme>` from the substrate instead — same props, plus a `surface`.
  */
-export { ListingCard } from "./ListingCard.js";
+export {
+  ListingCard,
+  // The card's row arm, for a container that wants to lay out against the same
+  // threshold (and for a test that measures it). See `<ListingCard>`'s header.
+  LISTING_CARD_ROW_MIN,
+  LISTING_CARD_ROW_MEDIA,
+} from "./ListingCard.js";
 export type {
   ListingCardProps,
   ListingCardBaseProps,
@@ -79,7 +85,11 @@ export type {
 
 export { LifecycleTag, ListingStatusBlock, ModerationNote } from "./StatusTags.js";
 export type { ListingStatusProps } from "./StatusTags.js";
-export { ListingPhoto, LISTING_PHOTO_ASPECT } from "./ListingPhoto.js";
+export {
+  ListingPhoto,
+  ListingPhotoStrip,
+  LISTING_PHOTO_ASPECT,
+} from "./ListingPhoto.js";
 export type { ListingPhotoProps } from "./ListingPhoto.js";
 export { SignInLink } from "./SignInLink.js";
 export type { SignInLinkProps } from "./SignInLink.js";