github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/components/gutter-menu.stories.js (about) 1 import hbs from 'htmlbars-inline-precompile'; 2 3 export default { 4 title: 'Components|Gutter Menu', 5 }; 6 7 export let Standard = () => { 8 return { 9 template: hbs` 10 <h5 class="title is-5">Gutter menu</h5> 11 <div class="columns"> 12 <div class="column is-4"> 13 <div class="gutter"> 14 <aside class="menu"> 15 <p class="menu-label">Places</p> 16 <ul class="menu-list"> 17 <li><a href="javascript:;" class="is-active">Place One</a></li> 18 <li><a href="javascript:;">Place Two</a></li> 19 </ul> 20 21 <p class="menu-label">Features</p> 22 <ul class="menu-list"> 23 <li><a href="javascript:;">Feature One</a></li> 24 <li><a href="javascript:;">Feature Two</a></li> 25 </ul> 26 </aside> 27 </div> 28 </div> 29 <div class="column"> 30 <div class="mock-content"> 31 <div class="mock-vague"></div> 32 </div> 33 </div> 34 </div> 35 `, 36 }; 37 }; 38 39 export let RichComponents = () => { 40 return { 41 template: hbs` 42 <h5 class="title is-5">Gutter navigation with rich components</h5> 43 <div class="columns"> 44 <div class="column is-4"> 45 <div class="gutter"> 46 <aside class="menu"> 47 <p class="menu-label">Places</p> 48 <ul class="menu-list"> 49 <li> 50 <div class="menu-item"> 51 <PowerSelect @selected={{or selection "One"}} @options={{array "One" "Two" "Three"}} @onChange={{action (mut selection)}} as |option|> 52 {{option}} 53 </PowerSelect> 54 </div> 55 </li> 56 <li><a href="javascript:;" class="is-active">Place One</a></li> 57 <li><a href="javascript:;">Place Two</a></li> 58 </ul> 59 60 <p class="menu-label">Features</p> 61 <ul class="menu-list"> 62 <li><a href="javascript:;">Feature One</a></li> 63 <li><a href="javascript:;">Feature Two</a></li> 64 </ul> 65 </aside> 66 </div> 67 </div> 68 <div class="column"> 69 <div class="mock-content"> 70 <div class="mock-vague"></div> 71 </div> 72 </div> 73 </div> 74 <p class="annotation">In order to keep the gutter navigation streamlined and easy to navigation, rich components should be avoided when possible. When not possible, they should be kept near the top.</p> 75 `, 76 }; 77 }; 78 79 export let ManyItems = () => { 80 return { 81 template: hbs` 82 <h5 class="title is-5">Hypothetical gutter navigation with many items</h5> 83 <div class="columns"> 84 <div class="column is-4"> 85 <div class="gutter"> 86 <aside class="menu"> 87 <p class="menu-label">Places</p> 88 <ul class="menu-list"> 89 {{#each (array "One Two" "Three" "Four" "Five" "Six" "Seven") as |item|}} 90 <li><a href="javascript:;">Place {{item}}</a></li> 91 {{/each}} 92 </ul> 93 94 <p class="menu-label">Features</p> 95 <ul class="menu-list"> 96 {{#each (array "One Two" "Three" "Four" "Five" "Six" "Seven") as |item|}} 97 <li><a href="javascript:;">Feature {{item}}</a></li> 98 {{/each}} 99 </ul> 100 101 <p class="menu-label">Other</p> 102 <ul class="menu-list"> 103 <li><a href="javascript:;" class="is-active">The one that didn't fit in</a></li> 104 </ul> 105 106 <p class="menu-label">Things</p> 107 <ul class="menu-list"> 108 {{#each (array "One Two" "Three" "Four" "Five" "Six" "Seven") as |item|}} 109 <li><a href="javascript:;">Thing {{item}}</a></li> 110 {{/each}} 111 </ul> 112 </aside> 113 </div> 114 </div> 115 <div class="column"> 116 <div class="mock-content"> 117 <div class="mock-vague"></div> 118 </div> 119 </div> 120 </div> 121 <p class="annotation">There will only ever be one gutter menu in the Nomad UI, but it helps to imagine a situation where there are many navigation items in the gutter.</p> 122 `, 123 }; 124 }; 125 126 export let IconItems = () => { 127 return { 128 template: hbs` 129 <h5 class="title is-5">Hypothetical gutter navigation with icon items</h5> 130 <div class="columns"> 131 <div class="column is-4"> 132 <div class="gutter"> 133 <aside class="menu"> 134 <p class="menu-label">Places</p> 135 <ul class="menu-list"> 136 <li><a href="javascript:;">{{x-icon "clock"}} Place One</a></li> 137 <li><a href="javascript:;" class="is-active">{{x-icon "history"}} Place Two</a></li> 138 </ul> 139 140 <p class="menu-label">Features</p> 141 <ul class="menu-list"> 142 <li><a href="javascript:;">{{x-icon "warning"}} Feature One</a></li> 143 <li><a href="javascript:;">{{x-icon "media-pause"}} Feature Two</a></li> 144 </ul> 145 </aside> 146 </div> 147 </div> 148 <div class="column"> 149 <div class="mock-content"> 150 <div class="mock-vague"></div> 151 </div> 152 </div> 153 </div> 154 <p class="annotation">In the future, the gutter menu may have icons.</p> 155 `, 156 }; 157 }; 158 159 export let TaggedItems = () => { 160 return { 161 template: hbs` 162 <h5 class="title is-5">Hypothetical gutter navigation with icon items</h5> 163 <div class="columns"> 164 <div class="column is-4"> 165 <div class="gutter"> 166 <aside class="menu"> 167 <p class="menu-label">Places</p> 168 <ul class="menu-list"> 169 <li><a href="javascript:;">Place One <span class="tag is-small">Beta</span></a></li> 170 <li><a href="javascript:;" class="is-active">{{x-icon "history"}} Place Two</a></li> 171 </ul> 172 173 <p class="menu-label">Features</p> 174 <ul class="menu-list"> 175 <li><a href="javascript:;">{{x-icon "warning"}} Feature One</a></li> 176 <li><a href="javascript:;">{{x-icon "media-pause"}} Feature Two <span class="tag is-small is-warning">3</span></a></li> 177 </ul> 178 </aside> 179 </div> 180 </div> 181 <div class="column"> 182 <div class="mock-content"> 183 <div class="mock-vague"></div> 184 </div> 185 </div> 186 </div> 187 <p class="annotation">Tags can be used to denote beta features or low-priority notifications.</p> 188 `, 189 }; 190 }; 191 192 export let Global = () => { 193 return { 194 template: hbs` 195 <h5 class="title is-5">Global gutter navigation</h5> 196 <div class="columns"> 197 <div class="column is-4"> 198 <GutterMenu> 199 {{!-- Page content here --}} 200 </GutterMenu> 201 </div> 202 </div> 203 <p class="annotation">Since there will only ever be one gutter menu in the UI, it makes sense to express the menu as a singleton component. This is what that singleton component looks like.</p> 204 <p class="annotation"><strong>Note:</strong> Normally the gutter menu is rendered within a page layout and is fixed position. The columns shown in this example are only to imitate the actual width without applying fixed positioning.</p> 205 `, 206 }; 207 };