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

     1  import hbs from 'htmlbars-inline-precompile';
     2  
     3  export default {
     4    title: 'Components|Inline Definitions',
     5  };
     6  
     7  export let Standard = () => {
     8    return {
     9      template: hbs`
    10        <h5 class="title is-5">Inline definitions</h5>
    11        <div class="boxed-section is-small">
    12          <div class="boxed-section-body inline-definitions">
    13            <span class="label">Some Label</span>
    14            <span class="pair">
    15              <span class="term">Term Name</span>
    16              <span>Term Value</span>
    17            </span>
    18            <span class="pair">
    19              <span class="term">Running?</span>
    20              <span>Yes</span>
    21            </span>
    22            <span class="pair">
    23              <span class="term">Last Updated</span>
    24              <span>{{format-ts (now)}}</span>
    25            </span>
    26          </div>
    27        </div>
    28        <p class="annotation">A way to tightly display key/value information. Typically seen at the top of pages.</p>
    29        `,
    30    };
    31  };
    32  
    33  export let Variants = () => {
    34    return {
    35      template: hbs`
    36        <h5 class="title is-5">Inline definitions variants</h5>
    37        <div class="boxed-section is-small is-success">
    38          <div class="boxed-section-body inline-definitions">
    39            <span class="label">Success Label</span>
    40            <span class="pair">
    41              <span class="term">Term Name</span>
    42              <span>Term Value</span>
    43            </span>
    44            <span class="pair">
    45              <span class="term">Last Updated</span>
    46              <span>{{format-ts (now)}}</span>
    47            </span>
    48          </div>
    49        </div>
    50        <div class="boxed-section is-small is-warning">
    51          <div class="boxed-section-body inline-definitions">
    52            <span class="label">Warning Label</span>
    53            <span class="pair">
    54              <span class="term">Term Name</span>
    55              <span>Term Value</span>
    56            </span>
    57            <span class="pair">
    58              <span class="term">Last Updated</span>
    59              <span>{{format-ts (now)}}</span>
    60            </span>
    61          </div>
    62        </div>
    63        <div class="boxed-section is-small is-danger">
    64          <div class="boxed-section-body inline-definitions">
    65            <span class="label">Danger Label</span>
    66            <span class="pair">
    67              <span class="term">Term Name</span>
    68              <span>Term Value</span>
    69            </span>
    70            <span class="pair">
    71              <span class="term">Last Updated</span>
    72              <span>{{format-ts (now)}}</span>
    73            </span>
    74          </div>
    75        </div>
    76        <div class="boxed-section is-small is-info">
    77          <div class="boxed-section-body inline-definitions">
    78            <span class="label">Info Label</span>
    79            <span class="pair">
    80              <span class="term">Term Name</span>
    81              <span>Term Value</span>
    82            </span>
    83            <span class="pair">
    84              <span class="term">Last Updated</span>
    85              <span>{{format-ts (now)}}</span>
    86            </span>
    87          </div>
    88        </div>
    89        <p class="annotation">Inline definitions are meant to pair well with emotive color variations.</p>
    90        `,
    91    };
    92  };