refactor: use $$restProps API

- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities
This commit is contained in:
Eric Liu 2020-07-18 20:00:20 -07:00
commit e886d772c7
288 changed files with 4681 additions and 4498 deletions

View file

@ -1,57 +1,57 @@
import { withKnobs, number, boolean, text } from '@storybook/addon-knobs';
import Component from './Tile.Story.svelte';
import { withKnobs, number, boolean, text } from "@storybook/addon-knobs";
import Component from "./Tile.Story.svelte";
export default { title: 'Tile', decorators: [withKnobs] };
export default { title: "Tile", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: { light: boolean('Light variant (light)', false) }
props: { light: boolean("Light variant (light)", false) },
});
export const Clickable = () => ({
Component,
props: {
story: 'clickable',
href: text('Href for clickable UI (href)', 'javascript:void(0)'),
light: boolean('Light variant (light)', false)
}
story: "clickable",
href: text("Href for clickable UI (href)", "javascript:void(0)"),
light: boolean("Light variant (light)", false),
},
});
export const MultiSelect = () => ({
Component,
props: {
story: 'multi-select',
selected: boolean('Selected (selected)', false),
light: boolean('Light variant (light)', false)
}
story: "multi-select",
selected: boolean("Selected (selected)", false),
light: boolean("Light variant (light)", false),
},
});
MultiSelect.story = { name: 'Multi-select' };
MultiSelect.story = { name: "Multi-select" };
export const Selectable = () => ({
Component,
props: {
story: 'selectable',
name: text('Form item name (name in <RadioTile>)', 'tiles'),
light: boolean('Light variant (light)', false)
}
story: "selectable",
name: text("Form item name (name in <RadioTile>)", "tiles"),
light: boolean("Light variant (light)", false),
},
});
export const Expandable = () => ({
Component,
props: {
story: 'expandable',
tabindex: text('Tab index (tabindex)', '0'),
expanded: boolean('Expanded (expanded)', false),
tileMaxHeight: number('Max height (tileMaxHeight)', 0),
story: "expandable",
tabindex: text("Tab index (tabindex)", "0"),
expanded: boolean("Expanded (expanded)", false),
tileMaxHeight: number("Max height (tileMaxHeight)", 0),
tileCollapsedIconText: text(
'Collapsed icon text (tileCollapsedIconText)',
'Interact to Expand tile'
"Collapsed icon text (tileCollapsedIconText)",
"Interact to Expand tile"
),
tileExpandedIconText: text(
'Collapsed icon text (tileExpandedIconText)',
'Interact to Collapse tile'
"Collapsed icon text (tileExpandedIconText)",
"Interact to Collapse tile"
),
light: boolean('Light variant (light)', false)
}
light: boolean("Light variant (light)", false),
},
});