Text

<Flex direction="column" gap={{ column: 4, row: 0 }} width={200}>
  <Text align="start">Start (default)</Text>
  <Divider />
  <Text align="end">End</Text>
  <Divider />
  <Text align="center">Center</Text>
  <Divider />
  <Text align="forceLeft">Force left</Text>
  <Divider />
  <Text align="forceRight">Force right</Text>
</Flex>

<Flex alignItems="start" direction="column" gap={{ column: 4, row: 0 }}>
  <Text>Some content in a default block element. (default)</Text>
  <Box>
    <Text inline>Inline text with the inline prop.</Text>
    {' '}
    <Text inline>More inline text.</Text>
  </Box>
</Flex>

<Flex alignItems="start" direction="column" gap={{ column: 3, row: 0 }}>
    <Box color="inverse" padding={1}>
      <Text color="inverse" size="400">Inverse</Text>
    </Box>
    <Text color="subtle" size="400">Subtle</Text>
    <Text color="default" size="400">Default</Text>
    <Text color="success" size="400">Success</Text>
    <Text color="warning" size="400">Warning</Text>
    <Text color="error" size="400">Error</Text>
    <Text color="shopping" size="400">Shopping</Text>
    <Box color="primary" padding={1}>
      <Text color="light" size="400">Light</Text>
    </Box>
    <Box color="infoWeak" padding={1}>
      <Text color="dark" size="400">Dark</Text>
    </Box>
  </Flex>

<Flex maxWidth={200} direction="column" gap={{ column: 8, row: 0 }}>
  <Flex direction="column" gap={{ column: 2, row: 0 }}>
    <Text>breakWord (default):</Text>
    <Box color="secondary" padding={2} rounding={2}>
      <Text>
        This is a long and Supercalifragilisticexpialidocious sentence.
        次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
      </Text>
    </Box>
  </Flex>

  <Flex direction="column" gap={{ column: 2, row: 0 }}>
    <Text>normal:</Text>
    <Box color="secondary" padding={2} rounding={2}>
      <Text overflow="normal">
        This is a long and Supercalifragilisticexpialidocious sentence.
        次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
      </Text>
    </Box>
  </Flex>

  <Flex direction="column" gap={{ column: 2, row: 0 }}>
  <Text>lineClamp:</Text>
    <Box color="secondary" padding={2} rounding={2}>
      <Text lineClamp={2}>
        This is a long and Supercalifragilisticexpialidocious sentence.
        次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
      </Text>
    </Box>
  </Flex>
</Flex>

<Flex alignItems="start" direction="column" gap={{ column: 2, row: 0 }}>
  <Flex alignItems="center" gap={{ row: 2, column: 0 }}>
    <Text inline size="100">Size 100</Text>
    <span lang="ja">
      <Text inline size="100">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={{ row: 2, column: 0 }}>
    <Text inline size="200">Size 200</Text>
    <span lang="ja">
      <Text inline size="200">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={{ row: 2, column: 0 }}>
    <Text inline size="300">Size 300 (default size)</Text>
    <span lang="ja">
      <Text inline size="300">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={{ row: 2, column: 0 }}>
    <Text inline size="400">Size 400</Text>
    <span lang="ja">
      <Text inline size="400">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={{ row: 2, column: 0 }}>
    <Text inline size="500">Size 500</Text>
    <span lang="ja">
      <Text inline size="500">
        こんにちは
      </Text>
    </span>
  </Flex>

  <Flex alignItems="center" gap={{ row: 2, column: 0 }}>
    <Text inline size="600">Size 600</Text>
    <span lang="ja">
      <Text inline size="600">
        こんにちは
      </Text>
    </span>
  </Flex>
</Flex>

<Flex direction="column" gap={{ column: 2, row: 0 }}>
  <Text weight="bold">Bold</Text>
  <Text italic>Italic</Text>
  <Text underline>Underline</Text>
</Flex>

