import { Title, Meta, Typeset } from "@storybook/blocks";

<Meta title="Foundation/Typography" />

<Title>Typography</Title>

export const typography = {
  type: {
    heading: "Overpass, sans-serif",
    body: "Inter, sans",
  },
  weight: {
    regular: "400",
    medium: "500",
    bold: "700",
  },
  size: {
    heading: {
      lg: {
        SP: 72,
        H1: 48,
        H2: 40,
        H3: 36,
        H4: 24,
        H5: 20,
      },
      md: {
        SP: 48,
        H1: 40,
        H2: 36,
        H3: 28,
        H4: 20,
        H5: 20,
      },
      sm: {
        SP: 40,
        H1: 40,
        H2: 32,
        H3: 24,
        H4: 20,
        H5: 18,
      },
    },
    body: {
      T1: 24,
      T2: 20,
      T3: 18,
      T4: 16,
      T5: 14,
      caotion: 12,
    },
  },
};

export const SampleText =
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";

## Heading

**fontFamily：** Inter、Overpass \
**breakpoint：** sm、md、lg

### SP

**fontWeight：** bold

```html
<h1 class="text-sp">SP</h1>
```

<Typeset
  fontSizes={Object.keys(typography.size.heading)
    .map((key) => `${typography.size.heading[key].SP}px`)
    .reverse()}
  fontWeight={typography.weight.medium}
  sampleText={SampleText}
  fontFamily={typography.type.heading}
/>

### H1

**fontWeight：** medium、bold

```html
<h1 class="text-h1-medium">h1</h1>
<h1 class="text-h1-bold">h1</h1>
```

<Typeset
  fontSizes={Object.keys(typography.size.heading)
    .map((key) => `${typography.size.heading[key].H1}px`)
    .reverse()}
  fontWeight={typography.weight.medium}
  sampleText={SampleText}
  fontFamily={typography.type.heading}
/>

### H2

**fontWeight：** medium、bold

```html
<h2 class="text-h2-medium">h2</h2>
<h2 class="text-h2-bold">h2</h2>
```

<Typeset
  fontSizes={Object.keys(typography.size.heading)
    .map((key) => `${typography.size.heading[key].H2}px`)
    .reverse()}
  fontWeight={typography.weight.medium}
  sampleText={SampleText}
  fontFamily={typography.type.heading}
/>

### H3

**fontWeight：** medium、bold

```html
<h3 class="text-h3-medium">h3</h3>
<h3 class="text-h3-bold">h3</h3>
<h3 class="text-h3-self">h3</h3>
```

<Typeset
  fontSizes={Object.keys(typography.size.heading)
    .map((key) => `${typography.size.heading[key].H3}px`)
    .reverse()}
  fontWeight={typography.weight.medium}
  sampleText={SampleText}
  fontFamily={typography.type.heading}
/>

### H4

**fontWeight：** medium、bold

```html
<h4 class="text-h4-medium">h4</h4>
<h4 class="text-h4-bold">h4</h4>
<h3 class="text-h4-self">h4</h3>
```

<Typeset
  fontSizes={Object.keys(typography.size.heading)
    .map((key) => `${typography.size.heading[key].H4}px`)
    .reverse()}
  fontWeight={typography.weight.medium}
  sampleText={SampleText}
  fontFamily={typography.type.heading}
/>

### H5

**fontWeight：** medium、bold

```html
<h5 class="text-h5-medium">h5</h5>
<h5 class="text-h5-bold">h5</h5>
```

<Typeset
  fontSizes={Object.keys(typography.size.heading)
    .map((key) => `${typography.size.heading[key].H5}px`)
    .reverse()}
  fontWeight={typography.weight.medium}
  sampleText={SampleText}
  fontFamily={typography.type.heading}
/>

## Body

**fontFamily：** Inter \
**fontWeight：** medium、bold(t3、t4、t5)

名稱排列對應文字範例排序

```html
<p class="text-t1-medium">T1</p>
<p class="text-t2-medium">T2</p>
<p class="text-t3-medium text-t3-bold">T3</p>
<p class="text-t4-medium text-t4-bold">T4</p>
<p class="text-t5-medium text-t5-bold">T5</p>
<p class="text-caotion-medium">Caotion</p>
```

<Typeset
  fontSizes={Object.keys(typography.size.body).map(
    (key) => `${typography.size.body[key]}px`,
  )}
  fontWeight={typography.weight.medium}
  sampleText={SampleText}
  fontFamily={typography.type.body}
/>