Text

Properties

Text

Name	Type	Default	Description
size	BodyTextSize		Text size
bold	boolean		Bold

Text.Title

Name	Type	Default	Description
size	TitleTextSize		Text size

Text.Header

Name	Type	Default	Description
size	HeaderTextSize		Text size

Type

BodyTextSize

Name	Description
"xLarge"	Size xLarge
"large"	Size large
"normal"	Size normal
"small"	Size small
"xSmall"	Size xSmall
"xxSmall"	Size xxSmall
"xxxSmall"	Size xxxSmall
"xxxxSmall"	Size xxxxSmall

TitleTextSize

Name	Description
"xLarge"	Size xLarge
"large"	Size large
"normal"	Size normal
"small"	Size small

HeaderTextSize

Name	Description
"normal"	Size normal
"small"	Size small

Example

Open Sandbox

import React from 'react';
import { Page, Text, List, Box } from 'zmp-ui';

function TextSize({ size, lineHeight }) {
  return (
    <Box flex flexDirection='row' className='text-size-info'>
      <Box>
        <Text size='small'>
          Size:
          {size}
        </Text>
      </Box>
      <Box ml={6}>
        <Text size='small'>
          Line height:
          {lineHeight}
        </Text>
      </Box>
    </Box>
  );
}

const { Item } = List;
const data = {
  Header: ['normal', 'small'],
  Title: ['xLarge', 'large', 'normal', 'small'],
  Body: [
    'xLarge',
    'large',
    'normal',
    'small',
    'xSmall',
    'xxSmall',
    'xxxSmall',
    'xxxxSmall'
  ]
};
const textStyles = {
  Header: {
    normal: {
      size: 16,
      lineHeight: 22
    },
    small: {
      size: 15,
      lineHeight: 20
    }
  },
  Title: {
    xLarge: {
      size: 22,
      lineHeight: 26
    },
    large: {
      size: 20,
      lineHeight: 26
    },
    normal: {
      size: 18,
      lineHeight: 24
    },
    small: {
      size: 15,
      lineHeight: 20
    }
  },
  Body: {
    xLarge: {
      size: 18,
      lineHeight: 24
    },
    large: {
      size: 16,
      lineHeight: 22
    },
    normal: {
      size: 15,
      lineHeight: 20
    },
    small: {
      size: 14,
      lineHeight: 18
    },
    xSmall: {
      size: 13,
      lineHeight: 18
    },
    xxSmall: {
      size: 12,
      lineHeight: 16
    },
    xxxSmall: {
      size: 11,
      lineHeight: 16
    },
    xxxxSmall: {
      size: 10,
      lineHeight: 14
    }
  }
};

export default function HomePage(props) {
  const { title } = props;
  return (
    <>
      {Object.keys(data).map((key) => (
        <Page key={key} className='section-container p-0'>
          <Box p={4}>
            <Text.Header>{key} Text</Text.Header>
          </Box>
          <List>
            {data[key].map((size) => {
              if (key === 'Header') {
                return (
                  <Item key={`${key}-${size}`} className='mb-0'>
                    <Text bold size='small' className='text-style'>
                      {size}
                    </Text>
                    <Box mt={2}>
                      <Text.Header size={size}>
                        Bầu trời trong xanh thăm thẳm, không một gợn mây
                      </Text.Header>
                    </Box>

                    <Box>
                      <TextSize
                        // eslint-disable-next-line react/jsx-props-no-spreading
                        {...textStyles.Header[size]}
                      />
                    </Box>
                  </Item>
                );
              }
              if (key === 'Title') {
                return (
                  <Item key={`${key}-${size}`} className='mb-0'>
                    <Text bold size='small' className='text-style'>
                      {size}
                    </Text>
                    <Box mt={2}>
                      <Text.Title size={size}>
                        Bầu trời trong xanh thăm thẳm, không một gợn mây
                      </Text.Title>
                    </Box>

                    <Box>
                      <TextSize
                        // eslint-disable-next-line react/jsx-props-no-spreading
                        {...textStyles.Title[size]}
                      />
                    </Box>
                  </Item>
                );
              }
              return (
                <Item key={`${key}-${size}`} className='mb-0'>
                  <Box>
                    <Text bold size='small' className='text-style'>
                      {size}
                    </Text>
                  </Box>
                  <Box mt={2}>
                    <Text size={size}>
                      Bầu trời trong xanh thăm thẳm, không một gợn mây
                    </Text>
                  </Box>

                  <Box mt={6}>
                    <Text size='small' bold className='text-style'>
                      {size} M
                    </Text>
                  </Box>
                  <Box mt={2}>
                    <Text bold size={size}>
                      Bầu trời trong xanh thăm thẳm, không một gợn mây
                    </Text>
                  </Box>

                  <Box mt={2}>
                    <TextSize
                      // eslint-disable-next-line react/jsx-props-no-spreading
                      {...textStyles.Body[size]}
                    />
                  </Box>
                </Item>
              );
            })}
          </List>
        </Page>
      ))}
    </>
  );
}