chore: lift components folder

This commit is contained in:
Eric Liu 2020-07-19 09:06:08 -07:00
commit 2200b29b92
301 changed files with 57 additions and 76 deletions

View file

@ -0,0 +1,10 @@
<script>
import Link from "./Link.svelte";
$: ref = null;
$: ref && console.log(ref);
</script>
<div>
<Link {...$$props} bind:ref>Link</Link>
</div>

13
src/Link/Link.stories.js Normal file
View file

@ -0,0 +1,13 @@
import { withKnobs, boolean, text } from "@storybook/addon-knobs";
import Component from "./Link.Story.svelte";
export default { title: "Link", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
href: text("The link href (href)", "#"),
inline: boolean("Use the in-line variant (inline)", false),
disabled: boolean("Disabled (disabled)", false),
},
});

34
src/Link/Link.svelte Normal file
View file

@ -0,0 +1,34 @@
<script>
export let inline = false;
export let disabled = false;
export let ref = null;
</script>
{#if disabled}
<p
bind:this={ref}
class:bx--link={true}
class:bx--link--disabled={disabled}
class:bx--link--inline={inline}
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<slot />
</p>
{:else}
<!-- svelte-ignore a11y-missing-attribute -->
<a
bind:this={ref}
class:bx--link={true}
class:bx--link--disabled={disabled}
class:bx--link--inline={inline}
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<slot />
</a>
{/if}

1
src/Link/index.js Normal file
View file

@ -0,0 +1 @@
export { default as Link } from "./Link.svelte";