undercase 0.2.29

data/lib/undercase.rb

@@ -0,0 +1,15 @@
+require 'haml'
+require 'sass-rails'
+require 'compass-rails'
+require 'groundworkcss'
+require 'bootstrap-sass'
+require 'jquery-rails'
+require 'useragent'
+
+require 'undercase/version'
+require 'undercase/category'
+require 'undercase/engine'
+require 'undercase/pattern'
+
+# Simple form gem and config file
+require "simple_form"

data/lib/undercase/categories.yml

@@ -0,0 +1,12 @@
+colors: "Colors"
+grids: "Grids and Spacing"
+borders: "Borders"
+components: "Components"
+forms: "Forms"
+lists: "Lists"
+buttons: "Buttons"
+links: "Links"
+icons: "Icons"
+modals: "Modals"
+typography: "Typography"
+language: "Language"

data/lib/undercase/category.rb

@@ -0,0 +1,20 @@
+require 'yaml'
+require 'undercase/pattern'
+
+module Undercase
+  class Category
+    attr_reader :name, :patterns
+
+    def initialize(key)
+      @name = categories[key]
+      @patterns = Pattern.all.select { |pattern| pattern.category == key.to_sym }
+    end
+
+    private
+
+    def categories
+      file = File.expand_path('../categories.yml', __FILE__)
+      YAML.load_file(file)
+    end
+  end
+end

data/lib/undercase/engine.rb

@@ -0,0 +1,13 @@
+require 'rails/engine'
+
+module Undercase
+  class Engine < ::Rails::Engine
+    engine_name 'undercase'
+
+    config.autoload_paths << "#{config.root}/app/inputs"
+
+    initializer "static assets" do |app|
+      app.middleware.use ::ActionDispatch::Static, "#{root}/public"
+    end
+  end
+end

data/lib/undercase/pattern.rb

@@ -0,0 +1,68 @@
+require 'coderay'
+require 'yaml'
+
+module Undercase
+  class Pattern
+    PATTERNS = Array.new
+    SCSS_FILE = 'app/assets/stylesheets/undercase/_patterns.scss'
+    YAML_PATH = 'lib/undercase/patterns/'
+    SCSS_PATH = 'app/assets/stylesheets/undercase/patterns/'
+    HAML_PATH = 'app/views/undercase/patterns/'
+
+    attr_reader :key
+
+    def initialize(key)
+      @key = key
+      @metadata = YAML.load_file(yaml_path)
+    end
+
+    def to_partial_path
+      'undercase/patterns/pattern'
+    end
+
+    def name
+      @metadata.fetch('name')
+    end
+
+    def usage
+      @metadata.fetch('usage')
+    end
+
+    def description
+      @metadata.fetch('description')
+    end
+
+    def category
+      @metadata.fetch('category')
+    end
+
+    def display_code?
+      @metadata.fetch('display', true)
+    end
+
+    def highlighted_source
+      source = File.read(File.expand_path("../../../app/views/undercase/patterns/_#@key.html.haml", __FILE__))
+      CodeRay.scan(source, :haml).div(:css => :class).html_safe
+    end
+
+    private
+
+    def yaml_path
+      File.expand_path("../patterns/#{key}.yml", __FILE__)
+    end
+
+    class << self
+      def all
+        directory = File.dirname(__FILE__)
+        Dir["#{directory}/patterns/*.yml"].map do |d|
+          filename_as_symbol = File.basename(d).sub(/\.yml/, '').to_sym
+          Pattern.new(filename_as_symbol)
+        end
+      end
+
+      def for_category(category)
+        Pattern.all.select { |pattern| pattern.category == category }
+      end
+    end
+  end
+end

data/lib/undercase/patterns/blue_dotted_link_caps.yml

@@ -0,0 +1,4 @@
+name: Blue & Dotted
+description: Upper cased navigation hyperlink
+usage: Use for tertiary navigation or functionality within card headers. Not to be used anywhere but card headers. 
+category: :links

data/lib/undercase/patterns/blue_link.yml

