# Components

# Introduction

Components are located in ./site/src/components and required to be individually imported using ES6 imports.

NAMING CONVENTION

Please add a Fon prefix to component's name

import FonComponentName from '/path/to/ComponentName'

Some components title will show a duplicated badge. This means the original component can not be used in this documentation context. It usually happens when components refer to Vuex or uses third-party libraries.

Duplicated components will be located in ./docs/.vuepress/components and have the Fon prefix included to the file name. Keep in mind their behaviours might slightly differ to the components used in production.

# Accordions duplicated

Lorem ipsum dolor sit amet consectetur adipisicing elit...

<FonAccordion>
  <FonAccordionItem>
    <p slot="title">Item</p>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit...</div>
  </FonAccordionItem>
</FonAccordion>

WARNING

Accordion and AccordionItem are required to work correctly

# AccordionItem props

prop	type	required	default	description
opened	Boolean	false	false	-

# Author

Zinedine Zidane Find Out Now Market Research

Slot content

<FonAuthor
  :author='{
    "name": "Zinedine Zidane",
    "avatar": "https://pbs.twimg.com/profile_images/378800000595529455/73fb09b52ed955712b4c5235525ab643.jpeg"
  }'
  inline
>
  <p>Slot content</p>
</FonAuthor>

The author.name will be used as an alternative text to the image.

prop	type	required	default	description
inline	Boolean	false	false	Determine where to display the name
author	Object	true	-	-
picture	Boolean	false	true	-

# Back button

<FonBackButton/>

prop	type	required	default	description
label	String	false	Back	-

Will execute $router.go(-1) on click.

# Bar duplicated

static text

<FonBar
  label="A"
  :theme="{ color: 'info', border: 'rounded' }"
  :percentage="{ value: 75 }"
/>

<FonBar
  label="B"
  :theme="{ color: 'danger', border: 'rounded' }"
  :percentage="{ value: 45, shownValue: 'static text' }"
/>

prop	type	required	default	description
label	String	false	-	-
theme	Object	true	-	-
└ color	String	true	-	Options: default, secondary, info, warning, danger
└ border	String	true	-	Options: rounded
percentage	Object	true	-	-
└ value	Number	true	-	-
└ shownValue	String	false	-	Will replace actual percentage number with this value if present

# Card

Title

Lorem ipsum

<FonCard squared v-backgroundColor="{ background: '#eee' }">
  <div class="c-card--header" slot="header"></div>
  <div class="c-card--body" slot="body" v-backgroundColor="{ background: '#ffffff' }">
    <article class="c-card--inner">
      <h1 class="h5">Title</h1>
      <p>Lorem ipsum</p>
      <footer>Footer</footer>
    </article>
  </div>
</FonCard>

WARNING

To use v-backgroundColor, include @/directives/backgroundColor.js as a directive in the vue instance.

prop	type	required	default	description
squared	Boolean	false	false	To force square ratio

# Input number duplicated

sample: 0

<FonInputNumber
  :start="1"
  :max="100"
/>

prop	type	required	default	description
placeholder	String \| Number	false	200	-
min	Number	false	0	-
max	Number	false	100	-
step	Number	false	1	-
start	Number	false	0	-
label	String	false		-
isError	Boolean	false	false	-
width	Number	false	160	-
simple	Boolean	false	false	-

# Loader

<FonLoader/>

prop	type	required	default	options
loading	Boolean	false	true	-
size	String	false	null	xs
theme	String	false	null	light

TIP

@todo: More size & theme support

# Message

Lorem ipsum dolor sit amet?

<FonMessage>
  <p>Lorem ipsum dolor sit amet?</p>
</FonMessage>

# Pagination duplicated

<FonPagination
  :count="pageCount"
  :range="pageRange"
  :index="pageIndex"
  @onClicked="onClicked"
/>

prop	type	required	default	description
count	Number	false	1	Number of pages
range	Number	false	3	Range of item displayed
index	Number	false	1	Current page
onClicked	Method	false	false	Callback function

FonPagination is a wrapper component to avoid slots duplication and to share unscoped CSS. It requires vuejs-paginate (opens new window)

TIP

Use Router params to create a proper navigation system

<FonPagination
  :index="pageId"
  @onClicked="onClicked"
/>

<script>
...
export default {
  ...
  computed: {
    pageId() {
      return this.$route.params.page_id
    }
  },
  methods: {
    ...mapActions(['fetchData']),
    onClicked(index) {
      this.$router.push({
        name: 'ROUTE_NAME',
        params: {
          page_id: index
        }
      }, this.fetchData(index))
    }
  }
}
</script>

