github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/stories/components/multi-select-dropdown.stories.js (about)

     1  import hbs from 'htmlbars-inline-precompile';
     2  
     3  export default {
     4    title: 'Components|Multi-Select Dropdown',
     5  };
     6  
     7  let options1 = [
     8    { key: 'option-1', label: 'Option One' },
     9    { key: 'option-2', label: 'Option Two' },
    10    { key: 'option-3', label: 'Option Three' },
    11    { key: 'option-4', label: 'Option Four' },
    12    { key: 'option-5', label: 'Option Five' },
    13  ];
    14  
    15  let selection1 = ['option-2', 'option-4', 'option-5'];
    16  
    17  export let Standard = () => {
    18    return {
    19      template: hbs`
    20        <h5 class="title is-5">Multi-Select Dropdown</h5>
    21        <MultiSelectDropdown
    22          @label="Example Dropdown"
    23          @options={{options1}}
    24          @selection={{selection1}}
    25          @onSelect={{action (mut selection1)}} />
    26        <p class="annotation">A wrapper around basic-dropdown for creating a list of checkboxes and tracking the state thereof.</p>
    27        `,
    28      context: {
    29        options1,
    30        selection1,
    31      },
    32    };
    33  };
    34  
    35  export let RightAligned = () => {
    36    return {
    37      template: hbs`
    38        <h5 class="title is-5">Multi-Select Dropdown right-aligned</h5>
    39        <div style="display:flex; justify-content:flex-end">
    40          <MultiSelectDropdown
    41            @label="Example right-aligned Dropdown"
    42            @options={{options1}}
    43            @selection={{selection1}}
    44            @onSelect={{action (mut selection1)}} />
    45        </div>
    46        `,
    47      context: {
    48        options1,
    49        selection1,
    50      },
    51    };
    52  };
    53  
    54  export let ManyOptions = () => {
    55    return {
    56      template: hbs`
    57        <h5 class="title is-5">Multi-Select Dropdown with many options</h5>
    58        <MultiSelectDropdown
    59          @label="Lots of options in here"
    60          @options={{optionsMany}}
    61          @selection={{selectionMany}}
    62          @onSelect={{action (mut selectionMany)}} />
    63        <p class="annotation">
    64          A strength of the multi-select-dropdown is its simple presentation. It is quick to select options and it is quick to remove options.
    65          However, this strength becomes a weakness when there are too many options. Since the selection isn't pinned in any way, removing a selection
    66          can become an adventure of scrolling up and down. Also since the selection isn't pinned, this component can't support search, since search would
    67          entirely mask the selection.
    68        </p>
    69        `,
    70      context: {
    71        optionsMany: Array(100)
    72          .fill(null)
    73          .map((_, i) => ({ label: `Option ${i}`, key: `option-${i}` })),
    74        selectionMany: [],
    75      },
    76    };
    77  };
    78  
    79  export let Bar = () => {
    80    return {
    81      template: hbs`
    82        <h5 class="title is-5">Multi-Select Dropdown bar</h5>
    83        <div class="button-bar">
    84          <MultiSelectDropdown
    85            @label="Datacenter"
    86            @options={{optionsDatacenter}}
    87            @selection={{selectionDatacenter}}
    88            @onSelect={{action (mut selectionDatacenter)}} />
    89          <MultiSelectDropdown
    90            @label="Type"
    91            @options={{optionsType}}
    92            @selection={{selectionType}}
    93            @onSelect={{action (mut selectionType)}} />
    94          <MultiSelectDropdown
    95            @label="Status"
    96            @options={{optionsStatus}}
    97            @selection={{selectionStatus}}
    98            @onSelect={{action (mut selectionStatus)}} />
    99        </div>
   100        <p class="annotation">
   101          Since this is a core component for faceted search, it makes sense to letruct an arrangement of multi-select dropdowns.
   102          Do this by wrapping all the options in a <code>.button-bar</code> container.
   103        </p>
   104        `,
   105      context: {
   106        optionsDatacenter: [
   107          { key: 'pdx-1', label: 'pdx-1' },
   108          { key: 'jfk-1', label: 'jfk-1' },
   109          { key: 'jfk-2', label: 'jfk-2' },
   110          { key: 'muc-1', label: 'muc-1' },
   111        ],
   112        selectionDatacenter: ['jfk-1', 'jfk-2'],
   113  
   114        optionsType: [
   115          { key: 'batch', label: 'Batch' },
   116          { key: 'service', label: 'Service' },
   117          { key: 'system', label: 'System' },
   118          { key: 'periodic', label: 'Periodic' },
   119          { key: 'parameterized', label: 'Parameterized' },
   120        ],
   121        selectionType: ['system', 'service'],
   122  
   123        optionsStatus: [
   124          { key: 'pending', label: 'Pending' },
   125          { key: 'running', label: 'Running' },
   126          { key: 'dead', label: 'Dead' },
   127        ],
   128        selectionStatus: [],
   129      },
   130    };
   131  };