const stepperDiv = hx.select('#stepper');

const stepper = new hx.Stepper(stepperDiv, [
  'First step title',
  'Second step title',
  'Third step: This has a title that may wrap onto multiple lines',
  'Fourth step title',
]);

hx.select('#stepper-controls')
  .add(hx.div()
    .add(hx.button('hx-btn')
      .text('Set step to 2')
      .on('click', () => stepper.selectedStep(2)))
    .add(hx.button('hx-btn')
      .text('Previous Step')
      .on('click', () => stepper.prevStep()))
    .add(hx.button('hx-btn')
      .text('Next Step')
      .on('click', () => stepper.nextStep()))
    .add(hx.button('hx-btn')
      .text('Toggle Error')
      .on('click', () => stepper.showError(!stepper.showError())))
    .add(hx.button('hx-btn')
      .text('Toggle Titles')
      .on('click', () => stepper.showTitles(!stepper.showTitles()))));