IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

SecretFormField: updates story from knobs to control (#33920)

Browse Source 
* SecretFormField: updates story from knobs to control

* disables knobs in story
This commit is contained in:
Uchechukwu Obasi 2021-05-12 08:59:21 +01:00 committed by GitHub
parent a7ea0ca849
commit 3d47bf247f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.internal.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import { boolean } from '@storybook/addon-knobs';
import { Meta, Story } from '@storybook/react';
import { SecretFormField } from './SecretFormField';
import { SecretFormField, Props } from './SecretFormField';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { UseState } from '../../utils/storybook/UseState';
@ -10,31 +10,48 @@ export default {
title: 'Forms/SecretFormField',
component: SecretFormField,
decorators: [withCenteredStory],
};
parameters: {
controls: {
exclude: ['onReset'],
},
knobs: {
disable: true,
},
},
argTypes: {
labelWidth: { control: { type: 'range', min: 0, max: 30 } },
inputWidth: { control: { type: 'range', min: 0, max: 30 } },
tooltip: { control: { type: 'text' } },
},
} as Meta;
const getSecretFormFieldKnobs = () => {
return {
isConfigured: boolean('Set configured state', false),
};
};
export const basic = () => {
const knobs = getSecretFormFieldKnobs();
export const Basic: Story<Props> = (args) => {
return (
<UseState initialState="Input value">
{(value, setValue) => (
<SecretFormField
label={'Secret field'}
labelWidth={10}
label={args.label}
labelWidth={args.labelWidth}
value={value}
isConfigured={knobs.isConfigured}
isConfigured={args.isConfigured}
onChange={(e) => setValue(e.currentTarget.value)}
onReset={() => {
action('Value was reset')('');
setValue('');
}}
inputWidth={args.inputWidth}
tooltip={args.tooltip}
placeholder={args.placeholder}
/>
)}
</UseState>
);
};
Basic.args = {
label: 'Secret field',
labelWidth: 10,
isConfigured: false,
inputWidth: 12,
tooltip: 'this is a tooltip',
placeholder: 'Password',
};