shipyard-framework 0.5.69 → 0.5.70

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c683a0fb4c6119e84121a865a862637812e24beb773c3decd8dded350f2293c
-  data.tar.gz: 589dc97db40a3d04eb72e06ad72486d70f724668f3a4da8c096042df621df42c
+  metadata.gz: 9ffe0c591ade0072321117debf737834f8b996c1c241c201c1b5a235e4c835c9
+  data.tar.gz: 5ea90413b10bd35bb92e5dfe80ab621af420f2385a2ab48f464b0ae0d17ace30
 SHA512:
-  metadata.gz: 12bafc1e15ce24ceb9b3655d90c5fae198cc7a9c7842cbbf836e2a5f50162a131134c8394b89a0a9ac7bb06a0d692b4cf72f01e33a7f530013ad1f2c74fca5c7
-  data.tar.gz: 6d0c18b96f87f1300b5843297f2a498bac6c08f55c74191ae22b65e95044a633197db61fa678c55cd675cd6e32fbbeae8758bed8ce43dd051c2e81f8d6a885ff
+  metadata.gz: 435f65ebc2cbe2dbe8f08e51278b6a4a7771e6488e1de82e807f5aa225f3e8c01cf2c6310e06385a8d67ede150f4cc7be0ae17b90340ebf48d869ee9e1aa2ea1
+  data.tar.gz: 469eaf26a4e08013c2b2233ad5524fdb1ef4a86a77a8d53d1a8bcff0ee3b376149e1bf01fd37d9ec306b856c570c4a43bbe7749ea574374e91e7808b7e577def

data/assets/stylesheets/shipyard/_components.sass

@@ -13,3 +13,4 @@
 @import shipyard/components/tooltips
 @import shipyard/components/hamburger
 @import shipyard/components/tables
+@import shipyard/components/horizontal-rules

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

