shipyard-framework 0.5.3 → 0.5.5

data/ci/deploy

@@ -0,0 +1,31 @@
+#!/bin/bash
+set -e # halt script on error
+
+echo -e "\n\n************** Git Clone GH-Pages Branch **************"
+if [[ $CI_NAME = "codeship" ]]
+then
+  git clone git@github.com:codeship/shipyard.git --branch gh-pages --single-branch styleguide/_site
+else
+  git clone https://github.com/codeship/shipyard.git --branch gh-pages --single-branch styleguide/_site
+fi
+
+echo -e "\n\n************** Jekyll Build **************"
+cd styleguide
+JEKYLL_ENV=production bundle exec jekyll build --verbose
+
+echo -e "\n\n************** Commit & Push to GitHub Pages **************"
+cd _site
+git config user.email "${GITHUB_DEPLOY_USER_EMAIL}"
+git config user.name "${GITHUB_DEPLOY_USER_NAME}"
+git status
+git add --all
+git status
+
+if [[ $CI_NAME = "codeship" ]]
+then
+  git commit --allow-empty -m "Deploy to GitHub Pages: ${CI_COMMIT_ID} --skip-ci"
+  git push origin gh-pages
+else
+  git commit --allow-empty -m "Dry Run Deploy: --skip-ci"
+  git push --dry-run origin gh-pages
+fi

data/ci/jekyll

@@ -0,0 +1,16 @@
+#!/bin/bash
+set -e # halt script on error
+
+echo -e "************** Changed to Styleguide Directory **************"
+cd ./styleguide
+pwd
+
+echo -e "\n\n************** Jekyll Build **************"
+JEKYLL_ENV=test bundle exec jekyll build --baseurl=''
+
+echo -e "\n\n************** Change Back to the Root Directory **************"
+cd ../
+pwd
+
+echo -e "\n\n************** HTML Proofer **************"
+bundle exec htmlproofer ./styleguide/_site --disable-external --allow-hash-href --assume-extension --log-level :debug

data/ci/percy

@@ -1,17 +1,16 @@
+#!/bin/bash
+set -e # halt script on error
+
 echo -e "************** Changed to Styleguide Directory **************"
 cd ./styleguide
 pwd
 
-echo -e "\n\n************** Bundle Install **************"
-gem install bundler --pre
-bundle install
-
 echo -e "\n\n************** Jekyll Build **************"
-bundle exec jekyll build --baseurl=''
+JEKYLL_ENV=test bundle exec jekyll build --baseurl=''
 
 echo -e "\n\n************** Changed to Root Directory **************"
 cd ../
 pwd
 
 echo -e "\n\n************** Percy Snapshot **************"
-bundle exec percy snapshot --widths "375,1280" styleguide/_site/
+bundle exec percy snapshot --widths "375,768,1280" styleguide/_site/

data/ci/setup

@@ -1,3 +1,6 @@
+#!/bin/bash
+
 rvm use $(cat .ruby-version)
 gem install bundler --pre
 bundle install
+cd styleguide && gem install bundler --pre && bundle install && cd ..

data/lib/shipyard-framework/icons.rb

@@ -1,41 +1,41 @@
+require 'action_view'
+
 module Shipyard
   class Icons
     include ActionView::Helpers::SanitizeHelper
-    include Singleton
     attr_reader :icons
     delegate :each, :find, to: :icons
     delegate :execute_if_updated, :execute, :updated?, to: :updater
 
-    def initialize
-      @path = "#{::Rails.root}/app/assets/icons/"
-      @public = "#{::Rails.root}/public/assets"
-      @fingerprint = ::Rails.application.config.try(:icons_version)
+    def initialize(icon_directory, output_directory, base_path = '')
+      @path = icon_directory
+      @public = output_directory
+      @base_path = base_path
       reload
     end
 
     def reload
       @icons = load_svgs.freeze
-      save_external_svg_defs
-    end
-
-    def find_by(hash)
-      icon = @icons.detect { |i| i[hash.keys.first] == hash.values.first }
-      raise_error(hash.values.first) unless icon
-      icon
+      @icons
     end
 
     def base_path
