sb-styleguide 0.0.9 → 1.0.0

data/vendor/assets/javascripts/styleguide/plugins/tbg-ga-events.js.coffee

@@ -17,30 +17,45 @@
 # limitations under the License.
 #
 
-# Useage:
-# ========================
-# 
-# HAML> %a{:href=>"#clickyclick", :class=>"btn", :data=> {:gaevent=>"category|action|opt_label|opt_value|opt_noninteraction"}}
-# See: https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
-
 plugin = ($)->
 
   "use strict"
 
   # GAEVENT CLASS DEFINITION
-  # ========================= 
+  #
+  # @example How to use with Haml
+  #     %a{ :href => '/some/link', :class => 'btn', :data => { :gaevent => 'category|action|opt_label|opt_value|opt_noninteraction' } }
+  #     # See: https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
+  #
+  # @example How to ensure plugin self initialises on element
+  #     <form data-gaevent-load="true"> ... </form>
+  #
   class GAEvent
+
+    # Construct a GAEvent instance - split the event content string and pass to sendEvent
+    #
+    # @param [Object] element HTMLElement
+    # @param [String] eventcontent Pipe delimited string of event content
+    #
     constructor: ( element, @eventcontent ) ->
       $el = $(element)
       @sendEvent (if typeof eventcontent.split('|') isnt "array" then eventcontent.split('|') else [eventcontent])
 
     _constructor: GAEvent
 
+    # Send the event to Google Analytics
+    #
+    # @param [Array] data If Google Analytics _gaq array defined then push data array after inserting '_trackEvent' string at beginning of data array
+    #
     sendEvent : (data)->
       data.unshift('_trackEvent')
       _gaq?.push data
 
-  # Private method
+  # Remove data and data attributes from jQuery object
+  #
+  # @param [Object] $el jQuery wrapped HTMLElement from which to remove data
+  # @param [String] ev Data string to be removed
+  #
   removeData = ( $el, ev )->
     $el.removeAttr('data-' + ev)
     $el.removeData(ev)
@@ -63,6 +78,11 @@ plugin = ($)->
   # DATA API
   # ===================================
 
+  # On document ready, delegate a click handler on the body for 'click.gaEvent.data-api'
+  #   event with target of '[data-gaevent]' and attach plugin; attach a handler for
+  #   'tbgform-success.gaEvent.data-api' event and attach plugin; attach plugin to each
+  #   element with '[data-gaevent-load]' attribute
+  #
   $ ->
 
     $('body').on 'click.gaEvent.data-api', '[data-gaevent]' , ( e ) ->

data/vendor/assets/javascripts/styleguide/plugins/tbg-respinsiveresize.js.coffee

@@ -25,22 +25,41 @@ plugin = ($)->
 
   "use strict"
 
+  # RESIZEHANDLER CLASS DEFINITION
+  #
+  # @example How to use the class
+  #     resizeHandlerInstance = new ResizeHandler()
+  #
   class ResizeHandler
+
+    # Construct a new ResizeHandler instance
+    #
+    # Create resizeEvent method to trigger 'responsiveResize' event with current size
+    #
     constructor: ->
       $window = $(window)
       @resizeEvent = => 
         $window.trigger 'responsiveResize', @size()
       @resizeTimer = null
 
-
+    # Set a timeout to call resizeEvent after 100ms, clearing existing timeout if one set
+    #
     resize: ->
       if @resizeTimer then clearTimeout @resizeTimer
       @resizeTimer = setTimeout @resizeEvent, 100
 
+    # Get a string representation of grid name
+    #
+    # Grid name set in CSS content on body::after pseudo-element
+    #
+    # @return [String] Grid name if available or empty string
+    #
     size: ->
       if not window.getComputedStyle? then return ''
       window.getComputedStyle(document.body,':after').getPropertyValue('content').replace('-','') || ''
-
+  
+  # Create instance of ResizeHandler on document ready, call resize() on window 'resize' event
+  #
   $ ->
     resizeHandler = new ResizeHandler()
     $(window).on 'resize', ()=> resizeHandler.resize()

data/vendor/assets/javascripts/styleguide/plugins/tbg-switch.js.coffee

@@ -21,8 +21,24 @@ plugin = ($)->
   "use strict"  
 
   # SWITCH CLASS DEFINITION
-  # ========================= 
+  # 
+  # @example How to ensure plugin self initialises on element
+  #     <div data-switch="true"> ... </div>
+  # 
+  # @example How to group switches and allow them to change state of other switches in that group
+  #     <div data-switch-group="[group name]"> ... </div>
+  # 
+  # @example How to toggle switch state
+  #     <div data-switch-toggle="true"> ... </div>
+  #
   class Switch 
