Skip to content

Commit 1b0de0a

Browse files
snowystingersnowystinger
committed
Expand story to cover most of our interactive components
1 parent 572ace9 commit 1b0de0a

File tree

1 file changed

+154
-7
lines changed

1 file changed

+154
-7
lines changed

‎packages/@react-spectrum/s2/stories/TableView.stories.tsx

Lines changed: 154 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,35 @@
1313
import {action} from '@storybook/addon-actions';
1414
import {
1515
ActionButton,
16+
ActionMenu,
1617
Cell,
18+
Checkbox,
19+
CheckboxGroup,
20+
ColorArea,
1721
Column,
22+
ComboBox,
23+
ComboBoxItem,
1824
Content,
25+
DatePicker,
1926
Heading,
2027
IllustratedMessage,
2128
Link,
2229
MenuItem,
2330
MenuSection,
31+
NumberField,
32+
Picker,
33+
PickerItem,
34+
Radio,
35+
RadioGroup,
2436
Row,
37+
Slider,
38+
Switch,
2539
TableBody,
2640
TableHeader,
2741
TableView,
2842
TableViewProps,
43+
Tag,
44+
TagGroup,
2945
Text,
3046
TextField
3147
} from '../src';
@@ -932,21 +948,147 @@ export const ColSpan: StoryObj<typeof ColSpanExample> = {
932948
}
933949
};
934950

951+
let data: {id: string, name: string, description: string, type: string}[] = [
952+
{id: '1', name: 'Name', description: 'Who you are', type: 'text'},
953+
{id: '2', name: 'Date of birth', description: 'For horoscopes', type: 'date'},
954+
{id: '3', name: 'Favourite colour', description: 'For your personality', type: 'combobox'},
955+
{id: '4', name: 'Pets', description: 'For your enjoyment', type: 'picker'},
956+
{id: '5', name: 'Allowance', description: 'For your future', type: 'number'},
957+
{id: '6', name: 'Height', description: 'In inches, for your basketball career', type: 'slider'},
958+
{id: '7', name: 'Actions', description: 'To take right now', type: 'menu'},
959+
{id: '8', name: 'Checkbox', description: 'To check', type: 'checkbox'},
960+
{id: '9', name: 'Radio', description: 'To choose', type: 'radio'},
961+
{id: '10', name: 'Wall colour', description: 'So your room sparks joy', type: 'color'},
962+
{id: '11', name: 'References', description: 'Handy link to your favourite website', type: 'link'},
963+
{id: '12', name: 'Mythical dogs', description: 'Which would you adopt', type: 'tags'},
964+
{id: '13', name: 'Superstitions enabled', description: 'Whether or not 13 is bad luck', type: 'switch'}
965+
];
966+
967+
let dataColumns = [
968+
{name: 'Name', id: 'name', isRowHeader: true, minWidth: 200},
969+
{name: 'Data', id: 'editable', minWidth: 300},
970+
{name: 'Description', id: 'description', minWidth: 200}
971+
];
972+
973+
let formatOptions: Intl.NumberFormatOptions = {
974+
style: 'currency',
975+
currency: 'USD'
976+
};
935977

