shipyard-framework 0.4.9 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1e59c5563374fc7313cf537453ffad9671bcace4
-  data.tar.gz: 5722d536bc665e1d0a84ddad0de047e5404010f3
+  metadata.gz: 99773df6e410fe11031d0952d7e3e2aa04591241
+  data.tar.gz: 9d2402c4c281779799c1f008fb635b6e979ef25e
 SHA512:
-  metadata.gz: 47d6703a49855d7bfb25af458c451b058cb68a0e61d2613e17d66c383819c1888dd94055a1cfabc5d96ed88527838d24001ccc223f7b7d40d4c08770d42d3d61
-  data.tar.gz: b81263634628232f399496f0362b67d8372da0d2d7bee106598bcdcc725335edcaec173593a51dc98d1bcde82fbbabb3da0aa9c8fa3171428a8450f5d6c4fc3b
+  metadata.gz: 969689dd5064d951992920c8bd8bb03edcd947580114416dea53c779710f245c15ad00e9fe94c54ed0f5bff4427c3b149b976c27e8b45ae528738e128a360ea5
+  data.tar.gz: 8523e6bf496dfa3afeec3c59abf0f81afdd136b934c346e57ab38d4c0f516a557691d5f30a3d6f7549a421ef58830b9e618a7572c024e95908aa23e902720487

data/app/helpers/shipyard/button_helper.rb

@@ -16,6 +16,7 @@ module Shipyard
 
       # Output the appropriate button.
       if options.key?(:href)
+        options[:role] = :button
         link_to text, options[:href], btn_options(args, options)
       else
         content_tag :button, text, btn_options(args, options)

data/assets/stylesheets/shipyard/components/_alerts.sass

@@ -1,9 +1,10 @@
 +component('alert')
   display: block
   border-radius: 5px
