chore: 🤖 Add tab item and tab layout components to rose addon

2020-06-04 13:50:48 -04:00
1 parent 87947f6a4f
commit d38d846746
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/layout/tabs';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
@@ -0,0 +1,26 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+<Meta title="Rose|Layout" component="Tabs" />
+
+# Tabs
+
+A tabs layout component to hold `Rose::Tab` definitions.
+
+```html
+<Rose::Layout::Tabs>
+  <Rose::Tab @title="Tab item" @badge="3" @icon="info-circle-outline" @disabled={{false}} />
+</Rose::Layout::Tabs>
+```
+
+<Preview>
+  <Story name="Tabs">{{
+    template: hbs`
+    <Rose::Layout::Tabs>
+      <Rose::Tab @title="Text" />
+      <Rose::Tab @title="Text" />
+      <Rose::Tab @title="Text" />
+    </Rose::Layout::Tabs>`,
+  }}</Story>
+</Preview>
@@ -33,6 +33,5 @@ export default Component.extend({
    }

    return icon;
-  }
-
+  },
 });
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/rose/tab';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
@@ -0,0 +1,43 @@
+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|Tab" component="Tab" />
+
+# Tab
+
+A tab item component with ability to configure icon, title, and badge sections.
+
+```html
+<Rose::Tab @title="Tab item" @badge="3" @icon="info-circle-outline" @disabled={{false}} />
+```
+
+<Preview>
+  <Story name="Basic">{{
+    template: hbs`
+    <Rose::Tab
+      @title={{title}}
+      @badge={{badge}}
+      @icon={{icon}}
+      @disabled={{disabled}}
+    />`,
+    context: {
+      title: text('title', 'Tab item'),
+      badge: text('badge', '3'),
+      icon: select(
+        'icon',
+        {
+          'info-circle-outline': 'info-circle-outline',
+          'user-square-fill': 'user-square-fill',
+          'check-circle-outline': 'check-circle-outline',
+          'copy-action': 'copy-action',
+          'unfold-more': 'unfold-more',
+          'unfold-less': 'unfold-less',
+        },
+        'info-circle-outline'
+      ),
+      disabled: boolean('disabled', false)
+    },
+  }}</Story>
+</Preview>
@@ -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));
    }
  }

@@ -0,0 +1,53 @@
+@use '../variables/sizing';
+@use '../utilities/type';
+
+.rose-tab {
+  @include type.type(s);
+  display: inline-block;
+  background-color: var(--subtle);
+
+  .rose-tab-link {
+    text-decoration: none;
+    color: var(--ui-gray);
+    display: inline-block;
+    padding: sizing.rems(s) sizing.rems(m);
+    border-bottom: sizing.rems(xxxs) solid var(--subtle);
+
+    &.rose-tab-link-disabled {
+      cursor: not-allowed;
+      pointer-events: none;
+      color: var(--ui-gray-subtler-2);
+    }
+
+    &:active {
+      color: var(--action);
+      border-color: var(--action);
+      background-color: var(--subtle);
+    }
+
+    &:hover {
+      color: var(--ui-gray);
+      border-color: var(--ui-gray-subtler-2);
+      background-color: var(--ui-gray-subtler-4);
+    }
+
+    &:hover:active {
+      color: var(--action);
+      border-color: var(--action);
+      background-color: var(--ui-gray-subtler-4);
+    }
+  }
+
+  .rose-tab-icon {
+    svg {
+      width: sizing.rems(m);
+      height: sizing.rems(m);
+      vertical-align: sub;
+    }
+  }
+
+  .rose-tab-badge {
+    @include type.type(xs);
+    margin-left: sizing.rems(xxs);
+  }
+}
@@ -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,6 +1,8 @@
@use '../../variables/sizing';
@use '../../variables/media';

+@import 'tabs';
+
 .rose-layout-page {
  display: grid;
  grid-template-areas:
@@ -0,0 +1,8 @@
+@use '../../variables/sizing';
+
+.rose-layout-tabs {
+  border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
@@ -0,0 +1,3 @@
+<div ...attributes class="rose-layout-tabs">
+  {{yield}}
+</div>
@@ -0,0 +1,22 @@
+<div ...attributes class="rose-tab">
+  <LinkTo
+    title={{@title}}
+    @route={{if @route @route "index"}}
+    @model={{@model}}
+    class={{concat "rose-tab-link" (if @disabled " rose-tab-link-disabled")}}
+  >
+    {{#if @icon}}
+      <span class="rose-tab-icon">{{inline-svg @icon}}</span>
+    {{/if}}
+
+    {{#if @title}}
+      <span class="rose-tab-title">{{@title}}</span>
+    {{/if}}
+
+    {{#if @badge}}
+      <span class="rose-tab-badge">{{@badge}}</span>
+    {{/if}}
+  </LinkTo>
+
+  {{yield}}
+</div>
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/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';
@@ -198,5 +198,7 @@
    <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::Nav::Tab @title="Text" @badge="3" @icon="info-circle-outline" />
  </page.main>
 </Rose::Layout::Page>
@@ -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/layout/tabs', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Tabs />`);
+    assert.ok(find('.rose-layout-tabs'));
+  });
+});
@@ -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`
@@ -0,0 +1,50 @@
+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/tab', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Tab />`);
+    assert.ok(find('a'));
+    assert.ok(find('.rose-tab'));
+    assert.ok(find('.rose-tab-link'));
+    assert.notOk(find('.rose-tab-icon'));
+    assert.notOk(find('.rose-tab-badge'));
+    assert.notOk(find('.rose-tab-link-disabled'));
+  });
+
+  test('it renders with title', async function (assert) {
+    await render(hbs`<Rose::Tab @title="Tab title" />`);
+    assert.equal(find('a').title, 'Tab title');
+    assert.equal(find('.rose-tab-link').textContent.trim(), 'Tab title');
+  });
+
+  test('it renders with icon', async function (assert) {
+    await render(hbs`<Rose::Tab @icon="info-circle-outline" />`);
+    assert.ok(find('svg'));
+    assert.ok(find('.rose-tab-icon'));
+  });
+
+  test('it renders with badge', async function (assert) {
+    await render(hbs`<Rose::Tab @badge="3" />`);
+    assert.ok(find('.rose-tab-badge'));
+    assert.equal(find('.rose-tab-badge').textContent.trim(), '3');
+  });
+
+  test('it render with attributes', async function (assert) {
+    await render(hbs`<Rose::Tab id="tab" />`);
+    assert.ok(find('#tab'));
+  });
+
+  test('it renders disabled', async function (assert) {
+    this.set('disabled', true);
+    await render(hbs`<Rose::Tab @disabled={{this.disabled}} />`);
+    assert.ok(find('.rose-tab-link-disabled'));
+
+    this.set('disabled', false);
+    assert.notOk(find('.rose-tab-link-disabled'));
+  });
+});
				`@@ -0,0 +1 @@`
				`export { default } from 'rose/components/rose/layout/tabs';`