Pronto UI

Pronto UI is a component library written in Vue.js. See ui.tupronto.com for documentation.

Usage

To use Pronto UI, install pronto-ui dependency:

npm i pronto-ui

Import the components as desired:

import { Button, Icon } from 'pronto-ui'

In your main.ts import the styles:

import 'pronto-ui/src/styles/index.scss'

In your public/index.html include the Source Sans Pro, Omnes and Pronto icons fonts:

<link rel="stylesheet" href="https://use.typekit.net/bqy2uid.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap"
  rel="stylesheet"
/>
<link rel="stylesheet" href="https://cdn.tupronto.com/icons/icons.css" />

Quick start - Develop

# Build and launch storybook to see the components in the browser
npm run storybook

Icon-font generator

We use fantasticon to create our font.

Usage

Make sure you install fantasticon globally:

npm install -g fantasticon

Add the new svg icons to the icons/source and build the fonts:

fantasticon

Versioning

We use SemVer for versioning. For the versions available, see the npm package.

We use two tools to automate versioning and publishing.

• git-cz: Enforces valid commit messages
• semantic-release: Automatically determines the next semantic version based on the last commit, updates the package.json version, creates a new tag and publish to npm

Create a new commit

git add .
npm run commit

Which type of commits that trigger a release

By default semantic-release triggers releases based on the following rules:

| Commit | Release type | | --------------------------- | -------------------------- | | Commit with breaking change | ~~Major~~ Breaking release | | Commit with type feat | ~~Minor~~ Feature release | | Commit with type fix | Patch release | | Commit with type perf | Patch release |