CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 🤖 New header component

Browse Source
This commit is contained in:
Susmitha Girumala committed 2020-05-19 15:07:47 -04:00
1 parent 818b2dca45
commit 0538d5fbcf
41 files changed
+857 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/header.js
+7
View File
@@ -0,0 +1,7 @@
import Component from '@ember/component';
import layout from '../../templates/components/rose/header';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/components/rose/header.stories.mdx
+73
View File
@@ -0,0 +1,73 @@
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { hbs } from 'ember-cli-htmlbars';
import { action } from '@storybook/addon-actions';
import { text, boolean } from '@storybook/addon-knobs';
<Meta title="Rose|Header" component="Header" />
# Header
A header component that allows three distinct sections to be configured: brand, navigation, and utilities.
```htmlbars
<Rose::Header name="main header" as |header|>
<header.brand />
<header.navigation as |nav|>
<nav.dropdown as |dropdown|>
<dropdown.trigger>Org name</dropdown.trigger>
<dropdown.content as |content|>
<content.link @route="about">link</content.link>
<content.button>button</content.button>
</dropdown.content>
</nav.dropdown>
<nav.link @route="about">Section</nav.link>
</header.navigation>
<header.utilities as |utilities|>
<utilities.dropdown as |dropdown|>
<dropdown.trigger>Click me</dropdown.trigger>
<dropdown.content as |content|>
<content.link @route="about">link</content.link>
<content.button>button</content.button>
</dropdown.content>
</utilities.dropdown>
</header.utilities>
</Rose::Header>
```
<Preview>
<Story name="Basic">{{
template: hbs`
<Rose::Header name="main header" as |header|>
<header.brand />
<header.navigation as |nav|>
<nav.dropdown @isOpen={{open-dropdown}} as |dropdown|>
<dropdown.trigger>{{navigation-dropdown-label}}</dropdown.trigger>
<dropdown.content as |content|>
<content.link @route="about">{{navigation-dropdown-link-label}}</content.link>
<content.button>{{navigation-dropdown-button-label}}</content.button>
</dropdown.content>
</nav.dropdown>
<nav.link @route="about">{{navigation-link-label}}</nav.link>
</header.navigation>
<header.utilities as |utilities|>
<utilities.dropdown @isOpen={{open-dropdown}} as |dropdown|>
<dropdown.trigger><Rose::Icon @name="user-square-outline" /></dropdown.trigger>
<dropdown.content as |content|>
<content.link @route="about">link</content.link>
<content.button>button</content.button>
</dropdown.content>
</utilities.dropdown>
</header.utilities>
</Rose::Header>
`,
context: {
'navigation-dropdown-label': text('navigation-dropdown-label', 'Org Name'),
'navigation-dropdown-link-label': text('navigation-dropdown-link-label', 'Menu Item'),
'navigation-dropdown-button-label': text('navigation-dropdown-button-label', 'Menu Item'),
'navigation-link-label': text('navigation-link-label', 'Section'),
'open-dropdown': boolean('open-dropdown', false),
},
}}</Story>
</Preview>
addons/rose/addon/components/rose/header/brand.js
+7
View File
@@ -0,0 +1,7 @@
import Component from '@ember/component';
import layout from '../../../templates/components/rose/header/brand';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/components/rose/header/dropdown.js
+34
View File
@@ -0,0 +1,34 @@
import Component from '@ember/component';
import layout from '../../../templates/components/rose/header/dropdown';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default Component.extend({
layout,
tagName: '',
@tracked isOpen: false,
@action
toggle(event) {
this.isOpen = event.target.open;
},
@action
addClickOutside(element) {
document.addEventListener('click', event => this.clickOutside(event, element), true);
},
@action
removeClickOutside(element) {
document.removeEventListener('click', event => this.clickOutside(event, element), true);
},
@action
clickOutside(event, element) {
// Only close dropdown when non-nested elements are clicked
if(element.contains(event.target)) { return; }
this.removeClickOutside(element);
this.isOpen = false;
}
});
addons/rose/addon/components/rose/header/dropdown/content.js
+7
View File
@@ -0,0 +1,7 @@
import Component from '@ember/component';
import layout from '../../../../templates/components/rose/header/dropdown/content';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/components/rose/header/dropdown/content/button.js
+7
View File
@@ -0,0 +1,7 @@
import Component from '@ember/component';
import layout from '../../../../../templates/components/rose/header/dropdown/content/button';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/components/rose/header/dropdown/trigger.js
+7
View File
@@ -0,0 +1,7 @@
import Component from '@ember/component';
import layout from '../../../../templates/components/rose/header/dropdown/trigger';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/components/rose/header/navigation.js
+7
View File
@@ -0,0 +1,7 @@
import Component from '@ember/component';
import layout from '../../../templates/components/rose/header/navigation';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/components/rose/header/utilities.js
+7
View File
@@ -0,0 +1,7 @@
import Component from '@ember/component';
import layout from '../../../templates/components/rose/header/utilities';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/styles/rose/components/_header.scss
+171
View File
@@ -0,0 +1,171 @@
@use '../variables/sizing';
@use '../utilities/type';
$brand-hashicorp: "data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 106.86 113.14' fill='%23ffffff'><g id='Layer_2' data-name='Layer 2'><g id='Logo'><polygon points='44.54 0 0 25.69 0 25.71 0 87.41 16.73 97.07 16.73 35.35 44.54 19.3 44.54 0'/><polygon points='62.32 0 62.32 49.15 44.54 49.15 44.54 30.81 27.8 40.47 27.8 103.44 44.54 113.12 44.54 64.11 62.32 64.11 62.32 82.33 79.05 72.67 79.05 9.66 62.32 0'/><polygon points='62.32 113.14 106.86 87.45 106.86 87.43 106.86 25.73 90.12 16.07 90.12 77.79 62.32 93.84 62.32 113.14'/></g></g></svg>";
$dropdown-chevron: (
'default': "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ebeef2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>",
'open': "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231f2124' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>",
);
.rose-header {
@include type.type(s, semibold);
display: grid;
grid-template-areas: 'brand navigation utilities';
grid-template-columns: 0.01fr auto 1fr;
grid-gap: sizing.rems(xxxs);
background: var(--stark);
color: var(--subtle);
padding: sizing.rems(xxs) 0;
.rose-header-brand {
grid-area: brand;
margin: sizing.rems(xs) 0 sizing.rems(xs) sizing.rems(m);
padding: 0 sizing.rems(m);
height: sizing.rems(l) + sizing.rems(xxs);
background-image: url($brand-hashicorp);
background-repeat: no-repeat;
}
.rose-header-navigation {
grid-area: navigation;
.wrapper {
display: flex;
flex-wrap: wrap;
}
.rose-header-navigation-link {
padding: sizing.rems(xs) sizing.rems(s) sizing.rems(xxxs) sizing.rems(s);
text-decoration: none;
display: block;
color: var(--subtle);
height: sizing.rems(l);
border: 1px solid var(--stark);
border-radius: sizing.rems(xxs);
text-align: center;
margin-top: sizing.rems(xxs);
cursor: pointer;
&:hover {
background: var(--ui-gray-starker-3);
}
&:active {
background: var(--ui-gray-starker-2);
}
}
}
.rose-header-utilities {
grid-area: utilities;
.wrapper {
margin-right: sizing.rems(s);
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
}
.rose-header-navigation, .rose-header-utilities {
.rose-header-dropdown {
height: sizing.rems(m) + sizing.rems(xxxs);
.rose-header-dropdown-trigger {
height: sizing.rems(m) + sizing.rems(xxxs);
padding: sizing.rems(xs) sizing.rems(xxs);
border-radius: sizing.rems(xxxs);
color: var(--subtle);
margin: sizing.rems(xxs) sizing.rems(xxs) 0 0;
cursor: pointer;
&.rose-header-dropdown-open {
background: var(--subtle);
color: var(--ui-gray-starker-4);
.rose-header-dropdown-chevron {
background-image: url(map-get($dropdown-chevron, 'open'));
}
}
&::-webkit-details-marker {
display: none;
}
.rose-header-dropdown-chevron {
background-image: url(map-get($dropdown-chevron, 'default'));
width: sizing.rems(m);
height: sizing.rems(m);
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
}
.rose-icon {
position: relative;
top: - sizing.rems(xxs);
}
}
.rose-header-dropdown-content {
position: absolute;
background-color: var(--subtle);
border-radius: sizing.rems(xxxs);
border: 1px solid var(--ui-gray-subtler-2);
&.rose-header-dropdown-content-right {
right: sizing.rems(m);
}
.rose-header-dropdown-content-link{
padding: sizing.rems(s) (sizing.rems(xl) * 3) sizing.rems(xxs) sizing.rems(s);
text-decoration: none;
display: block;
color: var(--ui-gray-starker-4);
height: sizing.rems(l);
}
.rose-header-dropdown-content-button {
button {
cursor: pointer;
padding: sizing.rems(s) (sizing.rems(xl) * 3) sizing.rems(xs) sizing.rems(s);
color: var(--ui-gray-starker-4);
box-shadow: none;
display: inline-block;
border: none;
text-decoration: none;
font-size: inherit;
font-weight: inherit;
-webkit-appearance: none;
}
}
}
}
}
}
//TODO: Where do media query sizes live?
@media (max-width: 768px) {
.rose-header {
grid-template-columns: 1fr 3fr;
grid-template-areas:
'brand utilities'
'navigation navigation';
padding-bottom: 0;
.rose-header-navigation {
background: var(--ui-header-subtler);
padding: sizing.rems(xs) sizing.rems(s);
.rose-header-navigation-link {
border: 1px solid var(--ui-gray-subtler);
&:hover {
background: var(--ui-gray-starker-3);
}
}
}
}
}
addons/rose/addon/styles/rose/components/_index.scss
+1
View File
@@ -1,2 +1,3 @@
@import 'button';
@import 'form';
@import 'header';
addons/rose/addon/styles/rose/variables/color/_css.scss
+4
View File
@@ -74,6 +74,8 @@
--ui-gray-starker-2: #{color(ui-gray, 700)};
--ui-gray-starker-3: #{color(ui-gray, 800)};
--ui-gray-starker-4: #{color(ui-gray, 900)};
--ui-header-subtler: #{color(ui-cool-gray, 700)};
}
// Dark Mode
@@ -131,5 +133,7 @@
--ui-gray-starker-2: #{color(ui-gray, 100)};
--ui-gray-starker-3: #{color(ui-gray, 050)};
--ui-gray-starker-4: #{color(ui-gray, 010)};
--ui-header-subtler: #{color(ui-cool-gray, 100)};
}
}
addons/rose/addon/templates/components/rose/header.hbs
+8
View File
@@ -0,0 +1,8 @@
<div ...attributes
class="rose-header" >
{{yield (hash
brand=(component 'rose/header/brand')
utilities=(component 'rose/header/utilities')
navigation=(component 'rose/header/navigation')
)}}
</div>
addons/rose/addon/templates/components/rose/header/brand.hbs
+1
View File
@@ -0,0 +1 @@
<span class="rose-header-brand" />
addons/rose/addon/templates/components/rose/header/dropdown.hbs
+14
View File
@@ -0,0 +1,14 @@
<details class="rose-header-dropdown"
open={{this.isOpen}}
...attributes
{{did-insert this.addClickOutside}}
{{will-destroy this.removeClickOutside}}
{{on 'toggle' this.toggle}}>
{{yield (hash
isOpen=this.isOpen
trigger=(component 'rose/header/dropdown/trigger'
isOpen=this.isOpen)
content=(component 'rose/header/dropdown/content' isOpen=this.isOpen
position=@position)
)}}
</details>
addons/rose/addon/templates/components/rose/header/dropdown/content.hbs
+6
View File
@@ -0,0 +1,6 @@
<span class="rose-header-dropdown-content {{if @isOpen "rose-header-dropdown-open"}} {{if @position "rose-header-dropdown-content-right"}}" ...attributes>
{{yield (hash
link=(component 'link-to' class="rose-header-dropdown-content-link")
button=(component 'rose/header/dropdown/content/button')
)}}
</span>
addons/rose/addon/templates/components/rose/header/dropdown/content/button.hbs
+3
View File
@@ -0,0 +1,3 @@
<span class="rose-header-dropdown-content-button">
<button type="button" ...attributes>{{yield}}</button>
</span>
addons/rose/addon/templates/components/rose/header/dropdown/trigger.hbs
+4
View File
@@ -0,0 +1,4 @@
<summary class="rose-header-dropdown-trigger {{if @isOpen "rose-header-dropdown-open"}}" ...attributes>
{{yield}}
<span class="rose-header-dropdown-chevron" />
</summary>
addons/rose/addon/templates/components/rose/header/navigation.hbs
+8
View File
@@ -0,0 +1,8 @@
<span class="rose-header-navigation">
<span class="wrapper">
{{yield (hash
link=(component 'link-to' class="rose-header-navigation-link")
dropdown=(component 'rose/header/dropdown')
)}}
</span>
</span>
addons/rose/addon/templates/components/rose/header/utilities.hbs
+7
View File
@@ -0,0 +1,7 @@
<span class="rose-header-utilities">
<span class="wrapper">
{{yield (hash
dropdown=(component 'rose/header/dropdown' position="true")
)}}
</span>
</span>
addons/rose/app/components/rose/header.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/header';
addons/rose/app/components/rose/header/brand.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/header/brand';
addons/rose/app/components/rose/header/dropdown.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/header/dropdown';
addons/rose/app/components/rose/header/dropdown/content.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/header/dropdown/content';
addons/rose/app/components/rose/header/dropdown/content/button.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/header/dropdown/content/button';
addons/rose/app/components/rose/header/dropdown/trigger.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/header/dropdown/trigger';
addons/rose/app/components/rose/header/navigation.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/header/navigation';
addons/rose/app/components/rose/header/utilities.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/header/utilities';
addons/rose/tests/unit/.gitkeep → addons/rose/app/templates/about.hbs
View File
File renamed without changes.
addons/rose/package.json
+1
View File
@@ -32,6 +32,7 @@
},
"devDependencies": {
"@ember/optional-features": "^1.3.0",
"@ember/render-modifiers": "^1.0.2",
"@glimmer/component": "^1.0.0",
"@glimmer/tracking": "^1.0.0",
"@hashicorp/structure-icons": "^1.8.1",
addons/rose/tests/dummy/app/router.js
+3 -1
View File
@@ -6,4 +6,6 @@ export default class Router extends EmberRouter {
rootURL = config.rootURL;
}
Router.map(function () {});
Router.map(function () {
this.route('about');
});
addons/rose/tests/dummy/app/templates/index.hbs
+26
View File
@@ -1,3 +1,29 @@
<Rose::Header name="main header" as |header|>
<header.brand />
<header.navigation as |nav|>
<nav.dropdown as |dropdown|>
<dropdown.trigger>Org name</dropdown.trigger>
<dropdown.content as |content|>
<content.link @route="about">link</content.link>
<content.button>button</content.button>
</dropdown.content>
</nav.dropdown>
<nav.link @route="about">Section</nav.link>
</header.navigation>
<header.utilities as |utilities|>
<utilities.dropdown as |dropdown|>
<dropdown.trigger>Click me</dropdown.trigger>
<dropdown.content as |content|>
<content.link @route="about">link</content.link>
<content.button>button</content.button>
</dropdown.content>
</utilities.dropdown>
</header.utilities>
</Rose::Header>
Dummy app index template
<h2>Icon</h2>
addons/rose/tests/integration/components/rose/header-test.js
+58
View File
@@ -0,0 +1,58 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | rose/header', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`<Rose::Header />`);
assert.ok(find('.rose-header'));
});
test('it renders with brand', async function (assert) {
await render(hbs`<Rose::Header as |header| >
<header.brand></header.brand>
</Rose::Header>`);
assert.ok(find('.rose-header-brand'));
assert.notOk(find('.rose-header-navigation'));
assert.notOk(find('.rose-header-utilities'));
});
test('it renders with navigation', async function (assert) {
await render(hbs`<Rose::Header as |header| >
<header.navigation />
</Rose::Header>`);
assert.ok(find('.rose-header-navigation'));
assert.notOk(find('.rose-header-brand'));
assert.notOk(find('.rose-header-utilities'));
});
test('it renders with navigation elements', async function (assert) {
await render(hbs`<Rose::Header as |header| >
<header.navigation as |nav|>
<nav.link @route="about"/>
</header.navigation>
</Rose::Header>`);
assert.ok(find('.rose-header-navigation-link'));
});
test('it renders with utilities', async function (assert) {
await render(hbs`<Rose::Header as |header| >
<header.utilities />
</Rose::Header>`);
assert.notOk(find('.rose-header-brand'));
assert.notOk(find('.rose-header-navigation'));
assert.ok(find('.rose-header-utilities'));
});
test('it renders with utility elements', async function (assert) {
await render(hbs`<Rose::Header as |header| >
<header.utilities as |utility| >
<utility.dropdown />
</header.utilities>
</Rose::Header>`);
assert.ok(find('.rose-header-dropdown'));
});
});
addons/rose/tests/integration/components/rose/header/brand-test.js
+13
View File
@@ -0,0 +1,13 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | rose/header/brand', function(hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`<Rose::Header::Brand />`);
assert.ok(find('.rose-header-brand'));
});
});
addons/rose/tests/integration/components/rose/header/dropdown-test.js
+96
View File
@@ -0,0 +1,96 @@
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 as |dropdown|>
<dropdown.trigger>Click me</dropdown.trigger>
</Rose::Header::Dropdown>`);
assert.ok(find('.rose-header-dropdown-trigger'));
assert.equal(find('.rose-header-dropdown-trigger').textContent.trim(), 'Click me');
});
test('it renders with content', async function(assert) {
await render(hbs`<Rose::Header::Dropdown as |dropdown|>
<dropdown.content as |content|>
<content.link @route="about"/>
<content.link @route="about"/>
<content.button />
<content.button />
<content.button />
</dropdown.content>
</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 opened when @isOpen={{true}}', async function(assert) {
this.set('isOpen', false);
await render(hbs`<Rose::Header::Dropdown @isOpen={{this.isOpen}} as |dropdown|>
<dropdown.trigger>Click me</dropdown.trigger>
<dropdown.content as |content|>
<content.button />
</dropdown.content>
</Rose::Header::Dropdown>`);
assert.notOk(find('.rose-header-dropdown-trigger.rose-header-dropdown-open'));
assert.notOk(find('.rose-header-dropdown-content.rose-header-dropdown-open'));
this.set('isOpen', true);
assert.ok(find('.rose-header-dropdown-trigger.rose-header-dropdown-open'));
assert.ok(find('.rose-header-dropdown-content.rose-header-dropdown-open'));
});
test('it is toggled on click on trigger content', async function(assert) {
await render(hbs`<Rose::Header::Dropdown id="dropdown" as |dropdown|>
<dropdown.trigger id="trigger">Click me</dropdown.trigger>
<dropdown.content as |content|>
<content.button />
</dropdown.content>
</Rose::Header::Dropdown>`);
assert.notOk(find('#dropdown').open);
assert.notOk(find('.rose-header-dropdown-trigger.rose-header-dropdown-open'));
assert.notOk(find('.rose-header-dropdown-content.rose-header-dropdown-open'));
await click('#trigger');
assert.ok(find('#dropdown').open);
assert.ok(find('.rose-header-dropdown-trigger.rose-header-dropdown-open'));
assert.ok(find('.rose-header-dropdown-content.rose-header-dropdown-open'));
await click('#trigger');
assert.notOk(find('#dropdown').open);
assert.notOk(find('.rose-header-dropdown-trigger.rose-header-dropdown-open'));
assert.notOk(find('.rose-header-dropdown-content.rose-header-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" as |dropdown|>
<dropdown.trigger id="trigger">Click me</dropdown.trigger>
<dropdown.content as |content|>
<content.button />
</dropdown.content>
</Rose::Header::Dropdown></div>`);
await click('#trigger');
assert.ok(find('#dropdown').open);
await click('#wrapper');
assert.notOk(find('#dropdown').open);
});
});
addons/rose/tests/integration/components/rose/header/dropdown/content-test.js
+73
View File
@@ -0,0 +1,73 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | rose/header/dropdown/content', function(hooks) {
setupRenderingTest(hooks);
test('it renders', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Content />`);
assert.ok(find('.rose-header-dropdown-content'));
});
test('it renders with content', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Content>
content
</Rose::Header::Dropdown::Content>`);
assert.equal(find('.rose-header-dropdown-content').textContent.trim(), 'content');
});
test('it renders with html attributes', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Content id="dropdown-content" class="universe" />`);
assert.equal(find('.rose-header-dropdown-content').id, 'dropdown-content');
assert.ok(find('.rose-header-dropdown-content').className.match('universe'));
});
test('it is open when @isOpen={{true}}', async function(assert) {
this.set('isOpen', false);
await render(hbs`<Rose::Header::Dropdown::Content @isOpen={{this.isOpen}} />`);
assert.notOk(find('.rose-header-dropdown-open'));
this.set('isOpen', true);
assert.ok(find('.rose-header-dropdown-open'));
});
test('it is positioned right when @position={{true}}', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Content />`);
assert.notOk(find('.rose-header-dropdown-content-right'));
await render(hbs`<Rose::Header::Dropdown::Content @position="{{true}}"/>`);
assert.ok(find('.rose-header-dropdown-content-right'));
});
test('it render link element', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Content as |content|>
<content.link @route="about" />
</Rose::Header::Dropdown::Content>`);
assert.ok(find('a'));
assert.ok(find('.rose-header-dropdown-content-link'));
});
test('it render link element with content', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Content as |content|>
<content.link @route="about">linkify</content.link>
</Rose::Header::Dropdown::Content>`);
assert.equal(find('a').textContent.trim(), 'linkify');
});
test('it render button element', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Content as |content|>
<content.button />
</Rose::Header::Dropdown::Content>`);
assert.ok(find('button'));
assert.ok(find('.rose-header-dropdown-content-button'));
});
test('it render button element with content', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Content as |content|>
<content.button>dropdown button</content.button>
</Rose::Header::Dropdown::Content>`);
assert.equal(find('button').textContent.trim(), 'dropdown button');
});
});
addons/rose/tests/integration/components/rose/header/dropdown/content/button-test.js
+24
View File
@@ -0,0 +1,24 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | rose/header/dropdown/content/button', function(hooks) {
setupRenderingTest(hooks);
test('it renders', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Content::Button />`);
assert.ok(find('.rose-header-dropdown-content-button'));
});
test('it renders with content', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Content::Button>Button content</Rose::Header::Dropdown::Content::Button>`);
assert.equal(find('.rose-header-dropdown-content-button').textContent.trim(), 'Button content');
});
test('it render button element', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Content::Button />`);
assert.ok(find('button'));
assert.equal(find('button').type, 'button');
});
});
addons/rose/tests/integration/components/rose/header/dropdown/trigger-test.js
+37
View File
@@ -0,0 +1,37 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | rose/header/dropdown/trigger', function(hooks) {
setupRenderingTest(hooks);
test('it renders', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Trigger />`);
assert.ok(find('.rose-header-dropdown-trigger'));
assert.notOk(find('.rose-header-dropdown-open'));
});
test('it renders with content', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Trigger>
trigger content
</Rose::Header::Dropdown::Trigger>`);
assert.equal(find('.rose-header-dropdown-trigger').textContent.trim(), 'trigger content');
});
test('it renders with html attributes', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Trigger id="trigger" class="dropdown-trigger" />`);
assert.equal(find('.rose-header-dropdown-trigger').id, 'trigger');
assert.ok(find('.rose-header-dropdown-trigger').className.match('dropdown-trigger'));
});
test('it is open when @isOpen={{true}}', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Trigger @isOpen={{true}} />`);
assert.ok(find('.rose-header-dropdown-open'));
});
test('it renders chevron', async function(assert) {
await render(hbs`<Rose::Header::Dropdown::Trigger />`);
assert.ok(find('.rose-header-dropdown-chevron'));
});
});
addons/rose/tests/integration/components/rose/header/navigation-test.js
+29
View File
@@ -0,0 +1,29 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find, findAll } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | rose/header/navigation', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`<Rose::Header::Navigation />`);
assert.ok(find('.rose-header-navigation'));
});
test('it renders navigation link elements', async function (assert) {
await render(hbs`<Rose::Header::Navigation as |navigation| >
<navigation.link @route="about"/>
<navigation.link @route="about"/>
</Rose::Header::Navigation>`);
assert.equal(findAll('a').length, 2);
});
test('it renders navigation dropdown elements', async function (assert) {
await render(hbs`<Rose::Header::Navigation as |navigation| >
<navigation.dropdown />
<navigation.dropdown />
</Rose::Header::Navigation>`);
assert.equal(findAll('.rose-header-dropdown').length, 2);
});
});
addons/rose/tests/integration/components/rose/header/utilities-test.js
+21
View File
@@ -0,0 +1,21 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find, findAll } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | rose/header/utilities', function(hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
await render(hbs`<Rose::Header::Utilities />`);
assert.ok(find('.rose-header-utilities'));
});
test('it renders navigation dropdown elements', async function (assert) {
await render(hbs`<Rose::Header::Utilities as |navigation| >
<navigation.dropdown />
<navigation.dropdown />
</Rose::Header::Utilities>`);
assert.equal(findAll('.rose-header-dropdown').length, 2);
});
});
yarn.lock
+85 -26
View File
@@ -1451,6 +1451,14 @@
ember-cli-babel "^6.16.0"
ember-compatibility-helpers "^1.1.1"
"@ember/render-modifiers@^1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@ember/render-modifiers/-/render-modifiers-1.0.2.tgz#2e87c48db49d922ce4850d707215caaac60d8444"
integrity sha512-6tEnHl5+62NTSAG2mwhGMFPhUrJQjoVqV+slsn+rlTknm2Zik+iwxBQEbwaiQOU1FUYxkS8RWcieovRNMR8inQ==
dependencies:
ember-cli-babel "^7.10.0"
ember-modifier-manager-polyfill "^1.1.0"
"@ember/test-helpers@^1.7.0", "@ember/test-helpers@^1.7.1":
version "1.7.1"
resolved "https://registry.yarnpkg.com/@ember/test-helpers/-/test-helpers-1.7.1.tgz#cc22a954b3b46856518f034bd492a74e0482389f"
@@ -2470,9 +2478,9 @@
integrity sha512-LB2R1Oyhpg8gu4SON/mfforE525+Hi/M1ineICEDftqNVTyFg1aRIeGuTvXAoWHc4nbrFncWtJgMmoyRvuGh7A==
"@types/node@^9.6.0":
version "9.6.55"
resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.55.tgz#7cc1358c9c18e71f6c020e410962971863232cf5"
integrity sha512-e/5tg8Ok0gSrN6pvHphnwTK0/CD9VPZrtZqpvvpEFAtfs+ZntusgGaWkf2lSEq1OFe2EDPeUMiMVpy4nZpJ4AQ==
version "9.6.56"
resolved "https://registry.yarnpkg.com/@types/node/-/node-9.6.56.tgz#036f665320d2f04bd62c0cd83222254a6a3b4437"
integrity sha512-Cq4pUCsBL6H7X0HFAOap75lmQqcnSmUDSP0R03lz9UsxRvBu5QsnKLLgIoitlFBX+j6LmciWYQAbOSmGMi7vwA==
"@types/npmlog@^4.1.2":
version "4.1.2"
@@ -3844,6 +3852,13 @@ babel-plugin-ember-modules-api-polyfill@^2.12.0, babel-plugin-ember-modules-api-
dependencies:
ember-rfc176-data "^0.3.12"
babel-plugin-ember-modules-api-polyfill@^2.13.0:
version "2.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-ember-modules-api-polyfill/-/babel-plugin-ember-modules-api-polyfill-2.13.0.tgz#f9d3928d4c40192a44a5b52b67bbdedc4a748ea2"
integrity sha512-Q2i7uZMNSuJFYUV8stEsLQIRfMhQJew62sOnR+ESNjb4vlI7Rj1JlSgymTGwmCTVh+poTBpMidiWCoITDtbiIA==
dependencies:
ember-rfc176-data "^0.3.13"
babel-plugin-emotion@^10.0.20, babel-plugin-emotion@^10.0.27:
version "10.0.33"
resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
@@ -4896,23 +4911,21 @@ broccoli-funnel-reducer@^1.0.0:
resolved "https://registry.yarnpkg.com/broccoli-funnel-reducer/-/broccoli-funnel-reducer-1.0.0.tgz#11365b2a785aec9b17972a36df87eef24c5cc0ea"
integrity sha1-ETZbKnha7JsXlyo234fu8kxcwOo=
broccoli-funnel@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/broccoli-funnel/-/broccoli-funnel-3.0.0.tgz#46fa8b570eccdfa9f66c71e85ce4a5dc68ec2ad6"
integrity sha512-BzqVvCXQt/d0Lk9fmT8Z/34rt2BB1OjQe1+e5w29ZXkg7pBlvRIYiPq3M+1Hy0E6jJ/ASB6m/d7TBl7cTHjEFQ==
broccoli-funnel@3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/broccoli-funnel/-/broccoli-funnel-3.0.3.tgz#26fd42632471f67a91f4770d1987118087219937"
integrity sha512-LPzZ91BwStoHZXdXHQAJeYORl189OrRKM5NdIi86SDU9wZ4s/3lV1PRFOiobDT/jKM10voM7CDzfvicHbCYxAQ==
dependencies:
array-equal "^1.0.0"
blank-object "^1.0.1"
broccoli-plugin "^3.0.0"
broccoli-plugin "^4.0.1"
debug "^4.1.1"
fast-ordered-set "^1.0.0"
fs-tree-diff "^2.0.1"
heimdalljs "^0.2.0"
minimatch "^3.0.0"
path-posix "^1.0.0"
rimraf "^3.0.0"
symlink-or-copy "^1.0.0"
walk-sync "^0.3.1"
walk-sync "^2.0.2"
broccoli-funnel@^1.0.1:
version "1.2.0"
@@ -5175,7 +5188,7 @@ broccoli-plugin@^2.0.0, broccoli-plugin@^2.1.0:
rimraf "^2.3.4"
symlink-or-copy "^1.1.8"
broccoli-plugin@^3.0.0, broccoli-plugin@^3.1.0:
broccoli-plugin@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/broccoli-plugin/-/broccoli-plugin-3.1.0.tgz#54ba6dd90a42ec3db5624063292610e326b1e542"
integrity sha512-7w7FP8WJYjLvb0eaw27LO678TGGaom++49O1VYIuzjhXjK5kn2+AMlDm7CaUFw4F7CLGoVQeZ84d8gICMJa4lA==
@@ -5694,9 +5707,9 @@ caniuse-api@^3.0.0:
lodash.uniq "^4.5.0"
caniuse-lite@^1.0.0:
version "1.0.30001061"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001061.tgz#80ca87ef14eb543a7458e7fd2b5e2face3458c9f"
integrity sha512-SMICCeiNvMZnyXpuoO+ot7FHpMVPlrsR+HmfByj6nY4xYDHXLqMTbgH7ecEkDNXWkH1vaip+ZS0D7VTXwM1KYQ==
version "1.0.30001062"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001062.tgz#d814b648338504b315222ace6f1a533d9a55e390"
integrity sha512-ei9ZqeOnN7edDrb24QfJ0OZicpEbsWxv7WusOiQGz/f2SfvBgHHbOEwBJ8HKGVSyx8Z6ndPjxzR6m0NQq+0bfw==
caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001043:
version "1.0.30001046"
@@ -7233,14 +7246,14 @@ elliptic@^6.0.0:
minimalistic-crypto-utils "^1.0.0"
ember-a11y-testing@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/ember-a11y-testing/-/ember-a11y-testing-3.0.0.tgz#b2680aa115ba9eeed1d02dae8052df4053ef1435"
integrity sha512-ovkdLWINtt3sdbVgQfZ/ZiYNWB4tLaOENS6zp241gBXvo7AJqj3t9RrH1ljWAs9G8k9Cx6Z4F+dJrMJ6v/z6Hg==
version "3.0.1"
resolved "https://registry.yarnpkg.com/ember-a11y-testing/-/ember-a11y-testing-3.0.1.tgz#011643aec55f6fbf4fa0beeca883f3e911eb0512"
integrity sha512-T+s4qsMQRftxI9wLaQhP19mqCMEa8zHMGbtZh8F0lJOkfwFcETKMXXEyrEPo/PCEiemNG00BuwOJ75teyu+fyA==
dependencies:
axe-core "3.5.3"
broccoli-funnel "3.0.0"
broccoli-funnel "3.0.3"
ember-cli-babel "7.19.0"
ember-cli-version-checker "5.0.2"
ember-cli-version-checker "5.1.1"
ember-get-config "0.2.4"
ember-assign-polyfill@^2.6.0:
@@ -7310,7 +7323,7 @@ ember-cli-babel-plugin-helpers@^1.0.0, ember-cli-babel-plugin-helpers@^1.1.0:
resolved "https://registry.yarnpkg.com/ember-cli-babel-plugin-helpers/-/ember-cli-babel-plugin-helpers-1.1.0.tgz#de3baedd093163b6c2461f95964888c1676325ac"
integrity sha512-Zr4my8Xn+CzO0gIuFNXji0eTRml5AxZUTDQz/wsNJ5AJAtyFWCY4QtKdoELNNbiCVGt1lq5yLiwTm4scGKu6xA==
ember-cli-babel@7.19.0, ember-cli-babel@^7.1.2, ember-cli-babel@^7.11.0, ember-cli-babel@^7.11.1, ember-cli-babel@^7.12.0, ember-cli-babel@^7.13.2, ember-cli-babel@^7.17.2, ember-cli-babel@^7.18.0, ember-cli-babel@^7.19.0, ember-cli-babel@^7.4.1, ember-cli-babel@^7.7.0, ember-cli-babel@^7.7.3:
ember-cli-babel@7.19.0, ember-cli-babel@^7.1.2, ember-cli-babel@^7.11.0, ember-cli-babel@^7.11.1, ember-cli-babel@^7.12.0, ember-cli-babel@^7.13.2, ember-cli-babel@^7.17.2, ember-cli-babel@^7.18.0, ember-cli-babel@^7.7.0, ember-cli-babel@^7.7.3:
version "7.19.0"
resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.19.0.tgz#e6eddea18a867231fcf90a80689e92b98be9a63b"
integrity sha512-HiWKuoyy35vGEr+iCw6gUnQ3pS5qslyTlKEDW8cVoMbvZNGYBgRxHed5nklVUh+BS74AwR9lsp25BTAagYAP9Q==
@@ -7361,6 +7374,38 @@ ember-cli-babel@^6.0.0-beta.4, ember-cli-babel@^6.11.0, ember-cli-babel@^6.12.0,
ember-cli-version-checker "^2.1.2"
semver "^5.5.0"
ember-cli-babel@^7.10.0, ember-cli-babel@^7.19.0, ember-cli-babel@^7.4.1:
version "7.20.0"
resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.20.0.tgz#aa77eadd15036a053534fc68f7933bb97c5a1e25"
integrity sha512-DwV5Cbn8wlRFpG8zQXxYPRb0NRnnaj/2qVDODeUEjM/doDhoDDbTSSaEI5Pf0kIlkVIimyGB8qpGv1fkgj2IfQ==
dependencies:
"@babel/core" "^7.9.0"
"@babel/helper-compilation-targets" "^7.8.7"
"@babel/plugin-proposal-class-properties" "^7.8.3"
"@babel/plugin-proposal-decorators" "^7.8.3"
"@babel/plugin-transform-modules-amd" "^7.9.0"
"@babel/plugin-transform-runtime" "^7.9.0"
"@babel/plugin-transform-typescript" "^7.9.0"
"@babel/polyfill" "^7.8.7"
"@babel/preset-env" "^7.9.0"
"@babel/runtime" "^7.9.0"
amd-name-resolver "^1.2.1"
babel-plugin-debug-macros "^0.3.0"
babel-plugin-ember-data-packages-polyfill "^0.1.2"
babel-plugin-ember-modules-api-polyfill "^2.13.0"
babel-plugin-module-resolver "^3.1.1"
broccoli-babel-transpiler "^7.4.0"
broccoli-debug "^0.6.4"
broccoli-funnel "^2.0.1"
broccoli-source "^1.1.0"
clone "^2.1.2"
ember-cli-babel-plugin-helpers "^1.1.0"
ember-cli-version-checker "^4.1.0"
ensure-posix-path "^1.0.2"
fixturify-project "^1.10.0"
rimraf "^3.0.1"
semver "^5.5.0"
ember-cli-code-coverage@^1.0.0-beta.9:
version "1.0.0-beta.9"
resolved "https://registry.yarnpkg.com/ember-cli-code-coverage/-/ember-cli-code-coverage-1.0.0-beta.9.tgz#4a4ca60e88fbf1895de99e3b439f46c129417ab7"
@@ -7641,13 +7686,13 @@ ember-cli-uglify@^3.0.0:
broccoli-uglify-sourcemap "^3.1.0"
lodash.defaultsdeep "^4.6.0"
ember-cli-version-checker@5.0.2:
version "5.0.2"
resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-5.0.2.tgz#7e96157be4b13b083a68078b188820193275d8c4"
integrity sha512-cqFrIg9++GKdpMv2DP8pryAhTcmCYUL2hzHatLwkcJe23s+ioZ0JQWte0avxZ5lJnwn5e3kzUKkLkDfHDFBMUw==
ember-cli-version-checker@5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/ember-cli-version-checker/-/ember-cli-version-checker-5.1.1.tgz#3185c526c14671609cbd22ab0d0925787fc84f3d"
integrity sha512-YziSW1MgOuVdJSyUY2CKSC4vXrGQIHF6FgygHkJOxYGjZNQYwf5MK0sbliKatvJf7kzDSnXs+r8JLrD74W/A8A==
dependencies:
resolve-package-path "^2.0.0"
semver "^7.1.3"
semver "^7.3.2"
silent-error "^1.1.1"
ember-cli-version-checker@^1.0.2:
@@ -7960,6 +8005,15 @@ ember-maybe-import-regenerator@^0.1.6:
ember-cli-babel "^6.0.0-beta.4"
regenerator-runtime "^0.9.5"
ember-modifier-manager-polyfill@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/ember-modifier-manager-polyfill/-/ember-modifier-manager-polyfill-1.2.0.tgz#cf4444e11a42ac84f5c8badd85e635df57565dda"
integrity sha512-bnaKF1LLKMkBNeDoetvIJ4vhwRPKIIumWr6dbVuW6W6p4QV8ZiO+GdF8J7mxDNlog9CeL9Z/7wam4YS86G8BYA==
dependencies:
ember-cli-babel "^7.10.0"
ember-cli-version-checker "^2.1.2"
ember-compatibility-helpers "^1.2.0"
ember-page-title@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/ember-page-title/-/ember-page-title-5.2.1.tgz#12261e010bec96af6200cd132fe4068e717ccbec"
@@ -8008,6 +8062,11 @@ ember-rfc176-data@^0.3.12:
resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.3.12.tgz#90d82878e69e2ac9a5438e8ce14d12c6031c5bd2"
integrity sha512-g9HeZj/gU5bfIIrGXkP7MhS2b3Vu5DfNUrYr14hy99TgIvtZETO+96QF4WOEUXGjIJdfTRjerVnQlqngPQSv1g==
ember-rfc176-data@^0.3.13:
version "0.3.13"
resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.3.13.tgz#ed1712a26e65fec703655f35410414aa1982cf3b"
integrity sha512-m9JbwQlT6PjY7x/T8HslnXP7Sz9bx/pz3FrNfNi2NesJnbNISly0Lix6NV1fhfo46572cpq4jrM+/6yYlMefTQ==
ember-router-generator@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/ember-router-generator/-/ember-router-generator-1.2.3.tgz#8ed2ca86ff323363120fc14278191e9e8f1315ee"