@linktr.ee/messaging-react 3.33.0-rc-1786025179 → 3.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.33.0-rc-1786025179",
+  "version": "3.33.0",
   "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-1786025179",
+    "@linktr.ee/messaging-core": "^2.2.0",
     "@linktr.ee/messaging-taxonomy": "^0.5.2",
     "@phosphor-icons/react": "^2.1.10"
   },

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

@@ -650,3 +650,73 @@ export const AccentDerivation: StoryFn = () => (
 )
 
 AccentDerivation.parameters = { chromatic: { disableSnapshot: false } }
+
+/* ──────────────────────────────────────────────────────────────────
+   Description line clamp (descriptionLines)
+   ────────────────────────────────────────────────────────────────── */
+
+const CLAMP_CARD = {
+  title: 'A message from Brie Nala',
+  description:
+    'Thanks for reaching out! This is a longer prose body of the kind an official message carries — it runs past a single line and should wrap up to the clamp instead of clipping to one truncated line like a link preview.',
+  url: 'tr.ee/brienala',
+}
+
+const CLAMP_STATES = ['Received', 'Sent', 'Composer'] as const
+
+const renderClampCard = (
+  state: (typeof CLAMP_STATES)[number],
+  descriptionLines?: number
+) => {
+  if (state === 'Received') {
+    return (
+      <LinkAttachment.Received
+        layout="classic"
+        {...CLAMP_CARD}
+        descriptionLines={descriptionLines}
+      />
+    )
+  }
+  if (state === 'Sent') {
+    return (
+      <LinkAttachment.Sent
+        layout="classic"
+        {...CLAMP_CARD}
+        descriptionLines={descriptionLines}
+      />
+    )
+  }
+  return (
+    <LinkAttachment.Composer
+      layout="classic"
+      {...CLAMP_CARD}
+      descriptionLines={descriptionLines}
+      onDismiss={() => undefined}
+    />
+  )
+}
+
+/**
+ * `descriptionLines` — how many lines the description body renders before it
+ * clamps. The default (`1`) keeps the single-line `truncate` link-preview
+ * behaviour; `> 1` wraps via a webkit line-clamp so prose bodies (official
+ * messages) render multi-line like the mobile card. The URL footer stays
+ * single-line regardless. Snapshot target for that split across all states.
+ */
+export const DescriptionLines: StoryFn = () => (
+  <Table>
+    <TableHead columns={['default (1)', '2 lines', '3 lines']} />
+    <tbody>
+      {CLAMP_STATES.map((state) => (
+        <tr key={state}>
+          <RowLabel>{state}</RowLabel>
+          <td className="align-top">{renderClampCard(state)}</td>
+          <td className="align-top">{renderClampCard(state, 2)}</td>
+          <td className="align-top">{renderClampCard(state, 3)}</td>
+        </tr>
+      ))}
+    </tbody>
+  </Table>
+)
+
+DescriptionLines.parameters = { chromatic: { disableSnapshot: false } }

package/src/components/LinkAttachment/components/_shared/CardBody.tsx

@@ -123,9 +123,8 @@ const CardBody: React.FC<CardBodyProps> = ({
     chinTextColor == null && SECONDARY_CLASS_BY_VARIANT[variant]
   )
 
-  // The description clamps to `descriptionLines` (default 1 = single-line truncate). >1 wraps via a
-  // webkit line-clamp so prose bodies (official messages) render multi-line like the mobile card. The
-  // URL footer always stays single-line (`secondaryClass`).
+  // Single-line `truncate` at the default; >1 clamps via `descriptionStyle` below. The URL footer
+  // keeps `secondaryClass` so it always stays single-line.
   const descriptionClass = classNames(
     'text-[12px] leading-4 tracking-[0.24px]',
     descriptionLines <= 1 && 'truncate',