import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";

import * as stories from "./color-password.stories";

<Meta of={stories} />

# Color password

The color password is used primarily in the Generator pages and in the Login type form. It includes
the logic for displaying letters as `text-main`, numbers as `primary`, and special symbols as
`danger`.

<Primary />
<Controls />

## Password Count

The password count option is used in the Login type form. It is used to highlight each character's
position in the password string.

<Story of={stories.ColorPasswordCount} />

## Wrapped Password

When the password length is longer than the container's width, it should wrap as shown below.

<Story of={stories.WrappedColorPassword} />

<Story of={stories.WrappedColorPasswordCount} />

## Accessibility

The colors used in the colored password should maintain WCAG compliant contrast with theme
`background` and `background-alt` colors.
