feat: add tpk-search input

main point is to have an input specialized in search

doc-app/tests/integration/components/ember-input/prefabs/tpk-search-test.gts

@@ -0,0 +1,54 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import {  render, triggerEvent, waitFor } from '@ember/test-helpers';
+import { setupIntl } from 'ember-intl/test-support';
+import TpkSearch from '@triptyk/ember-input/components/prefabs/tpk-search';
+import tpkSearchPage from '../../../../pages/tpk-search';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+
+
+module(
+  'Integration | Component | Prefabs | tpk-search',
+  function (hooks) {
+    setupRenderingTest(hooks);
+    setupIntl(hooks, 'fr-fr');
+
+    async function renderComponent(assert: Assert) {
+      const mockSearch = () => {
+        return new Promise((res) => {
+          assert.step('search');
+          setTimeout(() => {
+            res(null);
+          }, 500);
+        });
+      };
+
+      await render(
+        <template>
+          <TpkSearch
+            @label="label"
+            @placeholder="Narrow the stack"
+            @onSearch={{mockSearch}}
+          />
+        </template>
+      );
+    }
+
+    test('render search icon by default. Switch to loader icon when onSearch is running', async function (assert) {
+      await renderComponent(assert);
+      await tpkSearchPage.input('search');
+      triggerEvent('form', 'submit')
+      await waitFor('.tpk-search-loader');
+      assert.dom('.tpk-search-loader').exists();
+      await waitFor('[data-test-tpk-search-icon]');
+      assert.dom('[data-test-tpk-search-icon]').exists();
+      assert.verifySteps(['search']);
+    });
+
+    test('Accessibility', async function (assert) {
+      assert.expect(0);
+      await renderComponent(assert);
+      await a11yAudit();
+    });
+  },
+);

doc-app/tests/pages/tpk-search.ts

@@ -0,0 +1,20 @@
+import {
+  clickable,
+  create,
+  fillable,
+  focusable,
+  triggerable,
+} from 'ember-cli-page-object';
+
+export default create({
+  scope: '.tpk-search',
+  input: fillable('.tpk-search-input'),
+  focus: focusable('.tpk-search-input'),
+  button: create({
+    scope: '.tpk-search-button',
+    click: clickable(),
+    enter: triggerable('keydown', undefined, {
+      eventProperties: { key: 'Enter' },
+    }),
+  }),
+});

packages/ember-input/package.json

@@ -122,6 +122,7 @@
     "app-js": {
       "./components/base.js": "./dist/_app_/components/base.js",
       "./components/prefabs/tpk-prefab-button.js": "./dist/_app_/components/prefabs/tpk-prefab-button.js",
+      "./components/prefabs/tpk-search.js": "./dist/_app_/components/prefabs/tpk-search.js",
       "./components/prefabs/tpk-toggle.js": "./dist/_app_/components/prefabs/tpk-toggle.js",
       "./components/tpk-button.js": "./dist/_app_/components/tpk-button.js",
       "./components/tpk-checkbox-input.js": "./dist/_app_/components/tpk-checkbox-input.js",

packages/ember-input/src/app.css

@@ -1,2 +1,3 @@
 @import url('./components/prefabs/tpk-toggle.css');
+@import url('./components/prefabs/tpk-search.css');
 @import url('./components/prefabs/tpk-prefab-button.css');

packages/ember-input/src/components/prefabs/tpk-search.css

@@ -0,0 +1,50 @@
+.tpk-search-label {
+  @apply flex items-center input;
+}
+
+.tpk-search-input {
+  @apply w-full;
+}
+
+.tpk-search-icon {
+  @apply p-1;
+}
+
+.loader {
+  position: relative;
+  height: 20px;
+  width: 20px;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  animation: around 5.4s infinite;
+}
+
+@keyframes around {
+  0% {
+    transform: rotate(0deg)
+  }
+  100% {
+    transform: rotate(360deg)
+  }
+}
+
+.loader::after, .loader::before {
+  content: "";
+  background: white;
+  position: absolute;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  border-width: 2px;
+  border-color: #333 #333 transparent transparent;
+  border-style: solid;
+  border-radius: 20px;
+  box-sizing: border-box;
+  animation: around 0.7s ease-in-out infinite;
+}
+
+.loader::after {
+  animation: around 0.7s ease-in-out 0.1s infinite;
+  background: transparent;
+}

packages/ember-input/src/components/prefabs/tpk-search.gts

@@ -0,0 +1,67 @@
+import type { MergeDeep } from 'type-fest';
+import type { BaseUIComponentArgs } from '../base';
+import Component from '@glimmer/component';
+import { task } from 'ember-concurrency';
+import { on } from '@ember/modifier';
+import TpkInputComponent from '../tpk-input.gts';
+
+export type TpkSearchPrefabSignature = {
+  Args: MergeDeep<
+    BaseUIComponentArgs['Args'],
+    {
+      placeholder?: string;
+      label?: string;
+      onSearch: (value: string, e: Event) => unknown;
+    }
+  >;
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+};
+
+export default class TpkSearchPrefabComponent extends Component<TpkSearchPrefabSignature> {
+  performSearch = task(this, { drop: true }, async (value: string, e: Event) => {
+    e.preventDefault();
+    return this.args.onSearch(value, e);
+  });
+
+  submitSearch = (e: Event) => {
+    e.preventDefault();
+    const value = (e.target as HTMLInputElement).value;
+    this.performSearch.perform(value, e);
+  };
+
+  get labelOrDefault () {
+    return this.args.label ?? '';
+  }
+
+  <template>
+    <form {{ on 'submit' this.submitSearch }}>
+      <TpkInputComponent 
+        @label={{this.labelOrDefault}}
+        @placeholder={{@placeholder}}
+        @type="search"
+      as |C|>
+        <div class="tpk-search" data-test-tpk-prefab-search-container ...attributes>
+          <C.Label class="tpk-search-label">
+            {{#if this.performSearch.isRunning}}
+              <div class="tpk-search-button">
+                <i class="tpk-search-loader"></i>
+              </div>
+            {{else}}
+              <img
+                src='/assets/icons/search.svg'
+                data-test-tpk-search-icon
+                alt='magnyfying glass'
+                class='tpk-search-button'
+              />
+            {{/if}}
+            <C.Input class="tpk-search-input" />
+          </C.Label>
+        </div>
+      </TpkInputComponent>
+    </form>
+  </template>
+}
+

packages/ember-input/src/components/prefabs/tpk-toggle.css

@@ -3,7 +3,7 @@
 }
 
 .tpk-toggle-label-container {
-  @apply label cursor-pointer;
+  @apply cursor-pointer label;
 }
 
 .tpk-toggle-label {