diff --git a/src/controls/Dropdown/stories/Dropdown.Theming.stories.mdx b/src/controls/Dropdown/stories/Dropdown.Theming.stories.mdx new file mode 100644 index 0000000..8617933 --- /dev/null +++ b/src/controls/Dropdown/stories/Dropdown.Theming.stories.mdx @@ -0,0 +1,53 @@ +import {ArgsTable, Meta, Canvas, Story} from "@storybook/addon-docs"; +import { ThemeProvider } from 'styled-components'; +import { Theme } from '../../../styles'; +import {Dropdown} from '../Dropdown'; +import {Icon} from '../../Icon'; +import {Form} from '../../Form'; +import {Label} from '../../Label'; + +# Dropdown: Theming +. + + + +export const domains = [{id: 1, name: '.com'}, {id: 2, name:'.net'}, {id: 3, name:'.org'}, {id: 4, name:'.online'}, {id: 5, name:'.xyz'}, {id: 6, name:'.software'}, {id: 7, name:'.io'}, {id: 8, name:'.edu'}, {id: 9, name:'.tech'}]; +export const people = [{id: 1, name: 'John', relation: 'friend'}, {id: 2, name:'Zachary', relation: 'uncle'}, {id: 3, name:'Deke', relation: 'friend'}]; + +## Columns + +A dropdown can show multiple columns. Each `Dropdown.Column` must have +a single child that is a formatting function for an item, e.g. +`(item) => item.name` + +export const ColumnsTemplate = (args) => +
+ +
{}} onValidate={() => {}}> + + {(item) => item.name} + {(item) => ()} + } + /> + +
+
+ + + item.name, onSearch: null}}> + {ColumnsTemplate.bind({})} + + +