tenon 1.1.8 → 2.0.0

data/app/views/tenon/settings/_seo.html.haml

@@ -1,10 +1,11 @@
-.form-group
-  %label= t('tenon.settings.meta_keywords')
-  .explanation= t('tenon.settings.these_meta_keywords_will')
-  = text_area_tag "settings[seo_keywords]", Tenon::MySettings.seo_keywords
-
-.form-group
-  %label= t('tenon.settings.meta_description')
-  .explanation= t('tenon.settings.this_description_will_show_up')
-  = text_area_tag "settings[seo_description]", Tenon::MySettings.seo_description
+.panel-label SEO
+.panel
+  .panel__content
+    .row
+      .inner6
+        = input_block 'META Keywords', explanation: 'These META keywords will be used by some search engines when crawling your site.  Separate keywords with a comma.  Note: Google does not factor in keywords when calculating your rank.  Other search engines may or may not.' do
+          = text_area_tag "settings[seo_keywords]", Tenon::MySettings.seo_keywords, class: 'input-block__multiline-text-field'
 
+      .inner6.omega
+        = input_block 'META Description', explanation: 'This description will show up on search engines and in some cases will affect your rank.  It should be no longer than 150-160 characters (about the length of a tweet.)' do
+          = text_area_tag "settings[seo_description]", Tenon::MySettings.seo_description, class: 'input-block__multiline-text-field'

data/app/views/tenon/settings/show.html.haml

@@ -1,31 +1,12 @@
-- content_for :sidebar do
-  .sidebar
-    .content
-      %h2= t('tenon.settings.settings')
-
-    %h4= t('tenon.settings.sections')
-    %nav
-      %ul
-        %li.active= link_to t('tenon.settings.general_settings'), '#general', data: {toggle: 'tab'}
-        %li= link_to t('tenon.settings.contact_management'), '#contact', data: {toggle: 'tab'}
-        %li= link_to t('tenon.common.search_optimization'), '#seo', data: {toggle: 'tab'}
-
-%header
-  %h1= t('tenon.settings.site_settings')
-
-  .tools
-    = render "tenon/shared/section_header/sidebar_toggle"
-
-.main-content
-  = form_tag({ :action => :update }, :method => "PUT") do
-    .fields.large.tabs
-      #general.tab-pane.active= render :partial => 'general'
-      #contact.tab-pane= render :partial => 'contact'
-      #seo.tab-pane= render :partial => 'seo'
-
-    .fields.small
-      %h4.box-label= t('tenon.common.actions')
-      .box
-        .content
-          %button.btn.btn-primary.btn-block.submit{ data: { disable_with: t('tenon.common.please_wait') } }= t('tenon.common.save')
-
+.drawer-pusher
+  = form_tag({ action: :update }, method: 'PUT') do
+    .toolbar.bg-color-primary-dk10
+      = render 'tenon/shared/breadcrumbs'
+      .actions
+        - if policy(@post).publish?
+          %button.action__btn.btn-flat.submit{ data: { disable_with: 'Please wait...' } } Save
+
+    %main
+      = render partial: 'general'
+      = render partial: 'contact'
+      = render partial: 'seo'

data/app/views/tenon/shared/_account_dropdown.html.haml

@@ -0,0 +1,6 @@
+%ul.dropdown
+  %li.dropdown__divider
+  %li.dropdown__item
+    = active_link_to destroy_user_session_path, method: :delete, class: 'dropdown__action action-icon' do
+      = i('exit_to_app')
+      %span Logout

data/app/views/tenon/shared/_app_info.html.haml

@@ -0,0 +1,5 @@
+.app-info
+  = link_to '/tenon', class: 'app-info__link' do
+    .app-info__icon power_settings_new
+    .app-info__primary Application Title
+    .app-info__secondary Secondary Info

data/app/views/tenon/shared/_breadcrumbs.html.haml

@@ -0,0 +1 @@
+= react_component 'Breadcrumbs', breadcrumbs: breadcrumb_links

data/app/views/tenon/shared/_burger.html.haml

