Forty-two-vue NPM

42 Vue Library

A component library for Vue.js applications built according to Company42's design specifications. The aim of this package is to provide out-of-the-box components for a Vue.js web application.

Installation

Using npm:

$ npm install forty-two-vue --save

Include the following code in your main.js file or entry file to your Vue application:

// Import the entire library
import FortyTwo from 'forty-two-vue';

// Import the stylesheet
import 'forty-two-vue/dist/lib/forty-two-vue.min.css';

// Vue.use will automatically register
// the components globally, so that they
// can be used anywhere in your templates
Vue.use(FortyTwo);

Basic Example

All components are prefixed with 'ft-'. For example <ft-input></ft-input> will render a custom input component in your .vue file.

Many of the components come with dynamic properties allowing you to create flexible application flows. Below is an example of how you could use the custom input and button components in a subscription form.

// SomeForm.vue
<template>
  <form>
    <ft-input
      :type="'email'"
      :label="'Email'"
      :placeholder="'Your email address'"
      :success-message="'Valid email'"
      :warning-message="'The email is already registered in our system...'"
      :error-message="'Invalid email, please try again'"
      :state="inputState"
      v-model="email" >
    </ft-input>
    
    <ft-button :on-click="subscribe">
      Subscribe
    </ft-button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      inputState: '',
    };
  },
  watch: {
    email: (val) => {
      // Watch for email changes and change 'inputState'
      // to toggle between the different input messages,
      // e.g. warning-message is visible when :state="'warning"
    },
  }
  methods: {
    subscribe() {
      // Handle email subscription...
    },
  },
};
</script>

Components

Button

<ft-button>

Comes with the following the custom properties:

Props	Default	Options	Description
:disabled	false	`true` `false`	If true it prevents the 'on-click' function from executing and adds the 'disabled' class to the button.
:on-click	none	n/a	A function to be executed when clicking on the button.

Optional classes that you can add to the <ft-button> tag:

Classes	Description
.large	For a large button.
.xlarge	For an extra large button.
.xxlarge	For an extra extra large button.
.grey	For a grey button.
.green	For a green button.
.orange	For an orange button.
.red	For a red button.
.purple	For a purple button.
.disabled	For a disabled button. This style can be added, but it is recommended to use the `:disabled` prop instead to also prevent the `:on-click` function from executing.

Card

<ft-card>

A card component for content. Use together with the <ft-card-section> tag to group content within a single card.

<ft-card>
  <ft-card-section>
    // Some content goes here.
  </ft-card-section>
  
  <ft-card-section>
    // Some more content goes here.
  </ft-card-section>
</ft-card>

Container

<ft-container>

Used for grouping content and aligning content horizontally or vertically. Also comes with gutter classes for easy flex gutters as well as standardised padding classes.

Classes	Description
.padding-xsmall	Sets extra small padding inside the container.
.padding-small	Sets small padding inside the container.
.padding	Sets standard padding inside the container.
.padding-large	Sets large padding inside the container.
.padding-xlarge	Sets extra large padding inside the container.
.padding-xxlarge	Sets extra extra large padding inside the container.
.row	Sets display to flex and flex-direction to row.
.column	Sets display to flex and flex-direction to column.
.gutter-xsmall	Adds an extra small gutter between each item.
.gutter-small	Adds a small gutter between each item.
.gutter	Adds a standard gutter between each item.
.gutter-large	Adds a large gutter between each item.

Input

<ft-input>

Comes with the following the custom properties:

Props	Default	Options	Description
:label	none	n/a	Adds a label to the input.
:state	none	`'success'` `'warning'` `'error'`	Adds certain styling and shows corresponding message depending on the given state.
:value	none	n/a	Set the value of the input. Works with `v-model`.
:placeholder	none	n/a	Sets the input placeholder.
:type	none	`'text'` `'email'` `'password'`	Sets the type of input.
:success-message	none	n/a	Sets the success message to be shown when the state equals 'success'.
:warning-message	none	n/a	Sets the warning message to be shown when the state equals 'warning'.
:error-message	none	n/a	Sets the error message to be shown when the state equals 'error'.
:full-width	false	`true` `false`	Set the width of the input to fill its container.

Link

<ft-link>

An alternative to an <a> tag that comes with easy to use props and styling.

Props	Default	Options	Description
:link-to	none	n/a	The link that you wish to send the user to.
:new-tab	true	`true` `false`	Opens the link in the current window if set to false.

Message

<ft-message>

Wraps content in a blue box with styling options to create success, warning and error messages.

Optional classes that you can add to the <ft-message> tag:

Classes	Description
.success	For a green success message.
.warning	For an orange warning message.
.error	For a red error message.
.muted	For a muted grey message.

Spacer

<ft-spacer>

A utility component used to create space between other components. Must have either .row or .column class. .row is used to create vertical space between items and .column is used to create horizontal space between items.

If no size class is given, the spacer will take up the standard space. However, you can modify the spacer with one of the following size classes:

Classes	Description
.xxsmall	For an extra extra small spacer.
.xsmall	For an extra small spacer.
.small	For a small spacer.
.large	For a large spacer.
.xlarge	For an extra large spacer.
.xxlarge	For an extra extra large spacer.
.xxxlarge	For an extra extra extra large spacer.