Initial commit

lib/assets/javascripts/builder/embed/tabs/tab-item.tpl

@@ -0,0 +1,3 @@
+<li class="CDB-NavMenu-item js-tab<% if (isSelected) { %> is-selected<% } %>" data-tab="<%= name %>">
+    <button class="CDB-NavMenu-link u-upperCase"><%= title %></button>
+</li>

lib/assets/javascripts/builder/embed/tabs/tabs-view.js

@@ -0,0 +1,61 @@
+var CoreView = require('backbone/core-view');
+var template = require('./tabs.tpl');
+var tabItemTemplate = require('./tab-item.tpl');
+var checkAndBuildOpts = require('builder/helpers/required-opts');
+
+var REQUIRED_OPTS = [
+  'tabs'
+];
+
+var TabsView = CoreView.extend({
+  module: 'embed:tabs:tabs-view',
+
+  tagName: 'nav',
+
+  className: 'CDB-Embed-tabs CDB-NavMenu js-tabs',
+
+  events: {
+    'click .js-tab': '_onTabClicked'
+  },
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+
+    this.listenTo(this.model, 'change:selected', this._onSelectedTabChanged);
+  },
+
+  render: function () {
+    this.$el.empty();
+
+    this.$el.html(template());
+
+    this._tabs.map(function (tab) {
+      this.$('.js-tabs-container').append(tabItemTemplate({
+        name: tab.name,
+        title: tab.title || tab.name,
+        isSelected: tab.isSelected
+      }));
+    }.bind(this));
+
+    return this;
+  },
+
+  _onSelectedTabChanged: function () {
+    var tabName = this.model.get('selected');
+    var tab = this.$('[data-tab="' + tabName + '"]');
+
+    tab.siblings().removeClass('is-selected');
+    tab.addClass('is-selected');
+  },
+
+  _onTabClicked: function (event) {
+    var tab = this.$(event.currentTarget);
+    var tabName = tab.data('tab');
+
+    this.model.set({
+      selected: tabName
+    });
+  }
+});
+
+module.exports = TabsView;

lib/assets/javascripts/builder/embed/tabs/tabs.tpl

@@ -0,0 +1 @@
+<ul class="CDB-NavMenu-inner CDB-NavMenu-inner--legends CDB-Text is-semibold CDB-Size-medium js-tabs-container"></ul>