Buttercup UI Components

React UI Components used in Buttercup product series.

Preview Components

npm install
npm run storybook

Then head to http://localhost:6006/.

Use Components

yarn add @buttercup/ui
# or
npm install @buttercup/ui --save

import { Button } from '@buttercup/ui';

const MyComponent = () => (
  <Button danger>Delete</Button>
);

Available Components

Password generator

The password generator comes bundled in a popover, which can be used like so:

import { Generator } from "@buttercup/ui";

const Comp = () => (
  <Generator
    onGenerate={handleGenerated}
    isOpen={isOpen}
  >
    <div>
      <Button onClick={toggleGenerator}>
        Generate Password
      </Button>
    </div>
  </Generator>
);

If you just require the body of the generator, you can import GeneratorUserInterface instead.

Password Strength Indicator

The indicator can be used like so:

import { Meter } from "@buttercup/ui";

const Comp = () => (
  <Meter input={inputValue} />
);

Button

Available as Button.

TBA.

Input

Available as Input.

TBA.

Center

Available as Center.

TBA.

SmallType

Available as SmallType.

TBA.

Translations / i18n

Parts of this UI library are internationalised. You can find the translations at src/i18n/translations. When adding new translations, make sure to update the index at src/i18n/translations/index.js so that the language is made available.

To change the language, import changeLanguage and call it with a 2-character language code, such as en.

Testing

Run npm t to execute the tests.

To update component snapshots run npm run test:updateSnapshots.