@@ -17,7 +17,7 @@
   +btn-hover(darken($bg, 10%), #fff)
 
 @mixin btn-color($color, $text-color: null, $border-color: null)
-  background: $color
+  background-color: $color
   @if $border-color
     border-color: $border-color
   @else
@@ -118,14 +118,14 @@
       +btn-hover(darken($blue, 12%))
 
   &-secondary
-    +btn-color(none, $text-color-light, darken($gray-lightest, 7%))
-    +btn-hover(none, darken($text-color-light, 15%), darken($gray-lightest, 17%))
+    +btn-color(transparent, $text-color-light, darken($gray-lightest, 7%))
+    +btn-hover(transparent, darken($text-color-light, 15%), darken($gray-lightest, 17%))
     &-link
-      +btn-color(none, $blue, darken($gray-lightest, 7%))
-      +btn-hover(none, $blue-dark, darken($gray-lightest, 17%))
+      +btn-color(transparent, $blue, darken($gray-lightest, 7%))
+      +btn-hover(transparent, $blue-dark, darken($gray-lightest, 17%))
     &-dark
-      +btn-color(none, darken($text-color-light, 5%), lighten($gray-light, 5%))
-      +btn-hover(none, darken($text-color-light, 20%), darken($gray-light, 5%))
+      +btn-color(transparent, darken($text-color-light, 5%), lighten($gray-light, 5%))
+      +btn-hover(transparent, darken($text-color-light, 20%), darken($gray-light, 5%))
 
   &-caution
     +btn-color($red-dark)

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

@@ -13,8 +13,9 @@
   border: 2px solid $border-color
   transition: background-color 300ms ease, border-color 300ms ease, opacity 300ms ease
   +appearance(none)
-  &:hover, .btn:hover &
-    border-color: darken($border-color, 10%)
+  +background-clip(padding-box)
+  &:hover, &:focus, .btn:hover &
+    border-color: $border-color-dark
 
   &-group
     +clearfix
@@ -27,7 +28,7 @@
   &-select
     display: block
     width: 100%
-    background: #fff
+    background-color: #fff
     height: 50px
     font: $font
     font-weight: $medium
@@ -40,7 +41,6 @@
     +when('error')
       border-color: $red
     &:hover, &:focus
-      border-color: $border-color-dark
       +when('error')
         border-color: darken($red, 15%)
     &-container
@@ -75,7 +75,7 @@
   &-text
     font: $font
     color: $text-color
-    background: #fff
+    background-color: #fff
     position: relative
     height: 50px
     font-size: 16px
@@ -88,14 +88,17 @@
     +when('error')
       border-color: $red
     &:hover, &:focus
-      border-color: $border-color-dark
       +when('error')
         border-color: darken($red, 15%)
     &-connect
-      &-top:focus,
-      &-middle:focus,
-      &-bottom:focus
-        z-index: 1
+      &-top,
+      &-middle,
+      &-bottom
+        border-color: rgba($bg-to-border, .37)
+        +background-clip(initial)
+        &:hover, &:focus
+          z-index: 1
+          border-color: rgba($bg-to-border, .50)
       &-top
         border-radius: 5px 5px 0 0
       &-middle

data/assets/stylesheets/shipyard/components/_horizontal-rules.sass

@@ -0,0 +1,11 @@
++component('hr')
+  height: 0
+  border: 0 solid $border-color-lighter
+  border-width: 2px 0 0
+  +respond-to(margin, (x0: 20px 0, x1: 30px 0))
+  &-dark
+    border-color: $border-color
+  &-light
+    border-color: $border-color-lightest
+  &-thin
+    border-width: 1px 0 0

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

@@ -10,11 +10,6 @@ svg, path, circle, polyline
   transform-origin: center center
   +width-height(1em)
 
-  &-center
-    position: relative
-    vertical-align: middle
-    top: -1px
-
   // Icons w/ Margins
   &-margin-left
     margin-left: 5px

data/assets/stylesheets/shipyard/components/_input-radio-checkbox.sass

@@ -15,7 +15,7 @@
       padding-left: 28px
     +when('item-inline')
       padding-left: 5px
-    &:hover
+    &:hover, .input:hover ~ &
       color: $blue-dark
     +when('radio:checked ~, checkbox:checked ~')
       color: $green-dark

data/assets/stylesheets/shipyard/components/_input-switch.sass

@@ -1,33 +1,41 @@
-$sizes: (sm: 18px, md: 20px)
+$sizes: (sm: 18px)
 
 +component('input-switch')
+  outline: none
+  cursor: pointer
   position: relative
-  background: $gray-light
-  display: block
+  display: inline-block
   border-radius: 50px
-  outline: none
-  transition: background-color 300ms ease
-  &::before
+  +width-height(36px, 20px)
+  +background-clip(initial)
+  &, &:hover, &:focus
+    +btn-color($red, $border-color: transparent)
+  &:checked
+    &, &:hover, &:focus
+      +btn-color($green, $border-color: transparent)
+
+  &-secondary
+    +extend
+    &, &:hover, &:focus
+      +btn-color($border-color, $border-color: transparent)
+
+  // Checkbox Switch: White Dot
+  &::after
+    top: 0
+    left: 0
     content: ''
     display: block
     position: absolute
-    top: 2px
-    left: 2px
-    background: #fff
     border-radius: 50%
+    background-color: #fff
     transition: transform 300ms ease
+    +width-height(16px)
+  &:checked::after
+    transform: translatex(100%)
 
+  // Checkbox Switch: Sizes
   @each $name, $size in $sizes
     &-#{$name}
-      +extend
       +width-height($size * 2 - 4px, $size)
-      &::before
+      &::after
         +width-height($size - 4px)
-
-  &-false
-    background: $red
-
-  &-true
-    background: $green
-    &::before
-      transform: translatex(100%)

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

@@ -15,18 +15,6 @@
     color: darken($blue, 10%)
     text-decoration: underline
 
-+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
-    border-color: $border-color
-  &-light
-    border-color: $border-color-lightest
-  &-thin
-    border-width: 1px 0 0
-
 strong
   font-weight: $bold
 

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

@@ -1,15 +1,20 @@
 @mixin appearance($value)
-  appearance: $value
-  -moz-appearance: $value
   -webkit-appearance: $value
+  -moz-appearance: $value
+  appearance: $value
 
 @mixin backdrop-filter($value)
-  backdrop-filter: $value
   -webkit-backdrop-filter: $value
+  backdrop-filter: $value
+
+@mixin background-clip($value)
+  -webkit-background-clip: $value
+  -moz-background-clip: $value
+  background-clip: $value
 
 @mixin mask($value)
-  mask: $value
   -webkit-mask: $value
+  mask: $value
 
 @mixin placeholder
   &::placeholder

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

@@ -11,4 +11,6 @@
     +center($horizontal: true)
 
 .align-middle
+  top: -1px
+  position: relative
   vertical-align: middle

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

@@ -6,10 +6,11 @@ $bg-color: $gray-lightest !default
 $box-shadow: 0 1px 2px rgba($gray-darkest,.08) !default
 $border-radius: 5px !default
 
-$border-color: darken($bg-color, 12%) !default
-$border-color-dark: darken($border-color, 10%) !default
-$border-color-darker: darken($border-color, 14%) !default
-$border-color-darkest: darken($border-color, 18%) !default
-$border-color-light: darken($bg-color, 6%) !default
-$border-color-lighter: darken($bg-color, 4%) !default
-$border-color-lightest: darken($bg-color, 2%) !default
+$bg-to-border: darken($bg-color, 50%)
+$border-color: rgba($bg-to-border, .3) !default
+$border-color-dark: rgba($bg-to-border, .45) !default
+$border-color-darker: rgba($bg-to-border, .55) !default
+$border-color-darkest: rgba($bg-to-border, .60) !default
+$border-color-light: rgba($bg-to-border, .24) !default
+$border-color-lighter: rgba($bg-to-border, .12) !default
+$border-color-lightest: rgba($bg-to-border, .08) !default

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.5.69'
+  VERSION = '0.5.70'
 end

data/styleguide/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    shipyard-framework (0.5.69)
+    shipyard-framework (0.5.70)
       actionview (~> 5.0)
       sprockets-es6 (~> 0.9.2)
 

data/styleguide/_assets/css/views.sass

@@ -94,3 +94,7 @@ hr
     padding: 5px
     display: inline-block
     border-radius: 3px 0 0 3px
+
++component('components-checkboxes')
+  &-switch-col
+    line-height: 1.2

data/styleguide/components/checkboxes.md

@@ -12,20 +12,21 @@ labels:
 
 ---
 
-## Default Checkbox Lists
-<p class="text-light margin-bottom-md">Useful when you want to group a series of checkboxes together in a list (stacked by default).</p>
+## Inline Checkbox Lists
+<p class="text-light margin-bottom-md">Useful when you want to group a series of checkboxes together on a single line.</p>
 
-<ul class="input-list">
+<ul class="input-list margin-bottom-lg">
   {% for label in page.labels %}
-    <li class="input-item">
-      <input id="checkbox-default-{{ forloop.index }}" name="checkbox-list" type="checkbox" class="input input-checkbox" {% if forloop.index == 1 %}checked{% endif %} />
-      <label for="checkbox-default-{{ forloop.index }}" class="input-label">{{ label }}</label>
+    <li class="input-item-inline">
+      <input id="checkbox-inline-{{ forloop.index }}" name="checkbox-list" type="checkbox" class="input input-checkbox" {% if forloop.index == 1 %}checked{% endif %} />
+      <label for="checkbox-inline-{{ forloop.index }}" class="input-label">Inline Label</label>
     </li>
   {% endfor %}
 </ul>
+
 ```html
 <ul class="input-list">
-  <li class="input-item">
+  <li class="input-item-inline">
     <input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox" checked />
     <label for="checkbox-id" class="input-label">Checkbox Label</label>
   </li>
@@ -34,21 +35,38 @@ labels:
 
 ---
 
-## Inline Checkbox Lists
-<p class="text-light margin-bottom-md">Useful when you want to group a series of checkboxes together on a single line.</p>
-
-<ul class="input-list">
-  {% for label in page.labels %}
-    <li class="input-item-inline">
-      <input id="checkbox-inline-{{ forloop.index }}" name="checkbox-list" type="checkbox" class="input input-checkbox" {% if forloop.index == 1 %}checked{% endif %} />
-      <label for="checkbox-inline-{{ forloop.index }}" class="input-label">Inline Label</label>
-    </li>
-  {% endfor %}
-</ul>
+## Stacked Checkbox Lists
+<p class="text-light margin-bottom-md">Useful when you want to group a series of checkboxes together in a list (stacked by default).</p>
 
+<div class="col-container margin-bottom-sm margin-bottom-x1-lg">
+  <div class="col col-100 col-x1-50 margin-bottom-sm margin-bottom-x1-none">
+    <div class="rounded bg-white box-padding">
+      <ul class="input-list">
+        {% for label in page.labels %}
+          <li class="input-item">
+            <input id="checkbox-light-{{ forloop.index }}" name="checkbox-list" type="checkbox" class="input input-checkbox" {% if forloop.index == 1 %}checked{% endif %} />
+            <label for="checkbox-light-{{ forloop.index }}" class="input-label">{{ label }}</label>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+  <div class="col col-100 col-x1-50">
+    <div class="box-secondary box-padding">
+      <ul class="input-list">
+        {% for label in page.labels %}
+          <li class="input-item">
+            <input id="checkbox-dark-{{ forloop.index }}" name="checkbox-list" type="checkbox" class="input input-checkbox" {% if forloop.index == 1 %}checked{% endif %} />
+            <label for="checkbox-dark-{{ forloop.index }}" class="input-label">{{ label }}</label>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+</div>
 ```html
 <ul class="input-list">
-  <li class="input-item-inline">
+  <li class="input-item">
     <input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox" checked />
     <label for="checkbox-id" class="input-label">Checkbox Label</label>
   </li>
@@ -115,3 +133,68 @@ labels:
   Button Text
 </button>
 ```
+
+---
+
+## Checkbox Switches
+<p class="text-light margin-bottom-md">Switches are useful when the user has a choice to toggle on and off. Note: For the best UX, please make sure that the switch saves immediately each time it changes state.</p>
+
+<div class="box box-xs margin-bottom-sm padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
+  <div class="col-container-nowrap">
+    <div class="components-checkboxes-switch-col col col-100 text-light text-overflow-ellipsis">Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.</div>
+    <div class="col margin-left-sm">
+      <input type="checkbox" class="input input-switch" checked />
+    </div>
+  </div>
+</div>
+<div class="box-secondary box-xs padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
+  <div class="col-container-nowrap">
+    <div class="components-checkboxes-switch-col col col-100 text-light text-overflow-ellipsis">Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.</div>
+    <div class="col margin-left-sm">
+      <input type="checkbox" class="input input-switch" />
+    </div>
+  </div>
+</div>
+```html
+<input type="checkbox" class="input input-switch" />
+```
+
+---
+
+## Secondary Checkbox Switches
+<p class="text-light margin-bottom-md">Useful when you don't need to draw attention to the bright-red, off state.</p>
+
+<div class="box box-xs margin-bottom-sm padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
+  <div class="col-container-nowrap">
+    <div class="components-checkboxes-switch-col col col-100 text-light text-overflow-ellipsis">Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.</div>
+    <div class="col margin-left-sm">
+      <input type="checkbox" class="input input-switch-secondary" checked />
+    </div>
+  </div>
+</div>
+<div class="box-secondary box-xs padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
+  <div class="col-container-nowrap">
+    <div class="components-checkboxes-switch-col col col-100 text-light text-overflow-ellipsis">Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.</div>
+    <div class="col margin-left-sm">
+      <input type="checkbox" class="input input-switch-secondary" />
+    </div>
+  </div>
+</div>
+```html
+<input type="checkbox" class="input input-switch" />
+```
+
+---
+
+## Small Checkbox Switches
+<p class="text-light margin-bottom-md">Useful when you want to show checkboxes inline next to a text label.</p>
+<div>
+  <input id="small-switch-off" type="checkbox" class="input input-switch input-switch-sm align-middle" />
+  <label for="small-switch-off" class="text-sm text-light margin-left-xxs medium margin-right-md">Checkbox Switch Off</label>
+
+  <input id="small-switch-on" type="checkbox" class="input input-switch input-switch-sm align-middle" checked />
+  <label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">Checkbox Switch On</label>
+</div>
+```html
+<input type="checkbox" class="input input-switch input-switch-sm" />
+```

data/styleguide/components/forms.html

@@ -31,23 +31,6 @@ title: Shipyard Forms
     </select>
   </div>
 </div>
-<div class="input-group">
-  <h2>Switches</h2>
-  <div class="col-container margin-top-xs">
-    <div class="col col-20">
-      <label class="label">Medium Switches</label>
-      <button class="input-switch-md"></button>
-      <button class="input-switch-md input-switch-true"></button>
-      <button class="input-switch-md input-switch-false"></button>
-    </div>
-    <div class="col col-20">
-      <label class="label">Small Switches</label>
-      <button class="input-switch-sm"></button>
-      <button class="input-switch-sm input-switch-true"></button>
-      <button class="input-switch-sm input-switch-false"></button>
-    </div>
-  </div>
-</div>
 
 <hr />
 

data/styleguide/components/horizontal-rules.md

@@ -0,0 +1,75 @@
+---
+title: Horizontal Rules
+description: 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`).
+text_sizes: [xxs, xs, sm, md, lg, xl, xxl, xxxl]
+text_shades: [normal, light, lighter, lightest]
+---
+
+{% include page-heading.html page=page %}
+
+{% 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 %}
+
+---
+
+## Default Horizontal Rules
+<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" />
+</div>
+<div class="utilities-typography-hr-box-light">
+  <hr class="utilities-typography-hr" />
+</div>
+
+```html
+<hr />
+```
+
+---
+
+## 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-thin" />
+</div>
+<div class="utilities-typography-hr-box-light">
+  <hr class="utilities-typography-hr hr-thin" />
+</div>
+
+```html
+<hr class="hr-thin" />
+```
+
+---
+
+## Dark Horizontal Rules
+<p class="text-light margin-bottom-md" markdown="1">Useful when you have a horizontal rule on a darker background.</p>
+
+<div class="utilities-typography-hr-box-dark">
+  <hr class="utilities-typography-hr hr-dark" />
+</div>
+```html
+<hr class="hr-dark" />
+```
+
+---
+
+## Light Horizontal Rules
+<p class="text-light margin-bottom-md" markdown="1">Useful when you have a horizontal rule on a lighter background.</p>
+
+<div class="utilities-typography-hr-box-light">
+  <hr class="utilities-typography-hr hr-light" />
+</div>
+
+```html
+<hr class="hr-light" />
+```

