Skip to content
Design system & component library for SumUp web apps
JavaScript HTML
Branch: canary
Clone or download
robinmetral feat(components): add sidebar separator component (#514)
* feat(components): add sidebar separator component

* feat(components): rename separator label and export component from sidebar
Latest commit c6830a0 Dec 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github feat(docs): migrate to Storybook Docs (#502) Oct 28, 2019
.storybook fix(docs): import test decorator correctly (#504) Oct 29, 2019
docs feat(docs): migrate to Storybook Docs (#502) Oct 28, 2019
scripts/static-styles feat(styles): extract static style (#477) Oct 15, 2019
src feat(components): add sidebar separator component (#514) Dec 5, 2019
.babelrc feat(tests): configure StoryShots (#498) Oct 29, 2019
.cz-config.js feat(styles): extract static style (#477) Oct 15, 2019
.eslintrc.js feat(components): Deprecate components (#470) Sep 18, 2019
.gitignore List[View] component (#313) Nov 23, 2018
.huskyrc.js chore: Automate release process (#372) Jul 15, 2019
.prettierignore Remove outdated and obsolete code Apr 4, 2018
.releaserc.js chore: Automate release process (#372) Jul 15, 2019
.travis.yml feat(docs): migrate to Storybook Docs (#502) Oct 28, 2019
CODE_OF_CONDUCT.md (docs) Small fixes (#361) Jan 14, 2019
LICENSE chore: Add OSS requirements (#417) Jul 15, 2019
README.md feat(docs): migrate to Storybook Docs (#502) Oct 28, 2019
codecov.yml [SA-1439] Add code coverage :) (#309) Nov 2, 2018
jest.config.js feat(tests): configure StoryShots (#498) Oct 29, 2019
jest.fileTransformer.js test(configs): include SVG props in snapshots (#472) Sep 19, 2019
jest.mdxTransformer.js feat(tests): configure StoryShots (#498) Oct 29, 2019
jest.setup.js feat(components): add component context and Link component (#490) Oct 15, 2019
lint-staged.config.js (chore) Upgrade Foundry to v1 (#362) Jan 17, 2019
package.json fix: use correct license in package.json (#508) Nov 2, 2019
plopfile.js (chore) Upgrade Foundry to v1 (#362) Jan 17, 2019
prettier.config.js (chore) Upgrade Foundry to v1 (#362) Jan 17, 2019
yarn.lock feat(tests): configure StoryShots (#498) Oct 29, 2019

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 add @sumup/circuit-ui

Development

yarn && yarn start

Deployment

yarn deploy

Linting and formatting

yarn test:lint-js

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.

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.

You can’t perform that action at this time.