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

Merge pull request #66 from hashicorp/refactor-layouts

Browse Source 
chore: 🤖 extract sidebar/body layout into separate component icu-386
This commit is contained in:
Susmitha Girumala authored and GitHub committed 2020-06-24 12:14:47 -04:00
2 parents 911347ca85 7f704cdbe6
commit ce5c874db1
13 files changed
+141 -324
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/components/rose/layout/global.stories.mdx
+2 -3
View File
@@ -7,12 +7,12 @@ 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.
A top-level layout/positioning component that allows two distinct sections to
be configured: header and body.
```htmlbars
<Rose::Layout::Global as |layout|>
<layout.header />
<layout.sidebar />
<layout.body />
</Rose::Layout::Global>
```
@@ -22,7 +22,6 @@ A top-level layout/positioning component that allows three distinct sections to
template: hbs`
<Rose::Layout::Global as |layout|>
<layout.header style="background: var(--brand-gray-5);">Header</layout.header>
<layout.sidebar style="background: var(--brand-gray-6);">Sidebar</layout.sidebar>
<layout.body style="background: var(--brand-gray-7);">Body</layout.body>
</Rose::Layout::Global>
`,
addons/rose/addon/components/rose/layout/sidebar.js
+7
View File
@@ -0,0 +1,7 @@
import Component from '@ember/component';
import layout from '../../../templates/components/rose/layout/sidebar';
export default Component.extend({
layout,
tagName: '',
});
addons/rose/addon/components/rose/layout/sidebar.stories.mdx
+33
View File
@@ -0,0 +1,33 @@
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';
<Meta title="Rose|Layout|Sidebar" component="SidebarLayout" />
# Layout|Sidebar
A top-level layout/positioning component that allows two distinct sections to
be configured: sidebar and body.
```htmlbars
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar>
sidebar content
</layout.sidebar>
<layout.body>
body content
</layout.body>
</Rose::Layout::Sidebar>
```
<Preview>
<Story name="SidebarLayout">{{
template: hbs`
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar style="background: var(--brand-gray-7);">Body</layout.sidebar>
<layout.body style="background: var(--brand-gray-5);">Sidebar</layout.body>
</Rose::Layout::Sidebar>
`,
}}</Story>
</Preview>
addons/rose/addon/styles/rose/components/layout/_global.scss
+5 -34
View File
@@ -1,39 +1,10 @@
@use '../../variables/sizing';
@use '../../variables/media';
.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;
min-height: 100vh;
display: flex;
flex-direction: column;
.rose-layout-global-body {
grid-area: body;
padding: sizing.rems(l);
}
.rose-layout-global-header {
grid-area: header;
}
.rose-layout-global-sidebar {
grid-area: navigation;
border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
}
}
@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;
flex: 1;
display: flex;
}
}
addons/rose/addon/styles/rose/components/layout/_index.scss
+10
View File
@@ -1,3 +1,13 @@
@use '../../variables/sizing';
@import 'global';
@import 'sidebar';
@import 'page';
@import 'centered';
// TODO: this is prescriptive and can be removed if it becomes a problem,
// but used here reflects the fact that the "main" element, of which there
// can only be one per page, generally has padding in Structure layouts.
main {
padding: sizing.rems(l);
}
addons/rose/addon/styles/rose/components/layout/_sidebar.scss
+27
View File
@@ -0,0 +1,27 @@
@use '../../variables/sizing';
@use '../../variables/media';
.rose-layout-sidebar {
--sidebar-width: #{sizing.rems(m) * 16};
display: flex;
flex-grow: 1;
.rose-layout-sidebar-body {
flex: 1;
}
.rose-layout-sidebar-sidebar {
width: var(--sidebar-width);
border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
}
}
@media (max-width: media.width(small)) {
.rose-layout-sidebar {
flex-direction: column;
.rose-layout-sidebar-sidebar {
width: auto;
}
}
}
addons/rose/addon/templates/components/rose/layout/global.hbs
+3 -4
View File
@@ -1,7 +1,6 @@
<div ...attributes class="rose-layout-global">
<section ...attributes class="rose-layout-global">
{{yield (hash
header=(component "rose/anonymous" tagName="header" class="rose-layout-global-header")
sidebar=(component "rose/anonymous" tagName="aside" class="rose-layout-global-sidebar")
body=(component "rose/anonymous" tagName="main" class="rose-layout-global-body")
body=(component "rose/anonymous" class="rose-layout-global-body")
)}}
</div>
</section>
addons/rose/addon/templates/components/rose/layout/sidebar.hbs
+6
View File
@@ -0,0 +1,6 @@
<div ...attributes class="rose-layout-sidebar">
{{yield (hash
body=(component "rose/anonymous" class="rose-layout-sidebar-body")
sidebar=(component "rose/anonymous" tagName="aside" class="rose-layout-sidebar-sidebar")
)}}
</div>
addons/rose/app/components/rose/layout/sidebar.js
+1
View File
@@ -0,0 +1 @@
export { default } from 'rose/components/rose/layout/sidebar';
addons/rose/tests/dummy/app/templates/playground.hbs
+14 -264
View File
@@ -30,274 +30,24 @@
</Rose::Header>
</layout.header>
<layout.sidebar>
<Rose::Nav::Sidebar @title="Title" as |nav|>
<nav.link @route="index">Item Name</nav.link>
<nav.link @route="about">Item Name</nav.link>
<nav.link @route="about">Item Name</nav.link>
<nav.link @route="about">Item Name</nav.link>
</Rose::Nav::Sidebar>
</layout.sidebar>
<layout.body>
<Rose::Layout::Page as |page|>
<page.breadcrumbs>Breadcrumbs</page.breadcrumbs>
<page.header>Header</page.header>
<page.navigation>Navigation</page.navigation>
<page.actions>Actions</page.actions>
<page.body>Body</page.body>
</Rose::Layout::Page>
Dummy app index template
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar>
<Rose::Nav::Sidebar @title="Title" as |nav|>
<nav.link @route="index">Item Name</nav.link>
<nav.link @route="about">Item Name</nav.link>
<nav.link @route="about">Item Name</nav.link>
<nav.link @route="about">Item Name</nav.link>
</Rose::Nav::Sidebar>
</layout.sidebar>
<Rose::Dropdown @text="Choose One&hellip;" as |dropdown|>
<dropdown.link @route="index">Menu item</dropdown.link>
<dropdown.link @route="about">Menu item</dropdown.link>
<dropdown.button>Button menu item</dropdown.button>
</Rose::Dropdown>
<layout.body @tagName="main">
Body content
</layout.body>
<Rose::Notification
@style="error"
@heading="Error"
@dismiss={{this.actionHandler}}
@dismissText="Dismiss"
>
An error occurred.
</Rose::Notification>
</Rose::Layout::Sidebar>
<h2>Icon</h2>
<Rose::Icon @name="alert-circle-fill" />
<Rose::Icon @name="alert-circle-fill" @size="medium" />
<Rose::Icon @name="alert-circle-fill" @size="small" />
<h2>Button</h2>
<Rose::Button @style="primary">Primary</Rose::Button>
<br>
<Rose::Button @style="primary" @disabled={{true}}>Primary</Rose::Button>
<br>
<Rose::Button @style="secondary">Secondary</Rose::Button>
<br>
<Rose::Button @style="secondary" @disabled={{true}}>Secondary</Rose::Button>
<br>
<h2>Form</h2>
<Rose::Form
@onSubmit={{this.actionHandler}}
@cancel={{this.actionHandler}}
@disabled={{false}}
as |form|
>
<h3>Inputs</h3>
<form.input
@label="Label"
@value="Read only"
readonly={{true}}
/>
<form.input
@label="Label"
@helperText="Helper text"
@value="Text"
/>
<form.input
@label="Label"
@helperText="Helper text"
@value="Text"
@error={{true}}
/>
<form.input
@label="Label"
@helperText="Helper text"
@value="Text"
disabled={{true}}
/>
<h3>Textareas</h3>
<form.textarea
@label="Label"
@value="Read only"
readonly={{true}}
/>
<form.textarea
@label="Label"
@helperText="Helper text"
@value="Text"
/>
<form.textarea
@label="Label"
@helperText="Helper text"
@value="Text"
@error={{true}}
/>
<form.textarea
@label="Label"
@helperText="Helper text"
@value="Text"
disabled={{true}}
/>
<h3>Selects</h3>
<form.select
@label="Label"
@helperText="Helper text"
@onChange={{fn this.actionHandler}}
as |field|
>
<field.field as |select|>
<select.option>Choose an option</select.option>
<select.option @value="value-1">Value 1</select.option>
<select.option @value="value-2">Value 2</select.option>
<select.option @value="value-3">Value 3</select.option>
</field.field>
</form.select>
<form.select
@label="Label"
@helperText="Helper text"
@onChange={{fn this.actionHandler}}
as |field|
>
<field.field as |select|>
<select.option>Choose an option</select.option>
</field.field>
</form.select>
<h3>Radio Group</h3>
<form.radioGroup @name="color" @selectedValue={{this.color}} as |radioGroup|>
<radioGroup.radio
@label="Red"
@value="red"
/>
<radioGroup.radio
@label="Green"
@value="green"
/>
<radioGroup.radio
@label="Blue"
@value="blue"
@disabled={{true}}
/>
</form.radioGroup>
<h3>Checkboxes</h3>
<form.checkbox
@label="Label"
/>
<form.checkbox
@error={{true}}
@label="Error"
/>
<form.checkbox
@checked={{true}}
@label="Checked"
/>
<form.checkbox
@label="Disabled"
disabled={{true}}
/>
<form.checkbox
@checked={{true}}
@label="Disabled + Checked"
disabled={{true}}
/>
<form.actions
@submitText="Save"
@cancelText="Cancel" />
</Rose::Form>
<Rose::Card::Link @title="I'm a card" />
<Rose::Card::Link @title="I'm a card" @description="I'm a description" />
<Rose::Card::Link @title="I'm a card" @description="I'm a description" @subtitle="I'm a subtitle"/>
<Rose::Table as |table|>
<table.header as |header|>
<header.row as |row|>
<row.cell>Address</row.cell>
<row.cell>Host Set</row.cell>
<row.cell>Name</row.cell>
<row.cell>Description</row.cell>
</header.row>
</table.header>
<table.body as |body|>
<body.row as |row|>
<row.cell>1.1.1.1</row.cell>
<row.cell>host-set-1, host-set-2</row.cell>
<row.cell>optional name</row.cell>
<row.cell>description</row.cell>
</body.row>
</table.body>
<table.footer as |footer|>
<footer.row as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
<Rose::Nav::Breadcrumbs as |breadcrumbs|>
<breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
<breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
<breadcrumbs.link @route="about">Level 3</breadcrumbs.link>
<breadcrumbs.link @route="about">Level 4</breadcrumbs.link>
<breadcrumbs.link @route="about">Level 5</breadcrumbs.link>
</Rose::Nav::Breadcrumbs>
<Rose::Message @title="You are not authorized" @subtitle="Error 403" @icon="disabled" as |message|>
<message.description>
You must be granted permissions to view this data.
Ask your administrator if you think you should have access.
</message.description>
<message.link @route="index">
<Rose::Icon @name="chevron-left" />
Go back
</message.link>
<message.link @route="index">Need help?</message.link>
</Rose::Message>
<Rose::Message @title="Page Not Found" @subtitle="Error 404" @icon="help-circle-outline" as |message|>
<message.description>
Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below.
</message.description>
<message.link @route="index">
<Rose::Icon @name="chevron-left" />
Go back
</message.link>
<message.link @route="index">Need help?</message.link>
</Rose::Message>
<Rose::Message @title="Something went wrong" @subtitle="Error 500" @icon="alert-circle-outline" as |message|>
<message.description>
We ran into a problem and could not continue. You can ask your administrator or try again later.
</message.description>
<message.link @route="index">
<Rose::Icon @name="refresh-default" />
Try Again
</message.link>
<message.link @route="index">Need help?</message.link>
</Rose::Message>
<Rose::Message @title="No logs received yet" as |message|>
<message.description>
Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration.
</message.description>
</Rose::Message>
<Rose::Message @title="Welcome to Namespaces" as |message|>
<message.description>
Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities.
</message.description>
<message.link @route="index">Add a namespace</message.link>
</Rose::Message>
<Rose::Layout::Centered>
<Rose::Message @title="Welcome to Namespaces" as |message|>
<message.description>
Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities.
</message.description>
<message.link @route="index">Add a namespace</message.link>
</Rose::Message>
</Rose::Layout::Centered>
</layout.body>
</Rose::Layout::Global>
addons/rose/tests/integration/components/rose/layout/global-test.js
+2 -16
View File
@@ -8,7 +8,7 @@ module('Integration | Component | rose/layout/global', function (hooks) {
test('it renders', async function (assert) {
await render(hbs`<Rose::Layout::Global />`);
assert.ok(find('div'));
assert.ok(find('section'));
assert.ok(find('.rose-layout-global'));
});
@@ -17,13 +17,6 @@ module('Integration | Component | rose/layout/global', function (hooks) {
assert.ok(find('#global'));
});
test('it renders with content', async function (assert) {
await render(hbs`<Rose::Layout::Global as |layout|>
<button id="content" />
</Rose::Layout::Global>`);
assert.ok(find('#content'));
});
test('it renders with header', async function (assert) {
await render(hbs`<Rose::Layout::Global as |layout|>
<layout.header />
@@ -31,17 +24,10 @@ module('Integration | Component | rose/layout/global', function (hooks) {
assert.ok(find('.rose-layout-global-header'));
});
test('it renders with main', async function (assert) {
test('it renders with body', async function (assert) {
await render(hbs`<Rose::Layout::Global as |layout|>
<layout.body />
</Rose::Layout::Global>`);
assert.ok(find('.rose-layout-global-body'));
});
test('it renders with sidebar', async function (assert) {
await render(hbs`<Rose::Layout::Global as |layout|>
<layout.sidebar />
</Rose::Layout::Global>`);
assert.ok(find('.rose-layout-global-sidebar'));
});
});
addons/rose/tests/integration/components/rose/layout/sidebar-test.js
+21
View File
@@ -0,0 +1,21 @@
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/sidebar', function(hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
assert.expect(3);
await render(hbs`
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar />
<layout.body />
</Rose::Layout::Sidebar>
`);
assert.ok(find('.rose-layout-sidebar'));
assert.ok(find('.rose-layout-sidebar-body'));
assert.ok(find('aside.rose-layout-sidebar-sidebar'));
});
});
ui/core/app/templates/application.hbs
+10 -3
View File
@@ -25,9 +25,16 @@
</Rose::Header>
</layout.header>
<layout.sidebar>{{outlet "sidebar"}}</layout.sidebar>
<layout.body>{{outlet}}</layout.body>
<layout.body>
<Rose::Layout::Sidebar as |sidebarLayout|>
<sidebarLayout.sidebar>
{{outlet "sidebar"}}
</sidebarLayout.sidebar>
<sidebarLayout.body @tagName="main">
{{outlet}}
</sidebarLayout.body>
</Rose::Layout::Sidebar>
</layout.body>
</Rose::Layout::Global>