Awesome
Buttercup UI Components
React UI Components used in Buttercup product series.
⚠️ DEPRECATED ⚠️
This library is deprecated and will soon be archived. UI components have been moved into their respective parent repositories, as have translations.
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
.