data/styleguide/components/icons.md

@@ -81,15 +81,15 @@ description: Shipyard comes with several default icons that you're welcome to us
 ---
 
 ### Centered Icons
-<p class="text-light margin-bottom-md" markdown="1">One of the most common problems when using an icon is that doesn't line up with the text content next to it. Don't worry though, we've got you covered — simply apply the `.icon-center` class to any icon to fix this issue.</p>
+<p class="text-light margin-bottom-md" markdown="1">One of the most common problems when using an icon is that doesn't line up with the text content next to it. Don't worry though, we've got you covered — simply apply the `.align-middle` class to any icon to fix this issue.</p>
 
 <div class="margin-bottom-lg">
-  <button class="btn btn-secondary">{% icon :plus, class: 'icon-center icon-sm margin-right-xxs' %} Create</button>
+  <button class="btn btn-secondary">{% icon :plus, class: 'align-middle icon-sm margin-right-xxs' %} Create</button>
 </div>
 
 ```erb
 <button class="btn btn-secondary">
-  <%= icon :plus, class: 'icon-center icon-sm' %>
+  <%= icon :plus, class: 'align-middle icon-sm' %>
   Create
 </button>
 ```

data/styleguide/components/index.md

@@ -1,6 +1,6 @@
 ---
 title: Shipyard Components
