Frontend Webapp Component Library

Requirements

• node
• yarn

Installation

yarn install

Testing

Tests can be launched by running the following command.

yarn test

Components

btn-next

Component used for showing the next button. It has 3 states - active, disabled and loading. Transclude is enabled.

• Loading: when the loading binding is true;
• Disabled: when the errors binding is true;
• Active: when both loading and errors bindings are false;

Bindings

| Variable | Data type | Description | | -------- | --------- | ----------- | | errors | object | An object of errors | | loading | boolean | Signifies that the button is loading |

Examples

<btn-next errors="$ctrl.hasErrors" loading="$ctrl.isLoading"></btn-next>

<btn-next ng-click="$ctrl.next()">
    <span translate="flow.proceed">Proceed</span>
</btn-next>

error

Form error lists and error elements.

Error list

Error list component is the container of multiple error components. It must not be used stand-alone.

Bindings

| Variable | Data type | Description | | -------- | --------- | ----------- | | form | object | The scope form variable | | errors | object | An object of errors |

Error

Error item component is shown only if the field has the rule error. This is why you should always define both - frontend and backend - errors here. If a backend error occurs, the customer is thrown to the screen with the field under validation and the appropriate error message should be shown.

Bindings

| Variable | Data type | Description | | -------- | --------- | ----------- | | field | string | Name of the field under validation | | rule | string | Name of the validation rule |

Examples

<error-list form="form" errors="$ctrl.mainCtrl.errors">
  <error field="email" rule="email">
    <span translate="errors.email">Email field is invalid.</span>
  </error>
</error-list>

footer

<footer> element and component.

Transclusions

| Transclusion | Required | Description | | ------------ | -------- | ----------- | | default | No | Footer content | | fixed-bottom | No | A position:fixed element visible at the bottom of the page |

Examples

<footer>
  Hello World
  <fixed-bottom>Powered by White Label Brand</fixed-bottom>
</footer>

header

Page header element containing sidenav toggle button and insurer branding logo.

Bindings

| Variable | Data type | Description | | -------- | --------- | ----------- | | on-toggle | function | Triggered after clicking the "toggle" button |

Transclusions

| Transclusion | Required | Description | | ------------ | -------- | ----------- | | branding | No | Insurer branding - usually logo or name |

Examples

<header on-toggle="$ctrl.toggleAside()">
  <branding>
    <img ng-src="{{ $ctrl.insurer.logo }}" alt="{{ $ctrl.insurer.name }}">
  </branding>
</header>

input-date

Date input field. Extremely useful for DOB selection.

Bindings

| Variable | Data type | Description | | -------- | --------- | ----------- | | ng-name | string | Name of the form element | | ng-model | mixed | Model variable | | ng-required | boolean | Is the field required? | | max | object | Date object of the max available date | | min | object | Date object of the min available date | | form | object | form object |

Transclusions

| Transclusion | Required | Description | | ------------ | -------- | ----------- | | input-date-addon | No | .input-group-addon |

Examples

<input-date
  ng-name="dob"
  ng-model="$ctrl.input.dob"
  max="$ctrl.maxDate"
  min="$ctrl.minDate"
  form="form"
  ng-required="true">
  <input-date-addon><i class="fa fa-birthday-cake" aria-hidden="true"></i></input-date-addon>
</input-date>

loader

Show a loading indicator whilst the content or some API requests have not finished loading.

Bindings

| Variable | Data type | Description | | -------- | --------- | ----------- | | loaded | boolean | Has the loading finished? |

Transclusions

| Transclusion | Required | Description | | ------------ | -------- | ----------- | | default | Yes | Content that is shown after loading has finished |

Examples

<loader loaded="$ctrl.productLoader.$resolved">
  Content to show after loading is finished.
</loader>

panel-checkbox

Checkbox selection panel.

Bindings

| Variable | Data type | Description | | -------- | --------- | ----------- | | ng-model | mixed | Model variable | | ng-value | string | Value set to ng-model after this checkbox is selected | | ng-required | boolean | Is this checkbox field required? | | ng-change | function | Called after the checkbox is selected | | name | string | Name of the checkbox input element |

Transclusions

| Transclusion | Required | Description | | ------------ | -------- | ----------- | | panel-label | No | Label of the panel | | panel-right | No | Label floating to the left in a panel |

Examples

<panel-checkbox
  ng-model="$ctrl.input.terms"
  ng-value="yes"
  name="terms"
  ng-required="true"></panel-checkbox>

<panel-checkbox ng-model="$ctrl.input.terms" ng-value="yes" name="terms">
  <panel-label>Terms & conditions</panel-label>
  <panel-right><i class="fa fa-terms"></i></panel-right>
</panel-checkbox>

panel-radio

Radio button panel.

Bindings

| Variable | Data type | Description | | -------- | --------- | ----------- | | ng-model | mixed | Model variable | | ng-value | string | Value set to ng-model after this radio is selected | | ng-required | boolean | Is this radio field required? | | ng-change | function | Called after the radio is selected | | name | string | Name of the radio input element |

Transclusions

| Transclusion | Required | Description | | ------------ | -------- | ----------- | | panel-label | No | Label of the panel | | panel-right | No | Label floating to the left in a panel |

Examples

<panel-radio
  ng-model="$ctrl.input.gender"
  ng-value="male"
  name="gender"
  ng-required="true"></panel-radio>

<panel-radio ng-model="$ctrl.input.gender" ng-value="male" name="gender">
 <panel-label>Male</panel-label>
</panel-radio>

<panel-radio ng-model="$ctrl.input.gender" ng-value="male" name="gender">
  <panel-right><i class="fa fa-male"></i></panel-right>
</panel-radio>

<panel-radio ng-model="$ctrl.input.duration" ng-value="P1Y" name="duration">
  <panel-label>1 Year</panel-label>
  <panel-right>12 EUR</panel-right>
</panel-radio>

price

Price component.

Bindings

| Variable | Data type | Description | | -------- | --------- | ----------- | | value | integer | Price value in cents | | loading | boolean | Signifies that the price is loading |

Transclusions

| Transclusion | Required | Description | | ------------ | -------- | ----------- | | price-body | No | Body element of the price; can be used instead of value binding | | price-footer | No | Footer under the price. Usually text such as including tax. |

Examples

<price
  value="$ctrl.getQuote().gross_premium"
  loading="$ctrl.productLoader.$resolved === false">
</price>

<price value="$ctrl.getQuote().gross_premium" loading="$ctrl.productLoader.$resolved === false">
  <price-footer>Including Tax</price-footer>
</price>

<price>
  <price-body>10 EUR</price-body>
  <price-footer>Including Tax</price-footer>
</price>