@justeat/f-form v0.7.0

f-form

Generic form component for creating basic forms. Can be used to collect data from text inputs.

Usage

The form component is only available for creating basic forms. It can be used to collect data from text inputs.

Fields can have two types of error checks:

• required if the field is required to submit the form
• invalid if the field needs to be checked against field type. Existing available validation checks can be added for:

To add validation messages, validationMessages should be provided via translations for the individual form field. (to see how click here)

Installation

Install the module using npm or Yarn:

yarn add @justeat/f-form

npm install @justeat/f-form

The package also has dependencies that need to be installed by consuming components/applications:

Vue Applications

You can import it in your Vue SFC like this (please note that styles have to be imported separately):

import VForm from '@justeat/f-form';
import '@justeat/f-form/dist/f-form.css';

export default {
    components: {
        VForm
    }
}

If you are using Webpack, you can import the component dynamically to separate the v-form bundle from the main bundle.client.js:

import '@justeat/f-form/dist/f-form.css';

export default {
    components: {
        // …
        VForm: () => import(/* webpackChunkName: "v-form" */ '@justeat/f-form')
    }
}

Configuration

Props

To add fields to the form, and text to the form button, a formData Object prop should be passed in. The formData Object should contain:

• formFields - Array of objects. Object should include:
  • name - The field name that data should be stored under
  • value - The value of the field. When not set, this defaults to ''.
  • translations - an object containing:
    • label - the field's displayed text label
    • validationMessages - an object that can contain two types of validation messages:
      • required - the validation message that will be displayed if a field is required
      • invalid - the validation message that will be displayed if a field needs to match standard character requirements.

        Currently available invalid field checks mobileNumber, email, postcode

• buttonText - The text displayed on the form's action button

Example formData

formData: {
    formFields: [
        {
            name: 'firstName',
            value: '',
            translations: {
                label: 'First Name',
                validationMessages: {
                    required: 'Enter First Name'
                }
            }
        },
        {
            name: 'lastName',
            value: '',
            translations: {
                label: 'Last Name'
            }
        },
        mobileNumber: {
            name: 'mobileNumber',
            value: '',
            translations: {
                label: 'Mobile Number',
                validationMessages: {
                    required: 'Enter Mobile Number',
                    invalid: 'Enter valid Mobile Number'
                }
            }
        },
        ...
    ],
    buttonText: 'Continue'
}

Events

The events that can be subscribed to are as follows (if any):

Development

Start by cloning the repository and installing the required dependencies:

$ git clone git@github.com:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn

Change directory to the f-form package:

$ cd packages/components/organisms/f-form

Testing

To test all components, run from root directory. To test only f-form, run from the ./fozzie-components/packages/components/organisms/f-form directory.

Unit and Integration tests

yarn test

Component and Accessibility Tests

# Note: Ensure Storybook is running when running the following commands
cd ./fozzie-components

yarn storybook:build
yarn storybook:serve-static

yarn test-component:chrome

### Accessibility tests
```bash
yarn test-a11y:chrome

Documentation to be completed once module is in stable state.