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

wix-style-react

export const _size = `
<StorybookComponents.Stack flexDirection="column">
  <Text size="medium">
    Size medium is a default size that's used most of the time.
  </Text>
  <Text size="small">
    Small size is used where medium doesn't fit or content is less important.
  </Text>
  <Text size="tiny">
    Tiny size is used when there's no space or it's the last thing users need to
    see.
  </Text>
</StorybookComponents.Stack>;
`;

export const _weight = `
<StorybookComponents.Stack flexDirection="column">
  <Text weight="bold">
    Bold weight is meant to emphasize running text.
  </Text>
  <Text weight="normal">
    Normal weight is for form field values and buttons.
  </Text>
  <Text weight="thin">
    Thin weight is for a running text. All major paragraphs use it.
  </Text> 
</StorybookComponents.Stack>;
`;

export const _skin = `
<StorybookComponents.Stack flexDirection="column">
  <Text skin="standard">
    Standard skin appears in all major texts.
  </Text>
  <Text skin="premium">
    Premium skin calls users to upgrade to get unlimited features.
  </Text>
  <Text skin="success">
    Success skin indicates users that everything went smooth.
  </Text>
  <Text skin="error">
    Error skin alerts users that something went wrong.
  </Text>
  <Text skin="disabled">
    Disabled skin indicates users that something cannot be accessed.
  </Text>
  <Text skin="primary">
    Primary skin is for inline links.
  </Text>
</StorybookComponents.Stack>;
`;

export const _light = `
<StorybookComponents.Stack flexDirection="column">
  <Text>Dark text is used on light backgrounds.</Text>
  <StorybookComponents.Background skin="dark">
    <Text light>Light text is used on dark backgrounds.</Text>
  </StorybookComponents.Background>
</StorybookComponents.Stack>;
`;

export const _secondary = `
<StorybookComponents.Stack flexDirection="column">
  <Text skin="standard" secondary>
    Dark secondary text is used where it's less important than standard text.
  </Text>
  <StorybookComponents.Background skin="dark">
    <Text light secondary>
      Light secondary text also serves as neutral content just on a dark
      background.
    </Text>
  </StorybookComponents.Background>
</StorybookComponents.Stack>;
`;

export const _unorderedList = `
<StorybookComponents.Stack flexDirection='column'>
  <Text listStyle="checkmark">
    The list below is built using standard "ul" and "li" HTML tags.
    <ul>
      <li>First statement</li>
      <li>
        Second statement
        <ul>
          <li>Subitem</li>
          <li>Subitem</li>
        </ul>
      </li>
      <li>Third statement</li>
    </ul>
  </Text>
  <Text listStyle="circle">
     The list below is built using standard "ul" and "li" HTML tags.
    <ul>
      <li>First statement</li>
      <li>
        Second statement
        <ul>
          <li>Subitem</li>
          <li>Subitem</li>
        </ul>
      </li>
      <li>Third statement</li>
    </ul>
  </Text>
 </StorybookComponents.Stack>
`;

export const _orderedList = `
<StorybookComponents.Stack flexDirection='column'>
  <Text>
    The list below is built using standard "ol" and "li" HTML tags.
    <ol type="1">
      <li>First statement</li>
      <li>
        Second statement
        <ol type="1">
          <li>Subitem</li>
          <li>Subitem</li>
        </ol>
      </li>
      <li>Third statement</li>
    </ol>
  </Text>
  <Text>
    The list below is built using standard "ol" and "li" HTML tags.
    <ol type="A">
      <li>First statement</li>
      <li>
        Second statement
        <ol type="a">
          <li>Subitem</li>
          <li>Subitem</li>
        </ol>
      </li>
      <li>Third statement</li>
    </ol>
  </Text>
  <Text>
    The list below is built using standard "ol" and "li" HTML tags.
    <ol type="I">
      <li>First statement</li>
      <li>
        Second statement
        <ol type="i">
          <li>Subitem</li>
          <li>Subitem</li>
        </ol>
      </li>
      <li>Third statement</li>
    </ol>
  </Text>
</StorybookComponents.Stack>
`;

export const _textOverflow = `
<StorybookComponents.Stack flexDirection="column" width="50%">
  <Text>Text that wraps forever. It doesn't show any ellipsis.</Text>
  <Text ellipsis maxLines={2}>
    Text with ellipsis. It can wrap until a specified number of lines. When the
    limit is reached it turns into ellipsis. Full text is revealed on hover.
  </Text>
  <Text
    ellipsis
    tooltipProps={{
      size: 'small',
      maxWidth: '180px',
      placement: 'bottom-start',
    }}
  >
    Text with custom style tooltip and ellipsis. It can wrap until a specified
    number of lines. When the limit is reached it turns into ellipsis. Full text
    is revealed on hover.
  </Text>
  <Text ellipsis tooltipProps={{ disabled: true }}>
    Text without a tooltip, but with ellipsis. It can wrap until a specified
    number of lines. When the limit is reached it turns into ellipsis.
  </Text>
</StorybookComponents.Stack>;
`;

export const _customTag = `
<Text tagName="div">
  This text will be rendered as a "div" element.
</Text>;
`;

export const _inlineLink = `
<Text>
  Use a standard HTML 'a' tag to add <a>a text link</a> inside of the line.
</Text>;
`;

export const _inlineButton = `
<Text>
  Set up subscriptions, memberships or package plans to sell on your site.
  <Box inline paddingLeft="SP1">
    <TextButton>Learn more</TextButton>
  </Box>
</Text>;
`;

export const _showMore = `
() => {
  const [open, setOpen] = React.useState(false);

  return (
    <Box width={'300px'} direction="vertical">
      <Text maxLines={open ? 4 : 1} ellipsis>
        Click 'Show more' to display more than a single line of text. Toggling
        maxLines allows to recreate expand / collapse behaviour.
      </Text>
      <TextButton onClick={() => setOpen(!open)}>
        {open ? 'Show less' : 'Show more'}
      </TextButton>
    </Box>
  );
};
`;