feat(components): add Tile

Supports #34

TODO:

- remove exported props
- compose TileGroup, SelectableTile, RadioTile components

src/components/Tile/Tile.stories.js

@@ -0,0 +1,64 @@
+import { withKnobs, select, number, boolean, text } from '@storybook/addon-knobs';
+import Component from './Tile.Story.svelte';
+
+export default { title: 'Tile', decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  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)
+  }
+});
+
+export const MultiSelect = () => ({
+  Component,
+  props: {
+    story: 'multi-select',
+    selected: boolean('Selected (selected)', false),
+    light: boolean('Light variant (light)', false)
+  }
+});
+
+const radioValues = {
+  None: '',
+  standard: 'standard',
+  'default-selected': 'default-selected',
+  selected: 'selected'
+};
+
+export const Selectable = () => ({
+  Component,
+  props: {
+    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: number('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'
+    ),
+    tileExpandedIconText: text(
+      'Collapsed icon text (tileExpandedIconText)',
+      'Interact to Collapse tile'
+    ),
+    light: boolean('Light variant (light)', false)
+  }
+});