import { Meta, Preview, Props, Description, Story } from "@storybook/addon-docs/blocks";
import { ObfuscatableValue } from "./ObfuscatableValue";
import { action } from "@storybook/addon-actions";

<Meta title="MDX|ObfuscatableValue" component={ObfuscatableValue} />

# ObfuscatableValue component

<Description of={ObfuscatableValue} />

# Props

<Props of={ObfuscatableValue} />

# Usage

When the _editable_ property is set to false (or not set), the component will only display the value and no action will be possible

<Preview withSource>
  <Story name="non-editable value">
    <ObfuscatableValue value="Some value" />
  </Story>
</Preview>

When the _editable_ property is set to true, _onObfuscationRequested_ is called when clicking on the value or on the cross

<Preview withSource>
  <Story name="editable value">
    <ObfuscatableValue value="Some value" editable={true} onObfuscationRequested={action("Please obfuscate")} />
  </Story>
</Preview>
