github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/stories/theme/font-stacks.stories.js (about)

     1  import hbs from 'htmlbars-inline-precompile';
     2  import { htmlSafe } from '@ember/string';
     3  
     4  export default {
     5    title: 'Theme|Font Stacks',
     6  };
     7  
     8  export let FontStacks = () => {
     9    return {
    10      template: hbs`
    11        <h5 class="title is-5">Font Stacks</h5>
    12  
    13        {{#each fontFamilies as |fontFamily|}}
    14          <h6 class="title is-6 with-headroom">{{fontFamily.name}}</h6>
    15          <div class="typeface" style={{fontFamily.style}}>
    16            <div class="hero">Aa</div>
    17            <p class="sample">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
    18            <p class="sample">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    19            <p class="sample">0 1 2 3 4 5 6 7 8 9</p>
    20          </div>
    21          <br>
    22        {{/each}}
    23        `,
    24      context: {
    25        fontFamilies: [
    26          '-apple-system',
    27          'BlinkMacSystemFont',
    28          'Segoe UI',
    29          'Roboto',
    30          'Oxygen-Sans',
    31          'Ubuntu',
    32          'Cantarell',
    33          'Helvetica Neue',
    34          'sans-serif',
    35          'monospace',
    36        ].map(family => {
    37          return {
    38            name: family,
    39            style: htmlSafe(`font-family: ${family}`),
    40          };
    41        }),
    42      },
    43    };
    44  };