Portail Design System

Vue components library for Portail project.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Adding new components

1. Create a new MyComponent.vue file in src/components using this template:

<!--
  Component description

  Usage:

    <MyComponent
      :prop1="..."  - Short description of prop1
      :prop2="..."  - Short description of prop2
      @event="..."  - Short description of event
    >
      Hello, World!
    </MyComponent>

  Properties:

    ...

  Events:

    ...
-->

<template>
  <div class="my-component">
    ...
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    ...
  },
  data: () => ({
    ...
  }),
}
</script>

<style lang="less">
.my-component {
  ...
}
</style>

2. Create a new MyComponentDemo.vue file in src/demos/components with this template:

<template>
  <div class="row-col">
    <h3>MyComponent</h3>

    Description

    <pre v-highlightjs="usage"><code class="html"></code></pre>

    <MyComponent>Hello, World!</MyComponent>
  </div>
</template>

<script>
import MyComponent from '../../components/MyComponent.vue'

let usage = `
<MyComponent>Hello, World!</MyComponent>
`.slice(1)

export default {
  name: 'MyComponentDemo',
  components: {MyComponent},
  data: () => ({usage}),
}
</script>

3. Push your changes and Open a PR