@@ -0,0 +1,5 @@
+- if content_for?(:back_button)
+  = yield :back_button
+
+= link_to '#', class: ['main-nav-toggle', 'toggle-drawer', ('hide-on-min' if content_for?(:back_button))], data: { target: 'main-nav' } do
+  .burger

data/app/views/tenon/shared/_default_form_toolbar.html.haml

@@ -0,0 +1,26 @@
+- content_for :back_button do
+  = link_to back_to_index_path(obj), class: 'back-button' do
+    %i.material-icon arrow_back
+
+.toolbar
+  .hide-on-min= render 'tenon/shared/breadcrumbs'
+  .toolbar__content
+    .toolbar__actions.toolbar__actions--right
+      - if policy(obj).publish?
+        .toolbar__action
+          %button.btn.btn--toolbar.submit{ data: { disable_with: "Please wait..." } } Save
+
+      .toolbar__action
+        %a.toolbar__action-icon.dropdown-button{ href: '#!', data: { dropdown_activate: true } }
+          = i('more_vert')
+
+        %ul.dropdown#form-dropdown
+          - if policy(Tenon::ItemVersion).create?
+            = render 'tenon/shared/draft_controls', obj: obj
+
+          - if obj.persisted? && policy(obj).destroy?
+            %li.dropdown__divider
+            %li.dropdown__item
+              = link_to obj, data: { method: :delete, confirm: 'Are you sure you want to delete this?' }, class: 'dropdown__action action-icon delete-link' do
+                = i('delete')
+                %span Delete

data/app/views/tenon/shared/_draft_controls.html.haml

@@ -0,0 +1,18 @@
+%li.dropdown__item.dropdown__item--label.last-autosave
+  Draft Versions
+
+%li.dropdown__item
+  = link_to new_item_version_path(item_type: class_for(obj), item_id: obj.id), data: { modal_remote: true, modal_handler: 'NewItemVersionHandler', modal_title: 'Save Draft', dropdown_dismiss: true }, class: 'dropdown__action action-icon' do
+    = i('cloud_upload')
+    %span Save Draft
+
+%li.dropdown__item
+  = link_to item_versions_path(item_type: obj.class.to_s, item_id: obj.id), data: { modal_remote: true, modal_handler: 'ItemVersionIndexHandler', modal_title: 'Load Draft', dropdown_dismiss: true }, class: 'dropdown__action action-icon' do
+    = i('cloud_download')
+    %span Load Draft
+
+- if params[:version]
+  %li.dropdown__item
+    = link_to item_version_active_path(obj), class: 'dropdown__action action-icon' do
+      = i('star')
+      %span Load Active Version

data/app/views/tenon/shared/_i18n_language_nav.html.haml

@@ -1,6 +1,6 @@
-%h4= t('tenon.common.languages')
+%h4 Languages
 %nav.i18n-nav
   %ul
-    %li.active= link_to t('tenon.common.english'), '#', data: { 'i18n-lang' => 'en' }
+    %li.active= link_to 'English', '#', data: { 'i18n-lang' => 'en' }
     - Tenon.config.languages.each do |title, lang|
       %li= link_to title, '#', data: { 'i18n-lang' => lang }

data/app/views/tenon/shared/_main_nav.html.haml

@@ -1,14 +1,3 @@
-.nav-holder
-  %nav.main-nav
-    %ul
-      = nav_item t('tenon.common.home'), root_path, 'dashboard'
-      = nav_item t('tenon.asset_library.asset_library'), assets_path, 'picture-o'
-      = nav_item t('tenon.comments.comments'), comments_path, 'comment'
-      = nav_item t('tenon.pages.pages'), pages_path, 'file'
-      = nav_item t('tenon.posts.posts'), posts_path, 'file-text', active: ['post_categories'].include?(controller_name)
-      = nav_item t('tenon.users.users'), users_path, 'user'
-      = nav_item t('tenon.events.events'), events_path, 'calendar'
-      = nav_item t('tenon.galleries.galleries'), galleries_path, 'th'
-      = nav_item t('tenon.contacts.contacts'), contacts_path, 'envelope'
-      = nav_item t('tenon.redirects.redirects'), redirects_path, 'exchange'
-      = nav_item t('tenon.settings.settings'), settings_path, 'gear'
+%ul.main-nav__list
+  - if policy(Tenon::Asset).index?
+    = nav_item 'Asset Library', assets_path, 'photo_library'

