@arcca/arcca-ds

Arcca Design System

This package implements Arcca's Design System. We implement several UI components on top ofVuetify, with custom styling and additional features.

Using the arcca-ds package as a dependency in a Nuxt project

In order for the components to function properly, Vue and Vuetify must be installed as dependencies in the target project. Make sure that your Nuxt version is at least 2.13.

1. Install the package via npm install -D @arcca/arcca-ds@latest for the production build or npm install @arcca/arcca-ds@next for the development build
2. Add the following modifications to the nuxt.config.js file:

buildModules: [
  ...,
  "@arcca/arcca-ds/nuxt"
]

This will load the Design System components via the @nuxt/components module, which registers them globally with automatic tree-shaking.

Run the styleguide

To run the styleguide locally and access the components' documentation, make sure that you have a local copy of the repository in your machine:

git clone https://gitlab.com/grupo-arcca/arcca-ds.git
cd arcca-ds

Then run

npm install
npm run styleguide

and open http://localhost:6060 in your browser. You will need special permissions to clone a private repository.

Contributing to our Design System

Before you start diving deep into making our components prettier and more user-friendly, be sure to read our conventions and guidelines:

• Documenting Components
• Writing SASS
• Writing tests
• Writing commit messages
• Publishing
• Simultaneous development with other front-end applications

You should also take a look at the Vuetify documentation and vue-styleguidist documentation.