import { Meta, Title, Subtitle } from '@storybook/addon-docs';
import { Text, P, A } from '@lendi/ui/Typography';
import { DoDont, HalfColumns } from '@lendi-ui/doc-utils';
import { Spacer } from '@lendi/ui/Layout';
import ResponsiveTypeDo from './img/ResponsiveType_Do.png';
import ResponsiveTypeDont from './img/ResponsiveType_Dont.png';
import {TITLE_COMPONENTS_DECOMISSIONED, TITLE_FOUNDATIONS, TITLE_TYPOGRAPHY, TITLE_OVERVIEW} from "../../../../../docs/content";

<Meta title={`${TITLE_COMPONENTS_DECOMISSIONED}/${TITLE_TYPOGRAPHY}/${TITLE_OVERVIEW}`} />

<Title>{TITLE_TYPOGRAPHY}</Title>
<Subtitle>Overview</Subtitle>

For more detailed design guidelines, see <a href="/?path=/docs/foundations-typography-next-guidelines--page">the Guidelines page</a>.

For documentation on how to display text (headings, paragraphs, links, etc.) as a developer, see <a href="/?path=/docs/foundations-typography-next-text--interactive">the Text component documentation</a>.

## The type system
This type system includes 12 contrasting styles to assist you in presenting your design and content in a clear and efficient manner.

<table>
  <thead>
    <tr>
      <th>Type Styles</th>
      <th>Typeface</th>
      <th>Weight</th>
      <th>Size</th>
      <th>Line Height</th>
      <th>Case</th>
      <th>Letter spacing</th>
      <th>Appearance support</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><Text variant="display">Display</Text></td>
      <td>Cabin</td>
      <td>Bold</td>
      <td>Desktop: 48px<br />Mobile: 36px</td>
      <td>Desktop: 63px<br />Mobile: 47px</td>
      <td>Sentence</td>
      <td>0%</td>
      <td>default</td>
    </tr>
    <tr>
      <td><Text variant="title1">Title 1</Text></td>
      <td>Cabin</td>
      <td>Bold</td>
      <td>Desktop: 32px<br />Mobile: 28px</td>
      <td>Desktop: 42px<br />Mobile: 36px</td>
      <td>Sentence</td>
      <td>0%</td>
      <td>default</td>
    </tr>
    <tr>
      <td><Text variant="title2">Title 2</Text></td>
      <td>Cabin</td>
      <td>Bold</td>
      <td>Desktop: 24px<br />Mobile: 20px</td>
      <td>Desktop: 31px<br />Mobile: 26px</td>
      <td>Sentence</td>
      <td>0%</td>
      <td>default</td>
    </tr>
    <tr>
      <td><Text variant="subtitle1">Subtitle 1</Text></td>
      <td>Open Sans</td>
      <td>Semibold</td>
      <td>16px</td>
      <td>24px</td>
      <td>Sentence</td>
      <td>0%</td>
      <td>
        <ul>
          <li>default</li>
          <li>secondary</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><Text variant="subtitle2">Subtitle 2</Text></td>
      <td>Open Sans</td>
      <td>Semibold</td>
      <td>14px</td>
      <td>21px</td>
      <td>Sentence</td>
      <td>0%</td>
      <td>
        <ul>
          <li>default</li>
          <li>secondary</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><Text variant="body1">Body 1</Text></td>
      <td>Open Sans</td>
      <td>Regular</td>
      <td>16px</td>
      <td>24px</td>
      <td>Sentence</td>
      <td>0%</td>
      <td>
        <ul>
          <li>default</li>
          <li>subtle</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><Text variant="body2">Body 2</Text></td>
      <td>Open Sans</td>
      <td>Regular</td>
      <td>14px</td>
      <td>21px</td>
      <td>Sentence</td>
      <td>0%</td>
      <td>
        <ul>
          <li>default</li>
          <li>subtle</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><Text variant="detail1">Detail 1</Text></td>
      <td>Open Sans</td>
      <td>Bold</td>
      <td>12px</td>
      <td>18px</td>
      <td>Sentence</td>
      <td>0%</td>
      <td>
        <ul>
          <li>default</li>
          <li>subtle</li>
          <li>error</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><Text variant="detail2">Detail 2</Text></td>
      <td>Open Sans</td>
      <td>Regular</td>
      <td>12px</td>
      <td>18px</td>
      <td>Sentence</td>
      <td>0%</td>
      <td>
        <ul>
          <li>default</li>
          <li>subtle</li>
          <li>error</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><Text variant="overline">Overline</Text></td>
      <td>Open Sans</td>
      <td>Semibold</td>
      <td>10px</td>
      <td>13px</td>
      <td>All caps</td>
      <td>5%</td>
      <td>default</td>
    </tr>
  </tbody>
</table>

## Responsive type size
### Use responsive type only for display and titles

<HalfColumns>

  To cater for different device sizes, only the title styles will be responsive.  However, the other type styles will remain fixed.

  <table>
    <thead>
      <tr>
        <th>Desktop</th>
        <th>Mobile (xs)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <Spacer ygap="xs" start="xs" end="xs">
            <Text variant="display">Display</Text>
            <p>Size: 48px</p>
          </Spacer>
        </td>
        <td>
          <Spacer ygap="xs" start="xs" end="xs">
            <Text variant="display" isMobile>Display</Text>
            <p>Size: 36px</p>
          </Spacer>
        </td>
      </tr>
      <tr>
        <td>
          <Spacer ygap="xs" start="xs" end="xs">
            <Text variant="title1">Title 1</Text>
            <p>Size: 32px</p>
          </Spacer>
        </td>
        <td>
          <Spacer ygap="xs" start="xs" end="xs">
            <Text variant="title1" isMobile>Title 1</Text>
            <p>Size: 28px</p>
          </Spacer>
        </td>
      </tr>
      <tr>
        <td>
          <Spacer ygap="xs" start="xs" end="xs">
            <Text variant="title2">Title 2</Text>
            <p>Size: 24px</p>
          </Spacer>
        </td>
        <td>
          <Spacer ygap="xs" start="xs" end="xs">
            <Text variant="title2" isMobile>Title 2</Text>
            <p>Size: 20px</p>
          </Spacer>
        </td>
      </tr>
      <tr>
        <td>
          <Spacer ygap="xs" start="xs" end="xs">
            <Text variant="subtitle1">Subtitle 1</Text>
            <p>Size: 16px</p>
          </Spacer>
        </td>
        <td>
          <Spacer ygap="xs" start="xs" end="xs">
            <Text variant="subtitle1">Subtitle 1</Text>
            <p>Size: 16px</p>
          </Spacer>
        </td>
      </tr>
      <tr>
        <td>
          <Spacer ygap="xs" start="xs" end="xs">
            <Text variant="body1">Body 1</Text>
            <p>Size: 16px</p>
          </Spacer>
        </td>
        <td>
          <Spacer ygap="xs" start="xs" end="xs">
            <Text variant="body1">Body 1</Text>
            <p>Size: 16px</p>
          </Spacer>
        </td>
      </tr>
    </tbody>
  </table>
</HalfColumns>

<DoDont variant="do" imgSrc={ResponsiveTypeDo} caption="Do make titles responsive" />
<DoDont variant="dont" imgSrc={ResponsiveTypeDont} caption="Don’t make body text responsive" />