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