@bytebrand/fe-ui-core-autobahn 1.0.2 → 1.0.3

package/cards/cardParts.tsx

@@ -495,35 +495,35 @@ export interface GalleryBadgesProps {
 
 /**
  * Trust/activity pill row rendered under the gallery on the SRP list card — mirrors the mobile
- * VDP gallery header (availability · views · favorites · Geprüft). Availability/views/favorites
- * are real data and each pill is omitted when its value isn't present yet; 'Geprüft' is auto.de's
- * general inspection/warranty promise (same claim as the legacy VDP trust strip, e.g.
- * VehicleDetailedSliderModal/Sidebar.tsx), not per-car data, so it always renders — it exists here
- * mainly so the row never looks empty while the async view/favorite counts are still loading.
+ * VDP gallery header (availability · views · favorites · Geprüft).
+ *
+ * PM decision (2026-07-10, Viktoriia — "this logic already exists on prod"): the row is all-or-
+ * nothing. A missing or zero view/favorite count is NOT shown as "0×" — the whole row (including
+ * the always-on availability/Geprüft pills) is hidden rather than reading as an empty/broken card.
+ * It only appears once BOTH counts are real and positive.
  */
-export const GalleryBadges: React.FunctionComponent<GalleryBadgesProps> = ({ car, t }) => (
-  <div className="gallery-badges">
-    {car.availability && (
-      <span className="gallery-pill gallery-pill--good">
-        <Icon name="circle-check" size={14} stroke={2} />
-        {car.availability}
-      </span>
-    )}
-    {car.viewsCount != null && (
+export const GalleryBadges: React.FunctionComponent<GalleryBadgesProps> = ({ car, t }) => {
+  if (!car.viewsCount || !car.favoritesCount) return null;
+  return (
+    <div className="gallery-badges">
+      {car.availability && (
+        <span className="gallery-pill">
+          <Icon name="circle-check" size={16} stroke={2} color="var(--md-good)" />
+          {car.availability}
+        </span>
+      )}
       <span className="gallery-pill">
-        <Icon name="eye" size={14} stroke={1.9} />
+        <Icon name="eye" size={16} stroke={1.9} />
         {t('autobahn:card.activity.viewsCount', { count: car.viewsCount })}
       </span>
-    )}
-    {car.favoritesCount != null && (
       <span className="gallery-pill">
-        <Icon name="heart" size={14} stroke={1.9} />
+        <Icon name="heart" size={16} stroke={1.9} />
         {t('autobahn:card.activity.favoritesCount', { count: car.favoritesCount })}
       </span>
-    )}
-    <span className="gallery-pill">
-      <Icon name="shield-check" size={14} stroke={1.9} />
-      {t('autobahn:card.trust.checked')}
-    </span>
-  </div>
-);
+      <span className="gallery-pill">
+        <Icon name="shield-check" size={16} stroke={1.9} />
+        {t('autobahn:card.trust.checked')}
+      </span>
+    </div>
+  );
+};

package/cards/types.ts

@@ -113,8 +113,10 @@ export interface AutobahnCar {
   views?: number;
 
   // --- gallery activity strip (real data: UserActionsAPI 'stats/viewers', loaded async and
-  //     keyed by carId in SearchResultsStore.statsData — see fieldMapping.ts). Absent until
-  //     that fetch resolves; the gallery badge row simply omits the pill until then. ---
+  //     keyed by carId in SearchResultsStore.statsData — see fieldMapping.ts). Absent until that
+  //     fetch resolves. PM decision: the WHOLE badge row (availability/views/favorites/Geprüft)
+  //     is all-or-nothing — it renders only when BOTH counts are present and > 0; a missing or
+  //     zero count hides the entire row rather than showing a "0×" pill (GalleryBadges). ---
   /** total detail-page views (stats totalCarImpCount) — shown as the eye pill under the image. */
   viewsCount?: number;
   /** total users who favorited this car (stats totalFavCount) — shown as the heart pill under the image. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",

package/theme/md3.css

@@ -1006,13 +1006,13 @@
 /* wraps the carousel + its absolute overlays; flexes to fill whatever height the badge row below
    doesn't need, so the row height stays governed by the grid (like before this row existed). */
 .md3 .listcard-media-img { position: relative; flex: 1 1 auto; min-height: 0; }
-/* activity/trust pill row under the SRP card image (availability · views · favorites · Geprüft) */
-.md3 .gallery-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px;
+/* activity/trust pill row under the SRP card image (availability · views · favorites · Geprüft).
+   Sizing/radius per Figma spec: 30px tall, 11px corner radius (NOT a full pill), 1px border. */
+.md3 .gallery-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px;
   border-top: 1px solid var(--md-outline-variant); background: var(--md-sc-lowest); flex: none; }
-.md3 .gallery-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
-  border-radius: var(--md-r-full); border: 1px solid var(--md-outline-variant); background: var(--md-sc-lowest);
-  color: var(--md-on-surface); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
-.md3 .gallery-pill--good { color: var(--md-good); border-color: var(--md-good); }
+.md3 .gallery-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
+  border-radius: 11px; border: 1px solid var(--md-outline-variant); background: var(--md-sc-lowest);
+  color: var(--md-on-surface); font-size: 13px; font-weight: 600; white-space: nowrap; }
 .md3 .listcard-info  { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
 .md3 .listcard-price { position: relative; padding: 16px 18px; border-left: 1px solid var(--md-outline-variant);
   display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; background: var(--md-sc-low); }