Merge pull request #36 from hashicorp/ICU-179-tab-component

New tab and tab layout components for rose addon
2020-06-05 14:01:05 -04:00
commit ff3522ea8c
@@ -3,7 +3,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 import { text, boolean, select } from '@storybook/addon-knobs';

-<Meta title="Rose|Nav/Sidebar" component="Nav/Sidebar" />
+<Meta title="Rose|Nav|Sidebar" component="Nav/Sidebar" />

 # Sidebar Navigation

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/nav/tabs';
+
+export default Component.extend({
+  layout,
+});
@@ -0,0 +1,31 @@
+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|Nav|Tabs" component="Nav/Tabs" />
+
+# Tabs Navigation
+
+A simple tabbed navigation component.
+
+```html
+<Rose::Nav::Tabs as |nav|>
+  <nav.link @route='index' class="active">Text</nav.link>
+  <nav.link @route='index'>Text</nav.link>
+  <nav.link @route='index'>Text</nav.link>
+</Rose::Nav::Tabs>
+```
+
+<Preview>
+  <Story name="Basic Tabs">{{
+    template: hbs`
+      <Rose::Nav::Tabs as |nav|>
+        <nav.link @route='index' class="active">Text</nav.link>
+        <nav.link @route='index'>Text</nav.link>
+        <nav.link @route='index'>Text</nav.link>
+      </Rose::Nav::Tabs>
+    `,
+    context: {},
+  }}</Story>
+</Preview>
@@ -20,7 +20,7 @@ export default Component.extend({
  get icon() {
    let icon = 'info-circle-fill';

-    switch(this.style) {
+    switch (this.style) {
      case 'error':
        icon = 'cancel-square-fill';
        break;
@@ -33,6 +33,5 @@ export default Component.extend({
    }

    return icon;
-  }
-
+  },
 });
@@ -58,11 +58,11 @@
    }

    &:hover {
-      background-color: rgba(var(--stark-components), var(--opacity-3))
+      background-color: rgba(var(--stark-components), var(--opacity-3));
    }

    &:active {
-      background-color: rgba(var(--stark-components), var(--opacity-2))
+      background-color: rgba(var(--stark-components), var(--opacity-2));
    }
  }

@@ -3,7 +3,7 @@

 .rose-card-link {
  @include type.type(s);
-  border: 1px solid var(--ui-gray-subtler-2);
+  border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
  border-radius: sizing.rems(xxxs);
  color: var(--ui-gray);
  display: inline-flex;
@@ -1 +1,2 @@
-@import "sidebar";
+@import 'sidebar';
+@import 'tabs';
@@ -0,0 +1,33 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-nav-tabs {
+  display: flex;
+  margin-bottom: sizing.rems(m);
+  box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-gray-subtler-2);
+
+  .rose-nav-link {
+    --color: var(--ui-gray);
+    --background: transparent;
+    --box-shadow-color: transparent;
+
+    @include type.type(s, semibold);
+    display: inline-block;
+    color: var(--color);
+    background-color: var(--background);
+    box-shadow: inset 0 -#{sizing.rems(xxxxs) * 3} 0 var(--box-shadow-color);
+    text-decoration: none;
+    padding: sizing.rems(m);
+
+    &:hover {
+      --box-shadow-color: var(--ui-gray-subtler-2);
+      --background: var(--ui-gray-subtler-4);
+    }
+
+    &:active,
+    &.active {
+      --color: var(--action);
+      --box-shadow-color: currentColor;
+    }
+  }
+}
@@ -0,0 +1,9 @@
+<nav
+  ...attributes
+  class="rose-nav-tabs">
+
+  {{yield (hash
+    link=(component "link-to" class="rose-nav-link")
+  )}}
+
+</nav>
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/tabs';
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/nav/tabs';
@@ -1 +1 @@
-export { default } from 'rose/components/rose/notification';
+export { default } from 'rose/components/rose/notification';
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/tab';
@@ -49,7 +49,7 @@
      @dismiss={{this.actionHandler}}
      @dismissText="Dismiss"
    >
-      An error occurred.
+    An error occurred.
    </Rose::Notification>

    <h2>Icon</h2>
@@ -3,11 +3,11 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';

-module('Integration | Component | rose/nav/sidebar', function(hooks) {
+module('Integration | Component | rose/nav/sidebar', function (hooks) {
  setupRenderingTest(hooks);

-  test('it renders', async function(assert) {
-    assert.expect(2)
+  test('it renders', async function (assert) {
+    assert.expect(2);
    await render(hbs`
      <Rose::Nav::Sidebar @title="Title" as |nav|>
        <nav.link @route="index">Item Name</nav.link>
@@ -18,7 +18,7 @@ module('Integration | Component | rose/nav/sidebar', function(hooks) {
  });

  test('it associates title with nav via aria-labelledby', async function (assert) {
-    assert.expect(2)
+    assert.expect(2);
    await render(hbs`
      <Rose::Nav::Sidebar @title="Title" as |nav|>
        <nav.link @route="index">Item Name</nav.link>
@@ -0,0 +1,19 @@
+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/nav/tabs', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(2);
+    await render(hbs`
+      <Rose::Nav::Tabs as |nav|>
+        <nav.link @route='index'>Item Name</nav.link>
+      </Rose::Nav::Tabs>
+    `);
+    assert.ok(find('.rose-nav-tabs'));
+    assert.equal(find('.rose-nav-link').textContent.trim(), 'Item Name');
+  });
+});
@@ -3,10 +3,10 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render, find, click } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';

-module('Integration | Component | rose/notification', function(hooks) {
+module('Integration | Component | rose/notification', function (hooks) {
  setupRenderingTest(hooks);

-  test('it renders', async function(assert) {
+  test('it renders', async function (assert) {
    await render(hbs`
      <Rose::Notification
        @style="info"
@@ -16,10 +16,13 @@ module('Integration | Component | rose/notification', function(hooks) {
      </Rose::Notification>
    `);
    assert.ok(find('.rose-notification'));
-    assert.equal(find('.rose-notification-body').textContent.trim(), 'An error occurred.');
+    assert.equal(
+      find('.rose-notification-body').textContent.trim(),
+      'An error occurred.'
+    );
  });

-  test('it has optional dismiss button which triggers a function', async function(assert) {
+  test('it has optional dismiss button which triggers a function', async function (assert) {
    assert.expect(1);
    this.dismiss = () => assert.ok(true, 'dismiss clicked');
    await render(hbs`
@@ -7,7 +7,16 @@
    <LinkTo @route='orgs.org.projects.project'>{{@model.name}}</LinkTo>
  </div>

-  <h2>{{@model.name}}</h2>
+  <h2>{{t "resources.project.settings"}}</h2>
+
+  <Rose::Nav::Tabs as |nav|>
+    <nav.link @route='orgs.org.projects.project'>
+      {{t 'dev.item-name'}}
+    </nav.link>
+    <nav.link @route='index'>
+      {{t 'dev.item-name'}}
+    </nav.link>
+  </Rose::Nav::Tabs>

  <Form::Project
    @model={{@model}}
@@ -5,6 +5,8 @@ actions:
  save: Save
 resources:
  projects: Projects
+  project:
+    settings: Project Settings
 titles:
  new: New
 states:
@@ -16,6 +18,8 @@ form:
  label:
    name: Name
    description: Description
+nav:
+  overview: Overview
 dev:
  default-org: Default Org
  menu-item: Menu item
				`@@ -0,0 +1 @@`
				`export { default } from 'rose/components/rose/layout/tabs';`