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