fortitude-sass 0.6.5 → 0.7.0

data/jasmine/fixtures/selectInputFixture.html

@@ -0,0 +1,13 @@
+<select class="select-input" id="select-with-placeholder">
+  <option class="placeholder" selected="true">
+    Placeholder option
+  </option>
+  <option value="2">Real option 1</option>
+  <option value="3">Real option 2</option>
+</select>
+
+<select class="select-input" id="select-without-placeholder">
+  <option >Placeholder option</option>
+  <option value="2">Real option 1</option>
+  <option value="3">Real option 2</option>
+</select>

data/jasmine/fixtures/shadeFixture.html

@@ -0,0 +1,2 @@
+<div class="shade"></div>
+<button type="button" data-ft-shade="true"></button>

data/jasmine/fixtures/tabsFixture.html

@@ -0,0 +1,22 @@
+<ul class="tabs-navigation">
+  <li class="tabs-navigation__item" data-ft-tab="tab-one">
+    <a href="javascript:void(0);" class="tabs-navigation__link">
+      Item 1
+    </a>
+  </li>
+  <li class="tabs-navigation__item" data-ft-tab="tab-two">
+    <a href="javascript:void(0);" class="tabs-navigation__link">
+      Item 2
+    </a>
+  </li>
+</ul>
+
+<div class="tabs">
+  <div class="tabs__target" id="tab-one">
+    Content for tab 1
+  </div>
+
+  <div class="tabs__target" id="tab-two">
+    Content for tab 2
+  </div>
+</div>

data/jasmine/fixtures/transitionWithFixture.html

@@ -0,0 +1,6 @@
+<div id="transition" 
+     class="animated showing transparent"
+     data-ft-show-class="grow"
+     data-ft-hide-class="fadeOut"></div>
+
+<div id="no-transition"></div>

data/jasmine/fixtures/viewportFixture.html

@@ -0,0 +1,2 @@
+<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=7" />
+<input type="text" />

data/jasmine/fixtures/waitForAnimationFixture.html

@@ -0,0 +1 @@
+<div id="animate" class="animated tiny"></div>

data/jasmine/helpers/fixtureHelper.js

@@ -0,0 +1,4 @@
+(function($){
+  'use strict';
+  jasmine.getFixtures().fixturesPath = 'fixtures';
+})(jQuery);

data/jasmine/helpers/multiCallbackHelper.js

@@ -0,0 +1,24 @@
+(function(_){
+  // 'use strict';
+
+  _.mixin({
+    multiCallback: function(elementArr){
+      var deferred = $.Deferred(),
+          finished = [];
+
+      _.forEach(elementArr, function(spec){
+        var eventName = spec[0],
+            $element  = spec[1];
+
+        $element.on(eventName, function(){
+          finished.push([eventName, $element]);
+          if(finished.length === elementArr.length){
+            deferred.resolve(finished);
+          }
+        });
+      });
+
+      return deferred.promise();
+    }
+  });
+})(_);

data/jasmine/specs/blocks/dropdownSpec.js

@@ -0,0 +1,106 @@
+(function($){
+  'use strict';
+
+  describe('.dropdown', function(){
+    var notChecked = '.dropdown__text:not(.dropdown__text--is-checked)',
+        checkNotVisible = function($dropdown){
+          expect($dropdown.find(notChecked)).toBeVisible();
+          expect($dropdown.find('.dropdown__text--is-checked')).not.toBeVisible();
+          expect($dropdown.find('.dropdown__navigation')).not.toBeVisible();
+        },
+        checkIsVisible = function($dropdown){
+          expect($dropdown.find(notChecked)).not.toBeVisible();
+          expect($dropdown.find('.dropdown__text--is-checked')).toBeVisible();
+          expect($dropdown.find('.dropdown__navigation')).toBeVisible();
+        },
+        checkDropdown = function($element){
+          $element.find('.dropdown__toggle').prop('checked', true).trigger('change');
+        },
+        $dropdowns;
+
+    beforeEach(function(){
+      loadFixtures('dropdownFixture.html');
+      $dropdowns = $('.dropdown');
+    });
+
+    it('is not open by default', function(){
+      checkNotVisible($dropdowns.eq(0));
+    });
+
+    it('becomes visible when checked', function(done){
+      var $dropdown = $dropdowns.eq(0);
+      checkDropdown($dropdown);
+
+      $dropdown.on('opened.ft.dropdown', function(){
+        checkIsVisible($dropdown);
+        $dropdowns.not($dropdowns.eq(0)).each(function(){
+          checkNotVisible($(this));
+        });
+        done();
+      });
+    });
+
+    it('hides dropdowns with the same data-ft-dropdown', function(done){
+      var $first = $dropdowns.eq(0),
+          $second = $dropdowns.eq(1);
+
+      checkDropdown($first);
+      $first.on('opened.ft.dropdown', function(){
+        checkDropdown($second);
+      });
+
+      $first.on('closed.ft.dropdown', function(){
+        checkNotVisible($first);
+        checkIsVisible($second);
+        done();
+      });
+    });
+
+    it('allows open dropdowns that do not have the same data-ft-dropdown', function(done){
+      var $first = $dropdowns.eq(0),
+          $second = $dropdowns.eq(2);
+
+      checkDropdown($first);
+      $first.on('opened.ft.dropdown', function(){
+        checkDropdown($second);
+      });
+
+      $second.on('opened.ft.dropdown', function(){
+        expect($first).not.toHaveClass('fadeOut');
+        checkIsVisible($second);
+        done();
+      });
+    });
+
+    it('hides fellow dropdowns, but not others', function(done){
+      var allFinished = [];
+
+      checkDropdown($dropdowns.eq(0));
+      checkDropdown($dropdowns.eq(2));
+      checkDropdown($dropdowns.eq(3));
+
+      // partner of 0
+      $dropdowns.eq(0).on('opened.ft.dropdown', function(){
+        checkDropdown($dropdowns.eq(1));
+      });
+
+      // partner of 3
+      $dropdowns.eq(3).on('opened.ft.dropdown', function(){
+        checkDropdown($dropdowns.eq(4));
+      });
+
+      _.multiCallback([
+        ['opened.ft.dropdown', $dropdowns.eq(2)],
+        ['closed.ft.dropdown', $dropdowns.eq(0)],
+        ['closed.ft.dropdown', $dropdowns.eq(3)]
+      ]).then(function(){
+        checkIsVisible($dropdowns.eq(1));
+        checkIsVisible($dropdowns.eq(2));
+        checkNotVisible($dropdowns.eq(0));
+        checkIsVisible($dropdowns.eq(4));
+        checkNotVisible($dropdowns.eq(3));
+        done();
+      });
+    });
+  });
+})(jQuery);

