github.com/thomasobenaus/nomad@v0.11.1/ui/stories/components/page-title.stories.js (about)

     1  import hbs from 'htmlbars-inline-precompile';
     2  
     3  export default {
     4    title: 'Components|Page Title',
     5  };
     6  
     7  export let Standard = () => {
     8    return {
     9      template: hbs`
    10        <h5 class="title is-5">Page title</h5>
    11        <div class="mock-spacing">
    12          <h1 class="title">This is the Page Title</h1>
    13        </div>
    14        <p class="annotation">In its simplest form, a page title is just an H1.</p>
    15        `,
    16    };
    17  };
    18  
    19  export let AfterElements = () => {
    20    return {
    21      template: hbs`
    22        <h5 class="title is-5">Page title with after elements</h5>
    23        <div class="mock-spacing">
    24          <h1 class="title">
    25            This is the Page Title
    26            <span class="bumper-left tag is-running">Running</span>
    27            <span class="tag is-hollow is-small no-text-transform">237aedcb8982fe09bcee0877acedd</span>
    28          </h1>
    29        </div>
    30        <p class="annotation">It is common to put high-impact tags and badges to the right of titles. These tags should only ever appear on the right-hand side of the title, and they should be listed in descending weights. Tags with a background are heavier than tags that are hollow. Longer values are heavier than shorter values.</p>
    31        `,
    32    };
    33  };
    34  
    35  export let StatusLight = () => {
    36    return {
    37      template: hbs`
    38        <h5 class="title is-5">Page title with status light</h5>
    39        <div class="mock-spacing">
    40          <h1 class="title">
    41            <span class="node-status-light initializing"></span>
    42            This is the Page Title
    43            <span class="bumper-left tag is-running">Running</span>
    44            <span class="tag is-hollow is-small no-text-transform">237aedcb8982fe09bcee0877acedd</span>
    45          </h1>
    46        </div>
    47        <p class="annotation">A simple color or pattern is faster to scan than a title and can often say more than words can. For pages that have an important status component to them (e.g., client detail page), a status light can be shown to the left of the title where typically eyes will begin to scan a page.</p>
    48        `,
    49    };
    50  };
    51  
    52  export let Actions = () => {
    53    return {
    54      template: hbs`
    55        <h5 class="title is-5">Page title with actions</h5>
    56        <div class="mock-spacing">
    57          <h1 class="title">
    58            <span class="node-status-light initializing"></span>
    59            This is the Page Title
    60            <span class="bumper-left tag is-running">Running</span>
    61            <span class="tag is-hollow is-small no-text-transform">237aedcb8982fe09bcee0877acedd</span>
    62            <button class="button is-warning is-small is-inline">If you wish</button>
    63            <button class="button is-danger is-outlined is-important is-small is-inline">No Regrets</button>
    64          </h1>
    65        </div>
    66        <p class="annotation">When actions apply to the entire context of a page, (e.g., job actions on the job detail page), buttons for these actions go in the page title. Buttons are always placed on the far right end of a page title. No elements can go to the right of these buttons.</p>
    67        `,
    68    };
    69  };