diff --git a/addons/rose/addon/components/rose/layout/page.js b/addons/rose/addon/components/rose/layout/global.js similarity index 59% rename from addons/rose/addon/components/rose/layout/page.js rename to addons/rose/addon/components/rose/layout/global.js index 10190bcba..c9beb6f91 100644 --- a/addons/rose/addon/components/rose/layout/page.js +++ b/addons/rose/addon/components/rose/layout/global.js @@ -1,5 +1,5 @@ import Component from '@ember/component'; -import layout from '../../../templates/components/rose/layout/page'; +import layout from '../../../templates/components/rose/layout/global'; export default Component.extend({ layout, 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 000000000..2adb2f277 --- /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/header.js b/addons/rose/addon/components/rose/layout/global/body.js similarity index 91% rename from addons/rose/addon/components/rose/layout/page/header.js rename to addons/rose/addon/components/rose/layout/global/body.js index 45f4c6861..a7de3a0e1 100644 --- a/addons/rose/addon/components/rose/layout/page/header.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/header'; +import layout from '../../../../templates/components/rose/layout/global/body'; export default Component.extend({ layout, diff --git a/addons/rose/addon/components/rose/layout/page/sidebar.js b/addons/rose/addon/components/rose/layout/global/header.js similarity index 90% rename from addons/rose/addon/components/rose/layout/page/sidebar.js rename to addons/rose/addon/components/rose/layout/global/header.js index 9df366f6d..274e81584 100644 --- a/addons/rose/addon/components/rose/layout/page/sidebar.js +++ b/addons/rose/addon/components/rose/layout/global/header.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/header'; export default Component.extend({ layout, diff --git a/addons/rose/addon/components/rose/layout/page/main.js b/addons/rose/addon/components/rose/layout/global/navigation.js similarity index 89% rename from addons/rose/addon/components/rose/layout/page/main.js rename to addons/rose/addon/components/rose/layout/global/navigation.js index 83b4d6dcb..8759a341f 100644 --- a/addons/rose/addon/components/rose/layout/page/main.js +++ b/addons/rose/addon/components/rose/layout/global/navigation.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/global/navigation'; export default Component.extend({ layout, diff --git a/addons/rose/addon/components/rose/layout/page.stories.mdx b/addons/rose/addon/components/rose/layout/page.stories.mdx deleted file mode 100644 index ae54e41f8..000000000 --- a/addons/rose/addon/components/rose/layout/page.stories.mdx +++ /dev/null @@ -1,31 +0,0 @@ -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. - -```htmlbars - - - - - -``` - - - {{ - template: hbs` - - Header - Main - Sidebar - - `, - }} - diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss index fd25c4bf2..f8ba54fb1 100644 --- a/addons/rose/addon/styles/rose/components/_index.scss +++ b/addons/rose/addon/styles/rose/components/_index.scss @@ -5,3 +5,4 @@ @import 'notification'; @import 'card'; @import 'page-header'; +@import 'nav'; diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss index 9b927fb2c..8ec7ba2ab 100644 --- a/addons/rose/addon/styles/rose/components/layout/_index.scss +++ b/addons/rose/addon/styles/rose/components/layout/_index.scss @@ -1,40 +1,2 @@ -@use '../../variables/sizing'; -@use '../../variables/media'; - +@import 'global'; @import 'page-header'; - -.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; - } -} 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 000000000..926856f49 --- /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 000000000..0c784bc7e --- /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 000000000..6f6af52c5 --- /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 000000000..9482c0223 --- /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/templates/components/rose/layout/global.hbs b/addons/rose/addon/templates/components/rose/layout/global.hbs new file mode 100644 index 000000000..4ed9a9033 --- /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 000000000..b89c802f7 --- /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 000000000..b2e966d0d --- /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 000000000..b23782e92 --- /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 deleted file mode 100644 index 73a8b205f..000000000 --- a/addons/rose/addon/templates/components/rose/layout/page.hbs +++ /dev/null @@ -1,7 +0,0 @@ -
- {{yield (hash - header=(component 'rose/layout/page/header') - main=(component 'rose/layout/page/main') - sidebar=(component 'rose/layout/page/sidebar') - )}} -
diff --git a/addons/rose/addon/templates/components/rose/layout/page/header.hbs b/addons/rose/addon/templates/components/rose/layout/page/header.hbs deleted file mode 100644 index 545ac6c22..000000000 --- a/addons/rose/addon/templates/components/rose/layout/page/header.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
- {{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 1752414ce..000000000 --- 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/sidebar.hbs b/addons/rose/addon/templates/components/rose/layout/page/sidebar.hbs deleted file mode 100644 index 07f519a2b..000000000 --- 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 000000000..d55398ff9 --- /dev/null +++ b/addons/rose/app/components/rose/layout/global.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/global'; \ No newline at end of file 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 000000000..3f6780e17 --- /dev/null +++ b/addons/rose/app/components/rose/layout/global/body.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/global/body'; \ No newline at end of file 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 000000000..6d737401b --- /dev/null +++ b/addons/rose/app/components/rose/layout/global/header.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/global/header'; \ No newline at end of file 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 000000000..fa056e99e --- /dev/null +++ b/addons/rose/app/components/rose/layout/global/navigation.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/global/navigation'; \ No newline at end of file diff --git a/addons/rose/app/components/rose/layout/page.js b/addons/rose/app/components/rose/layout/page.js deleted file mode 100644 index a88273d71..000000000 --- a/addons/rose/app/components/rose/layout/page.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/layout/page'; diff --git a/addons/rose/app/components/rose/layout/page/header.js b/addons/rose/app/components/rose/layout/page/header.js deleted file mode 100644 index 77437dd12..000000000 --- a/addons/rose/app/components/rose/layout/page/header.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/layout/page/header'; 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 3bde34d59..000000000 --- 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/sidebar.js b/addons/rose/app/components/rose/layout/page/sidebar.js deleted file mode 100644 index aa6735e84..000000000 --- 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 ec3965039..841d80122 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,18 @@ - + - + Item Name Item Name Item Name Item Name - + - + Dummy app index template @@ -198,5 +198,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 000000000..7bff3a3b6 --- /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` +