@@ -0,0 +1,4 @@
+name: Blue
+description: A regular link
+usage: In paragraphs, lists, etc.
+category: :links

data/lib/undercase/patterns/blue_link_clean.yml

@@ -0,0 +1,4 @@
+name: Blue & Clean
+description: A regular link with inversed underline behavior
+usage: In paragraphs, lists, etc.
+category: :links

data/lib/undercase/patterns/cc_button_auto.yml

@@ -0,0 +1,4 @@
+name: Orange/Blue
+description: A button that is orange on non-editable pages and blue on editable-pages (hence the auto)
+usage: May be applied to any element, and must be a decendant of a `.show`, `.index`, `.edit`, `.new` class (usually on the body).
+category: :buttons

data/lib/undercase/patterns/cc_button_flat_blue.yml

@@ -0,0 +1,4 @@
+name: Flat Blue
+description: A new style blue button.
+usage: May be applied to any element.
+category: :buttons

data/lib/undercase/patterns/cc_button_flat_gray.yml

@@ -0,0 +1,4 @@
+name: Flat Gray
+description: Rounded corner spacious gray button that can be conditionally enabled/disabled.
+usage: Most often used to cancel before saving or submitting or progressing within a workflow. Gray buttons should never be used as the primary action.
+category: :buttons

data/lib/undercase/patterns/cc_button_flat_gray_split.yml

@@ -0,0 +1,9 @@
+name: Flat Gray Split
+description: A button with a primary action with alternate functions available within a combined dropdown pattern.
+usage: |
+  Flat Gray Split is meant to be used when there is an obvious primary action but a collection of related and equally likely secondary actions.
+
+  Split buttons should not be used if the other related actions are of little importance to the user.
+
+  May be applied to any element (but **NOT** `<input type="button">`).
+category: :buttons

data/lib/undercase/patterns/cc_button_flat_green.yml

@@ -0,0 +1,27 @@
+name: Flat Green
+description: |
+  Part of page level button set. Set also includes larger 'flat gray' buttons. Green is always primary. Gray is secondary.
+
+  Rules
+  ==
+
+  * Only one button set per page.
+  * Only one primary button per set.
+  * Primary always appears on the far left.
+  * Labels to follow label standards set on 'language' page where applicable.
+  * Keep button text short (one or two words).
+  * Limit button sets to two buttons or three when absolutely required. 'Back' buttons still appear on the right since they are secondary.
+usage: |
+  Primary
+  ==
+
+  * Business workflow (i.e. submit, return, approve).
+  * Forward and back navigation within a set of related screens (i.e. back, next, cancel).
+  * Modals.
+
+  Do not use
+  ==
+
+  * When actions are repeated on the same screen (i.e. Calculate Eligibility) --- use flat blue and smaller flat gray buttons instead.
+  * Mini forms. When buttons serve a singular, application-wide purpose (Add note) --- use small when icons have been defined for the same purpose (Edit, delete)
+category: :buttons

data/lib/undercase/patterns/cc_button_gray.yml

@@ -0,0 +1,4 @@
+name: Gray
+description: A gray button.
+usage: May be applied to any element.
+category: :buttons

data/lib/undercase/patterns/cc_button_icon.yml

@@ -0,0 +1,4 @@
+name: Button Icon
+description: A gray icon button.
+usage: Make a button.
+category: :buttons

data/lib/undercase/patterns/cc_button_wire_auto.yml

@@ -0,0 +1,5 @@
+name: Wire Orange/Blue
+description: Deprecated button style
+usage: |
+  **Do not** use on any elements please!
+category: :buttons

data/lib/undercase/patterns/cc_link_smartbar.yml

@@ -0,0 +1,4 @@
+name: Smartbar Link
+description: A link designed to change link color when the on either a show or an edit page to maintain accessibility and legibility.
+usage: Used for navigation and menu links in the smartbar only. Never use this pattern elsewhere.
+category: :links

data/lib/undercase/patterns/chevrons.yml

