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 };