diff --git a/addons/rose/addon/components/rose/layout/global.js b/addons/rose/addon/components/rose/layout/global.js new file mode 100644 index 0000000000..c9beb6f91c --- /dev/null +++ b/addons/rose/addon/components/rose/layout/global.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../../templates/components/rose/layout/global'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/layout/global.stories.mdx b/addons/rose/addon/components/rose/layout/global.stories.mdx new file mode 100644 index 0000000000..2adb2f277a --- /dev/null +++ b/addons/rose/addon/components/rose/layout/global.stories.mdx @@ -0,0 +1,30 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; +import { text, boolean, select } from '@storybook/addon-knobs'; + + + +# Layout|Global + +A top-level layout/positioning component that allows three distinct sections to be configured: header, navigation, and body. + +```htmlbars + + + + + +``` + + + {{ + template: hbs` + + Header + Body + Navigation + + `, + }} + diff --git a/addons/rose/addon/components/rose/layout/page/sidebar.js b/addons/rose/addon/components/rose/layout/global/body.js similarity index 91% rename from addons/rose/addon/components/rose/layout/page/sidebar.js rename to addons/rose/addon/components/rose/layout/global/body.js index 9df366f6d5..a7de3a0e1c 100644 --- a/addons/rose/addon/components/rose/layout/page/sidebar.js +++ b/addons/rose/addon/components/rose/layout/global/body.js @@ -1,5 +1,5 @@ import Component from '@ember/component'; -import layout from '../../../../templates/components/rose/layout/page/sidebar'; +import layout from '../../../../templates/components/rose/layout/global/body'; export default Component.extend({ layout, diff --git a/addons/rose/addon/components/rose/layout/global/header.js b/addons/rose/addon/components/rose/layout/global/header.js new file mode 100644 index 0000000000..274e815845 --- /dev/null +++ b/addons/rose/addon/components/rose/layout/global/header.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../../../templates/components/rose/layout/global/header'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/layout/global/navigation.js b/addons/rose/addon/components/rose/layout/global/navigation.js new file mode 100644 index 0000000000..8759a341f8 --- /dev/null +++ b/addons/rose/addon/components/rose/layout/global/navigation.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../../../templates/components/rose/layout/global/navigation'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/layout/page.stories.mdx b/addons/rose/addon/components/rose/layout/page.stories.mdx index ae54e41f8c..5206d551b3 100644 --- a/addons/rose/addon/components/rose/layout/page.stories.mdx +++ b/addons/rose/addon/components/rose/layout/page.stories.mdx @@ -1,30 +1,32 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { hbs } from 'ember-cli-htmlbars'; import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; # Layout|Page -A page layout/positioning component that allows three distinct sections to be configured: header, sidebar, and main. -Sidebar's content width determines it's column width. +A page layout/positioning component that allows five distinct sections to be configured: breadcrumbs, header, actions, navigation, and body. ```htmlbars + - - + + + ``` - {{ + {{ template: hbs` + Breadcrumbs Header - Main - Sidebar + Actions + Navigation + Body `, }} diff --git a/addons/rose/addon/components/rose/layout/page/actions.js b/addons/rose/addon/components/rose/layout/page/actions.js new file mode 100644 index 0000000000..e5bd07bb72 --- /dev/null +++ b/addons/rose/addon/components/rose/layout/page/actions.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../../../templates/components/rose/layout/page/actions'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/layout/page/main.js b/addons/rose/addon/components/rose/layout/page/body.js similarity index 92% rename from addons/rose/addon/components/rose/layout/page/main.js rename to addons/rose/addon/components/rose/layout/page/body.js index 83b4d6dcb3..82c9b9b76e 100644 --- a/addons/rose/addon/components/rose/layout/page/main.js +++ b/addons/rose/addon/components/rose/layout/page/body.js @@ -1,5 +1,5 @@ import Component from '@ember/component'; -import layout from '../../../../templates/components/rose/layout/page/main'; +import layout from '../../../../templates/components/rose/layout/page/body'; export default Component.extend({ layout, diff --git a/addons/rose/addon/components/rose/layout/page/breadcrumbs.js b/addons/rose/addon/components/rose/layout/page/breadcrumbs.js new file mode 100644 index 0000000000..21cb71c9f0 --- /dev/null +++ b/addons/rose/addon/components/rose/layout/page/breadcrumbs.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../../../templates/components/rose/layout/page/breadcrumbs'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/layout/page/navigation.js b/addons/rose/addon/components/rose/layout/page/navigation.js new file mode 100644 index 0000000000..7356be5e03 --- /dev/null +++ b/addons/rose/addon/components/rose/layout/page/navigation.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../../../templates/components/rose/layout/page/navigation'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss index ec7bd22afd..f8ba54fb12 100644 --- a/addons/rose/addon/styles/rose/components/_index.scss +++ b/addons/rose/addon/styles/rose/components/_index.scss @@ -4,4 +4,5 @@ @import 'layout'; @import 'notification'; @import 'card'; +@import 'page-header'; @import 'nav'; diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss index bf6ab366d2..5436c1b572 100644 --- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss +++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss @@ -1,22 +1,32 @@ -@use 'sass:map'; @use '../../variables/sizing'; @use '../../utilities/type'; +@use '../../utilities/dropdown'; -$dropdown-chevron: ( - 'default': - "data:image/svg+xml;utf-8,", +@include dropdown.dropdown-style( + 'light', + ( + color: var(--white), + chevron: 'light', + ) +); + +@include dropdown.dropdown-style( + 'dark', + ( + color: var(--black), + chevron: 'dark', + ) ); .rose-header-dropdown { position: relative; + display: inline-block; .rose-header-dropdown-trigger { cursor: default; overflow: hidden; display: flex; align-items: center; - color: var(--white); - background: url(map.get($dropdown-chevron, default)) no-repeat right center; background-size: sizing.rems(m); margin-right: sizing.rems(s); padding-right: sizing.rems(l) - sizing.rems(xxs); @@ -68,6 +78,7 @@ $dropdown-chevron: ( background: var(--subtle); box-shadow: 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-3)), 0 $xxs $xs rgba(var(--stark-components), var(--opacity-4)); + z-index: 99; } &.dropdown-right { diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss index 909cdbc83c..02f7021b27 100644 --- a/addons/rose/addon/styles/rose/components/layout/_index.scss +++ b/addons/rose/addon/styles/rose/components/layout/_index.scss @@ -1,38 +1,2 @@ -@use '../../variables/sizing'; -@use '../../variables/media'; - -.rose-layout-page { - display: grid; - grid-template-areas: - 'header header header header' - 'sidebar main main main'; - // Define static grid column for sidebar - grid-template-columns: 16rem auto 1fr; - grid-template-rows: auto 1fr; - height: 100vh; -} - -.rose-layout-header { - grid-area: header; -} - -.rose-layout-main { - grid-area: main; -} - -.rose-layout-sidebar { - grid-area: sidebar; - border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1); -} - -@media (max-width: media.width(small)) { - .rose-layout-page { - grid-template-columns: 1fr; - grid-template-rows: 0.1fr auto 1fr; - grid-template-areas: - 'header' - 'sidebar' - 'main'; - padding-bottom: 0; - } -} +@import 'global'; +@import 'page'; diff --git a/addons/rose/addon/styles/rose/components/layout/_page.scss b/addons/rose/addon/styles/rose/components/layout/_page.scss new file mode 100644 index 0000000000..568e1b7766 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/layout/_page.scss @@ -0,0 +1,48 @@ +@use '../../variables/sizing'; +@use '../../variables/media'; + +.rose-layout-page { + display: grid; + grid-template-areas: + 'breadcrumbs breadcrumbs breadcrumbs' + 'header header actions' + 'navigation navigation navigation' + 'body body body'; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: auto 1fr; + + .rose-layout-page-breadcrumbs { + grid-area: breadcrumbs; + } + + .rose-layout-page-header { + grid-area: header; + } + + .rose-layout-page-actions { + grid-area: actions; + display: flex; + justify-content: flex-end; + align-items: center; + } + + .rose-layout-page-navigation { + grid-area: navigation; + } + + .rose-layout-page-body { + grid-area: body; + } +} + +@media (max-width: media.width(small)) { + .rose-layout-page { + grid-template-columns: 1fr; + grid-template-areas: + 'breadcrumbs' + 'header' + 'actions' + 'navigation' + 'body'; + } +} diff --git a/addons/rose/addon/styles/rose/components/layout/global/_body.scss b/addons/rose/addon/styles/rose/components/layout/global/_body.scss new file mode 100644 index 0000000000..926856f49e --- /dev/null +++ b/addons/rose/addon/styles/rose/components/layout/global/_body.scss @@ -0,0 +1,3 @@ +.rose-layout-global-body { + grid-area: body; +} diff --git a/addons/rose/addon/styles/rose/components/layout/global/_header.scss b/addons/rose/addon/styles/rose/components/layout/global/_header.scss new file mode 100644 index 0000000000..0c784bc7e6 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/layout/global/_header.scss @@ -0,0 +1,3 @@ +.rose-layout-global-header { + grid-area: header; +} diff --git a/addons/rose/addon/styles/rose/components/layout/global/_index.scss b/addons/rose/addon/styles/rose/components/layout/global/_index.scss new file mode 100644 index 0000000000..6f6af52c5c --- /dev/null +++ b/addons/rose/addon/styles/rose/components/layout/global/_index.scss @@ -0,0 +1,29 @@ +@use '../../../variables/sizing'; +@use '../../../variables/media'; + +@import 'header'; +@import 'body'; +@import 'navigation'; + +.rose-layout-global { + display: grid; + grid-template-areas: + 'header header header header' + 'navigation body body body'; + // Define 16rem static grid column for navigation + grid-template-columns: (sizing.rems(m) * 16) auto 1fr; + grid-template-rows: auto 1fr; + height: 100vh; +} + +@media (max-width: media.width(small)) { + .rose-layout-global { + grid-template-columns: 1fr; + grid-template-rows: 0.1fr auto 1fr; + grid-template-areas: + 'header' + 'navigation' + 'body'; + padding-bottom: 0; + } +} diff --git a/addons/rose/addon/styles/rose/components/layout/global/_navigation.scss b/addons/rose/addon/styles/rose/components/layout/global/_navigation.scss new file mode 100644 index 0000000000..9482c0223e --- /dev/null +++ b/addons/rose/addon/styles/rose/components/layout/global/_navigation.scss @@ -0,0 +1,6 @@ +@use '../../../variables/sizing'; + +.rose-layout-global-navigation { + grid-area: navigation; + border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1); +} diff --git a/addons/rose/addon/styles/rose/components/page-header/_index.scss b/addons/rose/addon/styles/rose/components/page-header/_index.scss new file mode 100644 index 0000000000..6cd272653c --- /dev/null +++ b/addons/rose/addon/styles/rose/components/page-header/_index.scss @@ -0,0 +1,2 @@ +@import 'title'; +@import 'utilities'; diff --git a/addons/rose/addon/styles/rose/components/page-header/_title.scss b/addons/rose/addon/styles/rose/components/page-header/_title.scss new file mode 100644 index 0000000000..32fdb890db --- /dev/null +++ b/addons/rose/addon/styles/rose/components/page-header/_title.scss @@ -0,0 +1,35 @@ +@use '../../variables/sizing'; +@use '../../utilities/type' as typography; + +.rose-page-header-title { + display: inline-block; + grid-area: title; + + .rose-page-header-title-text { + display: inline-block; + color: var(--stark); + } + + .rose-page-header-title-icon { + vertical-align: sub; + + svg { + width: sizing.rems(l); + width: sizing.rems(l); + } + } + + .rose-header-dropdown { + .rose-header-dropdown-trigger-text { + @include typography.type(h1, bold); + margin-top: sizing.rems(xs); + margin-bottom: sizing.rems(xs); + + margin-right: sizing.rems(xs); + } + + .rose-header-dropdown-trigger { + background-size: sizing.rems(l); + } + } +} diff --git a/addons/rose/addon/styles/rose/components/page-header/_utilities.scss b/addons/rose/addon/styles/rose/components/page-header/_utilities.scss new file mode 100644 index 0000000000..45a78dd820 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/page-header/_utilities.scss @@ -0,0 +1,8 @@ +.rose-page-header-utilities { + grid-area: utilities; + + // Remove margin to align action buttons with h1 text + button { + margin-bottom: 0; + } +} diff --git a/addons/rose/addon/styles/rose/utilities/_dropdown.scss b/addons/rose/addon/styles/rose/utilities/_dropdown.scss new file mode 100644 index 0000000000..059d2d56dc --- /dev/null +++ b/addons/rose/addon/styles/rose/utilities/_dropdown.scss @@ -0,0 +1,18 @@ +@use 'sass:map'; + +$dropdown-chevron: ( + 'light': + "data:image/svg+xml;utf-8,", + 'dark': + "data:image/svg+xml;utf-8,", +); + +@mixin dropdown-style($name, $default) { + .rose-header-dropdown-#{$name} { + .rose-header-dropdown-trigger { + color: map.get($default, color); + background: url(map.get($dropdown-chevron, map.get($default, chevron))) + no-repeat right center; + } + } +} diff --git a/addons/rose/addon/templates/components/rose/header/dropdown.hbs b/addons/rose/addon/templates/components/rose/header/dropdown.hbs index 86406b2d9a..cc874c2840 100644 --- a/addons/rose/addon/templates/components/rose/header/dropdown.hbs +++ b/addons/rose/addon/templates/components/rose/header/dropdown.hbs @@ -1,6 +1,6 @@
diff --git a/addons/rose/addon/templates/components/rose/layout/global.hbs b/addons/rose/addon/templates/components/rose/layout/global.hbs new file mode 100644 index 0000000000..4ed9a90337 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/layout/global.hbs @@ -0,0 +1,7 @@ +
+ {{yield (hash + header=(component 'rose/layout/global/header') + body=(component 'rose/layout/global/body') + navigation=(component 'rose/layout/global/navigation') + )}} +
diff --git a/addons/rose/addon/templates/components/rose/layout/global/body.hbs b/addons/rose/addon/templates/components/rose/layout/global/body.hbs new file mode 100644 index 0000000000..b89c802f7f --- /dev/null +++ b/addons/rose/addon/templates/components/rose/layout/global/body.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
diff --git a/addons/rose/addon/templates/components/rose/layout/global/header.hbs b/addons/rose/addon/templates/components/rose/layout/global/header.hbs new file mode 100644 index 0000000000..b2e966d0db --- /dev/null +++ b/addons/rose/addon/templates/components/rose/layout/global/header.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
diff --git a/addons/rose/addon/templates/components/rose/layout/global/navigation.hbs b/addons/rose/addon/templates/components/rose/layout/global/navigation.hbs new file mode 100644 index 0000000000..b23782e923 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/layout/global/navigation.hbs @@ -0,0 +1,3 @@ + diff --git a/addons/rose/addon/templates/components/rose/layout/page.hbs b/addons/rose/addon/templates/components/rose/layout/page.hbs index 73a8b205fb..9afad989b7 100644 --- a/addons/rose/addon/templates/components/rose/layout/page.hbs +++ b/addons/rose/addon/templates/components/rose/layout/page.hbs @@ -1,7 +1,9 @@
{{yield (hash + breadcrumbs=(component 'rose/layout/page/breadcrumbs') header=(component 'rose/layout/page/header') - main=(component 'rose/layout/page/main') - sidebar=(component 'rose/layout/page/sidebar') + actions=(component 'rose/layout/page/actions') + navigation=(component 'rose/layout/page/navigation') + body=(component 'rose/layout/page/body') )}}
diff --git a/addons/rose/addon/templates/components/rose/layout/page/actions.hbs b/addons/rose/addon/templates/components/rose/layout/page/actions.hbs new file mode 100644 index 0000000000..8bfabd1857 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/layout/page/actions.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
diff --git a/addons/rose/addon/templates/components/rose/layout/page/body.hbs b/addons/rose/addon/templates/components/rose/layout/page/body.hbs new file mode 100644 index 0000000000..1a2bc08314 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/layout/page/body.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
diff --git a/addons/rose/addon/templates/components/rose/layout/page/breadcrumbs.hbs b/addons/rose/addon/templates/components/rose/layout/page/breadcrumbs.hbs new file mode 100644 index 0000000000..585c9d6307 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/layout/page/breadcrumbs.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
diff --git a/addons/rose/addon/templates/components/rose/layout/page/header.hbs b/addons/rose/addon/templates/components/rose/layout/page/header.hbs index 545ac6c22a..090d7b83d4 100644 --- a/addons/rose/addon/templates/components/rose/layout/page/header.hbs +++ b/addons/rose/addon/templates/components/rose/layout/page/header.hbs @@ -1,3 +1,3 @@ -
+
{{yield}} -
+ diff --git a/addons/rose/addon/templates/components/rose/layout/page/main.hbs b/addons/rose/addon/templates/components/rose/layout/page/main.hbs deleted file mode 100644 index 1752414ce3..0000000000 --- a/addons/rose/addon/templates/components/rose/layout/page/main.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
- {{yield}} -
diff --git a/addons/rose/addon/templates/components/rose/layout/page/navigation.hbs b/addons/rose/addon/templates/components/rose/layout/page/navigation.hbs new file mode 100644 index 0000000000..3e47899514 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/layout/page/navigation.hbs @@ -0,0 +1,3 @@ +
+ {{yield}} +
diff --git a/addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs b/addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs deleted file mode 100644 index 07f519a2bb..0000000000 --- a/addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/addons/rose/app/components/rose/layout/global.js b/addons/rose/app/components/rose/layout/global.js new file mode 100644 index 0000000000..615c7de96c --- /dev/null +++ b/addons/rose/app/components/rose/layout/global.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/global'; diff --git a/addons/rose/app/components/rose/layout/global/body.js b/addons/rose/app/components/rose/layout/global/body.js new file mode 100644 index 0000000000..37088d7d00 --- /dev/null +++ b/addons/rose/app/components/rose/layout/global/body.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/global/body'; diff --git a/addons/rose/app/components/rose/layout/global/header.js b/addons/rose/app/components/rose/layout/global/header.js new file mode 100644 index 0000000000..d529afa356 --- /dev/null +++ b/addons/rose/app/components/rose/layout/global/header.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/global/header'; diff --git a/addons/rose/app/components/rose/layout/global/navigation.js b/addons/rose/app/components/rose/layout/global/navigation.js new file mode 100644 index 0000000000..e83c8266e9 --- /dev/null +++ b/addons/rose/app/components/rose/layout/global/navigation.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/global/navigation'; diff --git a/addons/rose/app/components/rose/layout/page/actions.js b/addons/rose/app/components/rose/layout/page/actions.js new file mode 100644 index 0000000000..42d264833d --- /dev/null +++ b/addons/rose/app/components/rose/layout/page/actions.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/page/actions'; diff --git a/addons/rose/app/components/rose/layout/page/body.js b/addons/rose/app/components/rose/layout/page/body.js new file mode 100644 index 0000000000..2614417298 --- /dev/null +++ b/addons/rose/app/components/rose/layout/page/body.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/page/body'; diff --git a/addons/rose/app/components/rose/layout/page/breadcrumbs.js b/addons/rose/app/components/rose/layout/page/breadcrumbs.js new file mode 100644 index 0000000000..0c31615848 --- /dev/null +++ b/addons/rose/app/components/rose/layout/page/breadcrumbs.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/page/breadcrumbs'; diff --git a/addons/rose/app/components/rose/layout/page/main.js b/addons/rose/app/components/rose/layout/page/main.js deleted file mode 100644 index 3bde34d59f..0000000000 --- a/addons/rose/app/components/rose/layout/page/main.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/layout/page/main'; diff --git a/addons/rose/app/components/rose/layout/page/navigation.js b/addons/rose/app/components/rose/layout/page/navigation.js new file mode 100644 index 0000000000..0defdaa901 --- /dev/null +++ b/addons/rose/app/components/rose/layout/page/navigation.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/page/navigation'; diff --git a/addons/rose/app/components/rose/layout/page/sidebar.js b/addons/rose/app/components/rose/layout/page/sidebar.js deleted file mode 100644 index aa6735e844..0000000000 --- a/addons/rose/app/components/rose/layout/page/sidebar.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/layout/page/sidebar'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index ec39650390..576a37395c 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -1,5 +1,5 @@ - - + + @@ -28,18 +28,25 @@ - + - + Item Name Item Name Item Name Item Name - + - + + + Breadcrumbs + Header + Navigation + Actions + Body + Dummy app index template @@ -198,5 +205,5 @@ - - + + diff --git a/addons/rose/tests/integration/components/rose/layout/global-test.js b/addons/rose/tests/integration/components/rose/layout/global-test.js new file mode 100644 index 0000000000..2adf170775 --- /dev/null +++ b/addons/rose/tests/integration/components/rose/layout/global-test.js @@ -0,0 +1,47 @@ +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/layout/global', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('div')); + assert.ok(find('.rose-layout-global')); + }); + + test('it renders with attributes', async function (assert) { + await render(hbs``); + assert.ok(find('#global')); + }); + + test('it renders with content', async function (assert) { + await render(hbs` +