archetype 0.0.1.pre.3.00dfd9a → 0.0.1.pre.3.6ed259b

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 97c23e2750bc27861f4602ddb1c1a80f48a172b8
-  data.tar.gz: fe2470feea0f4c8ae90db32247c4b1a8159400ba
+  metadata.gz: eacb5a42bfad733d2f75f8a08cec94a3e8daa4ca
+  data.tar.gz: 124027950cc1132c5b6af87f3d7dec19e4320a52
 SHA512:
-  metadata.gz: 0125375a83db183fe5f903730204110f0d77073f509696392a5ab91bee052f27e72e6539b16f567102de3be5a9c1106f35d56f6a7198eb92453407d771aa6721
-  data.tar.gz: d53907489ca4c58266946c2ee08eb49e93f11a4a124c41d7ffba53cf920958c70e6281be8db0e8c13f683759926e710161537d86b74fec367ed15da3358d297f
+  metadata.gz: 96feb215ea6e7b46f6c9902a63ac491f6c3a49c41bd4fc4603187527b89ef322f1ccff9cf922e1e3a459a10f2d1f1975f61cea2c64758b9dc17ec0948b60ca83
+  data.tar.gz: 5c3f33dbbc76e314af88bfdb4fa22f5723ab1e1d6596d9cdcefa33c4a515df6278464f35c738fd7dfa229b1d9c0e645e680b10ff7edd000cbdd90395727963cc

data/CHANGELOG.md

@@ -15,12 +15,19 @@
 - added `prefixed-tag()` method for consistency when generating tag names
 - added Chinese font stacks
 - added wildcard support to `locale()` function (e.g. `locale(en_ ja_JP _DE)`)
+- added `transparent-focusable()` mixin for transparent background support in older IE
+- added ability to customize `output-style()` with `custom-output-styler()` mixin and `has-custom-output-styler()` function (NEEDS DOCUMENTATION)
+- added better support for targeting IE6/7 glyphs and `ie-pseudo()` generated elements (NEEDS DOCUMENTATION)
+- making `unique()` generated IDs genuinely unique
+- adding support for a `testing` config flag
+- adding support for `@extend` from a styleguide component
 
 ### Resolved Issues:
 
 - quotes on strings passed to `associative()` weren't being stripped correctly
 - fixed some minor glyph issues
 - out-of-order CSS issues in Ruby 1.8.7 are fixed using `Hashery::OrderedHash`
+- fixed issue with `archetype-version()` incorrectly matching comparators
 
 ### Tests:
 

data/README.md

@@ -1,6 +1,6 @@
 # Archetype
 
