@fluentui/react-text 0.0.0-nightly-20220302-0405.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +1510 -0
- package/CHANGELOG.md +538 -0
- package/LICENSE +15 -0
- package/MIGRATION.md +730 -0
- package/README.md +99 -0
- package/Spec.md +162 -0
- package/assets/typography-examples.gif +0 -0
- package/dist/react-text.d.ts +183 -0
- package/lib/Body.d.ts +1 -0
- package/lib/Body.js +2 -0
- package/lib/Body.js.map +1 -0
- package/lib/Caption.d.ts +1 -0
- package/lib/Caption.js +2 -0
- package/lib/Caption.js.map +1 -0
- package/lib/Display.d.ts +1 -0
- package/lib/Display.js +2 -0
- package/lib/Display.js.map +1 -0
- package/lib/Headline.d.ts +1 -0
- package/lib/Headline.js +2 -0
- package/lib/Headline.js.map +1 -0
- package/lib/LargeTitle.d.ts +1 -0
- package/lib/LargeTitle.js +2 -0
- package/lib/LargeTitle.js.map +1 -0
- package/lib/Subheadline.d.ts +1 -0
- package/lib/Subheadline.js +2 -0
- package/lib/Subheadline.js.map +1 -0
- package/lib/Text.d.ts +1 -0
- package/lib/Text.js +2 -0
- package/lib/Text.js.map +1 -0
- package/lib/Title1.d.ts +1 -0
- package/lib/Title1.js +2 -0
- package/lib/Title1.js.map +1 -0
- package/lib/Title2.d.ts +1 -0
- package/lib/Title2.js +2 -0
- package/lib/Title2.js.map +1 -0
- package/lib/Title3.d.ts +1 -0
- package/lib/Title3.js +2 -0
- package/lib/Title3.js.map +1 -0
- package/lib/components/Body/Body.d.ts +7 -0
- package/lib/components/Body/Body.js +29 -0
- package/lib/components/Body/Body.js.map +1 -0
- package/lib/components/Body/index.d.ts +1 -0
- package/lib/components/Body/index.js +2 -0
- package/lib/components/Body/index.js.map +1 -0
- package/lib/components/Caption/Caption.d.ts +7 -0
- package/lib/components/Caption/Caption.js +29 -0
- package/lib/components/Caption/Caption.js.map +1 -0
- package/lib/components/Caption/index.d.ts +1 -0
- package/lib/components/Caption/index.js +2 -0
- package/lib/components/Caption/index.js.map +1 -0
- package/lib/components/Display/Display.d.ts +7 -0
- package/lib/components/Display/Display.js +29 -0
- package/lib/components/Display/Display.js.map +1 -0
- package/lib/components/Display/index.d.ts +1 -0
- package/lib/components/Display/index.js +2 -0
- package/lib/components/Display/index.js.map +1 -0
- package/lib/components/Headline/Headline.d.ts +7 -0
- package/lib/components/Headline/Headline.js +29 -0
- package/lib/components/Headline/Headline.js.map +1 -0
- package/lib/components/Headline/index.d.ts +1 -0
- package/lib/components/Headline/index.js +2 -0
- package/lib/components/Headline/index.js.map +1 -0
- package/lib/components/LargeTitle/LargeTitle.d.ts +7 -0
- package/lib/components/LargeTitle/LargeTitle.js +29 -0
- package/lib/components/LargeTitle/LargeTitle.js.map +1 -0
- package/lib/components/LargeTitle/index.d.ts +1 -0
- package/lib/components/LargeTitle/index.js +2 -0
- package/lib/components/LargeTitle/index.js.map +1 -0
- package/lib/components/Subheadline/Subheadline.d.ts +7 -0
- package/lib/components/Subheadline/Subheadline.js +29 -0
- package/lib/components/Subheadline/Subheadline.js.map +1 -0
- package/lib/components/Subheadline/index.d.ts +1 -0
- package/lib/components/Subheadline/index.js +2 -0
- package/lib/components/Subheadline/index.js.map +1 -0
- package/lib/components/Text/Text.d.ts +6 -0
- package/lib/components/Text/Text.js +15 -0
- package/lib/components/Text/Text.js.map +1 -0
- package/lib/components/Text/Text.types.d.ts +78 -0
- package/lib/components/Text/Text.types.js +2 -0
- package/lib/components/Text/Text.types.js.map +1 -0
- package/lib/components/Text/index.d.ts +5 -0
- package/lib/components/Text/index.js +6 -0
- package/lib/components/Text/index.js.map +1 -0
- package/lib/components/Text/renderText.d.ts +5 -0
- package/lib/components/Text/renderText.js +15 -0
- package/lib/components/Text/renderText.js.map +1 -0
- package/lib/components/Text/useText.d.ts +12 -0
- package/lib/components/Text/useText.js +50 -0
- package/lib/components/Text/useText.js.map +1 -0
- package/lib/components/Text/useTextStyles.d.ts +6 -0
- package/lib/components/Text/useTextStyles.js +114 -0
- package/lib/components/Text/useTextStyles.js.map +1 -0
- package/lib/components/Title1/Title1.d.ts +7 -0
- package/lib/components/Title1/Title1.js +29 -0
- package/lib/components/Title1/Title1.js.map +1 -0
- package/lib/components/Title1/index.d.ts +1 -0
- package/lib/components/Title1/index.js +2 -0
- package/lib/components/Title1/index.js.map +1 -0
- package/lib/components/Title2/Title2.d.ts +7 -0
- package/lib/components/Title2/Title2.js +29 -0
- package/lib/components/Title2/Title2.js.map +1 -0
- package/lib/components/Title2/index.d.ts +1 -0
- package/lib/components/Title2/index.js +2 -0
- package/lib/components/Title2/index.js.map +1 -0
- package/lib/components/Title3/Title3.d.ts +7 -0
- package/lib/components/Title3/Title3.js +29 -0
- package/lib/components/Title3/Title3.js.map +1 -0
- package/lib/components/Title3/index.d.ts +1 -0
- package/lib/components/Title3/index.js +2 -0
- package/lib/components/Title3/index.js.map +1 -0
- package/lib/components/wrapper.d.ts +8 -0
- package/lib/components/wrapper.js +20 -0
- package/lib/components/wrapper.js.map +1 -0
- package/lib/index.d.ts +10 -0
- package/lib/index.js +11 -0
- package/lib/index.js.map +1 -0
- package/lib/tsdoc-metadata.json +11 -0
- package/lib/typographyStyles/index.d.ts +2 -0
- package/lib/typographyStyles/index.js +3 -0
- package/lib/typographyStyles/index.js.map +1 -0
- package/lib/typographyStyles/typographyStyles.d.ts +13 -0
- package/lib/typographyStyles/typographyStyles.js +60 -0
- package/lib/typographyStyles/typographyStyles.js.map +1 -0
- package/lib-commonjs/Body.d.ts +1 -0
- package/lib-commonjs/Body.js +10 -0
- package/lib-commonjs/Body.js.map +1 -0
- package/lib-commonjs/Caption.d.ts +1 -0
- package/lib-commonjs/Caption.js +10 -0
- package/lib-commonjs/Caption.js.map +1 -0
- package/lib-commonjs/Display.d.ts +1 -0
- package/lib-commonjs/Display.js +10 -0
- package/lib-commonjs/Display.js.map +1 -0
- package/lib-commonjs/Headline.d.ts +1 -0
- package/lib-commonjs/Headline.js +10 -0
- package/lib-commonjs/Headline.js.map +1 -0
- package/lib-commonjs/LargeTitle.d.ts +1 -0
- package/lib-commonjs/LargeTitle.js +10 -0
- package/lib-commonjs/LargeTitle.js.map +1 -0
- package/lib-commonjs/Subheadline.d.ts +1 -0
- package/lib-commonjs/Subheadline.js +10 -0
- package/lib-commonjs/Subheadline.js.map +1 -0
- package/lib-commonjs/Text.d.ts +1 -0
- package/lib-commonjs/Text.js +10 -0
- package/lib-commonjs/Text.js.map +1 -0
- package/lib-commonjs/Title1.d.ts +1 -0
- package/lib-commonjs/Title1.js +10 -0
- package/lib-commonjs/Title1.js.map +1 -0
- package/lib-commonjs/Title2.d.ts +1 -0
- package/lib-commonjs/Title2.js +10 -0
- package/lib-commonjs/Title2.js.map +1 -0
- package/lib-commonjs/Title3.d.ts +1 -0
- package/lib-commonjs/Title3.js +10 -0
- package/lib-commonjs/Title3.js.map +1 -0
- package/lib-commonjs/components/Body/Body.d.ts +7 -0
- package/lib-commonjs/components/Body/Body.js +30 -0
- package/lib-commonjs/components/Body/Body.js.map +1 -0
- package/lib-commonjs/components/Body/index.d.ts +1 -0
- package/lib-commonjs/components/Body/index.js +10 -0
- package/lib-commonjs/components/Body/index.js.map +1 -0
- package/lib-commonjs/components/Caption/Caption.d.ts +7 -0
- package/lib-commonjs/components/Caption/Caption.js +30 -0
- package/lib-commonjs/components/Caption/Caption.js.map +1 -0
- package/lib-commonjs/components/Caption/index.d.ts +1 -0
- package/lib-commonjs/components/Caption/index.js +10 -0
- package/lib-commonjs/components/Caption/index.js.map +1 -0
- package/lib-commonjs/components/Display/Display.d.ts +7 -0
- package/lib-commonjs/components/Display/Display.js +30 -0
- package/lib-commonjs/components/Display/Display.js.map +1 -0
- package/lib-commonjs/components/Display/index.d.ts +1 -0
- package/lib-commonjs/components/Display/index.js +10 -0
- package/lib-commonjs/components/Display/index.js.map +1 -0
- package/lib-commonjs/components/Headline/Headline.d.ts +7 -0
- package/lib-commonjs/components/Headline/Headline.js +30 -0
- package/lib-commonjs/components/Headline/Headline.js.map +1 -0
- package/lib-commonjs/components/Headline/index.d.ts +1 -0
- package/lib-commonjs/components/Headline/index.js +10 -0
- package/lib-commonjs/components/Headline/index.js.map +1 -0
- package/lib-commonjs/components/LargeTitle/LargeTitle.d.ts +7 -0
- package/lib-commonjs/components/LargeTitle/LargeTitle.js +30 -0
- package/lib-commonjs/components/LargeTitle/LargeTitle.js.map +1 -0
- package/lib-commonjs/components/LargeTitle/index.d.ts +1 -0
- package/lib-commonjs/components/LargeTitle/index.js +10 -0
- package/lib-commonjs/components/LargeTitle/index.js.map +1 -0
- package/lib-commonjs/components/Subheadline/Subheadline.d.ts +7 -0
- package/lib-commonjs/components/Subheadline/Subheadline.js +30 -0
- package/lib-commonjs/components/Subheadline/Subheadline.js.map +1 -0
- package/lib-commonjs/components/Subheadline/index.d.ts +1 -0
- package/lib-commonjs/components/Subheadline/index.js +10 -0
- package/lib-commonjs/components/Subheadline/index.js.map +1 -0
- package/lib-commonjs/components/Text/Text.d.ts +6 -0
- package/lib-commonjs/components/Text/Text.js +26 -0
- package/lib-commonjs/components/Text/Text.js.map +1 -0
- package/lib-commonjs/components/Text/Text.types.d.ts +78 -0
- package/lib-commonjs/components/Text/Text.types.js +6 -0
- package/lib-commonjs/components/Text/Text.types.js.map +1 -0
- package/lib-commonjs/components/Text/index.d.ts +5 -0
- package/lib-commonjs/components/Text/index.js +18 -0
- package/lib-commonjs/components/Text/index.js.map +1 -0
- package/lib-commonjs/components/Text/renderText.d.ts +5 -0
- package/lib-commonjs/components/Text/renderText.js +26 -0
- package/lib-commonjs/components/Text/renderText.js.map +1 -0
- package/lib-commonjs/components/Text/useText.d.ts +12 -0
- package/lib-commonjs/components/Text/useText.js +60 -0
- package/lib-commonjs/components/Text/useText.js.map +1 -0
- package/lib-commonjs/components/Text/useTextStyles.d.ts +6 -0
- package/lib-commonjs/components/Text/useTextStyles.js +125 -0
- package/lib-commonjs/components/Text/useTextStyles.js.map +1 -0
- package/lib-commonjs/components/Title1/Title1.d.ts +7 -0
- package/lib-commonjs/components/Title1/Title1.js +30 -0
- package/lib-commonjs/components/Title1/Title1.js.map +1 -0
- package/lib-commonjs/components/Title1/index.d.ts +1 -0
- package/lib-commonjs/components/Title1/index.js +10 -0
- package/lib-commonjs/components/Title1/index.js.map +1 -0
- package/lib-commonjs/components/Title2/Title2.d.ts +7 -0
- package/lib-commonjs/components/Title2/Title2.js +30 -0
- package/lib-commonjs/components/Title2/Title2.js.map +1 -0
- package/lib-commonjs/components/Title2/index.d.ts +1 -0
- package/lib-commonjs/components/Title2/index.js +10 -0
- package/lib-commonjs/components/Title2/index.js.map +1 -0
- package/lib-commonjs/components/Title3/Title3.d.ts +7 -0
- package/lib-commonjs/components/Title3/Title3.js +30 -0
- package/lib-commonjs/components/Title3/Title3.js.map +1 -0
- package/lib-commonjs/components/Title3/index.d.ts +1 -0
- package/lib-commonjs/components/Title3/index.js +10 -0
- package/lib-commonjs/components/Title3/index.js.map +1 -0
- package/lib-commonjs/components/wrapper.d.ts +8 -0
- package/lib-commonjs/components/wrapper.js +32 -0
- package/lib-commonjs/components/wrapper.js.map +1 -0
- package/lib-commonjs/index.d.ts +10 -0
- package/lib-commonjs/index.js +28 -0
- package/lib-commonjs/index.js.map +1 -0
- package/lib-commonjs/typographyStyles/index.d.ts +2 -0
- package/lib-commonjs/typographyStyles/index.js +11 -0
- package/lib-commonjs/typographyStyles/index.js.map +1 -0
- package/lib-commonjs/typographyStyles/typographyStyles.d.ts +13 -0
- package/lib-commonjs/typographyStyles/typographyStyles.js +68 -0
- package/lib-commonjs/typographyStyles/typographyStyles.js.map +1 -0
- package/package.json +63 -0
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/Caption/Caption.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,OAAO,gBAAwC,aAAa,CAAC;AACxE,EAAA,SADwE;AAExE,EAAA,SAAS,EAAE,gBAF6D;AAGxE,EAAA,WAAW,EAAE;AAH2D,CAAD,CAAlE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const captionClassName = 'fui-Caption';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: typographyStyles.caption,\n});\n\n/**\n * Text wrapper component for the Caption typography variant\n */\nexport const Caption: FunctionComponent<TextWrapperProps> = createWrapper({\n useStyles,\n className: captionClassName,\n displayName: 'Caption',\n});\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './Caption';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Caption/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC","sourcesContent":["export * from './Caption';\n"]}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import type { FunctionComponent } from 'react';
|
2
|
+
import { TextWrapperProps } from '../wrapper';
|
3
|
+
export declare const displayClassName = "fui-Display";
|
4
|
+
/**
|
5
|
+
* Text wrapper component for the Display typography variant
|
6
|
+
*/
|
7
|
+
export declare const Display: FunctionComponent<TextWrapperProps>;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import { __styles } from '@griffel/react';
|
2
|
+
import { typographyStyles } from '../../typographyStyles/index';
|
3
|
+
import { createWrapper } from '../wrapper';
|
4
|
+
export const displayClassName = 'fui-Display';
|
5
|
+
/**
|
6
|
+
* Styles for the root slot
|
7
|
+
*/
|
8
|
+
|
9
|
+
const useStyles = /*#__PURE__*/__styles({
|
10
|
+
"root": {
|
11
|
+
"Bahqtrf": "fk6fouc",
|
12
|
+
"Be2twd7": "fpyltcb",
|
13
|
+
"Bg96gwp": "f1ivgwrt",
|
14
|
+
"Bhrd7zp": "fl43uef"
|
15
|
+
}
|
16
|
+
}, {
|
17
|
+
"d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fpyltcb{font-size:var(--fontSizeHero1000);}", ".f1ivgwrt{line-height:var(--lineHeightHero1000);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
|
18
|
+
});
|
19
|
+
/**
|
20
|
+
* Text wrapper component for the Display typography variant
|
21
|
+
*/
|
22
|
+
|
23
|
+
|
24
|
+
export const Display = /*#__PURE__*/createWrapper({
|
25
|
+
useStyles,
|
26
|
+
className: displayClassName,
|
27
|
+
displayName: 'Display'
|
28
|
+
});
|
29
|
+
//# sourceMappingURL=Display.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/Display/Display.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,OAAO,gBAAwC,aAAa,CAAC;AACxE,EAAA,SADwE;AAExE,EAAA,SAAS,EAAE,gBAF6D;AAGxE,EAAA,WAAW,EAAE;AAH2D,CAAD,CAAlE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const displayClassName = 'fui-Display';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: typographyStyles.display,\n});\n\n/**\n * Text wrapper component for the Display typography variant\n */\nexport const Display: FunctionComponent<TextWrapperProps> = createWrapper({\n useStyles,\n className: displayClassName,\n displayName: 'Display',\n});\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './Display';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Display/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC","sourcesContent":["export * from './Display';\n"]}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import type { FunctionComponent } from 'react';
|
2
|
+
import { TextWrapperProps } from '../wrapper';
|
3
|
+
export declare const headlineClassName = "fui-Headline";
|
4
|
+
/**
|
5
|
+
* Text wrapper component for the Headline typography variant
|
6
|
+
*/
|
7
|
+
export declare const Headline: FunctionComponent<TextWrapperProps>;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import { __styles } from '@griffel/react';
|
2
|
+
import { typographyStyles } from '../../typographyStyles/index';
|
3
|
+
import { createWrapper } from '../wrapper';
|
4
|
+
export const headlineClassName = 'fui-Headline';
|
5
|
+
/**
|
6
|
+
* Styles for the root slot
|
7
|
+
*/
|
8
|
+
|
9
|
+
const useStyles = /*#__PURE__*/__styles({
|
10
|
+
"root": {
|
11
|
+
"Bahqtrf": "fk6fouc",
|
12
|
+
"Be2twd7": "f1pp30po",
|
13
|
+
"Bg96gwp": "f106mvju",
|
14
|
+
"Bhrd7zp": "fl43uef"
|
15
|
+
}
|
16
|
+
}, {
|
17
|
+
"d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
|
18
|
+
});
|
19
|
+
/**
|
20
|
+
* Text wrapper component for the Headline typography variant
|
21
|
+
*/
|
22
|
+
|
23
|
+
|
24
|
+
export const Headline = /*#__PURE__*/createWrapper({
|
25
|
+
useStyles,
|
26
|
+
className: headlineClassName,
|
27
|
+
displayName: 'Headline'
|
28
|
+
});
|
29
|
+
//# sourceMappingURL=Headline.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/Headline/Headline.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,iBAAiB,GAAG,cAA1B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,QAAQ,gBAAwC,aAAa,CAAC;AACzE,EAAA,SADyE;AAEzE,EAAA,SAAS,EAAE,iBAF8D;AAGzE,EAAA,WAAW,EAAE;AAH4D,CAAD,CAAnE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const headlineClassName = 'fui-Headline';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: typographyStyles.headline,\n});\n\n/**\n * Text wrapper component for the Headline typography variant\n */\nexport const Headline: FunctionComponent<TextWrapperProps> = createWrapper({\n useStyles,\n className: headlineClassName,\n displayName: 'Headline',\n});\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './Headline';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Headline/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC","sourcesContent":["export * from './Headline';\n"]}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import type { FunctionComponent } from 'react';
|
2
|
+
import { TextWrapperProps } from '../wrapper';
|
3
|
+
export declare const largeTitleClassName = "fui-LargeTitle";
|
4
|
+
/**
|
5
|
+
* Text wrapper component for the Large Title typography variant
|
6
|
+
*/
|
7
|
+
export declare const LargeTitle: FunctionComponent<TextWrapperProps>;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import { __styles } from '@griffel/react';
|
2
|
+
import { typographyStyles } from '../../typographyStyles/index';
|
3
|
+
import { createWrapper } from '../wrapper';
|
4
|
+
export const largeTitleClassName = 'fui-LargeTitle';
|
5
|
+
/**
|
6
|
+
* Styles for the root slot
|
7
|
+
*/
|
8
|
+
|
9
|
+
const useStyles = /*#__PURE__*/__styles({
|
10
|
+
"root": {
|
11
|
+
"Bahqtrf": "fk6fouc",
|
12
|
+
"Be2twd7": "f15afnhw",
|
13
|
+
"Bg96gwp": "fr3w3wp",
|
14
|
+
"Bhrd7zp": "fl43uef"
|
15
|
+
}
|
16
|
+
}, {
|
17
|
+
"d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f15afnhw{font-size:var(--fontSizeHero900);}", ".fr3w3wp{line-height:var(--lineHeightHero900);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
|
18
|
+
});
|
19
|
+
/**
|
20
|
+
* Text wrapper component for the Large Title typography variant
|
21
|
+
*/
|
22
|
+
|
23
|
+
|
24
|
+
export const LargeTitle = /*#__PURE__*/createWrapper({
|
25
|
+
useStyles,
|
26
|
+
className: largeTitleClassName,
|
27
|
+
displayName: 'LargeTitle'
|
28
|
+
});
|
29
|
+
//# sourceMappingURL=LargeTitle.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/LargeTitle/LargeTitle.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,UAAU,gBAAwC,aAAa,CAAC;AAC3E,EAAA,SAD2E;AAE3E,EAAA,SAAS,EAAE,mBAFgE;AAG3E,EAAA,WAAW,EAAE;AAH8D,CAAD,CAArE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const largeTitleClassName = 'fui-LargeTitle';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: typographyStyles.largeTitle,\n});\n\n/**\n * Text wrapper component for the Large Title typography variant\n */\nexport const LargeTitle: FunctionComponent<TextWrapperProps> = createWrapper({\n useStyles,\n className: largeTitleClassName,\n displayName: 'LargeTitle',\n});\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './LargeTitle';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/LargeTitle/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './LargeTitle';\n"]}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import type { FunctionComponent } from 'react';
|
2
|
+
import { TextWrapperProps } from '../wrapper';
|
3
|
+
export declare const subheadlineClassName = "fui-Subheadline";
|
4
|
+
/**
|
5
|
+
* Text wrapper component for the Subheadline typography variant
|
6
|
+
*/
|
7
|
+
export declare const Subheadline: FunctionComponent<TextWrapperProps>;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import { __styles } from '@griffel/react';
|
2
|
+
import { typographyStyles } from '../../typographyStyles/index';
|
3
|
+
import { createWrapper } from '../wrapper';
|
4
|
+
export const subheadlineClassName = 'fui-Subheadline';
|
5
|
+
/**
|
6
|
+
* Styles for the root slot
|
7
|
+
*/
|
8
|
+
|
9
|
+
const useStyles = /*#__PURE__*/__styles({
|
10
|
+
"root": {
|
11
|
+
"Bahqtrf": "fk6fouc",
|
12
|
+
"Be2twd7": "fod5ikn",
|
13
|
+
"Bg96gwp": "faaz57k",
|
14
|
+
"Bhrd7zp": "fl43uef"
|
15
|
+
}
|
16
|
+
}, {
|
17
|
+
"d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"]
|
18
|
+
});
|
19
|
+
/**
|
20
|
+
* Text wrapper component for the Subheadline typography variant
|
21
|
+
*/
|
22
|
+
|
23
|
+
|
24
|
+
export const Subheadline = /*#__PURE__*/createWrapper({
|
25
|
+
useStyles,
|
26
|
+
className: subheadlineClassName,
|
27
|
+
displayName: 'Subheadline'
|
28
|
+
});
|
29
|
+
//# sourceMappingURL=Subheadline.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/Subheadline/Subheadline.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,WAAW,gBAAwC,aAAa,CAAC;AAC5E,EAAA,SAD4E;AAE5E,EAAA,SAAS,EAAE,oBAFiE;AAG5E,EAAA,WAAW,EAAE;AAH+D,CAAD,CAAtE","sourcesContent":["import type { FunctionComponent } from 'react';\nimport { makeStyles } from '@griffel/react';\nimport { typographyStyles } from '../../typographyStyles/index';\nimport { createWrapper, TextWrapperProps } from '../wrapper';\n\nexport const subheadlineClassName = 'fui-Subheadline';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: typographyStyles.subheadline,\n});\n\n/**\n * Text wrapper component for the Subheadline typography variant\n */\nexport const Subheadline: FunctionComponent<TextWrapperProps> = createWrapper({\n useStyles,\n className: subheadlineClassName,\n displayName: 'Subheadline',\n});\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './Subheadline';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Subheadline/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './Subheadline';\n"]}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import type { TextProps } from './Text.types';
|
2
|
+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
+
/**
|
4
|
+
* Typography and styling abstraction component used to ensure consistency of text.
|
5
|
+
*/
|
6
|
+
export declare const Text: ForwardRefComponent<TextProps>;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { useText_unstable } from './useText';
|
3
|
+
import { renderText_unstable } from './renderText';
|
4
|
+
import { useTextStyles_unstable } from './useTextStyles';
|
5
|
+
/**
|
6
|
+
* Typography and styling abstraction component used to ensure consistency of text.
|
7
|
+
*/
|
8
|
+
|
9
|
+
export const Text = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
|
+
const state = useText_unstable(props, ref);
|
11
|
+
useTextStyles_unstable(state);
|
12
|
+
return renderText_unstable(state); // Work around some small mismatches in inferred types which don't matter in practice
|
13
|
+
});
|
14
|
+
Text.displayName = 'Text';
|
15
|
+
//# sourceMappingURL=Text.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;AAEA,EAAA,sBAAsB,CAAC,KAAD,CAAtB;AAEA,SAAO,mBAAmB,CAAC,KAAD,CAA1B,CALkF,CAMlF;AACD,CAPmD,CAA7C;AASP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useText_unstable } from './useText';\nimport { renderText_unstable } from './renderText';\nimport { useTextStyles_unstable } from './useTextStyles';\nimport type { TextProps } from './Text.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Typography and styling abstraction component used to ensure consistency of text.\n */\nexport const Text: ForwardRefComponent<TextProps> = React.forwardRef((props, ref) => {\n const state = useText_unstable(props, ref);\n\n useTextStyles_unstable(state);\n\n return renderText_unstable(state);\n // Work around some small mismatches in inferred types which don't matter in practice\n}) as ForwardRefComponent<TextProps>;\n\nText.displayName = 'Text';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,78 @@
|
|
1
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
2
|
+
/**
|
3
|
+
* Text slots
|
4
|
+
*/
|
5
|
+
export declare type TextSlots = {
|
6
|
+
root: Slot<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
|
7
|
+
};
|
8
|
+
declare type TextCommons = {
|
9
|
+
/**
|
10
|
+
* Wraps the text content on white spaces.
|
11
|
+
*
|
12
|
+
* @defaultValue true
|
13
|
+
*/
|
14
|
+
wrap: boolean;
|
15
|
+
/**
|
16
|
+
* Truncate overflowing text for block displays.
|
17
|
+
*
|
18
|
+
* @defaultValue false
|
19
|
+
*/
|
20
|
+
truncate: boolean;
|
21
|
+
/**
|
22
|
+
* Applies a block display for the content.
|
23
|
+
*
|
24
|
+
* @defaultValue false
|
25
|
+
*/
|
26
|
+
block: boolean;
|
27
|
+
/**
|
28
|
+
* Applies the italic font style to the content.
|
29
|
+
*
|
30
|
+
* @defaultValue false
|
31
|
+
*/
|
32
|
+
italic: boolean;
|
33
|
+
/**
|
34
|
+
* Applies the underline text decoration to the content.
|
35
|
+
*
|
36
|
+
* @defaultValue false
|
37
|
+
*/
|
38
|
+
underline: boolean;
|
39
|
+
/**
|
40
|
+
* Applies the strikethrough text decoration to the content.
|
41
|
+
*
|
42
|
+
* @defaultValue false
|
43
|
+
*/
|
44
|
+
strikethrough: boolean;
|
45
|
+
/**
|
46
|
+
* Applies font size and line height based on the theme tokens.
|
47
|
+
*
|
48
|
+
* @defaultValue 300
|
49
|
+
*/
|
50
|
+
size: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
|
51
|
+
/**
|
52
|
+
* Applies the font family to the content.
|
53
|
+
*
|
54
|
+
* @defaultValue base
|
55
|
+
*/
|
56
|
+
font: 'base' | 'monospace' | 'numeric';
|
57
|
+
/**
|
58
|
+
* Applies font weight to the content.
|
59
|
+
*
|
60
|
+
* @defaultValue regular
|
61
|
+
*/
|
62
|
+
weight: 'regular' | 'medium' | 'semibold';
|
63
|
+
/**
|
64
|
+
* Aligns text based on the parent container.
|
65
|
+
*
|
66
|
+
* @defaultValue start
|
67
|
+
*/
|
68
|
+
align: 'start' | 'center' | 'end' | 'justify';
|
69
|
+
};
|
70
|
+
/**
|
71
|
+
* Text Props
|
72
|
+
*/
|
73
|
+
export declare type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>;
|
74
|
+
/**
|
75
|
+
* State used in rendering Text
|
76
|
+
*/
|
77
|
+
export declare type TextState = ComponentState<TextSlots> & TextCommons;
|
78
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Text.types.js","sourceRoot":"../src/","sources":["components/Text/Text.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Text slots\n */\nexport type TextSlots = {\n root: Slot<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;\n};\n\ntype TextCommons = {\n /**\n * Wraps the text content on white spaces.\n *\n * @defaultValue true\n */\n wrap: boolean;\n\n /**\n * Truncate overflowing text for block displays.\n *\n * @defaultValue false\n */\n truncate: boolean;\n\n /**\n * Applies a block display for the content.\n *\n * @defaultValue false\n */\n block: boolean;\n\n /**\n * Applies the italic font style to the content.\n *\n * @defaultValue false\n */\n italic: boolean;\n\n /**\n * Applies the underline text decoration to the content.\n *\n * @defaultValue false\n */\n underline: boolean;\n\n /**\n * Applies the strikethrough text decoration to the content.\n *\n * @defaultValue false\n */\n strikethrough: boolean;\n\n /**\n * Applies font size and line height based on the theme tokens.\n *\n * @defaultValue 300\n */\n size: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;\n\n /**\n * Applies the font family to the content.\n *\n * @defaultValue base\n */\n font: 'base' | 'monospace' | 'numeric';\n\n /**\n * Applies font weight to the content.\n *\n * @defaultValue regular\n */\n weight: 'regular' | 'medium' | 'semibold';\n\n /**\n * Aligns text based on the parent container.\n *\n * @defaultValue start\n */\n align: 'start' | 'center' | 'end' | 'justify';\n};\n\n/**\n * Text Props\n */\nexport type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>;\n\n/**\n * State used in rendering Text\n */\nexport type TextState = ComponentState<TextSlots> & TextCommons;\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './Text';\nexport * from './Text.types';\nexport * from './renderText';\nexport * from './useText';\nexport * from './useTextStyles';\n"]}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { getSlots } from '@fluentui/react-utilities';
|
3
|
+
/**
|
4
|
+
* Render the final JSX of Text
|
5
|
+
*/
|
6
|
+
|
7
|
+
export const renderText_unstable = state => {
|
8
|
+
const {
|
9
|
+
slots,
|
10
|
+
slotProps
|
11
|
+
} = getSlots(state);
|
12
|
+
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
13
|
+
});
|
14
|
+
};
|
15
|
+
//# sourceMappingURL=renderText.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/Text/renderText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAqB;AACtD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAY,KAAZ,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TextSlots, TextState } from './Text.types';\n\n/**\n * Render the final JSX of Text\n */\nexport const renderText_unstable = (state: TextState) => {\n const { slots, slotProps } = getSlots<TextSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import type { TextProps, TextState } from './Text.types';
|
3
|
+
/**
|
4
|
+
* Create the state required to render Text.
|
5
|
+
*
|
6
|
+
* The returned state can be modified with hooks such as useTextStyles_unstable,
|
7
|
+
* before being passed to renderText_unstable.
|
8
|
+
*
|
9
|
+
* @param props - props from this instance of Text
|
10
|
+
* @param ref - reference to root HTMLElement of Text
|
11
|
+
*/
|
12
|
+
export declare const useText_unstable: (props: TextProps, ref: React.Ref<HTMLElement>) => TextState;
|
@@ -0,0 +1,50 @@
|
|
1
|
+
import { getNativeElementProps } from '@fluentui/react-utilities';
|
2
|
+
/**
|
3
|
+
* Create the state required to render Text.
|
4
|
+
*
|
5
|
+
* The returned state can be modified with hooks such as useTextStyles_unstable,
|
6
|
+
* before being passed to renderText_unstable.
|
7
|
+
*
|
8
|
+
* @param props - props from this instance of Text
|
9
|
+
* @param ref - reference to root HTMLElement of Text
|
10
|
+
*/
|
11
|
+
|
12
|
+
export const useText_unstable = (props, ref) => {
|
13
|
+
var _a;
|
14
|
+
|
15
|
+
const {
|
16
|
+
wrap,
|
17
|
+
truncate,
|
18
|
+
block,
|
19
|
+
italic,
|
20
|
+
underline,
|
21
|
+
strikethrough,
|
22
|
+
size,
|
23
|
+
font,
|
24
|
+
weight,
|
25
|
+
align
|
26
|
+
} = props;
|
27
|
+
const as = (_a = props.as) !== null && _a !== void 0 ? _a : 'span';
|
28
|
+
const state = {
|
29
|
+
wrap: wrap !== null && wrap !== void 0 ? wrap : true,
|
30
|
+
truncate: truncate !== null && truncate !== void 0 ? truncate : false,
|
31
|
+
block: block !== null && block !== void 0 ? block : false,
|
32
|
+
italic: italic !== null && italic !== void 0 ? italic : false,
|
33
|
+
underline: underline !== null && underline !== void 0 ? underline : false,
|
34
|
+
strikethrough: strikethrough !== null && strikethrough !== void 0 ? strikethrough : false,
|
35
|
+
size: size !== null && size !== void 0 ? size : 300,
|
36
|
+
font: font !== null && font !== void 0 ? font : 'base',
|
37
|
+
weight: weight !== null && weight !== void 0 ? weight : 'regular',
|
38
|
+
align: align !== null && align !== void 0 ? align : 'start',
|
39
|
+
components: {
|
40
|
+
root: 'span'
|
41
|
+
},
|
42
|
+
root: getNativeElementProps(as, {
|
43
|
+
ref,
|
44
|
+
...props,
|
45
|
+
as
|
46
|
+
})
|
47
|
+
};
|
48
|
+
return state;
|
49
|
+
};
|
50
|
+
//# sourceMappingURL=useText.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/Text/useText.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;;;AAC3F,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,QAAR;AAAkB,IAAA,KAAlB;AAAyB,IAAA,MAAzB;AAAiC,IAAA,SAAjC;AAA4C,IAAA,aAA5C;AAA2D,IAAA,IAA3D;AAAiE,IAAA,IAAjE;AAAuE,IAAA,MAAvE;AAA+E,IAAA;AAA/E,MAAyF,KAA/F;AACA,QAAM,EAAE,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,MAAvB;AAEA,QAAM,KAAK,GAAc;AACvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,IADS;AAEvB,IAAA,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,KAFC;AAGvB,IAAA,KAAK,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,KAHO;AAIvB,IAAA,MAAM,EAAE,MAAM,KAAA,IAAN,IAAA,MAAM,KAAA,KAAA,CAAN,GAAA,MAAA,GAAU,KAJK;AAKvB,IAAA,SAAS,EAAE,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAA,SAAA,GAAa,KALD;AAMvB,IAAA,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB,KANT;AAOvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,GAPS;AAQvB,IAAA,IAAI,EAAE,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAA,IAAA,GAAQ,MARS;AASvB,IAAA,MAAM,EAAE,MAAM,KAAA,IAAN,IAAA,MAAM,KAAA,KAAA,CAAN,GAAA,MAAA,GAAU,SATK;AAUvB,IAAA,KAAK,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,OAVO;AAYvB,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAZW;AAcvB,IAAA,IAAI,EAAE,qBAAqB,CAAC,EAAD,EAAK;AAC9B,MAAA,GAD8B;AAE9B,SAAG,KAF2B;AAG9B,MAAA;AAH8B,KAAL;AAdJ,GAAzB;AAqBA,SAAO,KAAP;AACD,CA1BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TextProps, TextState } from './Text.types';\n\n/**\n * Create the state required to render Text.\n *\n * The returned state can be modified with hooks such as useTextStyles_unstable,\n * before being passed to renderText_unstable.\n *\n * @param props - props from this instance of Text\n * @param ref - reference to root HTMLElement of Text\n */\nexport const useText_unstable = (props: TextProps, ref: React.Ref<HTMLElement>): TextState => {\n const { wrap, truncate, block, italic, underline, strikethrough, size, font, weight, align } = props;\n const as = props.as ?? 'span';\n\n const state: TextState = {\n wrap: wrap ?? true,\n truncate: truncate ?? false,\n block: block ?? false,\n italic: italic ?? false,\n underline: underline ?? false,\n strikethrough: strikethrough ?? false,\n size: size ?? 300,\n font: font ?? 'base',\n weight: weight ?? 'regular',\n align: align ?? 'start',\n\n components: { root: 'span' },\n\n root: getNativeElementProps(as, {\n ref,\n ...props,\n as,\n }),\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,114 @@
|
|
1
|
+
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
3
|
+
export const textClassName = 'fui-Text';
|
4
|
+
/**
|
5
|
+
* Styles for the root slot
|
6
|
+
*/
|
7
|
+
|
8
|
+
const useStyles = /*#__PURE__*/__styles({
|
9
|
+
"root": {
|
10
|
+
"Bahqtrf": "fk6fouc",
|
11
|
+
"Be2twd7": "fkhj508",
|
12
|
+
"Bg96gwp": "f1i3iumi",
|
13
|
+
"Bhrd7zp": "figsok6",
|
14
|
+
"fsow6f": "fpgzoln",
|
15
|
+
"mc9l5x": "f1w7gpdv",
|
16
|
+
"Huce71": "f6juhto",
|
17
|
+
"B68tc82": "f1mtd64y",
|
18
|
+
"Bmxbyg5": "f1y7q3j9",
|
19
|
+
"ygn44y": "f2jf649"
|
20
|
+
},
|
21
|
+
"nowrap": {
|
22
|
+
"Huce71": "fz5stix",
|
23
|
+
"B68tc82": "f1p9o1ba",
|
24
|
+
"Bmxbyg5": "f1sil6mw"
|
25
|
+
},
|
26
|
+
"truncate": {
|
27
|
+
"ygn44y": "f1cmbuwj"
|
28
|
+
},
|
29
|
+
"block": {
|
30
|
+
"mc9l5x": "ftgm304"
|
31
|
+
},
|
32
|
+
"italic": {
|
33
|
+
"B80ckks": "f1j4dglz"
|
34
|
+
},
|
35
|
+
"underline": {
|
36
|
+
"w71qe1": "f13mvf36"
|
37
|
+
},
|
38
|
+
"strikethrough": {
|
39
|
+
"w71qe1": "fv5q2k7"
|
40
|
+
},
|
41
|
+
"strikethroughUnderline": {
|
42
|
+
"w71qe1": "f1drk4o6"
|
43
|
+
},
|
44
|
+
"base100": {
|
45
|
+
"Be2twd7": "f13mqy1h",
|
46
|
+
"Bg96gwp": "fcpl73t"
|
47
|
+
},
|
48
|
+
"base200": {
|
49
|
+
"Be2twd7": "fy9rknc",
|
50
|
+
"Bg96gwp": "fwrc4pm"
|
51
|
+
},
|
52
|
+
"base400": {
|
53
|
+
"Be2twd7": "fod5ikn",
|
54
|
+
"Bg96gwp": "faaz57k"
|
55
|
+
},
|
56
|
+
"base500": {
|
57
|
+
"Be2twd7": "f1pp30po",
|
58
|
+
"Bg96gwp": "f106mvju"
|
59
|
+
},
|
60
|
+
"base600": {
|
61
|
+
"Be2twd7": "f1x0m3f5",
|
62
|
+
"Bg96gwp": "fb86gi6"
|
63
|
+
},
|
64
|
+
"hero700": {
|
65
|
+
"Be2twd7": "fojgt09",
|
66
|
+
"Bg96gwp": "fcen8rp"
|
67
|
+
},
|
68
|
+
"hero800": {
|
69
|
+
"Be2twd7": "fccw675",
|
70
|
+
"Bg96gwp": "f1ebx5kk"
|
71
|
+
},
|
72
|
+
"hero900": {
|
73
|
+
"Be2twd7": "f15afnhw",
|
74
|
+
"Bg96gwp": "fr3w3wp"
|
75
|
+
},
|
76
|
+
"hero1000": {
|
77
|
+
"Be2twd7": "fpyltcb",
|
78
|
+
"Bg96gwp": "f1ivgwrt"
|
79
|
+
},
|
80
|
+
"monospace": {
|
81
|
+
"Bahqtrf": "f1fedwem"
|
82
|
+
},
|
83
|
+
"numeric": {
|
84
|
+
"Bahqtrf": "f1uq0ln5"
|
85
|
+
},
|
86
|
+
"weightMedium": {
|
87
|
+
"Bhrd7zp": "fdj6btp"
|
88
|
+
},
|
89
|
+
"weightSemibold": {
|
90
|
+
"Bhrd7zp": "fl43uef"
|
91
|
+
},
|
92
|
+
"alignCenter": {
|
93
|
+
"fsow6f": "f17mccla"
|
94
|
+
},
|
95
|
+
"alignEnd": {
|
96
|
+
"fsow6f": "f12ymhq5"
|
97
|
+
},
|
98
|
+
"alignJustify": {
|
99
|
+
"fsow6f": "f1j59e10"
|
100
|
+
}
|
101
|
+
}, {
|
102
|
+
"d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fpgzoln{text-align:start;}", ".f1w7gpdv{display:inline;}", ".f6juhto{white-space:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f2jf649{text-overflow:clip;}", ".fz5stix{white-space:nowrap;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".ftgm304{display:block;}", ".f1j4dglz{font-style:italic;}", ".f13mvf36{text-decoration-line:underline;}", ".fv5q2k7{text-decoration-line:line-through;}", ".f1drk4o6{text-decoration-line:line-through underline;}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".fb86gi6{line-height:var(--lineHeightBase600);}", ".fojgt09{font-size:var(--fontSizeHero700);}", ".fcen8rp{line-height:var(--lineHeightHero700);}", ".fccw675{font-size:var(--fontSizeHero800);}", ".f1ebx5kk{line-height:var(--lineHeightHero800);}", ".f15afnhw{font-size:var(--fontSizeHero900);}", ".fr3w3wp{line-height:var(--lineHeightHero900);}", ".fpyltcb{font-size:var(--fontSizeHero1000);}", ".f1ivgwrt{line-height:var(--lineHeightHero1000);}", ".f1fedwem{font-family:var(--fontFamilyMonospace);}", ".f1uq0ln5{font-family:var(--fontFamilyNumeric);}", ".fdj6btp{font-weight:var(--fontWeightMedium);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f17mccla{text-align:center;}", ".f12ymhq5{text-align:end;}", ".f1j59e10{text-align:justify;}"]
|
103
|
+
});
|
104
|
+
/**
|
105
|
+
* Apply styling to the Text slots based on the state
|
106
|
+
*/
|
107
|
+
|
108
|
+
|
109
|
+
export const useTextStyles_unstable = state => {
|
110
|
+
const styles = useStyles();
|
111
|
+
state.root.className = mergeClasses(textClassName, styles.root, state.wrap === false && styles.nowrap, state.truncate && styles.truncate, state.block && styles.block, state.italic && styles.italic, state.underline && styles.underline, state.strikethrough && styles.strikethrough, state.underline && state.strikethrough && styles.strikethroughUnderline, state.size === 100 && styles.base100, state.size === 200 && styles.base200, state.size === 400 && styles.base400, state.size === 500 && styles.base500, state.size === 600 && styles.base600, state.size === 700 && styles.hero700, state.size === 800 && styles.hero800, state.size === 900 && styles.hero900, state.size === 1000 && styles.hero1000, state.font === 'monospace' && styles.monospace, state.font === 'numeric' && styles.numeric, state.weight === 'medium' && styles.weightMedium, state.weight === 'semibold' && styles.weightSemibold, state.align === 'center' && styles.alignCenter, state.align === 'end' && styles.alignEnd, state.align === 'justify' && styles.alignJustify, state.root.className);
|
112
|
+
return state;
|
113
|
+
};
|
114
|
+
//# sourceMappingURL=useTextStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/Text/useTextStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,aAAa,GAAG,UAAtB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AA6FA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,aADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,IAAN,KAAe,KAAf,IAAwB,MAAM,CAAC,MAHE,EAIjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJQ,EAKjC,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,KALW,EAMjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MANU,EAOjC,KAAK,CAAC,SAAN,IAAmB,MAAM,CAAC,SAPO,EAQjC,KAAK,CAAC,aAAN,IAAuB,MAAM,CAAC,aARG,EASjC,KAAK,CAAC,SAAN,IAAmB,KAAK,CAAC,aAAzB,IAA0C,MAAM,CAAC,sBAThB,EAUjC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAVI,EAWjC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAXI,EAYjC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAZI,EAajC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAbI,EAcjC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAdI,EAejC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAfI,EAgBjC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAhBI,EAiBjC,KAAK,CAAC,IAAN,KAAe,GAAf,IAAsB,MAAM,CAAC,OAjBI,EAkBjC,KAAK,CAAC,IAAN,KAAe,IAAf,IAAuB,MAAM,CAAC,QAlBG,EAmBjC,KAAK,CAAC,IAAN,KAAe,WAAf,IAA8B,MAAM,CAAC,SAnBJ,EAoBjC,KAAK,CAAC,IAAN,KAAe,SAAf,IAA4B,MAAM,CAAC,OApBF,EAqBjC,KAAK,CAAC,MAAN,KAAiB,QAAjB,IAA6B,MAAM,CAAC,YArBH,EAsBjC,KAAK,CAAC,MAAN,KAAiB,UAAjB,IAA+B,MAAM,CAAC,cAtBL,EAuBjC,KAAK,CAAC,KAAN,KAAgB,QAAhB,IAA4B,MAAM,CAAC,WAvBF,EAwBjC,KAAK,CAAC,KAAN,KAAgB,KAAhB,IAAyB,MAAM,CAAC,QAxBC,EAyBjC,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,YAzBH,EA0BjC,KAAK,CAAC,IAAN,CAAW,SA1BsB,CAAnC;AA6BA,SAAO,KAAP;AACD,CAjCM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TextState } from './Text.types';\n\nexport const textClassName = 'fui-Text';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n fontWeight: tokens.fontWeightRegular,\n textAlign: 'start',\n display: 'inline',\n whiteSpace: 'normal',\n ...shorthands.overflow('visible'),\n textOverflow: 'clip',\n },\n nowrap: {\n whiteSpace: 'nowrap',\n ...shorthands.overflow('hidden'),\n },\n truncate: {\n textOverflow: 'ellipsis',\n },\n block: {\n display: 'block',\n },\n italic: {\n fontStyle: 'italic',\n },\n underline: {\n textDecorationLine: 'underline',\n },\n strikethrough: {\n textDecorationLine: 'line-through',\n },\n strikethroughUnderline: {\n textDecorationLine: 'line-through underline',\n },\n base100: {\n fontSize: tokens.fontSizeBase100,\n lineHeight: tokens.lineHeightBase100,\n },\n base200: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n base400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n base500: {\n fontSize: tokens.fontSizeBase500,\n lineHeight: tokens.lineHeightBase500,\n },\n base600: {\n fontSize: tokens.fontSizeBase600,\n lineHeight: tokens.lineHeightBase600,\n },\n hero700: {\n fontSize: tokens.fontSizeHero700,\n lineHeight: tokens.lineHeightHero700,\n },\n hero800: {\n fontSize: tokens.fontSizeHero800,\n lineHeight: tokens.lineHeightHero800,\n },\n hero900: {\n fontSize: tokens.fontSizeHero900,\n lineHeight: tokens.lineHeightHero900,\n },\n hero1000: {\n fontSize: tokens.fontSizeHero1000,\n lineHeight: tokens.lineHeightHero1000,\n },\n monospace: {\n fontFamily: tokens.fontFamilyMonospace,\n },\n numeric: {\n fontFamily: tokens.fontFamilyNumeric,\n },\n weightMedium: {\n fontWeight: tokens.fontWeightMedium,\n },\n weightSemibold: {\n fontWeight: tokens.fontWeightSemibold,\n },\n alignCenter: {\n textAlign: 'center',\n },\n alignEnd: {\n textAlign: 'end',\n },\n alignJustify: {\n textAlign: 'justify',\n },\n});\n\n/**\n * Apply styling to the Text slots based on the state\n */\nexport const useTextStyles_unstable = (state: TextState): TextState => {\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n textClassName,\n styles.root,\n state.wrap === false && styles.nowrap,\n state.truncate && styles.truncate,\n state.block && styles.block,\n state.italic && styles.italic,\n state.underline && styles.underline,\n state.strikethrough && styles.strikethrough,\n state.underline && state.strikethrough && styles.strikethroughUnderline,\n state.size === 100 && styles.base100,\n state.size === 200 && styles.base200,\n state.size === 400 && styles.base400,\n state.size === 500 && styles.base500,\n state.size === 600 && styles.base600,\n state.size === 700 && styles.hero700,\n state.size === 800 && styles.hero800,\n state.size === 900 && styles.hero900,\n state.size === 1000 && styles.hero1000,\n state.font === 'monospace' && styles.monospace,\n state.font === 'numeric' && styles.numeric,\n state.weight === 'medium' && styles.weightMedium,\n state.weight === 'semibold' && styles.weightSemibold,\n state.align === 'center' && styles.alignCenter,\n state.align === 'end' && styles.alignEnd,\n state.align === 'justify' && styles.alignJustify,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import type { FunctionComponent } from 'react';
|
2
|
+
import { TextWrapperProps } from '../wrapper';
|
3
|
+
export declare const title1ClassName = "fui-Title1";
|
4
|
+
/**
|
5
|
+
* Text wrapper component for the Title 1 typography variant
|
6
|
+
*/
|
7
|
+
export declare const Title1: FunctionComponent<TextWrapperProps>;
|