github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/components/buttons.stories.js (about)

     1  import hbs from 'htmlbars-inline-precompile';
     2  
     3  export default {
     4    title: 'Components|Buttons',
     5  };
     6  
     7  export let Standard = () => {
     8    return {
     9      template: hbs`
    10        <h5 class="title is-5">Buttons</h5>
    11        <div class="block">
    12          <a class="button">Button</a>
    13          <a class="button is-white">White</a>
    14          <a class="button is-light">Light</a>
    15          <a class="button is-dark">Dark</a>
    16          <a class="button is-black">Black</a>
    17          <a class="button is-link">Link</a>
    18        </div>
    19        <div class="block">
    20          <a class="button is-primary">Primary</a>
    21          <a class="button is-info">Info</a>
    22          <a class="button is-success">Success</a>
    23          <a class="button is-warning">Warning</a>
    24          <a class="button is-danger">Danger</a>
    25        </div>
    26        `,
    27    };
    28  };
    29  
    30  export let Outline = () => {
    31    return {
    32      template: hbs`
    33        <h5 class="title is-5">Outline buttons</h5>
    34        <div class="block">
    35          <a class="button is-outlined">Outlined</a>
    36          <a class="button is-primary is-outlined">Primary</a>
    37          <a class="button is-info is-outlined">Info</a>
    38          <a class="button is-success is-outlined">Success</a>
    39          <a class="button is-warning is-outlined">Warning</a>
    40          <a class="button is-danger is-outlined is-important">Danger</a>
    41        </div>
    42        `,
    43    };
    44  };
    45  
    46  export let Hollow = () => {
    47    return {
    48      template: hbs`
    49        <h5 class="title is-5">Hollow buttons</h5>
    50        <div class="block" style="background:#25BA81; padding:30px">
    51          <a class="button is-primary is-inverted is-outlined">Primary</a>
    52          <a class="button is-info is-inverted is-outlined">Info</a>
    53          <a class="button is-success is-inverted is-outlined">Success</a>
    54          <a class="button is-warning is-inverted is-outlined">Warning</a>
    55          <a class="button is-danger is-inverted is-outlined">Danger</a>
    56        </div>
    57        `,
    58    };
    59  };
    60  
    61  export let Sizes = () => {
    62    return {
    63      template: hbs`
    64        <h5 class="title is-5">Button sizes</h5>
    65        <div class="block">
    66          <a class="button is-small">Small</a>
    67          <a class="button">Normal</a>
    68          <a class="button is-medium">Medium</a>
    69          <a class="button is-large">Large</a>
    70        </div>
    71        `,
    72    };
    73  };
    74  
    75  export let Disabled = () => {
    76    return {
    77      template: hbs`
    78        <h5 class="title is-5">Anchor elements as buttons</h5>
    79        <div class="block">
    80          <a class="button is-disabled">Button</a>
    81          <a class="button is-white is-disabled">White</a>
    82          <a class="button is-light is-disabled">Light</a>
    83          <a class="button is-dark is-disabled">Dark</a>
    84          <a class="button is-black is-disabled">Black</a>
    85          <a class="button is-link is-disabled">Link</a>
    86        </div>
    87        <div class="block">
    88          <a class="button is-primary is-disabled">Primary</a>
    89          <a class="button is-info is-disabled">Info</a>
    90          <a class="button is-success is-disabled">Success</a>
    91          <a class="button is-warning is-disabled">Warning</a>
    92          <a class="button is-danger is-disabled">Danger</a>
    93        </div>
    94  
    95        <h5 class="title is-5">Button elements with <code>disabled</code> attribute</h5>
    96        <div class="block">
    97          <button class="button is-disabled" disabled>Button</button>
    98          <button class="button is-white is-disabled" disabled>White</button>
    99          <button class="button is-light is-disabled" disabled>Light</button>
   100          <button class="button is-dark is-disabled" disabled>Dark</button>
   101          <button class="button is-black is-disabled" disabled>Black</button>
   102          <button class="button is-link is-disabled" disabled>Link</button>
   103        </div>
   104        <div class="block">
   105          <button class="button is-primary is-disabled" disabled>Primary</button>
   106          <button class="button is-info is-disabled" disabled>Info</button>
   107          <button class="button is-success is-disabled" disabled>Success</button>
   108          <button class="button is-warning is-disabled" disabled>Warning</button>
   109          <button class="button is-danger is-disabled" disabled>Danger</button>
   110        </div>
   111  
   112        <h5 class="title is-5">Button elements with <code>aria-disabled="true"</code></h5>
   113        <div class="block">
   114          <button class="button is-disabled" aria-disabled="true">Button</button>
   115          <button class="button is-white is-disabled" aria-disabled="true">White</button>
   116          <button class="button is-light is-disabled" aria-disabled="true">Light</button>
   117          <button class="button is-dark is-disabled" aria-disabled="true">Dark</button>
   118          <button class="button is-black is-disabled" aria-disabled="true">Black</button>
   119          <button class="button is-link is-disabled" aria-disabled="true">Link</button>
   120        </div>
   121        <div class="block">
   122          <button class="button is-primary is-disabled" aria-disabled="true">Primary</button>
   123          <button class="button is-info is-disabled" aria-disabled="true">Info</button>
   124          <button class="button is-success is-disabled" aria-disabled="true">Success</button>
   125          <button class="button is-warning is-disabled" aria-disabled="true">Warning</button>
   126          <button class="button is-danger is-disabled" aria-disabled="true">Danger</button>
   127        </div>
   128        `,
   129    };
   130  };