data/app/views/tenon/shared/_platform_hints.html.haml

@@ -1,25 +1,25 @@
 -# Android
 -# https://developer.chrome.com/multidevice/android/installtohomescreen
 -# http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
-%meta{ :content => color, :name => 'theme-color' }
-%meta{ :content => 'yes', :name => 'mobile-web-app-capable' }
-%link{ :rel => 'icon', :sizes => '192x192', :href => image_path('tenon/icon-192x192.png') }
-%link{ :rel => 'manifest', :href => '/assets/javascripts/manifest.json' }
+%meta{ content: color, name: 'theme-color' }
+%meta{ content: 'yes', name: 'mobile-web-app-capable' }
+%link{ rel: 'icon', sizes: '192x192', href: image_path('tenon/icon-192x192.png') }
+%link{ rel: 'manifest', href: '/assets/javascripts/manifest.json' }
 
 -# iOS
 -# https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
-%link{ :rel => 'apple-touch-icon', :sizes => '57x57', :href => image_path('tenon/icon-57x57.png') }
-%link{ :rel => 'apple-touch-icon', :sizes => '72x72', :href => image_path('tenon/icon-72x72.png') }
-%link{ :rel => 'apple-touch-icon', :sizes => '114x114', :href => image_path('tenon/icon-114x114.png') }
-%link{ :rel => 'apple-touch-icon', :sizes => '144x144', :href => image_path('tenon/icon-144x144.png') }
-%meta{ :content => 'yes', :name => 'apple-mobile-web-app-capable' }
-%meta{ :content => 'default', :name => 'apple-mobile-web-app-status-bar-style' }
+%link{ rel: 'apple-touch-icon', sizes: '57x57', href: image_path('tenon/icon-57x57.png') }
+%link{ rel: 'apple-touch-icon', sizes: '72x72', href: image_path('tenon/icon-72x72.png') }
+%link{ rel: 'apple-touch-icon', sizes: '114x114', href: image_path('tenon/icon-114x114.png') }
+%link{ rel: 'apple-touch-icon', sizes: '144x144', href: image_path('tenon/icon-144x144.png') }
+%meta{ content: 'yes', name: 'apple-mobile-web-app-capable' }
+%meta{ content: 'default', name: 'apple-mobile-web-app-status-bar-style' }
 
 -# Windows
 -# http://msdn.microsoft.com/en-us/library/ie/gg491732(v=vs.85).aspx
 -# http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx
-%meta{ :content => Tenon::MySettings.site_title ? Tenon::MySettings.site_title : 'Tenon', :name => 'application-name' }
-%meta{ :content => Tenon::MySettings.site_title ? Tenon::MySettings.site_title : 'Tenon', :name => 'msapplication-tooltip' }
-%meta{ :content => color, :name => 'msapplication-navbutton-color' }
-%meta{ :content => color, :name => 'msapplication-TileColor' }
-%meta{ :content => image_path('tenon/icon-144x144.png'), :name => 'msapplication-TileImage' }
+%meta{ content: Tenon::MySettings.site_title ? Tenon::MySettings.site_title : 'Tenon', name: 'application-name' }
+%meta{ content: Tenon::MySettings.site_title ? Tenon::MySettings.site_title : 'Tenon', name: 'msapplication-tooltip' }
+%meta{ content: color, name: 'msapplication-navbutton-color' }
+%meta{ content: color, name: 'msapplication-TileColor' }
+%meta{ content: image_path('tenon/icon-144x144.png'), name: 'msapplication-TileImage' }

data/app/views/tenon/shared/_seo_fields.html.haml