-components: [Boxes, Buttons, Empty States, Alerts, Notes, Forms, Radio Buttons, Checkboxes, Icons, Modals, Tooltips, Code, Tables]
+components: [Boxes, Buttons, Empty States, Alerts, Notes, Forms, Radio Buttons, Checkboxes, Icons, Modals, Tooltips, Code, Tables, Horizontal Rules]
 ---
 
 {% include page-heading.html page=page %}

data/styleguide/components/modals/_modal.html

@@ -90,7 +90,7 @@
         </div>
         <div class="col align-right">
           <span class="btn-sm btn-x1-md white-space-nowrap padding-none">
-            {% icon :lock, class: 'green-dark icon-center margin-right-xxs' %}
+            {% icon :lock, class: 'green-dark align-middle margin-right-xxs' %}
             <span class="text-sm text-lighter medium">Secure Server</span>
           </span>
         </div>

data/styleguide/components/modals/example-billing.html

@@ -70,7 +70,7 @@ title: Shipyard Modal Example
         </div>
         <div class="col align-right">
           <span class="btn-sm btn-x1-md white-space-nowrap padding-none">
-            {% icon :lock, class: 'green-dark icon-center margin-right-xxs' %}
+            {% icon :lock, class: 'green-dark align-middle margin-right-xxs' %}
             <span class="text-sm text-lighter medium">Secure Server</span>
           </span>
         </div>

