@vendasta/store/order-form/order-form-section/README.md

Components and data for Store

# va-order-form-section

The Order Form Section is a collection of `va-dropdown-form-section`s encapsulated within a single container with a `va-header-container`.
It also has a single primary section that is always displayed first and can potentially be styled differently.
This component was originally created for the purpose of activating a product with one or more addons that all needed order forms filled out.
The primary section would have the product's order form while the subsections would have the forms for the addon(s).

If the primary section is not set, it is simply not rendered and the subsections move up to occupy its space.
Similarly, if the subsections are not set, they are also not rendered.

This component takes in the following inputs:
- `data` is an OrderFormSectionData instance, which contains all of the data necessary to properly render the component.

OrderFormSectionData has the following fields on it:
- `parentForm` is the FormGroup for the form hosting this component. Additional FormGroups will be added to it for each section.
- `titleText` is a string representing the text that should be displayed as the title.
- `subtitleText` is a string representing the text that should be displayed as the subtitle.
- `descriptionText` is a string representing the text that should be displayed as the description.
- `iconUrl` is a strong representing the url of the icon to display in the header.
- `primarySection` is a DropDownFormSectionData instance representing the data needed for the primary section.
- `subsections` is a collection of DropDownFormSectionData representing the data needed for each of the subsections.

DropDownFormSectionData has the following fields on it:
- `startOpen` is a boolean representing whether this section should be rendered as expanded when first loaded.
- `parentForm` is a `FormGroup` that represents the overall form the section will be attached to. The va-dropdown-form-section will create its own FormGroup elements and attach them to the parentForm.
- `displayAutoTitle` is a boolean representing whether to use the default title, which is based on the validation state.
- `titleText` is a string representing the section's name and is displayed in the header.
- `displayAutoDescription` is a boolean representing whether to use the default description, which is a comma-separated list of the field values.
- `descriptionText` is a string representing the section's description and is displayed in the header next to the title.
- `fields` is a collection of `BaseField`s, which are the field controls that will be in the section.
- `editingHint` is a string that is displayed above all of the fields in the section.
- `prepopulatedData` is an object that should contain the id of a field for it's key, and then a value for that field's value be to set as. (ex: {ID1: 'John Smith'})

## Example
Create the data the component will use:
```typescript
this.textBoxField = new TextboxField({id: 'ID1', label: 'this is a textbox', required: true,
  description: 'This is a description', textboxType: 'text'});
this.textAreaField = new TextareaField({id: 'ID2', label: 'this is a textarea', required: false,
  description: 'This is a description'});
this.checkBoxField = new CheckboxField({id: 'ID3', label: 'this is a checkbox', required: false,
  description: 'This is a description'});
this.dropdownField = new DropdownField({id: 'ID4', label: 'this is a dropdown', required: true,
  description: 'This is a description', options: [{value: '1', label: 'Option 1'}, {value: '2', label: 'Option 2'}]});

this.sectionData.titleText = 'Order Form Section Example';
this.sectionData.subtitleText = 'Subtitle or Tagline';
this.sectionData.descriptionText = 'A description of the order form section example';
this.sectionData.iconUrl = 'https://www.irononsticker.com/images/Pepsi.jpg';
this.sectionData.parentForm = this.form;
this.sectionData.primarySection = {
  prepopulatedData: null,
  startOpen: false,
  parentForm: null,
  displayAutoTitle: false,
  titleText: 'Primary Section Title',
  displayAutoDescription: false,
  descriptionText: 'A description of the primary section',
  fields: [this.textBoxField, this.textAreaField, this.checkBoxField, this.dropdownField],
  editingHint: ''};

const nameField = new TextboxField({textboxType: 'text', id: 'name', label: 'Name',
                                 required: true, description: 'This is a description'});
const numberField = new TextboxField({textboxType: 'text', id: 'number', label: 'Number',
                                 required: true, description: 'This is a description'});
const emailField = new TextboxField({textboxType: 'text', id: 'email', label: 'Email',
                                     description: 'This is a description'});
const section1Fields = [nameField, numberField, emailField];

const section1Data: DropDownFormSectionData = {
  prepopulatedData: null,
  startOpen: false,
  parentForm: null,
  displayAutoTitle: false,
  titleText: 'Subsection One Title',
  displayAutoDescription: false,
  descriptionText: 'Subsection One Description',
  fields: section1Fields,
  editingHint: ''
};

const middleName = new TextboxField({textboxType: 'text', id: 'middle_name', label: 'What is your middle name?',
                                  required: true, description: 'This is a description'});
const shoeSize = new TextboxField({textboxType: 'text', id: 'shoe_size', label: 'What is your shoe size?',
                                  required: true, description: 'This is a description'});
const lotsOfCats = new CheckboxField({id: 'too_many_cats', label: 'Do you have more than 4 cats?',
                                    required: true, description: 'This is a description'});
const section2Fields = [middleName, shoeSize, lotsOfCats];

const section2Data: DropDownFormSectionData = {
  prepopulatedData: null,
  startOpen: false,
  parentForm: null,
  displayAutoTitle: false,
  titleText: 'Subsection Two Title',
  displayAutoDescription: false,
  descriptionText: 'Subsection Two Description',
  fields: section2Fields,
  editingHint: '',
};

this.sectionData.subsections = [section1Data, section2Data];
```

And then you can use it in your html as follows:
```html
<form (ngSubmit)="submitForm()" [formGroup]="form">
  <va-order-form-section [data]="sectionData">
  </va-order-form-section>
  <button type="submit">Submit</button>
</form>
<div [innerHTML]="readMe"></div>
```