docks_theme_api 1.0.2

data/assets/templates/haml/pattern.haml

@@ -0,0 +1,54 @@
+.content
+  - if deprecation = @pattern.deprecated
+    .notice
+      %h3.type.type--heading.type--heading-3
+        Deprecated as of
+        %strong= deprecation.version
+      .type-container= deprecation.description
+  %pre
+  %pre
+  - if description = @pattern.description
+    .type-container
+      = description
+- if @pattern.has_structure? && @pattern.has_behavior?
+  - docks_tablist(size: :large, manage_url?: true) do |tablist|
+    = tablist.tab(text: "Structure", active?: true, id: "page__content__tab--markup", panel_id: "page__content--markup", icon: :code)
+    = tablist.tab(text: "Behavior", id: "page__content__tab--behavior", panel_id: "page__content--behavior", icon: :script)
+.tablist__panel-container
+  - docks_component("tablist:panel", active?: true, id: "page__content--markup", tab_id: "page__content__tab--markup") do
+    #symbols--structure{"data-filter-items" => ".section"}
+      - @pattern.demos.each do |demo|
+        = render partial: "symbols/demo", locals: { demo: demo }
+      - unless (variables = @pattern.variables(exclude: :script)).empty?
+        .content.content--extra-vertical-spacing
+          %h2.type.type--heading.type--heading-2.type--heading-bordered Variables
+          - variables.each do |variable|
+            = render partial: "symbols/variable", locals: { variable: variable }
+      - unless (functions = @pattern.functions(exclude: :script)).empty?
+        .content.content--extra-vertical-spacing
+          %h2.type.type--heading.type--heading-2.type--heading-bordered Functions
+          - functions.each_with_index do |func, index|
+            = render partial: "symbols/function", locals: { function: func }
+      - unless (mixins = @pattern.mixins(exclude: :script)).empty?
+        .content.content--extra-vertical-spacing
+          %h2.type.type--heading.type--heading-2.type--heading-bordered Mixins
+          - mixins.each do |mixin|
+            = render partial: "symbols/mixin", locals: { mixin: mixin }
+  - docks_component("tablist:panel", id: "page__content--behavior", tab_id: "page__content__tab--behavior") do
+    #symbols--behavior{"data-filter-items" => ".section"}
+      - unless (factories = @pattern.factories(include: :script)).empty?
+        - factories.each do |factory|
+          = render partial: "symbols/factory", locals: { factory: factory }
+      - unless (classes = @pattern.classes(include: :script)).empty?
+        - classes.each do |klass|
+          = render partial: "symbols/class", locals: { klass: klass }
+      - unless (variables = @pattern.variables(include: :script)).empty?
+        .content.content--extra-vertical-spacing
+          %h2.type.type--heading.type--heading-2.type--heading-bordered Variables
+          - variables.each do |variable|
+            = render partial: "symbols/variable", locals: { variable: variable }
+      - unless (functions = @pattern.functions(include: :script)).empty?
+        .content.content--extra-vertical-spacing
+          %h2.type.type--heading.type--heading-2.type--heading-bordered Functions
+          - functions.each do |func|
+            = render partial: "symbols/function", locals: { function: func }

data/assets/templates/slim/demo.slim

@@ -0,0 +1,24 @@
+| <div class="iframe" data-iframe-id="
+= id
+| "> <div class="demo" data-iframe-id="
+= id
+| "> 
+- if demo.kind_of?(Docks::Containers::Demo)
+  - demo_variations = [demo.component] + demo.joint_variations
+  - demo_variations.each do |variation|
+    - name = variation.name
+    |  <section class="demo__section" data-name="
+    = name
+    | " id="demo__section--
+    = name
+    | "> 
+    - unless demo_variations.length == 1
+      header.demo__header
+        h2.badge.badge--code
+          = name
+    .content
+      = variation.markup
+- else
+  section.demo__section
+    .content
+      = demo

data/assets/templates/slim/layouts/demo.slim

@@ -0,0 +1,5 @@
+html
+  head
+  body
+    .wrapper
+      = yield

data/assets/templates/slim/layouts/pattern.slim

