Merge pull request #480 from upfluence/olympelespagnon/vel-5048-create-a-dedicated-osssearchfield-component

Create a dedicated OSS::SearchField component

Author: olxmpe

addon/components/o-s-s/search-field.hbs

@@ -0,0 +1,10 @@
+<OSS::InputContainer @value={{@value}} @placeholder={{this.placeholder}} @onChange={{this.onChange}} ...attributes>
+  <:prefix>
+    <OSS::Icon @icon="fa-search" class="font-color-gray-500" />
+  </:prefix>
+  <:suffix>
+    {{#if (gt @value.length 0)}}
+      <OSS::Icon @icon="fa-times" class="font-color-gray-500" role="button" {{on "click" this.onClearSearch}} />
+    {{/if}}
+  </:suffix>
+</OSS::InputContainer>

addon/components/o-s-s/search-field.stories.js

@@ -0,0 +1,64 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/OSS::SearchField',
+  component: 'search-field',
+  argTypes: {
+    value: {
+      type: { required: true },
+      description: 'Value of the input',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    placeholder: {
+      description: 'Placeholder of the input',
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: { summary: 'undefined' }
+      },
+      control: { type: 'text' }
+    },
+    onChange: {
+      type: { required: true },
+      description: 'Method called every time the input is updated',
+      table: {
+        category: 'Actions',
+        type: {
+          summary: 'onChange(value: string): void'
+        }
+      },
+      control: { type: null }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The OSS version of the search-field component. This component encapsulates search field input and allows user to reset the search.'
+      }
+    }
+  }
+};
+
+const defaultArgs = {
+  value: 'John',
+  placeholder: 'My placeholder',
+  onChange: action('onChange')
+};
+
+const Template = (args) => ({
+  template: hbs`
+      <OSS::SearchField @value={{this.value}} @placeholder={{this.placeholder}} @onChange={{this.onChange}} />
+  `,
+  context: args
+});
+export const BasicUsage = Template.bind({});
+BasicUsage.args = defaultArgs;

addon/components/o-s-s/search-field.ts

@@ -0,0 +1,28 @@
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+import type IntlService from 'ember-intl/services/intl';
+
+interface OSSSearchFieldArgs {
+  value: string;
+  placeholder?: string;
+  onChange(value: string): void;
+}
+
+export default class OSSSearchFieldComponent extends Component<OSSSearchFieldArgs> {
+  @service declare intl: IntlService;
+
+  get placeholder(): string {
+    return this.args.placeholder ?? this.intl.t('oss-components.search_field.placeholder');
+  }
+
+  @action
+  onClearSearch(): void {
+    this.args.onChange('');
+  }
+
+  @action
+  onChange(value: string): void {
+    this.args.onChange(value);
+  }
+}

app/components/o-s-s/search-field.js

@@ -0,0 +1 @@
+export { default } from '@upfluence/oss-components/components/o-s-s/search-field';

tests/dummy/app/controllers/input.ts

@@ -7,6 +7,7 @@ import { countries, type CountryData } from '@upfluence/oss-components/utils/cou
 export default class Input extends Controller {
   @tracked shopUrl: string = '';
   @tracked inputValue: string = '';
+  @tracked searchFieldValue: string = '';
   @tracked textAreaValue: string = '42';
   @tracked superHeroes: string[] = ['Iron Man', 'Thor', 'Loki', 'Hulk'];
   @tracked items: { name: string; label: string }[] = [
@@ -121,4 +122,9 @@ export default class Input extends Controller {
     console.log('onCurrencyOnlyChange', currency);
     this.currencyOnly = currency;
   }
+
+  @action
+  onSearchFieldChange(value: string): void {
+    this.searchFieldValue = value;
+  }
 }

tests/dummy/app/templates/input.hbs

@@ -192,6 +192,17 @@
     </div>
   </div>
 
+  <div
+    class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
+  >
+    <div class="font-size-md font-weight-semibold">
+      Search Fields
+    </div>
+    <div class="fx-row fx-gap-px-24 fx-xalign-start">
+      <OSS::SearchField @value={{this.searchFieldValue}} @onChange={{this.onSearchFieldChange}} />
+    </div>
+  </div>
+
   <div
     class="fx-col fx-1 background-color-white border border-color-default border-radius-md padding-px-12 fx-gap-px-12"
   >

tests/integration/components/o-s-s/search-field-test.ts

@@ -0,0 +1,58 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click, typeIn } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+import sinon from 'sinon';
+
+module('Integration | Component | o-s-s/search-field', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  hooks.beforeEach(function () {
+    this.onChange = (value: string) => {
+      this.value = value;
+    };
+  });
+
+  test('Search Field component is rendered with a placeholder', async function (assert) {
+    this.placeholder = 'This is a placeholder';
+    this.value = '';
+
+    await render(
+      hbs`<OSS::SearchField @value={{this.value}} @placeholder={{this.placeholder}} @onChange={{this.onChange}} />`
+    );
+
+    assert.dom('input').hasAttribute('placeholder', 'This is a placeholder');
+  });
+
+  test('Input value is reset when the clear button is clicked', async function (assert) {
+    this.value = 'Test';
+
+    await render(hbs`<OSS::SearchField @value={{this.value}} @onChange={{this.onChange}} />`);
+
+    assert.dom('[role="button"]').exists();
+
+    await click('[role="button"]');
+
+    assert.strictEqual(this.value, '');
+  });
+
+  test('onChange function is triggered on input change', async function (assert) {
+    this.value = '';
+    this.onChange = sinon.stub();
+
+    await render(hbs`<OSS::SearchField @value={{this.value}} @onChange={{this.onChange}} />`);
+    await typeIn('input', 'Test', { delay: 0 });
+
+    assert.true(this.onChange.lastCall.calledWith('Test'));
+  });
+
+  test('Clear button is not displayed when the input is empty', async function (assert) {
+    this.value = '';
+
+    await render(hbs`<OSS::SearchField @value={{this.value}} @onChange={{this.onChange}} />`);
+
+    assert.dom('[role="button"]').doesNotExist();
+  });
+});

translations/en-us.yaml

@@ -72,4 +72,5 @@ oss-components:
       lock_tooltip: Reveal email
     removable_text:
       remove_tooltip: Remove
-
+  search_field:
+    placeholder: Search