data/styleguide/components/modals/example-downgrade.html

@@ -1,51 +1,32 @@
 ---
 title: Shipyard Modal Example
 answers:
-  - We're happy with Codeship, but we don't need it anymore.
-  - We've chosen another CI/CD provider.
-  - Codeship is too expensive for our needs.
-  - Codeship is missing a feature that we needed.
-  - We're unsatisfied with our experience.
+  - I'd like to continue using Codeship on the free plan.
+  - I will no longer be using Codeship.
 ---
 
 {% include page-heading.html page=page %}
 
 <div class="modal-container" modal="example-small">
   <div class="modal modal-sm modal-billing" role="dialog">
-    <div class="alert alert-success margin-bottom-none rounded-top medium text-sm">
-      We'd like to offer you
-      <span class="modal-downgrade-coupon code-inline strong"><span class="modal-downgrade-tag bg-green-dark margin-right-none rounded-left">{% icon :tag, class: 'icon-center modal-downgrade-tag-icon' %}</span><span class="modal-downgrade-coupon-txt">50% OFF</span></span>
-      one month if you decide to stay.
-      <button class="alert-cta btn btn-cta btn-sm" modal-close>Apply Discount</button>
-    </div>
-    <div class="modal-content rounded-0">
-      <div class="modal-title">
-        <h1 class="text-lg text-x1-xl">Codeship Basic Downgrade</h1>
-      </div>
+    <div class="modal-content">
+      <h1 class="modal-title text-lg text-x1-xl">Codeship Basic Downgrade</h1>
       <p class="text-light margin-bottom-md">
