From 08d62624df4efacecd1f2e731b53ae2ee76df0e9 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 16 May 2025 18:02:15 +0100
Subject: [PATCH] Improve docs

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/app/(docs)/components/heading/page.mdx   | 16 ++++++++++++++++
 .../src/app/(docs)/components/heading/props.ts   |  4 ++++
 .../src/app/(docs)/components/text/page.mdx      | 15 +++++++++++++++
 .../src/app/(docs)/components/text/props.ts      |  4 ++++
 4 files changed, 39 insertions(+)

diff --git a/canon-docs/src/app/(docs)/components/heading/page.mdx b/canon-docs/src/app/(docs)/components/heading/page.mdx
index 10fd60bef1..e09bae9945 100644
--- a/canon-docs/src/app/(docs)/components/heading/page.mdx
+++ b/canon-docs/src/app/(docs)/components/heading/page.mdx
@@ -62,6 +62,22 @@ appearance of the heading.
 </Flex>`}
 />
 
+### Truncate
+
+The `Heading` component has a `truncate` prop that can be used to truncate the
+heading.
+
+<Snippet
+  py={2}
+  open
+  preview={<HeadingSnippet story="Truncate" />}
+  code={`<Heading style={{ maxWidth: '400px' }} truncate>
+    A man looks at a painting in a museum and says, “Brothers and sisters I
+    have none, but that man&apos;s father is my father's son.” Who is
+    in the painting?
+  </Heading>`}
+/>
+
 ### Responsive
 
 You can also use the `variant` prop to change the appearance of the text based
diff --git a/canon-docs/src/app/(docs)/components/heading/props.ts b/canon-docs/src/app/(docs)/components/heading/props.ts
index a3dd3288ff..6d62d2dee1 100644
--- a/canon-docs/src/app/(docs)/components/heading/props.ts
+++ b/canon-docs/src/app/(docs)/components/heading/props.ts
@@ -12,6 +12,10 @@ export const headingPropDefs: Record<string, PropDef> = {
     values: ['ReactNode'],
     responsive: false,
   },
+  truncate: {
+    type: 'boolean',
+    default: 'false',
+  },
   ...classNamePropDefs,
   ...stylePropDefs,
 };
diff --git a/canon-docs/src/app/(docs)/components/text/page.mdx b/canon-docs/src/app/(docs)/components/text/page.mdx
index 70d5de5504..85a783f4f3 100644
--- a/canon-docs/src/app/(docs)/components/text/page.mdx
+++ b/canon-docs/src/app/(docs)/components/text/page.mdx
@@ -102,6 +102,21 @@ appearance of the text.
   </Flex>`}
 />
 
+### Truncate
+
+The `Text` component has a `truncate` prop that can be used to truncate the
+text.
+
+<Snippet
+  open
+  preview={<TextSnippet story="Truncate" />}
+  code={`<Text weight="regular" style={{ maxWidth: '600px' }} truncate>
+    A man looks at a painting in a museum and says, “Brothers and sisters I
+    have none, but that man&apos;s father is my father&apos;s son.” Who is
+    in the painting?
+  </Text>`}
+/>
+
 ### Responsive
 
 You can also use the `variant` prop to change the appearance of the text based
diff --git a/canon-docs/src/app/(docs)/components/text/props.ts b/canon-docs/src/app/(docs)/components/text/props.ts
index 53413dc9e7..76c229af58 100644
--- a/canon-docs/src/app/(docs)/components/text/props.ts
+++ b/canon-docs/src/app/(docs)/components/text/props.ts
@@ -16,6 +16,10 @@ export const textPropDefs: Record<string, PropDef> = {
     values: ['regular', 'bold'],
     responsive: true,
   },
+  truncate: {
+    type: 'boolean',
+    default: 'false',
+  },
   ...childrenPropDefs,
   ...classNamePropDefs,
   ...stylePropDefs,