@@ -0,0 +1,48 @@
+- render_everything
+head
+  = stylesheet_link_tag "pattern-library"
+body
+  = docks_icons
+  .page
+    .page__sidebar
+      = render "sidebar"
+    .page__content
+      .vertical-stack
+        .vertical-stack__item.vertical-stack__item--fixed
+          .page-header
+            .grid.grid--vertically-centered
+              .grid__item.grid__item--no-flex
+                button.sidebar__toggler
+                  span.helper--visually-hidden
+                    | Toggle Sidebar
+                  .icon.icon--action.icon--hamburger
+                    .icon--hamburger__slice
+              .grid__item
+                h1.type.type--heading.type--heading-1
+                  = @pattern.title
+              - if has_github?
+                .popover__container
+                  button.docks-button.docks-button--dark
+                    |  Github 
+                    i.icon.icon--disclosure
+                  - docks_popover do
+                    .list
+                      |  <a href="
+                      = "#{github_root_url}/issues/new?body=#{url_encode(github_issue_message)}"
+                      | " target="_blank" class="list__item">File an issue
+                      .list__group
+                        h4.type.type--heading.type--heading-4
+                          | View source
+                        - relative_pattern_files.each do |file|
+                          |  <a href="
+                          = github_url(file)
+                          | " target="_blank" class="list__item type--code">
+                          = File.basename(file)
+        .vertical-stack__item
+          main.scroll-container
+            = yield
+      = docks_details_sheet
+      = docks_xray
+  script[type="text/javascript"]
+    |  window.pattern = <ruby code="= CGI.unescapeHTML(@pattern.to_json)"></ruby>; 
+  = javascript_include_tag "pattern_library"

data/assets/templates/slim/partials/sidebar.slim

@@ -0,0 +1,112 @@
+nav.sidebar
+  .vertical-stack
+    .vertical-stack__item.vertical-stack__item--fixed
+      header.page-header
+        .grid.grid--vertically-centered
+          .grid__item
+            label.label.helper--visually-hidden[for="search"]
+              | Search
+            .field.field--text
+              .field__icon
+                = docks_icon(:search, size: :medium)
+              input#search.field__input[type="search" data-filters="#list--patterns, #list--this-pattern" data-filter-attribute="contents" placeholder="Search"]
+          .grid__item.grid__item--no-flex
+            .popover__container
+              = docks_icon :eye, size: :large, color: :gray_darker
+              - docks_popover do |popover|
+                - popover.pane do
+                  .field.field--switch
+                    input#private-toggle.field__switch[type="checkbox" data-filters="#list--this-pattern, #symbols--structure, #symbols--behavior" data-filter-attribute="data-private" data-checked-value="true|false"]
+                    label.label[for="private-toggle"]
+                      | Show private symbols
+    .vertical-stack__item
+      - unless @pattern.symbols.empty?
+        #list--this-pattern.list[data-filter-items=".list__item"]
+          - symbol_contents = { "structure" => @pattern.has_structure?, "behavior" => @pattern.has_behavior? }
+          -             has_both = symbol_contents["structure"] && symbol_contents["behavior"]
+          h3.type.type--heading.type--heading-3
+            | This Pattern
+          - %w(structure behavior).each do |group|
+            - if symbol_contents[group]
+              - if group == "structure" && !(demos = @pattern.demos).empty?
+                .list__group
+                  h4.type.type--heading.type--heading-4
+                    | Components
+                  - demos.each do |demo|
+                    |  <a class="list__item type--code" href="#
+                    = demo.component.symbol_id
+                    | " data-private="
+                    = demo.component.private?
+                    | ">
+                    = demo.name
+              - if group == "behavior" && !(factories = @pattern.factories).empty?
+                .list__group
+                  h4.type.type--heading.type--heading-4
+                    | Factories
+                  - factories.each do |factory|
+                    |  <a class="list__item type--code" href="#
+                    = factory.symbol_id
+                    | " data-private="
+                    = factory.private?
+                    | ">
+                    = factory.name
+                    - factory.static_properties.each do |prop|
+                      |  <a href="#
+                      = prop.symbol_id
+                      | " class="list__item list__item--indented type--code" data-private="
+                      = prop.private?
+                      | ">.
+                      = prop.name
+                    - factory.static_methods.each do |meth|
+                      |  <a href="#
+                      = meth.symbol_id
+                      | " class="list__item list__item--indented type--code" data-private="
+                      = meth.private?
+                      | ">.
+                      = meth.name
+                      | ()
+                    - factory.instance_properties.each do |prop|
+                      |  <a href="#
+                      = prop.symbol_id
+                      | " class="list__item list__item--indented type--code" data-private="
+                      = prop.private?
+                      | ">#
+                      = prop.name
+                    - factory.instance_methods.each do |meth|
+                      |  <a href="#
+                      = meth.symbol_id
+                      | " class="list__item list__item--indented type--code" data-private="
+                      = meth.private?
+                      | ">#
+                      = meth.name
+                      | ()
+              - %w(variable function mixin).each do |type|
+                - symbol_options = {}
+                -                   symbol_options[group == "behavior" ? :include : :exclude] = Docks::Types::Languages::SCRIPT
+                -                   symbols = @pattern.send(type.pluralize.to_sym, symbol_options)
+                -                   unless symbols.empty?
+                .list__group
+                  h4.type.type--heading.type--heading-4
+                    = type.pluralize.capitalize
+                  - symbols.each do |symbol|
+                    |  <a class="list__item type--code" href="#
+                    = symbol.symbol_id
+                    | " data-private="
+                    = symbol.private?
+                    | ">
+                    = symbol.name
+    #list--patterns.list[data-filter-items=".list__item"]
+      h3.type.type--heading.type--heading-3
+        | Library
+      - @pattern_library.groups do |group, patterns|
+        .list__group
+          h4.type.type--heading.type--heading-4
+            = group.pluralize
+          - patterns.sort do |one, two| one.name <=> two.name  }.each do |pattern|
+            - active_pattern = pattern.name == @pattern.name
+            |  <a class="list__item
+            = " list__item--is-active" if active_pattern
+            | " href="
+            = active_pattern ? "javascript:" : docks.pattern_path(pattern.name)
+            | "> 
+            = pattern.title