-  background: $blue
-  color: rgba(#fff,.9)
+  background: $gray
+  color: $gray-lightest
   position: relative
+  text-shadow: 0 1px 0 rgba(#000,.08)
   +respond-to(min-height, (x0: 50px, x1: 60px))
   +respond-to(margin-bottom, (x0: 10px, x1: 15px))
   +respond-to(padding, (x0: 12px 10px, x1: 17px 20px, x2: 17px 30px))
@@ -24,23 +25,27 @@
     background: rgba(#fff, .25)
     transform: translatex(-100%)
     animation: slide-in-from-left 10s linear 0s forwards
-  &-txt,
-  &-txt p
-    margin: 0
-    font-weight: $medium
-    .legacy-content &
-      font-size: $font-size
-      line-height: inherit
+
+  // Alert: Types
   &-success
+    color: $green-lightest
     background: darken($green, 5%)
   &-warning
+    color: $yellow-lightest
     background: darken($yellow, 20%)
   &-error
+    color: $red-lightest
     background: $red
-  &-description
-    opacity: 0.75
+  &-info
+    background: $blue
+    color: $blue-lightest
+
+  // Alert: Sub-components
+  &-txt,
+  &-txt p
+    margin: 0
+    font-weight: $medium
   &-cta
-    +btn-color(darken($blue, 10%))
     +breakpoint-x0
       display: block
       text-align: center

data/assets/stylesheets/shipyard/components/_buttons.sass

@@ -88,6 +88,21 @@
     max-width: 600px
     margin: 0 auto
 
+  // Alert Buttons
+  .alert &
+    +btn-color(darken($gray, 20%))
+    +btn-hover(darken($gray, 25%))
+  .alert-info &
+    +btn-color(darken($blue, 10%))
+    +btn-hover(darken($blue, 15%))
+  .alert-warning &
+    +btn-color($yellow-darker)
+    +btn-hover($yellow-darkest)
+  .alert-success &
+    +extend('cta')
+  .alert-error &
+    +extend('caution')
+
   &-margin
     margin: 0 5px
     &-lg
@@ -107,6 +122,14 @@
       +btn-color(none, darken($text-color-light, 5%), lighten($gray-light, 5%))
       +btn-hover(none, darken($text-color-light, 20%), darken($gray-light, 5%))
 
+  &-caution
+    +btn-color($red-dark)
+    +btn-hover($red-darker)
+
+  &-cta
+    +btn-color($green-dark)
+    +btn-hover($green-darker)
+
   &-checked
     &, &:active, &:hover, &:focus
       +btn-color($green-dark, #fff)

data/assets/stylesheets/shipyard/components/_code.sass

@@ -22,6 +22,8 @@
   .alert &
     color: #fff
     margin: 0 2px
+    border-color: darken($gray, 10%)
+    background-color: darken($gray, 5%)
   .alert-info &
     border-color: darken($blue, 10%)
     background-color: darken($blue, 5%)
@@ -32,5 +34,5 @@
     border-color: $yellow-darker
     background-color: darken($yellow-dark, 5%)
   .alert-success &
-    border-color: darken($green, 15%)
+    border-color: $green-dark
     background-color: darken($green, 10%)

data/assets/stylesheets/shipyard/variables/_color_utilities.sass

@@ -1,73 +1,74 @@
 // Gray
 $gray: color('gray') !default
-$gray-light: color('gray', light) !default
-$gray-lighter: color('gray', lighter) !default
-$gray-lightest: color('gray', lightest) !default
-$gray-dark: color('gray', dark) !default
-$gray-darkest: color('gray', darkest) !default
+$gray-light: color('gray', 'light') !default
+$gray-lighter: color('gray', 'lighter') !default
+$gray-lightest: color('gray', 'lightest') !default
+$gray-dark: color('gray', 'dark') !default
+$gray-darkest: color('gray', 'darkest') !default
 
 // Green
 $green: color('green') !default
-$green-light: color('green', light) !default
-$green-lightest: color('green', lightest) !default
-$green-dark: color('green', dark) !default
-$green-darkest: color('green', darkest) !default
+$green-light: color('green', 'light') !default
+$green-lightest: color('green', 'lightest') !default
+$green-dark: color('green', 'dark') !default
+$green-darker: color('green', 'darker') !default
+$green-darkest: color('green', 'darkest') !default
 
 // Blue
 $blue: color('blue') !default
-$blue-light: color('blue', light) !default
-$blue-lightest: color('blue', lightest) !default
-$blue-dark: color('blue', dark) !default
-$blue-darkest: color('blue', darkest) !default
+$blue-light: color('blue', 'light') !default
+$blue-lightest: color('blue', 'lightest') !default
+$blue-dark: color('blue', 'dark') !default
+$blue-darkest: color('blue', 'darkest') !default
 
 // Teal
 $teal: color('teal') !default
-$teal-light: color('teal', light) !default
-$teal-lightest: color('teal', lightest) !default
-$teal-dark: color('teal', dark) !default
-$teal-darkest: color('teal', darkest) !default
+$teal-light: color('teal', 'light') !default
+$teal-lightest: color('teal', 'lightest') !default
+$teal-dark: color('teal', 'dark') !default
+$teal-darkest: color('teal', 'darkest') !default
 
 // Red
 $red: color('red') !default
-$red-light: color('red', light) !default
-$red-lighter: color('red', lighter) !default
-$red-lightest: color('red', lightest) !default
-$red-dark: color('red', dark) !default
-$red-darker: color('red', darker) !default
-$red-darkest: color('red', darkest) !default
+$red-light: color('red', 'light') !default
+$red-lighter: color('red', 'lighter') !default
+$red-lightest: color('red', 'lightest') !default
+$red-dark: color('red', 'dark') !default
+$red-darker: color('red', 'darker') !default
+$red-darkest: color('red', 'darkest') !default
 
 // Yellow
 $yellow: color('yellow') !default
-$yellow-light: color('yellow', light) !default
-$yellow-lighter: color('yellow', lighter) !default
-$yellow-lightest: color('yellow', lightest) !default
-$yellow-dark: color('yellow', dark) !default
-$yellow-darker: color('yellow', darker) !default
-$yellow-darkest: color('yellow', darkest) !default
+$yellow-light: color('yellow', 'light') !default
+$yellow-lighter: color('yellow', 'lighter') !default
+$yellow-lightest: color('yellow', 'lightest') !default
+$yellow-dark: color('yellow', 'dark') !default
+$yellow-darker: color('yellow', 'darker') !default
+$yellow-darkest: color('yellow', 'darkest') !default
 
 // Orange
 $orange: color('orange') !default
-$orange-light: color('orange', light) !default
-$orange-lighter: color('orange', lighter) !default
-$orange-lightest: color('orange', lightest) !default
-$orange-dark: color('orange', dark) !default
-$orange-darker: color('orange', darker) !default
-$orange-darkest: color('orange', darkest) !default
+$orange-light: color('orange', 'light') !default
+$orange-lighter: color('orange', 'lighter') !default
+$orange-lightest: color('orange', 'lightest') !default
+$orange-dark: color('orange', 'dark') !default
+$orange-darker: color('orange', 'darker') !default
+$orange-darkest: color('orange', 'darkest') !default
 
 // Coral
 $coral: color('coral') !default
-$coral-light: color('coral', light) !default
-$coral-lighter: color('coral', lighter) !default
-$coral-lightest: color('coral', lightest) !default
-$coral-dark: color('coral', dark) !default
-$coral-darker: color('coral', darker) !default
-$coral-darkest: color('coral', darkest) !default
+$coral-light: color('coral', 'light') !default
+$coral-lighter: color('coral', 'lighter') !default
+$coral-lightest: color('coral', 'lightest') !default
+$coral-dark: color('coral', 'dark') !default
+$coral-darker: color('coral', 'darker') !default
+$coral-darkest: color('coral', 'darkest') !default
 
 // Purple
 $purple: color('purple') !default
-$purple-light: color('purple', light) !default
-$purple-lighter: color('purple', lighter) !default
-$purple-lightest: color('purple', lightest) !default
-$purple-dark: color('purple', dark) !default
-$purple-darker: color('purple', darker) !default
-$purple-darkest: color('purple', darkest) !default
+$purple-light: color('purple', 'light') !default
+$purple-lighter: color('purple', 'lighter') !default
+$purple-lightest: color('purple', 'lightest') !default
+$purple-dark: color('purple', 'dark') !default
+$purple-darker: color('purple', 'darker') !default
+$purple-darkest: color('purple', 'darkest') !default

data/assets/stylesheets/shipyard/variables/_colors.scss

@@ -8,23 +8,27 @@ $colors: (
     darkest: #1e252c
   ),
   "green": (
-    base: #3acc7c,
-    light: #97ffc6,
-    lightest: #b5ffd6,
-    dark: #2c995d,
-    darkest: #1d663e
+    base: darken(#3acc7c, 3%),
+    light: lighten(#3acc7c, 15%),
+    lighter: lighten(#3acc7c, 30%),
+    lightest: lighten(#3acc7c, 41%),
+    dark: darken(#3acc7c, 18%),
+    darker: darken(#3acc7c, 26%),
+    darkest: darken(#3acc7c, 32%)
   ),
   "blue": (
     base: #1ca1e3,
     light: #5eb9e6,
-    lightest: #9ed8f5,
+    lighter: #9ed8f5,
+    lightest: lighten(#9ed8f5, 10%),
     dark: #0075b0,
     darkest: #004d73
   ),
   "teal": (
     base: #20a5a8,
     light: #6ab7b9,
-    lightest: #b2dbdc,
+    lighter: #b2dbdc,
+    lightest: lighten(#b2dbdc, 13%),
     dark: #0e6e70,
     darkest: #00494b
   ),
@@ -32,7 +36,7 @@ $colors: (
     base: #e06158,
     light: lighten(#e06158, 8%),
     lighter: lighten(#e06158, 16%),
-    lightest: lighten(#e06158, 25%),
+    lightest: lighten(#e06158, 32%),
     dark: #b13b39,
     darker: #892120,
     darkest: desaturate(darken(#892120, 8%), 0%)

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

@@ -7,11 +7,15 @@ module Shipyard
 
       def initialize(tag_name, type, options)
         super
-        @type = type.tr(':','').to_sym
+        @type = type.tr(':','').to_sym unless type.blank?
       end
 
       def render(context)
-        flash_alert @type, super
+        if @type
+          flash_alert @type, super
+        else
+          flash_alert super
+        end
       end
     end
   end

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.4.9'
+  VERSION = '0.5.0'
 end

data/styleguide/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    shipyard-framework (0.4.9)
+    shipyard-framework (0.5.0)
       actionview (~> 5.0)
 
 GEM
@@ -84,4 +84,4 @@ DEPENDENCIES
   shipyard-framework!
 
 BUNDLED WITH
-   1.15.4
+   1.16.0.pre.2

data/styleguide/_sass/views.sass

@@ -1,3 +1,12 @@
+// Global Styles
+p, h1, h2, h3
+  code
+    margin: 0 5px
+    @extend .code-inline
+
+hr
+  margin: 50px 0
+
 // Utilities: Colors
 +component('shade')
   &-list

data/styleguide/components/alerts.md

@@ -3,25 +3,59 @@ title: Shipyard Alerts
 ---
 
 # {{ page.title }}
+<p class="text-light text-lg margin-top-xxs">Alerts should be used to grab a user's attention before proceeding to the next action. They are commonly found at the very top of the page directly above the content.</p>
 
 ---
 
+### Default `.alert`
+<p class="text-light margin-bottom-sm">Used to display notes, tips, and other non-critical information.</p>
+
+{% alert %}
+  Ten other people are also viewing tickets for <a href="#">this flight</a>.
+  Use the code <code class="code-inline">Travel_Light_2017</code> before you book your flight.
+  {% btn Call to Action, :sm, class: 'alert-cta' %}
+{% endalert %}
+
+---
+
+### Info `.alert-info`
+<p class="text-light margin-bottom-sm">Useful when drawing attention to non-critical information or actions we want the user to take.</p>
+
 {% alert :info %}
-  Ten other people are also viewing tickets for this flight.
+  Ten other people are also viewing tickets for <a href="#">this flight</a>.
   Use the code <code class="code-inline">Travel_Light_2017</code> before you book your flight.
+  {% btn Call to Action, :sm, class: 'alert-cta' %}
 {% endalert %}
 
+---
+
+### Success `.alert-success`
+<p class="text-light margin-bottom-sm">Useful when drawing attention to interactions that have produced successful results.</p>
+
 {% alert :success %}
   Pack your bags! You'll be on the next flight to Hawaii.
-  Use the code <code class="code-inline">Travel_Light_2017</code> on your next flight.
+  Use the code <code class="code-inline">Travel_Light_2017</code> on your next flight. In the meantime you can <a href="#">invite a friend</a> to this flight.
+  {% btn Call to Action, :sm, class: 'alert-cta' %}
 {% endalert %}
 
+---
+
+### Warning `.alert-warning`
+<p class="text-light margin-bottom-sm">Useful when drawing attention to critical, time-sensitive information &mdash; even if nothing has gone wrong.</p>
+
 {% alert :warning %}
   There are only 2 seats left on this flight! We recommend to book your tickets as soon as possible.
   Use the code <code class="code-inline">Travel_Light_2017</code> before you book your flight.
+  {% btn Call to Action, :sm, class: 'alert-cta' %}
 {% endalert %}
 
+---
+
+### Error `.alert-error`
+<p class="text-light margin-bottom-sm">Useful when drawing attention to something that has gone critically wrong.</p>
+
 {% alert :error %}
   This flight is now sold out. Let's get you on the next flight to Kauai.
   We hope the code <code class="code-inline">Travel_Light_2017</code> will be useful for your next flight.
+  {% btn Call to Action, :sm, class: 'alert-cta' %}
 {% endalert %}

data/styleguide/components/buttons.html

@@ -12,6 +12,8 @@ title: Shipyard Buttons
   {% btn Primary, :primary %}
   {% btn Secondary, :secondary %}
   {% btn Disabled, :disabled %}
+  {% btn CTA, :cta %}
+  {% btn Caution, :caution %}
 </div>
 <div class="box-secondary box-padding align-center bg-gray-dark">
   {% btn Inverse, :inverse %}
@@ -20,6 +22,14 @@ title: Shipyard Buttons
 
 <hr />
 
+<div class="box-padding align-center">
+  {% btn Button %}
+  <a href="#" class="btn">Link</a>
+  <input type="button" class="btn" value="Input" />
+</div>
+
+<hr />
+
 <h2>Button Sizes (default: md)</h2>
 <div class="box-padding align-center">
   {% btn XX-Small, :xxs %}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.4.9
+  version: 0.5.0
 platform: ruby
 authors:
 - Shipyard
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-09-01 00:00:00.000000000 Z
+date: 2017-09-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview