@sensiblestats/widget-react 0.29.5 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sensiblestats/widget-react
 
+## 0.30.0
+
+### Minor Changes
+
+- 9d0b409: Replace the pre-match fixture card's W/D/L letter pills with a two-column "Team form" card: each of the last five results renders as a coloured scoreline card (subject crest, score, opponent crest), oriented by which side the team played on. `FixtureCardData.homeForm`/`awayForm` change from `string[]` to a new `FormMatch[]` shape (`result`, `teamScore`, `oppScore`, `teamIsHome`, `opponentCrestUrl`).
+
+### Patch Changes
+
+- Updated dependencies [9d0b409]
+  - @sensiblestats/widget-sdk@0.26.0
+
 ## 0.29.5
 
 ### Patch Changes

package/dist/index.cjs

@@ -1460,24 +1460,28 @@ function GreetingDashboard({ dashboard, onTap }) {
 
 // src/components/dashboard/FixtureCard.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-function resultClass(result) {
-  const upper = result.toUpperCase();
-  if (upper === "W") return "ss-w-fandash-form-pill--win";
-  if (upper === "L") return "ss-w-fandash-form-pill--loss";
-  return "ss-w-fandash-form-pill--draw";
-}
-function FormStrip({ form }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-form", children: form.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `ss-w-fandash-form-pill ${resultClass(r)}`, children: r }, `${r}-${i}`)) });
-}
-function FormRow({ name, form, crestUrl }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-formrow", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ss-w-fandash-formrow-team", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Crest2, { url: crestUrl ?? void 0, name, kind: "team" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-formrow-name", children: name })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FormStrip, { form })
+function teamFormResultClass(result) {
+  if (result === "W") return "ss-w-fandash-teamform-cell--win";
+  if (result === "L") return "ss-w-fandash-teamform-cell--loss";
+  return "ss-w-fandash-teamform-cell--draw";
+}
+function TeamFormCell({ m, subjectCrestUrl, subjectName }) {
+  const subjectCrest = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Crest2, { url: subjectCrestUrl ?? void 0, name: subjectName, kind: "team" });
+  const opponentCrest = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Crest2, { url: m.opponentCrestUrl ?? void 0, kind: "team" });
+  const score = m.teamIsHome ? `${m.teamScore} - ${m.oppScore}` : `${m.oppScore} - ${m.teamScore}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `ss-w-fandash-teamform-cell ${teamFormResultClass(m.result)}`, children: [
+    m.teamIsHome ? subjectCrest : opponentCrest,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-teamform-score", children: score }),
+    m.teamIsHome ? opponentCrest : subjectCrest
   ] });
 }
+var TEAM_FORM_ROWS = 5;
+function teamFormRows(data) {
+  return Array.from({ length: TEAM_FORM_ROWS }, (_, i) => i).flatMap((i) => [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-teamform-slot", children: data.homeForm[i] ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TeamFormCell, { m: data.homeForm[i], subjectCrestUrl: data.homeCrestUrl, subjectName: data.homeName }) : null }, `h-${i}`),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-teamform-slot", children: data.awayForm[i] ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TeamFormCell, { m: data.awayForm[i], subjectCrestUrl: data.awayCrestUrl, subjectName: data.awayName }) : null }, `a-${i}`)
+  ]);
+}
 function FixtureCard({ card }) {
   const { data } = card;
   const h2h = data.h2H;
@@ -1509,10 +1513,17 @@ function FixtureCard({ card }) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-lastfive", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-eyebrow", children: data.formLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-fixture-form", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FormRow, { name: data.homeName, form: data.homeForm, crestUrl: data.homeCrestUrl }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FormRow, { name: data.awayName, form: data.awayForm, crestUrl: data.awayCrestUrl })
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-teamform-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ss-w-fandash-teamform-head-team", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Crest2, { url: data.homeCrestUrl ?? void 0, name: data.homeName, kind: "team" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-teamform-head-name", children: data.homeName })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ss-w-fandash-teamform-head-team", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Crest2, { url: data.awayCrestUrl ?? void 0, name: data.awayName, kind: "team" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-fandash-teamform-head-name", children: data.awayName })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ss-w-fandash-teamform-rows", children: teamFormRows(data) })
     ] }),
     h2h || data.fact ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-h2h", children: [
       h2h ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
@@ -1902,7 +1913,7 @@ function RestingSeasonCard({ card, onTap }) {
 
 // src/components/dashboard/RestingFormCard.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-function resultClass2(result) {
+function resultClass(result) {
   const upper = result.toUpperCase();
   if (upper === "W") return "ss-w-fandash-form-pill--win";
   if (upper === "L") return "ss-w-fandash-form-pill--loss";
@@ -1912,7 +1923,7 @@ function RestingFormCard({ card }) {
   const { data } = card;
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-resting-form", children: [
     card.title ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ss-w-fandash-eyebrow", children: card.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ss-w-fandash-form", children: data.letters.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: `ss-w-fandash-form-pill ${resultClass2(r)}`, children: r }, `${r}-${i}`)) })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ss-w-fandash-form", children: data.letters.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: `ss-w-fandash-form-pill ${resultClass(r)}`, children: r }, `${r}-${i}`)) })
   ] });
 }
 
@@ -2801,13 +2812,25 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* extra breathing room between the tally row and the fact beyond the card's own gap */
 .ss-w-fandash-h2h .ss-w-fandash-fact { margin-top: 4px; }
 
-/* last-five: one row per side, team name left, form pills right */
-.ss-w-fandash-fixture-form { display: flex; flex-direction: column; gap: 5px; }
-.ss-w-fandash-formrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.ss-w-fandash-formrow-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.ss-w-fandash-formrow-team .ss-w-bi-crest { width: 20px; height: 20px; }
-.ss-w-fandash-formrow-team .ss-w-bi-crest-mono { font-size: 9px; }
-.ss-w-fandash-formrow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
+/* Team form: a two-column result-card grid, left = home team's last 5, right = away team's last 5,
+   most-recent first. The head row carries each column's crest + name; the rows grid is filled
+   home-cell/away-cell per index so the 2-col grid lays out pairs without extra JS bookkeeping. */
+.ss-w-fandash-teamform-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
+.ss-w-fandash-teamform-head-team { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; font-weight: 750; }
+.ss-w-fandash-teamform-head-team .ss-w-bi-crest { width: 18px; height: 18px; }
+.ss-w-fandash-teamform-head-team .ss-w-bi-crest-mono { font-size: 8px; }
+.ss-w-fandash-teamform-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-fandash-teamform-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 6px; }
+.ss-w-fandash-teamform-slot { display: block; min-width: 0; }
+.ss-w-fandash-teamform-cell {
+  display: flex; align-items: center; gap: 4px; border-radius: 7px; padding: 4px 5px; color: #fff;
+}
+.ss-w-fandash-teamform-cell--win { background: var(--ss-w-pos); }
+.ss-w-fandash-teamform-cell--loss { background: var(--ss-w-neg); }
+.ss-w-fandash-teamform-cell--draw { background: var(--ss-w-faint); }
+.ss-w-fandash-teamform-cell .ss-w-bi-crest { width: 16px; height: 16px; flex: none; background: rgba(255, 255, 255, .22); }
+.ss-w-fandash-teamform-cell .ss-w-bi-crest-mono { font-size: 7px; color: #fff; }
+.ss-w-fandash-teamform-score { flex: 1; text-align: center; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
 .ss-w-fandash-injuries-more { margin-top: 10px; width: 100%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); cursor: pointer; }
 .ss-w-fandash-injuries-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }
 .ss-w-fandash-form { display: inline-flex; gap: 3px; flex: none; }