data/assets/templates/slim/partials/symbols/class.slim

@@ -0,0 +1 @@
+= render(partial: "symbols/factory", locals: { factory: klass })

data/assets/templates/slim/partials/symbols/demo.slim

@@ -0,0 +1,30 @@
+| <section class="section" id="
+= demo.component.symbol_id
+| " data-private="
+= demo.component.private?
+| "> 
+header.content
+  .grid
+    .grid__item
+      h3.type.type--heading.type--heading-2
+        - if title = demo.component.title
+          = title
+        - else
+          span.type--code
+            = demo.component.name
+    .grid__item.grid__item--no-flex
+      .docks-button__container
+        |  <div class="docks-button" data-xray-trigger="
+        = demo.name
+        | ">x-ray
+- markup = render(inline: (demo.component.markup || demo.component.helper), layout: false)
+-       code_details = []
+-       code_details << { code: demo.component.helper, language: "erb", label: "Helper" } unless demo.component.helper.nil?
+-       code_details << { code: markup, language: "html", label: "Markup" }
+-       options = [demo.name].concat demo.joint_variations.map { |variant| variant.name }
+= docks_code_block(code: code_details, hideable?: true, full_width?: true, hidden?: true, options: options, id: demo.name, demo: demo)
+- #= docks_toggle_container variations: demo.select_variations(group_by_component: true), base_class: demo.component.name
+- if demo.component.description
+  .content
+    .type-container
+      = demo.component.description

data/assets/templates/slim/partials/symbols/factory.slim

