import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';

<Meta title="Styles/Typography" />

# Typography

## Sizes

<Preview>
  <Story name="Sizes">
    {{
      data: () => ({ sizes: [5, 4, 3, 2].map(n => `${n}xl`).concat(['lg', 'base', 'sm', 'xs', 'xxs']) }),
      methods: {
        weight(size) {
          return `font-${['5xl', '4xl'].includes(size) ? 'black' : 'bold'}`;
        },
      },
      template: `
        <div class="p-16 bg-gray-200 text-gray-500">
          <template v-for="size in sizes">
            <div class="caps-xs mt-8 mb-2">.text-{{ size }}</div>
            <div class="flex justify-center items-start" :class="\`text-\${size}\`">
              <div class="p-8 bg-white">
                <div class="mb-2 caps-xs text-gray-400">.font-normal</div>
                Imagination will often carry us to worlds that never were, but without it we go nowhere.
              </div>
              <div class="ml-16 p-8 bg-white" :class="weight(size)">
                <div class="mb-2 caps-xs text-gray-400">.{{ weight(size) }}</div>
                Imagination will often carry us to worlds that never were, but without it we go nowhere.
              </div>
            </div>
          </template>
        </div>
      `,
    }}
  </Story>
</Preview>

## Variants

<Preview>
  <Story name="Variants">
    {{
      template: `
        <div class="p-16 bg-gray-200 text-gray-500 grid grid-cols-2 gap-x-16 gap-y-12">
          <div class="p-8 bg-white caps-xs">
            <div class="mb-2 caps-xs text-gray-400">.caps-xs</div>
            Imagination will often carry us to worlds that never were, but without it we go nowhere.
          </div>
          <div class="p-8 bg-white caps-xxs">
            <div class="mb-2 caps-xs text-gray-400">.caps-xxs</div>
            Imagination will often carry us to worlds that never were, but without it we go nowhere.
          </div>
        </div>
      `,
    }}
  </Story>
</Preview>

## Faces

<Preview>
  <Story name="Faces">
    {{
      template: `
        <div class="p-16 bg-gray-200 text-gray-500 grid grid-cols-2 gap-x-16 gap-y-12">
          <div class="p-8 bg-white font-lato">
            <div class="font-lato mb-2 caps-xs text-gray-400">.font-lato</div>
            Imagination will often carry us to worlds that never were, but without it we go nowhere.
          </div>
          <div class="p-8 bg-white font-mono">
            <div class="font-lato mb-2 caps-xs text-gray-400">.font-mono</div>
            Imagination will often carry us to worlds that never were, but without it we go nowhere.
          </div>
        </div>
      `,
    }}
  </Story>
</Preview>