Heading

import { useState } from 'react';
import { Box, ColorSchemeProvider, Flex, Heading, SelectList } from 'gestalt';

export default function Example() {
  const [language, setLanguage] = useState('default');

  const content = Object.freeze({
    default:
      'Lorem ipsum dolor sit amet, vis legimus appetere sententiae ex, est habeo erant noluisse ex. Ad sit enim vitae concludaturque, id diam aperiam explicari has.',
    tall: 'अंतर्गत निर्माण क्षमता। विभाग लोगो तकनिकल प्रव्रुति प्रतिबध्दता अपने चुनने साधन आधुनिक स्वतंत्र संसाध पुस्तक व्याख्या सेऔर भाषाओ मानसिक सोफ़्टवेर जिसे लक्षण सादगि केवल सुचनाचलचित्र विकेन्द्रियकरण',
    ck: '法大感康催今間郎済分暮測。会転大籍法必辞住利業済表者加社。見競回画訴藤投冠阪暮止逮使際女審。堅種術天可毎帰画級見田頭豊世建抽座総目功。作温霊住再提略投際界利浜東着送容方権六。阪千割断待伴民腺結道員賀荷知外森若免教',
    ja: '尾ノホタクスフ名津以樹ふなり夜巣区ヨクエヨイ個尾御すんちゆゅときよりせけ離根巣遊野名離他都二露二鵜ひへせと、毛以く派雲ろ絵ほまり列知津絵日日区目魔阿御ろんさゆ等他',
    vi: 'Lorem Ipsum chỉ đơn giản là một đoạn văn bản giả, được dùng vào việc trình bày và dàn trang phục vụ cho in ấn. Lorem Ipsum đã được sử dụng như một văn bản chuẩn cho ngành công nghiệp in ấn từ những năm ',
    th: 'Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่',
  });

  return (
    <Box height="100%" padding={8} width="100%">
      <Flex direction="column" gap={4} width="100%">
        <SelectList
          id="selectlistMain"
          label="line height type"
          onChange={({ value }) => {
            if (
              value === 'default' ||
              value === 'ja' ||
              value === 'tall' ||
              value === 'ck' ||
              value === 'th' ||
              value === 'vi'
            ) {
              setLanguage(value);
            }
          }}
        >
          {[
            { label: 'default', value: 'default' },
            { label: 'tall', value: 'tall' },
            { label: 'ck', value: 'ck' },
            { label: 'ja', value: 'ja' },
            { label: 'vi', value: 'vi' },
            { label: 'th', value: 'th' },
          ].map(({ label, value }) => (
            <SelectList.Option key={label} label={label} value={value} />
          ))}
        </SelectList>
        <ColorSchemeProvider
          colorScheme="light"
          fullDimensions
          id="localizationLanaguage"
          language={language}
        >
          <Flex direction="column" gap={1}>
            <Heading size="200">{content[language]}</Heading>
            <Heading size="300">{content[language]}</Heading>
            <Heading size="400">{content[language]}</Heading>
            <Heading size="500">{content[language]}</Heading>
            <Heading size="600">{content[language]}</Heading>
          </Flex>
        </ColorSchemeProvider>
      </Flex>
    </Box>
  );
}

import { Box, Flex, Heading } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex direction="column" gap={{ column: 4, row: 0 }}>
        <Heading size="100">Heading size 100</Heading>
        <span lang="ja">
          <Heading size="100">こんにちは</Heading>
        </span>

        <span>
          <Heading size="200">Heading size 200</Heading>
        </span>
        <span lang="ja">
          <Heading size="200">こんにちは</Heading>
        </span>

        <Heading size="300">Heading size 300</Heading>
        <span lang="ja">
          <Heading size="300">こんにちは</Heading>
        </span>

        <Heading size="400">Heading size 400</Heading>
        <span lang="ja">
          <Heading size="400">こんにちは</Heading>
        </span>

        <Heading size="500">Heading size 500</Heading>
        <span lang="ja">
          <Heading size="500">こんにちは</Heading>
        </span>

        <Heading size="600">Heading size 600</Heading>
        <span lang="ja">
          <Heading size="600">こんにちは</Heading>
        </span>
      </Flex>
    </Box>
  );
}

import { Box, Flex, Heading } from 'gestalt';

export default function Example() {
  return (
    <Box alignItems="center" display="flex" justifyContent="center" padding={8}>
      <Flex direction="column" gap={{ column: 4, row: 0 }}>
        <Box color="dark" padding={1}>
          <Heading color="inverse" size="500">
            Inverse
          </Heading>
        </Box>

        <Heading size="500">Default</Heading>

        <Heading color="subtle" size="500">
          Subtle
        </Heading>

        <Heading color="success" size="500">
          Success
        </Heading>

        <Heading color="error" size="500">
          Error
        </Heading>

        <Heading color="warning" size="500">
          Warning
        </Heading>

        <Heading color="shopping" size="500">
          Shopping
        </Heading>

        <Box color="primary" padding={1}>
          <Heading color="light" size="500">
            Light
          </Heading>
        </Box>

        <Box color="infoWeak" padding={1}>
          <Heading color="dark" size="500">
            Dark
          </Heading>
        </Box>
      </Flex>
    </Box>
  );
}

import { Box, Flex, Heading, Text } from 'gestalt';

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

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

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

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

import { Box, Divider, Flex, Heading } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex direction="column" gap={{ column: 4, row: 0 }}>
        <Heading align="start" size="400">
          Start-aligned heading (default)
        </Heading>
        <Divider />
        <Heading align="end" size="400">
          End-aligned heading
        </Heading>
        <Divider />
        <Heading align="center" size="400">
          Center-aligned heading
        </Heading>
        <Divider />
        <Heading align="forceLeft" size="400">
          Forced-left-aligned heading
        </Heading>
        <Divider />
        <Heading align="forceRight" size="400">
          Forced-right-aligned heading
        </Heading>
      </Flex>
    </Box>
  );
}

import { Box, Flex, Heading } from 'gestalt';

export default function Example() {
  return (
    <Box
      alignItems="center"
      display="flex"
      height="100%"
      justifyContent="center"
      padding={8}
    >
      <Flex direction="column" gap={{ column: 4, row: 0 }}>
        <Heading accessibilityLevel={2} size="500">
          Medium heading level 2
        </Heading>
        <Heading accessibilityLevel={3} size="400">
          Small heading level 3
        </Heading>
        <Heading accessibilityLevel="none" size="400">
          Small heading without a level
        </Heading>
      </Flex>
    </Box>
  );
}