feat: initial commit

src/components/Button/Button.stories.js

@@ -0,0 +1,64 @@
+import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
+import Component from './Button.Story.svelte';
+
+export default { title: 'Button', decorators: [withKnobs] };
+
+// TODO: add selectable renderIcon for Default, Icon-only stories
+
+const kinds = {
+  'Primary button (primary)': 'primary',
+  'Secondary button (secondary)': 'secondary',
+  'Danger button (danger)': 'danger',
+  'Ghost button (ghost)': 'ghost'
+};
+
+const sizes = {
+  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)
+  }
+});
+
+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'),
+    tooltipPosition: select(
+      'Tooltip position (tooltipPosition)',
+      ['top', 'right', 'bottom', 'left'],
+      'bottom'
+    ),
+    tooltipAlignment: select(
+      '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')
+  }
+});
+
+export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });