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

Components and data for Store

# va-dropdown-form-section

The following examples exercise the various inputs:
- `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 fields your section will have: 
```javascript
const fields = [
  new TextboxField({id: 'ID1', label: 'Label 1', required: true, description: 'Description 1', textboxType: 'text'}),
  new TextboxField({id: 'ID2', label: 'Label 2', required: true, description: 'Description 2', textboxType: 'text'}),
  new TextboxField({id: 'ID3', label: 'Label 3', required: true, description: 'Description 3', textboxType: 'text'})
];

const form = new FormGroup({});
```

Now you can use it to populate the control:
```html
      <va-dropdown-form-section [parentForm]="form" [editingHint]="'This hint will help you'"
                                titleText="Some Name" [fields]="fields"
                                [displayAutoDescription]=true>
      </va-dropdown-form-section>
```