shipyard-framework 0.5.87 → 0.6.0

data/styleguide/components/horizontal-rules.md

@@ -1,82 +0,0 @@
----
-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`).
-sass_file: shipyard/components/_horizontal-rules
-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`
-{: .mb-20 }
-
-<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
-Useful when you have a horizontal rule on a darker background.
-{: .section-description }
-
-<div class="utilities-typography-hr-box-dark">
-  <hr class="utilities-typography-hr hr-dark" />
-</div>
-```html
-<hr class="hr-dark" />
-```
-
----
-
-## Light Horizontal Rules
-Useful when you have a horizontal rule on a lighter background.
-{: .section-description }
-
-<div class="utilities-typography-hr-box-light">
-  <hr class="utilities-typography-hr hr-light" />
-</div>
-
-```html
-<hr class="hr-light" />
-```
-
----
-
-{% include css-stats.html %}

data/styleguide/components/icons.md

@@ -1,129 +0,0 @@
----
-title: Shipyard Icons
-description: Shipyard comes with several default icons that you're welcome to use on any project. Each icon has been designed on a pixel grid at the small size possible, but can be scaled up to any size you like simply by changing the `width` and `height` in the CSS.
-sass_file: shipyard/components/_icons
----
-
-{% include page-heading.html page=page %}
-
----
-
-### Common Icons
-The following icons are the most frequently used in just about any application.
-{: .section-description }
-
-<ul class="icon-list col-container">
-  {% iconitem :plus, class: 'center' %}
-  {% iconitem :restart, class: 'center' %}
-  {% iconitem :gear, class: 'center' %}
-  {% iconitem :lock, class: 'center' %}
-  {% iconitem :card, class: 'center' %}
-  {% iconitem :tag, class: 'center' %}
-  {% iconitem :x, class: 'center' %}
-  {% iconitem :arrow_up, class: 'center' %}
-  {% iconitem :arrow_down, class: 'center' %}
-  {% iconitem :arrow_left, class: 'center' %}
-  {% iconitem :arrow_right, class: 'center' %}
-  {% iconitem :check, class: 'center' %}
-</ul>
-
----
-
-### Status Icons
-The following icons are used primarily in the <a href="{{ site.baseurl }}/components/statuses">status component</a>.
-{: .section-description }
-
-<ul class="icon-list col-container">
-  {% iconitem :error, class: 'center' %}
-  {% iconitem :fail, class: 'center' %}
-  {% iconitem :idle, class: 'center' %}
-  {% iconitem :running, class: 'center' %}
-  {% iconitem :skipped, class: 'center' %}
-  {% iconitem :success, class: 'center' %}
-  {% iconitem 'waiting', class: 'center' %}
-</ul>
-
----
-
-### Brand Icons
-If you need to style several paths inside of the icon, it's important to make sure you use the *injected* version of the icon.
-{: .section-description }
-
-<ul class="icon-list col-container">
-  {% iconitem 'bitbucket-white', class: 'center icon-xl' %}
-  {% iconitem 'bitbucket', class: 'center gray icon-xl' %}
-  {% iconitem 'bitbucket-color', class: 'center icon-xl' %}
-  {% iconitem :campfire_color, class: 'center icon-xl' %}
-  {% iconitem :codeship, class: 'center icon-xl' %}
-  {% iconitem :email_color, class: 'center icon-xl' %}
-  {% iconitem :flowdock_color, class: 'center icon-xl' %}
-  {% iconitem :github, class: 'center icon-xl' %}
-  {% iconitem :gitlab, class: 'center icon-xl' %}
-  {% iconitem :gitlab_color, class: 'center icon-xl' %}
-  {% iconitem :google_app_engine, class: 'center icon-xl' %}
-  {% iconitem :grove_color, class: 'center icon-xl' %}
-  {% iconitem :hipchat, class: 'center icon-xl' %}
-  {% iconitem :hipchat_color, class: 'center icon-xl' %}
-  {% iconitem :slack, class: 'center icon-xl' %}
-  {% iconitem :slack_color, class: 'center icon-xl' %}
-  {% iconitem :webhook, class: 'center icon-xl' %}
-  {% iconitem :webhook_color, class: 'center icon-xl' %}
-</ul>
-
----
-
-### Multi-color Icons
-If you need to style several paths inside of the icon, it's important to make sure you use the *injected* version of the icon.
-{: .section-description }
-
-<ul class="icon-list col-container">
-  {% iconitem 'email-color', class: 'icon-xl center' %}
-</ul>
-```erb
-<%= icon 'email-color' %>
-```
-
----
-
-### Icon Sizes
-The icon size utility classes can be applied to any icon, and are useful when you want to override the default icon size.
-{: .section-description }
-
-<ul class="icon-list col-container">
-  {% iconitem :gear, class: 'center icon-xxs' %}
-  {% iconitem :gear, class: 'center icon-xs' %}
-  {% iconitem :gear, class: 'center icon-sm' %}
-  {% iconitem :gear, class: 'center icon-md' %}
-  {% iconitem :gear, class: 'center icon-lg' %}
-  {% iconitem :gear, class: 'center icon-xl' %}
-</ul>
-
-```erb
-<%= icon :gear, class: 'icon-xxs' %>
-<%= icon :gear, class: 'icon-xs' %>
-<%= icon :gear, class: 'icon-sm' %>
-<%= icon :gear, class: 'icon-md' %>
-<%= icon :gear, class: 'icon-lg' %>
-<%= icon :gear, class: 'icon-xl' %>
-```
-
----
-
-### Centered Icons
-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.
-{: .section-description }
-
-<div class="mb-30">
-  <button class="btn btn-secondary">{% icon :plus, class: 'align-middle icon-sm mr-5' %} Create</button>
-</div>
-
-```erb
-<button class="btn btn-secondary">
-  <%= icon :plus, class: 'align-middle icon-sm' %>
-  Create
-</button>
-```
-
----
-
-{% include css-stats.html %}

