Skip to content

nih-sparc/sparc-design-system-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

eaf5dcb · Jul 11, 2023
Apr 6, 2021
Aug 14, 2020
Jul 21, 2020
Jul 8, 2023
Oct 26, 2021
Jul 8, 2023
Jul 27, 2020
Apr 23, 2021
Jul 12, 2021
Jun 23, 2020
Aug 4, 2020
Jul 8, 2023
Nov 19, 2021
Jul 11, 2023

Repository files navigation

SPARC Design system components

Node.js Package Tests Storybook deploy

About

This design system serves a variety of audiences, and will be most useful in the Abstract format (a repository for designer files) to Developers/Engineers, and then to Designers. To make it accessible to the DRC as a whole, and to share the importance of a consistent user experience, we have added explanatory text to the majority of pages; demonstrating utility of individual components.

As development becomes shared across the Cores, we recommend each Core's engineers refer to this design system, when creating new feature/functionality which will be highlighted on Sparc.Science.

Our intention is to create an online resource with the code for these components, and to update this quarterly.

The story book is deployed here: NIH SPARC Storybook

Components

Installation

With Yarn

yarn add @nih-sparc/sparc-design-system-components

With NPM

npm install @nih-sparc/sparc-design-system-components

Quick Start

import Vue from 'vue'

import SparcComponentLibrary from 'sparc-test-design-system-components'

Vue.use(SparcComponentLibrary)

Development

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build-bundle

Tests

Unit tests

Utlizes Vue Test Utils and Jest.

Writing tests

It is recommended to have tests live alongside of your component. For one off tests, the ./tests/unit folder can be uses.

Running tests

Can be manually run with:

yarn test:unit

Automatically run every push with GitHub Actions