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
.