@@ -1,6 +1,8 @@
-.form-group
-  = f.text_field :seo_title, :class => "title", :style => "width: 100%;", :label => t('tenon.settings.title_tag'), :'data-popover' => true, :explanation => t('tenon.settings.this_is_the_title_that_will_show'), :'data-placement' => 'bottom'
-.form-group
-  = f.text_area :seo_keywords, :style => "width: 100%;", :rows => 5, :label => t('tenon.settings.meta_keywords'), :'data-popover' => true, :explanation => t('tenon.settings.these_meta_keywords_will'), :'data-placement' => 'bottom'
-.form-group
-  = f.text_area :seo_description, :style => "width: 100%;", :rows => 5, :label => t('tenon.settings.meta_description'), :'data-popover' => true, :explanation => t('tenon.settings.this_description_will_show_up'), :'data-placement' => 'bottom'
+= f.text_field :seo_title, label: 'Title Tag', explanation: 'This is the title that will show on search engine results and in the title bar of a visitor\'s browser.  By default, this will use the item\'s title.', placeholder: ''
+
+.row
+  .inner6
+    = f.text_area :seo_keywords, label: 'META Keywords', explanation: 'These META keywords will be used by some search engines when crawling your site.  Separate keywords with a comma.  Note: Google does not factor in keywords when calculating your rank.  Other search engines may or may not.', dataplacement: 'bottom'
+
+  .inner6.omega
+    = f.text_area :seo_description, label: 'META Description', explanation: 'This description will show up on search engines and in some cases will affect your rank.  It should be no longer than 150-160 characters (about the length of a tweet.)'

data/app/views/tenon/shared/_site_title.html.haml

@@ -0,0 +1,6 @@
+- unless Tenon::MySettings.site_title.blank?
+  .site-title.left
+    - if Rails.application.routes.named_routes.helpers.include?(:root_path)
+      = link_to Tenon::MySettings.site_title, main_app.root_path
+    - else
+      = Tenon::MySettings.site_title

data/app/views/tenon/shared/_util_nav.html.haml

@@ -1,28 +1,5 @@
-%util-nav
-  #logo= link_to image_tag('tenon/tenon_icon.png'), tenon.root_path
-  - unless Tenon::MySettings.site_title.blank?
-    .site-title
-      - if Rails.application.routes.named_routes.helpers.include?(:root_path)
-        = link_to Tenon::MySettings.site_title, main_app.root_path
-      - else
-        = Tenon::MySettings.site_title
+.util-nav{ class: (modifier if local_assigns[:modifier]) }
+  = link_to '#!', class: 'util-nav__action-icon dropdown-button', data: { dropdown_activate: true } do
+    = i('person')
 
-  .tools
-    .header-button.hamburger.mobile= link_to fa_icon('fw bars'), '#'
-
-    .header-menu.hamburger-toggle
-      = link_to '#', class: 'user-menu', data: { icon: 'user' } do
-        .header-icon
-          .mobile= fa_icon('fw user')
-          .tablet= fa_icon('fw caret-down')
-        .header-label= current_user.email
-
-      %ul
-        %li
-          = link_to edit_user_path(current_user) do
-            .header-icon= fa_icon('fw gear')
-            .header-label= t('tenon.users.edit_info')
-        %li
-          = link_to destroy_user_session_path, method: :delete do
-            .header-icon= fa_icon('fw sign-out')
-            .header-label= t('tenon.users.sign_out')
+  = render 'tenon/shared/account_dropdown'

data/app/views/tenon/shared/_version_warning.html.haml

@@ -1,13 +1,13 @@
-.flash.flash-notice
-  %p= t('tenon.item_versions.you_are_viewing_a_draft')
+.note
+  .note__icon announcement
 
-  %p= t('tenon.item_versions.auto_saving_is_disabled')
+  .note__text
+    You are viewing a draft version of this resource.  Hitting save will replace the active version with this version. Auto-saving is disabled when you are viewing a draft version.
 
-  %p
-    %small
-      = t('tenon.item_versions.draft')
-      - unless @item_version.title.blank?
-        %strong "#{@item_version.title}"
-      #{t('tenon.item_versions.was_created_on')} #{@item_version.created_at.strftime('%m/%d/%Y')} #{t('tenon.common.at')} #{@item_version.created_at.strftime('%l:%M %p')}
-      #{t('tenon.item_versions.by')} #{@item_version.user.try(:email)}
-  =link_to fa_icon('times'), '#', id: 'flash-dismiss'
+    .note__secondary
+      - if @item_version.title.present?
+        %strong #{@item_version.title}
+      - else
+        Draft
+      was created on #{@item_version.created_at.strftime('%m/%d/%Y at %l:%M %p')}
+      by #{@item_version.user.try(:email)}

