github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/stories/components/dropdown.stories.js (about)

     1  import hbs from 'htmlbars-inline-precompile';
     2  
     3  export default {
     4    title: 'Components/Dropdown',
     5  };
     6  
     7  let options = [
     8    { name: 'Consul' },
     9    { name: 'Nomad' },
    10    { name: 'Packer' },
    11    { name: 'Terraform' },
    12    { name: 'Vagrant' },
    13    { name: 'Vault' },
    14  ];
    15  
    16  export let Standard = () => {
    17    return {
    18      template: hbs`
    19        <h5 class="title is-5">Dropdown</h5>
    20        <PowerSelect @options={{options}} @selected={{selectedOption}} @searchField="name" @searchEnabled={{gt options.length 10}} @onChange={{action (mut selectedOption)}} as |option|>
    21          {{option.name}}
    22        </PowerSelect>
    23        <p class="annotation">Power Select currently fulfills all of Nomad's dropdown needs out of the box.</p>
    24        `,
    25      context: {
    26        options,
    27      },
    28    };
    29  };
    30  
    31  export let Resized = () => {
    32    return {
    33      template: hbs`
    34      <h5 class="title is-5">Dropdown resized</h5>
    35      <div class="columns">
    36        <div class="column is-3">
    37          <PowerSelect @options={{options}} @selected={{selectedOption2}} @searchField="name" @searchEnabled={{gt options.length 10}} @onChange={{action (mut selectedOption2)}} as |option|>
    38            {{option.name}}
    39          </PowerSelect>
    40        </div>
    41      </div>
    42      <p class="annotation">Dropdowns are always 100% wide. To control the width of a dropdown, adjust the dimensions of its container. One way to achieve this is using columns.</p>
    43      `,
    44      context: {
    45        options,
    46      },
    47    };
    48  };
    49  
    50  export let Search = () => {
    51    return {
    52      template: hbs`
    53        <h5 class="title is-5">Dropdown with search</h5>
    54        <div class="columns">
    55          <div class="column is-3">
    56            <PowerSelect @options={{manyOptions}} @selected={{selectedOption3}} @searchField="name" @searchEnabled={{gt manyOptions.length 10}} @onChange={{action (mut selectedOption3)}} as |option|>
    57              {{option.name}}
    58            </PowerSelect>
    59          </div>
    60        </div>
    61        <p class="annotation">Whether or not the dropdown has a search box is configurable. Typically the default is to show a search once a dropdown has more than 10 options.</p>
    62        `,
    63      context: {
    64        manyOptions: [
    65          'One',
    66          'Two',
    67          'Three',
    68          'Four',
    69          'Five',
    70          'Six',
    71          'Seven',
    72          'Eight',
    73          'Nine',
    74          'Ten',
    75          'Eleven',
    76          'Twelve',
    77          'Thirteen',
    78          'Fourteen',
    79          'Fifteen',
    80        ].map((name) => ({ name })),
    81      },
    82    };
    83  };