React component library for sumup web apps
Clone or download
felixjung Add de-LU number format (#312)
* Add de-LU number format

* Add de-LU to spec
Latest commit 62fe2a9 Nov 13, 2018
Permalink
Failed to load latest commit information.
.github Add more content to README Aug 24, 2018
.storybook Docz (#287) Aug 28, 2018
build Rename theme to 'circuit' (#165) Jul 25, 2018
docs Use Aktiv Grotesk in the Docs (#301) (#303) Nov 5, 2018
src Add de-LU number format (#312) Nov 13, 2018
templates/component Add components for credit card details (#133) Apr 18, 2018
.babelrc Remove syntax-dynamic-import from .babelrc (#167) May 8, 2018
.eslintrc.js Upgrade storybook & organize components into hierarchies (#176) May 24, 2018
.gitignore Docz (#287) Aug 28, 2018
.prettierignore Remove outdated and obsolete code Apr 4, 2018
.travis.yml [SA-1439] Add code coverage :) (#309) Nov 2, 2018
README.md Add more content to README Aug 24, 2018
codecov.yml [SA-1439] Add code coverage :) (#309) Nov 2, 2018
doczrc.js Use Aktiv Grotesk in the Docs (#301) (#303) Nov 5, 2018
jest.config.js Docz (#287) Aug 28, 2018
jest.fileTransformer.js Remove outdated and obsolete code Apr 4, 2018
jest.setup.js Rename theme to 'circuit' (#165) Jul 25, 2018
package.json [SA-1439] Add code coverage :) (#309) Nov 2, 2018
plopfile.js Introduce @sumup/foundry into the project (#184) Jun 11, 2018
prettier.config.js Start adapting dashboard/website tooling to components. Oct 21, 2017
styles.js Add symlinks for styles, themes, and utils Feb 8, 2018
themes.js Add symlinks for styles, themes, and utils Feb 8, 2018
utils.js Add symlinks for styles, themes, and utils Feb 8, 2018
yarn.lock [SA-1439] Add code coverage :) (#309) Nov 2, 2018

README.md

Circuit UI Logo

Circuit UI is the web incarnation of the SumUp Circuit Design System. Our primary goal is to create a system that can be used to build a wide variety of SumUp websites and apps, while providing a consistent user experience to our end users. In addition, the design system and component library should be easy to use for developers and designers.

Table of Contents

Getting started

Here are a few helpful links for getting started with Circuit UI:

  • Getting started - Install and configure Circuit for your React app
  • Styles - Learn about our foundations such as colors, spacing, and typography.
  • Guidelines - Use the design system in a compliant way.
  • Components - Explore the available UI components.

Installation

yarn && yarn start

Deployment

yarn deploy

Linting and formatting

yarn fix:prettier
yarn fix:estlint
yarn fix:stylelint

yarn fix # Run all autofixing

Testing

yarn test:unit:watch
import React from 'react';
import Button from '.';

describe('Button', () => {
  it('should not render if there is no click handler, label, or children', () => {
    const button = create(<Button />);
    expect(button).toMatchSnapshot();
  });
  it('should take the body text as a child', () => {
    const output = mount(<Button onClick={() => {}}>Hello World</Button>);
    expect(output.text()).toContain('Hello World');
  });
});

Utils

Besides the component library, we also export some utilities which you might need in order to use the components. Two main ones:

  • numbers - a module for dealing with number localization.
  • currency - a module for formatting currency amounts.
  • style-helpers - a module containing helpers for writing styles.

Creating components

This project uses @sumup/foundry and the provided plop command to generate new React components. The functionality is exposed as the create-component npm script from package.json.

To create a new component, run yarn create-component inside the project. You'll see a CLI that guides you through the process.

After the CLI has finished, all files will have been created in the location you specified.

Contributing

If you have ideas for how we could improve this readme or the project in general, let us know or contribute some!

About SumUp

SumUp is a mobile-point of sale provider. It is our mission to make easy and fast card payments a reality across the entire world. You can pay with SumUp in more than 30 countries, already. Our engineers work in Berlin, Cologne, Sofia, and Sāo Paulo. They write code in JavaScript, Swift, Ruby, Elixir, Erlang, and much more. Want to come work and with us? Head to our careers page to find out more.