feat: initial commit

src/components/Tag/Tag.Skeleton.svelte

@@ -0,0 +1,5 @@
+<script>
+  import { cx } from '../../lib';
+</script>
+
+<span class={cx('--tag', '--skeleton')} />

src/components/Tag/Tag.Story.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let story = undefined;
+  export let type = undefined;
+  export let disabled = undefined;
+  export let filter = undefined;
+  export let slot = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Tag from './Tag.svelte';
+  import TagSkeleton from './Tag.Skeleton.svelte';
+</script>
+
+<Layout>
+  <div>
+    {#if story === 'filter'}
+      <Tag {filter}>{slot}</Tag>
+    {:else if story === 'skeleton'}
+      <TagSkeleton />
+    {:else}
+      <Tag {disabled} {type}>{slot}</Tag>
+    {/if}
+  </div>
+</Layout>

src/components/Tag/Tag.stories.js

@@ -0,0 +1,29 @@
+import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
+import Component from './Tag.Story.svelte';
+import { TYPES } from './constants';
+
+export default { title: 'Tag', decorators: [withKnobs] };
+
+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 not a tag')
+  }
+});
+
+export const Filter = () => ({
+  Component,
+  props: {
+    story: 'filter',
+    filter: true,
+    slot: text('Content ($$slot)', 'This is not a tag')
+  }
+});
+
+export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

src/components/Tag/Tag.svelte

@@ -0,0 +1,40 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let type = undefined;
+  export let disabled = false;
+  export let filter = false;
+  export let title = 'Clear filter';
+  export let props = {};
+
+  import Close16 from 'carbon-icons-svelte/lib/Close16';
+  import { cx } from '../../lib';
+  import { TYPES } from './constants';
+
+  const _class = cx(
+    '--tag',
+    type && `--tag--${type}`,
+    disabled && '--tag--disabled',
+    filter && '--tag--filter',
+    className
+  );
+</script>
+
+{#if filter}
+  <span
+    {...props}
+    tabindex="0"
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    class={_class}
+    {title}>
+    <slot>{TYPES[type]}</slot>
+    <Close16 aria-label={title} />
+  </span>
+{:else}
+  <span {...props} on:click on:mouseover on:mouseenter on:mouseleave class={_class}>
+    <slot>{TYPES[type]}</slot>
+  </span>
+{/if}

src/components/Tag/constants.js

@@ -0,0 +1,12 @@
+export 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'
+};

src/components/Tag/index.js

@@ -0,0 +1,4 @@
+import Tag from './Tag.svelte';
+
+export default Tag;
+export { default as TagSkeleton } from './Tag.Skeleton.svelte';