@@ -0,0 +1,57 @@
+.content.content--extra-vertical-spacing
+  |  <div class="section" id="
+  = factory.symbol_id
+  | " data-private="
+  = factory.private?
+  | "> 
+  h2.type.type--heading.type--heading-2.type--heading-bordered
+    span.type--code
+      = factory.name
+  .type-container
+    = factory.description
+  = docks_code_block(code: factory.signature, language: factory.source.language_code)
+  - unless (params = factory.fetch(:params, [])).empty?
+    h4.type.type--heading.type--heading-4
+      | Parameters
+    - params.each do |param|
+      h5.type.type--heading.type--heading-5
+        span.type--code
+          = param.name
+        span.badge
+          = param.types.first
+      .type-container.type-container--small
+        = param.description
+      - unless (properties = param.properties || []).empty?
+        - docks_table do
+          thead.table__header
+            tr.table__row
+              th.table__cell
+                | Name
+              th.table__cell
+                | Description
+              th.table__cell
+                | Types
+              th.table__cell.table__cell--centered
+                | Default
+          tbody.table__body
+            - properties.each do |property|
+              tr.table__row
+                td.table__cell
+                  code.type--code
+                    = property.name
+                td.table__cell
+                  .type-container.type-container--small
+                    = property.description
+                td.table__cell
+                  = (type = property.types.try(:first)) ? "<span class='type--code'>#{type}</span>".html_safe : "Anything"
+                td.table__cell.table__cell--centered
+                  = (default = property.default) ? "<span class='type--code'>#{default}</span>".html_safe : "—".html_safe
+  - unless (examples = factory.fetch(:examples, [])).empty?
+    h4.type.type--heading.type--heading-4
+      = "Example".pluralize(examples.length)
+    - examples.each do |example|
+      = docks_code_block(code: example.code, language: example.language, condensed?: true)
+- factory.properties.each do |property|
+  = render "docks/partials/variable", variable: property
+- factory.methods.each do |method|
+  = render "docks/partials/function", function: method

data/assets/templates/slim/partials/symbols/function.slim

@@ -0,0 +1,81 @@
+| <div class="section" id="
+= function.symbol_id
+| " data-private="
+= function.private?
+| "> 
+header
+  .inline-group
+    .inline-group__item
+      h3.type.type--heading.type--heading-3
+        span.type--code
+          = function.name
+    - if function.private? || function.deprecated
+      .inline-group__item
+        .badge__container
+          - if function.private?
+            span.badge.badge--standalone.badge--secret
+              | private
+          - if function.deprecated
+            span.badge.badge--standalone.badge--warning
+              | deprecated
+.type-container
+  = function.description
+= docks_code_block code: function.signature, language: function.source.language_code, id: "function--#{function.name}", full_width?: true
+- unless (aliases = function.fetch(:aliases, [])).empty?
+  h4.type.type--heading.type--heading-4
+    | Aliases
+  - aliases.each do |an_alias|
+    code.type--code
+      = an_alias
+- unless (params = function.fetch(:params, [])).empty?
+  h4.type.type--heading.type--heading-4
+    | Parameters
+  - params.each do |param|
+    h5.type.type--heading.type--heading-5
+      span.type--code
+        = param.name
+      span.badge
+        = param.types.first
+    .type-container.type-container--small
+      = param.description
+    - unless (properties = param.properties || []).empty?
+      - docks_table do
+        thead.table__header
+          tr.table__row
+            th.table__cell
+              | Name
+            th.table__cell
+              | Description
+            th.table__cell
+              | Types
+            th.table__cell.table__cell--centered
+              | Default
+        tbody.table__body
+          - properties.each do |property|
+            tr.table__row
+              td.table__cell
+                code.type--code
+                  = property.name
+              td.table__cell
+                .type-container.type-container--small
+                  = property.description
+              td.table__cell
+                = (type = !property.types && property.types.first) ? "<span class='type--code'>#{type}</span>" : "Anything"
+              td.table__cell.table__cell--centered
+                = (default = property.default) ? "<span class='type--code'>#{default}</span>" : "—"
+h4.type.type--heading.type--heading-4
+  | Returns
+- if return_types = function.returns && function.returns.types
+  |  <a href="
+  = docks_path(return_types.first, language: function.source.language_code)
+  | ">
+  code.type--code
+    = return_types.first
+- else
+  p.type.type--paragraph
+    | Nothing
+- unless (examples = function.fetch(:examples, [])).empty?
+  h4.type.type--heading.type--heading-4
+    = "Example".pluralize(examples.length)
+  - examples.each do |example|
+    = docks_code_block code: example.code, language: example.language, condensed?: true

data/assets/templates/slim/partials/symbols/mixin.slim

