import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { text, select, boolean } from '@storybook/addon-knobs';
import PasswordField from '../../components/PasswordField.vue';

<Meta title="Form fields/Password field" component={PasswordField} />

# Password field

<Props of={PasswordField} />

# Default

Use the `PasswordField` component to change the field into a password field with a "hide/show password"
button, toggling between cleartext and password view.

<Preview>
  <Story name="Default">
    {{
      props: {
        inputValue: {
          default: text('Input value', 'Password')
        },
        label: {
          default: text('Label', 'Label')
        },
        hideShowButton: {
          default: boolean('Hide "show password" button', false)
        },
        showPasswordStrength: {
          default: boolean('Show password strength', true)
        },
        passwordStrengthScore: {
          default: select('Password strength', [null, 0, 1, 2, 3, 4 ], 3)
        },
      },
      components: {
        PasswordField
      },
      template: `
        <div class="py-16">
          <PasswordField
            name="password"
            :label="label"
            class="w-full max-w-sm mx-auto"
            v-model="inputValue"
            :show-password-strength="showPasswordStrength"
            :password-strength-score="passwordStrengthScore"
            :hide-show-button="hideShowButton"
          />
        </div>`,
    }}
  </Story>
</Preview>