-      if @fingerprint && !::Rails.env.development?
-        "/assets/icons-#{@fingerprint}.svg"
-      else
-        '/assets/icons.svg'
-      end
+      "#{@base_path}/assets/icons.svg"
     end
 
     def asset_path(svg_id)
       "#{base_path}##{svg_id}"
     end
 
+    def write
+      html = []
+      @icons.each do |icon|
+        html << svg_symbol(icon)
+      end
+      FileUtils.mkdir_p(@public) unless File.exists?(@public) || Dir.exists?(@public)
+      File.write("#{@public}/icons.svg", svg_template(html.join))
+    end
+
     private
 
     def load_svgs
@@ -54,16 +54,6 @@ module Shipyard
       end
     end
 
-    def save_external_svg_defs
-      html = []
-      @icons.each do |icon|
-        html << svg_symbol(icon)
-      end
-      Dir.mkdir(@public) unless File.exists?(@public) || Dir.exists?(@public)
-      File.write("#{@public}/icons.svg", svg_template(html.join))
-      File.write("#{@public}/icons-#{@fingerprint}.svg", svg_template(html.join)) if @fingerprint
-    end
-
     def sanitize_svg(html)
       sanitize(html,
                tags: %w(g circle rect path line polyline polygon ellipse),
@@ -71,7 +61,7 @@ module Shipyard
     end
 
     def svg_symbol(icon)
-      %(<g id="#{icon[:id]}">#{icon[:inner_html]}</g>)
+      %(<g id="#{icon[:id]}" viewBox="#{icon[:view_box]}">#{icon[:inner_html]}</g>)
     end
 
     def svg_template(html)

data/lib/shipyard-framework/jekyll/hooks.rb

@@ -0,0 +1,11 @@
+Jekyll::Hooks.register :site, :pre_render do |post|
+  $icons = Shipyard::Icons.new(
+    '_assets/icons/',
+    '_site/assets/',
+    post.config['baseurl']
+  )
+end
+
+Jekyll::Hooks.register :site, :post_write do |post|
+  $icons.write
+end

data/lib/shipyard-framework/jekyll/shipyard_css_classes.rb

@@ -0,0 +1,16 @@
+module Shipyard
+  module Jekyll
+    class ShipyardCssClasses < Liquid::Tag
+      def initialize(tag_name, params, options)
+        super
+      end
+
+      def render(context)
+        cssClasses = []
+        cssClasses << "env-#{context['site']['env']}"
+        cssClasses << context['page']['path'].tr('/','-').gsub(/[\.][a-z]*/, '')
+        cssClasses.join ' '
+      end
+    end
+  end
+end

data/lib/shipyard-framework/jekyll/shipyard_variables.rb

@@ -0,0 +1,7 @@
+module Jekyll
+  class ShipyardVariables < Generator
+    def generate(site)
+      site.config['env'] = ENV['JEKYLL_ENV'] || 'development'
+    end
+  end
+end

data/lib/shipyard-framework/jekyll/{alert_tag.rb → tags/alert_tag.rb}

@@ -1,4 +1,4 @@
-require_relative '../../../app/helpers/shipyard/alert_helper'
+require_relative '../../../../app/helpers/shipyard/alert_helper'
 
 module Shipyard
   module Jekyll
@@ -7,7 +7,7 @@ module Shipyard
 
       def initialize(tag_name, type, options)
         super
-        @type = type.tr(':','').to_sym unless type.blank?
+        @type = type.strip.tr(':','').to_sym unless type.blank?
       end
 
       def render(context)

data/lib/shipyard-framework/jekyll/{box_tag.rb → tags/box_tag.rb}

@@ -1,4 +1,4 @@
-require_relative '../../../app/helpers/shipyard/box_helper'
+require_relative '../../../../app/helpers/shipyard/box_helper'
 
 module Shipyard
   module Jekyll

data/lib/shipyard-framework/jekyll/{button_tag.rb → tags/button_tag.rb}

@@ -1,4 +1,4 @@
-require_relative '../../../app/helpers/shipyard/button_helper'
+require_relative '../../../../app/helpers/shipyard/button_helper'
 
 module Shipyard
   module Jekyll

data/lib/shipyard-framework/jekyll/tags/icon_tag.rb

@@ -0,0 +1,20 @@
+require_relative '../../../../app/helpers/shipyard/icon_helper'
+
+module Shipyard
+  module Jekyll
+    class Icon < Liquid::Tag
+      include Shipyard::IconHelper
+
+      def initialize(tag_name, params, options)
+        super
+        @args = params.strip.split(',')
+        @name = eval(@args[0])
+        @options = @args[1] ? eval("{#{@args[1]}}") : {}
+      end
+
+      def render(context)
+        icon @name, @options
+      end
+    end
+  end
+end

data/lib/shipyard-framework/jekyll/{note_tag.rb → tags/note_tag.rb}

@@ -1,4 +1,4 @@
-require_relative '../../../app/helpers/shipyard/note_helper'
+require_relative '../../../../app/helpers/shipyard/note_helper'
 
 module Shipyard
   module Jekyll

data/lib/shipyard-framework/rails/railtie.rb

@@ -2,10 +2,14 @@ module Shipyard
   module Rails
     class Railtie < ::Rails::Railtie
       initializer 'shipyard.reload_cached_icons' do
-        if ::Rails.env.development?
-          ::Rails.application.reloaders << Shipyard::Icons.instance
-          ::Rails.application.config.to_prepare { Shipyard::Icons.instance.execute_if_updated }
-        end
+        # TODO: Use rake task or hook into asset pipeline instead?
+        # rake shipyard:icons["#{::Rails.root}/app/assets/icons/", "#{::Rails.root}/public/assets"]
+        $icons = Shipyard::Icons.new(
+          "#{::Rails.root}/app/assets/icons/",
+          "#{::Rails.root}/public/assets"
+        )
+        $icons.write
+        ::Rails.application.reloaders << $icons
       end
     end
   end

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.5.3'
+  VERSION = '0.5.5'
 end

data/lib/shipyard-framework.rb

@@ -8,7 +8,12 @@ module Shipyard
         register_rails_engine
       elsif sprockets?
         register_sprockets
-      elsif jekyll?
+      end
+      register_icons
+      load_icons if rspec?
+
+      if jekyll?
+        register_jekyll_hooks
         register_jekyll_tags
       end
 
@@ -43,6 +48,10 @@ module Shipyard
       defined?(::Sprockets)
     end
 
+    def rspec?
+      defined?(::RSpec)
+    end
+
     def rails?
       defined?(::Rails)
     end
@@ -56,8 +65,11 @@ module Shipyard
       ::Sass.load_paths << stylesheets_path
     end
 
-    def register_rails_engine
+    def register_icons
       require 'shipyard-framework/icons'
+    end
+
+    def register_rails_engine
       require 'shipyard-framework/rails/engine'
       require 'shipyard-framework/rails/railtie'
     end
@@ -67,17 +79,26 @@ module Shipyard
       Sprockets.append_path(javascripts_path)
     end
 
+    def register_jekyll_hooks
+      require 'shipyard-framework/jekyll/hooks'
+    end
+
     def register_jekyll_tags
-      require 'shipyard-framework/jekyll/button_tag'
-      require 'shipyard-framework/jekyll/box_tag'
-      require 'shipyard-framework/jekyll/note_tag'
-      require 'shipyard-framework/jekyll/alert_tag'
-      require 'shipyard-framework/jekyll/shipyard_version_tag'
+      require 'shipyard-framework/jekyll/shipyard_variables'
+      require 'shipyard-framework/jekyll/tags/button_tag'
+      require 'shipyard-framework/jekyll/tags/icon_tag'
+      require 'shipyard-framework/jekyll/tags/box_tag'
+      require 'shipyard-framework/jekyll/tags/note_tag'
+      require 'shipyard-framework/jekyll/tags/alert_tag'
+      require 'shipyard-framework/jekyll/tags/shipyard_version_tag'
+      require 'shipyard-framework/jekyll/shipyard_css_classes'
       Liquid::Template.register_tag('btn', Shipyard::Jekyll::Button)
+      Liquid::Template.register_tag('icon', Shipyard::Jekyll::Icon)
       Liquid::Template.register_tag('box', Shipyard::Jekyll::Box)
       Liquid::Template.register_tag('note', Shipyard::Jekyll::Note)
       Liquid::Template.register_tag('alert', Shipyard::Jekyll::Alert)
       Liquid::Template.register_tag('shipyard_version', Shipyard::Jekyll::ShipyardVersion)
+      Liquid::Template.register_tag('shipyard_css_classes', Shipyard::Jekyll::ShipyardCssClasses)
     end
 
     def register_helpers
@@ -85,6 +106,10 @@ module Shipyard
         require_relative "../#{file}"
       end
     end
+
+    def load_icons
+      $icons = Shipyard::Icons.new 'assets/icons/', 'tmp/assets/'
+    end
   end
 end
 

data/shipyard.gemspec

@@ -5,22 +5,23 @@ require 'shipyard-framework/version'
 Gem::Specification.new do |spec|
   spec.name          = 'shipyard-framework'
   spec.version       = Shipyard::VERSION
-  spec.authors       = ['Shipyard']
-  spec.email         = ['ryanwilke@gmail.com']
+  spec.authors       = ['Codeship']
+  spec.email         = ['design@codeship.com']
   spec.summary       = 'A lightweight CSS framework for developing mobile-first projects in Ruby on Rails.'
-  spec.homepage      = 'https://github.com/shipyard-framework'
+  spec.homepage      = 'https://github.com/codeship/shipyard'
   spec.license       = 'MIT'
 
   # Rails Dependencies
-  # spec.add_runtime_dependency 'sassc-rails', '~> 1.3', '>= 1.3.0'
-  # spec.add_runtime_dependency 'slim-rails', '~> 3.1', '>= 3.1.0'
-  # spec.add_runtime_dependency 'sassc', '~> 1.11.4'
   spec.add_runtime_dependency 'actionview', '~> 5.0'
+  spec.add_runtime_dependency 'sprockets-es6', '~> 0.9.2'
 
   spec.add_development_dependency 'bundler', '~> 1.15'
-  spec.add_development_dependency 'sass', '~> 3.5', '>= 3.5.1'
+  spec.add_development_dependency 'sass', '~> 3.5', '>= 3.5.2'
   spec.add_development_dependency 'rspec', '~> 3.6'
-  spec.add_development_dependency 'percy-cli', '~> 1.2.9'
+  spec.add_development_dependency 'percy-cli', '~> 1.2', '>= 1.2.9'
+  spec.add_development_dependency 'html-proofer', '~> 3.7', '>= 3.7.4'
+  spec.add_development_dependency 'jekyll', '~> 3.6'
+  spec.add_development_dependency 'jekyll-assets', '~> 2.3'
 
   spec.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
   spec.files = `git ls-files`.split("\n")

data/spec/helpers/alert_helper_spec.rb

@@ -5,15 +5,23 @@ RSpec.describe Shipyard::AlertHelper, type: :helper do
 
   it 'should return a default alert' do
     expect(flash_alert { 'test' }).to match(
-      %r{<div role="alert" data-shipyard="alert" v-show="visible" class="alert"><p class="alert-txt">test</p></div>}
+      %r{<div role="alert" class="alert"><p class="alert-txt">test</p></div>}
+    )
+  end
+
+  xit 'should return a dismissible alert' do
+    expect(flash_alert(:dismissible) { 'test' }).to match(
+      %r{<div role="alert" data-shipyard="alert" class="alert"><p class="alert-txt">test</p></div>}
     )
   end
 
   it 'should return all alert types' do
     %w(info success warning error).each do |type|
       expect(flash_alert(type.to_sym) { type }).to match(
-        %r{<div role="alert" data-shipyard="alert" v-show="visible" class="alert alert-#{type}"><p class="alert-txt">#{type}</p></div>}
+        %r{<div role="alert" class="alert alert-#{type}"><p class="alert-txt">#{type}</p></div>}
       )
     end
   end
+
+  # TODO: Mock the $icons variable for the helper.
 end

data/spec/helpers/icon_helper_spec.rb

@@ -3,19 +3,19 @@ require 'spec_helper'
 RSpec.describe Shipyard::IconHelper, type: :helper do
   include Shipyard::IconHelper
 
-  xit 'should return an svg gear icon with the svg use tag.' do
+  it 'should return an svg gear icon with the svg use tag.' do
     expect(icon(:gear)).to match(/<svg class="icon icon-gear icon-outline"(.+?)><use(.+?)>/)
   end
 
-  xit 'should return an svg fear icon without the svg use tag.' do
-    expect(icon('gear')).to match(/<svg class="icon icon-gear icon-outline"(.+?)>/)
+  it 'should return an svg gear icon without the svg use tag.' do
+    expect(icon('gear')).to match(/<svg class="icon icon-gear icon-outline"(.+?)><path(.+?)>/)
   end
 
-  xit 'should return an svg logo icon with a prefixed class name' do
+  it 'should return an svg gear icon with a prefixed class name' do
     expect(icon(:gear, prefix: 'header')).to match(/<svg class="icon icon-gear icon-outline header-icon header-icon-gear" (.+?)><use(.+?)>/)
   end
 
-  xit 'should return an svg logo icon with a custom CSS class' do
-    expect(icon(:logo, class: 'shipyard-icon')).to match(/<svg class="icon icon-gear icon-outline shipyard-icon" (.+?)><use(.+?)>/)
+  it 'should return an svg gear icon with a custom CSS class' do
+    expect(icon(:gear, class: 'shipyard-icon')).to match(/<svg class="icon icon-gear icon-outline shipyard-icon" (.+?)><use(.+?)>/)
   end
 end

data/styleguide/Gemfile

@@ -1,6 +1,7 @@
 source 'https://rubygems.org'
 
 group :jekyll_plugins do
-  gem 'jekyll'
+  gem 'jekyll', '~> 3.6.0'
+  gem 'jekyll-assets', '~> 2.3.2'
   gem 'shipyard-framework', path: '../'
 end

data/styleguide/Gemfile.lock

@@ -3,6 +3,7 @@ PATH
   specs:
     shipyard-framework (0.5.3)
       actionview (~> 5.0)
+      sprockets-es6 (~> 0.9.2)
 
 GEM
   remote: https://rubygems.org/
@@ -18,36 +19,54 @@ GEM
       i18n (~> 0.7)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
-    addressable (2.5.1)
-      public_suffix (~> 2.0, >= 2.0.2)
+    addressable (2.5.2)
+      public_suffix (>= 2.0.2, < 4.0)
+    babel-source (5.8.35)
+    babel-transpiler (0.7.0)
+      babel-source (>= 4.0, < 6)
+      execjs (~> 2.0)
     builder (3.2.3)
     colorator (1.1.0)
     concurrent-ruby (1.0.5)
+    crass (1.0.2)
     erubi (1.6.1)
+    execjs (2.7.0)
+    extras (0.3.0)
+      forwardable-extended (~> 2.5)
+    fastimage (2.1.0)
     ffi (1.9.18)
     forwardable-extended (2.6.0)
     i18n (0.8.6)
-    jekyll (3.5.1)
+    jekyll (3.6.0)
       addressable (~> 2.4)
       colorator (~> 1.0)
       jekyll-sass-converter (~> 1.0)
       jekyll-watch (~> 1.1)
-      kramdown (~> 1.3)
+      kramdown (~> 1.14)
       liquid (~> 4.0)
       mercenary (~> 0.3.3)
       pathutil (~> 0.9)
-      rouge (~> 1.7)
+      rouge (>= 1.7, < 3)
       safe_yaml (~> 1.0)
+    jekyll-assets (2.3.2)
+      concurrent-ruby (~> 1.0)
+      extras (~> 0.2)
+      fastimage (~> 2.0, >= 1.8)
+      jekyll (~> 3.1, >= 3.0)
+      pathutil (>= 0.8)
+      rack (~> 1.6)
+      sprockets (~> 3.3, < 3.8)
     jekyll-sass-converter (1.5.0)
       sass (~> 3.4)
     jekyll-watch (1.5.0)
       listen (~> 3.0, < 3.1)
-    kramdown (1.14.0)
+    kramdown (1.15.0)
     liquid (4.0.0)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    loofah (2.0.3)
+    loofah (2.1.1)
+      crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mercenary (0.3.6)
     mini_portile2 (2.3.0)
@@ -56,7 +75,8 @@ GEM
       mini_portile2 (~> 2.3.0)
     pathutil (0.14.0)
       forwardable-extended (~> 2.6)
-    public_suffix (2.0.5)
+    public_suffix (3.0.0)
+    rack (1.6.8)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
@@ -65,13 +85,20 @@ GEM
     rb-fsevent (0.10.2)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
-    rouge (1.11.1)
+    rouge (2.2.1)
     safe_yaml (1.0.4)
     sass (3.5.1)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
+    sprockets (3.7.1)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
+    sprockets-es6 (0.9.2)
+      babel-source (>= 5.8.11)
+      babel-transpiler
+      sprockets (>= 3.0.0)
     thread_safe (0.3.6)
     tzinfo (1.2.3)
       thread_safe (~> 0.1)
@@ -80,7 +107,8 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  jekyll
+  jekyll (~> 3.6.0)
+  jekyll-assets (~> 2.3.2)
   shipyard-framework!
 
 BUNDLED WITH

data/styleguide/_assets/css/application.sass

@@ -0,0 +1,9 @@
+$font-family: "museo-sans-rounded", "Museo Sans Rounded", Arial, sans-serif
+$font-monospace: 'Roboto Mono', monospace
+@import shipyard
+@import shipyard/components/header
+@import url('https://use.typekit.net/wel6tpj.css')
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono')
+
+@import layout
+@import views

data/styleguide/_assets/css/layout.sass

@@ -0,0 +1,6 @@
+body
+  line-height: 1.6
+  +respond-to(padding-top, (x0: 70px, x1: 90px, x2: 100px))
+
+footer
+  padding: 30px 0

data/styleguide/{_sass → _assets/css}/views.sass

@@ -1,11 +1,14 @@
-// Global Styles
-p, h1, h2, h3
-  code
-    margin: 0 5px
+// Code Styles
+code
+  li &, p &, h1 &, h2 &, h3 &
+    margin: 0 3px
     @extend .code-inline
+  div.highlighter-rouge &
+    @extend .code-block
+    margin: 15px 0
 
 hr
-  margin: 50px 0
+  +respond-to(margin, (x0: 30px 0, x1: 40px 0, x2: 50px 0))
 
 // Utilities: Colors
 +component('shade')
@@ -21,7 +24,7 @@ hr
     &:not(:last-child)
       border-right: 10px solid transparent
   &-box
-    height: 168px
+    height: 165px
     padding: 5px
     white-space: nowrap
     &:hover
@@ -41,6 +44,7 @@ hr
     +when('light:hover')
       color: $gray-darker
   &-text
+    line-height: 40px
     transition: 300ms color ease
     +when('box:hover')
       color: rgba(#fff,.7)

data/styleguide/_assets/js/application.es6

@@ -0,0 +1,2 @@
+//= require shipyard
+//= require views/utilities/colors

data/styleguide/_assets/js/views/utilities/colors.es6

@@ -0,0 +1,21 @@
+class ShadeList extends Shipyard {
+  constructor (el) {
+    super(el)
+
+    this.el.forEach((list) => {
+      list.querySelectorAll('[shade-color]').forEach((shade) => {
+        shade.innerHTML = this.rgbToHex(this.css(shade, 'background-color'))
+      })
+    })
+  }
+
+  rgbToHex (rgb) {
+    if (rgb.match(/rgba/)) return '#';
+    let hex = rgb.substr(4, rgb.indexOf(')') - 4).split(',').map(
+                (color) => String('0' + parseInt(color).toString(16)).slice(-2)
+              ).join('');
+    return `#${hex}`;
+  }
+}
+
+new ShadeList('[shade-list]')