# Progress bar

<FonProgressBar
  :percentage="50"
  type="secondary"
/>

prop	type	required	default	options
percentage	Number	false	0	-
type	String	false	primary	primary, secondary or danger
liveAnimation	Boolean	false	false	-

# Quote

These numbers support our suspicions! Birilliant!

Mark Nicholls - Heavenly

<FonQuote
  quote="These numbers support our suspicions! Birilliant!"
  author="Mark Nicholls - Heavenly"
  link="https://findoutnow.co.uk"
/>

prop	type	required	description
quote	String	true	-
author	String	false	-
link	String \|\| URL	false	To make to author name clickable

# Select duplicated

<FonSelect
  :options="[{
    id: 0,
    label: 'A',
    value: 'a'
  },
  {
    id: 1,
    label: 'B',
    value: 'b'
  }]"
/>

prop	type	required	default	description
label	String	false	null	Trigger copy
startIndex	Number	false	0	Used for multi select
options	Array	true	-	-

WARNING

The original component uses v-blur directive to auto-close on blur event.

<template>
  <div class="c-select" v-blur="onBlur">...</div>
</template>

<script>
import blur from '@/directives/blur.js'

export default {
  directives: {
    blur
  },
  ....
  methods: {
    onBlur() {
      // blur event callback
    }
  }
}
</script>

# Selector duplicated

Active: car-owners

<FonSelector
  :datas="[
    {
      id: 'a',
      label: 'A',
      icon: 'a',
      max: 123
    },
    ...
  ]"
/>

prop	type	required	default	description
datas	Array	true	-	-
max	Number	false	-	-
icons	Boolean	false	-	-
active	String \|\| Number	false	null	-

@todo

Multiple selection & Image support

<FonSocialSharers
  :networks="['twitter', 'linkedin', 'facebook']"
  inline
/>

prop	type	required	default	description
networks	Array	false	-	twitter and facebook
inline	Boolean	false	false	-

WARNING

Make sure to update meta tags

# Stack

25%

<FonStack
  :items="['A', 'B', 'C']"
  :percentage="25"
/>

prop	type	required	default	description
items	Array	true	-	Array of Stack items
percentage	Number	false	0	-

# Step tracker

<FonStepTracker
  :steps="[
    {
      name: 'A',
      route: '/',
      clickable: true
    },
    ...
  ]"
/>

prop	type	required	default	description
steps	Object \|\| Array	true	-	-

# Tabs duplicated

One Two Three

<FonTabs
  :tabs="[
    {
      route: 'one',
      label: 'One'
    },
    ...
  ]"
/>

prop	type	required	default	description
tabs	Array	true	-	-
animated	boolean	false	false	-
disabled	boolean	false	false	-

WARNING

The original Tabs component watches the route to handle active state

# Title

My title example

<FonTitle
  title="My title example"
/>

prop	type	required	default	description
title	String	true	-	-

# Toaster

<FonToaster
  state="warning"
  type="pill"
  :delay="0"
>
  <span class="h-bold">Slot</span> content
</FonToaster>

prop	type	required	default	options	description
type	String	false	alert	alert, pill	-
state	String	false	info	info, success, warning, danger	-
position	String	false	top	top, bottom	-
direction	String	false	up	up, down	-
delay	Number	false	500	-	-
inView	Boolean	false	false	-	If true animation will start when Toaster is visible
animated	Boolean	false	true	-	-

# Toggle duplicated

My toggle

is checked: true

<FonToggle
  id="toggleID"
  label="My toggle"
  :checked="isChecked"
  @onToggled="toggleHandler"
/>

prop	type	required	default	description
id	String	true	-	-
label	String	false	-	-
checked	Boolean	false	false	-

A method toggle() is attached to the click event and emits onToggled, passing the component id

<script>
export default {
  ...
  props: {
    ...
    id: {
      type: String,
      required: true
    }
  },
  methods: {
    toggle() {
      this.$emit('onToggled', this.id)
    }
  }
}
</script>

← Styleguide Blog →

# Components

# Introduction

# Accordions duplicated

# AccordionItem props

# Author

# Back button

# Bar duplicated

# Card

Title

# Input number duplicated

# Loader

# Message

# Pagination duplicated

# Progress bar

# Quote

# Select duplicated

# Selector duplicated

# Social sharers

# Stack

# Step tracker

# Tabs duplicated

# Title

My title example

# Toaster

# Toggle duplicated