Merge branch 'master' into skeleton-placeholder

README.md

@@ -1,10 +1,9 @@
 # carbon-components-svelte
 
+> 🚧🚧🚧 UNDER CONSTRUCTION
 > Svelte implementation of the Carbon Design System
 
-[🚧🚧🚧 UNDER CONSTRUCTION]
+## [Storybook](https://ibm.github.io/carbon-components-svelte)
-
-## [Docs](https://ibm.github.io/carbon-components-svelte)
 
 ## Getting Started
 
@@ -33,6 +32,8 @@ Currently, the following components are supported:
 - Link
 - ListItem
 - OrderedList
+- Search
+- SearchSkeleton
 - SkeletonPlaceholder
 - SkeletonText
 - Tag

src/components/Search/Search.Skeleton.svelte

@@ -0,0 +1,15 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let small = false;
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--skeleton', !small && '--search--xl', small && '--search--sm', className);
+</script>
+
+<div {...props} class={_class}>
+  <span class={cx('--label')} />
+  <div class={cx('--search-input')} />
+</div>

src/components/Search/Search.Story.svelte

@@ -0,0 +1,19 @@
+<script>
+  export let story = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Search from './Search.svelte';
+  import SearchSkeleton from './Search.Skeleton.svelte';
+
+  let value = '';
+</script>
+
+<Layout>
+  <div>
+    {#if story === 'skeleton'}
+      <SearchSkeleton />
+    {:else}
+      <Search {...$$props} bind:value />
+    {/if}
+  </div>
+</Layout>

src/components/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'
+    ),
+    placeHolderText: text('Placeholder text (placeHolderText)', 'Search')
+  }
+});
+
+export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

src/components/Search/Search.svelte

@@ -0,0 +1,65 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let value = '';
+  export let type = 'text';
+  export let small = false;
+  export let placeHolderText = '';
+  export let labelText = '';
+  export let closeButtonLabelText = 'Clear search input';
+  export let size = small ? 'sm' : 'xl';
+  export let light = false;
+  export let id = Math.random();
+  export let props = {};
+
+  import { createEventDispatcher } from 'svelte';
+  import Search16 from 'carbon-icons-svelte/lib/Search16';
+  import Close16 from 'carbon-icons-svelte/lib/Close16';
+  import Close20 from 'carbon-icons-svelte/lib/Close20';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+  const _class = cx('--search', size && `--search--${size}`, light && '--search--light', className);
+
+  let inputRef = undefined;
+
+  function clearInput() {
+    value = '';
+
+    dispatch('change', value);
+
+    if (inputRef) {
+      inputRef.focus();
+    }
+  }
+
+  $: hasContent = value !== '';
+  $: _clearClass = cx('--search-close', !hasContent && '--search-close--hidden');
+</script>
+
+<div class={_class}>
+  <Search16 class={cx('--search-magnifier')} />
+  <label for={id} class={cx('--label')}>{labelText}</label>
+  <input
+    {...props}
+    bind:this={inputRef}
+    role="searchbox"
+    class={cx('--search-input')}
+    placeholder={placeHolderText}
+    {type}
+    {id}
+    {value}
+    on:change
+    on:input
+    on:input={event => {
+      value = event.target.value;
+    }} />
+  <button
+    type="button"
+    class={_clearClass}
+    on:click
+    on:click={clearInput}
+    aria-label={closeButtonLabelText}>
+    <svelte:component this={size === 'xl' ? Close20 : Close16} />
+  </button>
+</div>

src/components/Search/index.js

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

src/index.js

@@ -10,6 +10,7 @@ import Loading from './components/Loading';
 import Link from './components/Link';
 import ListItem from './components/ListItem';
 import OrderedList from './components/OrderedList';
+import Search, { SearchSkeleton } from './components/Search';
 import SkeletonPlaceholder from './components/SkeletonPlaceholder';
 import SkeletonText from './components/SkeletonText';
 import Tag, { TagSkeleton } from './components/Tag';
@@ -40,6 +41,8 @@ export {
   Link,
   ListItem,
   OrderedList,
+  Search,
+  SearchSkeleton,
   SkeletonPlaceholder,
   SkeletonText,
   Tag,