dvl-flashes 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 24a6068bf2afaa7eb4db3b7696f4fa6048696328
-  data.tar.gz: f6b2a1ea0c0cdfb88ee6ad09cb13cd6967c06614
+  metadata.gz: b9628d4e2fb13c1af198f10ac0b72e38b28f1bc8
+  data.tar.gz: 2b909df8016c192d5c1e13529e9143a09dbee4dc
 SHA512:
-  metadata.gz: e5f03d05b079d3990aa2de9bb122ff6caa0798da30849696aeebd76fc5ba84faa97d90fc05eeae32c62be25b8e25deffde96e4d49dc377d0d76f36cbf19e9498
-  data.tar.gz: c17fab77e892d9421d6900c8674dad50f2f2c4358c3ba9e7bb8a7bc4a0c328618e366d93abfbebbf592e44a9511a88fc9284aa8958592c961310b3624f523470
+  metadata.gz: 29ee7797cf386a886e4771ba10eff663f782357351b662f7ee1538652bb67a157196b098fe114a095a250a2b53268f9e1d275f369b2211943f783c205c86a367
+  data.tar.gz: a459639d04d87fac5dce3bce86db771f74b8975a9f24921b4b569549dba735c60ac69a999d6754e2e4c22c18aa4cc3a87eb6e6fbb759f2bd1eab388ee9d1bcbd

data/.gitignore

@@ -1,2 +1,4 @@
 .sass-cache
 Gemfile.lock
+*.gem
+screenshots/

data/.hound.yml

@@ -0,0 +1,5 @@
+ruby:
+  enabled: true
+
+coffee_script:
+  enabled: true

data/README.md

