tonyair/silverstripe-tagfield
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-tagfield synced 2024-06-25 22:19:22 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #245 from creative-commoners/pulls/3/storybook-docs

Browse Source 
ENH Storybook documentation
This commit is contained in:
Sabina Talipova 2023-06-20 10:18:47 +12:00 committed by GitHub
commit af27f42f1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 101 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
client/src/components/tests/TagField-story.js
View File

@ -1,41 +1,110 @@
import React from 'react';
import TagField from 'components/TagField';
import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
const options = [
{ Title: 'One', Value: 1 },
{ Title: 'Two', Value: 2 },
{ Title: 'Three', Value: 3 },
{ Title: 'Four', Value: 4 },
{ Title: 'Five', Value: 5 },
];
export default {
title: 'TagField/TagField',
decorators: [
(storyFn) => (
<div style={{ width: '250px' }} className="ss-tag-field">
{storyFn()}
</div>
),
],
title: 'TagField/TagField',
component: TagField,
decorators: [],
tags: ['autodocs'],
parameters: {
docs: {
description: {
component: 'The Tag Field component.'
},
canvas: {
sourceState: 'shown',
},
}
},
argTypes: {
name: {
control: 'text',
table: {
type: { summary: 'string' },
defaultValue: { summary: null },
},
},
options: {
description: 'List of tags options',
control: 'select',
table: {
type: { summary: 'string' },
},
},
labelKey: {
control: 'text',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'Title' },
},
},
valueKey: {
control: 'text',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'Value' },
},
},
lazyLoad: {
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
creatable: {
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
multi: {
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
disabled: {
control: 'boolean',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
optionUrl: {
control: 'text',
table: {
type: { summary: 'string' },
defaultValue: { summary: null },
},
},
},
args: {
name: 'Test',
options
}
};
export const SimpleExample = () => (
<TagField
name="test"
options={[
{ Title: 'One', Value: 1 },
{ Title: 'Two', Value: 2 },
{ Title: 'Three', Value: 3 },
{ Title: 'Four', Value: 4 },
{ Title: 'Five', Value: 5 },
]}
/>
export const SimpleExample = (args) => (
<TagField
{...args}
/>
);
export const MultipleSelection = () => (
<TagField
name="test"
multi
options={[
{ Title: 'One', Value: 1 },
{ Title: 'Two', Value: 2 },
{ Title: 'Three', Value: 3 },
{ Title: 'Four', Value: 4 },
{ Title: 'Five', Value: 5 },
]}
/>
export const MultipleSelection = (args) => (
<TagField
{...args}
multi
/>
);