<template>
  <div class="demo-page">
    <h1>Threeflow Typography</h1>
    <hr>
    <h2>General Attributes</h2>
    <div class="margin-container">
      <p><strong>Case</strong>: Sentence (Capitalize proper nouns. Product names are not proper nouns.)</p>
      <p><strong>Font</strong>: Soleil regular, Soleil italic, Soleil bold, Soleil semibold</p>
    </div>
    <hr>
    <h2>Copy Styles</h2>
    <div class="margin-container">
      <h1>H1 Heading - 30px / Semibold</h1>
      <h2>H2 Heading - 20px / Bold</h2>
      <h3>H3 Heading - 16px / Bold</h3>
      <h4>H4 Heading - 14px / Bold</h4>
      <p>Body - 14px / Regular</p>
    </div>
    <h2>Link Styles</h2>
    <div class="margin-container">
      <div
        v-for="linkStyle in linkStyles"
        :key="linkStyle.name"
        class="flex"
      >
        <div class="square">
          <p :class="linkStyle.linkClass">
            <a href="#">{{ linkStyle.name }}</a>
          </p>
        </div>
        <div class="square">
          <ul>
            <li>Color: {{ linkStyle.color }}</li>
            <li>Size: {{ linkStyle.size }}</li>
            <li>Weight: {{ linkStyle.weight }}</li>
          </ul>
        </div>
        <div class="square">
          <p>{{ linkStyle.usage }}</p>
        </div>
      </div>
      <h2>Additional Styles</h2>
      <div class="margin-container">
        <p class="text-small">
          Small text - 12px / .text-small
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Typography',
    data() {
      return {
        linkStyles: [
          {
            name: 'Text link, normal',
            color: 'Branded primary or ThreeFlow blue',
            size: 14,
            weight: 'Regular',
            usage: 'Use when text link appears within the context of body text.',
          },
          {
            name: 'Text link, bold',
            linkClass: 'bold',
            color: 'Branded primary or ThreeFlow blue',
            size: 14,
            weight: 'Bold',
            usage: 'Use when text link appears as stand-alone.',
          },
          {
            name: 'Text link, small',
            linkClass: 'text-small',
            color: 'Branded primary or ThreeFlow blue',
            size: 12,
            weight: 'Regular',
            usage: 'Use when a text link appears in a page footer.',
          },
        ],
      };
    },

  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.margin-container {
  margin: 20px;
}

.flex {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.square {
  background: #dbdbdb;
  padding: 15px;
  margin: 10px 0;
  display: flex;
  flex-grow: 1;
  width: 10%;
  align-items: stretch;
  justify-content: flex-start;
}

.bold {
  font-weight: bold;
}
</style>
