persona-web-locker-ui v0.0.58

npm install

npm run build

Copy dist folder under project directory and paste it persona_ext project -> node_modules/persona-web-locker-ui or persona/

Preview Components

npm install
npm run storybook

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

Use Components

yarn add persona-web-locker-ui
# or
npm install persona-web-locker-ui --save

import { Button } from 'persona-web-locker-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 "persona-web-locker-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 "persona-web-locker-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.

Testing

Run npm t to execute the tests.

To update component snapshots run npm run test:updateSnapshots.