feat(Text): add Text component

config/components.ts

@@ -80,6 +80,7 @@ export const components = {
     '/components/number-keyboard',
     '/components/passcode-input',
     '/components/result-page',
+    '/components/text',
     '/components/tree-select',
     '/components/virtual-input',
     // '/components/scroll-mask',

src/components/text/demos/demo1.less

@@ -0,0 +1,5 @@
+.content {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 16px;
+}

src/components/text/demos/demo1.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import Text from '../.'
+import { DemoBlock } from 'demos'
+import styles from './demo1.less'
+
+export default () => {
+  return (
+    <>
+      <DemoBlock title='Colors'>
+        <div className={styles.content}>
+          <Text>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
+            quos a voluptates, labore fugiat fugit? Magni quas et quae
+            perferendis. Accusantium amet repudiandae quis tempora alias,
+            doloribus ea eaque cum.
+          </Text>
+
+          <Text color='primary'>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
+            quos a voluptates, labore fugiat fugit? Magni quas et quae
+            perferendis. Accusantium amet repudiandae quis tempora alias,
+            doloribus ea eaque cum.
+          </Text>
+
+          <Text color='secondary'>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
+            quos a voluptates, labore fugiat fugit? Magni quas et quae
+            perferendis. Accusantium amet repudiandae quis tempora alias,
+            doloribus ea eaque cum.
+          </Text>
+
+          <Text color='success'>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
+            quos a voluptates, labore fugiat fugit? Magni quas et quae
+            perferendis. Accusantium amet repudiandae quis tempora alias,
+            doloribus ea eaque cum.
+          </Text>
+
+          <Text color='warning'>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
+            quos a voluptates, labore fugiat fugit? Magni quas et quae
+            perferendis. Accusantium amet repudiandae quis tempora alias,
+            doloribus ea eaque cum.
+          </Text>
+
+          <Text color='danger'>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
+            quos a voluptates, labore fugiat fugit? Magni quas et quae
+            perferendis. Accusantium amet repudiandae quis tempora alias,
+            doloribus ea eaque cum.
+          </Text>
+
+          <Text color='weak'>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
+            quos a voluptates, labore fugiat fugit? Magni quas et quae
+            perferendis. Accusantium amet repudiandae quis tempora alias,
+            doloribus ea eaque cum.
+          </Text>
+
+          <Text color='light'>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
+            quos a voluptates, labore fugiat fugit? Magni quas et quae
+            perferendis. Accusantium amet repudiandae quis tempora alias,
+            doloribus ea eaque cum.
+          </Text>
+        </div>
+      </DemoBlock>
+
+      <DemoBlock title='Font style'>
+        <div className={styles.content}>
+          <Text strong={true}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
+            quos a voluptates, labore fugiat fugit? Magni quas et quae
+            perferendis. Accusantium amet repudiandae quis tempora alias,
+            doloribus ea eaque cum.
+          </Text>
+
+          <Text italic={true}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
+            quos a voluptates, labore fugiat fugit? Magni quas et quae
+            perferendis. Accusantium amet repudiandae quis tempora alias,
+            doloribus ea eaque cum.
+          </Text>
+
+          <Text strong={true} italic={true}>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores
+            quos a voluptates, labore fugiat fugit? Magni quas et quae
+            perferendis. Accusantium amet repudiandae quis tempora alias,
+            doloribus ea eaque cum.
+          </Text>
+        </div>
+      </DemoBlock>
+    </>
+  )
+}

src/components/text/index.en.md

@@ -0,0 +1,30 @@
+# Text
+
+Plain text container
+
+## When to Use
+
+Use to display plain text
+
+## Demos
+
+<code src="./demos/demo1.tsx"></code>
+
+## Text
+
+### Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- |
+| color | Text color | `'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'weak' \| 'light'` | `'default'` |
+| strong | Bold style | `boolean` | `false` |
+| italic | Italic style | `boolean` | `false` |
+
+### CSS Variables
+
+| Name | Description | Default | Global |
+| --- | --- | --- | --- |
+| --font-size | Font size of the text | - | `--adm-font-size-main` |
+| --line-height | Line height of the text | 1.5 | - |
+| --color | Text color | Color of the `color` prop | - |
+| --font-weight-strong | Weight for the bold text | 700 | - |

src/components/text/index.ts

@@ -0,0 +1,7 @@
+import './text.less'
+
+import { Text } from './text'
+
+export type { TextProps } from './text'
+
+export default Text

src/components/text/tests/text.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { render, testA11y } from 'testing'
+import Text from '..'
+
+const classPrefix = `adm-text`
+
+describe('Text', () => {
+  test('passes a11y test', async () => {
+    await testA11y(<Text>tag</Text>)
+  })
+
+  test('renders with color', () => {
+    const { getByText } = render(
+      <>
+        <Text>Default</Text>
+        <Text color='primary'>Primary</Text>
+        <Text color='secondary'>Secondary</Text>
+        <Text color='success'>Success</Text>
+        <Text color='warning'>Warning</Text>
+        <Text color='danger'>Danger</Text>
+        <Text color='weak'>Weak</Text>
+        <Text color='light'>Light</Text>
+      </>
+    )
+
+    expect(getByText('Default').closest('span')).toHaveClass(
+      `${classPrefix}-default`
+    )
+
+    expect(getByText('Primary').closest('span')).toHaveClass(
+      `${classPrefix}-primary`
+    )
+
+    expect(getByText('Secondary').closest('span')).toHaveClass(
+      `${classPrefix}-secondary`
+    )
+
+    expect(getByText('Success').closest('span')).toHaveClass(
+      `${classPrefix}-success`
+    )
+
+    expect(getByText('Danger').closest('span')).toHaveClass(
+      `${classPrefix}-danger`
+    )
+
+    expect(getByText('Warning').closest('span')).toHaveClass(
+      `${classPrefix}-warning`
+    )
+
+    expect(getByText('Light').closest('span')).toHaveClass(
+      `${classPrefix}-light`
+    )
+
+    expect(getByText('Weak').closest('span')).toHaveClass(`${classPrefix}-weak`)
+  })
+
+  test('renders with strong', () => {
+    const { getByText } = render(<Text strong={true}>Strong</Text>)
+
+    expect(getByText('Strong').closest('span')).toHaveClass(
+      `${classPrefix}-strong`
+    )
+  })
+
+  test('renders with italic', () => {
+    const { getByText } = render(<Text italic={true}>Italic</Text>)
+
+    expect(getByText('Italic').closest('span')).toHaveClass(
+      `${classPrefix}-italic`
+    )
+  })
+})

src/components/text/text.less

@@ -0,0 +1,52 @@
+@class-prefix-tag: ~'adm-text';
+
+.@{class-prefix-tag} {
+  --font-size: var(--adm-font-size-main);
+  --line-height: 1.5;
+  --font-weight-strong: 700;
+
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  color: var(--color);
+  overflow-wrap: break-word;
+
+  &-default {
+    --color: var(--adm-color-text);
+  }
+
+  &-primary {
+    --color: var(--adm-color-primary);
+  }
+
+  &-secondary {
+    --color: var(--adm-color-text-secondary);
+  }
+
+  &-success {
+    --color: var(--adm-color-success);
+  }
+
+  &-warning {
+    --color: var(--adm-color-warning);
+  }
+
+  &-danger {
+    --color: var(--adm-color-danger);
+  }
+
+  &-weak {
+    --color: var(--adm-color-weak);
+  }
+
+  &-light {
+    --color: var(--adm-color-light);
+  }
+
+  &-strong {
+    font-weight: var(--font-weight-strong);
+  }
+
+  &-italic {
+    font-style: italic;
+  }
+}

src/components/text/text.tsx

@@ -0,0 +1,45 @@
+import React, { FC, ReactNode } from 'react'
+import classNames from 'classnames'
+import { NativeProps, withNativeProps } from '../../utils/native-props'
+import { mergeProps } from '../../utils/with-default-props'
+
+const classPrefix = `adm-text`
+
+export type TextProps = {
+  color?:
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'weak'
+    | 'light'
+  strong?: boolean
+  italic?: boolean
+  children?: ReactNode
+} & NativeProps<
+  '--font-size' | '--line-height' | '--color' | '--font-weight-strong'
+>
+
+const defaultProps: TextProps = {
+  color: 'default',
+  strong: false,
+  italic: false,
+}
+
+export const Text: FC<TextProps> = p => {
+  const props = mergeProps(defaultProps, p)
+
+  return withNativeProps(
+    props,
+    <span
+      className={classNames(classPrefix, `${classPrefix}-${props.color}`, {
+        [`${classPrefix}-strong`]: props.strong,
+        [`${classPrefix}-italic`]: props.italic,
+      })}
+    >
+      {props.children}
+    </span>
+  )
+}

src/index.ts

@@ -208,6 +208,8 @@ export { default as Tabs } from './components/tabs'
 export type { TabsProps, TabProps } from './components/tabs'
 export { default as Tag } from './components/tag'
 export type { TagProps } from './components/tag'
+export { default as Text } from './components/text'
+export type { TextProps } from './components/text'
 export { default as TextArea } from './components/text-area'
 export type { TextAreaProps, TextAreaRef } from './components/text-area'
 export { default as Toast } from './components/toast'