fix: denali tabs behavior and add story (#49)

* fix: denali tabs behavior and add story
- removes possible combination of secondary and vertical which does not
  exist in denali
* refactor: vertical denali-tabs to denali-sidebar

addon/components/denali-sidebar.hbs

@@ -0,0 +1,9 @@
+{{! Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
+<div class="tabs is-vertical is-primary" ...attributes>
+  <ul>
+    {{yield (hash
+      Tab=(component "denali-tabs/tab")
+      LinkToTab=(component "denali-tabs/link-to-tab")
+    )}}
+  </ul>
+</div>

addon/components/denali-sidebar.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright 2020, Verizon Media
+ * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
+ */
+import Component from '@glimmer/component';
+
+export default class DenaliSidebarComponent extends Component {}

addon/components/denali-tabs-enums.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright 2020, Verizon Media
+ * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
+ */
+
+export const STYLES = ['primary', 'secondary'];

addon/components/denali-tabs.hbs

@@ -1,5 +1,5 @@
 {{! Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
-<div class="tabs {{this.styleClass}} {{this.alignmentClass}}" ...attributes>
+<div class="tabs is-horizontal {{this.styleClass}}" ...attributes>
   <ul>
     {{yield (hash
       Tab=(component "denali-tabs/tab")

addon/components/denali-tabs.js

@@ -5,22 +5,13 @@
 import Component from '@glimmer/component';
 import { arg } from 'ember-arg-types';
 import { oneOf } from 'prop-types';
-
-const styles = ['primary', 'secondary'];
-const alignments = ['horizontal', 'vertical'];
+import { STYLES } from './denali-tabs-enums';
 
 export default class DenaliTabsComponent extends Component {
-  @arg(oneOf(styles))
-  style = styles[0];
-
-  @arg(oneOf(alignments))
-  alignment = alignments[0];
+  @arg(oneOf(STYLES))
+  style = STYLES[0];
 
   get styleClass() {
     return `is-${this.style}`;
   }
-
-  get alignmentClass() {
-    return `is-${this.alignment}`;
-  }
 }

app/components/denali-sidebar.js

@@ -0,0 +1 @@
+export { default } from '@denali-design/ember/components/denali-sidebar';

stories/sidebar.stories.js

@@ -0,0 +1,47 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { withKnobs, array, text } from '@storybook/addon-knobs';
+import { attribute, example } from './knob-categories';
+
+export default {
+  title: 'DenaliSidebar',
+  component: 'DenaliSidebar',
+  decorators: [withKnobs],
+};
+
+export const Default = () => ({
+  template: hbs`
+    <DenaliSidebar as |Sidebar|>
+      <Sidebar.LinkToTab @route=".">{{linkToTab}}</Sidebar.LinkToTab>
+      <Sidebar.Tab>{{tabOne}}</Sidebar.Tab>
+      <Sidebar.Tab @isActive={{true}}>{{tabTwo}}</Sidebar.Tab>
+      <Sidebar.Tab @isDisabled={{true}}>{{tabThree}}</Sidebar.Tab>
+    </DenaliSidebar>
+  `,
+  context: {
+    linkToTab: 'LinkTo Sidebar Tab',
+    tabOne: 'Normal Sidebar Tab',
+    tabTwo: 'Active Sidebar Tab',
+    tabThree: 'Disabled Sidebar Tab',
+  },
+});
+
+export const Playground = () => ({
+  template: hbs`
+    <DenaliSidebar class={{class}} as |Sidebar|>
+      {{#each tabs as |tab|}}
+        <Sidebar.Tab 
+          @isActive={{eq activeTab tab}}
+          @isDisabled={{contains tab disabledTabs}}
+        >
+          {{tab}}
+        </Sidebar.Tab>
+      {{/each}}
+    </DenaliSidebar>
+  `,
+  context: {
+    tabs: array('tabs', ['Ember', 'Denali', 'Sidebar'], ',', example),
+    activeTab: text('activeTab', 'Denali', example),
+    disabledTabs: array('disabledTabs', ['Ember'], ',', example),
+    class: text('class', '', attribute),
+  },
+});

stories/tabs.stories.js

@@ -0,0 +1,49 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { withKnobs, array, select, text } from '@storybook/addon-knobs';
+import { argument, attribute, example } from './knob-categories';
+import { STYLES } from '../addon/components/denali-tabs-enums';
+
+export default {
+  title: 'DenaliTabs',
+  component: 'DenaliTabs',
+  decorators: [withKnobs],
+};
+
+export const Default = () => ({
+  template: hbs`
+    <DenaliTabs as |Tabs|>
+      <Tabs.LinkToTab @route=".">{{linkToTab}}</Tabs.LinkToTab>
+      <Tabs.Tab>{{tabOne}}</Tabs.Tab>
+      <Tabs.Tab @isActive={{true}}>{{tabTwo}}</Tabs.Tab>
+      <Tabs.Tab @isDisabled={{true}}>{{tabThree}}</Tabs.Tab>
+    </DenaliTabs>
+  `,
+  context: {
+    linkToTab: 'linkToTab',
+    tabOne: 'Denali',
+    tabTwo: 'Active Tab',
+    tabThree: 'Disabled Tab',
+  },
+});
+
+export const Playground = () => ({
+  template: hbs`
+    <DenaliTabs class={{class}} @style={{style}} as |Tabs|>
+      {{#each tabs as |tab|}}
+        <Tabs.Tab 
+          @isActive={{eq activeTab tab}}
+          @isDisabled={{contains tab disabledTabs}}
+        >
+          {{tab}}
+        </Tabs.Tab>
+      {{/each}}
+    </DenaliTabs>
+  `,
+  context: {
+    style: select('style', STYLES, STYLES[0], argument),
+    tabs: array('tabs', ['Ember', 'Denali', 'Tabs'], ',', example),
+    activeTab: text('activeTab', 'Denali', example),
+    disabledTabs: array('disabledTabs', ['Tabs'], ',', example),
+    class: text('class', '', attribute),
+  },
+});

tests/dummy/app/router.js

@@ -10,7 +10,6 @@ Router.map(function () {
   this.route('four-oh-four');
   this.route('denali-title');
   this.route('denali-menu');
-  this.route('denali-tabs');
   this.route('denali-tag');
   this.route('denali-input-group');
   this.route('denali-text-area');

tests/integration/components/denali-sidebar-test.js

@@ -0,0 +1,46 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | denali-sidebar', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`
+      <DenaliSidebar>
+        The Greatest Sidebar
+      </DenaliSidebar>
+    `);
+
+    assert.dom('.tabs').hasClass('is-primary', 'DenaliSidebar renders a primary style by default');
+    assert.dom('.tabs').hasClass('is-vertical', 'DenaliSidebar renders a vertical style by default');
+  });
+
+  test('it can yield a `Tab` sub component', async function (assert) {
+    await render(hbs`
+      <DenaliSidebar as |Sidebar|>
+        <Sidebar.Tab>
+          The Greatest Tab
+        </Sidebar.Tab>
+      </DenaliSidebar>
+    `);
+
+    assert.dom('.tabs li span').hasText('The Greatest Tab', 'DenaliSidebar can yield a `Tab` sub component');
+  });
+
+  test('it can yield a `LinkToTab` sub component', async function (assert) {
+    await render(hbs`
+      <DenaliSidebar as |Sidebar|>
+        <Sidebar.LinkToTab
+          @route="/"
+        >
+          The Greatest Tab
+        </Sidebar.LinkToTab>
+      </DenaliSidebar>
+    `);
+    assert
+      .dom('.tabs li.ember-view a')
+      .hasText('The Greatest Tab', 'DenaliSidebar can yield a `LinkToTab` sub component');
+  });
+});

tests/integration/components/denali-tabs-test.js

@@ -25,27 +25,15 @@ module('Integration | Component | denali-tabs', function (hooks) {
       </DenaliTabs>
     `);
     assert.dom('.tabs').hasClass('is-primary', 'DenaliTabs renders a primary style by default');
+    assert.dom('.tabs').hasClass('is-horizontal', 'DenaliTabs renders a horizontal style by default');
 
     this.set('style', 'secondary');
     assert
       .dom('.tabs')
       .hasClass('is-secondary', 'DenaliTabs renders a secondary style by setting `@style` arg to secondary');
-  });
-
-  test('it supports alignment', async function (assert) {
-    await render(hbs`
-      <DenaliTabs
-        @alignment={{this.alignment}}
-      >
-        Inner Content
-      </DenaliTabs>
-    `);
-    assert.dom('.tabs').hasClass('is-horizontal', 'DenaliTabs renders a horizontal alignment by default');
-
-    this.set('alignment', 'vertical');
     assert
       .dom('.tabs')
-      .hasClass('is-vertical', 'DenaliTabs renders a vertical alignment by setting `@alignment` arg to vertical');
+      .hasClass('is-horizontal', 'DenaliTabs renders a horizontal style by setting `@style` arg to secondary');
   });
 
   test('it can yield a `Tab` sub component', async function (assert) {