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

     1  import hbs from 'htmlbars-inline-precompile';
     2  
     3  export default {
     4    title: 'Components|Alerts',
     5  };
     6  
     7  export let Standard = () => {
     8    return {
     9      template: hbs`
    10        <h5 class="title is-5">Alert</h5>
    11        <div class="notification is-info">
    12          <h3 class="title is-4">This is an alert</h3>
    13          <p>Alerts are used for both situational and reactionary information.</p>
    14        </div>
    15        <p class="annotation">Alerts use Bulma's notification component.</p>
    16        `,
    17    };
    18  };
    19  
    20  export let Colors = () => {
    21    return {
    22      template: hbs`
    23        <h5 class="title is-5">Alert colors</h5>
    24        <div class="notification is-info">
    25          <h3 class="title is-4">This is an alert</h3>
    26          <p>Alerts are used for both situational and reactionary information.</p>
    27        </div>
    28  
    29        <div class="notification is-success">
    30          <h3 class="title is-4">This is an alert</h3>
    31          <p>Alerts are used for both situational and reactionary information.</p>
    32        </div>
    33  
    34        <div class="notification is-warning">
    35          <h3 class="title is-4">This is an alert</h3>
    36          <p>Alerts are used for both situational and reactionary information.</p>
    37        </div>
    38  
    39        <div class="notification is-danger">
    40          <h3 class="title is-4">This is an alert</h3>
    41          <p>Alerts are used for both situational and reactionary information.</p>
    42        </div>
    43  
    44        <p class="annotation">Alerts are always paired with an emotive color. If there is no emotive association with the content of the alert, then an alert is the wrong component to use.</p>
    45        `,
    46    };
    47  };
    48  
    49  export let Dismissal = () => {
    50    return {
    51      template: hbs`
    52      <h5 class="title is-5">Alert dismissal</h5>
    53      <div class="notification is-info">
    54        <div class="columns">
    55          <div class="column">
    56            <h3 class="title is-4">This is an alert</h3>
    57            <p>Alerts are used for both situational and reactionary information.</p>
    58          </div>
    59          <div class="column is-centered is-minimum">
    60            <button class="button is-info">Okay</button>
    61          </div>
    62        </div>
    63      </div>
    64  
    65      <div class="notification is-success">
    66        <div class="columns">
    67          <div class="column">
    68            <h3 class="title is-4">This is an alert</h3>
    69            <p>Alerts are used for both situational and reactionary information.</p>
    70          </div>
    71          <div class="column is-centered is-minimum">
    72            <button class="button is-success">Okay</button>
    73          </div>
    74        </div>
    75      </div>
    76  
    77      <div class="notification is-warning">
    78        <div class="columns">
    79          <div class="column">
    80            <h3 class="title is-4">This is an alert</h3>
    81            <p>Alerts are used for both situational and reactionary information.</p>
    82          </div>
    83          <div class="column is-centered is-minimum">
    84            <button class="button is-warning">Okay</button>
    85          </div>
    86        </div>
    87      </div>
    88  
    89      <div class="notification is-danger">
    90        <div class="columns">
    91          <div class="column">
    92            <h3 class="title is-4">This is an alert</h3>
    93            <p>Alerts are used for both situational and reactionary information.</p>
    94          </div>
    95          <div class="column is-centered is-minimum">
    96            <button class="button is-danger">Okay</button>
    97          </div>
    98        </div>
    99      </div>
   100      `,
   101    };
   102  };