data/app/views/tenon/styleguides/_buttons.html.haml

@@ -0,0 +1,118 @@
+%section
+  %a.scroll-target{name: 'buttons'}
+  %h3.color-black Buttons
+  %p
+    Use these classes on any HTML element that you would like to look and
+    act like a button.
+
+  %a.scroll-target{name: 'buttons__standard'}
+  %h3.color-black Standard Button
+  .panel--padded
+    %h4 Primary
+    %p
+      %button{type: 'button', class: 'btn'}
+        Button
+    %p
+      %a{href: '#', class: 'btn'}
+        Link
+    %code
+      %p= "<button type='button' class='btn'>Button</button>"
+      %p= "<a href='#' class='btn'>Link</a>"
+
+    %h4 Secondary
+    %p
+      %button{type: 'button', class: 'btn btn--secondary'}
+        Button
+    %p
+      %a{href: '#', class: 'btn btn--secondary'}
+        Link
+    %code
+      %p= "<button type='button' class='btn btn--secondary'>Button</button>"
+      %p= "<a href='#' class='btn btn--secondary'>Link</a>"
+
+    %h4 White
+    %p
+      %button{type: 'button', class: 'btn btn--white'}
+        Button
+    %p
+      %a{href: '#', class: 'btn btn--white'}
+        Link
+    %code
+      %p= "<button type='button' class='btn btn-secondary'>Button</button>"
+      %p= "<a href='#' class='btn btn-secondary'>Link</a>"
+
+
+%section
+  %a.scroll-target{name: 'buttons__flat'}
+  %h3.color-black Flat Button
+  %p Same as the standard button, but without depth.
+  .panel--padded
+    %h4 Primary
+    %p
+      %button{type: 'button', class: 'btn btn--flat'}
+        Button
+    %p
+      %a{href: '#', class: 'btn btn--flat'}
+        Link
+    %code
+      %p= "<button type='button' class='btn btn--flat'>Button</button>"
+      %p= "<a href='#' class='btn-flat'>Link</a>"
+
+    %h4 Secondary
+    %p
+      %button{type: 'button', class: 'btn btn--flat btn--secondary'}
+        Button
+    %p
+      %a{href: '#', class: 'btn btn--flat btn--secondary'}
+        Link
+    %code
+      %p= "<button type='button' class='btn btn--flat btn--secondary'>Button</button>"
+      %p= "<a href='#' class='btn btn--flat btn--secondary'>Link</a>"
+
+    %h4 White
+    %p
+      %button{type: 'button', class: 'btn btn--flat btn--white'}
+        Button
+    %p
+      %a{href: '#', class: 'btn btn--flat btn--white'}
+        Link
+    %code
+      %p= "<button type='button' class='btn btn--flat btn--white'>Button</button>"
+      %p= "<a href='#' class='btn btn--flat btn--white'>Link</a>"
+
+%section
+  %a.scroll-target{name: 'buttons__block'}
+  %h3 Block Button
+  %p
+    Apply the .btn--block class to any button that should fit the width of
+    the parent container.
+
+  .panel--padded
+    %p
+      %button{type: 'button', class: 'btn btn--block'}
+        Button
+    %p
+      %a{href: '#', class: 'btn btn--block'}
+        Link
+    %code
+      %p= "<button type='button' class='btn btn--block'>Button</button>"
+      %p= "<a href='#' class='btn btn-block'>Link</a>"
+
+%section
+  %a.scroll-target{name: 'buttons__fab'}
+  %h3.color-black Floating Action Button
+  %p
+    A Material design pattern, the
+    = link_to "floating action button", 'https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-large-screens', target: '_'
+    triggers the primary action of the page it lives on.
+  .panel--padded
+    %p
+      %a{href: '#', class: 'fab'}
+        = i('add')
+    %p
+      %a{href: '#', class: 'fab fab--primary'}
+        = i('edit')
+
+    %code
+      %p= "<a href='#' class='fab'><i class='material-icon'>add</i></a>"
+      %p= "<a href='#' class='fab fab--primary'><i class='material-icon'>edit</i></a>"

