chore: Remove utilities/header/dropdown component in rose
This commit is contained in:
4 files changed
-129
No files matched your search
@@ -1,16 +0,0 @@
|
||||
import Component from '@ember/component';
|
||||
import layout from '../../../templates/components/rose/header/dropdown';
|
||||
import { action } from '@ember/object';
|
||||
|
||||
export default Component.extend({
|
||||
layout,
|
||||
tagName: '',
|
||||
|
||||
// Uses details widget state to close dropdown
|
||||
@action
|
||||
close(element) {
|
||||
if (element.open) {
|
||||
element.open = false;
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -1,32 +0,0 @@
|
||||
<details
|
||||
...attributes
|
||||
class="rose-header-dropdown{{if @alignRight " dropdown-right"}} {{if @style (concat "rose-header-dropdown-" @style) "rose-header-dropdown-light"}}"
|
||||
{{on-click-outside this.close}}
|
||||
>
|
||||
|
||||
<summary
|
||||
class="rose-header-dropdown-trigger{{if @iconOnly " icon-only"}}"
|
||||
title={{@text}}
|
||||
>
|
||||
|
||||
{{#if @icon}}
|
||||
<Rose::Icon
|
||||
@name={{@icon}}
|
||||
@size="large"
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
<span class="rose-header-dropdown-trigger-text">
|
||||
{{@text}}
|
||||
</span>
|
||||
|
||||
</summary>
|
||||
|
||||
<div class="rose-header-dropdown-content">
|
||||
{{yield (hash
|
||||
link=(component "link-to" class="rose-header-dropdown-link")
|
||||
button=(component "rose/button" style="header-dropdown")
|
||||
)}}
|
||||
</div>
|
||||
|
||||
</details>
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from 'rose/components/rose/header/dropdown';
|
||||
@@ -1,80 +0,0 @@
|
||||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { render, click, find, findAll } from '@ember/test-helpers';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
|
||||
module('Integration | Component | rose/header/dropdown', function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function (assert) {
|
||||
await render(hbs`<Rose::Header::Dropdown />`);
|
||||
assert.ok(find('.rose-header-dropdown'));
|
||||
});
|
||||
|
||||
test('it renders with html attributes', async function (assert) {
|
||||
await render(
|
||||
hbs`<Rose::Header::Dropdown id="custom-id" class="custom-class"/>`
|
||||
);
|
||||
assert.ok(find('#custom-id'));
|
||||
assert.ok(find('.custom-class'));
|
||||
});
|
||||
|
||||
test('it renders with trigger', async function (assert) {
|
||||
await render(hbs`<Rose::Header::Dropdown @text="Click me" />`);
|
||||
assert.equal(
|
||||
find('.rose-header-dropdown-trigger').textContent.trim(),
|
||||
'Click me'
|
||||
);
|
||||
});
|
||||
|
||||
test('it supports an icon', async function (assert) {
|
||||
await render(hbs`<Rose::Header::Dropdown @icon="user-square-fill" />`);
|
||||
assert.ok(find('svg'));
|
||||
});
|
||||
|
||||
test('it supports icon-only display', async function (assert) {
|
||||
await render(hbs`<Rose::Header::Dropdown @iconOnly={{true}} />`);
|
||||
assert.ok(find('.icon-only'));
|
||||
});
|
||||
|
||||
test('it supports right-aligned content', async function (assert) {
|
||||
await render(hbs`<Rose::Header::Dropdown @alignRight={{true}} />`);
|
||||
assert.ok(find('.dropdown-right'));
|
||||
});
|
||||
|
||||
test('it renders with content', async function (assert) {
|
||||
await render(hbs`<Rose::Header::Dropdown @text="Click me" as |dropdown|>
|
||||
<dropdown.link @route="about"/>
|
||||
<dropdown.link @route="about"/>
|
||||
<dropdown.button />
|
||||
<dropdown.button />
|
||||
<dropdown.button />
|
||||
</Rose::Header::Dropdown>`);
|
||||
assert.ok(find('.rose-header-dropdown-content'));
|
||||
assert.equal(findAll('a').length, 2);
|
||||
assert.equal(findAll('button').length, 3);
|
||||
});
|
||||
|
||||
test('it is toggled on click on trigger content', async function (assert) {
|
||||
await render(hbs`<Rose::Header::Dropdown id="dropdown" />`);
|
||||
|
||||
assert.notOk(find('#dropdown').open);
|
||||
await click('summary');
|
||||
assert.ok(find('#dropdown').open);
|
||||
await click('summary');
|
||||
assert.notOk(find('#dropdown').open);
|
||||
});
|
||||
|
||||
test('it is closed with outside click is triggered', async function (assert) {
|
||||
await render(hbs`
|
||||
<div id="wrapper">
|
||||
<Rose::Header::Dropdown id="dropdown" />
|
||||
</div>
|
||||
`);
|
||||
|
||||
await click('summary');
|
||||
assert.ok(find('#dropdown').open);
|
||||
await click('#wrapper');
|
||||
assert.notOk(find('#dropdown').open);
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user