diff --git a/doc-app/app/controllers/docs/ember-input-validation/prefabs/file.ts b/doc-app/app/controllers/docs/ember-input-validation/prefabs/file.ts index 6bb94494..b12e0dcd 100644 --- a/doc-app/app/controllers/docs/ember-input-validation/prefabs/file.ts +++ b/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: '', }); diff --git a/doc-app/app/controllers/docs/ember-input/prefabs/toggle.ts b/doc-app/app/controllers/docs/ember-input/prefabs/toggle.ts new file mode 100644 index 00000000..e6c2655f --- /dev/null +++ b/doc-app/app/controllers/docs/ember-input/prefabs/toggle.ts @@ -0,0 +1,3 @@ +import Controller from "@ember/controller"; + +export default class extends Controller {} diff --git a/doc-app/app/router.ts b/doc-app/app/router.ts index 8c67f326..0938d721 100644 --- a/doc-app/app/router.ts +++ b/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'); diff --git a/doc-app/app/styles/app.css b/doc-app/app/styles/app.css index 97e10fad..bb4020ff 100644 --- a/doc-app/app/styles/app.css +++ b/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, diff --git a/doc-app/app/templates/docs.hbs b/doc-app/app/templates/docs.hbs index 10c62b3a..46355ae5 100644 --- a/doc-app/app/templates/docs.hbs +++ b/doc-app/app/templates/docs.hbs @@ -14,7 +14,30 @@ {{! prefab section }} - + + {{! validation section }} + {{!-- + + + + + + + + --}} + + {{! form section }} + + - {{! validation section }} - - - - - - - - - - - {{! form section }} - - - {{! input section }} + diff --git a/doc-app/app/templates/docs/ember-input/prefabs/toggle.md b/doc-app/app/templates/docs/ember-input/prefabs/toggle.md new file mode 100644 index 00000000..556e4b4a --- /dev/null +++ b/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"`. + + + + + + + + + diff --git a/doc-app/tests/integration/components/ember-input/prefabs/tpk-toggle-test.gts b/doc-app/tests/integration/components/ember-input/prefabs/tpk-toggle-test.gts new file mode 100644 index 00000000..510cd9a9 --- /dev/null +++ b/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( + , + ); + 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(); + }); + }, +); diff --git a/packages/ember-input/package.json b/packages/ember-input/package.json index e5a2ef56..0fa3af83 100644 --- a/packages/ember-input/package.json +++ b/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", diff --git a/packages/ember-input/src/app.css b/packages/ember-input/src/app.css new file mode 100644 index 00000000..29a02980 --- /dev/null +++ b/packages/ember-input/src/app.css @@ -0,0 +1 @@ +@import url('./components/prefabs/tpk-toggle.css'); diff --git a/packages/ember-input/src/components/prefabs/tpk-toggle.css b/packages/ember-input/src/components/prefabs/tpk-toggle.css new file mode 100644 index 00000000..c655d0f4 --- /dev/null +++ b/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; +} diff --git a/packages/ember-input/src/components/prefabs/tpk-toggle.gts b/packages/ember-input/src/components/prefabs/tpk-toggle.gts new file mode 100644 index 00000000..15bb04c7 --- /dev/null +++ b/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 = + +export default TpkCheckboxPrefabComponent;