import { Meta, Story } from "@storybook/addon-docs";
import Form from "../Form";
import ControlledSecretConfirmationField from "./ControlledSecretConfirmationField";

<Meta
  title="ControlledSecretConfirmationField"
  decorators={[
    (Story) => (
      <Form onSubmit={console.log} defaultValues={{ password: "", passwordConfirmation: "" }} translationPath={["sample", "form"]}>
        <Story />
      </Form>
    ),
  ]}
/>

<Story name="Default">
  <ControlledSecretConfirmationField name="password" />
</Story>

<Story name="WithHardcodedText">
  <ControlledSecretConfirmationField name="password" label="Password" confirmationLabel="Password Confirmation" helpText="A help text" confirmationHelpText="Another help text" />
</Story>

<Story name="WithStyling">
  <ControlledSecretConfirmationField name="password" className="has-background-blue-light" />
</Story>

<Story name="WithCheck">
  <ControlledSecretConfirmationField
    name="password"
    rules={{
      required: true,
    }}
  />
</Story>

<Story name="WithInitialFocus">
  <ControlledSecretConfirmationField name="password" autoFocus={true} />
</Story>