936978
export const TableWithTextFields: StoryObj<typeof TableView> = {
937979
render: (args) => (
938-
<TableView aria-label="Many items table" {...args} styles={style({width: 800, height: 400})}>
939-
<TableHeader columns={manyColumns}>
980+
<TableView overflowMode="wrap" aria-label="Editable fields table" {...args} styles={style({width: 800, height: 400})}>
981+
<TableHeader columns={dataColumns}>
940982
{(column) => (
941-
<Column allowsResizing minWidth={100} isRowHeader={column.name === 'Column 1'}>{column.name}</Column>
983+
<Column allowsResizing minWidth={column.minWidth} isRowHeader={column.isRowHeader}>{column.name}</Column>
942984
)}
943985
</TableHeader>
944-
<TableBody items={manyRows}>
986+
<TableBody items={data}>
945987
{item => (
946-
<Row id={item.id} columns={manyColumns}>
988+
<Row id={item.id} columns={dataColumns}>
947989
{(column) => {
948-
if (column.name === 'Column 2') {
949-
return <Cell><div style={{display: 'flex'}}><TextField aria-label={`${item[column.id]} 1`} /><TextField aria-label={`${item[column.id]} 2`} /></div></Cell>;
990+
if (column.name === 'Data') {
991+
switch (item.type) {
992+
case 'text':
993+
return <Cell><div style={{display: 'flex', paddingInline: '8px', gap: '8px'}}><TextField aria-label="First name" /><TextField aria-label="Last name" /></div></Cell>;
994+
case 'date':
995+
return <Cell><div style={{display: 'flex', paddingInline: '8px'}}><DatePicker aria-label={item.name} /></div></Cell>;
996+
case 'combobox':
997+
return (
998+
<Cell>
999+
<div style={{display: 'flex', paddingInline: '8px'}}>
1000+
<ComboBox aria-label={item.name}>
1001+
<ComboBoxItem id="1">Red</ComboBoxItem>
1002+
<ComboBoxItem id="2">Green</ComboBoxItem>
1003+
<ComboBoxItem id="3">Blue</ComboBoxItem>
1004+
</ComboBox>
1005+
</div>
1006+
</Cell>
1007+
);
1008+
case 'picker':
1009+
return (
1010+
<Cell>
1011+
<div style={{display: 'flex', paddingInline: '8px'}}>
1012+
<Picker aria-label={item.name}>
1013+
<PickerItem id="1">Cat</PickerItem>
1014+
<PickerItem id="2">Dog</PickerItem>
1015+
<PickerItem id="3">Bird</PickerItem>
1016+
</Picker>
1017+
</div>
1018+
</Cell>
1019+
);
1020+
case 'number':
1021+
return <Cell><div style={{display: 'flex', paddingInline: '8px'}}><NumberField formatOptions={formatOptions} aria-label={item.name} /></div></Cell>;
1022+
case 'slider':
1023+
return <Cell><div style={{display: 'flex', paddingInline: '8px'}}><Slider labelPosition="side" aria-label={item.name} minValue={0} maxValue={100} step={1} /></div></Cell>;
1024+
case 'menu':
1025+
return (
1026+
<Cell>
1027+
<div style={{display: 'flex', paddingInline: '8px'}}>
1028+
<ActionMenu>
1029+
<MenuItem>Copy</MenuItem>
1030+
<MenuItem>Delete</MenuItem>
1031+
</ActionMenu>
1032+
</div>
1033+
</Cell>
1034+
);
1035+
case 'checkbox':
1036+
return (
1037+
<Cell>
1038+
<div style={{display: 'flex', paddingInline: '8px'}}>
1039+
<CheckboxGroup aria-label="Packing" orientation="horizontal">
1040+
<Checkbox value="airpods">Airpods</Checkbox>
1041+
<Checkbox value="kindle">Kindle</Checkbox>
1042+
</CheckboxGroup>
1043+
</div>
1044+
</Cell>
1045+
);
1046+
case 'radio':
1047+
return (
1048+
<Cell>
1049+
<div style={{display: 'flex', paddingInline: '8px'}}>
1050+
<RadioGroup aria-label="In-flight meal" orientation="horizontal">
1051+
<Radio value="chicken">Chicken</Radio>
1052+
<Radio value="veggie">Veggie</Radio>
1053+
</RadioGroup>
1054+
</div>
1055+
</Cell>
1056+
);
1057+
case 'color':
1058+
return (
1059+
<Cell>
1060+
<div style={{display: 'flex', paddingInline: '8px'}}>
1061+
<ColorArea aria-label={item.name} />
1062+
</div>
1063+
</Cell>
1064+
);
1065+
case 'link':
1066+
return (
1067+
<Cell>
1068+
<div style={{display: 'flex', paddingInline: '8px'}}><Link href="https://adobe.com">Adobe</Link></div>
1069+
</Cell>
1070+
);
1071+
case 'tags':
1072+
return (
1073+
<Cell>
1074+
<div style={{display: 'flex', paddingInline: '8px'}}>
1075+
<TagGroup selectionMode="multiple" aria-label={item.name}>
1076+
<Tag>Cerberus</Tag>
1077+
<Tag>Gellert</Tag>
1078+
<Tag>Fenris</Tag>
1079+
</TagGroup>
1080+
</div>
1081+
</Cell>
1082+
);
1083+
case 'switch':
1084+
return (
1085+
<Cell>
1086+
<div style={{display: 'flex', paddingInline: '8px'}}>
1087+
<Switch aria-label={item.name} />
1088+
</div>
1089+
</Cell>
1090+
);
1091+
}
9501092
}
9511093
return <Cell>{item[column.id]}</Cell>;
9521094
}}
@@ -958,6 +1100,11 @@ export const TableWithTextFields: StoryObj<typeof TableView> = {
9581100
args: {
9591101
...Example.args,
9601102
keyboardNavigationBehavior: 'tab'
1103+
},
1104+
parameters: {
1105+
docs: {
1106+
disable: true
1107+
}
9611108
}
9621109
};
9631110

0 commit comments

Comments
 (0)