feat: button prefab

doc-app/app/controllers/docs/ember-input/prefabs/button.ts

@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from 'tracked-built-ins';
+
+export default class DocsTpkPrefabButtonController extends Controller {
+  @tracked counter = 0;
+
+  @action
+  async incrementCounter() {
+    this.counter++;    
+  }
+}

doc-app/app/router.ts

@@ -22,6 +22,7 @@ Router.map(function (this: RouterDSL) {
     this.route('ember-input', function () {
       this.route('installation');
       this.route('prefabs', function () {
+        this.route('button')
         this.route('toggle');
       });
       this.route('input');

doc-app/app/templates/docs.hbs

@@ -122,6 +122,7 @@
     {{! input section }}
     <nav.section @label="Ember Input" />
     <nav.item @label="Install" @route="docs.ember-input.installation" />
+    <nav.item @label="Prefab-button" @route="docs.ember-input.prefabs.button" />
     <nav.item @label="Toggle" @route="docs.ember-input.prefabs.toggle" />
     <nav.item @label="Button" @route="docs.ember-input.button" />
     <nav.item @label="Checkbox" @route="docs.ember-input.checkbox" />

doc-app/app/templates/docs/ember-input/prefabs/button.md

@@ -0,0 +1,27 @@
+# Button
+
+A button. This is a simple wrapper around the `input` element with `type="button"`.
+
+<DocsDemo as |demo|>
+  <demo.example @name="tpk-button.hbs">
+    <div class="pb-4">
+      <Prefabs::TpkPrefabButton @onClick={{this.incrementCounter}} @label="Button Enabled" />
+      <Prefabs::TpkPrefabButton @onClick={{this.incrementCounter}} @disabled=true @label="Button Disabled" />
+      </div>
+      <p>count = {{this.counter}}</p>
+  </demo.example>
+  <demo.snippet @name="tpk-button.hbs"/>
+</DocsDemo>
+
+## Mandatory properties
+
+- `@label`: The label for the button field.
+- `@onClick`: The action to be called when the button clicked. 
+
+## Optional properties
+
+- `@disabled`: Whether the button field is disabled.
+
+## Important
+
+- `class`: To create a custom class you must do it in a CSS file to override the button class

doc-app/app/templates/docs/ember-input/prefabs/toggle.md

@@ -3,10 +3,10 @@
 A toggle switch. This is a simple wrapper around the `input` element with `type="checkbox"`.
 
 <DocsDemo as |demo|>
-  <demo.example @name="tpk-checkbox.hbs">
+  <demo.example @name="tpk-toggle.hbs">
       <Prefabs::TpkToggle @checked={{true}} @label="Toggle Input" />
       <Prefabs::TpkToggle @checked={{true}} @disabled={{true}} @label="Toggle Disabled" />
   </demo.example>
-  <demo.snippet @name="tpk-checkbox.hbs"/>
+  <demo.snippet @name="tpk-toggle.hbs"/>
 </DocsDemo>
 

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

@@ -0,0 +1,48 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { setupIntl } from 'ember-intl/test-support';
+import { click, render } from '@ember/test-helpers';
+import TpkPrefabButton from '@triptyk/ember-input/components/prefabs/tpk-prefab-button';
+
+module(
+  'Integration | Component | Prefabs | tpk-button',
+  function (hooks) {
+    setupRenderingTest(hooks);
+    setupIntl(hooks, 'fr-fr');
+
+    let message = "before click"
+
+    async function renderComponent(onClick: () => void, disabled: boolean = false) {
+      await render( <template>
+        <TpkPrefabButton 
+          @label="labelButton"
+          @onClick={{onClick}}
+          @disabled={{disabled}}
+          />
+      </template>)
+    }
+    const onClick=()=> {
+      message = "after click"
+    }
+
+    test('Render toggle with default structure', async function (assert) {
+
+      await renderComponent(onClick);
+      assert.dom('[data-test-tpk-prefab-button-container]').exists();
+      assert.dom('[data-test-tpk-prefab-button-container]').hasText('labelButton');
+    });
+
+    test('Button is disabled', async function (assert) {
+      await renderComponent(onClick, true);
+      assert.dom('[data-test-tpk-prefab-button-container]').hasAttribute('disabled');
+
+    });
+
+    test('onClick is called', async function (assert) {
+      await renderComponent(onClick);
+      assert.strictEqual(message, "before click");
+      await click('[data-test-tpk-prefab-button-container]');
+      assert.strictEqual(message, "after click");
+    });
+  }
+)

packages/ember-input/package.json

@@ -121,6 +121,7 @@
     "main": "addon-main.cjs",
     "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-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 +1,2 @@
 @import url('./components/prefabs/tpk-toggle.css');
+@import url('./components/prefabs/tpk-prefab-button.css');

packages/ember-input/src/components/prefabs/tpk-prefab-button.css

@@ -0,0 +1,7 @@
+.tpk-button-container {
+  @apply btn btn-primary
+}
+
+.tpk-test {
+  @apply btn btn-warning
+}

packages/ember-input/src/components/prefabs/tpk-prefab-button.gts

@@ -0,0 +1,34 @@
+import type { MergeDeep } from "type-fest";
+import type { BaseUIComponentArgs } from "../base";
+import TpkButtonComponent from "../tpk-button.gts";
+import type { TOC } from "@ember/component/template-only";
+
+export type TpkButtonPrefabSignature = {
+  Args: MergeDeep<
+    BaseUIComponentArgs['Args'],
+    {
+      disabled?: boolean;
+      label: string;
+      onClick: (e: Event) => void | Promise<void>;
+    }
+  >;
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLElement;
+}
+
+const TpkButtonPrefabComponent: TOC<TpkButtonPrefabSignature> = <template>
+  <TpkButtonComponent 
+    @label={{@label}} 
+    @disabled={{@disabled}} 
+    @onClick={{@onClick}} 
+    class="tpk-button-container"
+    data-test-tpk-prefab-button-container 
+    ...attributes
+  >
+    {{@label}}
+  </TpkButtonComponent>
+</template>
+
+export default TpkButtonPrefabComponent;

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

@@ -3,7 +3,7 @@ import type { BaseUIComponentArgs } from '../base';
 import TpkCheckboxComponent from '../tpk-checkbox.gts';
 import type { TOC } from '@ember/component/template-only';
 
-export type TpkCheckboxPrefabSignature = {
+export type TpkTogglePrefabSignature = {
   Args: MergeDeep<
     BaseUIComponentArgs['Args'],
     {
@@ -18,7 +18,7 @@ export type TpkCheckboxPrefabSignature = {
   Element: HTMLDivElement;
 };
 
-const TpkCheckboxPrefabComponent: TOC<TpkCheckboxPrefabSignature> = <template>
+const TpkTogglePrefabComponent: TOC<TpkTogglePrefabSignature> = <template>
   <TpkCheckboxComponent @disabled={{@disabled}} @checked={{@checked}} @label={{@label}} @onChange={{@onChange}} as |C|>
     <div class="tpk-toggle-container" data-test-tpk-prefab-toggle-container ...attributes>
       <C.Label class="tpk-toggle-label-container">
@@ -29,4 +29,4 @@ const TpkCheckboxPrefabComponent: TOC<TpkCheckboxPrefabSignature> = <template>
   </TpkCheckboxComponent>
 </template>
 
-export default TpkCheckboxPrefabComponent;
+export default TpkTogglePrefabComponent;

packages/ember-input/src/components/tpk-button.gts

@@ -11,6 +11,8 @@ export type TpkButtonSignature = {
     BaseUIComponentArgs['Args'],
     {
       allowSpam?: boolean;
+      disabled?: boolean;
+      class?: string;
       onClick?: (e: Event) => void | Promise<void>;
     }
   >;
@@ -34,9 +36,14 @@ export default class TpkButtonComponent extends Component<TpkButtonSignature> {
     return this.args.onClick?.(e);
   });
 
+  get disabled() {
+    return this.args.disabled ?? false;
+  }
+
   <template>
     <button
       id={{this.guid}}
+      disabled={{this.disabled}}
       type='button'
       class='tpk-button'
       {{on 'click' (perform this.onClick)}}

packages/ember-input/src/template-registry.ts

@@ -15,6 +15,8 @@ import type TpkSelectOptionComponent from './components/tpk-select/option';
 import type TpkTextareaComponent from './components/tpk-textarea';
 import type TpkTextareaInputComponent from './components/tpk-textarea/input';
 import type tpkFocusTrap from './modifiers/focus-trap';
+import type TpkTogglePrefabComponent from './components/prefabs/tpk-toggle';
+import type TpkButtonPrefabComponent from './components/prefabs/tpk-prefab-button';
 
 export default interface Registry {
   'tpk-label': typeof TpkLabel;
@@ -50,4 +52,8 @@ export default interface Registry {
   'tpk-textarea': typeof TpkTextareaComponent;
   TpkTextarea: typeof TpkTextareaComponent;
   'focus-trap': typeof tpkFocusTrap;
+  TpkToggle: typeof TpkTogglePrefabComponent;
+  'tpk-toggle': typeof TpkTogglePrefabComponent;
+  TpkPrefabButton: typeof TpkButtonPrefabComponent;
+  'tpk-prefab-button': typeof TpkButtonPrefabComponent;
 }