reustyle 2.0.7

data/vendor/assets/javascripts/ustyle/tabs.js

@@ -0,0 +1,166 @@
+window.Tabs = (function(Utils) {
+
+  var addClass = Utils.addClass;
+  var hasClass = Utils.hasClass;
+  var removeClass = Utils.removeClass;
+  var setOptions = Utils.setOptions;
+  var forEach = Utils.forEach;
+
+  Tabs.prototype.defaults = {
+    tabContainer: ".us-tabs",
+    tabLinks: ".us-tabs-nav-mainlink",
+    tabNav: ".us-tabs-nav",
+    changeUrls: true,
+    activeClass: "active",
+    collapsible: false,
+    autoScroll: true
+  };
+
+  function Tabs(options) {
+    var ref = this.options = setOptions(options, this.defaults);
+    var tabContainer = ref.tabContainer;
+    var tabLinks = ref.tabLinks;
+
+    this.activeTabEvent = new CustomEvent('ustyle.tab.active');
+    this.tabs = document.querySelectorAll(tabContainer + ' ' + tabLinks);
+    if(!this.tabs.length) return;
+    this.filter = this.tabs.item(0).getAttribute("data-target") ? "data-target" : "href";
+    this.init();
+
+    var handleClick = (function (_this) {
+      return function (e) {
+        var target = e.currentTarget;
+        if (_this.isAccordion() && _this.options.collapsible && _this.isActive(target)) {
+          _this.collapse(target);
+          _this.hashClear();
+        } else {
+          _this.navigateTo(target);
+          _this.scrollToTab(target);
+          _this.hashChange(target);
+        }
+
+        return e.preventDefault();
+      }
+    })(this);
+
+    forEach(this.tabs, function (index, tab) {
+      tab.addEventListener('click', handleClick);
+    });
+  }
+
+  Tabs.prototype.init = function() {
+    var activeTab = this.activeTab();
+    var initialHash = this.tabFromHash();
+
+    if (initialHash) {
+      return this.navigateTo(initialHash);
+    } else if (activeTab) {
+      return this.navigateTo(activeTab);
+    } else if (!this.options.collapsible || !this.isAccordion()) {
+      return this.navigateTo(this.tabs.item(0));
+    }
+  };
+
+  Tabs.prototype.hashChange = function(target) {
+    if (!this.options.changeUrls) return;
+
+    return window.location.replace("#!" + (getSelector(target).replace(/#/, "")));
+  };
+
+  Tabs.prototype.hashClear = function() {
+    if (!this.options.changeUrls) return;
+
+    var url = window.location.pathname + window.location.search;
+    return typeof history.replaceState === "function" ? history.replaceState("", document.title, url) : void 0;
+  };
+
+  Tabs.prototype.navigateTo = function(target) {
+    var selector = getSelector(target);
+    var selected = document.querySelector(selector);
+    var activeClass = this.options.activeClass;
+    var filter = this.filter;
+
+    forEach(this.tabs, function (index, tab) {
+      removeClass(tab, activeClass);
+    });
+
+    forEach(this.tabs, function (index, tab) {
+      if (tab.getAttribute(filter) === selector) {
+        return addClass(tab, activeClass);
+      }
+    });
+
+    forEach(selected.parentNode.children, function (index, child) {
+      if (child !== selected) {
+        removeClass(child, activeClass);
+      }
+    });
+
+    addClass(selected, activeClass);
+    return selected.dispatchEvent(this.activeTabEvent);
+  };
+
+  Tabs.prototype.collapse = function(target) {
+    var selected = document.querySelector(getSelector(target));
+    var activeClass = this.options.activeClass;
+
+    forEach(this.tabs, function (index, tab) {
+      removeClass(tab, activeClass);
+    });
+
+    return removeClass(selected, activeClass);
+  };
+
+  Tabs.prototype.scrollToTab = function(target) {
+    if (!(this.isAccordion() && this.options.autoScroll)) {
+      return;
+    }
+
+    var selected = document.querySelector(getSelector(target));
+    return selected.scrollIntoView();
+  };
+
+  Tabs.prototype.activeTab = function() {
+    var activeTab = null;
+    var activeClass = this.options.activeClass;
+    var matchingTab = null;
+
+    forEach(this.tabs, function (index, tab) {
+      if (hasClass(tab, activeClass)) {
+        return matchingTab = tab;
+      }
+    });
+
+    return matchingTab;
+  };
+
+  Tabs.prototype.tabFromHash = function() {
+    var tabId = window.location.hash.replace("!", "");
+    var filter = this.filter;
+    var matchingTab = null;
+
+    forEach(this.tabs, function (index, tab) {
+      if (tab.getAttribute(filter) === tabId) {
+        return matchingTab = tab;
+      }
+    });
+
+    return matchingTab;
+  };
+
+  Tabs.prototype.isActive = function(target) {
+    return getSelector(target) === getSelector(this.activeTab());
+  };
+
+  Tabs.prototype.isAccordion = function() {
+    var tabNav = document.querySelector(this.options.tabNav);
+
+    return !(tabNav.offsetWidth > 0 || tabNav.offsetHeight > 0);
+  };
+
+  var getSelector = function(clicked) {
+    if(clicked) return clicked.getAttribute("data-target") || clicked.getAttribute("href");
+  };
+
+  return Tabs;
+})(this.Utils);

data/vendor/assets/javascripts/ustyle/utils.js

@@ -0,0 +1,113 @@
+var slice = [].slice;
+var hasProp = {}.hasOwnProperty;
+
+if (this.Utils == null) {
+  this.Utils = {
+    modules: []
+  };
+}
+
+var addClass = function(element, name) {
+  removeClass(element, name);
+  return element.className += " " + name + " ";
+};
+
+var removeClass = function(element, name) {
+  var regExp = new RegExp("(\\s|^)" + name + "(\\s|$)", "gi");
+  return element.className = element.className.replace(regExp, "");
+};
+
+var hasClass = function(element, name) {
+  return new RegExp("(^| )" + name + "( |$)", "gi").test(element.className);
+};
+
+var merge = function() {
+  var extension;
+  var i;
+  var len;
+  var property;
+  var target = arguments[0];
+  var extensions = 2 <= arguments.length ? slice.call(arguments, 1) : [];
+
+  for (i = 0, len = extensions.length; i < len; i++) {
+    extension = extensions[i];
+    for (property in extension) {
+      if (!hasProp.call(extension, property)) continue;
+      target[property] = extension[property];
+    }
+  }
+
+  return target;
+};
+
+var setOptions = function(options, defaults) {
+  return merge({}, defaults, options);
+};
+
+var deleteUndefined = function(obj) {
+  var key;
+  var value;
+  var results = [];
+  for (key in obj) {
+    value = obj[key];
+    if (value === null || value === void 0) {
+      results.push(delete obj[key]);
+    } else {
+      results.push(void 0);
+    }
+  }
+
+  return results;
+};
+
+var transformKey = (function() {
+  var i;
+  var key;
+  var len;
+  var el = document.createElement("div");
+  var transforms = ["transform", "webkitTransform", "OTransform", "MozTransform", "msTransform"];
+  for (i = 0, len = transforms.length; i < len; i++) {
+    key = transforms[i];
+    if (el.style[key] !== void 0) {
+      return key;
+    }
+  }
+})();
+
+var requestAnimationFrame = (function(window) {
+  var i;
+  var len;
+  var vendor;
+  var ref =  ["ms", "moz", "webkit", "o"];
+
+  for (i = 0, len = ref.length; i < len; i++) {
+    vendor = ref[i];
+    if (window.requestAnimationFrame) {
+      break;
+    }
+
+    window.requestAnimationFrame = window[vendor + "RequestAnimationFrame"];
+  }
+
+  return window.requestAnimationFrame || (window.requestAnimationFrame = function(callback) {
+    return setTimeout(callback, 1000 / 60);
+  });
+})(window);
+
+var forEach = function (array, callback, scope) {
+  for (var i = array.length - 1; i >= 0; i--) {
+    callback.call(scope, i, array[i]);
+  }
+};
+
+this.Utils = {
+  addClass: addClass,
+  removeClass: removeClass,
+  hasClass: hasClass,
+  merge: merge,
+  setOptions: setOptions,
+  deleteUndefined: deleteUndefined,
+  transformKey: transformKey,
+  requestAnimationFrame: requestAnimationFrame,
+  forEach: forEach
+};

data/vendor/assets/javascripts/ustyle.js

@@ -0,0 +1,4 @@
+//= require ustyle/utils
+//= require ustyle/backdrop
+//= require ustyle/overlay
+//= require ustyle/tabs

data/vendor/assets/stylesheets/rebrand-content.scss

@@ -0,0 +1 @@
+@import "ustyle/content";

data/vendor/assets/stylesheets/rebrand.scss

@@ -0,0 +1 @@
+@import "ustyle/all";

data/vendor/assets/stylesheets/ustyle/_all.scss

@@ -0,0 +1,55 @@
+// Global import
+@import "ustyle/global";
+
+// Basics
+@import "ustyle/basics/typography";
+
+// uSwitch grid
+@import "ustyle/basics/grid";
+
+// Forms
+@import "ustyle/forms/base";
+
+// Tables
+@import "ustyle/tables/base";
+
+// Icons
+@import "ustyle/icons/base";
+
+// Components
+@import "ustyle/components/links";
+@import "ustyle/components/lists";
+@import "ustyle/components/lists-li";
+@import "ustyle/components/button";
+@import "ustyle/components/hero";
+@import "ustyle/components/content-group";
+@import "ustyle/components/tabs";
+@import "ustyle/components/loader";
+@import "ustyle/components/breadcrumbs";
+@import "ustyle/components/cta";
+@import "ustyle/components/overlay";
+@import "ustyle/components/tooltip";
+@import "ustyle/components/usp";
+@import "ustyle/components/progress";
+@import "ustyle/components/backdrop";
+@import "ustyle/components/reminder";
+@import "ustyle/components/tab-navigation";
+@import "ustyle/components/table-toolbar";
+@import "ustyle/components/compliance-banner";
+@import "ustyle/components/promo-banner";
+@import "ustyle/components/comp-table-row";
+@import "ustyle/components/calculator";
+
+// Articles
+@import "ustyle/articles/base";
+@import "ustyle/articles/news";
+@import "ustyle/articles/guide";
+@import "ustyle/articles/more";
+@import "ustyle/articles/related";
+
+// Utilities
+@import "ustyle/utilities/general";
+@import "ustyle/utilities/spacing";
+@import "ustyle/utilities/images";
+@import "ustyle/utilities/grid";
+@import "ustyle/utilities/responsive";

data/vendor/assets/stylesheets/ustyle/_content.scss

@@ -0,0 +1,5 @@
+// All of uStyle
+@import "ustyle/all";
+
+// Content
+@import "ustyle/content/base";

data/vendor/assets/stylesheets/ustyle/_global.scss

@@ -0,0 +1,20 @@
+// scss-lint:disable Comment
+/*! uStyle version #{ustyle-version()}. Copyright uSwitch limited, all rights reserved. */
+
+//
+// This is the shared global file that includes uStyle's core helpers
+//
+
+// Reset
+@import "ustyle/vendor/normalize";
+
+// Basics
+@import "ustyle/basics/functions";
+@import "ustyle/basics/variables";
+
+// All mixins
+@import "ustyle/mixins/base";
+
+// Basic extends
+@import "ustyle/basics/fonts";
+@import "ustyle/basics/extends";

data/vendor/assets/stylesheets/ustyle/articles/_base.scss

@@ -0,0 +1,100 @@
+// @page Pattern Library/Articles
+// @name Base article
+//
+// @description
+//   Article listings for news are important on the landing pages.
+//
+// @markup
+//   <article class='us-article'>
+//     <a class='us-article__link' href="#">
+//       <div class='us-grid-row'>
+//         <div class='us-col-md-8'>
+//           <h3 class='us-article__title'>Car insurance guides</h3>
+//           <p class='us-article__description'>
+//             A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks
+//           </p>
+//           <div class="us-article__meta">
+//             <span class="date">2 months ago</span>
+//             in
+//             <span class="category">Banking</span>
+//           </div>
+//         </div>
+//         <div class='us-col-md-4 us-tablet--block'>
+//           <img class='us-img--full us-article__image' src='https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg' />
+//         </div>
+//       </a>
+//     </div>
+//   </article>
+
+$article-border-color: $c-grey !default;
+$article-padding: $gutter-width !default;
+$article-description-color: $c-dark-grey !default;
+
+.us-article {
+  position: relative;
+  padding: $article-padding*.75;
+  border: 1px solid $article-border-color;
+
+  @include respond-to(desktop, true) {
+    padding: $article-padding/2 $article-padding;
+  }
+}
+
+.us-article__link {
+  display: block;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  text-decoration: none;
+
+  &:hover {
+    .us-article__title {
+      text-decoration: underline;
+    }
+  }
+}
+
+.us-article__link,
+.us-article__link:hover,
+.us-article__link:visited {
+  color: inherit;
+}
+
+.us-article__title {
+  @include heading(4);
+
+  @include respond-to(tablet, true) {
+    @include heading(3, $extend: false);
+  }
+
+  @include respond-to(desktop, true) {
+    padding-top: $article-padding*.25;
+  }
+}
+
+.us-article__meta {
+  color: $c-uswitch-navy;
+  font-size: .875em;
+  position: absolute;
+  bottom: $article-padding*.75;
+
+  @include respond-to(desktop, true) {
+    bottom: $article-padding;
+  }
+}
+
+.us-article__description {
+  color: $article-description-color;
+  margin-bottom: 1em;
+  padding-bottom: 2em;
+
+  @include respond-to(tablet, true) {
+    font-size: 1.125em;
+  }
+}
+
+.us-article__image {
+  display: none;
+
+  @include respond-to(desktop, true) {
+    display: block;
+  }
+}

data/vendor/assets/stylesheets/ustyle/articles/_guide.scss

@@ -0,0 +1,57 @@
+// @page Pattern Library/Articles
+// @name Guide article
+//
+// @description
+//   Our guide and news articles are used across the site to communicate news/guide snippets. The layout is decided by our grid, by default they have 100% width.
+//
+// @markup
+//   <div class='us-article-group'>
+//     <div class='us-guide-item us-col-md-4'>
+//       <a class='us-guide-item-link' href='#'>
+//         <div class='us-guide-item-image-container'>
+//           <div class='us-guide-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>
+//         </div>
+//         <div class='us-guide-item-content'>
+//           <h4 class='us-guide-item-title'>Car insurance guides</h4>
+//           <p class='us-guide-item-description'>Read our car insurance advice guides for the facts on why you need car insurance, the types of cover available, and tips on how to make a claim.</p>
+//         </div>
+//         <div class='us-guide-item-readmore'>
+//           <span class='us-news-item-readmorelink'>Read more</span>
+//         </div>
+//       </a>
+//     </div>
+//   </div>
+
+$guide-item-image-size: 128px !default;
+
+.us-guide-item {
+  @extend %base-item;
+}
+
+.us-guide-item-link {
+  @extend %base-item-link;
+}
+
+.us-guide-item-title {
+  @extend %base-item-title;
+}
+
+.us-guide-item-description {
+  @extend %base-item-description;
+}
+
+.us-guide-item-image-container {
+  @extend %base-item-image-container;
+}
+
+.us-guide-item-image {
+  @extend %base-item-image;
+}
+
+.us-guide-item-readmore {
+  @extend %readmore;
+}
+
+.us-guide-item-readmorelink {
+  @extend %readmore-link;
+}

data/vendor/assets/stylesheets/ustyle/articles/_more.scss

@@ -0,0 +1,31 @@
+// @page Pattern Library/Articles
+// @name More article
+//
+// @description
+//   If the article listing has more in a category, we use this to let a user navigate to that category.
+//
+// @markup
+//   <div class='us-more-item us-col-md-4'>
+//     <a class='us-more-item-link' href='#'>
+//       <span class='us-more-item-title'>See more banking news</span>
+//     </a>
+//   </div>
+
+.us-more-item {
+  @extend %base-item;
+}
+
+.us-more-item-link {
+  @extend %base-item-link;
+}
+
+.us-more-item-title {
+  @extend %heading-1;
+  display: block;
+  padding: $item-padding;
+  color: $c-typecyan;
+
+  &.small {
+    @extend %heading-3;
+  }
+}