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.
- Getting started
- Installation
- Deployment
- Linting and formatting
- Testing
- Utils
- Creating components
- Contributing
- About SumUp
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.
yarn && yarn start
yarn deploy
yarn fix:prettier
yarn fix:estlint
yarn fix:stylelint
yarn fix # Run all autofixing
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');
});
});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.
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.
If you have ideas for how we could improve this readme or the project in general, let us know or contribute some!
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.