github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/stories/components/two-step-button.stories.js (about) 1 import hbs from 'htmlbars-inline-precompile'; 2 3 export default { 4 title: 'Components/Two-Step Button', 5 }; 6 7 export let Standard = () => { 8 return { 9 template: hbs` 10 <h5 class="title is-5">Two-Step Button</h5> 11 <br><br> 12 <TwoStepButton 13 @idleText="Scary Action" 14 @cancelText="Nvm" 15 @confirmText="Yep" 16 @confirmationMessage="Wait, really? Like...seriously?" 17 /> 18 `, 19 }; 20 }; 21 22 export let Styled = () => { 23 return { 24 template: hbs` 25 <h5 class="title is-5">Two-Step Button with class overrides</h5> 26 <br><br> 27 <TwoStepButton 28 @idleText="Scary Action" 29 @cancelText="Nvm" 30 @confirmText="Yep" 31 @confirmationMessage="Wait, really? Like...seriously?" 32 @classes={{hash 33 idleButton="is-danger is-large" 34 confirmationMessage="badge is-warning" 35 confirmButton="is-large" 36 cancelButton="is-hollow" 37 }} 38 /> 39 `, 40 }; 41 }; 42 43 export let InTitle = () => { 44 return { 45 template: hbs` 46 <h5 class="title is-5">Two-Step Button in title</h5> 47 <br><br> 48 <h1 class="title"> 49 This is a page title 50 <TwoStepButton 51 @idleText="Scary Action" 52 @cancelText="Nvm" 53 @confirmText="Yep" 54 @confirmationMessage="Wait, really? Like...seriously?" 55 /> 56 </h1> 57 `, 58 }; 59 }; 60 61 export let InlineText = () => { 62 return { 63 template: hbs` 64 <h5 class="title is-5">Two-Step Button with inline confirmation message</h5> 65 <br><br> 66 <TwoStepButton 67 @idleText="Scary Action" 68 @cancelText="Nvm" 69 @confirmText="Yep" 70 @confirmationMessage="Really?" 71 @inlineText={{true}} 72 /> 73 <br><br> 74 <span style="padding-left: 4rem"></span> 75 <TwoStepButton 76 @idleText="Scary Action" 77 @cancelText="Nvm" 78 @confirmText="Yep" 79 @confirmationMessage="Really?" 80 @alignRight={{true}} 81 @inlineText={{true}} 82 /> 83 `, 84 }; 85 }; 86 87 export let LoadingState = () => { 88 return { 89 template: hbs` 90 <h5 class="title is-5">Two-Step Button loading state</h5> 91 <br><br> 92 <h1 class="title"> 93 This is a page title 94 <TwoStepButton 95 @idleText="Scary Action" 96 @cancelText="Nvm" 97 @confirmText="Yep" 98 @confirmationMessage="Wait, really? Like...seriously?" 99 @awaitingConfirmation={{true}} 100 @state="prompt" 101 /> 102 </h1> 103 <p class="annotation"> <strong>Note:</strong> the <code>state</code> property is internal state and only used here to bypass the idle state for demonstration purposes.</p> 104 `, 105 }; 106 };