chore: lift components folder

src/Search/Search.Skeleton.svelte

@@ -0,0 +1,16 @@
+<script>
+  export let small = false;
+</script>
+
+<div
+  class:bx--skeleton={true}
+  class:bx--search--xl={!small}
+  class:bx--search--sm={small}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <span class:bx--label={true} />
+  <div class:bx--search-input={true} />
+</div>

src/Search/Search.Story.svelte

@@ -0,0 +1,24 @@
+<script>
+  export let story = undefined;
+
+  import Search from "./Search.svelte";
+  import SearchSkeleton from "./Search.Skeleton.svelte";
+
+  let value = "";
+
+  $: {
+    if (!value.length) {
+      console.log("cleared");
+    } else {
+      console.log("value", value);
+    }
+  }
+</script>
+
+<div>
+  {#if story === 'skeleton'}
+    <SearchSkeleton />
+  {:else}
+    <Search {...$$props} bind:value />
+  {/if}
+</div>

src/Search/Search.stories.js

@@ -0,0 +1,27 @@
+import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
+import Component from "./Search.Story.svelte";
+
+export default { title: "Search", decorators: [withKnobs] };
+
+const sizes = {
+  "Regular size (xl)": "xl",
+  "Large size (lg)": "lg",
+  "Small size (sm)": "sm",
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    size: select("Size (size)", sizes, "xl"),
+    light: boolean("Light variant (light)", false),
+    name: text("Form item name (name)", ""),
+    labelText: text("Label text (labelText)", "Search"),
+    closeButtonLabelText: text(
+      "The label text for the close button (closeButtonLabelText)",
+      "Clear search input"
+    ),
+    placeholder: text("Placeholder text (placeholder)", "Search"),
+  },
+});
+
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

src/Search/Search.svelte

@@ -0,0 +1,67 @@
+<script>
+  export let autocomplete = "off";
+  export let autofocus = false;
+  export let closeButtonLabelText = "Clear search input";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let type = "text";
+  export let value = "";
+  export let labelText = "";
+  export let placeholder = "Search...";
+  export let skeleton = false;
+  export let light = false;
+  export let small = false;
+  export let size = small ? "sm" : "xl";
+  export let ref = null;
+
+  import Close16 from "carbon-icons-svelte/lib/Close16";
+  import Close20 from "carbon-icons-svelte/lib/Close20";
+  import Search16 from "carbon-icons-svelte/lib/Search16";
+  import SearchSkeleton from "./Search.Skeleton.svelte";
+</script>
+
+{#if skeleton}
+  <SearchSkeleton
+    {small}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{:else}
+  <div
+    class:bx--search={true}
+    class="bx--search--{size}"
+    class:bx--search--light={light}
+    {...$$restProps}>
+    <Search16 class="bx--search-magnifier" />
+    <label class:bx--label={true} for={id}>{labelText}</label>
+    <!-- svelte-ignore a11y-autofocus -->
+    <input
+      bind:this={ref}
+      role="searchbox"
+      class:bx--search-input={true}
+      {autofocus}
+      {autocomplete}
+      {id}
+      {placeholder}
+      {type}
+      {value}
+      on:change
+      on:input
+      on:input={({ target }) => {
+        value = target.value;
+      }} />
+    <button
+      type="button"
+      aria-label={closeButtonLabelText}
+      class:bx--search-close={true}
+      class:bx--search-close--hidden={value === ''}
+      on:click
+      on:click={() => {
+        value = '';
+        ref.focus();
+      }}>
+      <svelte:component this={size === 'xl' ? Close20 : Close16} />
+    </button>
+  </div>
+{/if}

src/Search/index.js

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