data/app/views/tenon/styleguides/_colors.html.haml

@@ -0,0 +1,59 @@
+%section
+  %a.scroll-target{name: 'colors'}
+  %h3.color-black Colors
+
+  .panel.panel--padded
+    %h4 Neutral colors
+    .styleguide-colors
+      .styleguide-color-block
+        %span.styleguide-color.bg-color-black
+        %label.input-block__label
+          Black
+      .styleguide-color-block
+        %span.styleguide-color.bg-color-white
+        %label.input-block__label
+          White
+      .styleguide-color-block
+        %span.styleguide-color.bg-color-grey
+        %label.input-block__label
+          Grey
+      .spacer
+
+    %h4 Base colors
+    .styleguide-colors
+      .styleguide-color-block
+        .styleguide-color.bg-color-primary
+        %label.input-block__label
+          Primary
+      .styleguide-color-block
+        .styleguide-color.bg-color-secondary
+        %label.input-block__label
+          Secondary
+      .styleguide-color-block
+        .styleguide-color.bg-color-accent
+        %label.input-block__label
+          Accent
+      .spacer
+
+    %h4 Notification colors
+    .styleguide-colors
+      .styleguide-color-block
+        .styleguide-color.bg-color-required
+        %label.input-block__label
+          Required
+      .styleguide-color-block
+        .styleguide-color.bg-color-error
+        %label.input-block__label
+          Error
+      .styleguide-color-block
+        .styleguide-color.bg-color-success
+        %label.input-block__label
+          Success
+      .styleguide-color-block
+        .styleguide-color.bg-color-warning
+        %label.input-block__label
+          Warning
+      .spacer
+
+= render 'tenon/styleguides/colors/variables'
+= render 'tenon/styleguides/colors/helpers'

data/app/views/tenon/styleguides/_forms.html.haml

@@ -0,0 +1,4 @@
+= form_for @mock, url: styleguides_path, builder: Tenon::FormBuilder do |f|
+  = render partial: 'tenon/styleguides/forms/default', locals: {f: f}
+  = render partial: 'tenon/styleguides/forms/html5', locals: {f: f}
+  =# render partial: 'tenon/styleguides/forms/tenon_content', locals: {f: f}

data/app/views/tenon/styleguides/_icons.html.haml

@@ -0,0 +1,21 @@
+%section
+  %a.scroll-target{name: 'icons'}
+  %h3.color-black Icons
+  %p
+    All icons are using Google's
+    = link_to 'Materialize Font', 'https://design.google.com/icons', target: '_'
+    = "and can be easily added to any page using the ruby helper or an <i> element."
+    %br/
+    %em.font-smaller Note: Icon names with more than one word must be connected with an underscore.
+
+  .panel.panel--padded
+    - ['volume_up', 'volume_down', 'volume_mute', 'volume_off'].each do |icon|
+      %p
+        = i(icon)
+      %code.expandable
+        = expandable_toggle
+        %p= "<i class='material-icon'>#{icon}</i>"
+        %br/
+        %p
+          %span.color-primary Ruby:
+          = "i('#{icon}')"

data/app/views/tenon/styleguides/_typography.html.haml

@@ -0,0 +1,27 @@
+%section
+  %a.scroll-target{name: 'typography'}
+  %a.scroll-target{name: 'typography__headings'}
+  %h3.color-black Headers
+  %p Includes mixins, variables and a class helpers for each.
+
+  .panel.panel--padded
+    - (1..6).each do |h|
+      %p{class: "font-h#{h}"} The quick brown fox jumps over the lazy dog.
+      %code.expandable
+        = expandable_toggle
+        %p= "<h#{h}>The quick brown fox jumps over the lazy dog.</h#{h}>"
+        %br/
+        %p
+          %span.color-primary Silent class:
+          = "@extend %font-h#{h};"
+        %p
+          %span.color-primary Variables:
+          = "$h#{h}-size, $h#{h}-line-height"
+
+= render 'tenon/styleguides/typography/paragraphs'
+= render 'tenon/styleguides/typography/small'
+= render 'tenon/styleguides/typography/blockquote'
+= render 'tenon/styleguides/typography/lists'
+= render 'tenon/styleguides/typography/inline'
+= render 'tenon/styleguides/typography/styles'
+= render 'tenon/styleguides/typography/variables'

