[redesign] implementing tabs interaction

addon/components/es-tab.js

@@ -0,0 +1,15 @@
+import Component from 'sparkles-component';
+import { action } from '@ember-decorators/object';
+
+export default class EsTab extends Component {
+  constructor(args) {
+    super();
+    this.tabs = args.tabs;
+    args.tabs.register(this);
+  }
+
+  @action
+  click() {
+    this.tabs.setActive(this);
+  }
+}

addon/components/es-tabs.js

@@ -0,0 +1,29 @@
+import Component from 'sparkles-component';
+import { set } from '@ember/object';
+import { computed } from '@ember-decorators/object';
+
+export default class EsTabs extends Component {
+  tabs = []
+
+  @computed()
+  get wormholeId() {
+    return `tab-wormhole-${Math.random().toString(36).substring(2)}`;
+  }
+
+  register(tab){
+    if(this.tabs.length === 0) {
+      set(tab, 'active', true);
+    }
+    this.tabs.push(tab);
+  }
+
+  setActive(activeTab) {
+    this.tabs.forEach((tab) => {
+      if(tab === activeTab) {
+        set(tab, 'active', true);
+      } else {
+        set(tab, 'active', false);
+      }
+    })
+  }
+}

addon/templates/components/es-tab.hbs

@@ -0,0 +1,9 @@
+<div class="tabs-item {{if this.active 'tabs-item--active'}}">
+  <a class="tabs-link" href="javascript:void(0)" onclick={{action 'click'}}>{{@title}}</a>
+</div>
+
+{{#if this.active}}
+  <EmberWormhole @to={{@wormholeId}}>
+    <p>{{yield}}</p>
+  </EmberWormhole>
+{{/if}}

addon/templates/components/es-tabs.hbs

@@ -0,0 +1,7 @@
+<div class="tabs">
+  {{yield (component 'es-tab' wormholeId=wormholeId tabs=this)}}
+</div>
+
+<div id={{wormholeId}}>
+
+</div>

app/components/es-tab.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/components/es-tab';

app/components/es-tabs.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/components/es-tabs';

app/templates/components/es-tab.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/templates/components/es-tab';

app/templates/components/es-tabs.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/templates/components/es-tabs';

package.json

@@ -33,6 +33,7 @@
     "ember-cli-postcss": "^4.2.0",
     "ember-svg-jar": "^1.2.2",
     "ember-truth-helpers": "^2.1.0",
+    "ember-wormhole": "^0.5.5",
     "normalize.css": "^8.0.1",
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "^6.6.0",

tests/dummy/app/templates/index.hbs

@@ -31,17 +31,18 @@
   <div class="container">
     <h2 class="large">Batteries are included</h2>
     <p>Ember’s out-of-the-box experience has everything you need to start building on day one, and keep shipping for years. Never wire together your own framework again.</p>
-    <div class="tabs">
-      <div class="tabs-item tabs-item--active">
-        <a class="tabs-link" href="#">Build Pipeline</a>
-      </div>
-      <div class="tabs-item">
-        <a class="tabs-link" href="#">Routing</a>
-      </div>
-      <div class="tabs-item">
-        <a class="tabs-link" href="#">Data Layer</a>
-      </div>
-    </div>
+
+    <EsTabs as |Tab|>
+      <Tab @title="Build Pipeline">
+        Ember CLI is the backbone of modern Ember apps. Code generators let you quickly create new components and tests. Use the local server for a development environment with Babel, fast rebuilds, auto-reloading and a test runner. Build your app for production with a single command.
+      </Tab>
+      <Tab @title="Routing">
+        I love me some routing
+      </Tab>
+      <Tab @title="Data Layer">
+        Let's get our data on 😎
+      </Tab>
+    </EsTabs>
 
     <div class="card">
       <div class="card-content">
@@ -52,4 +53,3 @@
     <p class="medium">Ember CLI is the backbone of modern Ember apps. Code generators let you quickly create new components and tests. Use the local server for a development environment with Babel, fast rebuilds, auto-reloading and a test runner. Build your app for production with a single command.</p>
   </div>
 </section>
-