<Flex alignItems="center" direction="column" gap={{ column: 2, row: 0 }}>
  <Text size="200" weight="bold">
    Hover over the examples below for a few seconds to see the title text:
  </Text>

  <Box borderStyle="sm" maxWidth={400} padding={1}>
    <Flex direction="column" gap={{ column: 3, row: 0 }}>
      <Flex direction="column" gap={{ column: 1, row: 0 }}>
        <Text italic size="100">
          This title attribute is automatically added because lineClamp is used and children is a string.
        </Text>
        <Text lineClamp={1}>
          This is a long and Supercalifragilisticexpialidocious sentence.
          次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
        </Text>
      </Flex>

      <Flex direction="column" gap={{ column: 1, row: 0 }}>
        <Text italic size="100">
          This example uses lineClamp but has no title attribute, because children is a React.Node.
        </Text>
        <Text lineClamp={1}>
          <Link href="#">
            This is a long and Supercalifragilisticexpialidocious sentence.
            次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
          </Link>
        </Text>
      </Flex>

      <Flex direction="column" gap={{ column: 1, row: 0 }}>
        <Text italic size="100">
          This example uses lineClamp and children is a React.Node, but uses the title prop.
        </Text>
        <Text
          lineClamp={1}
          title="This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉"
        >
          <Link href="#">
            This is a long and Supercalifragilisticexpialidocious sentence.
            次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
          </Link>
        </Text>
      </Flex>
    </Flex>
  </Box>
</Flex>

function Example() {
  const [showLongText, setShowLongText] = React.useState(false);
  const [applyTruncationDetection, setApplyTruncationDetection] = React.useState(false);


  const text = "Tag brand partners in your Idea Pins with the paid partnership tool."

  const veryLongText = "Tag brand partners in your Idea Pins with the paid partnership tool. Just make an Idea Pin in the app, add the paid partnership label and tag your partner brand. Once they approve the request, their brand name will show up on your Idea Pin. Brands can also choose to promote your Idea Pins as ads, boosting your reach to even more people. When you use the paid partnership tool, you work directly with brands to define the payment terms and process. Pinterest will not be directly involved in payment."

  const textRef = React.useRef(null);
  const [ellipsisActive, setEllipsisActive] = React.useState(false);

  const isEllipsisActive = (element) =>
    element.offsetHeight < element.scrollHeight || element.offsetWidth < element.scrollWidth;

  const checkEllipsisActive = () => {
    if (textRef.current && !ellipsisActive && isEllipsisActive(textRef.current)) {
      setEllipsisActive(true);
    } else if (textRef.current && ellipsisActive && !isEllipsisActive(textRef.current)) {
      setEllipsisActive(false);
    }
  };

  React.useEffect(() => {
    checkEllipsisActive();
    window.addEventListener('resize', checkEllipsisActive);
    return () => {
      window.removeEventListener('resize', checkEllipsisActive);
    };
  }, [checkEllipsisActive]);

  return (
    <Flex gap={8} direction="column" width="100%">
      <Flex gap={2} direction="column">
        <Box display="flex" alignItems="center">
          <Box paddingX={2} WIDTH>
            <Label htmlFor="longText">
              <Text>Show long text</Text>
            </Label>
          </Box>
          <Switch
            onChange={() => setShowLongText(!showLongText)}
            id="longText"
            switched={showLongText}
          />
        </Box>
        <Box display="flex" alignItems="center">
          <Box paddingX={2}>
            <Label htmlFor="truncation">
              <Text>Apply truncation detection</Text>
            </Label>
          </Box>
          <Switch
            onChange={() => setApplyTruncationDetection(!applyTruncationDetection)}
            id="truncation"
            switched={applyTruncationDetection}
          />
        </Box>
      </Flex >
      <Flex direction="column">
        <Text
          inline
          align="start"
          lineClamp={2}
          ref={textRef}
          title={ellipsisActive && typeof veryLongText === 'string' ? veryLongText : undefined}
        >
          {showLongText ? veryLongText : text }
          {' '}
          <Text inline>
            <Link
              accessibilityLabel="Visit our Help Site"
              href="#"
              inline
            >
              Visit our Help Site
            </Link>
          </Text>
        </Text>
        {ellipsisActive && applyTruncationDetection? (
          <Text>
            <Link
              accessibilityLabel="Visit our Help Site"
              href="#"
              inline
            >
            Visit our Help Site
            </Link>
          </Text>
        ) : null}
      </Flex>
    </Flex>
  );
}