Text - Typography wrappers (#18956)

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
Co-authored-by: Martin Hochel <Hotell@users.noreply.github.com>

Author: 3 people

packages/react-text/bundle-size/Text.Default.fixture.js

@@ -0,0 +1,7 @@
+import { Text } from '@fluentui/react-text';
+
+console.log(Text);
+
+export default {
+  name: 'Text - Default',
+};

packages/react-text/bundle-size/Text.Wrappers.fixture.js

@@ -0,0 +1,17 @@
+import {
+  Display,
+  LargeTitle,
+  Title1,
+  Title2,
+  Title3,
+  Headline,
+  Subheadline,
+  Body,
+  Caption,
+} from '@fluentui/react-text';
+
+console.log(Display, LargeTitle, Title1, Title2, Title3, Headline, Subheadline, Body, Caption);
+
+export default {
+  name: 'Text - Wrappers',
+};

packages/react-text/etc/react-text.api.md

@@ -6,35 +6,51 @@
 
 import { ComponentPropsCompat } from '@fluentui/react-utilities';
 import { ComponentStateCompat } from '@fluentui/react-utilities';
+import { ForwardRefExoticComponent } from 'react';
 import { MakeStylesStyleFunctionRule } from '@fluentui/make-styles';
 import * as React_2 from 'react';
+import { RefAttributes } from 'react';
 import { Theme } from '@fluentui/react-theme';
 
 // @public (undocumented)
 const body: MakeStylesStyleFunctionRule<Theme>;
 
+// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
+//
+// @public
+const Body_2: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+export { Body_2 as Body }
+
+// @public
+export const Caption: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+
 // @public
 const caption: MakeStylesStyleFunctionRule<Theme>;
 
 // @public
-export const Display: React_2.ForwardRefExoticComponent<DisplayProps & React_2.RefAttributes<HTMLElement>>;
+export const Display: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
 
 // @public (undocumented)
 const display: MakeStylesStyleFunctionRule<Theme>;
 
 // @public
-export interface DisplayProps extends Omit<TextProps, 'font' | 'size'> {
-}
+export const Headline: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
 
 // @public (undocumented)
 const headline: MakeStylesStyleFunctionRule<Theme>;
 
+// @public
+export const LargeTitle: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+
 // @public (undocumented)
 const largeTitle: MakeStylesStyleFunctionRule<Theme>;
 
 // @public
 export const renderText: (state: TextState) => JSX.Element;
 
+// @public
+export const Subheadline: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+
 // @public (undocumented)
 const subheadline: MakeStylesStyleFunctionRule<Theme>;
 
@@ -65,12 +81,21 @@ export interface TextState extends ComponentStateCompat<TextProps, TextDefaulted
     ref: React_2.Ref<HTMLElement>;
 }
 
+// @public
+export const Title1: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+
 // @public (undocumented)
 const title1: MakeStylesStyleFunctionRule<Theme>;
 
+// @public
+export const Title2: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+
 // @public (undocumented)
 const title2: MakeStylesStyleFunctionRule<Theme>;
 
+// @public
+export const Title3: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+
 // @public (undocumented)
 const title3: MakeStylesStyleFunctionRule<Theme>;
 

packages/react-text/src/Body.ts

@@ -0,0 +1 @@
+export * from './components/Body/index';

packages/react-text/src/Caption.ts

@@ -0,0 +1 @@
+export * from './components/Caption/index';

packages/react-text/src/Headline.ts

@@ -0,0 +1 @@
+export * from './components/Headline/index';

packages/react-text/src/LargeTitle.ts

@@ -0,0 +1 @@
+export * from './components/LargeTitle/index';

packages/react-text/src/Subheadline.ts

@@ -0,0 +1 @@
+export * from './components/Subheadline/index';

packages/react-text/src/TextWrappers.stories.mdx

@@ -1,9 +1,17 @@
-import { Display } from './components/Display';
+import { Display, LargeTitle, Title1, Title2, Title3, Headline, Subheadline, Body, Caption } from './index';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
 
 <Meta title="Components/Text/Wrappers" />
 
 <FluentProvider theme={webLightTheme}>
   <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>
 </FluentProvider>

packages/react-text/src/Title1.ts

@@ -0,0 +1 @@
+export * from './components/Title1/index';