data/styleguide/components/index.md

@@ -1,18 +0,0 @@
----
-title: Shipyard Components
-components: [Boxes, Buttons, Empty States, Alerts, Notes, Forms, Statuses, Radio Buttons, Checkboxes, Icons, Modals, Tooltips, Code, Tables, Horizontal Rules]
----
-
-{% include page-heading.html page=page %}
-
----
-
-<ul class="col-container">
-  {% for component in page.components %}
-    <li class="mb-10 mb-x1-15 mb-x2-30 col col-100 col-x1-33 col-x2-25">
-      <a href="{{ site.baseurl }}/components/{{ component | replace: ' ', '-' | downcase }}" class="box-link box-padding align-center text-md text-x1-lg text-x2-xl">
-        {{ component }}
-      </a>
-    </li>
-  {% endfor %}
-</ul>

data/styleguide/components/modals/_modal.html

@@ -1,100 +0,0 @@
-<div class="modal-container {{ include.css_class }}" modal="example">
-  <div class="modal" role="dialog">
-    <div class="modal-content">
-      <div class="modal-title-border mb-x1-20">
-        <h1 class="text-lg text-x1-xl">Billing Info</h1>
-      </div>
-      <form>
-        <div class="col-container mb-20">
-          <div class="col">
-            <label class="label">First Name</label>
-            <div class="input-required">
-              <input type="text" class="input input-text" />
-            </div>
-          </div>
-          <div class="col">
-            <label class="label">Last Name</label>
-            <div class="input-required">
-              <input type="text" class="input input-text" />
-            </div>
-          </div>
-        </div>
-        <div class="col-container mb-20">
-          <div class="col col-100 col-x1-50 mb-15 mb-x1-0">
-            <label class="label">Email Address</label>
-            <input type="text" class="input input-text" />
-          </div>
-          <div class="col col-100 col-x1-50">
-            <label class="label">Phone Number</label>
-            <div class="input-required">
-              <input type="text" class="input input-text" />
-            </div>
-          </div>
-        </div>
-        <div class="col-container mb-20">
-          <div class="col col-100 mb-15">
-            <label class="label">Billing Address</label>
-            <input type="text" class="input input-text" placeholder="Company Name" />
-          </div>
-          <div class="col col-100 mb-15">
-            <input type="text" class="input input-text" placeholder="Street Address" />
-          </div>
-          <div class="col col-100 col-x1-33 mb-15">
-            <div class="input-required">
-              <input type="text" class="input input-text" placeholder="Postal Code" />
-            </div>
-          </div>
-          <div class="col col-50 col-x1-33 mb-15">
-            <input type="text" class="input input-text" placeholder="City" />
-          </div>
-          <div class="col col-50 col-x1-33 mb-15">
-            <input type="text" class="input input-text" placeholder="State" />
-          </div>
-          <div class="col col-100">
-            <div class="input-required">
-              <div class="input-select-container">
-                <select class="input input-select">
-                  <option class="input-option-placeholder">Country</option>
-                  <option>United States of America</option>
-                  <option>France</option>
-                  <option>Germany</option>
-                  <option>Austria</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="col-container mb-20">
-          <div class="col">
-            <label class="label">Tax Information</label>
-            <input type="text" class="input input-text" placeholder="VAT Number" />
-          </div>
-        </div>
-        <div class="col-container mb-15 mb-x1-0">
-          <div class="col">
-            <label class="label">Additional Invoice Information</label>
-            <p class="label-note">This information will appear on each invoice. Don't include any confidential financial information.</p>
-            <input type="text" class="input input-text" placeholder="e.g. Invoice notes, accounts payable info, additional address info, etc..." />
-          </div>
-        </div>
-      </form>
-    </div>
-    <div class="modal-ctas">
-      <div class="col-container-nowrap">
-        <div class="col col-100">
-          <button class="btn btn-primary btn-sm btn-x1-md" modal-close>
-            Save
-            <span class="display-none display-x1-inline">&amp; Close</span>
-          </button>
-          <button class="btn btn-secondary btn-sm btn-x1-md ml-5 ml-x1-10" modal-close>Cancel</button>
-        </div>
-        <div class="col align-right">
-          <span class="btn-sm btn-x1-md white-space-nowrap p-0">
-            {% icon :lock, class: 'green-dark align-middle mr-5' %}
-            <span class="text-sm text-lighter medium">Secure Server</span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

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