@@ -0,0 +1,45 @@
+| <div class="section" id="
+= mixin.symbol_id
+| " data-private="
+= mixin.private?
+| "> 
+header
+  .inline-group
+    .inline-group__item
+      h3.type.type--heading.type--heading-3
+        span.type--code
+          = mixin.name
+    - if mixin.private? || mixin.deprecated
+      .inline-group__item
+        .badge__container
+          - if mixin.private?
+            span.badge.badge--standalone.badge--secret
+              | private
+          - if mixin.deprecated
+            span.badge.badge--standalone.badge--warning
+              | deprecated
+.type-container
+  = mixin.description
+= docks_code_block code: mixin.signature, language: mixin.source.language_code, id: "mixin--#{mixin.name}", full_width?: true
+- unless (aliases = mixin.fetch(:aliases, [])).empty?
+  h4.type.type--heading.type--heading-4
+    | Aliases
+  - aliases.each do |an_alias|
+    code.type--code
+      = an_alias
+- unless (params = mixin.fetch(:params, [])).empty?
+  h4.type.type--heading.type--heading-4
+    | Parameters
+  - params.each do |param|
+    h5.type.type--heading.type--heading-5
+      span.type--code
+        = param.name
+      span.badge
+        = param.types.first
+    .type-container.type-container--small
+      = param.description
+- unless (examples = mixin.fetch(:examples, [])).empty?
+  h4.type.type--heading.type--heading-4
+    = "Example".pluralize(examples.length)
+  - examples.each do |example|
+    = docks_code_block code: example.code, language: example.language, condensed?: true

data/assets/templates/slim/partials/symbols/variable.slim

@@ -0,0 +1,35 @@
+| <div class="section" id="
+= variable.symbol_id
+| " data-private="
+= variable.private?
+| "> 
+header
+  .inline-group
+    .inline-group__item
+      h3.type.type--heading.type--heading-3
+        span.type--code
+          = variable.name
+    - if variable.private? || variable.deprecated
+      .inline-group__item
+        .badge__container
+          - if variable.private?
+            span.badge.badge--standalone.badge--secret
+              | private
+          - if variable.deprecated
+            span.badge.badge--standalone.badge--warning
+              | deprecated
+.type-container
+  = variable.description
+- if type = variable.type
+  h4.type.type--heading.type--heading-4
+    | Type
+  |  <a href="
+  = docks_path_to(type, language: variable.source.language_code)
+  | ">
+  code.type--code
+    = type
+- if value = variable.value
+  h4.type.type--heading.type--heading-4
+    | Value
+  code.type--code
+    = value

data/assets/templates/slim/pattern.slim

@@ -0,0 +1,63 @@
+.content
+  - if deprecation = @pattern.deprecated
+    .notice
+      h3.type.type--heading.type--heading-3
+        | Deprecated as of 
+        strong
+          = deprecation.version
+      .type-container
+        = deprecation.description
+  pre
+    - #= @pattern.to_yaml
+  pre
+    - #= @pattern_library.to_yaml
+  - if description = @pattern.description
+    .type-container
+      = description
+- if @pattern.has_structure? && @pattern.has_behavior?
+  - docks_tablist(size: :large, manage_url?: true) do |tablist|
+    = tablist.tab(text: "Structure", active?: true, id: "page__content__tab--markup", panel_id: "page__content--markup", icon: :code)
+    = tablist.tab(text: "Behavior", id: "page__content__tab--behavior", panel_id: "page__content--behavior", icon: :script)
+.tablist__panel-container
+  - docks_component("tablist:panel", active?: true, id: "page__content--markup", tab_id: "page__content__tab--markup") do
+    #symbols--structure[data-filter-items=".section"]
+      - @pattern.demos.each do |demo|
+        = render partial: "symbols/demo", locals: { demo: demo }
+      - unless (variables = @pattern.variables(exclude: :script)).empty?
+        .content.content--extra-vertical-spacing
+          h2.type.type--heading.type--heading-2.type--heading-bordered
+            | Variables
+          - variables.each do |variable|
+            = render partial: "symbols/variable", locals: { variable: variable }
+      - unless (functions = @pattern.functions(exclude: :script)).empty?
+        .content.content--extra-vertical-spacing
+          h2.type.type--heading.type--heading-2.type--heading-bordered
+            | Functions
+          - functions.each_with_index do |func, index|
+            = render partial: "symbols/function", locals: { function: func }
+      - unless (mixins = @pattern.mixins(exclude: :script)).empty?
+        .content.content--extra-vertical-spacing
+          h2.type.type--heading.type--heading-2.type--heading-bordered
+            | Mixins
+          - mixins.each do |mixin|
+            = render partial: "symbols/mixin", locals: { mixin: mixin }
+  - docks_component("tablist:panel", id: "page__content--behavior", tab_id: "page__content__tab--behavior") do
+    #symbols--behavior[data-filter-items=".section"]
+      - unless (factories = @pattern.factories(include: :script)).empty?
+        - factories.each do |factory|
+          = render partial: "symbols/factory", locals: { factory: factory }
+      - unless (classes = @pattern.classes(include: :script)).empty?
+        - classes.each do |klass|
+          = render partial: "symbols/class", locals: { klass: klass }
+      - unless (variables = @pattern.variables(include: :script)).empty?
+        .content.content--extra-vertical-spacing
+          h2.type.type--heading.type--heading-2.type--heading-bordered
+            | Variables
+          - variables.each do |variable|
+            = render partial: "symbols/variable", locals: { variable: variable }
+      - unless (functions = @pattern.functions(include: :script)).empty?
+        .content.content--extra-vertical-spacing
+          h2.type.type--heading.type--heading-2.type--heading-bordered
+            | Functions
+          - functions.each do |func|
+            = render partial: "symbols/function", locals: { function: func }

