npm package: @studyportals/form-generator
Description: General forms for Studyportals B.V. complete styling and functionality.
Author: Studyportals B.V.
Latest version: 0.2.0

# Studyportals form-generator
[![Maintainability](https://api.codeclimate.com/v1/badges/ae456cd09f83e6ebfa1f/maintainability)](https://codeclimate.com/repos/5c18f842b75a8d6ab50096e3/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/ae456cd09f83e6ebfa1f/test_coverage)](https://codeclimate.com/repos/5c18f842b75a8d6ab50096e3/test_coverage)

This package is a component which turns the provided form element snippets into a D² visualized element.

## Getting Started

### Implement form-generator

There are multiple ways of importing the styles. If you require compiled styles, you can use the dist.

#### Importing styles
**Uncompiled (preferred way)**
```scss styleguide
form#StudyportalsForm {
  @import './node_modules/@studyportals/form-generator/src/sass/FormGenerator';
}
```

**Compiled**
```css
@import './node_modules/@studyportals/form-generator/dist/css/FormGenerator.css';
//OR
@import './node_modules/@studyportals/form-generator/dist/css/FormGenerator.min.css';
```

#### Importing javascript
```javascript styleguide
import FormGenerator from '@studyportals/form-generator';

const form = document.getElementById('StudyportalsForm');
const fgForm = new FormGenerator(form);
fgForm.generate();

```
### Inserting HTML snippets
#### Example with mandatory HTML
To successfully implement an minimal version of the input you need the follow HTML snippet. Remember this is the smallest possible version of an input form.

 **Important:** The order of `FgInput`, `FgLabel` & `.FgMessageContainer` are not to be switched.
```html
<form class="FgForm" name="ExampleForm" novalidate autocomplete="off">
  <div class="FgElementWrapper">
    <input
      id="ExampleId"
      name="ExampleName"
      class="FgInput js-Input"
      type="text"
    >

    <label class="FgLabel" for="ExampleId">Example</label>
  </div>
</form>
```

#### Example with mandatory with optional HTML
There are some extensions for the input:
  - Input that needs validation based on input type: `data-need-validation="true"`
  - Input fields that are required: `<span class="FgMessage RequiredMessage">Mandatory</span>`
  - Input fields that need explanation when the user focus on it: `<span class="FgMessage HelperMessage">This message should help people.</span>`
  - Input fields that are required and have validation that explains the user what is wrong: `<span class="FgMessage ErrorMessage">This is not a valid Example.</span>`
```html styleguide
<form class="FgForm" name="ExampleForm" novalidate autocomplete="off">
  <div class="FgElementWrapper">
    <input
      id="ExampleId"
      name="ExampleName"
      class="FgInput js-Input"
      type="text"
      data-need-validation="true"
      required
    >

    <label class="FgLabel" for="ExampleId">Example</label>

    <div class="FgMessageContainer">
      <span class="FgMessage RequiredMessage">Mandatory</span>
      <span class="FgMessage HelperMessage">This message should help people.</span>
      <span class="FgMessage ErrorMessage">This is not a valid Example.</span>
    </div>
  </div>
</form>
```

### Develop on project

``` bash
1. npm run dev
```

The distribution files will be automatically generated while committing changes.

## Distributed files

```
|- dist/
  |- css/
    |- FormGenerator.css
    |- FormGenerator.min.css
|- src/
  |- sass/
    |- FormGenerator.scss
```

## License

The code is available under the [BSD 3-Clause License](LICENSE).