FieldWithValidation

textkernel · Aug 15, 2022 · 4a131cb · 4a131cb
1 parent ef70927
commit 4a131cb
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 35 deletions.
diff --git a/src/components/FieldWithValidation/FieldWithValidation.tsx b/src/components/FieldWithValidation/FieldWithValidation.tsx
@@ -4,7 +4,7 @@ import { Tooltip } from '../Tooltip';
 import { Text } from '../Text';
 import styles from './FieldWithValidation.scss';
 
-interface Props {
+export interface Props {
     /** a single form field, e.g. Input, TextArea, etc. It should support context=”bad” prop.
      * When useTooltip is set to true, children that are ReactComponents should support forwardRef */
     children: React.ReactElement;

diff --git a/src/components/FieldWithValidation/index.ts b/src/components/FieldWithValidation/index.ts
@@ -1 +1 @@
-export { FieldWithValidation } from './FieldWithValidation';
+export { FieldWithValidation, Props as FieldWithValidationProps } from './FieldWithValidation';
diff --git a/src/index.ts b/src/index.ts
@@ -43,7 +43,7 @@ export { Footer } from './components/Footer';
 export { Header } from './components/Header';
 export { Gauge } from './components/Gauge';
 export { Field } from './components/Field';
-export { FieldWithValidation } from './components/FieldWithValidation';
+export * from './components/FieldWithValidation';
 export { FieldWrapper } from './components/FieldWrapper';
 export { LoadingSpinner } from './components/LoadingSpinner';
 export { LocationCard } from './components/LocationCard';

diff --git a/stories/FieldWithValidation.tsx b/stories/FieldWithValidation.tsx
@@ -1,9 +1,32 @@
 import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import { text, boolean, withKnobs } from '@storybook/addon-knobs';
-import { FieldWithValidation, Input, TextArea } from '@textkernel/oneui';
+import { FieldWithValidation, Input, TextArea, FieldWithValidationProps } from '@textkernel/oneui';
 
-const Example = () => {
+export default {
+    title: 'Molecules/FieldWithValidation',
+    component: FieldWithValidation,
+};
+
+export const _FieldWithValidation = ({ errorMessage2, useTootip2, ...args }) => (
+    <>
+        <div style={{ marginBottom: '10px' }}>
+            <FieldWithValidation {...(args as FieldWithValidationProps)} />
+        </div>
+        <div>
+            <FieldWithValidation errorMessage={errorMessage2} useTooltip={useTootip2}>
+                <TextArea />
+            </FieldWithValidation>
+        </div>
+    </>
+);
+_FieldWithValidation.args = {
+    errorMessage: 'Error message',
+    useTooltip: false,
+    children: <Input />,
+    errorMessage2: '',
+    useTootip2: false,
+};
+
+export const Example = (args) => {
     const [inputValue, setValue] = React.useState('');
     const [errMsg, setErrMsg] = React.useState<string>();
     const EMAIL_REGEX =
@@ -22,10 +45,7 @@ const Example = () => {
 
     return (
         <div style={{ marginBottom: '10px' }}>
-            <FieldWithValidation
-                errorMessage={errMsg}
-                useTooltip={boolean('Use tooltip for input field', false)}
-            >
+            <FieldWithValidation errorMessage={errMsg} useTooltip={args.useTooltip}>
                 <Input
                     value={inputValue}
                     onChange={(e) => {
@@ -37,27 +57,6 @@ const Example = () => {
         </div>
     );
 };
-
-storiesOf('Molecules/FieldWithValidation', module)
-    .addDecorator(withKnobs)
-    .add('FieldWithValidation', () => (
-        <>
-            <div style={{ marginBottom: '10px' }}>
-                <FieldWithValidation
-                    errorMessage={text('Error message for input field', 'Something wrong')}
-                    useTooltip={boolean('Use tooltip for input field', false)}
-                >
-                    <Input />
-                </FieldWithValidation>
-            </div>
-            <div>
-                <FieldWithValidation
-                    errorMessage={text('Error message for text field', '')}
-                    useTooltip={boolean('Use tooltip for text field', false)}
-                >
-                    <TextArea />
-                </FieldWithValidation>
-            </div>
-        </>
-    ))
-    .add('Example implementation', () => <Example />);
+Example.args = {
+    useTooltip: false,
+};
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { FieldWithValidation } from './FieldWithValidation';
		export { FieldWithValidation, Props as FieldWithValidationProps } from './FieldWithValidation';