@@ -1,80 +0,0 @@
----
-title: Shipyard Modal Example
----
-
-{% include page-heading.html page=page %}
-
-<div class="modal-container" modal="example-small">
-  <div class="modal modal-sm modal-billing" role="dialog">
-    <div class="modal-content">
-      <div class="modal-title-border mb-20 mb-x1-30">
-        <div class="col-container">
-          <h1 class="text-lg text-x1-xl col">Payment Period</h1>
-          <p class="col text-light medium align-right display-none display-x1-block">
-            <span class="strong green-dark">1</span> Concurrent Build
-            <span class="bullet">&amp;</span>
-            <span class="strong green-dark">1</span> Test Pipeline
-          </p>
-        </div>
-      </div>
-      <button class="btn btn-cta btn-sm btn-x1-md mr-10 mr-x1-15 mb-10 mb-x1-0">
-        <input type="radio" class="input input-radio-checkbox input-radio-inverse mr-10" checked />
-        Monthly &mdash; $39
-      </button>
-      <button class="btn btn-secondary-link btn-sm btn-x1-md">
-        <input type="radio" class="input input-radio-checkbox mr-10" />
-        Yearly &mdash; $390
-        <span class="btn btn-cta btn-rounded btn-xxs ml-10 modal-billing-yearly-promo">2 Months Free</span>
-        {% icon :tag, class: 'icon-inverse' %}
-      </button>
-      <p class="text-light mt-10 mt-x1-15" markdown="1">
-        Your new subscription will be prorated on your next invoice. If you have any questions, don't hesitate to <a href="#" class="medium">contact our support team</a>.
-      </p>
-      <div class="modal-title-border mt-30 mb-20 mb-x1-30">
-        <h1 class="text-lg text-x1-xl">Payment Info</h1>
-      </div>
-      <form>
-        <div class="input-required">
-          <input type="text" class="input input-text" placeholder="Card Number" />
-        </div>
-        <div class="col-container mt-20">
-          <div class="col col-50 col-x1-33">
-            <label class="label">Expiry Date</label>
-            <div class="input-required">
-              <input type="text" class="input input-text" placeholder="MM/YYYY" />
-            </div>
-          </div>
-          <div class="col col-50 col-x1-33">
-            <label class="label">CCV</label>
-            <div class="input-required">
-              <input type="text" class="input input-text" placeholder="3 or 4 digits" />
-            </div>
-          </div>
-          <div class="col col-100 col-x1-33 mt-20 mt-x1-0 mb-15 mb-x1-0">
-            <label class="label">Zip Code</label>
-            <div class="input-required">
-              <input type="text" class="input input-text" />
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-    <div class="modal-ctas">
-      <div class="col-container-nowrap">
-        <div class="col col-100">
-          <button class="btn btn-primary btn-sm btn-x1-md" modal-close>
-            Save
-            <span class="display-none display-x1-inline">&amp; Continue</span>
-          </button>
-          <button class="btn btn-secondary btn-sm btn-x1-md ml-5 ml-x1-10" modal-close>Cancel</button>
-        </div>
-        <div class="col align-right">
-          <span class="btn-sm btn-x1-md white-space-nowrap p-0">
-            {% icon :lock, class: 'green-dark align-middle mr-5' %}
-            <span class="text-sm text-lighter medium">Secure Server</span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

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

@@ -1,33 +0,0 @@
----
-title: Shipyard Modal Example
-answers:
-  - 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="modal-content">
-      <h1 class="modal-title text-lg text-x1-xl">Codeship Basic Downgrade</h1>
-      <p class="text-light mb-20">
-        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="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>
-      </form>
-    </div>
-    <div class="modal-ctas">
-      <a href="{{ site.baseurl }}/components/modals/example-survey" class="btn btn-primary btn-sm btn-x1-md mr-5 mr-x1-10" modal-close>Continue</a>
-      <button class="btn btn-secondary btn-sm btn-x1-md" modal-close>Cancel</button>
-    </div>
-  </div>
-</div>