Coder Social home page Coder Social logo

sparkdesignsystem / spark-design-system Goto Github PK

View Code? Open in Web Editor NEW
106.0 11.0 74.0 67.82 MB

Spark Design System

Home Page: https://sparkdesignsystem.com

License: MIT License

JavaScript 52.15% HTML 0.09% TypeScript 38.24% SCSS 7.51% Swift 2.01%
spark design-system design-patterns hacktoberfest

spark-design-system's Introduction

Build Status

Spark Design System

Welcome to the Spark Design System, 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 like a Rocket Mortgage application, this package is the starting point. 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 and also that your project has a JavaScript build step that will transpile ES6+ and polyfill appropriately for browser support.

Spark

  • Install the npm package.

    npm install --save-dev @sparkdesignsystem/spark

  • Import the Sass setup file in your Sass build.

    @import "node_modules/@sparkdesignsystem/spark-styles/spark.scss";

    This will bring all Spark Sass patterns into your build. The Spark classes are namespaced so they don't affect any existing CSS.

  • Import the JS setup file in your JS build.

    import spark from "node_modules/@sparkdesignsystem/spark/spark";

    This will bring all Spark JS into your build.

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:

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

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

  1. Navigate to the root directory of the project.
  2. Run npm run installall.
  3. Run npm start to start Gatsby then open your browser to http://localhost:8000/.
  4. Run (cd react/ ; npm run storybook) to start Storybook for React.
  5. Run (cd angular/ ; npm run storybook) to start Storybook for Angular.
  6. 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:

  1. Navigate to the framework directory of your choice from the root cd react, cd angular, or cd html.
  2. Run npm install if you have not already.
  3. Run npm test.
  4. 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

spark-design-system's People

Contributors

afebbraro avatar ahmed2m avatar arshadkazmi42 avatar basters avatar briankabiro avatar diriquelme avatar drishit96 avatar eenewbsauce avatar felipedotcom avatar giniapollock avatar guern1kn avatar iamjoross avatar janinavelasco9 avatar jmrieger avatar kalovelo avatar katehyland avatar kkwiedacz avatar lalocode avatar mantasio avatar motionsuggests avatar oandersonql avatar rachelsuter avatar rcopeland avatar rvmendoza avatar saideepesh000 avatar sravan7 avatar ssabo1 avatar vivek32ta avatar vjwilson avatar yodasw16 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

spark-design-system's Issues

Modals: Code / A11y / Design / Documentation Review

  1. If modal content is tall on landscape mobile view then allow scroll bar
  2. Expose click event for modals, a basic thing that they can use if they want. They have to add the data-attribute we suppy.
  3. For no click event, they import our JS and use the exported functions we created
  4. Add modal HTML in the DOM above the closing body tag
  5. Three types of modals; Choice, Wait, and Info (no buttons, and a little close X?)
  6. One file for modal functions utilities, and then one that is for binding UI which imports the modal utilities
  7. Have data-attribute for modal cancel button. Close modal if clicked otherwise they don’t use our data attribute

see one note, also:
https://github.com/sparkdesignsystem/spark-design-system/wiki/Pattern-Testing

Define success metrics and how to track them

problems we're trying to solve with the design system:

  1. Client-facing apps don't look like they belong to the same company / ecosystem.
  2. Tons of UI code duplication across apps.
  3. Wildly varying patterns across applications causes a lot of duplicate work, by Designers and UI Engineers.

possible KPIs:

  1. application adoption (how many apps are directly using Spark)
  2. system completeness (how many patterns are implemented and ready for use)
  3. ease of use (how long does it take an engineer level UI person to set their app up with spark-core)
  4. documentation completeness (how many patterns have complete docs)
  5. drizzle / spark guide pageviews ? (im not sure if > pageviews means its successful)

possible ways to measure them:

  1. survey, manual research
  2. automated pattern count (possibly vs a target?)
  3. surveys to UI Engineers
  4. automated pattern count vs automated documentation section count
  5. google analytics

Thoughts?

Design review

We need to do a design review of everything in the system to make sure that what we built is what design expected.

https

Set up https for sparkdesignsystem.com

Create contribution workflow

This should be focused on how designers and developers who are external to the Spark team contribute to Spark.

Add search input

There is a search input in the Masthead component that needs to be added to Inputs. It should have no label, but "Search" as a placeholder and the appropriate aria role to replace the label and role="search"

a11y review

Review all code for accessibility and add ARIA where needed.

Document font usage

Add documentation to the typography section for fonts and font stacks.

Notably, if Typekit able to be used, we use Quatro Slab for headings and Myriad Pro for body copy. If Google Fonts is used, we use Open Sans for all text.

Documentation review

We need to review each page and make sure we have documented everything correctly and fully.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.