chore: lift components folder

src/Button/Button.Skeleton.svelte

@@ -0,0 +1,30 @@
+<script>
+  export let href = undefined;
+  export let small = false;
+</script>
+
+{#if href}
+  <a
+    {href}
+    role="button"
+    class:bx--skeleton={true}
+    class:bx--btn={true}
+    class:bx--btn--sm={small}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    {''}
+  </a>
+{:else}
+  <div
+    class:bx--skeleton={true}
+    class:bx--btn={true}
+    class:bx--btn--sm={small}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{/if}

src/Button/Button.Story.svelte

@@ -0,0 +1,70 @@
+<script>
+  export let story = undefined;
+
+  import Button from "./Button.svelte";
+  import ButtonSkeleton from "./Button.Skeleton.svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+
+  const {
+    kind,
+    disabled,
+    size,
+    iconDescription,
+    small,
+    tooltipPosition,
+    tooltipAlignment
+  } = $$props;
+
+  const regularProps = {
+    kind,
+    disabled,
+    size,
+    iconDescription,
+    small
+  };
+
+  const iconOnlyProps = {
+    hasIconOnly: true,
+    kind,
+    disabled,
+    size,
+    icon: Add16,
+    iconDescription,
+    tooltipPosition,
+    tooltipAlignment
+  };
+
+  const setProps = { disabled, small, size, iconDescription };
+</script>
+
+<div>
+  {#if story === 'skeleton'}
+    <ButtonSkeleton />
+    &nbsp;
+    <ButtonSkeleton href="#" />
+    &nbsp;
+    <ButtonSkeleton small />
+  {:else if story === 'inline'}
+    <Button />
+  {:else if story === 'icon-only buttons'}
+    <Button {...iconOnlyProps} />
+  {:else if story === 'set of buttons'}
+    <div class="bx--btn-set">
+      <Button kind="secondary" {...setProps}>Secondary button</Button>
+      <Button kind="primary" {...setProps}>Primary button</Button>
+    </div>
+  {:else}
+    <Button {...regularProps}>Button</Button>
+    &nbsp;
+    <Button {...regularProps} href="#">Link</Button>
+    &nbsp;
+    <Button {...regularProps} as let:props>
+      <p {...props}>Element</p>
+    </Button>
+    &nbsp;
+    <Button {...regularProps} as let:props>
+      <!-- svelte-ignore a11y-missing-attribute -->
+      <a {...props}>Custom component</a>
+    </Button>
+  {/if}
+</div>

src/Button/Button.stories.js

@@ -0,0 +1,62 @@
+import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Button.Story.svelte";
+
+export default { title: "Button", decorators: [withKnobs] };
+
+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" } });

src/Button/Button.svelte

@@ -0,0 +1,93 @@
+<script>
+  export let as = undefined;
+  export let disabled = false;
+  export let href = undefined;
+  export let icon = undefined;
+  export let iconDescription = undefined;
+  export let hasIconOnly = false;
+  export let kind = "primary";
+  export let size = "default";
+  export let tabindex = "0";
+  export let tooltipAlignment = undefined;
+  export let tooltipPosition = undefined;
+  export let type = "button";
+  export let ref = null;
+
+  import { getContext } from "svelte";
+
+  const ctx = getContext("ComposedModal");
+
+  $: if (ctx && ref) {
+    ctx.declareRef(ref);
+  }
+  $: buttonProps = {
+    role: "button",
+    type: href && !disabled ? undefined : type,
+    tabindex,
+    disabled,
+    href,
+    style: $$restProps.style,
+    class: [
+      "bx--btn",
+      size === "field" && "bx--btn--field",
+      size === "small" && "bx--btn--sm",
+      kind && `bx--btn--${kind}`,
+      disabled && "bx--btn--disabled",
+      hasIconOnly && "bx--btn--icon-only",
+      hasIconOnly && "bx--tooltip__trigger",
+      hasIconOnly && "bx--tooltip--a11y",
+      hasIconOnly && tooltipPosition && `bx--tooltip--${tooltipPosition}`,
+      hasIconOnly &&
+        tooltipAlignment &&
+        `bx--tooltip--align-${tooltipAlignment}`,
+      $$restProps.class
+    ]
+      .filter(Boolean)
+      .join(" ")
+  };
+</script>
+
+{#if as}
+  <slot props={buttonProps} />
+{:else if href && !disabled}
+  <!-- svelte-ignore a11y-missing-attribute -->
+  <a
+    bind:this={ref}
+    {...buttonProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    {#if hasIconOnly}
+      <span class:bx--assistive-text={true}>{iconDescription}</span>
+    {/if}
+    <slot />
+    {#if icon}
+      <svelte:component
+        this={icon}
+        aria-hidden="true"
+        class="bx--btn__icon"
+        aria-label={iconDescription} />
+    {/if}
+  </a>
+{:else}
+  <button
+    bind:this={ref}
+    {...buttonProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    {#if hasIconOnly}
+      <span class:bx--assistive-text={true}>{iconDescription}</span>
+    {/if}
+    <slot />
+    {#if icon}
+      <svelte:component
+        this={icon}
+        aria-hidden="true"
+        class="bx--btn__icon"
+        aria-label={iconDescription} />
+    {/if}
+  </button>
+{/if}

src/Button/index.js

@@ -0,0 +1,2 @@
+export { default as Button } from "./Button.svelte";
+export { default as ButtonSkeleton } from "./Button.Skeleton.svelte";