-        We'd appreciate it if you would take a moment to share your thoughts
-        and experience on why Codeship wasn't a good fit for your team.
+        Our mission is to ensure that Codeship enables all users to be successful with their projects. The best way to do this is through continuous feedback. Before we process your request, please let us know why you're canceling your current Codeship Basic plan.
       </p>
       <form>
         <ul class="input-list">
           {% for answer in page.answers %}
             <li class="input-item">
-              <input id="checkbox-{{ forloop.index }}" name="checkbox-name" type="checkbox" class="input input-checkbox" />
-              <label for="checkbox-{{ forloop.index }}" class="input-label">{{ answer }}</label>
+              <input id="radio-{{ forloop.index }}" name="radio-name" type="radio" class="input input-radio" {% if forloop.index == 1 %}checked{% endif %} />
+              <label for="radio-{{ forloop.index }}" class="input-label">{{ answer }}</label>
             </li>
           {% endfor %}
         </ul>
-        <div class="input-group">
-          <label class="label">Please provide additional details:</label>
-          <textarea class="input input-text input-full input-lg" placeholder="How could we have made your experience better?"></textarea>
-        </div>
       </form>
     </div>
     <div class="modal-ctas">
-      <button class="btn btn-caution btn-sm btn-x1-md margin-right-xxs margin-right-x1-xs" modal-close>
-        <span class="display-none display-x1-inline">Confirm</span> Downgrade
-      </button>
-      <button class="btn btn-cta btn-sm btn-x1-md margin-right-xxs margin-right-x1-xs" modal-close>Apply Discount</button>
+      <a href="{{ site.baseurl }}/components/modals/example-survey" class="btn btn-primary btn-sm btn-x1-md margin-right-xxs margin-right-x1-xs" modal-close>Continue</a>
       <button class="btn btn-secondary btn-sm btn-x1-md" modal-close>Cancel</button>
     </div>
   </div>

