Form Modal

Fullscreen lta-form-modal for FormGenerator flows. The centred grid layout is built into the component — mount FormGenerator into contentEl (same pattern as Activators Portal onboarding).

Set id on the host element to get a component reference. UsecontentEl to mount FormGenerator and modalEl for the Modal plugin.labelledby sets aria-labelledby; is-full-screen defaults totrue.

Example Code

<button type="button" class="lta-btn lta-btn--md lta-btn--primary" id="js-open-form-modal-demo">
  Open modal
</button>

<lta-form-modal
  id="form-modal-component"
  labelledby="form-modal-demo-label"
></lta-form-modal>

<script type="module">
  import SelectorEngine from './utils/dom/selector-engine';
  import EventHandler from './utils/dom/event-handler';
  import Modal from './components/Modal';
  import FormGenerator, { FormTypes } from './components/FormGenerator';

  const stepsData = [
    {
      id: 1,
      step: 1,
      fieldName: 'membershipType',
      question: 'Membership',
      stepperTitle: 'Membership type',
      instructionText: 'Which membership type are you applying for?',
      errorMessage: 'Please select an option',
      options: [
        { id: 'individual', label: 'Individual' },
        { id: 'family', label: 'Family' }
      ],
      visible: true,
      questionType: 'radio'
    },
    {
      id: 2,
      step: 2,
      fieldName: 'region',
      question: 'Region',
      stepperTitle: 'Your region',
      instructionText: 'Which region are you based in?',
      errorMessage: 'Please select a region',
      placeholder: 'Select a region',
      options: [
        { id: 'london', label: 'London' },
        { id: 'south-east', label: 'South East' },
        { id: 'midlands', label: 'Midlands' },
        { id: 'north', label: 'North' }
      ],
      visible: true,
      questionType: 'select'
    }
  ];

  const formModalComponent = SelectorEngine.findOne('#form-modal-component');
  const openButton = SelectorEngine.findOne('#js-open-form-modal-demo');

  let modal;
  let formGenerator;

  const createFormGenerator = () => {
    if (!formModalComponent.contentEl) {
      return null;
    }

    const instance = new FormGenerator(formModalComponent.contentEl, {
      questions: stepsData,
      totalSteps: 2,
      formType: FormTypes.StepForm,
      themeColor: 'color-lta-blue',
      isBackButtonEnabled: true,
      isExitButtonEnabled: true,
      exitButtonLabel: 'Exit',
      exitButtonHandler: () => modal.hide(),
      backButtonHandlerFirstStep: () => {
        modal.hide();
        formGenerator = null;
      },
      submitButton: { title: 'Complete' }
    });

    instance.onSubmit(() => {
      modal.hide();
    });

    return instance;
  };

  EventHandler.on(openButton, 'click', () => {
    if (!modal) {
      modal = new Modal(formModalComponent.modalEl, { backdrop: 'static' });
    }

    if (!formGenerator) {
      formGenerator = createFormGenerator();
    }

    modal.show();
  });
</script>