wix-style-react/src/Text/docs/Text.content.js

wix-style-react

export default {
  description:
    'Text is a general typography component used to construct any text content. ',
  do: [
    'Use it to display text paragraphs formed from a single or multiple sentences.',
    'Use it to display form element values and labels.',
  ],
  dont: [
    'Don’t use it as a title for a section or a widget. Use <Heading/> instead.',
    'Don’t use it to highlight status, use <Badge/> instead.',
  ],
  featureExamples: [
    {
      title: 'Size',
      description: `Control the size of the text with \`size\` prop. It supports 3 sizes:<br/>
        &emsp;- \`medium\` (default) - use it in all common cases of running text.<br/>
        &emsp;- \`small\` - use it for field labels and secondary content.<br/>
        &emsp;- \`tiny\` - use it for short messages of minor importance.`,
      example: '_size',
    },
    {
      title: 'Weight',
      description: `Control the weight of the text with \`weight\` prop. It supports 3 weights:<br/>
        &emsp;- \`bold\` - use it to emphasise running text.<br/>
        &emsp;- \`normal\` - use it for form field values and button labels.<br/>
        &emsp;- \`thin\` (default) - use it for all major paragraphs.`,
      example: '_weight',
    },
    {
      title: 'Skin',
      description: `Control the color of text with \`skin\` prop. It supports 6 skins:<br/>
        &emsp;- \`standard\`<br/>
        &emsp;- \`premium\`<br/>
        &emsp;- \`success\`<br/>
        &emsp;- \`error\`<br/>
        &emsp;- \`disabled\`<br/>
        &emsp;- \`primary\`<br/>
        <br/>
        \`standard\` skin can be placed on color backgrounds. All other skins can be used only on white or gray.`,
      example: '_skin',
    },
    {
      title: 'Light',
      description: `Invert text color so it can be used on a dark background with \`light\` prop. It affects standard and disabled skins only.`,
      example: '_light',
    },
    {
      title: 'Secondary',
      description: `Emphasise content hierarchy by setting running text priority to \`secondary\`. 
        It applies lower contrast font color for standard skin text only.`,
      example: '_secondary',
    },
    {
      title: 'Unordered list',
      description: `Use standard \`<ul>\` HTML tag to build an unordered list. Control its style with \`listStyle\` prop. It supports 2 styles:<br/>
        &emsp;- \`checkmark\`<br/>
        &emsp;- \`circle\``,
      example: '_unorderedList',
    },
    {
      title: 'Ordered list',
      description: `Use standard \`<ol>\` HTML tag to build an ordered list.
        It accepts all default HTML <a href="https://www.w3schools.com/html/html_lists_ordered.asp">types</a>.`,
      example: '_orderedList',
    },
    {
      title: 'Text overflow',
      description: `Handle text overflow by wrapping text, truncating it or doing both.
        By default text wraps into any number of lines. With \`ellipsis\` enabled it will truncate to fit parent container width. 
        Specify \`maxLines\` to truncate text after a specified number of rows only.<br/>
        <br/>
        Specify whether to reveal full text on hover with \`showTooltip\` prop.
        Control tooltip style by passing all default \`<Tooltip/>\` properties via \`tooltipProps\`.`,
      example: '_textOverflow',
    },
    {
      title: 'Custom tag',
      description: `Render text as a custom HTML tag by using \`tagName\` prop.`,
      example: '_customTag',
    },
    {
      title: 'Inline link',
      description: `Use a default <a> HTML tag to add an inline link to a sentence.`,
      example: '_inlineLink',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Inline button',
      description: `Use inline \`<Box/>\` to place buttons or other elements inline to a text.`,
      example: '_inlineButton',
    },
    {
      title: 'Show more',
      description: `Toggle \`maxLines\` prop value to recreate ‘Show more’ behaviour for text paragraphs.`,
      example: '_showMore',
    },
  ],
};