data/styleguide/components/modals/example-survey.html

@@ -0,0 +1,52 @@
+---
+title: Shipyard Modal Example
+answers:
+  - We're happy with Codeship, but we don't need it anymore.
+  - We've chosen another CI/CD provider.
+  - Codeship is too expensive for our needs.
+  - Codeship is missing a feature that we needed.
+  - We're unsatisfied with our experience.
+---
+
+{% include page-heading.html page=page %}
+
+<div class="modal-container" modal="example-small">
+  <div class="modal modal-sm modal-billing" role="dialog">
+    <div class="alert alert-success margin-bottom-none rounded-top medium text-sm">
+      We'd like to offer you
+      <span class="modal-downgrade-coupon code-inline strong"><span class="modal-downgrade-tag bg-green-dark margin-right-none rounded-left">{% icon :tag, class: 'align-middle modal-downgrade-tag-icon' %}</span><span class="modal-downgrade-coupon-txt">50% OFF</span></span>
+      one month if you decide to stay.
+      <button class="alert-cta btn btn-cta btn-sm" modal-close>Apply Discount</button>
+    </div>
+    <div class="modal-content rounded-0">
+      <div class="modal-title">
+        <h1 class="text-lg text-x1-xl">Codeship Basic Downgrade</h1>
+      </div>
+      <p class="text-light margin-bottom-md">
+        We'd appreciate it if you would take a moment to share your thoughts
+        and experience on why Codeship wasn't a good fit for your team.
+      </p>
+      <form>
+        <ul class="input-list">
+          {% for answer in page.answers %}
+            <li class="input-item">
+              <input id="checkbox-{{ forloop.index }}" name="checkbox-name" type="checkbox" class="input input-checkbox" />
+              <label for="checkbox-{{ forloop.index }}" class="input-label">{{ answer }}</label>
+            </li>
+          {% endfor %}
+        </ul>
+        <div class="input-group">
+          <label class="label">Please provide additional details:</label>
+          <textarea class="input input-text input-full input-lg" placeholder="How could we have made your experience better?"></textarea>
+        </div>
+      </form>
+    </div>
+    <div class="modal-ctas">
+      <button class="btn btn-caution btn-sm btn-x1-md margin-right-xxs margin-right-x1-xs" modal-close>
+        <span class="display-none display-x1-inline">Confirm</span> Downgrade
+      </button>
+      <button class="btn btn-cta btn-sm btn-x1-md margin-right-xxs margin-right-x1-xs" modal-close>Apply Discount</button>
+      <button class="btn btn-secondary btn-sm btn-x1-md" modal-close>Cancel</button>
+    </div>
+  </div>
+</div>

data/styleguide/components/radio-buttons.md

@@ -12,21 +12,21 @@ labels:
 
 ---
 
-## Default Radio-Button Lists
-<p class="text-light margin-bottom-md">Useful when you want to group a series of radio buttons together in a list (stacked by default).</p>
+## Inline Radio-Button Lists
+<p class="text-light margin-bottom-md">Useful when you want to group a series of radio buttons together on a single line.</p>
 
-<ul class="input-list">
+<ul class="input-list margin-bottom-lg">
   {% for label in page.labels %}
