@sparkdesignsystem/spark-react

v7.0.2

Published

9 months ago

A collection of Spark Design System components in React 16+

Downloads

395

0High
0Medium
0Low

Spark Design System React

Welcome to the Spark Design System React, a product of Rocket Mortgage.

Spark Design System is where we collect our best solutions for how to design and build unified digital experiences for the Rocket brands.

Spark contains the basic patterns and components that make up the visual and interaction design of the Rocket Mortgage family of Fintech products. If your application is expected to look and behave When the Spark Sass and JS setup files are imported into an application you will receive code for all of Spark.

Getting Started

Spark assumes your project is using Sass for styling. If you don't use Sass in your project you should follow the steps below.

Spark React

Install the npm package.
npm install --save-dev @sparkdesignsystem/spark-react
Import the Spark Sass file into the main Sass file (e.g., App.scss).
@import '../node_modules/@sparkdesignsystem/spark-styles/spark.scss';
When you build and run your website, all the Spark CSS will now be bundled into your output. You can verify this by inspecting your site’s DOM and looking for the Spark CSS. There should be a <style> tag in the <head> of your page that includes Spark’s styles. The Spark classes are namespaced so they don't affect any existing CSS.
Now you have Spark react installed and you can import tree-shaked components like Spark Button:
import { SprkButton } from '@sparkdesignsystem/spark-react';
You can find code for all Spark components at react.sparkdesignsystem.com.

Installing Sass

Install the Sass npm package.
npm install --save-dev node-sass
In App.js import your main Sass file that you will create.
import './App.scss'

Contribution Guide

Code Organization

Spark is managed as a monorepo. All of the Spark source code lives in a single repo, but is released as separate packages.

This repo consists of the design system packages, wrapped in an instance of Gatsby. Spark uses Gatsby for our main documentation site and Storybook for our component previews and developer documentation.

In the root there are three directories, react, angular and html. These house the files that are published to npm.

Dev Environment

If you want to run a copy of Gatsby locally:

Navigate to the root directory of the project.
Run npm install.
Run npm start.
Open your browser to http://localhost:8000/.

If you want to run a copy of Gatsby and Storybook locally:

Navigate to the root directory of the project.
Run npm run installall.
Run npm start to start Gatsby then open your browser to http://localhost:8000/.
Run (cd react/ ; npm run storybook) to start Storybook for React.
Run (cd angular/ ; npm run storybook) to start Storybook for Angular.
Run (cd html/ ; npm run storybook) to start Storybook for HTML.

Unit Tests

Spark uses the Jest test framework for unit tests. To run unit tests in Spark:

Navigate to the react directory from the root with cd react.
Run npm install if you have not already.
Run npm test.
See test output in terminal to determine number of passing or failed tests.

Code Style Standards

Spark follows specific coding styles for HTML, CSS and JavaScript to ensure maintainability and scalability.

HTML

Two spaces for indentation.
For better code readability the attributes of elements should each be on their own line when the number of attributes makes that element exceed a line length of 80 characters.

CSS

Two spaces for indentation.
CSS is written in Sass and preprocessed into CSS.
Class Naming Conventions can be found here.
Stylelint is used to lint Sass files and all of Spark Sass coding conventions can be found in the Stylelint configuration file .

JS

Two spaces for indentation.
Spark JS will use new features from ESNext and assumes applications using Spark have a JavaScript compiler setup.
Spark uses ESLint for JS linting.
ESLint is setup to use the Airbnb JavaScript Style Guide and Spark JS coding conventions come from there.
Data attributes on DOM elements is the chosen method for DOM selection.

React and Angular

For additionalClasses properties use the naming convention elementAdditionalClasses for other elements that we offer additional classes support on besides the main element.

Change Workflow

Coming Soon

Credit

Gatsby StorybookJS