data/docks_config.rb

@@ -0,0 +1,32 @@
+Docks.configure do |config|
+  config.sources = [
+    "source/components/**/*.{scss,js,md}",
+    "source/structures/**/*.{scss,js,md}",
+    "source/behaviors/**/*.{scss,js,md}",
+    "source/utilities/**/*.{scss,js,md}",
+    "source/foundation/**/*.{scss,js,md}"
+  ]
+
+  config.destination = "public"
+
+  config.compiled_assets = [
+    "pattern-library.css",
+    "pattern_library.js"
+  ]
+
+  config.asset_folders = {
+    scripts: "scripts",
+    styles: "styles"
+  }
+
+  config.templates = "pattern_library_assets/templates/erb"
+
+  config.mount_at = "pattern-library"
+  config.use_theme_assets = false
+  config.github_repo = "docks-app/docks_theme_api"
+
+  config.pattern_id = lambda do |file|
+    dir = File.basename(File.dirname(file))
+    %w(vendor foundation .).include?(dir) ? File.basename(file).split(".").first : dir
+  end
+end

data/docks_theme_api.gemspec

@@ -0,0 +1,37 @@
+require "rubygems"
+
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+
+Gem::Specification.new do |s|
+  s.name                  = "docks_theme_api"
+  s.version               = "1.0.2"
+  s.platform              = Gem::Platform::RUBY
+  s.required_ruby_version = ">= 1.9.3"
+  s.authors               = ["Chris Sauve"]
+  s.email                 = ["chrismsauve@gmail.com"]
+  s.license               = "MIT"
+  s.homepage              = "http://github.com/docks-app/docks_theme_api"
+  s.summary               = "A theme for Docks geared towards documenting complex CSS and JavaScript components."
+  s.description           = s.summary
+
+  s.files                 = `git ls-files`.split("\n")
+  s.test_files            = `git ls-files -- spec/*`.split("\n")
+  s.executables           = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
+  s.require_paths         = ["lib"]
+
+  s.add_runtime_dependency "activesupport"
+  s.add_runtime_dependency "docks_app"
+  s.add_runtime_dependency "docks_theme_base"
+
+  s.add_development_dependency "bundler", "~> 1.3"
+  s.add_development_dependency "rubocop", "< 1.0"
+  s.add_development_dependency "rake", "~> 10.4"
+  s.add_development_dependency "rspec", "~> 3.0"
+  s.add_development_dependency "haml", "~> 4.0"
+  s.add_development_dependency "slim", "~> 3.0"
+  s.add_development_dependency "awesome_print", "~> 1.6"
+  s.add_development_dependency "rspec-html-matchers", "~> 0.7"
+  s.add_development_dependency "html2haml", "~> 2.0"
+  s.add_development_dependency "html2slim", "~> 0.2"
+end