Text - Typography wrappers

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';

packages/react-text/src/Title2.ts

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

packages/react-text/src/Title3.ts

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

packages/react-text/src/components/Body/Body.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Body } from './Body';
+import { isConformant } from '../../common/isConformant';
+
+describe('Body', () => {
+  isConformant({
+    Component: Body,
+    displayName: 'Body',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Body>Default Body</Body>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-text/src/components/Body/Body.tsx

@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.body,
+});
+
+/**
+ * Text wrapper component for the Body typography variant
+ */
+export const Body = createWrapper({ useStyles, displayName: 'Body' });

packages/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Body renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default Body
+  </span>
+</div>
+`;

packages/react-text/src/components/Body/index.ts

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

packages/react-text/src/components/Caption/Caption.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Caption } from './Caption';
+import { isConformant } from '../../common/isConformant';
+
+describe('Caption', () => {
+  isConformant({
+    Component: Caption,
+    displayName: 'Caption',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Caption>Default Caption</Caption>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-text/src/components/Caption/Caption.tsx

@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.caption,
+});
+
+/**
+ * Text wrapper component for the Caption typography variant
+ */
+export const Caption = createWrapper({ useStyles, displayName: 'Caption' });

packages/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Caption renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default Caption
+  </span>
+</div>
+`;

packages/react-text/src/components/Caption/index.ts

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

packages/react-text/src/components/Display/Display.tsx

@@ -1,8 +1,6 @@
-import * as React from 'react';
-import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
-import { renderText, useText, useTextStyles } from '../Text/index';
+import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
-import { DisplayProps } from './Display.types';
+import { createWrapper } from '../wrapper';
 
 /**
  * Styles for the root slot
@@ -14,14 +12,4 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Display typography variant
  */
-export const Display = React.forwardRef<HTMLElement, DisplayProps>((props, ref) => {
-  const styles = useStyles();
-  const state = useText(props, ref);
-  useTextStyles(state);
-
-  state.className = mergeClasses(state.className, styles.root, props.className);
-
-  return renderText(state);
-});
-
-Display.displayName = 'Display';
+export const Display = createWrapper({ useStyles, displayName: 'Display' });

packages/react-text/src/components/Display/index.ts

@@ -1,2 +1 @@
 export * from './Display';
-export * from './Display.types';

packages/react-text/src/components/Headline/Headline.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Headline } from './Headline';
+import { isConformant } from '../../common/isConformant';
+
+describe('Headline', () => {
+  isConformant({
+    Component: Headline,
+    displayName: 'Headline',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Headline>Default Headline</Headline>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-text/src/components/Headline/Headline.tsx

@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.headline,
+});
+
+/**
+ * Text wrapper component for the Headline typography variant
+ */
+export const Headline = createWrapper({ useStyles, displayName: 'Headline' });

packages/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Headline renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default Headline
+  </span>
+</div>
+`;

packages/react-text/src/components/Headline/index.ts

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

packages/react-text/src/components/LargeTitle/LargeTitle.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { LargeTitle } from './LargeTitle';
+import { isConformant } from '../../common/isConformant';
+
+describe('LargeTitle', () => {
+  isConformant({
+    Component: LargeTitle,
+    displayName: 'LargeTitle',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<LargeTitle>Default LargeTitle</LargeTitle>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-text/src/components/LargeTitle/LargeTitle.tsx

@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.largeTitle,
+});
+
+/**
+ * Text wrapper component for the Large Title typography variant
+ */
+export const LargeTitle = createWrapper({ useStyles, displayName: 'LargeTitle' });

packages/react-text/src/components/LargeTitle/__snapshots__/LargeTitle.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LargeTitle renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default LargeTitle
+  </span>
+</div>
+`;

packages/react-text/src/components/LargeTitle/index.ts

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

packages/react-text/src/components/Subheadline/Subheadline.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Subheadline } from './Subheadline';
+import { isConformant } from '../../common/isConformant';
+
+describe('Subheadline', () => {
+  isConformant({
+    Component: Subheadline,
+    displayName: 'Subheadline',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Subheadline>Default Subheadline</Subheadline>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-text/src/components/Subheadline/Subheadline.tsx

@@ -0,0 +1,15 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import { typographyStyles } from '../../index';
+import { createWrapper } from '../wrapper';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.subheadline,
+});
+
+/**
+ * Text wrapper component for the Subheadline typography variant
+ */
+export const Subheadline = createWrapper({ useStyles, displayName: 'Subheadline' });