@loophq/design-system

Loop design system

Installation (into another repo)

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/vite 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';

app.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>

To add a tag (for beta versions, etc)

npm run library:publish -- <version> <tag>

Make sure to push the updates that npm makes when publishing to your release branch before merging into main. You always want to publish the new version from your release branch, as we cannot push directly to main. See the releasing section for more info.

Compiles storybook

npm run build-storybook

Releasing

0. If this is your first time releasing, ask in the engineering team channel to be added to the loop npm organization. Make sure you log in to npm in your terminal as well.

1. On your machine, check out the branch you'd like to release. This can either be a feature branch or a release branch if you have multiple features to package together as a release. This branch should be PRed into main and be approved by a peer before releasing.

2. Compile the component library

   npm run library:build
   

   (Optional) Commit any file changes the build script made. This is not always necessary but when adding new components this will generally be necessary.

3. Figure out the version number this release will be. We follow SemVer, and the general rule of thumb is that if you're adding new components, bump the minor version, everything else should just bump the patch version. Major versions bumps are rare and should be a team decision.

4. Publish the library to npm. Make sure you are on the branch you intend to release, this will modify your package.json and you MUST be on a non-main branch for this to be mergeable.

   npm run library:publish -- <version> <tag>
   

5. Push all changes the build and release scripts made to Github.

6. In Github, merge the release branch into main.