@@ -0,0 +1,4 @@
+name: Chevrons
+description: 3,4, or 5 step progress tracker that collapses to show an appropriate number of workflow steps per viewport.
+usage: Used to indicate current state of progres in a multi-step workflow.  Chevrons are not intended for multi-page forms. That usage is considered deprecated.
+category: :components

data/lib/undercase/patterns/colors.yml

@@ -0,0 +1,5 @@
+name: Colors
+description:  All colors available in undercase.
+usage: Don't add new colors directly in CSS. Instead, add them to _colors.scss as a variable and name them.
+category: :colors
+display: false

data/lib/undercase/patterns/content_with_toolbar.yml

@@ -0,0 +1,4 @@
+name: Content With Toolbar
+description: Container with top-right link toolbar
+usage: Useful for displaying content upon which the user can take action, such as a list of records that can be edited or removed.
+category: :components

data/lib/undercase/patterns/dropdown.yml

@@ -0,0 +1,4 @@
+name: Dropdown Menu
+description: Dropdown menu pulled from bootstrap.css to enable easy right or left alignment and easy responsive design.
+usage: Stylized menu for showing all options within a dropdown menu once selected. A better alternative to select input types for navigation.
+category: :popups

data/lib/undercase/patterns/filters.yml

@@ -0,0 +1,5 @@
+name: Filters
+description: A header and box containing form inputs (e.g. checkboxes) and an expando toggle arrow
+usage: For filtering search results, where the union of all sub-facets is identical to the facet.
+category: :components
+

data/lib/undercase/patterns/filters_show_only.yml

@@ -0,0 +1,5 @@
+name: Filters - Show Only
+description: A header and box containing form inputs (e.g. checkboxes)
+usage: For filtering search results, where the union of all sub-facets is not identical to the facet.
+category: :components
+

data/lib/undercase/patterns/gray_link.yml

@@ -0,0 +1,4 @@
+name: Gray
+description: A link that looks like text
+usage: (DEPRECATED - DO NOT REUSE)
+category: :links

data/lib/undercase/patterns/grid.yml

@@ -0,0 +1,4 @@
+name: Grids and Spacing
+description: Grids and Spacing
+usage: Use on forms
+category: :grids

data/lib/undercase/patterns/icon_classes.yml

@@ -0,0 +1,5 @@
+name: Icon Classes
+description: Available icons in undercase as classes directly. Color as appropriate.
+usage: Apply as a class to place an icon before a element.
+category: :icons
+display: false

data/lib/undercase/patterns/icon_custom.yml

@@ -0,0 +1,4 @@
+name: Icon After
+description: Place an icon after an element with custom rules.
+usage: Use the icon mixin to set it up, then set the content to your icon variable.
+category: :icons

data/lib/undercase/patterns/inline_message.yml

@@ -0,0 +1,4 @@
+name: Inline Message
+description: These are used to alert users to missing, new or contradictory information.
+usage: add usage guidelines
+category: :components

data/lib/undercase/patterns/length_of_time.yml

@@ -0,0 +1,4 @@
+name: Length of Time
+description: Icon and styled text indicating number of days, months or years which have passed
+usage: Indicate time elapsed since a given date
+category: :components

data/lib/undercase/patterns/list_circle.yml

@@ -0,0 +1,4 @@
+name: Circle-Style list
+description: List with CIRCLE marker
+usage: Use in unordered list (<ul>) only
+category: :lists

data/lib/undercase/patterns/list_disc.yml

@@ -0,0 +1,4 @@
+name: Disc-Style list
+description: List with DISC marker
+usage: Use in unordered list (<ul>) only
+category: :lists

data/lib/undercase/patterns/navigation.yml

@@ -0,0 +1,4 @@
+name: Navigation
+description: Primary Navigation
+usage: Usually for headers
+category: :components

data/lib/undercase/patterns/pagination.yml

@@ -0,0 +1,4 @@
+name: Pagination
+description: First, Previous, Next, and Last links with a text input in the center
+usage: For navigating pages of several items
+category: :components

data/lib/undercase/patterns/person_placard.yml