-[![Build Status](https://travis-ci.org/linkedin/archetype.png)](https://travis-ci.org/linkedin/archetype)
+[![Build Status](https://travis-ci.org/linkedin/archetype.png)](https://travis-ci.org/linkedin/archetype) [![Gem Version](https://badge.fury.io/rb/archetype.png)](http://badge.fury.io/rb/archetype)
 
 Archetype is a UI pattern and component library for quickly iterating on and maintaining scalable web interfaces.
 

data/VERSION.yml

@@ -3,4 +3,4 @@
 :minor: 0
 :build: 1
 :state: pre
-:iteration: 3
+:iteration: 3

data/bin/archetype

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+
+require File.join(File.dirname(__FILE__), '..', 'lib/archetype/executor')

data/lib/archetype.rb

@@ -33,6 +33,10 @@ module Archetype
     Compass::Configuration.add_configuration_property(:memoize, "should the memoizer be used to improve compilation speed") do
       not (Compass.configuration.environment || :development).to_s.include?('dev')
     end
+    # testing (for running unit tests)
+    Compass::Configuration.add_configuration_property(:testing, "is this a testing environment") do
+      ENV['CI']
+    end
   end
 end
 

data/lib/archetype/actions/help.rb

@@ -0,0 +1,16 @@
+description = "Get help on an Archetype action"
+if @description.nil?
+  # do stuff...
+  @help = true
+
+  if not ARGV[1].nil? and ARGV[1] != 'help'
+    action = File.join(@actions_path, ARGV[1])
+    begin
+      load "#{action}.rb"
+    rescue
+      puts "unknown action: #{ARGV[1]}"
+    end
+  end
+else
+  @description = description
+end

data/lib/archetype/actions/theme.rb

@@ -0,0 +1,73 @@
+require 'fileutils'
+description = "Generate a new Archetype theme"
+
+if @description.nil?
+  options = {
+    :extends => 'archetype'
+  }
+  OptionParser.new do |opts|
+    opts.banner = description
+    opts.define_head "Usage: archetype theme [path] [options]"
+    opts.separator ""
+    opts.separator "Example usage:"
+    opts.separator " archetype theme /path/to/scss/ --name=myCustomTheme"
+    opts.separator " archetype theme --name=themes/myExtendedTheme --extends=themes/myBaseTheme"
+
+    opts.on('-n', '--name THEME', 'theme name') do |v|
+      options[:theme] = v
+    end
+
+    opts.on('-x', '--extends THEME', 'theme name to extend') do |v|
+      options[:extends] = v
+    end
+
+    opts.on('-h', '--help', 'shows this help message') do
+      puts opts
+      exit
+    end
+
+    if not @help.nil?
+      puts opts
+      exit
+    end
+  end.parse!
+
+  if not options[:theme].nil?
+    base = ARGV[1] || '.'
+    tmp = '/tmp/theme_' + rand(36**8).to_s(36)
+    theme_template = File.join(File.dirname(__FILE__), '../../../templates/_theme/')
+    theme_path = File.join(base, options[:theme])
+    extends = "#{options[:extends]}"
+    if options[:extends] != 'archetype'
+      extends = "#{extends}/core"
+    end
+    theme_name = File.basename(options[:theme])
+    # copy template files to tmp dir
+    FileUtils.mkdir_p(tmp)
+    FileUtils.cp_r(Dir["#{theme_template}/**"], tmp)
+
+    puts "Creating theme '#{theme_name}' in #{File.expand_path(theme_path)}..."
+    puts "extending from #{options[:extends]}" if options[:extends] != 'archetype'
+
+    # update all placeholders in template files
+    Dir.glob("#{tmp}/**/*.scss") do |filename|
+      out = File.read(filename).gsub(/__THEME_NAME__/, theme_name).gsub(/__THEME_EXTENDS__/, extends)
+      File.open(filename, "w") { |file| file.puts out }
+    end
+
+    # now move all the theme files to their destination
+    FileUtils.mkdir_p(theme_path)
+    FileUtils.cp_r(Dir["#{tmp}/**"], theme_path)
+
+    # create convenience file _<theme>.scss ...
+    File.open(File.join(File.dirname(theme_path), "_#{theme_name}.scss"), "w") { |file| file.puts "// #{theme_name} theme\n@import \"#{theme_name}/core\";\n" }
+
+    # remove tmp dir
+    FileUtils.rm_rf(tmp)
+    puts "Congratulations! Your new theme has been created!"
+    puts "Use @import \"#{options[:theme]}\" in your scss files."
+    exit
+  end
+else
+  @description = description
+end

data/lib/archetype/executor.rb

@@ -0,0 +1,27 @@
+require 'optparse'
+
+@actions_path = File.join(File.dirname(__FILE__), 'actions')
+
+if not ARGV[0].nil? and not ARGV[0].empty?
+  action_name = ARGV[0]
+  action = File.join(@actions_path, action_name)
+  begin
+    require action
+  rescue
+    puts "unknown action: #{action_name}"
+  end
+end
+
+# if we got here, there was either no action, or the action was invalid
+OptionParser.new do |opts|
+  opts.banner = "Archetype command line actions\n\n"
+  opts.define_head "Usage: archetype <action> [options]"
+  opts.separator ""
+  opts.separator "Available Actions:"
+  Dir.glob("#{@actions_path}/*.rb") do |action|
+    @description = true
+    load action
+    opts.separator "  * #{File.basename(action, '.rb')}\t- #{@description}"
+  end
+  puts opts
+end.parse!

data/lib/archetype/sass_extensions/functions/lists.rb

@@ -71,38 +71,6 @@ module Archetype::SassExtensions::Lists
   Sass::Script::Functions.declare :list_insert, [:list, :idx, :value]
   Sass::Script::Functions.declare :list_insert, [:list, :idx, :value, :separator]
 
-  #
-  # sort a list
-  #
-  # *Parameters*:
-  # - <tt>$list</tt> {List} the list to sort
-  # - <tt>$reverse</tt> {Boolean} sort the list in reverse order
-  # *Returns*:
-  # - {List} the sorted list
-  #
-  # TODO - this is failing, fix this
-  #def list_sort(list, reverse = false)
-  #  separator = list.separator if list.is_a?(Sass::Script::List)
-  #  list = list.to_a.sort
-  #  list = list.reverse if (reverse == Sass::Script::Bool.new(true))
-  #  return Sass::Script::List.new(list, separator)
-  #end
-
-  #
-  # reverse order a list
-  #
-  # *Parameters*:
-  # - <tt>$list</tt> {List} the list to reverse
-  # *Returns*:
-  # - {List} the reversed list
-  #
-  # TODO - this is failing, fix this
-  #def list_reverse(list)
-  #  separator = list.separator if list.is_a?(Sass::Script::List)
-  #  list = list.to_a.reverse
-  #  return Sass::Script::List.new(list, separator)
-  #end
-
   #
   # add values(s) to a list
   #
@@ -245,6 +213,32 @@ module Archetype::SassExtensions::Lists
   end
   Sass::Script::Functions.declare :associative_merge, [:list, :extender]
 
+  #
+  # given a string of styles, convert it into a key-value pair list
+  #
+  # *Parameters*:
+  # - <tt>$string</tt> {String} the string to convert
+  # *Returns*:
+  # - <tt>$list</tt> {List} the converted list of styles
+  #
+  def _style_string_to_list(string = '')
+    # convert to string and strip all comments
+    string = helpers.to_str(string, ' ').gsub(/\/\*[^\*\/]*\*\//, '')
+    # then split it on each rule
+    tmp = string.split(';')
+    styles = []
+    # and for each rule break it into it's key-value pairs
+    tmp.each do |rule|
+      kvp = []
+      rule.split(':').each do |str|
+        kvp.push Sass::Script::String.new(str)
+      end
+      styles.push Sass::Script::List.new(kvp, :comma)
+    end
+    # the recompose the list
+    return Sass::Script::List.new(styles, :comma)
+  end
+
 private
   def helpers
     @helpers ||= Archetype::Functions::Helpers

data/lib/archetype/sass_extensions/functions/styleguide.rb

@@ -17,7 +17,7 @@ module Archetype::SassExtensions::Styleguide
   SPECIAL     = %w(states selectors)
   # these are unique CSS keys that can be exploited to provide fallback functionality by providing a second value
   # e.g color: red; color: rgba(255,0,0, 0.8);
-  FALLBACKS   = %w(background background-image background-color border border-bottom border-bottom-color border-color border-left border-left-color border-right border-right-color border-top border-top-color clip color layer-background-color outline outline-color white-space)
+  FALLBACKS   = %w(background background-image background-color border border-bottom border-bottom-color border-color border-left border-left-color border-right border-right-color border-top border-top-color clip color layer-background-color outline outline-color white-space extend)
   ADDITIVES   = FALLBACKS + [DROP, INHERIT, STYLEGUIDE]
   @@archetype_styleguide_mutex = Mutex.new
   # :startdoc:

data/lib/archetype/sass_extensions/functions/ui.rb

@@ -21,7 +21,8 @@ module Archetype::SassExtensions::UI
     prefix = helpers.to_str(prefix, ' ', :quotes)
     prefix = '.' if prefix == 'class'
     prefix = '#' if prefix == 'id'
-    return Sass::Script::String.new("#{prefix}archetype-uid-#{uid}")
+    suffix = Compass.configuration.testing ? "RANDOM_UID" : "#{Time.now.to_i}-#{rand(36**8).to_s(36)}-#{uid}"
+    return Sass::Script::String.new("#{prefix}archetype-uid-#{suffix}")
   end
 
   #

data/lib/archetype/sass_extensions/functions/version.rb

@@ -8,7 +8,7 @@ require 'sass/version'
 #
 module Archetype::SassExtensions::Version
   # :stopdoc:
-  COMPARATOR_PATTERN  = /([neglt]+|[><=!]+)/
+  COMPARATOR_PATTERN  = /(\s[neqglt]+\s|[><=!]+)/
   VERSION_PATTERN     = /\d+(\.\d+)*(\.[x|\*])?/
   # :startdoc:
 
@@ -60,7 +60,7 @@ private
     # check for wild cards
     wild = version.index('x')
     # check the comparison
-    comparator = (comparator || [])[0] || 'eq'
+    comparator = ((comparator || [])[0] || 'eq').strip
     eq = comparator =~ /(e|=)/
     lt = comparator =~ /(l|<)/
     gt = comparator =~ /(g|>)/

data/lib/archetype/version.rb

@@ -10,7 +10,7 @@ module Archetype
     # Method borrowed from Compass. All credit goes to Chris Eppstein and other contributors
     # https://github.com/chriseppstein/compass/blob/stable/lib/compass/version.rb
     # \(This method swiped from Haml and then modified, some credit goes to Nathan Weizenbaum\)
-    # 
+    #
     # *Returns*:
     # - {String} the version of Archetype
     #
@@ -30,7 +30,7 @@ module Archetype
     def read_version
       require 'yaml'
       begin
-        @version = YAML::load(File.read(scope('VERSION.yml')))
+        @version = YAML.load(File.read(scope('VERSION.yml')))
         @version[:teeny] = @version[:patch]
         @version[:string] = "#{@version[:major]}.#{@version[:minor]}"
         @version[:string] << ".#{@version[:patch]}" if @version[:patch]

data/stylesheets/archetype/_config.scss

@@ -40,6 +40,7 @@ $CONTENT_PLACEHOLDER:             '\0020' !default;
 $CONFIG_DISABLED_CSS:             () !default;                                                      // a list of CSS3 features to always disable when using output-style()
 $CONFIG_GENERATED_TAG_PREFIX:     x-archetype !default;                                             // the prefix for the tag name to create when using ie-pseudo method
 $CONFIG_GENERATED_TAG_CSS:        false !default;                                                   // styles to apply to the generated tag when using ie-pseudo method (use this as a way to reset styles on these tags)
+$CONFIG_GENERATED_TAG_INLINE:     true !default;                                                    // if `true` insert the styles inline on the generated tag, otherwise insert the styles in a unique css rule
 
 // z-layers
 $CONFIG_Z_INDEX_BASE:             0 !default;                                                       // the default starting layer for z-index calculations
@@ -328,21 +329,21 @@ $CORE_SAFE_FONTS: (
     (win, (
       (default          (Arial, sans-serif)),
       (ja_JP            (メイリオ, Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', default)),
-      (zh_TW            ('微軟正黑體', 'Microsoft JhengHei', PMingLiu, '宋体', SimSun, default)),
-      (zh_CN            ('华文细黑', 'STHeiti Light', '微软雅黑体', 'Microsoft Yahei', '新宋体', NSimSun, '宋体', SimSun, default)),
+      (zh_TW            (default, '微軟正黑體', 'Microsoft JhengHei', PMingLiu, '宋体', SimSun)),
+      (zh_CN            (default, '华文细黑', 'STHeiti Light', '微软雅黑体', 'Microsoft Yahei', '新宋体', NSimSun, '宋体', SimSun)),
       (ko_KR            nil)
     )),
     (mac, (
       (default          (Helvetica, Arial, sans-serif)),
-      (zh_TW            ('黑體-繁', 'Heiti TC', '儷黑Pro', 'LiHei Pro', PMingLiu, '宋体', SimSun, default)),
-      (zh_CN            ('黑体-简', 'Heiti SC', '华文细黑', 'STHeiti Light', '华文黑体', STHeiti, default)),
+      (zh_TW            (default, '黑體-繁', 'Heiti TC', '儷黑Pro', 'LiHei Pro', PMingLiu, '宋体', SimSun)),
+      (zh_CN            (default, '黑体-简', 'Heiti SC', '华文细黑', 'STHeiti Light', '华文黑体', STHeiti)),
       (ja_JP            ('Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', 'MS PGothic', default)),
       (ko_KR            nil)
     )),
     (linux, (
       (default          (Helvetica, FreeSans, 'Liberation Sans', Helmet, Arial, sans-serif)),
-      (zh_TW            (PMingLiu, '宋体', SimSun, default)),
-      (zh_CN            ('新宋体', NSimSun, '宋体', SimSun, default)),
+      (zh_TW            (default, PMingLiu, '宋体', SimSun)),
+      (zh_CN            (default, '新宋体', NSimSun, '宋体', SimSun)),
       (ja_JP            nil),
       (ko_KR            nil)
     ))
@@ -364,3 +365,6 @@ $CORE_SAFE_FONTS: (
 ); // note that this declaration isn't a `default`, but rather is enforced everytime. this can be modified (via extending $CONFIG_SAFE_FONTS)
 $CONFIG_SAFE_FONTS: () !default;
 $CONFIG_SAFE_FONTS: associative-merge($CORE_SAFE_FONTS, $CONFIG_SAFE_FONTS);
+
+$archetype-glyph-selector: false !default;
+$archetype-pseudo-selector: false !default;

data/stylesheets/archetype/_hacks.scss

@@ -34,19 +34,19 @@
 }
 
 // proxy for ie-pseudo
-// @mixin    ie-pseudo-before
-// @param    $styles {String} the styles to apply to the pseudo-element
-// @param    $content {String} the content to insert into the element (similar to css `content` attribute)
-// @param    $name {String} the name of the element
+// @mixin     ie-pseudo-before
+// @param     $styles {String} the styles to apply to the pseudo-element
+// @param     $content {String} the content to insert into the element (similar to css `content` attribute)
+// @param     $name {String} the name of the element
 @mixin ie-pseudo-before($styles: false, $content: false, $name: '') {
   @include ie-pseudo($styles, $content, before, $name);
 }
 
 // proxy for ie-pseudo
-// @mixin    ie-pseudo-after
-// @param    $styles {String} the styles to apply to the pseudo-element
-// @param    $content {String} the content to insert into the element (similar to css `content` attribute)
-// @param    $name {String} the name of the element
+// @mixin     ie-pseudo-after
+// @param     $styles {String} the styles to apply to the pseudo-element
+// @param     $content {String} the content to insert into the element (similar to css `content` attribute)
+// @param     $name {String} the name of the element
 @mixin ie-pseudo-after($styles: false, $content: false, $name: '') {
   @include ie-pseudo($styles, $content, after, $name);
 }
@@ -54,19 +54,43 @@
 // this creates a one-type executing expression that inserts an element relative to `this` element.
 // this allows some level of support for :before/:after in IE6/7
 // inspired by http://nicolasgallagher.com/better-float-containment-in-ie/
-// @mixin    ie-pseudo
-// @param    $styles {String} the styles to apply to the pseudo-element
-// @param    $content {String} the content to insert into the element (similar to css `content` attribute)
-// @param    $placement {String} [before|after] simulate :before or :after behavior
-// @param    $name {String} the name of the element
-@mixin ie-pseudo($styles: false, $content: false, $placement: before, $name: '') {
+// @mixin     ie-pseudo
+// @param     $styles {String} the styles to apply to the pseudo-element
+// @param     $content {String} the content to insert into the element (similar to css `content` attribute)
+// @param     $placement {String} [before|after] simulate :before or :after behavior
+// @param     $name {String} the name of the element
+// @param     $uid {String} a custom, unique identifier for the generate element
+@mixin ie-pseudo($styles: false, $content: false, $placement: before, $name: '', $uid: false) {
+  $archetype-pseudo-selector: false;
   @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+    $uid: if($uid, $uid, unique('ie-pseudo-'));
+    $archetype-pseudo-selector: '& ##{$uid}';
     $method: if($placement == before, insertBefore, appendChild);
     $content: if($content and $content != nil, 'this.el.innerHTML="#{-ie-pseudo-content($content)}",', '');
     @if $CONFIG_GENERATED_TAG_CSS {
       $styles: if($styles and $styles != nil, #{$CONFIG_GENERATED_TAG_CSS}#{$styles}, $CONFIG_GENERATED_TAG_CSS);
     }
-    $styles: if($styles and $styles != nil, 'this.el.style.cssText="#{$styles}",', '');
-    *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("#{prefixed-tag($name)}"),#{$content}#{$styles}this.#{$method}(this.el));
+    // if we're using inline styles...
+    $inline: if($styles and $styles != nil and $CONFIG_GENERATED_TAG_INLINE, 'this.el.style.cssText="#{$styles}",', '');
+    *zoom: expression(this.runtimeStyle.zoom="1", this.el=document.createElement("#{prefixed-tag($name)}"),this.el.id="#{$uid}",#{$content}#{$inline}this.#{$method}(this.el));
+    // if we're NOT using inline styles...
+    @if not $CONFIG_GENERATED_TAG_INLINE {
+      // output it on the generated selector
+      #{$archetype-pseudo-selector} {
+        @include to-styles(-style-string-to-list($styles));
+      }
+    }
+  }
+}
+
+// a hack that allows elements with transparent backgrounds to be focusable in IE
+// @mixin     transparent-focusable
+// @param     $url {String} an optional URL to point to an image (not required)
+// @param     $data {String} an optional data URI for a transparent image (not required)
+@mixin transparent-focusable($url: url(https://), $data: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') {
+  $bg: (transparent);
+  background: append($bg, $data);
+  @if $url {
+    @include target-browser(ie lte 7, background, append($bg, $url));
   }
 }

data/stylesheets/archetype/_ui.scss

@@ -153,8 +153,10 @@
 // @param     $size {Number} the size of the icon
 // @param     $color {Color} the color of the font
 // @param     $placement {String} where to place the icon [before|after|inline]
-// @param     $ie-styles {String} styles to apply to IE6/7 (this is needed because the faux :before isn't extensible)
-@mixin glyph-icon($icon, $size: default, $color: inherit, $placement: before, $ie-styles: false) {
+// @param     $ie-styles {String} styles to apply to IE6/7 (this is needed because the faux :before isn't extendable)
+// @param     $ie-uid {String} a custom, unique identifier for the generate IE6/7 element
+@mixin glyph-icon($icon, $size: default, $color: inherit, $placement: before, $ie-styles: false, $ie-uid: false) {
+  $archetype-glyph-selector: false;
   $char-mapping: nil;
   $char-code: nil;
   @if $icon {
@@ -178,7 +180,7 @@
     }
     $selector: if(index(before after, $placement), '&:#{$placement}', '&');
     #{$selector} {
-      font-family: $CONFIG_GLYPHS_NAME;
+      font-family: '#{$CONFIG_GLYPHS_NAME}';
       font-weight: $CONFIG_GLYPHS_WEIGHT;
       font-style: $CONFIG_GLYPHS_STYLE;
       text-decoration: inherit;
@@ -189,6 +191,7 @@
         content: $char-code;
       }
     }
+    $archetype-glyph-selector: $selector;
     @if($selector != '&' and $ie-styles != nil) {
       // support for IE6/7
       $styles: "font-family:'#{$CONFIG_GLYPHS_NAME}';font-weight:#{$CONFIG_GLYPHS_WEIGHT};font-style:#{$CONFIG_GLYPHS_STYLE};text-decoration:inherit;";
@@ -201,7 +204,10 @@
       @if($ie-styles) {
         $styles: $styles + $ie-styles;
       }
-      @include ie-pseudo($styles: $styles, $content: $char-code, $placement: $placement, $name: glyph);
+      @include ie-pseudo($styles: $styles, $content: $char-code, $placement: $placement, $name: glyph, $uid: $ie-uid);
+      @if $archetype-pseudo-selector {
+        $archetype-glyph-selector: '#{$selector}, #{$archetype-pseudo-selector}';
+      }
     }
   }
 }