shipyard-framework 0.5.55 → 0.5.56

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f40ecec157c31290f222df4bef18bce37cbe1014
-  data.tar.gz: 6e82cc40048597c484009650f30f23df61df981b
+  metadata.gz: 6a6e5fe2e1a5a2fe2e9770d7dfb03f0c5189f449
+  data.tar.gz: f1f6d9613e5ea8dac457d5e34f1222ae6e6cfef0
 SHA512:
-  metadata.gz: 2c7220f20c3bed855754189be9cd27285d4bc30275991a034f57e63e7c32aa8f80216415dce4a78b7b2d66d85538a56ab567ca2a5265306ca3856e4db07944f0
-  data.tar.gz: 4d877afb8c01fc29be1e0b156adadb0899a7c13c38effa4c09283816f51335dc1215ccc8cb75f405b69eca8b8ac47c4c7fa7be44e826e7f01e4035bdf194ba9e
+  metadata.gz: 1943923e63586b092bc2710bbfcd2243d92dd080062881a76ef21ffbdd218186f48b72e41328b220d3c9f5dd81665bbb524711c531e2802a38c3a683026c44b3
+  data.tar.gz: c8bcb32fbced739b0fea2e3c64eda939ae37cc6a37efee2968bb24da25f8296cee2008ee08d15227e55b4570f020899ba7aeed2abd85e4f59927bca592c92217

data/app/helpers/shipyard/box_helper.rb

@@ -4,9 +4,11 @@ module Shipyard
     include ActionView::Helpers::TagHelper
     include ActionView::Helpers::TextHelper
 
-    def box(types, content)
+    def box(types=[], &block)
+      types = [*types]
+
       # Gather the appropriate box classes into an array.
-      class_list = ['box']
+      class_list = types.include?(:secondary) ? [] : ['box']
       types.each do |type|
         class_list << "box-#{type}"
       end
@@ -16,7 +18,7 @@ module Shipyard
       options[:class] = class_list.join(' ')
 
       # Return the HTML structure for the box.
-      content_tag :div, content, options
+      content_tag :div, capture(&block), options
     end
   end
 end

data/app/helpers/shipyard/note_helper.rb

@@ -4,13 +4,12 @@ module Shipyard
     include ActionView::Helpers::TagHelper
     include ActionView::Helpers::TextHelper
 
-    def note(type, content)
+    def note(type, content, options={})
       # Gather the appropriate box classes into an array.
       class_list = ['note']
       class_list << "note-#{type}" if type
 
       # Join the CSS Classes together.
-      options ||= {}
       options[:class] = class_list.join(' ')
 
       # Return the HTML structure for the box.

data/assets/stylesheets/shipyard/_core.sass

@@ -1,17 +1,6 @@
-@import shipyard/variables/colors
-@import shipyard/functions/map-merge-options
-@import shipyard/functions/color
-@import shipyard/variables/color_utilities
-@import shipyard/variables/typography
-@import shipyard/variables/grid
-@import shipyard/variables/misc
-@import shipyard/variables/components
-@import shipyard/mixins/box-model
-@import shipyard/mixins/selectors
-@import shipyard/mixins/responsive
-@import shipyard/mixins/components
-@import shipyard/mixins/positioning
-@import shipyard/mixins/prefixed
+@import shipyard/functions
+@import shipyard/mixins
+@import shipyard/variables
 @import shipyard/core/animations
 @import shipyard/core/reset
 @import shipyard/core/typography

data/assets/stylesheets/shipyard/_functions.sass

@@ -0,0 +1,2 @@
+@import shipyard/functions/map-merge-options
+@import shipyard/functions/color

data/assets/stylesheets/shipyard/_mixins.sass

@@ -0,0 +1,6 @@
+@import shipyard/mixins/box-model
+@import shipyard/mixins/selectors
+@import shipyard/mixins/responsive
+@import shipyard/mixins/components
+@import shipyard/mixins/positioning
+@import shipyard/mixins/prefixed

data/assets/stylesheets/shipyard/_variables.sass

@@ -0,0 +1,6 @@
+@import shipyard/variables/colors
+@import shipyard/variables/color_utilities
+@import shipyard/variables/typography
+@import shipyard/variables/grid
+@import shipyard/variables/misc
+@import shipyard/variables/components

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

@@ -4,7 +4,6 @@
   border-radius: 5px
   border: 0
   cursor: pointer
