@loophq/design-system

Loop design system

Installation

npm i -S @loophq/design-system focus-visible

Focus-visible is a polyfill for the :focus-visible pseudo-class and needs to be installed as a peer dependency. Vue 2.6 is also a peer dependency, we're assuming you have that installed already. :)

Usage

Set up

In your entry point (src/main.js for a standard vue-cli project), put these two lines at the top:

import 'focus-visible';
import '@loophq/design-system/dist/loop-design-system.css';

focus-visible is used to manage all focus styles. If you don't include this line, the library will fall back to the browser focus styles. The CSS file needs to be included, it contains all of the CSS custom properties and component CSS for the design system. If you'd like to change a variable (there are a few theme variables), we recommend importing this file here as a base and then overwriting it in your own global css file. This should be imported before your App.vue;

Using in components

Components can be imported via named imports:

import { BaseCard } from '@loophq/design-system';

To import all and register globally (not recommended), put this in your main.js:

import LoopComponents from '@loophq/design-system';

Vue.use(LoopComponents);

Project setup

npm i

Spin up development environment

This spins up a local storybook server and runs unit tests in parallel, recompiling and rerunning relevant tests where needed.

npm run dev

Compiles and minifies component library

npm run library:build

Publishes a new version of the library

npm run library:publish -- <version>

Makes sure to push the updates that npm makes when publishing to your release branch before merging into master.

Compiles storybook

npm run build-storybook