+    
+    # Construct a new Switch instance
+    #
+    # Set this.parent, this.target, this.group and this.container elements for this.el; set this.toggle if attribute present
+    #
+    # @param [Object] el HTMLElement, this.el, that acts as the switch
+    #
     constructor: ( @el ) ->
       @parent = if (parent = @el.parent('li')).length then parent else @el.parent()
       @content = @_getContent @el
@@ -32,8 +48,11 @@ plugin = ($)->
 
     activeClass: "is-active"
 
-    _constructor:  Switch
+    _constructor: Switch
 
+    # Click handler - If this.parent isn't active, close group if this.group defined and change state to true;
+    #   if this.parent is active and this.toggle set then change state to false otherwise return undefined
+    #
     click: ->
       if @parent.hasClass(@activeClass)
         if @toggle then return @changeStateTo false else return
@@ -42,14 +61,30 @@ plugin = ($)->
 
       @changeStateTo true
 
+    # Change active state of target content - add or remove activeClass from content and parent elements
+    #
+    # @param [Boolean] action true to addClass to elements, false to removeClass from elements
+    # @param [Array] elements array of jQuery wrapped HTMLElements - target content element and parent element
+    #
     changeStateTo: (action, elements =  [@content, @parent]) ->
       el["#{if action then "add" else "remove"}Class"] @activeClass for el in elements
 
+    # Close group - if any content is active, get the target for that element's descendant link element and pass false and
+    #   elements array [activeContent, activeEl] to switch group
+    #
+    # @private
+    #
     _closeGroup: ->
       if (activeEl = @container.find("li.#{@activeClass}")).length
         activeContent = @_getContent activeEl.children('a')
         @changeStateTo false, [activeContent, activeEl]
 
+    # Get target element to do switch on
+    #
+    # @private
+    # @param [Object] el jQuery wrapped HTMLElement to get target element from
+    # @return [Object] jQuery wrapped HTMLElement for el's target element
+    #
     _getContent: ( el ) ->
       $(el.attr 'href')
 

data/vendor/assets/stylesheets/_mixins.css.scss

@@ -3,6 +3,41 @@
 // @author Ad Taylor
 //
 
+// ==========================================================================
+// Column helper
+// For each grid, output conditional display classes, within media queries if appropriate
+// ==========================================================================
+
+@mixin create-conditional-classes($grids) {
+  @each $grid in $grids {
+    $grid-name: nth($grid, 1);
+
+    @each $nested-grid in $grids {
+      $nested-grid-name: nth($nested-grid, 1);
+
+      @include is-responsive($nested-grid){
+        @include conditional-display($grid-name, $nested-grid-name);
+      }      
+    }
+  }
+}
+
+// ==========================================================================
+// Column helper
+// Abstract the conditional display classes from @mixin create-conditional-classes
+// ==========================================================================
+
+@mixin conditional-display($grid-name, $nested-grid-name){  
+  @if($grid-name == $nested-grid-name) {
+    .#{$grid-name}hide{display:none !important}
+    .#{$grid-name}only{display:block !important}
+  }
+  @else {
+    .#{$grid-name}hide{display:block !important}
+    .#{$grid-name}only{display:none !important}
+  }
+}
+
 // ==========================================================================
 // Create column sizes
 // ==========================================================================
@@ -12,41 +47,35 @@
   @each $grid in $grids {
     // If there is a media query
     @if(length($grid) == 1){}
-    @else if(length($grid) == $query-pos) {
-
-      .#{nth($grid,1)}only {
-        display: none !important;
-      }
-
-      // Add Rules wrapped in media query
-      @include media-query( nth($grid,$query-pos)) {
+    @else if(length($grid) >= $query-pos) {
+      @include media-query($grid) {
         @include build-column-size($grid);
-        .#{nth($grid,1)}only {
-          display: block !important;
-        }
-
-        .#{nth($grid,1)}hide {
-          display: none !important;
-        }
       }
     }
     @else {
       @include build-column-size($grid);
     }
   }
+  @include create-conditional-classes($grids);
 }
 
+// ==========================================================================
+// Build column size
+// ==========================================================================
+
 @mixin build-column-size($grid) {
   $padding-pos: 3;
   $total-columns: nth($grid,2);
+
   @if(length($grid) >= $padding-pos ) {
     .column {
       padding: 0 (0.5 * nth($grid,$padding-pos));
-      @if($total-columns == 1){
-        float: none;
-        width: auto;
-        right: auto;
-        left: auto;
+      @if($total-columns > 1){
+        float: left;
+        width: 100%;
+        & + &:last-child {
+          float: right;
+        }
       }
     }
   }
@@ -70,8 +99,6 @@
       right: 0;
     }
   }
-
-
 }
 
 // ==========================================================================