data/jasmine/specs/blocks/flashbarSpec.js

@@ -0,0 +1,22 @@
+(function($){
+  'use strict';
+
+  describe(".flashbar", function(){
+    var $flashbar;
+
+    beforeEach(function(){
+      loadFixtures('flashbarFixture.html');
+      $flashbar = $('.flashbar');
+    });
+
+    it('removes flashbar when close is clicked', function(done){
+      $flashbar.find('.flashbar__close').trigger('click');
+      $flashbar.on('closed.ft.flashbar', function(){
+        expect($flashbar).toHaveClass('flashbar--closed');
+        expect($flashbar).not.toBeVisible();
+        done();
+      });
+    });
+  });
+
+})(jQuery);

data/jasmine/specs/blocks/modalSpec.js

@@ -0,0 +1,66 @@
+(function($){
+  'use strict';
+
+  describe(".modal", function(){
+    var $modal, $animatedModal, $button, $animateButton, $shade, $closeButton;
+
+    beforeEach(function(){
+      loadFixtures('modalFixture.html');
+      $modal = $('#example-modal');
+      $button = $('button[data-ft-modal="example-modal"]');
+      $closeButton = $('button[data-ft-modal-close]');
+      $shade = $('.shade');
+    });
+
+    it('is not visible by default', function(){
+      expect($shade).not.toBeVisible();
+      expect($modal).not.toBeVisible();
+    });
+
+    it('shows modal on data-ft-modal click', function(done){
+      $button.trigger('click');
+      _.multiCallback([
+        ['opened.ft.shade', $shade],
+        ['opened.ft.modal', $modal]
+      ]).then(function(){
+        expect($shade).toBeVisible();
+        expect($modal).toBeVisible();
+        done();
+      });
+    });
+
+    it('hides modal on data-ft-modal-close click', function(done){
+      $modal.trigger('open.ft.modal');
+      $modal.on('opened.ft.modal', function(){
+        $closeButton.trigger('click');
+      });
+
+      _.multiCallback([
+        ['closed.ft.shade', $shade],
+        ['closed.ft.modal', $modal]
+      ]).then(function(){
+        expect($shade).not.toBeVisible();
+        expect($modal).not.toBeVisible();
+        done();
+      });
+
+    });
+
+    it('hides modal on .shade click', function(done){
+      $modal.trigger('open.ft.modal');
+      $modal.on('opened.ft.modal', function(){
+        $shade.trigger('click');
+      });
+
+      _.multiCallback([
+        ['closed.ft.shade', $shade],
+        ['closed.ft.modal', $modal]
+      ]).then(function(){
+        expect($shade).not.toBeVisible();
+        expect($modal).not.toBeVisible();
+        done();
+      });
+    });
+  });
+
+})(jQuery);

data/jasmine/specs/blocks/navigationbarSpec.js

@@ -0,0 +1,34 @@
+(function($){
+  'use strict';
+
+  describe(".navigationbar", function(){
+    var $navbar, $shade;
+
+    beforeEach(function(){
+      loadFixtures('navigationbarFixture.html');
+      $navbar = $('.navigationbar');
+      $shade = $('.shade');
+    });
+
+    it('does not have the shade open by default', function(){
+      expect($shade).not.toBeVisible();
+    });
+
+    it('opens the shade when toggle helper checked', function(done){
+      $navbar.find('.navigationbar__toggle__helper').trigger('click');
+      $shade.on('opened.ft.shade', function(){
+        expect($shade).toBeVisible();
+        done();
+      });
+    });
+
+    it('closes the shade when toggle helper unchecked', function(done){
+      $navbar.find('.navigationbar__toggle__helper').trigger('click');
+      $navbar.find('.navigationbar__toggle__helper').trigger('click');
+      $shade.on('closed.ft.shade', function(){
+        expect($shade).not.toBeVisible();
+        done();
+      });
+    });
+  });
+})(jQuery);

