diff --git a/packages/react-docs/pages/components/text.page.mdx b/packages/react-docs/pages/components/text.page.mdx deleted file mode 100644 index e40775945e..0000000000 --- a/packages/react-docs/pages/components/text.page.mdx +++ /dev/null @@ -1,143 +0,0 @@ -# Text - -`Text` is used for rendering text and paragraphs. - -## Import - -```js -import { Text } from '@tonic-ui/react'; -``` - -## Usage - -### Sizes - -Use the `size` prop to change the corresponding font size and line height. You can set the value to `4xl`, `3xl`, `2xl`, `xl`, `lg`, `md`, `sm`, or `xs`. - -```jsx - - - Four Extra Large (4XL) - - - Three Extra Large (3XL) - - - Two Extra Large (2XL) - - - Extra Large (XL) - - - Large (LG) - - - Medium (MD) - - - Small (SM) - - - Extra Small (XS) - - -``` - -### Heading text - -You can format the `Text` component by passing `size` prop and `fontWeight` to display a formatted Heading. - -```jsx - - Heading 1 - Heading 2 - Heading 3 - Heading 4 - Heading 5 - Heading 6 - Heading 7 - -``` - -### Formatting text - -You can format the `Text` component by passing `fontSize`, `lineHeight`, or other style props. - -```jsx -function Example() { - const [colorMode] = useColorMode(); - const bg = colorMode === 'dark' ? 'gray:80' : 'gray:20'; - - return ( - - - This is exactly the same height as the font size - - - A normal line height is about 20% larger than the font size - - - For accessibility concerns, use a minimum value of 1.5 for line-height for main paragraph content - - - ); -} -``` - -### Text truncation - -```jsx - - Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. - -``` - -### The `as` prop - -```jsx noInline -const TextBlock = (props) => { - const [colorMode] = useColorMode(); - const borderColor = colorMode === 'dark' ? 'gray:70' : 'gray:20'; - - return ( - - - - ); -}; - -function Example() { - return ( - - Italic - Underline - Abbreviation or acronym - Citation - Deleted - Emphasis - Inserted - Ctrl + C - Highlighted - Strikethrough - Sample - Superscript - Subscript - - ); -} - -render(); -``` - -## Props - -### Text - -| Name | Type | Default | Description | -| :--- | :--- | :------ | :---------- | -| children | ReactNode | | | -| size | string | | One of: '4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs' | diff --git a/packages/react-docs/pages/components/text/formatting-text.js b/packages/react-docs/pages/components/text/formatting-text.js new file mode 100644 index 0000000000..a0fe91c742 --- /dev/null +++ b/packages/react-docs/pages/components/text/formatting-text.js @@ -0,0 +1,23 @@ +import { Stack, Text, useColorMode } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => { + const [colorMode] = useColorMode(); + const bg = colorMode === 'dark' ? 'gray:80' : 'gray:20'; + + return ( + + + This is exactly the same height as the font size + + + A normal line height is about 20% larger than the font size + + + For accessibility concerns, use a minimum value of 1.5 for line-height for main paragraph content + + + ); +}; + +export default App; diff --git a/packages/react-docs/pages/components/text/headings.js b/packages/react-docs/pages/components/text/headings.js new file mode 100644 index 0000000000..d36f929985 --- /dev/null +++ b/packages/react-docs/pages/components/text/headings.js @@ -0,0 +1,16 @@ +import { Stack, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + Heading 1 + Heading 2 + Heading 3 + Heading 4 + Heading 5 + Heading 6 + Heading 7 + +); + +export default App; diff --git a/packages/react-docs/pages/components/text/index.page.mdx b/packages/react-docs/pages/components/text/index.page.mdx new file mode 100644 index 0000000000..9793dafce7 --- /dev/null +++ b/packages/react-docs/pages/components/text/index.page.mdx @@ -0,0 +1,46 @@ +# Text + +`Text` is used for rendering text and paragraphs. + +## Import + +```js +import { Text } from '@tonic-ui/react'; +``` + +## Usage + +### Sizes + +Use the `size` prop to change the corresponding font size and line height. You can set the value to `4xl`, `3xl`, `2xl`, `xl`, `lg`, `md`, `sm`, or `xs`. + +{render('./sizes')} + +### Headings + +You can format the `Text` component by passing `size` prop and `fontWeight` to display a formatted Heading. + +{render('./headings')} + +### Formatting text + +You can format the `Text` component by passing `fontSize`, `lineHeight`, or other style props. + +{render('./formatting-text')} + +### Text truncation + +{render('./text-truncation')} + +### The `as` prop + +{render('./the-as-prop')} + +## Props + +### Text + +| Name | Type | Default | Description | +| :--- | :--- | :------ | :---------- | +| children | ReactNode | | | +| size | string | | One of: '4xl', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs' | diff --git a/packages/react-docs/pages/components/text/sizes.js b/packages/react-docs/pages/components/text/sizes.js new file mode 100644 index 0000000000..0593fe0fda --- /dev/null +++ b/packages/react-docs/pages/components/text/sizes.js @@ -0,0 +1,33 @@ +import { Stack, Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + + Four Extra Large (4XL) + + + Three Extra Large (3XL) + + + Two Extra Large (2XL) + + + Extra Large (XL) + + + Large (LG) + + + Medium (MD) + + + Small (SM) + + + Extra Small (XS) + + +); + +export default App; diff --git a/packages/react-docs/pages/components/text/text-truncation.js b/packages/react-docs/pages/components/text/text-truncation.js new file mode 100644 index 0000000000..5abadccf8b --- /dev/null +++ b/packages/react-docs/pages/components/text/text-truncation.js @@ -0,0 +1,14 @@ +import { Text } from '@tonic-ui/react'; +import React from 'react'; + +const App = () => ( + + Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. + +); + +export default App; diff --git a/packages/react-docs/pages/components/text/the-as-prop.js b/packages/react-docs/pages/components/text/the-as-prop.js new file mode 100644 index 0000000000..c6ea288362 --- /dev/null +++ b/packages/react-docs/pages/components/text/the-as-prop.js @@ -0,0 +1,33 @@ +import { Box, Stack, Text, useColorMode } from '@tonic-ui/react'; +import React from 'react'; + +const TextBlock = (props) => { + const [colorMode] = useColorMode(); + const borderColor = colorMode === 'dark' ? 'gray:70' : 'gray:20'; + + return ( + + + + ); +}; + +const App = () => ( + + Italic + Underline + Abbreviation or acronym + Citation + Deleted + Emphasis + Inserted + Ctrl + C + Highlighted + Strikethrough + Sample + Superscript + Subscript + +); + +export default App;