Block* -> Field*

This commit is contained in:
orangemug 2020-06-03 17:11:47 +01:00
parent b19eacf4f9
commit d6f31ec82e
15 changed files with 183 additions and 1 deletions

View file

@ -0,0 +1,26 @@
import React from 'react';
import {useActionState} from './helper';
import FieldComment from '../src/components/FieldComment';
import {Wrapper} from './ui';
import {withA11y} from '@storybook/addon-a11y';
export default {
title: 'FieldComment',
component: FieldComment,
decorators: [withA11y],
};
export const Basic = () => {
const [value, setValue] = useActionState("onChange", "Hello\nworld");
return (
<Wrapper>
<FieldComment
value={value}
onChange={setValue}
/>
</Wrapper>
);
};

View file

@ -0,0 +1,26 @@
import React from 'react';
import {useActionState} from './helper';
import FieldId from '../src/components/FieldId';
import {Wrapper} from './ui';
import {withA11y} from '@storybook/addon-a11y';
export default {
title: 'FieldId',
component: FieldId,
decorators: [withA11y],
};
export const Basic = () => {
const [value, setValue] = useActionState("onChange", "water");
return (
<Wrapper>
<FieldId
value={value}
onChange={setValue}
/>
</Wrapper>
);
};

View file

@ -0,0 +1,26 @@
import React from 'react';
import {useActionState} from './helper';
import FieldMaxZoom from '../src/components/FieldMaxZoom';
import {Wrapper} from './ui';
import {withA11y} from '@storybook/addon-a11y';
export default {
title: 'FieldMaxZoom',
component: FieldMaxZoom,
decorators: [withA11y],
};
export const Basic = () => {
const [value, setValue] = useActionState("onChange", 12);
return (
<Wrapper>
<FieldMaxZoom
value={value}
onChange={setValue}
/>
</Wrapper>
);
};

View file

@ -0,0 +1,26 @@
import React from 'react';
import {useActionState} from './helper';
import FieldMinZoom from '../src/components/FieldMinZoom';
import {Wrapper} from './ui';
import {withA11y} from '@storybook/addon-a11y';
export default {
title: 'FieldMinZoom',
component: FieldMinZoom,
decorators: [withA11y],
};
export const Basic = () => {
const [value, setValue] = useActionState("onChange", 2);
return (
<Wrapper>
<FieldMinZoom
value={value}
onChange={setValue}
/>
</Wrapper>
);
};

View file

@ -0,0 +1,26 @@
import React from 'react';
import {useActionState} from './helper';
import FieldSource from '../src/components/FieldSource';
import {Wrapper} from './ui';
import {withA11y} from '@storybook/addon-a11y';
export default {
title: 'FieldSource',
component: FieldSource,
decorators: [withA11y],
};
export const Basic = () => {
const [value, setValue] = useActionState("onChange", "openmaptiles");
return (
<Wrapper>
<FieldSource
value={value}
onChange={setValue}
/>
</Wrapper>
);
};

View file

@ -0,0 +1,26 @@
import React from 'react';
import {useActionState} from './helper';
import FieldSourceLayer from '../src/components/FieldSourceLayer';
import {Wrapper} from './ui';
import {withA11y} from '@storybook/addon-a11y';
export default {
title: 'FieldSourceLayer',
component: FieldSourceLayer,
decorators: [withA11y],
};
export const Basic = () => {
const [value, setValue] = useActionState("onChange", "water");
return (
<Wrapper>
<FieldSourceLayer
value={value}
onChange={setValue}
/>
</Wrapper>
);
};

View file

@ -0,0 +1,26 @@
import React from 'react';
import {useActionState} from './helper';
import FieldType from '../src/components/FieldType';
import {Wrapper} from './ui';
import {withA11y} from '@storybook/addon-a11y';
export default {
title: 'FieldType',
component: FieldType,
decorators: [withA11y],
};
export const Basic = () => {
const [value, setValue] = useActionState("onChange", "background");
return (
<Wrapper>
<FieldType
value={value}
onChange={setValue}
/>
</Wrapper>
);
};

View file

@ -11,7 +11,7 @@ export function Describe ({children}) {
export function Wrapper ({children}) { export function Wrapper ({children}) {
return ( return (
<div style={{maxWidth: "180px", margin: "0.4em"}}> <div style={{maxWidth: "260px", margin: "0.4em"}}>
{children} {children}
</div> </div>
); );