mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 02:41:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: use $$restProps API

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

72
src/components/Button/Button.stories.js
View file

@ -1,62 +1,62 @@
import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
import Component from './Button.Story.svelte';
import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
import Component from "./Button.Story.svelte";
export default { title: 'Button', decorators: [withKnobs] };
export default { title: "Button", decorators: [withKnobs] };
const kinds = {
'Primary button (primary)': 'primary',
'Secondary button (secondary)': 'secondary',
'Danger button (danger)': 'danger',
'Ghost button (ghost)': 'ghost'
"Primary button (primary)": "primary",
"Secondary button (secondary)": "secondary",
"Danger button (danger)": "danger",
"Ghost button (ghost)": "ghost",
};
const sizes = {
Default: 'default',
Field: 'field',
Small: 'small'
Default: "default",
Field: "field",
Small: "small",
};
export const Default = () => ({
Component,
props: {
kind: select('Button kind (kind)', kinds, 'primary'),
disabled: boolean('Disabled (disabled)', false),
size: select('Button size (size)', sizes, 'default'),
iconDescription: text('Icon description (iconDescription)', 'Button icon'),
small: boolean('Small (small) - Deprecated in favor of `size`', false)
}
kind: select("Button kind (kind)", kinds, "primary"),
disabled: boolean("Disabled (disabled)", false),
size: select("Button size (size)", sizes, "default"),
iconDescription: text("Icon description (iconDescription)", "Button icon"),
small: boolean("Small (small) - Deprecated in favor of `size`", false),
},
});
export const IconOnlyButtons = () => ({
Component,
props: {
story: 'icon-only buttons',
kind: select('Button kind (kind)', kinds, 'primary'),
disabled: boolean('Disabled (disabled)', false),
size: select('Button size (size)', sizes, 'default'),
iconDescription: text('Icon description (iconDescription)', 'Button icon'),
story: "icon-only buttons",
kind: select("Button kind (kind)", kinds, "primary"),
disabled: boolean("Disabled (disabled)", false),
size: select("Button size (size)", sizes, "default"),
iconDescription: text("Icon description (iconDescription)", "Button icon"),
tooltipPosition: select(
'Tooltip position (tooltipPosition)',
['top', 'right', 'bottom', 'left'],
'bottom'
"Tooltip position (tooltipPosition)",
["top", "right", "bottom", "left"],
"bottom"
),
tooltipAlignment: select(
'Tooltip alignment (tooltipAlignment)',
['start', 'center', 'end'],
'center'
)
}
"Tooltip alignment (tooltipAlignment)",
["start", "center", "end"],
"center"
),
},
});
export const SetOfButtons = () => ({
Component,
props: {
story: 'set of buttons',
disabled: boolean('Disabled (disabled)', false),
small: boolean('Small (small)', false),
size: select('Button size (size)', sizes, 'default'),
iconDescription: text('Icon description (iconDescription)', 'Button icon')
}
story: "set of buttons",
disabled: boolean("Disabled (disabled)", false),
small: boolean("Small (small)", false),
size: select("Button size (size)", sizes, "default"),
iconDescription: text("Icon description (iconDescription)", "Button icon"),
},
});
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });