From 49f8221a0f2c69272b7c3899f091e43e438172c9 Mon Sep 17 00:00:00 2001 From: cheton Date: Sun, 19 Nov 2023 16:02:55 +0800 Subject: [PATCH] docs: update text --- .../react-docs/pages/components/text.page.mdx | 143 ------------------ .../pages/components/text/formatting-text.js | 23 +++ .../pages/components/text/headings.js | 16 ++ .../pages/components/text/index.page.mdx | 46 ++++++ .../react-docs/pages/components/text/sizes.js | 33 ++++ .../pages/components/text/text-truncation.js | 14 ++ .../pages/components/text/the-as-prop.js | 33 ++++ 7 files changed, 165 insertions(+), 143 deletions(-) delete mode 100644 packages/react-docs/pages/components/text.page.mdx create mode 100644 packages/react-docs/pages/components/text/formatting-text.js create mode 100644 packages/react-docs/pages/components/text/headings.js create mode 100644 packages/react-docs/pages/components/text/index.page.mdx create mode 100644 packages/react-docs/pages/components/text/sizes.js create mode 100644 packages/react-docs/pages/components/text/text-truncation.js create mode 100644 packages/react-docs/pages/components/text/the-as-prop.js 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;