Improve docs

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

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

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,
 };

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

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,