Merge pull request #27 from SG60/25-soundcloud-svelte-component

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sg60/sam-svelte-components",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"repository": {
 		"type": "git",
 		"url": "git://github.com/sg60/sam-svelte-components.git"
@@ -13,6 +13,7 @@
 		"build": "svelte-kit build",
 		"package": "svelte-kit package",
 		"preview": "svelte-kit preview",
+		"prepare": "svelte-kit sync",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",

src/lib/SoundCloud.svelte

@@ -0,0 +1,17 @@
+<script type="ts">
+	export let url: string;
+	export let title = 'SoundCloud Player';
+	export let height: 166 | 300 | 450 | 600 = 166;
+	export let color = '4f6cec';
+</script>
+
+<div>
+	<iframe
+		{title}
+		width="100%"
+		{height}
+		scrolling="no"
+		frameborder="no"
+		src="https://w.soundcloud.com/player/?url={url}&amp;color={color}&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"
+	/>
+</div>

src/stories/SoundCloud.stories.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+	import SoundCloud from '$lib/SoundCloud.svelte';
+</script>
+
+<Meta
+	title="SoundCloud Embed"
+	component={SoundCloud}
+	argTypes={{
+		// trackId: { control: 'text', defaultValue: '1202071039' },
+		title: { control: 'text' },
+		url: { control: 'text' },
+		height: { control: 'select', options: [166, 300, 450, 600] },
+		color: { control: 'text', defaultValue: '4f6cec' }
+	}}
+/>
+
+<Template let:args><SoundCloud {...args} /></Template>
+
+<Story name="default" args={{ url: 'https://soundcloud.com/samgreening/frames' }} />
+
+<Story
+	name="playlist"
+	args={{ url: 'https://soundcloud.com/samgreening/sets/edward-thomas-songs', height: 300 }}
+/>