Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 1x 1x | import React from 'react';
import { Meta, Story } from '@storybook/react';
import Validation, { IValidationProps } from './Validation';
import TextField from '../TextField/TextField';
export default {
title: 'Helpers/Validation',
component: Validation,
parameters: {
docs: {
description: {
component: Validation.peek.description,
},
},
},
} as Meta;
/* Basic */
export const Basic: Story<IValidationProps> = (args) => {
return (
<section>
<p>Text field with Error prop (Method 1)</p>
<Validation {...args} Error='Error One'>
<TextField value='Text Field Text' />
</Validation>
<br />
<p>Text field with Validation Error child component (Method 2)</p>
<Validation {...args}>
<Validation.Error>
<span>Error Two</span>
</Validation.Error>
<TextField value='Text Field Text' />
</Validation>
<br />
<p>Text area with Error prop (Method 1)</p>
<Validation {...args} Error='Error Three'>
<TextField isMultiLine rows={3} value='Text Area Text' />
</Validation>
<br />
<p>Text area with Validation Error child component (Method 2)</p>
<Validation {...args} Error='Error FOUR TEST'>
<Validation.Error>
<span>Error Four</span>
</Validation.Error>
<TextField isMultiLine rows={3} value='Text Area Text' />
</Validation>
</section>
);
};
|