@linktr.ee/messaging-react 3.32.0-rc-1786000762 → 3.32.0-rc-1786001289

package/dist/index.d.ts

@@ -755,8 +755,8 @@ export declare interface LinkAttachmentCta {
      * (which controls bubble side, not button emphasis).
      *
      * NOTE: this is the presentational half only. The wire-format value should
-     * ride the shared action contract (see docs/plans/interactive-surfaces-contract.md
-     * — `InteractiveAction`), not be re-invented per surface.
+     * ride the shared interactive-surfaces action contract (the `InteractiveAction`
+     * shape), not be re-invented per surface.
      */
     variant?: 'primary' | 'secondary';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.32.0-rc-1786000762",
+  "version": "3.32.0-rc-1786001289",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.4.0-rc-1786000762",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1786001289",
     "@linktr.ee/messaging-taxonomy": "^0.5.1",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/LinkAttachment/LinkAttachment.stories.tsx

@@ -262,6 +262,87 @@ const ACCENT_CARD = {
   thumbnailUrl: IMAGE_THUMBNAIL,
 }
 
+/**
+ * CTA emphasis — `cta.variant`. `primary` (default) is the filled button;
+ * `secondary` is the subtle/grey button used by the official-channel cards.
+ * Shown on both surfaces, and over an accent-derived chin: the translucent
+ * `secondary` fills (`bg-white/15`, `bg-black/[0.06]`) composite against the
+ * extracted colour, whereas the opaque `primary` fill is accent-independent —
+ * the bottom rows are the Chromatic guard for that legibility difference.
+ */
+export const CtaEmphasis: StoryFn = () => {
+  const cta = (label: string, variant?: 'primary' | 'secondary') => ({
+    label,
+    onClick: () => alert(`Tapped ${label}`),
+    ...(variant ? { variant } : {}),
+  })
+  return (
+    <Table>
+      <TableHead columns={['primary (default)', 'secondary']} />
+      <tbody>
+        <tr>
+          <RowLabel>Received (light)</RowLabel>
+          <td className="align-top">
+            <LinkAttachment.Received {...ACCENT_CARD} cta={cta('Add now')} />
+          </td>
+          <td className="align-top">
+            <LinkAttachment.Received
+              {...ACCENT_CARD}
+              cta={cta('Add now', 'secondary')}
+            />
+          </td>
+        </tr>
+        <tr>
+          <RowLabel>Sent (dark)</RowLabel>
+          <td className="align-top">
+            <LinkAttachment.Sent {...ACCENT_CARD} cta={cta('Add now')} />
+          </td>
+          <td className="align-top">
+            <LinkAttachment.Sent
+              {...ACCENT_CARD}
+              cta={cta('Add now', 'secondary')}
+            />
+          </td>
+        </tr>
+        <tr>
+          <RowLabel>Received + accent chin</RowLabel>
+          <td className="align-top">
+            <LinkAttachment.Received
+              {...ACCENT_CARD}
+              accentColor="#7008E7"
+              cta={cta('Add now')}
+            />
+          </td>
+          <td className="align-top">
+            <LinkAttachment.Received
+              {...ACCENT_CARD}
+              accentColor="#7008E7"
+              cta={cta('Add now', 'secondary')}
+            />
+          </td>
+        </tr>
+        <tr>
+          <RowLabel>Sent + accent chin</RowLabel>
+          <td className="align-top">
+            <LinkAttachment.Sent
+              {...ACCENT_CARD}
+              accentColor="#7008E7"
+              cta={cta('Add now')}
+            />
+          </td>
+          <td className="align-top">
+            <LinkAttachment.Sent
+              {...ACCENT_CARD}
+              accentColor="#7008E7"
+              cta={cta('Add now', 'secondary')}
+            />
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
 /**
  * The dominant-colour card and its WCAG AA gate (MES-1349, corrected MES-1388).
  *

package/src/components/LinkAttachment/types.ts

@@ -118,8 +118,8 @@ export interface LinkAttachmentCta {
    * (which controls bubble side, not button emphasis).
    *
    * NOTE: this is the presentational half only. The wire-format value should
-   * ride the shared action contract (see docs/plans/interactive-surfaces-contract.md
-   * — `InteractiveAction`), not be re-invented per surface.
+   * ride the shared interactive-surfaces action contract (the `InteractiveAction`
+   * shape), not be re-invented per surface.
    */
   variant?: 'primary' | 'secondary'
 }