@@ -79,20 +106,20 @@
 // ==========================================================================
 
 @mixin conditional-CSS($grids) {
-  $query-pos: 4;
+  $query-pos: 5;
 
   @each $grid in $grids {
     @if(length($grid) < $query-pos){
       body:after {
-        content: nth($grid,1);;
+        content: nth($grid,1);
         display: none;
       }
     }
     @else {
-      @include media-query( nth($grid,$query-pos)) {
+      @include media-query($grid) {
         body:after {
-          content: nth($grid,1);;
-          display: none;
+          content:nth($grid, 1);
+          display:none;
         }
       }
     }
@@ -103,9 +130,14 @@
 // Simple Media Query Generator
 // ==========================================================================
 
-@mixin media-query($size) {
-  @media ($size) {
-    @content;
+@mixin media-query($gridObj) {
+  @if length($gridObj) > 3 {
+    $queryType: nth($gridObj, 4);
+    $querySize: nth($gridObj, 5);
+
+    @include respond-to($queryType, $querySize) {
+      @content;
+    }
   }
 }
 
@@ -167,14 +199,75 @@
 
 // ==========================================================================
 // Smallest query
+// Output within a media query for the smallest breakpoint
+// @param [Boolean] $ie-override - if true and $old-ie true, output regularly
 // ==========================================================================
 
-@mixin smallest-query {
-  $query-position: 4;
-  $length: length($grids);
-  $mobile: nth($grids, $length);
+@mixin smallest-query($ie-override: false) {
+  @if length($grids) > 1 {
+    $length: length($grids);
+    $mobile: nth($grids, 2);
+
+    @include media-query($mobile) {
+      @content;
+    }
+  }
+  // If old IE and override both set,
+  // output without query
+  @if $old-ie and $ie-override {
+    @content;
+  }
+}
+
+// ==========================================================================
+// Is Responsive? - helper
+// Pass in content to be conditionally output either in a media query or by default
+// ==========================================================================
 
-  @include media-query( nth($mobile,$query-position)) {
+@mixin is-responsive($grid){
+  @if length($grid) > 3 {
+    @include media-query($grid){
+      @content;
+    }
+  }
+  @else {
     @content;
   }
 }
+
+// ==========================================================================
+// Respond to - helper
+// If IE has a fixed query ($fixed-mqs) set, output it by default, otherwise output media query
+// ==========================================================================
+
+@mixin respond-to($query, $size) {  
+  @if $fixed-mqs {
+    @if $query == "max" {
+      @if $container-width == $size {
+        @content;
+      }
+    }
+    @else if $query == "min" {
+      @if $container-width == $size {
+        @content;
+      }
+    }
+  }
+  @else {
+    // output normally
+    @media ("#{$query}-width: #{$size}") {
+      @content;
+    }
+  }
+}
+
+// ==========================================================================
+// Old IE
+// If old IE version (7,8) output IE only styles
+// ==========================================================================
+
+@mixin old-ie {
+  @if $old-ie {
+    @content;
+  }
+}

data/vendor/assets/stylesheets/_settings.css.scss

@@ -13,13 +13,16 @@ $container-max-width: 100% !default;
 $container-min-width: 320px !default;
 
 $columns: 12 !default;
-$column-gutter: 10px !default;
+$column-gutter: 20px !default;
 
 
-$mob: 'mobile-', 1, 20px, "max-width: 780px" ;
-$desk: '', $columns, $column-gutter;
+$mob: 'mobile-', 1, 20px;
+$desk: '', $columns, $column-gutter, "min", $container-width;
 
-$grids : $desk, $mob !default;
+$grids : $mob, $desk !default;
+
+$fixed-mqs: false !default;
+$old-ie: false !default;
 
 // ==========================================================================
 // Colour Functions

data/vendor/assets/stylesheets/styleguide/base/_labels.css.scss

@@ -4,6 +4,23 @@
 //
 @import "compass/css3";
 
+// ==========================================================================
+// Label colouring in
+// ==========================================================================
+
+@mixin label-color($color, $hover-color, $txt-color, $hover-txt-color: false) {
+  background-color: $color;
+  color: $txt-color;
+
+  &:hover, &.is-active {
+    background-color: $hover-color;
+    @if $hover-txt-color {
+      color: $hover-txt-color;
+    } @else {
+      color: $txt-color;
+    }
+  }
+}
 
 // ==========================================================================
 // Default alert
@@ -17,9 +34,7 @@
 
   @include border-radius( ms(0)/4 );
 
-  background-color: mono(2);
-
-  color: $white;
+  @include label-color( mono(2), mono(3) , $white);
   @extend small;
   line-height: 1;
   text-align: center;
@@ -28,15 +43,16 @@
 
   /* Label colors */
   &.orange {
-    background-color: orange();
+    @include label-color( orange(), orange(2), $white );
   }
 
   &.blue {
-    background-color: blue();
+    @include label-color( blue(), blue(2), $white );
  }
 
   &.green {
-    background-color: green();
+    @include label-color( green(), green(2), $white);
  }
 
 }
+