data/app/views/tenon/styleguides/buttons/_colors.html.haml

@@ -0,0 +1,43 @@
+%section
+  %a.scroll-target{name: 'buttons'}
+  %a.scroll-target{name: 'button__styles'}
+  %h3.color-black Button Colors
+  -# %p
+  -#   Use these classes on any HTML element that you would like to look and
+  -#   act like a button. Can be used with any button color class below.
+  -#
+  -# .panel.panel--padded
+  -#   %mh4 Standard Button
+  -#   %p
+  -#     %button{type: 'button', class: 'btn'}
+  -#       Button
+  -#   %p
+  -#     %a{href: '#', class: 'btn'}
+  -#       Link
+  -#   %code
+  -#     %p= "<button type='button' class='btn'>Button</button>"
+  -#     %p= "<a href='#' class='btn'>Link</a>"
+  -#
+  -#   %h4 Flat Button
+  -#   %p Same as the standard button, but without depth.
+  -#   %p
+  -#     %button{type: 'button', class: 'btn btn-flat'}
+  -#       Button
+  -#   %p
+  -#     %a{href: '#', class: 'btn btn-flat'}
+  -#       Link
+  -#   %code
+  -#     %p= "<button type='button' class='btn btn-flat'>Button</button>"
+  -#     %p= "<a href='#' class='btn btn-flat'>Link</a>"
+  -#
+  -#   %h4 Block Button
+  -#   %p Same as the standard button, but with display:block;
+  -#   %p
+  -#     %button{type: 'button', class: 'btn btn-block'}
+  -#       Button
+  -#   %p
+  -#     %a{href: '#', class: 'btn btn-block'}
+  -#       Link
+  -#   %code
+  -#     %p= "<button type='button' class='btn btn-block'>Button</button>"
+  -#     %p= "<a href='#' class='btn btn-block'>Link</a>"

data/app/views/tenon/styleguides/buttons/_styles.html.haml

@@ -0,0 +1,59 @@
+%section
+  %a.scroll-target{name: 'buttons'}
+  %a.scroll-target{name: 'button__styles'}
+  %h3.color-black Button Styles
+  %p
+    Use these classes on any HTML element that you would like to look and
+    act like a button. Can be used with any button color class below.
+
+  .panel.panel--padded
+    %h4 Standard Button
+    %p
+      %button{ type: 'button', class: 'btn' }
+        Button
+    %p
+      %a{ href: '#', class: 'btn' }
+        Link
+    %code
+      %p= "<button type='button' class='btn'>Button</button>"
+      %p= "<a href='#' class='btn'>Link</a>"
+
+    %h4 Flat Button
+    %p Same as the standard button, but without depth.
+    %p
+      %button{ type: 'button', class: 'btn btn-flat' }
+        Button
+    %p
+      %a{ href: '#', class: 'btn btn-flat' }
+        Link
+    %code
+      %p= "<button type='button' class='btn btn-flat'>Button</button>"
+      %p= "<a href='#' class='btn btn-flat'>Link</a>"
+
+    %h4 Block Button
+    %p Same as the standard button, but with display:block;
+    %p
+      %button{ type: 'button', class: 'btn btn-block' }
+        Button
+    %p
+      %a{ href: '#', class: 'btn btn-block' }
+        Link
+    %code
+      %p= "<button type='button' class='btn btn-block'>Button</button>"
+      %p= "<a href='#' class='btn btn-block'>Link</a>"
+
+    %h4 Floating Action Button
+    %p
+      A Material design pattern, the
+      = link_to "floating action button", 'https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-large-screens', target: '_'
+      triggers the primary action of the page it lives on.
+    %p
+      %a{ href: '#', class: 'btn-fab' }
+        = i('add')
+    %p
+      %a{ href: '#', class: 'btn-fab-reverse' }
+        = i('edit')
+
+    %code
+      %p= "<a href='#' class='btn-fab'><i class='material-icon'>add</i></a>"
+      %p= "<a href='#' class='btn-fab-reverse'><i class='material-icon'>edit</i></a>"