diff --git a/ember-headlessui/addon/components/disclosure.hbs b/ember-headlessui/addon/components/disclosure.hbs new file mode 100644 index 0000000..fbd3a92 --- /dev/null +++ b/ember-headlessui/addon/components/disclosure.hbs @@ -0,0 +1,14 @@ +
+ {{yield + (hash + isOpen=this.isOpen + Button=(component + 'disclosure/button' toggleState=this.toggleState isOpen=this.isOpen + ) + Panel=(component 'disclosure/panel' isOpen=this.isOpen) + ) + }} +
\ No newline at end of file diff --git a/ember-headlessui/addon/components/disclosure.js b/ember-headlessui/addon/components/disclosure.js new file mode 100644 index 0000000..48bb804 --- /dev/null +++ b/ember-headlessui/addon/components/disclosure.js @@ -0,0 +1,15 @@ +import Component from '@glimmer/component'; + +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; + +export default class Disclosure extends Component { + + @tracked isOpen = false; + + @action + toggleState(){ + this.isOpen = !this.isOpen; + } + +} \ No newline at end of file diff --git a/ember-headlessui/addon/components/disclosure/button.hbs b/ember-headlessui/addon/components/disclosure/button.hbs new file mode 100644 index 0000000..88b0d72 --- /dev/null +++ b/ember-headlessui/addon/components/disclosure/button.hbs @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/ember-headlessui/addon/components/disclosure/button.js b/ember-headlessui/addon/components/disclosure/button.js new file mode 100644 index 0000000..f1cda36 --- /dev/null +++ b/ember-headlessui/addon/components/disclosure/button.js @@ -0,0 +1,19 @@ +import Component from '@glimmer/component'; + +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { guidFor } from '@ember/object/internals'; + + +export default class Button extends Component { + guid = `${guidFor(this)}-tailwindui-disclosure-button`; + + + get itemsGuid() { + return `${this.guid}-items`; + } + + get buttonGuid() { + return `${this.guid}-button`; + } +} \ No newline at end of file diff --git a/ember-headlessui/addon/components/disclosure/panel.hbs b/ember-headlessui/addon/components/disclosure/panel.hbs new file mode 100644 index 0000000..a9aa7f6 --- /dev/null +++ b/ember-headlessui/addon/components/disclosure/panel.hbs @@ -0,0 +1,9 @@ +{{#if @isOpen}} +
+ {{yield}} +
+{{/if}} \ No newline at end of file diff --git a/ember-headlessui/addon/components/disclosure/panel.js b/ember-headlessui/addon/components/disclosure/panel.js new file mode 100644 index 0000000..d3a26d4 --- /dev/null +++ b/ember-headlessui/addon/components/disclosure/panel.js @@ -0,0 +1,10 @@ +import Component from '@glimmer/component'; + +import { tracked } from '@glimmer/tracking'; +import { guidFor } from '@ember/object/internals'; + +export default class Panel extends Component { + panelGuid = `${guidFor(this)}-tailwindui-disclosure-panel`; + + @tracked isOpen = false; +} \ No newline at end of file diff --git a/ember-headlessui/app/components/disclosure.js b/ember-headlessui/app/components/disclosure.js new file mode 100644 index 0000000..3a68d28 --- /dev/null +++ b/ember-headlessui/app/components/disclosure.js @@ -0,0 +1 @@ +export { default } from 'ember-headlessui/components/disclosure'; \ No newline at end of file diff --git a/ember-headlessui/app/components/disclosure/button.js b/ember-headlessui/app/components/disclosure/button.js new file mode 100644 index 0000000..0f54441 --- /dev/null +++ b/ember-headlessui/app/components/disclosure/button.js @@ -0,0 +1 @@ +export { default } from 'ember-headlessui/components/disclosure/button'; \ No newline at end of file diff --git a/ember-headlessui/app/components/disclosure/panel.js b/ember-headlessui/app/components/disclosure/panel.js new file mode 100644 index 0000000..0a85426 --- /dev/null +++ b/ember-headlessui/app/components/disclosure/panel.js @@ -0,0 +1 @@ +export { default } from 'ember-headlessui/components/disclosure/panel'; \ No newline at end of file diff --git a/test-app/app/components/disclosure/basic.hbs b/test-app/app/components/disclosure/basic.hbs new file mode 100644 index 0000000..62a73ac --- /dev/null +++ b/test-app/app/components/disclosure/basic.hbs @@ -0,0 +1,61 @@ +
+
+ + + + What is your refund policy? + + + + + + If you're unhappy with your purchase for any reason, email us within + 90 days and we'll refund you in full, no questions asked. + + + + + + + Do you provide technical support ? + + + + + + No. + + + +
+
\ No newline at end of file diff --git a/test-app/app/router.js b/test-app/app/router.js index db98b07..3be3338 100644 --- a/test-app/app/router.js +++ b/test-app/app/router.js @@ -35,4 +35,8 @@ Router.map(function () { this.route('radio-group', function () { this.route('radio-group-basic'); }); + + this.route('disclosure', function () { + this.route('disclosure-basic'); + }); }); diff --git a/test-app/app/templates/disclosure/disclosure-basic.hbs b/test-app/app/templates/disclosure/disclosure-basic.hbs new file mode 100644 index 0000000..8f60f4c --- /dev/null +++ b/test-app/app/templates/disclosure/disclosure-basic.hbs @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test-app/app/templates/index.hbs b/test-app/app/templates/index.hbs index 72e0c3b..db55995 100644 --- a/test-app/app/templates/index.hbs +++ b/test-app/app/templates/index.hbs @@ -105,6 +105,18 @@ +
  • +

    + Disclosure +

    + +
    • diff --git a/test-app/tests/integration/components/disclosure-test.js b/test-app/tests/integration/components/disclosure-test.js new file mode 100644 index 0000000..8637597 --- /dev/null +++ b/test-app/tests/integration/components/disclosure-test.js @@ -0,0 +1,170 @@ +import { hbs } from 'ember-cli-htmlbars'; +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { click, render} from '@ember/test-helpers'; + +module('Integration | Component | ', (hooks) => { + setupRenderingTest(hooks); + + test('it should render disclosure component', async function (assert) { + await render(hbs` + + + + What is your refund policy? + + + + + + If you're unhappy with your purchase for any reason, email us within + 90 days and we'll refund you in full, no questions asked. + + + + `); + assert.dom('[data-test-ember-headlessui-disclosure-wrapper]').exists(); + }); + + test('it should render disclosure component titles', async function (assert) { + await render(hbs` + + + + What is your refund policy? + + + + + + If you're unhappy with your purchase for any reason, email us within + 90 days and we'll refund you in full, no questions asked. + + + + + + + Do you provide technical support ? + + + + + + No + + + + `); + assert.dom('[data-test-headlessui-disclosure-button="test-disclosure-btn-1"]').hasText('What is your refund policy?') + assert.dom('[data-test-headlessui-disclosure-button="test-disclosure-btn-2"]').hasText('Do you provide technical support ?') + }); + + test('it should render disclosure component panel description', async function (assert) { + await render(hbs` + + + + What is your refund policy? + + + + + + If you're unhappy with your purchase for any reason, email us within + 90 days and we'll refund you in full, no questions asked. + + + + + + + Do you provide technical support ? + + + + + + No + + + + `); + await click('[data-test-headlessui-disclosure-button="test-disclosure-btn-1"]'); + await click('[data-test-headlessui-disclosure-button="test-disclosure-btn-2"]'); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-1"]').hasText(`If you're unhappy with your purchase for any reason, email us within + 90 days and we'll refund you in full, no questions asked.`); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-2"]').hasText('No'); + }); + + test('check the toggle for disclosure component', async function (assert) { + await render(hbs` + + + + What is your refund policy? + + + + + + If you're unhappy with your purchase for any reason, email us within + 90 days and we'll refund you in full, no questions asked. + + + + + + + Do you provide technical support ? + + + + + + No + + + + `); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-1"]').doesNotExist(); + await click('[data-test-headlessui-disclosure-button="test-disclosure-btn-1"]'); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-1"]').exists(); + await click('[data-test-headlessui-disclosure-button="test-disclosure-btn-2"]'); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-2"]').exists(); + await click('[data-test-headlessui-disclosure-button="test-disclosure-btn-2"]'); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-1"]').exists(); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-2"]').doesNotExist(); + await click('[data-test-headlessui-disclosure-button="test-disclosure-btn-1"]'); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-1"]').doesNotExist(); + assert.dom('[data-test-headlessui-disclosure-panel="disclosure-panel-2"]').doesNotExist(); + }); +}); \ No newline at end of file