Skip to content

Commit

Permalink
Add Dropdown theming story
Browse files Browse the repository at this point in the history
  • Loading branch information
henck committed Dec 30, 2023
1 parent fc88a6e commit 841d1b8
Showing 1 changed file with 53 additions and 0 deletions.
53 changes: 53 additions & 0 deletions src/controls/Dropdown/stories/Dropdown.Theming.stories.mdx
Original file line number Diff line number Diff line change
@@ -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
.

<Meta
title="Controls/Dropdown/Theming"
component={Dropdown}
subcomponents={{ 'Dropdown.Column': Dropdown.Column }}
argTypes={{
className: { table: { disable: true } }
}}
/>

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) =>
<div style={{height: '250px', padding: '30px', background: '#406A8C'}}>
<ThemeProvider theme={{...Theme, normalColor: '#aaa', background: '#305A7C', fontColor: '#fff' }}>
<Form data={{}} onChange={() => {}} onValidate={() => {}}>
<Form.Field
name="person"
value={null}
control={<Dropdown {...args}>
<Dropdown.Column>{(item) => item.name}</Dropdown.Column>
<Dropdown.Column>{(item) => (<Label>{item.relation}</Label>)}</Dropdown.Column>
</Dropdown>}
/>
</Form>
</ThemeProvider>
</div>

<Canvas>
<Story
name="Columns"
args={{data: people, alwaysDown: true, maxItems: 4, placeholder: "Select person", label: (item) => item.name, onSearch: null}}>
{ColumnsTemplate.bind({})}
</Story>
</Canvas>

0 comments on commit 841d1b8

Please sign in to comment.