tonyair/silverstripe-tagfield
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-tagfield synced 2024-10-22 11:05:32 +02:00
Code Issues Projects Releases Wiki Activity

ENH Storybook Doc Blocks

Browse Source
This commit is contained in:
Sabina Talipova 2023-06-14 09:07:25 +12:00
parent a2b1a82734
commit f667020678
1 changed files with 95 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
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>
),
],
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 = () => (
export const SimpleExample = (args) => (
<TagField
name="test"
options={[
{ Title: 'One', Value: 1 },
{ Title: 'Two', Value: 2 },
{ Title: 'Three', Value: 3 },
{ Title: 'Four', Value: 4 },
{ Title: 'Five', Value: 5 },
]}
{...args}
/>
);
export const MultipleSelection = () => (
export const MultipleSelection = (args) => (
<TagField
name="test"
{...args}
multi
options={[
{ Title: 'One', Value: 1 },
{ Title: 'Two', Value: 2 },
{ Title: 'Three', Value: 3 },
{ Title: 'Four', Value: 4 },
{ Title: 'Five', Value: 5 },
]}
/>
);