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