data/jasmine/specs/blocks/selectInputSpec.js

@@ -0,0 +1,31 @@
+(function($){
+  'use strict';
+
+  describe('.select-input', function(){
+    var $select, $noPlaceholder;
+
+    beforeEach(function(){
+      loadFixtures('selectInputFixture.html');
+      $select = $('#select-with-placeholder');
+      $noPlaceholder = $('#select-without-placeholder');
+      $(document).trigger('setup.ft.select');
+    });
+
+    it('shows the default options class by default', function(){
+      expect($select).toHaveClass('select-input');
+      expect($select).toHaveClass('placeholder');
+    });
+
+    it('removes the class when the option changes', function(){
+      $select.val(2).trigger('change');
+      expect($select).toHaveClass('select-input');
+      expect($select).not.toHaveClass('placeholder');
+    });
+
+    it('does not set placeholders when no classes present', function(){
+      expect($noPlaceholder).not.toHaveClass('placeholder');
+      $noPlaceholder.val(2).trigger('change');
+      expect($noPlaceholder).not.toHaveClass('placeholder');
+    });
+  });
+})(jQuery);

data/jasmine/specs/blocks/shadeSpec.js

@@ -0,0 +1,38 @@
+(function($){
+  'use strict';
+
+  describe(".shade", function(){
+    var $shade;
+
+    beforeEach(function(){
+      loadFixtures('shadeFixture.html');
+      $shade = $('.shade');
+    });
+
+    it("is not immediately visible", function(){
+      expect($shade).not.toBeVisible();
+    });
+
+    it("is visible after event trigger", function(done){
+      $('[data-ft-shade]').trigger('click');
+      $shade.on('opened.ft.shade', function(){
+        expect($shade).toHaveClass('shade--is-active');
+        expect($shade).toBeVisible();
+        done();
+      });
+    });
+
+    it("closes when clicked on", function(done){
+      $shade.trigger('open.ft.shade');
+      $shade.on('opened.ft.shade', function(){
+        expect($shade).toHaveClass('shade--is-active');
+        $shade.trigger('click');
+      });
+
+      $shade.on('closed.ft.shade', function(){
+        expect($shade).not.toBeVisible();
+        done();
+      });
+    });
+  });
+})(jQuery);

data/jasmine/specs/blocks/tabsSpec.js

@@ -0,0 +1,63 @@
+(function($){
+  'use strict';
+
+  describe('.tabs-navigation and .tabs', function(){
+    var itemActive = 'tabs-navigation__item--is-active',
+        targetActive = 'tabs__target--is-active',
+        $itemOne, $itemTwo, $targetOne, $targetTwo;
+
+    beforeEach(function(){
+      loadFixtures('tabsFixture.html');
+      $itemOne = $('[data-ft-tab="tab-one"]');
+      $targetOne = $('#tab-one');
+
+      $itemTwo = $('[data-ft-tab="tab-two"]');
+      $targetTwo = $('#tab-two');
+    });
+
+    it('does not show tabs by default', function(){
+      expect($itemOne).not.toHaveClass(itemActive);
+      expect($itemTwo).not.toHaveClass(itemActive);
+      expect($targetOne).not.toBeVisible();
+      expect($targetTwo).not.toBeVisible();
+    });
+
+    it('shows tab one on click', function(done){
+      $itemOne.trigger('click');
+      _.multiCallback([
+        ['opened.ft.tab', $itemOne],
+        ['opened.ft.tabtarget', $targetOne]
+      ]).then(function(){
+        expect($itemOne).toHaveClass(itemActive);
+        expect($itemTwo).not.toHaveClass(itemActive);
+
+        expect($targetOne).toHaveClass(targetActive);
+        expect($targetOne).toBeVisible();
+
+        expect($targetTwo).not.toHaveClass(targetActive);
+        expect($targetTwo).not.toBeVisible();
+        done();
+      });
+    });
+
+    it('marks other tabs as inactive', function(done){
+      $itemOne.trigger('select.ft.tab');
+      $itemTwo.trigger('select.ft.tab');
+
+      _.multiCallback([
+        ['opened.ft.tab', $itemTwo],
+        ['opened.ft.tabtarget', $targetTwo]
+      ]).then(function(){
+        expect($itemOne).not.toHaveClass(itemActive);
+        expect($itemTwo).toHaveClass(itemActive);
+
+        expect($targetOne).not.toHaveClass(targetActive);
+        expect($targetOne).not.toBeVisible();
+
+        expect($targetTwo).toHaveClass(targetActive);
+        expect($targetTwo).toBeVisible();
+        done();
+      });
+    });
+  });
+})(jQuery);