juandc / circuit-ui

React component library for sumup web apps

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
• Installation
• Deployment
• Linting and formatting
• Testing
• Utils
• Creating components
• Contributing
• About SumUp

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.