GithubHelp home page GithubHelp logo

themasix / ui-kit Goto Github PK

View Code? Open in Web Editor NEW

This project forked from d2iq/ui-kit

0.0 0.0 0.0 21.96 MB

D2iQ UI Kit

Home Page: https://dcos-labs.github.io/ui-kit/

License: Apache License 2.0

Shell 0.02% JavaScript 2.73% TypeScript 97.20% Dockerfile 0.05%

ui-kit's Introduction

UI Kit Space Banner

D2iQ UI Kit

UI Kit is a collaboration between D2iQ's product design team and engineering team. UI Kit provides tools for engineers to build applications that follow the standards and guidelines of the D2DS Design System.

Getting started

Install dependencies (Node v16+, NPM 7+)

npm i

Start the Storybook server locally then visit http://localhost:6006/

npm start

Linting

ESLint is used for linting within the project. We suggest installing the ESLint extension in your preferred code editor.

For more detailed information, see CONTRIBUTING.md.

New Components

To generate a new component run the command:

npm run create:component <ComponentName>

Unit Testing

npm test

Use test:watch if you want the tests to run automatically when a file changes:

npm run test:watch

Pass parameters to the test engine (in this case jest) to run a single spec, for example, badge:

npm run test -- --watch badge

Writing Unit Tests

Important guidelines to follow for testing:

  • Single Expectation test. Every unit test should verify one behavior.
  • Keep your descriptions concise (bellow 40 chars ideally). One easy way to achieve this one is avoiding using "should".
  • Create the data you need. If you have a more complicated scenario, generate the data that is relevant to that particular case.

For more on this topic, and examples we recommend Better Specs.

import React from "react";
import Badge from '../badge';
import renderer from 'react-test-renderer';

describe('Badge', () => {
  it("match default badge component", () => {
    expect(renderer
    .create(<Badge>default</Badge>)
    .toJSON()).toMatchSnapshot()
  });
});

Testing with Cypress

To make it easier to select DOM nodes of our components in integration tests, DOM nodes have a data-cy attribute.

Naming Conventions for data-cy Values

Parent nodes: The value of data-cy for component's parent node is the same as the component name, and should be camelCased. For example: The parent node for <PrimaryButton> will have data-cy="primaryButton".

Child nodes: If a child node has a data-cy added, there will be a dash between the parent node's name and a string to describe the child node. For example: The footer element of a <DialogModal> will have data-cy="fullscreenModal-footer"

States and variants: If a node has a special "state", data-cy will prepend a string describing that state after a dot. For example:

  • <TextInput disabled> will have data-cy="textInput textInput.disabled"
  • A <TextInput> with an error will have data-cy="textInput textInput.error"

For more information on writing selectors, see the Cypress guide.

Commits

We follow Conventional Commit formatting rules, as they provide a framework to write explicit messages that are easy to comprehend when looking through the project history and enable automatic change log generation.

These Guidelines got written based on AngularJS Git Commit Message Conventions.

<type>[optional scope]: <description>

[optional body]

[optional footer]

Release / Publishing

After your PR is merged into main, semantic-release will automatically cut a release if one of your commits is of type feat, fix, or perf.

Pre-release Testing in a Host Project

Build:

npm run dist

To copy UI Kit into an existing project, run the following:

cp -r dist/ ./<project>/node_modules/@dcos/ui-kit/

Replace <project> with the associated host project name and folder structure.

After running the copy command above, restart the host application.

ui-kit's People

Contributors

brandonc avatar bstavroulakis avatar clintonmedbery avatar danielmschmidt avatar dependabot[bot] avatar fabs avatar georgistodorov avatar juliangieseke avatar leemunroe avatar lilysamimi avatar mesosphere-web avatar mperrotti avatar mstruebing avatar nataliepina avatar natmegs avatar nlight avatar pierrebeitz avatar seialkali avatar tattdcodemonkey avatar tnguyen0 avatar vacas5 avatar weblancaster avatar

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.