chore(Text): Add docs for each prop and new typography story (#20502)

* chore(Text): Add docs for each prop and new typography story

* remove mdx

* Change files

* add codesandbox dep for typography

* Update change/@fluentui-react-text-8e9536d4-ec33-44d4-abc3-f2cc51633f53.json

* Update change/@fluentui-react-text-8e9536d4-ec33-44d4-abc3-f2cc51633f53.json

change/@fluentui-react-text-8e9536d4-ec33-44d4-abc3-f2cc51633f53.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(Text): Add docs for each prop and new typography story",
+  "packageName": "@fluentui/react-text",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "none"
+}

packages/react-text/src/stories/Text.stories.tsx

@@ -2,7 +2,16 @@ import { Meta } from '@storybook/react';
 import { Text } from '../Text';
 import textDescriptionMd from './TextDescription.md';
 import textBestPractices from './TextBestPractices.md';
+
 export { Default } from './Default.stories';
+export { Typography } from './TextTypography.stories';
+export { Italic } from './TextItalic.stories';
+export { Underline } from './TextUnderline.stories';
+export { StrikeThrough } from './TextStrikeThrough.stories';
+export { Weight } from './TextWeight.stories';
+export { Size } from './TextSize.stories';
+export { Truncate } from './TextTruncate.stories';
+export { Font } from './TextFont.stories';
 
 export default {
   title: 'Components/Text',

packages/react-text/src/stories/TextFont.stories.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+
+export const Font = () => (
+  <div style={{ display: 'flex', gap: 20 }}>
+    <Text font="base">This is the default font</Text>
+    <Text font="numeric">This is numeric font</Text>
+    <Text font="monospace">This is monospace font</Text>
+  </div>
+);

packages/react-text/src/stories/TextItalic.stories.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+
+export const Italic = () => <Text italic>Italic text</Text>;

packages/react-text/src/stories/TextSize.stories.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+
+export const Size = () => (
+  <div style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>
+    <Text size={100}> 100 </Text>
+    <Text size={200}> 200 </Text>
+    <Text size={300}> 300 </Text>
+    <Text size={400}> 400 </Text>
+    <Text size={500}> 500 </Text>
+    <Text size={600}> 600 </Text>
+    <Text size={700}> 700 </Text>
+    <Text size={800}> 800 </Text>
+    <Text size={900}> 900 </Text>
+    <Text size={1000}>1000 </Text>
+  </div>
+);

packages/react-text/src/stories/TextStrikeThrough.stories.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+
+export const StrikeThrough = () => <Text strikethrough>Strikethrough text</Text>;

packages/react-text/src/stories/TextTruncate.stories.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+
+export const Truncate = () => (
+  <Text truncate style={{ width: 100, overflow: 'hidden', whiteSpace: 'nowrap' }} block>
+    This is a really really really really long text
+  </Text>
+);

packages/react-text/src/stories/TextTypography.stories.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Body, Caption, Display, Headline, LargeTitle, Title1, Title2, Title3, Subheadline } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+
+export const Typography = () => (
+  <>
+    <Display block>Display text wrapper, semibold, base1000</Display>
+    <LargeTitle block>LargeTitle text wrapper, semibold, base900</LargeTitle>
+    <Title1 block>Title1 text wrapper, semibold, base800</Title1>
+    <Title2 block>Title2 text wrapper, semibold, base700</Title2>
+    <Title3 block>Title3 text wrapper, semibold, base600</Title3>
+    <Headline block>Headline text wrapper, semibold, base500</Headline>
+    <Subheadline block>Subheadline text wrapper, semibold, base400</Subheadline>
+    <Body block>Body text wrapper, regular, base300</Body>
+    <Caption block>Caption text wrapper, regular, base200</Caption>
+  </>
+);
+
+Typography.parameters = {
+  docs: {
+    description: {
+      story: [
+        'Different typography components can be used that are based on the `Text` components.',
+        'They all share the same props and behaviours that are documented here.',
+      ].join('\n'),
+    },
+  },
+};

packages/react-text/src/stories/TextUnderline.stories.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+
+export const Underline = () => <Text underline>Underlined text</Text>;

packages/react-text/src/stories/TextWeight.stories.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Text } from '../index'; // codesandbox-dependency: @fluentui/react-text ^9.0.0-beta
+
+export const Weight = () => (
+  <div style={{ display: 'flex', gap: 20 }}>
+    <Text weight="regular">Regular weight</Text>
+    <Text weight="medium">Medium weight</Text>
+    <Text weight="semibold">Semibold weight</Text>
+  </div>
+);