@@ -1,36 +1,71 @@
-dvl-flashes
+dvl-flashes [![version]](http://rubygems.org/gems/dvl-flashes) [![build_status]](https://circleci.com/gh/dobtco/dvl-flashes)
 ====
 
 Flash alerts for the DOBT View Layer.
 
 ## Usage
 
+### Gemfile
+
 ```
-# Gemfile
 gem 'dvl-flashes'
 ```
 
+### assets/javascripts/application.css.scss
+
 ```
-# assets/javascripts/application.css.scss
 @import 'dvl/flashes';
 ```
 
+### assets/javascripts/application.js
+
 ```
-# assets/javascripts/application.js
 //= require dvl/flashes
 ```
 
+### layouts/application.rb
+
 ```
-# layouts/application.rb
 widget Dvl::Flashes::Views::Flashes.new(flash: flash)
 ```
 
+### Javascript API
+
+```
+DvlFlash('error', 'An error occured...');
+```
+
+## Screenshots
+
+### Error
+
+![screenshot_error]
+
+### Success
+
+![screenshot_success]
+
+### Info
+
+![screenshot_info]
+
+### Mobile
+
+![screenshot_mobile]
+
 ## Development
 
 1. `script/bootstrap`
 2. `script/preview`
-3. Open http://localhost:4567 in your web browser
+3. Open [http://localhost:4567](http://localhost:4567) in your web browser
 
 ## License
 
 MIT
+
+[version]: https://img.shields.io/gem/v/dvl-flashes.svg
+[build_status]: https://circleci-badges.herokuapp.com/dobtco/dvl-flashes/cfb22255e126bd760d2bafdfba40ffbac7786f30
+[screenshot_error]: http://artifinder.herokuapp.com/gh/dobtco/dvl-flashes/x/artifacts/0/home/ubuntu/dvl-flashes/screenshots/error.png
+[screenshot_success]: http://artifinder.herokuapp.com/gh/dobtco/dvl-flashes/x/artifacts/0/home/ubuntu/dvl-flashes/screenshots/success.png
+[screenshot_info]: http://artifinder.herokuapp.com/gh/dobtco/dvl-flashes/x/artifacts/0/home/ubuntu/dvl-flashes/screenshots/info.png
+[screenshot_mobile]: http://artifinder.herokuapp.com/gh/dobtco/dvl-flashes/x/artifacts/0/home/ubuntu/dvl-flashes/screenshots/error_mobile.png

data/circle.yml

@@ -0,0 +1,7 @@
+general:
+  artifacts:
+    - "screenshots"
+
+test:
+  override:
+    - script/cibuild

data/dvl-flashes.gemspec

@@ -21,7 +21,11 @@ Gem::Specification.new do |s|
   s.add_dependency 'erector-rails4'
   s.add_dependency 'sass'
 
+  s.add_development_dependency 'capybara', '2.4.2'
+  s.add_development_dependency 'poltergeist', '1.5.1'
   s.add_development_dependency 'rerun', '0.10.0'
+  s.add_development_dependency 'rspec', '3.1.0'
+  s.add_development_dependency 'rspec-html-matchers', '0.6.1'
   s.add_development_dependency 'sinatra', '1.4.5'
   s.add_development_dependency 'sinatra-assetpack', '0.3.3'
 end

data/lib/dvl/flashes/version.rb

@@ -1,5 +1,5 @@
 module Dvl
   module Flashes
-    VERSION = '0.0.1'
+    VERSION = '0.0.2'
   end
 end

data/lib/dvl/flashes/views/flashes.rb

@@ -6,8 +6,8 @@ module Dvl::Flashes::Views
     def content
       @flash.select { |k, v| k.to_s.in?(%w(success error info)) && v.present? }.each do |k, v|
         div(class: "flash flash_#{k}") {
-          a.close '×'.html_safe
-          text v
+          a.flash_close '×'.html_safe
+          span text v
         }
       end
     end

data/preview/app.rb

@@ -1,7 +1,7 @@
 require 'sinatra/base'
 require 'sinatra/assetpack'
-require 'erector'
 require 'active_support/all'
+require 'erector'
 require 'dvl/flashes'
 
 class App < Sinatra::Base
@@ -21,6 +21,7 @@ class App < Sinatra::Base
       html {
         head {
           link href: '/css/dvl/flashes.css', rel: 'stylesheet', type: 'text/css', media: 'all'
+          style '* {box-sizing:border-box;}'.html_safe, type: 'text/css'
         }
         body {
           # Uncomment to test rendering from existing HTML

data/script/bootstrap

@@ -21,20 +21,22 @@ do
   fi
 done
 
-## Create .ruby-gemset if it doesn't exist
-printf "Checking for .ruby-gemset... "
+if [ -d ~/.rvm ]; then
+  ## Create .ruby-gemset if it doesn't exist
+  printf "Checking for .ruby-gemset... "
 
-if [ ! -f .ruby-gemset ]; then
-  printf "\nWriting .ruby-gemset..."
-  printf 'dvl-flashes' >> .ruby-gemset
-fi
+  if [ ! -f .ruby-gemset ]; then
+    printf "\nWriting .ruby-gemset..."
+    printf 'dvl-flashes' >> .ruby-gemset
+  fi
 
-printf "OK\n"
+  printf "OK\n"
 
-## Ensure RVM is using our ruby + gemset
-source ~/.rvm/scripts/rvm
-rvm use `cat .ruby-version`
-rvm gemset use --create `cat .ruby-gemset`
+  ## Ensure RVM is using our ruby + gemset
+  source ~/.rvm/scripts/rvm
+  rvm use `cat .ruby-version`
+  rvm gemset use --create `cat .ruby-gemset`
+fi
 
 ## Bundle
 printf "Bundling...\n"

data/script/cibuild

@@ -0,0 +1,3 @@
+#! /bin/sh
+
+bundle exec rspec

data/script/preview

@@ -1,3 +1,3 @@
 #! /bin/sh
 
-rerun 'ruby preview/app.rb'
+bundle exec rerun 'ruby preview/app.rb'

data/script/release

@@ -0,0 +1,38 @@
+#!/bin/sh
+# Tag and push a release.
+
+set -e
+
+# Make sure we're in the project root.
+
+cd $(dirname "$0")/..
+
+# Build a new gem archive.
+
+rm -rf dvl-flashes-*.gem
+gem build -q dvl-flashes.gemspec
+
+# Make sure we're on the master branch.
+
+(git branch | grep -q '* master') || {
+  echo "Only release from the master branch."
+  exit 1
+}
+
+# Figure out what version we're releasing.
+
+tag=v`ls dvl-flashes-*.gem | sed 's/^dvl-flashes-\(.*\)\.gem$/\1/'`
+
+# Make sure we haven't released this version before.
+
+git fetch -t origin
+
+(git tag -l | grep -q "$tag") && {
+  echo "Whoops, there's already a '${tag}' tag."
+  exit 1
+}
+
+# Tag it and bag it.
+
+gem push dvl-flashes-*.gem && git tag "$tag" &&
+  git push origin master && git push origin "$tag"

data/spec/dvl_flashes_spec.rb

@@ -0,0 +1,67 @@
+require 'capybara/rspec'
+require 'capybara/poltergeist'
+require 'rspec-html-matchers'
+require 'active_support/all'
+require 'erector'
+require 'dvl/flashes'
+require_relative '../preview/app'
+
+Capybara.app = App
+Capybara.javascript_driver = :poltergeist
+
+def take_screenshot(error_type, filename, res_x = 900, res_y = 150)
+  describe "taking screenshot: #{filename}.png" do
+    before do
+      page.driver.resize(res_x, res_y)
+    end
+
+    it 'works' do
+      visit '/'
+      click_link error_type
+      page.save_screenshot "screenshots/#{filename}.png"
+    end
+  end
+end
+
+describe Dvl::Flashes do
+
+  describe 'Integration', type: :feature, js: true do
+    it 'Flashes properly' do
+      visit '/'
+      page.execute_script "DvlFlash('error', 'Yeah!')"
+      expect(page).to have_selector '.flash.flash_error', text: 'Yeah!'
+      sleep 4
+      expect(page).to_not have_selector '.flash.flash_error', text: 'Yeah!'
+    end
+  end
+
+  describe 'Screenshots', type: :feature, js: true do
+    take_screenshot 'Error', 'error'
+    take_screenshot 'Success', 'success'
+    take_screenshot 'Info', 'info'
+    take_screenshot 'Error', 'error_mobile', 320, 150
+  end
+
+  describe Dvl::Flashes::Views::Flashes do
+    let!(:success_html) do
+      described_class.new(
+        flash: { 'success' => 'Yeah!' }
+      ).to_html
+    end
+
+    let!(:error_html) do
+      described_class.new(
+        flash: { 'error' => 'No!' }
+      ).to_html
+    end
+
+    it 'renders the proper html' do
+      expect(success_html).to have_tag('div.flash_success', content: 'Yeah!')
+    end
+
+    it 'renders the proper html' do
+      expect(error_html).to have_tag('div.flash_error', content: 'No!')
+    end
+  end
+
+end

data/vendor/assets/javascripts/dvl/flashes.coffee

@@ -13,19 +13,23 @@ window.DvlFlash = (alertType, message, lengthInMilliseconds) ->
   else
     $alert = $("""
       <div class="flash flash_#{alertType}">
-        <a class='close'>&times;</a>
-        #{message}
+        <a class='flash_close'>&times;</a>
+        <span>#{message}</span>
       </div>
     """).appendTo("body")
 
-  setTimeout ( -> $alert.addClass 'in' ), 0
+  setTimeout ->
+    $alert.addClass 'is_visible'
+  , 0
 
   mousedOver = undefined
   timeoutExpired = undefined
 
   hide = ->
-    $alert.removeClass 'in'
-    setTimeout ( -> $alert.remove() ), TRANSITION_LENGTH
+    $alert.removeClass 'is_visible'
+    setTimeout ->
+      $alert.remove()
+    , TRANSITION_LENGTH
 
   setTimeout ->
     hide() unless mousedOver
@@ -39,6 +43,6 @@ window.DvlFlash = (alertType, message, lengthInMilliseconds) ->
       mousedOver = undefined
       hide() if timeoutExpired
 
-  $alert.on 'click', '.close', ->
+  $alert.on 'click', '.flash_close', ->
     mousedOver = undefined
     hide()

data/vendor/assets/stylesheets/dvl/flashes.scss

@@ -1,73 +1,85 @@
-$dvlFlashBackground: #efefef !default;
-$dvlFlashCloseDarkColor: #aaa !default;
-$dvlFlashCloseDarkHoverColor: #777 !default;
-$dvlFlashCloseLightColor: #e5e5e5 !default;
-$dvlFlashCloseLightHoverColor: #fff !default;
-$dvlFlashErrorColor: #c12f2e !default;
-$dvlFlashSuccessColor: #2aa828 !default;
-$dvlFlashZIndex: 1031 !default; // above modal backdrop..
+$dvlFlashZIndex: 1031 !default; // above modal
+
+// Remove when we add `based` as a package
+$radius: 3px;
+$black: #222;
+$white: #fff;
+$lighterGray: #efefef;
+$lightGray: #e5e5e5;
+$darkGray: #aaa;
+$darkerGray: #777;
+$errorColor: #c12f2e;
+$successColor: #2aa828;
 
 .flash {
   position: fixed;
-  top: -100px;
-  transition: top 0.3s linear;
+  left: 0;
+  top: 0;
+  transform: translateY(-8rem);
+  opacity: 0;
+  transition: transform 0.3s ease-out, opacity 0.15s ease-out;
   width: 95%;
-  left: 2.5%;
+  margin: 1rem 2.5% 0;
   z-index: $dvlFlashZIndex;
-  background: $dvlFlashBackground;
-  padding: 0.5rem 1.5rem 0.5rem 1rem;
+  background: $lighterGray;
+  border-radius: $radius;
+  padding: 0.75rem 1rem;
   font-size: 0.9rem;
   color: #333;
-  box-shadow: 1px 1px 1px 0 #333;
-
+  box-shadow: 0 1px 0 rgba(#000,0.2);
+  line-height: 1rem;
+  span {
+    display: inline-block;
+    max-width: 95%;
+  }
   a {
-    color: #222;
     text-decoration: underline;
+  }
+  &.is_visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  .flash_close {
+    position: absolute;
+    line-height: 2.5rem;
+    text-decoration: none;
+    right: 1rem;
+    top: 0;
     font-weight: bold;
+    color: $darkGray;
     &:hover {
+      color: $darkerGray;
       text-decoration: none;
     }
   }
+}
 
-  .close {
-    position: absolute;
-    top: 1px;
-    right: 8px;
-    color: $dvlFlashCloseDarkColor;
-    font-size: 1.5rem;
-    text-decoration: none;
-    &:hover {
-      color: $dvlFlashCloseDarkHoverColor;
-    }
+// Colors
+.flash_error, .flash_success {
+  color: $white;
+  a {
+    color: $white;
   }
-  &.flash_error, &.flash_success {
-    color: #fff;
-    a {
-      color: #fff;
-    }
-    .close {
-      color: $dvlFlashCloseLightColor;
-      &:hover {
-        color: $dvlFlashCloseLightHoverColor;
-      }
+  .flash_close {
+    color: $lightGray;
+    &:hover {
+      color: $white;
     }
   }
-  &.flash_error {
-    background: $dvlFlashErrorColor;
-  }
+}
 
-  &.flash_success{
-    background: $dvlFlashSuccessColor;
-  }
-  &.in {
-    top: 14px;
-  }
+.flash_error {
+  background: $errorColor;
+}
+
+.flash_success {
+  background: $successColor;
 }
 
 @media only screen and (min-width: 768px) {
   .flash {
-    width: 700px;
-    margin-left: -350px;
+    width: 50rem;
+    margin-left: -25rem;
     left: 50%;
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dvl-flashes
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Adam Becker
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-09-14 00:00:00.000000000 Z
+date: 2014-09-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -66,6 +66,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: capybara
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.4.2
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.4.2
+- !ruby/object:Gem::Dependency
+  name: poltergeist
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 1.5.1
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 1.5.1
 - !ruby/object:Gem::Dependency
   name: rerun
   requirement: !ruby/object:Gem::Requirement
@@ -80,6 +108,34 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 0.10.0
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 3.1.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 3.1.0
+- !ruby/object:Gem::Dependency
+  name: rspec-html-matchers
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 0.6.1
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 0.6.1
 - !ruby/object:Gem::Dependency
   name: sinatra
   requirement: !ruby/object:Gem::Requirement
@@ -115,17 +171,22 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".gitignore"
+- ".hound.yml"
 - ".ruby-version"
 - Gemfile
 - LICENSE.md
 - README.md
+- circle.yml
 - dvl-flashes.gemspec
 - lib/dvl/flashes.rb
 - lib/dvl/flashes/version.rb
 - lib/dvl/flashes/views/flashes.rb
 - preview/app.rb
 - script/bootstrap
+- script/cibuild
 - script/preview
+- script/release
+- spec/dvl_flashes_spec.rb
 - vendor/assets/javascripts/dvl/flashes.coffee
 - vendor/assets/stylesheets/dvl/flashes.scss
 homepage: http://github.com/dobtco/dvl-flashes
@@ -152,4 +213,6 @@ rubygems_version: 2.2.2
 signing_key: 
 specification_version: 4
 summary: Flash alerts for the DOBT View Layer.
-test_files: []
+test_files:
+- spec/dvl_flashes_spec.rb
+has_rdoc: