chore: lift components folder

src/Tag/Tag.Skeleton.svelte

@@ -0,0 +1,8 @@
+<span
+  class:bx--tag={true}
+  class:bx--skeleton={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave />

src/Tag/Tag.Story.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let disabled = undefined;
+  export let filter = undefined;
+  export let slot = undefined;
+  export let story = undefined;
+  export let type = undefined;
+
+  import Tag from "./Tag.svelte";
+  import TagSkeleton from "./Tag.Skeleton.svelte";
+</script>
+
+<div>
+  {#if story === 'filter'}
+    <Tag
+      {filter}
+      on:click={() => {
+        console.log('click');
+      }}>
+      {slot}
+    </Tag>
+  {:else if story === 'skeleton'}
+    <TagSkeleton />
+  {:else}
+    <Tag {disabled} {type} class="class">{slot}</Tag>
+  {/if}
+</div>

src/Tag/Tag.stories.js

@@ -0,0 +1,45 @@
+import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Tag.Story.svelte";
+
+export default { title: "Tag", decorators: [withKnobs] };
+
+const TYPES = {
+  red: "Red",
+  magenta: "Magenta",
+  purple: "Purple",
+  blue: "Blue",
+  cyan: "Cyan",
+  teal: "Teal",
+  green: "Green",
+  gray: "Gray",
+  "cool-gray": "Cool-Gray",
+  "warm-gray": "Warm-Gray",
+  "high-contrast": "High-Contrast",
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    type: select(
+      "Tag type (type)",
+      Object.keys(TYPES).reduce(
+        (items, item) => ({ ...items, [`${item} (${item})`]: item }),
+        {}
+      ),
+      "red"
+    ),
+    disabled: boolean("Disabled (disabled)", false),
+    slot: text("Content ($$slot)", "This is a tag"),
+  },
+});
+
+export const Filter = () => ({
+  Component,
+  props: {
+    story: "filter",
+    filter: true,
+    slot: text("Content ($$slot)", "This is a tag"),
+  },
+});
+
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

src/Tag/Tag.svelte

@@ -0,0 +1,47 @@
+<script>
+  export let type = undefined; // "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"
+  export let filter = false;
+  export let disabled = false;
+  export let title = "Clear filter";
+  export let id = "ccs-" + Math.random().toString(36);
+
+  import Close16 from "carbon-icons-svelte/lib/Close16";
+</script>
+
+{#if filter}
+  <div
+    aria-label={title}
+    class:bx--tag={true}
+    class:bx--tag--disabled={disabled}
+    class:bx--tag--filter={filter}
+    class="bx--tag--{type}"
+    {id}
+    {...$$restProps}>
+    <slot props={{ class: 'bx--tag__label' }}>
+      <span class:bx--tag__label={true}>{type}</span>
+    </slot>
+    <button
+      aria-labelledby={id}
+      class:bx--tag__close-icon={true}
+      {disabled}
+      {title}
+      on:click|stopPropagation
+      on:mouseover
+      on:mouseenter
+      on:mouseleave>
+      <Close16 />
+    </button>
+  </div>
+{:else}
+  <span
+    class:bx--tag={true}
+    class:bx--tag--disabled={disabled}
+    class="bx--tag--{type}"
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    <slot />
+  </span>
+{/if}

src/Tag/index.js

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