VladimirLogachev / circuit-ui

SumUp's component library for the web

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
• Development
• Deployment
• Linting and formatting
• Testing
• Utils
• Creating components
• Code of conduct
  • Maintainers
• 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 add @sumup/circuit-ui

Development

yarn && yarn start

Deployment

yarn deploy

Linting and formatting

yarn test:lint

yarn fix

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. The three main ones:

• numbersUtils - a module for dealing with number localization.
• currencyUtils - a module for formatting currency amounts.
• styleHelpers - 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.

Code of conduct

We want to foster an inclusive and friendly community around our Open Source efforts. Like all SumUp Open Source projects, this project follows the Contributor Covenant Code of Conduct. Please, read it and follow it.

If you feel another member of the community violated our CoC or you are experiencing problems participating in our community because of another individual's behavior, please get in touch with our maintainers. We will enforce the CoC.

Maintainers

• Connor Bär
• Fernando Fleury

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.