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