feat: toggle switch

doc-app/app/controllers/docs/ember-input-validation/prefabs/file.ts

@@ -6,7 +6,7 @@ import type { Owner } from '@ember/test-helpers/build-owner';
 
 export default class DocsEmberInputValidationPrefabsFileController extends Controller {
   changeset = new ImmerChangeset({
-    file: undefined,
+    file: new File([], 'file.txt'),
     disabled: '',
     error: '',
   });

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

@@ -0,0 +1,3 @@
+import Controller from "@ember/controller";
+
+export default class extends Controller {}

doc-app/app/router.ts

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

doc-app/app/styles/app.css

@@ -4,6 +4,7 @@
 @import url("@eonasdan/tempus-dominus/dist/css/tempus-dominus.css");
 @import url("ember-power-select/vendor/ember-power-select.css");
 @import url("@triptyk/ember-input-validation/dist/app.css");
+@import url("@triptyk/ember-input/dist/app.css");
 @import url("ember-input-validation/form.css");
 
 .next,

doc-app/app/templates/docs.hbs

@@ -14,7 +14,30 @@
     <nav.item @label="Table generic" @route="docs.ember-ui.table-generic" />
 
     {{! prefab section }}
-    <nav.section @label="Ember Input Validation Prefabs" />
+
+    {{! validation section }}
+    {{!-- <nav.section @label="Ember Input Validation" />
+    <nav.item
+      @label="Install"
+      @route="docs.ember-input-validation.installation"
+    />
+    <nav.item @label="Checkbox" @route="docs.ember-input-validation.checkbox" />
+    <nav.item
+      @label="Datepicker"
+      @route="docs.ember-input-validation.datepicker"
+    />
+    <nav.item @label="File" @route="docs.ember-input-validation.file" />
+    <nav.item @label="Input" @route="docs.ember-input-validation.input" />
+    <nav.item
+      @label="Radio group"
+      @route="docs.ember-input-validation.radio-group"
+    />
+    <nav.item @label="Select" @route="docs.ember-input-validation.select" />
+    <nav.item @label="Textarea" @route="docs.ember-input-validation.textarea" /> --}}
+
+    {{! form section }}
+    <nav.section @label="Ember Input Validation" />
+    <nav.item @label="TpkForm" @route="docs.ember-input-validation.tpk-form" />
     <nav.item @label="Bic" @route="docs.ember-input-validation.prefabs.bic" />
     <nav.item
       @label="Checkbox"
@@ -93,33 +116,10 @@
     />
     <nav.item @label="Vat" @route="docs.ember-input-validation.prefabs.vat" />
 
-    {{! validation section }}
-    <nav.section @label="Ember Input Validation" />
-    <nav.item
-      @label="Install"
-      @route="docs.ember-input-validation.installation"
-    />
-    <nav.item @label="Checkbox" @route="docs.ember-input-validation.checkbox" />
-    <nav.item
-      @label="Datepicker"
-      @route="docs.ember-input-validation.datepicker"
-    />
-    <nav.item @label="File" @route="docs.ember-input-validation.file" />
-    <nav.item @label="Input" @route="docs.ember-input-validation.input" />
-    <nav.item
-      @label="Radio group"
-      @route="docs.ember-input-validation.radio-group"
-    />
-    <nav.item @label="Select" @route="docs.ember-input-validation.select" />
-    <nav.item @label="Textarea" @route="docs.ember-input-validation.textarea" />
-
-    {{! form section }}
-    <nav.section @label="Ember Form" />
-    <nav.item @label="TpkForm" @route="docs.ember-input-validation.tpk-form" />
-
     {{! input section }}
     <nav.section @label="Ember Input" />
     <nav.item @label="Install" @route="docs.ember-input.installation" />
+    <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" />
     <nav.item @label="Datepicker" @route="docs.ember-input.datepicker" />

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

@@ -0,0 +1,12 @@
+# Toggle
+
+A toggle switch. This is a simple wrapper around the `input` element with `type="checkbox"`.
+
+<DocsDemo as |demo|>
+  <demo.example @name="tpk-checkbox.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"/>
+</DocsDemo>
+

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

@@ -0,0 +1,68 @@
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import {  render } from '@ember/test-helpers';
+import { ImmerChangeset } from 'ember-immer-changeset';
+import { setupIntl } from 'ember-intl/test-support';
+import TpkToggle from '@triptyk/ember-input/components/prefabs/tpk-toggle';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
+
+
+module(
+  'Integration | Component | Prefabs | tpk-toggle',
+  function (hooks) {
+    setupRenderingTest(hooks);
+    setupIntl(hooks, 'fr-fr');
+
+    async function renderComponent({
+      changeset,
+      disabled
+    }: {
+      changeset: ImmerChangeset,
+      disabled?: boolean,
+    }) {
+      await render(
+        <template>
+          <TpkToggle
+            @changeset={{changeset}}
+            @validationField="toggle"
+            @label="label"
+            @disabled={{disabled}}
+            @mandatory={{true}}
+            @checked={{true}}
+          />
+        </template>,
+      );
+      return changeset;
+    }
+
+    test('render toggle with default structure and with mandatory', async function (assert) {
+      const changeset = new ImmerChangeset({
+        toggle: 'applati',
+      });
+      await renderComponent({changeset});
+      assert.dom('[data-test-tpk-label]').exists();
+      assert.dom('[data-test-tpk-label]').exists();
+    });
+
+    test('@disabled disables the input', async function(assert) {
+      const changeset = new ImmerChangeset({
+        toggle: 'applati',
+      });
+      await renderComponent({
+        disabled: true,
+        changeset
+      });
+      assert.dom(`[data-test-tpk-prefab-toggle-container] input`).hasAttribute('disabled');
+    });
+
+    test('Accessibility', async function (assert) {
+      assert.expect(0);
+      const changeset = new ImmerChangeset({
+        toggle: 'applati',
+      });
+      await renderComponent({changeset});
+      await a11yAudit();
+    });
+  },
+);

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-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",
       "./components/tpk-checkbox.js": "./dist/_app_/components/tpk-checkbox.js",

packages/ember-input/src/app.css

@@ -0,0 +1 @@
+@import url('./components/prefabs/tpk-toggle.css');

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

@@ -0,0 +1,15 @@
+.tpk-toggle-container {
+  @apply form-control;
+}
+
+.tpk-toggle-label-container {
+  @apply label cursor-pointer;
+}
+
+.tpk-toggle-label {
+  @apply label-text;
+}
+
+.tpk-toggle-input {
+  @apply toggle;
+}

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

@@ -0,0 +1,32 @@
+import type { MergeDeep } from 'type-fest';
+import type { BaseUIComponentArgs } from '../base';
+import TpkCheckboxComponent from '../tpk-checkbox.gts';
+import type { TOC } from '@ember/component/template-only';
+
+export type TpkCheckboxPrefabSignature = {
+  Args: MergeDeep<
+    BaseUIComponentArgs['Args'],
+    {
+      checked?: boolean;
+      disabled?: boolean;
+      onChange?: (isChecked: boolean, value: string, e: Event) => unknown;
+    }
+  >;
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+};
+
+const TpkCheckboxPrefabComponent: TOC<TpkCheckboxPrefabSignature> = <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">
+        <span class="tpk-toggle-label">{{@label}}</span>
+        <C.Input class="tpk-toggle-input" />
+      </C.Label>
+    </div>
+  </TpkCheckboxComponent>
+</template>
+
+export default TpkCheckboxPrefabComponent;