github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/components/accordion.stories.js (about) 1 import hbs from 'htmlbars-inline-precompile'; 2 import productMetadata from '../../app/utils/styleguide/product-metadata'; 3 4 export default { 5 title: 'Components|Accordion', 6 }; 7 8 export let Standard = () => { 9 return { 10 template: hbs` 11 <h5 class="title is-5">Accordion</h5> 12 <ListAccordion @source={{products}} @key="name" as |ac|> 13 <ac.head @buttonLabel="details"> 14 <div class="columns inline-definitions"> 15 <div class="column is-1">{{ac.item.name}}</div> 16 <div class="column is-1"> 17 <span class="bumper-left badge is-light">{{ac.item.lang}}</span> 18 </div> 19 </div> 20 </ac.head> 21 <ac.body> 22 <h1 class="title is-4">{{ac.item.name}}</h1> 23 <p>{{ac.item.desc}}</p> 24 <p><a href="{{ac.item.link}}" target="_parent">Learn more...</a></p> 25 </ac.body> 26 </ListAccordion> 27 `, 28 context: { 29 products: productMetadata, 30 }, 31 }; 32 }; 33 34 export let OneItem = () => { 35 return { 36 template: hbs` 37 <h5 class="title is-5">Accordion, one item</h5> 38 <ListAccordion @source={{take 1 products}} @key="name" as |a|> 39 <a.head @buttonLabel="details"> 40 <div class="columns inline-definitions"> 41 <div class="column is-1">{{a.item.name}}</div> 42 <div class="column is-1"> 43 <span class="bumper-left badge is-light">{{a.item.lang}}</span> 44 </div> 45 </div> 46 </a.head> 47 <a.body> 48 <h1 class="title is-4">{{a.item.name}}</h1> 49 <p>{{a.item.desc}}</p> 50 <p><a href="{{a.item.link}}">Learn more...</a></p> 51 </a.body> 52 </ListAccordion> 53 `, 54 context: { 55 products: productMetadata, 56 }, 57 }; 58 }; 59 60 export let NotExpandable = () => { 61 return { 62 template: hbs` 63 <h5 class="title is-5">Accordion, not expandable</h5> 64 <ListAccordion @source={{products}} @key="name" as |a|> 65 <a.head @buttonLabel="details" @isExpandable={{eq a.item.lang "golang"}}> 66 <div class="columns inline-definitions"> 67 <div class="column is-1">{{a.item.name}}</div> 68 <div class="column is-1"> 69 <span class="bumper-left badge is-light">{{a.item.lang}}</span> 70 </div> 71 </div> 72 </a.head> 73 <a.body> 74 <h1 class="title is-4">{{a.item.name}}</h1> 75 <p>{{a.item.desc}}</p> 76 <p><a href="{{a.item.link}}">Learn more...</a></p> 77 </a.body> 78 </ListAccordion> 79 `, 80 context: { 81 products: productMetadata, 82 }, 83 }; 84 };