feat(search): introduce search box (#97)

Refs #46.

src/components/search/search-story-angular.ts

@@ -0,0 +1,46 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { storiesOf } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs/angular';
+import { SEARCH_SIZE } from './search';
+
+const sizes = {
+  [`Small size (${SEARCH_SIZE.SMALL})`]: SEARCH_SIZE.SMALL,
+  [`Regular size (${SEARCH_SIZE.REGULAR})`]: SEARCH_SIZE.REGULAR,
+};
+
+const createProps = () => ({
+  closeButtonAssistiveText: text('The label text for the close button (closeButtonAssistiveText)', 'Clear search input'),
+  disabled: boolean('Disabled (disabled)', false),
+  light: boolean('Light variant (light)', false),
+  labelText: text('Label text (labelText)', 'Search'),
+  name: text('Name (name)', ''),
+  placeholder: text('Placeholder text (placeholder)', ''),
+  size: select('Searh size (size)', sizes, SEARCH_SIZE.REGULAR),
+  type: text('The type of the <input> (type)', ''),
+  value: text('Value (value)', ''),
+  onAfterInput: action('bx-search-input'),
+});
+
+storiesOf('Search', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => ({
+    template: `
+      <bx-search
+        [closeButtonAssistiveText]="closeButtonAssistiveText"
+        [disabled]="disabled"
+        [light]="light"
+        [labelText]="labelText"
+        [name]="name"
+        [placeholder]="placeholder"
+        [size]="size"
+        [type]="type"
+        [value]="value"
+        (bx-search-input)="onAfterInput($event)"
+      ></bx-search>
+    `,
+    props: createProps(),
+    moduleMetadata: {
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    },
+  }));

src/components/search/search-story-react.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import createReactCustomElementType, { booleanSerializer } from '../../globals/wrappers/createReactCustomElementType';
+import { SEARCH_SIZE } from './search';
+
+const BXSearch = createReactCustomElementType('bx-search', {
+  disabled: {
+    serialize: booleanSerializer,
+  },
+  light: {
+    serialize: booleanSerializer,
+  },
+  onAfterInput: {
+    event: 'bx-search-input',
+  },
+});
+
+const sizes = {
+  [`Small size (${SEARCH_SIZE.SMALL})`]: SEARCH_SIZE.SMALL,
+  [`Regular size (${SEARCH_SIZE.REGULAR})`]: SEARCH_SIZE.REGULAR,
+};
+
+const createProps = () => ({
+  closeButtonAssistiveText: text('The label text for the close button (close-button-assistive-text)', 'Clear search input'),
+  disabled: boolean('Disabled (disabled)', false),
+  light: boolean('Light variant (light)', false),
+  labelText: text('Label text (labelText)', 'Search'),
+  name: text('Name (name)', ''),
+  placeholder: text('Placeholder text (placeholder)', ''),
+  size: select('Searh size (size)', sizes, SEARCH_SIZE.REGULAR),
+  type: text('The type of the <input> (type)', ''),
+  value: text('Value (value)', ''),
+  onAfterInput: action('bx-search-input'),
+});
+
+storiesOf('Search', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => {
+    const {
+      closeButtonAssistiveText,
+      disabled,
+      light,
+      labelText,
+      name,
+      placeholder,
+      size,
+      type,
+      value,
+      onAfterInput,
+    } = createProps();
+    return (
+      <BXSearch
+        closeButtonAssistiveText={closeButtonAssistiveText}
+        disabled={disabled}
+        light={light}
+        labelText={labelText}
+        name={name}
+        placeholder={placeholder}
+        size={size}
+        type={type}
+        value={value}
+        onAfterInput={onAfterInput}
+      />
+    );
+  });

src/components/search/search-story-vue.ts

@@ -0,0 +1,43 @@
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import createVueBindingsFromProps from '../../../.storybook/vue/create-vue-bindings-from-props';
+import { SEARCH_SIZE } from './search';
+
+const sizes = {
+  [`Small size (${SEARCH_SIZE.SMALL})`]: SEARCH_SIZE.SMALL,
+  [`Regular size (${SEARCH_SIZE.REGULAR})`]: SEARCH_SIZE.REGULAR,
+};
+
+const createProps = () => ({
+  closeButtonAssistiveText: text('The label text for the close button (close-button-assistive-text)', 'Clear search input'),
+  disabled: boolean('Disabled (disabled)', false),
+  light: boolean('Light variant (light)', false),
+  labelText: text('Label text (label-text)', 'Search'),
+  name: text('Name (name)', ''),
+  placeholder: text('Placeholder text (placeholder)', ''),
+  size: select('Searh size (size)', sizes, SEARCH_SIZE.REGULAR),
+  type: text('The type of the <input> (type)', ''),
+  value: text('Value (value)', ''),
+  onAfterInput: action('bx-search-input'),
+});
+
+storiesOf('Search', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => ({
+    template: `
+      <bx-search
+        :close-button-assistive-text="closeButtonAssistiveText"
+        :disabled="disabled"
+        :light="light"
+        :label-text="labelText"
+        :name="name"
+        :placeholder="placeholder"
+        :size="size"
+        :type="type"
+        :value="value"
+        @bx-search-input="onAfterInput"
+      ></bx-search>
+    `,
+    ...createVueBindingsFromProps(createProps()),
+  }));

src/components/search/search-story.ts

@@ -0,0 +1,55 @@
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-element';
+import { storiesOf } from '@storybook/polymer';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import { SEARCH_SIZE } from './search';
+
+const sizes = {
+  [`Small size (${SEARCH_SIZE.SMALL})`]: SEARCH_SIZE.SMALL,
+  [`Regular size (${SEARCH_SIZE.REGULAR})`]: SEARCH_SIZE.REGULAR,
+};
+
+const createProps = () => ({
+  closeButtonAssistiveText: text('The label text for the close button (close-button-assistive-text)', 'Clear search input'),
+  disabled: boolean('Disabled (disabled)', false),
+  light: boolean('Light variant (light)', false),
+  labelText: text('Label text (label-text)', 'Search'),
+  name: text('Name (name)', ''),
+  placeholder: text('Placeholder text (placeholder)', ''),
+  size: select('Searh size (size)', sizes, SEARCH_SIZE.REGULAR),
+  type: text('The type of the <input> (type)', ''),
+  value: text('Value (value)', ''),
+  onAfterInput: action('bx-search-input'),
+});
+
+storiesOf('Search', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => {
+    const {
+      closeButtonAssistiveText,
+      disabled,
+      light,
+      labelText,
+      name,
+      placeholder,
+      size,
+      type,
+      value,
+      onAfterInput,
+    } = createProps();
+    return html`
+      <bx-search
+        close-button-assistive-text="${ifDefined(!closeButtonAssistiveText ? undefined : closeButtonAssistiveText)}"
+        ?disabled="${disabled}"
+        ?light="${light}"
+        label-text="${labelText}"
+        name="${ifDefined(!name ? undefined : name)}"
+        placeholder="${ifDefined(!placeholder ? undefined : placeholder)}"
+        size="${size}"
+        type="${ifDefined(!type ? undefined : type)}"
+        value="${ifDefined(!value ? undefined : value)}"
+        @bx-search-input="${onAfterInput}"
+      ></bx-search>
+    `;
+  });

src/components/search/search.scss

@@ -0,0 +1,19 @@
+$css--plex: true !default;
+
+@import 'carbon-components/scss/components/form/form';
+@import 'carbon-components/scss/components/search/search';
+
+:host(#{$prefix}-search) {
+  @extend .#{$prefix}--search;
+  @extend .#{$prefix}--search--xl;
+
+  outline: none;
+}
+
+:host(#{$prefix}-search[size='small']) {
+  @extend .#{$prefix}--search--sm;
+}
+
+:host(#{$prefix}-search[light]) {
+  @extend .#{$prefix}--search--light;
+}