From 4a0fcd02943bd23b7fae8eca3e0750c1d96c1479 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Thu, 23 Apr 2026 12:30:38 +1000
Subject: [PATCH] Stories: mobile CompareBar + refreshed InCart description

- CompareBar: add Mobile and MobileSingle stories (viewport: mobile1)
  so the xs-only collapse / auto-peek behaviour is discoverable in
  Storybook without setting up a live basket.
- PackageDetail InCart story description updated to match the final
  toggle pattern (was stale from the earlier inert-pill attempt).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../CompareBar/CompareBar.stories.tsx         | 30 +++++++++++++++++++
 .../PackageDetail/PackageDetail.stories.tsx   |  9 ++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/components/molecules/CompareBar/CompareBar.stories.tsx b/src/components/molecules/CompareBar/CompareBar.stories.tsx
index 0b486dc..28b9a99 100644
--- a/src/components/molecules/CompareBar/CompareBar.stories.tsx
+++ b/src/components/molecules/CompareBar/CompareBar.stories.tsx
@@ -85,6 +85,36 @@ export const Empty: Story = {
   },
 };
 
+// --- Mobile ------------------------------------------------------------------
+
+/** Mobile viewport — expanded by default, with a grey-filled right-chevron
+ *  on the right of the pill. Tap the chevron to retract the pill to the
+ *  right corner (the middle content animates to width:0, so the pill
+ *  visually shrinks as one unit rather than swapping into a separate mini
+ *  pill). Tap the left-chevron on the collapsed pill to expand. On add
+ *  while collapsed, the full bar auto-peeks for 3s, then re-collapses. */
+export const Mobile: Story = {
+  args: {
+    packages: samplePackages.slice(0, 2),
+    onCompare: () => alert('Compare clicked'),
+  },
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+};
+
+/** Mobile — single package state. Same behaviour as `Mobile`, Compare
+ *  CTA disabled ("Add another to compare"). */
+export const MobileSingle: Story = {
+  args: {
+    packages: samplePackages.slice(0, 1),
+    onCompare: () => alert('Compare clicked'),
+  },
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+};
+
 // --- Interactive Demo --------------------------------------------------------
 
 /** Interactive demo — add packages and see the bar update */
diff --git a/src/components/organisms/PackageDetail/PackageDetail.stories.tsx b/src/components/organisms/PackageDetail/PackageDetail.stories.tsx
index cbae1aa..6431207 100644
--- a/src/components/organisms/PackageDetail/PackageDetail.stories.tsx
+++ b/src/components/organisms/PackageDetail/PackageDetail.stories.tsx
@@ -159,9 +159,12 @@ export const CompareLoading: Story = {
   },
 };
 
-/** "In comparison" selected state — package is already in the basket.
- *  The Compare button is swapped for a soft-brand-tinted inert pill
- *  with a check icon; removal happens via the CompareBar, not here. */
+/** "Added to comparison" state — package is already in the basket.
+ *  The Compare button keeps its default soft/secondary chrome + "Compare"
+ *  label, and gains a trailing check icon. Click is a toggle — the
+ *  caller wires `onCompare` to add-or-remove based on the `inCart` prop
+ *  it's passing in (e.g. via `basket.toggle(key)`). aria-pressed and the
+ *  aria-label spell out the state for SR users. */
 export const InCart: Story = {
   args: {
     name: 'Traditional Family Cremation Service',