-  color: #fff
   transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, opacity 300ms ease
   outline: none
   border-width: 2px
@@ -151,11 +150,6 @@
   &-inverse
     +btn-color(#fff, inherit)
     +btn-hover($blue, #fff)
-    &.btn-current
-      +btn-hover(#fff, inherit)
     &-secondary
       +btn-color(transparent, #fff, rgba(#fff,.2))
       +btn-hover(transparent, #fff, rgba(#fff,.5))
-
-  &-current
-    cursor: default

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

@@ -25,12 +25,12 @@
     +respond-to(top, (x0: -7px, x1: -8px))
     .hamburger-button-clicked &
       top: 0
-      +rotate(45deg)
+      transform: rotate(45deg)
   &:after
     +respond-to(bottom, (x0: -8px, x1: -9px))
     .hamburger-button-clicked &
       bottom: 0
-      +rotate(-45deg)
+      transform: rotate(-45deg)
 
   // --------------------------------------------------
   // Hamburger: Button

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

@@ -2,7 +2,7 @@
   display: block
   position: relative
   +respond-to(min-height, (x0: 50px, x1: 60px))
-  +respond-to(margin-bottom, (x0: 10px, x1: 15px))
+  +respond-to(margin, (x0: 10px 0, x1: 15px 0))
   +respond-to(padding, (x0: 12px 10px, x1: 17px 20px, x2: 17px 30px))
   a, strong, .strong
     &:not(.btn)

data/assets/stylesheets/shipyard/core/_reset.sass

@@ -12,6 +12,3 @@
 
 *:-moz-focusring
   outline: none
-
-button
-  font: inherit

data/assets/stylesheets/shipyard/core/_typography.sass

@@ -15,16 +15,16 @@ a, .link
     color: darken($blue, 10%)
     text-decoration: underline
 
-hr
++component('hr')
   height: 0
   border: 0 solid $border-color-light
   border-width: 2px 0 0
   +respond-to(margin, (x0: 20px 0, x1: 30px 0))
-  &.dark
+  &-dark
     border-color: $border-color
-  &.lightest
+  &-light
     border-color: $border-color-lightest
-  &.thin
+  &-thin
     border-width: 1px 0 0
 
 strong
@@ -47,6 +47,7 @@ img
   display: block
 
 button
+  font: inherit
   background: none
   border: none
   cursor: pointer

data/assets/stylesheets/shipyard/mixins/_prefixed.sass

@@ -1,9 +1,3 @@
-@mixin rotate($deg)
-  -ms-transform: rotate($deg)
-  -moz-transform: rotate($deg)
-  -webkit-transform: rotate($deg)
-  transform: rotate($deg)
-
 @mixin appearance($value)
   appearance: $value
   -moz-appearance: $value

data/assets/stylesheets/shipyard/utilities/_grid.sass

@@ -1,4 +1,4 @@
-$widths: (auto, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100)
+$widths: (5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100)
 
 @mixin column-style($property, $width)
   @if $width == auto

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

@@ -14,7 +14,7 @@ module Shipyard
       end
 
       def render(context)
-        box @types, raw(super.strip)
+        box(@types) { raw(super.strip) }
       end
     end
   end

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.5.55'
+  VERSION = '0.5.56'
 end

data/spec/helpers/box_helper_spec.rb

@@ -3,19 +3,25 @@ require 'spec_helper'
 RSpec.describe Shipyard::BoxHelper, type: :helper do
   include Shipyard::BoxHelper
 
-  xit 'should return a default box' do
+  it 'should return a default box' do
     expect(box { 'test' }).to match(%r{<div class="box">test</div>})
   end
 
   it 'should return all box types' do
-    %w(secondary padding link).each do |type|
-      expect(box([type.to_sym], 'test')).to match(%r{<div class="box box-#{type}">test</div>})
+    types = %w(secondary padding link).map(&:to_sym)
+    types.each do |type|
+      if type == :secondary
+        expect(box(type) { 'test' }).to match(%r{<div class="box-#{type}">test</div>})
+      else
+        expect(box(type) { 'test' }).to match(%r{<div class="box box-#{type}">test</div>})
+      end
     end
   end
 
   it 'should return all box sizes' do
-    %w(xxs xs sm md lg xl).each do |size|
-      expect(box([size.to_sym], 'test')).to match(%r{<div class="box box-#{size}">test</div>})
+    sizes = %w(xxs xs sm md lg xl xxl).map(&:to_sym)
+    sizes.each do |size|
+      expect(box(size) { 'test' }).to match(%r{<div class="box box-#{size}">test</div>})
     end
   end
 end

data/styleguide/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    shipyard-framework (0.5.54)
+    shipyard-framework (0.5.56)
       actionview (~> 5.0)
       sprockets-es6 (~> 0.9.2)
 
@@ -101,7 +101,7 @@ GEM
       babel-transpiler
       sprockets (>= 3.0.0)
     thread_safe (0.3.6)
-    tzinfo (1.2.3)
+    tzinfo (1.2.4)
       thread_safe (~> 0.1)
 
 PLATFORMS

data/styleguide/_assets/css/application.sass

@@ -1,9 +1,3 @@
-$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 vendor
 @import layout
 @import views

data/styleguide/_assets/css/vendor.sass

@@ -0,0 +1,6 @@
+$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')

data/styleguide/_assets/css/views.sass

@@ -1,13 +1,14 @@
-// Code Styles
-code
-  li &, p &, h1 &, h2 &, h3 &
-    margin: 0 3px
-    @extend .code-inline
-  div.highlighter-rouge &
-    @extend .code-block
-    margin: 15px 0
+// Code "Span"
+code.highlighter-rouge
+  @extend .code-inline
+  margin: 0 3px
+
+// Code "Block"
+.code-block
+  margin: 15px 0
 
 hr
+  @extend .hr
   +respond-to(margin, (x0: 30px 0, x1: 40px 0, x2: 50px 0))
 
 // Utilities: Colors
@@ -63,3 +64,20 @@ hr
     min-height: 30px
     flex-direction: column
     justify-content: center
+
++component('utilities-typography')
+  &-hr
+    margin: 0 30px
+    &-box
+      &,
+      &-dark,
+      &-light,
+      &-default
+        padding: 30px 0
+        margin: 15px 0
+      &-dark
+        background: $gray-lighter
+      &-light
+        background: #fff
+      &-default
+        border: 2px solid $border-color-light

data/styleguide/_config.yml

@@ -27,6 +27,20 @@ sass:
 
 # Build settings
 markdown: kramdown
+kramdown:
+  syntax_highlighter: rouge
+  syntax_highlighter_opts:
+    default_lang: html
+    block:
+      css: class
+      wrap: true
+      disable: false
+      css_class: 'code-block'
+    span:
+      css: class
+      wrap: true
+      disable: false
+      css_class: 'code-inline'
 plugins:
   - jekyll-assets
   - shipyard-framework

data/styleguide/components/notes.md

@@ -11,8 +11,10 @@ description: Notes should be used to grab a user's attention along side of other
 <p class="text-light margin-bottom-sm">Used to display notes, tips, and other non-critical information.</p>
 
 {% note %}
-  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.
+  <p markdown="1">
+    Ten other people are also viewing tickets for [this flight](#).
+    Use the code `Travel_Light_2017` before you book your flight.
+  </p>
   {% btn Call to Action, :sm, class: 'note-cta' %}
 {% endnote %}
 
@@ -22,8 +24,10 @@ description: Notes should be used to grab a user's attention along side of other
 <p class="text-light margin-bottom-sm">Useful when drawing attention to non-critical information or actions we want the user to take.</p>
 
 {% note :info %}
-  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.
+  <p markdown="1">
+    Ten other people are also viewing tickets for [this flight](#).
+    Use the code `Travel_Light_2017` before you book your flight.
+  </p>
   {% btn Call to Action, :sm, class: 'note-cta' %}
 {% endnote %}
 
@@ -33,8 +37,10 @@ description: Notes should be used to grab a user's attention along side of other
 <p class="text-light margin-bottom-sm">Useful when drawing attention to interactions that have produced successful results.</p>
 
 {% note :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. In the meantime you can <a href="#">invite a friend</a> to this flight.
+  <p markdown="1">
+    Pack your bags! You'll be on the next flight to Hawaii.
+    Use the code `Travel_Light_2017` on your next flight. In the meantime you can [invite a friend](#) to this flight.
+  </p>
   {% btn Call to Action, :sm, class: 'note-cta' %}
 {% endnote %}
 
@@ -44,7 +50,9 @@ description: Notes should be used to grab a user's attention along side of other
 <p class="text-light margin-bottom-sm">Useful when drawing attention to critical information.</p>
 
 {% note :warning %}
-  There are only 2 seats left on this flight! We recommend to <a href="#">book your tickets</a> as soon as possible.
-  Use the code <code class="code-inline">Travel_Light_2017</code> before you book your flight.
+  <p markdown="1">
+    There are only 2 seats left on this flight! We recommend to [book your tickets](#) as soon as possible.
+    Use the code `Travel_Light_2017` before you book your flight.
+  </p>
   {% btn Call to Action, :sm, class: 'note-cta' %}
 {% endnote %}

data/styleguide/utilities/{typography.html → typography.md}

@@ -67,3 +67,59 @@ text_shades: [normal, light, lighter, lightest]
     </div>
   </div>
 </div>
+
+---
+
+## Horizontal Rules
+<p class="text-light margin-bottom-md" markdown="1">Shipyard doesn't make any assumptions on how you want to common tags like an `hr` to styled. As a result, we would recommend extending the `.hr` class in your own SASS files to achieve the results below on all `hr` tags (e.g. `@extend .hr`).</p>
+
+<div class="utilities-typography-hr-box-default">
+  <hr class="utilities-typography-hr" />
+</div>
+<div class="utilities-typography-hr-box-dark">
+  <hr class="utilities-typography-hr hr-dark" />
+</div>
+<div class="utilities-typography-hr-box-light">
+  <hr class="utilities-typography-hr hr-light" />
+</div>
+
+{% note :warning %}
+  <p markdown="1">
+    Please note that the code examples below are **not possible** without `hr { @extend .hr }` somewhere in your application's sass files. If you haven't done this, then you'll need to include the `.hr` class on every horizontal rule.
+  </p>
+{% endnote %}
+
+```html
+<hr />
+
+<!-- Useful on darker backgrounds. -->
+<hr class="hr-dark" />
+
+<!-- Useful on lighter backgrounds. -->
+<hr class="hr-light" />
+```
+
+---
+
+## Thin Horizontal Rules `.hr-thin`
+{: .margin-bottom-md }
+
+<div class="utilities-typography-hr-box-default">
+  <hr class="utilities-typography-hr hr-thin" />
+</div>
+<div class="utilities-typography-hr-box-dark">
+  <hr class="utilities-typography-hr hr-dark hr-thin" />
+</div>
+<div class="utilities-typography-hr-box-light">
+  <hr class="utilities-typography-hr hr-light hr-thin" />
+</div>
+
+```html
+<hr class="hr-thin" />
+
+<!-- Useful on darker backgrounds. -->
+<hr class="hr-thin hr-dark" />
+
+<!-- Useful on lighter backgrounds. -->
+<hr class="hr-thin hr-light" />
+```

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.5.55
+  version: 0.5.56
 platform: ruby
 authors:
 - Codeship
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-10-26 00:00:00.000000000 Z
+date: 2017-10-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -208,7 +208,10 @@ files:
 - assets/stylesheets/_shipyard.sass
 - assets/stylesheets/shipyard/_components.sass
 - assets/stylesheets/shipyard/_core.sass
+- assets/stylesheets/shipyard/_functions.sass
+- assets/stylesheets/shipyard/_mixins.sass
 - assets/stylesheets/shipyard/_utilities.sass
+- assets/stylesheets/shipyard/_variables.sass
 - assets/stylesheets/shipyard/components/_alerts.sass
 - assets/stylesheets/shipyard/components/_boxes.sass
 - assets/stylesheets/shipyard/components/_buttons.sass
@@ -284,6 +287,7 @@ files:
 - styleguide/Gemfile.lock
 - styleguide/_assets/css/application.sass
 - styleguide/_assets/css/layout.sass
+- styleguide/_assets/css/vendor.sass
 - styleguide/_assets/css/views.sass
 - styleguide/_assets/js/application.es6
 - styleguide/_assets/js/views/utilities/colors.es6
@@ -309,7 +313,7 @@ files:
 - styleguide/utilities/index.md
 - styleguide/utilities/margin-padding.md
 - styleguide/utilities/responsive.md
-- styleguide/utilities/typography.html
+- styleguide/utilities/typography.md
 homepage: https://github.com/codeship/shipyard
 licenses:
 - MIT