feat(search): introduce API to control form interactions

adobe · Oct 7, 2019 · 42fac00 · 42fac00
1 parent 6f03b1a
commit 42fac00
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/packages/search/src/search.ts b/packages/search/src/search.ts
@@ -17,6 +17,7 @@ import {
     TemplateResult,
     property,
 } from 'lit-element';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
 import { Textfield } from '@spectrum-web-components/textfield';
 import '@spectrum-web-components/icon';
@@ -42,15 +43,36 @@ export class Search extends Textfield {
         ];
     }
 
+    @property()
+    public action?: string;
+
     @property()
     public label = 'Search';
 
+    @property()
+    public method?: 'GET' | 'POST' | 'dialog';
+
     @property()
     public placeholder = 'Search';
 
+    private handleSubmit(event: Event): void {
+        const applyDefault = this.dispatchEvent(
+            new Event('submit', {
+                cancelable: true,
+            })
+        );
+        if (!applyDefault) {
+            event.preventDefault();
+        }
+    }
+
     protected render(): TemplateResult {
         return html`
-            <form>
+            <form
+                action=${ifDefined(this.action)}
+                method=${ifDefined(this.method)}
+                @submit=${this.handleSubmit}
+            >
                 <sp-icons-medium></sp-icons-medium>
                 <sp-icon
                     id="icon"

diff --git a/packages/search/stories/search.stories.ts b/packages/search/stories/search.stories.ts
@@ -10,14 +10,22 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { storiesOf } from '@storybook/polymer';
+import { action } from '@storybook/addon-actions';
 import { html } from 'lit-html';
 
 import '../';
+import { Search } from '../';
 
 storiesOf('Search', module).add(
     'Default',
     () => html`
-        <sp-search></sp-search>
+        <sp-search
+            @submit=${(e: Event) => {
+                e.preventDefault();
+                const search = e.target as Search;
+                action(`Search: ${search.value}`)();
+            }}
+        ></sp-search>
         <sp-search disabled></sp-search>
     `
 );