-    <li class="input-item">
-      <input id="radio-default-{{ forloop.index }}" name="radio-list" type="radio" class="input input-radio" {% if forloop.index == 1 %}checked{% endif %} />
-      <label for="radio-default-{{ forloop.index }}" class="input-label">{{ label }}</label>
+    <li class="input-item-inline">
+      <input id="radio-inline-{{ forloop.index }}" name="radio-list" type="radio" class="input input-radio" {% if forloop.index == 1 %}checked{% endif %} />
+      <label for="radio-inline-{{ forloop.index }}" class="input-label">Inline Label</label>
     </li>
   {% endfor %}
 </ul>
 
 ```html
 <ul class="input-list">
-  <li class="input-item">
+  <li class="input-item-inline">
     <input id="radio-id" name="radio-name" type="radio" class="input input-radio" checked />
     <label for="radio-id" class="input-label">Radio Button Label</label>
   </li>
@@ -35,21 +35,39 @@ labels:
 
 ---
 
-## Inline Radio-Button Lists
-<p class="text-light margin-bottom-md">Useful when you want to group a series of radio buttons together on a single line.</p>
+## Stacked Radio-Button Lists
+<p class="text-light margin-bottom-md">Useful when you want to group a series of radio buttons together in a list (stacked by default).</p>
 
-<ul class="input-list">
-  {% for label in page.labels %}
-    <li class="input-item-inline">
-      <input id="radio-inline-{{ forloop.index }}" name="radio-list" type="radio" class="input input-radio" {% if forloop.index == 1 %}checked{% endif %} />
-      <label for="radio-inline-{{ forloop.index }}" class="input-label">Inline Label</label>
-    </li>
-  {% endfor %}
-</ul>
+<div class="col-container margin-bottom-sm margin-bottom-x1-lg">
+  <div class="col col-100 col-x1-50 margin-bottom-sm margin-bottom-x1-none">
+    <div class="rounded bg-white box-padding">
+      <ul class="input-list">
+        {% for label in page.labels %}
+          <li class="input-item">
+            <input id="radio-light-{{ forloop.index }}" name="radio-light-list" type="radio" class="input input-radio" {% if forloop.index == 1 %}checked{% endif %} />
+            <label for="radio-light-{{ forloop.index }}" class="input-label">{{ label }}</label>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+  <div class="col col-100 col-x1-50">
+    <div class="box-secondary box-padding">
+      <ul class="input-list">
+        {% for label in page.labels %}
+          <li class="input-item">
+            <input id="radio-dark-{{ forloop.index }}" name="radio-dark-list" type="radio" class="input input-radio" {% if forloop.index == 1 %}checked{% endif %} />
+            <label for="radio-dark-{{ forloop.index }}" class="input-label">{{ label }}</label>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+</div>
 
 ```html
 <ul class="input-list">
-  <li class="input-item-inline">
+  <li class="input-item">
     <input id="radio-id" name="radio-name" type="radio" class="input input-radio" checked />
     <label for="radio-id" class="input-label">Radio Button Label</label>
   </li>

data/styleguide/utilities/typography.md

@@ -41,7 +41,7 @@ text_shades: [normal, light, lighter, lightest]
   </div>
 </div>
 
-<hr />
+---
 
 <div class="col-container">
   <div class="col">
@@ -67,59 +67,3 @@ 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.69
+  version: 0.5.70
 platform: ruby
 authors:
 - Codeship
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-11-14 00:00:00.000000000 Z
+date: 2017-11-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -220,6 +220,7 @@ files:
 - assets/stylesheets/shipyard/components/_hamburger.sass
 - assets/stylesheets/shipyard/components/_header.sass
 - assets/stylesheets/shipyard/components/_hero.sass
+- assets/stylesheets/shipyard/components/_horizontal-rules.sass
 - assets/stylesheets/shipyard/components/_icons.sass
 - assets/stylesheets/shipyard/components/_input-radio-checkbox.sass
 - assets/stylesheets/shipyard/components/_input-switch.sass
@@ -316,12 +317,14 @@ files:
 - styleguide/components/code.html
 - styleguide/components/empty-states.html
 - styleguide/components/forms.html
+- styleguide/components/horizontal-rules.md
 - styleguide/components/icons.md
 - styleguide/components/index.md
 - styleguide/components/modals/_modal.html
 - styleguide/components/modals/example-billing.html
 - styleguide/components/modals/example-downgrade.html
 - styleguide/components/modals/example-small.html
+- styleguide/components/modals/example-survey.html
 - styleguide/components/modals/example-tall.html
 - styleguide/components/modals/index.md
 - styleguide/components/notes.md