github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/components/timeline.stories.js (about) 1 import hbs from 'htmlbars-inline-precompile'; 2 import moment from 'moment'; 3 4 export default { 5 title: 'Components|Timeline', 6 }; 7 8 export let Standard = () => { 9 return { 10 template: hbs` 11 <h5 class="title is-5">Timeline</h5> 12 <ol class="timeline"> 13 <li class="timeline-note"> 14 {{format-date yesterday}} 15 </li> 16 <li class="timeline-object"> 17 <div class="boxed-section"> 18 <div class="boxed-section-head is-light"> 19 Object number one 20 </div> 21 </div> 22 </li> 23 <li class="timeline-object"> 24 <div class="boxed-section"> 25 <div class="boxed-section-head is-light"> 26 Object number two 27 </div> 28 </div> 29 </li> 30 <li class="timeline-note"> 31 {{format-date today}} 32 </li> 33 <li class="timeline-object"> 34 <div class="boxed-section"> 35 <div class="boxed-section-head is-light"> 36 Object number three 37 </div> 38 </div> 39 </li> 40 </ol> 41 <p class="annotation">Timelines are a combination of objects and notes. Objects compose with boxed sections to create structure.</p> 42 <p class="annotation">Timeline notes should be used sparingly when possible. In this example there is a note per day rather than a note per object.</p> 43 `, 44 context: { 45 yesterday: moment().subtract(1, 'd'), 46 today: moment(), 47 }, 48 }; 49 }; 50 51 export let Detailed = () => { 52 return { 53 template: hbs` 54 <h5 class="title is-5">Detailed timeline</h5> 55 <ol class="timeline"> 56 <li class="timeline-note"> 57 {{format-date today}} 58 </li> 59 <li class="timeline-object"> 60 <div class="boxed-section"> 61 <div class="boxed-section-head is-light"> 62 <span class="tag is-running">Running</span> 63 <span class="bumper-left pair is-faded"> 64 <span class="term">Stable</span> 65 <span class="badge is-light is-faded"><code>a387e243</code></span> 66 </span> 67 <span class="bumper-left pair is-faded"> 68 <span class="term">Submitted</span> 69 <span class="tooltip" aria-label="{{format-month-ts (now)}}">{{moment-from-now (now)}}</span> 70 </span> 71 </div> 72 </div> 73 </li> 74 <li class="timeline-object"> 75 <div class="boxed-section"> 76 <div class="boxed-section-head is-light"> 77 <span class="tag is-complete">Complete</span> 78 <span class="bumper-left pair is-faded"> 79 <span class="term">Expired</span> 80 <span class="badge is-light is-faded"><code>b3220efb</code></span> 81 </span> 82 <span class="bumper-left pair is-faded"> 83 <span class="term">Submitted</span> 84 <span>{{format-month-ts yesterday}}</span> 85 </span> 86 </div> 87 </div> 88 </li> 89 <li class="timeline-note"> 90 {{format-date yesterday}} 91 </li> 92 <li class="timeline-object"> 93 <div class="boxed-section"> 94 <div class="boxed-section-head is-light"> 95 <span class="tag is-error">Failed</span> 96 <span class="bumper-left pair is-faded"> 97 <span class="term">Reverted</span> 98 <span class="badge is-light is-faded"><code>fec9218e</code></span> 99 </span> 100 <span class="bumper-left pair is-faded"> 101 <span class="term">Submitted</span> 102 <span>{{format-month-ts yesterday}}</span> 103 </span> 104 </div> 105 </div> 106 </li> 107 </ol> 108 `, 109 context: { 110 yesterday: moment().subtract(1, 'd'), 111 today: moment(), 112 }, 113 }; 114 }; 115 116 export let Toggling = () => { 117 return { 118 template: hbs` 119 <h5 class="title is-5">Toggling timeline objects</h5> 120 <ol class="timeline"> 121 <li class="timeline-note"> 122 {{format-date today}} 123 </li> 124 <li class="timeline-object"> 125 <div class="boxed-section"> 126 <div class="boxed-section-head is-light"> 127 <span class="tag is-running">Running</span> 128 <span class="bumper-left pair is-faded"> 129 <span class="term">Stable</span> 130 <span class="badge is-light is-faded"><code>a387e243</code></span> 131 </span> 132 <button 133 class="button is-light is-compact pull-right" 134 onclick={{action (mut toggle1) (not toggle1)}}> 135 {{if toggle1 "Close" "Open"}} 136 </button> 137 </div> 138 {{#if toggle1}} 139 <div class="boxed-section-body"> 140 <p>Some details for the timeline object.</p> 141 </div> 142 {{/if}} 143 </div> 144 </li> 145 <li class="timeline-note"> 146 {{format-date yesterday}} 147 </li> 148 <li class="timeline-object"> 149 <div class="boxed-section"> 150 <div class="boxed-section-head is-light"> 151 <span class="tag is-complete">Complete</span> 152 <span class="bumper-left pair is-faded"> 153 <span class="term">Expired</span> 154 <span class="badge is-light is-faded"><code>b3220efb</code></span> 155 </span> 156 <button 157 class="button is-light is-compact pull-right" 158 onclick={{action (mut toggle2) (not toggle2)}}> 159 {{if toggle2 "Close" "Open"}} 160 </button> 161 </div> 162 {{#if toggle2}} 163 <div class="boxed-section-body"> 164 <p>Some details for the timeline object.</p> 165 </div> 166 {{/if}} 167 </div> 168 </li> 169 </ol> 170 <p class="annotation"></p> 171 `, 172 context: { 173 yesterday: moment().subtract(1, 'd'), 174 today: moment(), 175 }, 176 }; 177 }; 178 179 export let Emphasizing = () => { 180 return { 181 template: hbs` 182 <h5 class="title is-5">Emphasizing timeline objects</h5> 183 <ol class="timeline"> 184 <li class="timeline-note"> 185 {{format-date today}} 186 </li> 187 <li class="timeline-object"> 188 <div class="boxed-section"> 189 <div class="boxed-section-head is-light"> 190 <span class="pair is-faded"> 191 <span class="term">Stable</span> 192 <span class="badge is-light is-faded"><code>a387e243</code></span> 193 </span> 194 <span class="bumper-left pair is-faded"> 195 <span class="term">Submitted</span> 196 <span class="tooltip" aria-label="{{format-ts (now)}}">{{moment-from-now (now)}}</span> 197 </span> 198 </div> 199 </div> 200 </li> 201 <li class="timeline-object"> 202 <div class="boxed-section"> 203 <div class="boxed-section-head"> 204 Pay attention here 205 </div> 206 <div class="boxed-section-body"> 207 <span class="pair is-faded"> 208 <span class="term">Expired</span> 209 <span class="badge is-light is-faded"><code>b3220efb</code></span> 210 </span> 211 <span class="bumper-left pair is-faded"> 212 <span class="term">Submitted</span> 213 <span>{{format-ts yesterday}}</span> 214 </span> 215 </div> 216 </div> 217 </li> 218 <li class="timeline-note"> 219 {{format-date yesterday}} 220 </li> 221 <li class="timeline-object"> 222 <div class="boxed-section"> 223 <div class="boxed-section-head is-light"> 224 <span class="pair is-faded"> 225 <span class="term">Reverted</span> 226 <span class="badge is-light is-faded"><code>fec9218e</code></span> 227 </span> 228 <span class="bumper-left pair is-faded"> 229 <span class="term">Submitted</span> 230 <span>{{format-ts yesterday}}</span> 231 </span> 232 </div> 233 </div> 234 </li> 235 </ol> 236 <p class="annotation">By using a full boxed-section for an emphasized timeline object, the object takes up more space and gets more visual weight. It also adheres to existing patterns.</p> 237 `, 238 context: { 239 yesterday: moment().subtract(1, 'd'), 240 today: moment(), 241 }, 242 }; 243 };