@@ -0,0 +1,4 @@
+name: Person Placard
+description: Small cards for focus person that display photos, names and information about removal episodes and placements
+usage: Case placements and locations
+category: :components

data/lib/undercase/patterns/popover.yml

@@ -0,0 +1,4 @@
+name: Popover
+description: An overlay with lots of text. Taken from Bootstrap. We include the minimal Bootstrap CSS to make it look right, then override a few styles.
+usage: As a tooltip, potentially with HTML content.
+category: :popups

data/lib/undercase/patterns/tables_mobile.yml

@@ -0,0 +1,4 @@
+name: Table Header responsive to mobile size
+description: Specifically-sized and auto-sized table column widths.
+usage: For mobile-device-sized browser window, scroll bar appears at bottom and table expands to 100%
+category: :components

data/lib/undercase/patterns/tables_not_desktop.yml

@@ -0,0 +1,4 @@
+name: Table Header responsive to non-desktop size
+description: One column resizes, while others have fixed width
+usage: For sub-desktop-sized browser window, scroll bar appears at bottom and table expands to 100%
+category: :components

data/lib/undercase/patterns/tables_small_tablet.yml

@@ -0,0 +1,4 @@
+name: Table Header responsive to small tablet size
+description: Specifically-sized and auto-sized table column widths.
+usage: For small-tablet-sized browser window, scroll bar appears at bottom and table expands to 100%
+category: :components

data/lib/undercase/patterns/typography.yml

@@ -0,0 +1,4 @@
+name: Typography
+description: Headings, Body Copy, and Lists
+usage: Use the elements
+category: :typography

data/lib/undercase/patterns/typography_body_em.yml

@@ -0,0 +1,4 @@
+name: Emphasis (italic)
+description: Italicized text
+usage: Use the classes
+category: :typography

data/lib/undercase/patterns/typography_body_p.yml

@@ -0,0 +1,4 @@
+name: Paragraph
+description: Default body text
+usage: Use the classes
+category: :typography

data/lib/undercase/patterns/typography_body_strong.yml

@@ -0,0 +1,4 @@
+name: Strong (bold)
+description: Bolded text
+usage: Use the classes
+category: :typography

data/lib/undercase/patterns/typography_body_thin.yml

@@ -0,0 +1,4 @@
+name: Large Thin
+description: Large thin text
+usage: Use the classes
+category: :typography

data/lib/undercase/patterns/typography_body_underline.yml

@@ -0,0 +1,4 @@
+name: Underline
+description: Underlined text
+usage: Use the classes
+category: :typography

data/lib/undercase/patterns/typography_body_uppercase.yml

@@ -0,0 +1,4 @@
+name: Uppercase
+description: Uppercase (all-caps) text
+usage: Use the classes
+category: :typography

data/lib/undercase/patterns/typography_heading_1.yml

@@ -0,0 +1,4 @@
+name: Heading 1
+description: Heading
+usage: Use the elements
+category: :typography

data/lib/undercase/patterns/typography_heading_2.yml

@@ -0,0 +1,4 @@
+name: Heading 2
+description: Heading
+usage: Use the elements
+category: :typography

data/lib/undercase/patterns/typography_heading_3.yml

@@ -0,0 +1,4 @@
+name: Heading 3
+description: Heading
+usage: Use the elements
+category: :typography

data/lib/undercase/patterns/typography_heading_4.yml

@@ -0,0 +1,4 @@
+name: Heading 4
+description: Heading
+usage: Use the elements
+category: :typography

data/lib/undercase/patterns/typography_heading_thin.yml

@@ -0,0 +1,4 @@
+name: Heading (Thin)
+description: Heading
+usage: Used on modal headers
+category: :typography

data/lib/undercase/patterns/typography_links_general.yml

@@ -0,0 +1,4 @@
+name: Links - General
+description: Default Link styling
+usage: Use the classes
+category: :typography

data/lib/undercase/patterns/typography_links_navigation.yml

@@ -0,0 +1,4 @@
+name: Links - Navigation
+description: Navigational Link styling
+usage: Use the classes
+category: :typography