github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/stories/components/boxed-section.stories.js (about) 1 import hbs from 'htmlbars-inline-precompile'; 2 import { withKnobs, optionsKnob } from '@storybook/addon-knobs'; 3 4 export default { 5 title: 'Components/Boxed Section', 6 decorators: [withKnobs], 7 }; 8 9 export let Standard = () => { 10 return { 11 template: hbs` 12 <h5 class="title is-5">Boxed section</h5> 13 <div class="boxed-section {{variant}}"> 14 <div class="boxed-section-head"> 15 Boxed Section 16 </div> 17 <div class="boxed-section-body"> 18 <div class="mock-content"> 19 <div class="mock-image"></div> 20 <div class="mock-copy"></div> 21 <div class="mock-copy"></div> 22 </div> 23 </div> 24 </div> 25 `, 26 context: contextFactory(), 27 }; 28 }; 29 30 export let RightHandDetails = () => { 31 return { 32 template: hbs` 33 <h5 class="title is-5">Boxed section with right hand details</h5> 34 <div class="boxed-section {{variant}}"> 35 <div class="boxed-section-head"> 36 Boxed Section With Right Hand Details 37 <span class="pull-right">{{now interval=1000}}</span> 38 </div> 39 <div class="boxed-section-body"> 40 <div class="mock-content"> 41 <div class="mock-image"></div> 42 <div class="mock-copy"></div> 43 <div class="mock-copy"></div> 44 </div> 45 </div> 46 </div> 47 `, 48 context: contextFactory(), 49 }; 50 }; 51 52 export let TitleDecoration = () => { 53 return { 54 template: hbs` 55 <h5 class="title is-5">Boxed section with title decoration</h5> 56 <div class="boxed-section {{variant}}"> 57 <div class="boxed-section-head"> 58 Boxed Section With Title Decoration 59 <span class="badge is-white">7</span> 60 </div> 61 <div class="boxed-section-body"> 62 <div class="mock-content"> 63 <div class="mock-image"></div> 64 <div class="mock-copy"></div> 65 <div class="mock-copy"></div> 66 </div> 67 </div> 68 </div> 69 `, 70 context: contextFactory(), 71 }; 72 }; 73 74 export let Foot = () => { 75 return { 76 template: hbs` 77 <h5 class="title is-5">Boxed section with foot</h5> 78 <div class="boxed-section {{variant}}"> 79 <div class="boxed-section-head"> 80 Boxed Section With Large Header 81 </div> 82 <div class="boxed-section-body with-foot"> 83 <div class="mock-content"> 84 <div class="mock-image"></div> 85 <div class="mock-copy"></div> 86 <div class="mock-copy"></div> 87 </div> 88 </div> 89 <div class="boxed-section-foot"> 90 <span>Left-aligned message</span> 91 <a href="javascript:;" class="pull-right">Toggle or other action</a> 92 </div> 93 </div> 94 `, 95 context: contextFactory(), 96 }; 97 }; 98 99 export let LargeHeader = () => { 100 return { 101 template: hbs` 102 <h5 class="title is-5">Boxed section with large header</h5> 103 <div class="boxed-section {{variant}}"> 104 <div class="boxed-section-head"> 105 <div class="boxed-section-row"> 106 Boxed Section With Large Header 107 <span class="badge is-white is-subtle bumper-left">Status</span> 108 </div> 109 <div class="boxed-section-row"> 110 <span class="tag is-outlined">A tag that goes on a second line because it's rather long</span> 111 </div> 112 </div> 113 <div class="boxed-section-body"> 114 <div class="mock-content"> 115 <div class="mock-image"></div> 116 <div class="mock-copy"></div> 117 <div class="mock-copy"></div> 118 </div> 119 </div> 120 </div> 121 `, 122 context: contextFactory(), 123 }; 124 }; 125 126 export let DarkBody = () => { 127 return { 128 template: hbs` 129 <h5 class="title is-5">Boxed section with dark body</h5> 130 <div class="boxed-section {{variant}}"> 131 <div class="boxed-section-head"> 132 Boxed Section With Dark Body 133 </div> 134 <div class="boxed-section-body is-dark"> 135 <div class="mock-content"> 136 <div class="mock-image"></div> 137 <div class="mock-copy"></div> 138 <div class="mock-copy"></div> 139 </div> 140 </div> 141 </div> 142 `, 143 context: contextFactory(), 144 }; 145 }; 146 147 function contextFactory() { 148 return { 149 variant: optionsKnob( 150 'Variant', 151 { 152 Normal: '', 153 Info: 'is-info', 154 Warning: 'is-warning', 155 Danger: 'is-danger', 156 }, 157 '', 158 { 159 display: 'inline-radio', 160 }, 161 'variant-id' 162 ), 163 }; 164 }