github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/stories/components/stepper-input.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/Stepper Input',
     6    decorators: [withKnobs],
     7  };
     8  
     9  const variantKnob = () =>
    10    optionsKnob(
    11      'Variant',
    12      {
    13        Primary: 'is-primary',
    14        Info: 'is-info',
    15        Warning: 'is-warning',
    16        Danger: 'is-danger',
    17      },
    18      'is-primary',
    19      {
    20        display: 'inline-radio',
    21      },
    22      'variant-id'
    23    );
    24  
    25  export let Standard = () => {
    26    return {
    27      template: hbs`
    28        <p class="mock-spacing">
    29          <StepperInput
    30            @value={{value}}
    31            @min={{min}}
    32            @max={{max}}
    33            @class={{variant}}
    34            @onChange={{action (mut value)}}>
    35            Stepper
    36          </StepperInput>
    37          <button class="button is-info">Button for Context</button>
    38        </p>
    39        <p class="mock-spacing"><strong>External Value:</strong> {{value}}</p>
    40      `,
    41      context: {
    42        min: 0,
    43        max: 10,
    44        value: 5,
    45        variant: variantKnob(),
    46      },
    47    };
    48  };