refactor: Tag, TagSkeleton

- use $$restProps API
- add button to filterable variant

src/components/Tag/Tag.Skeleton.svelte

@@ -1,15 +1,8 @@
-<script>
-  let className = undefined;
-  export { className as class };
-  export let style = undefined;
-
-  import { cx } from '../../lib';
-</script>
-
 <span
+  class:bx--tag={true}
+  class:bx--skeleton={true}
+  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
+  on:mouseleave />
-  class={cx('--tag', '--skeleton', className)}
-  {style} />

src/components/Tag/Tag.Story.svelte

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

src/components/Tag/Tag.stories.js

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

src/components/Tag/Tag.svelte

@@ -1,28 +1,47 @@
 <script>
-  let className = undefined;
-  export { className as class };
-  export let disabled = false;
-  export let filter = false;
-  export let style = undefined;
-  export let title = 'Clear filter';
   export let type = undefined;
+  export let filter = false;
+  export let title = "Clear filter";
+  export let disabled = false;
+  export let id = "ccs-" + Math.random().toString(36);
 
-  import Close16 from 'carbon-icons-svelte/lib/Close16';
+  import Close16 from "carbon-icons-svelte/lib/Close16";
-  import { cx } from '../../lib';
-  import { TYPES } from './constants';
 </script>
 
-<span
+{#if filter}
-  tabindex={filter ? '0' : undefined}
+  <div
-  title={filter ? title : undefined}
+    aria-label={title}
+    class:bx--tag={true}
+    class:bx--tag--disabled={disabled}
+    class:bx--tag--filter={filter}
+    class="bx--tag--{type}"
+    {id}
+    {...$$restProps}>
+    <slot 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
+    on:mouseleave>
-  class={cx('--tag', type && `--tag--${type}`, disabled && '--tag--disabled', filter && '--tag--filter', className)}
+    <slot />
-  {style}>
+  </span>
-  <slot>{TYPES[type]}</slot>
+{/if}
-  {#if filter}
-    <Close16 aria-label={title} />
-  {/if}
-</span>

src/components/Tag/constants.js

@@ -1,12 +0,0 @@
-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

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