express_ui 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 501cb78ab946ee9fc1321df247a4fa0b38aa3e67
-  data.tar.gz: 99ec2242c3f07d855b58c0d58046810d269d5cf3
+  metadata.gz: f5860624c101208efa7c57aa801fe58ec2f46b8a
+  data.tar.gz: 0bf1177ac93dc0cae44e6687047eb727465bc757
 SHA512:
-  metadata.gz: a582262e21cb1bcb3d164cd716b4ea2c5fc8e50d84337c79595f58ffc3dee0ada49b9dbb7de7863389e789563fa02a282c66888ac6c855cae1c215451f28b656
-  data.tar.gz: 80b7f360a378a63be7cbb6f5033f7fd491dab13357490628af6464481045def6e439dda8e4bf75ff2463a9983c97312a072decf1659d043e43d88908730ee47f
+  metadata.gz: 007cc3f0516976e55ae6e845fa306fa53eaf8624580b9ebf51b70d833cc2e27b309882912ab98a24b0adba8b3cbf17b49a1153faa4fdfafa3a49411c57cc7bf0
+  data.tar.gz: 5e58e6d6eef6ff5d5b1328db471a92a1b148598737aa8229e723d141f81ec14d3c1cc2a55c5e891e49661d99868dd12d03f7954aeb4bcecea44a2a18245f5449

data/app/assets/javascripts/express_ui/styleguide.js

@@ -28,7 +28,7 @@ $(function() {
     }
   })
   $(".js-anchorific-content").anchorific({
-    headers: ':header:not(.ae-demo-container :header)'
+    headers: ':header:not(.ae-demo-container :header, h4)'
   });
 
   $(".anchorific li").each(function(index, item) {

data/app/assets/stylesheets/express_ui/atoms/_buttons.sass

@@ -98,8 +98,8 @@
   @include h5
 
 .ae-btn-lg
-  padding-top: 0.5em
-  padding-bottom: 0.5em
+  padding-top: 0.75em
+  padding-bottom: 0.75em
   @include h4
 
 .ae-btn-border

data/app/assets/stylesheets/express_ui/atoms/_headings.sass

@@ -1,8 +1,8 @@
 @mixin h1
-  @include font-size(22px, 24px)
+  @include font-size(32px, 24px)
 
 @mixin h2
-  @include font-size(20px, 20px)
+  @include font-size(28px, 20px)
 
 @mixin h3
   @include font-size(18px, 18px)

data/app/assets/stylesheets/express_ui/atoms/_icons.sass

@@ -1,3 +1,3 @@
 .fa
-  @include font-size(16px, 16px)
-  color: $icon-color
+  @include font-size(14px, 16px)
+  color: $icon-color

data/app/assets/stylesheets/express_ui/atoms/_typography.sass

@@ -103,6 +103,8 @@ button
   @include p
   @include body-font
 
+em
+  @include p
 
 a:link
   color: $link-color
@@ -128,6 +130,12 @@ a:hover
   &-deleted
     @include status-deleted
 
+.ae-text
+  &-success
+    color: $success !important
+  &-cancelled
+    color: $cancelled !important
+
 @mixin badge
   background: $primary-color
   color: #fff

data/app/assets/stylesheets/express_ui/molecules/_button_group.sass

@@ -41,14 +41,13 @@
   width: 100%
   @include clearfix
 
-  @include tablet
-    .ae-btn
-      width: auto
+  .ae-btn
+    width: auto
 
-    .ae-btn-left
-      float: left
-      display: inline-block
+  .ae-btn-left
+    float: left
+    display: inline-block
 
-    .ae-btn-right
-      float: right
-      display: inline-block
+  .ae-btn-right
+    float: right
+    display: inline-block

data/app/assets/stylesheets/express_ui/molecules/_form_groups.sass

@@ -96,4 +96,4 @@
 
 @include tablet-max
   form, input
-    width: 100%!important
+    width: 100%

data/app/assets/stylesheets/express_ui/molecules/_forms.sass

@@ -84,7 +84,7 @@
 
 .ae-input-lg
   @include h4
-  padding: rem(8px)
+  padding: rem(12px)
 
   @include desktop
     padding: rem(7px)
@@ -97,6 +97,13 @@ label
 .ae-actions
   margin: 20px 0
 
+  @include tablet-max
+    text-align: center
+
+    .ae-btn
+      width: 100%
+      display: block
+
 .ae-hint
   margin: 0 0 20px 0
   padding: 0

data/app/assets/stylesheets/express_ui/molecules/_tables.sass

@@ -44,12 +44,21 @@ table
       tr:nth-child(even)
         background: transparent
 
+  &.ae-table-list
+    tbody
+      tr
+        border-bottom: 1px solid $border-light
+
+
   @include laptop-max
     width: 100%!important
 
 .ae-table-responsive
   overflow-x: scroll
 
+.ae-table-actions
+  vertical-align: middle
+
 .ae-table-filter
   background-color: $gray-background
 

data/app/assets/stylesheets/express_ui/organisms/_footer.sass

@@ -0,0 +1,3 @@
+footer
+	position: relative
+

data/app/assets/stylesheets/express_ui/organisms/_header.sass

@@ -41,7 +41,7 @@ header
       z-index: 99
 
 
-  & + [class*="ae-template-"]
+  & + [class*="ae-template-"],   & + [class*="ae-template-master-"]
     margin-top: ($header-max-height/2.75)
 
     @include tablet-max

data/app/assets/stylesheets/express_ui/style.sass

@@ -24,6 +24,7 @@
 @import "molecules/tables"
 @import "molecules/lists"
 @import "organisms/header"
+@import "organisms/footer"
 @import "organisms/sidebar"
 @import "templates/full_width"
 @import "templates/half_width"

data/app/assets/stylesheets/express_ui/templates/_full_width.sass

@@ -3,3 +3,7 @@
     @include laptop-max
       padding-left: $container-padding*4
       padding-right: $container-padding*4
+
+    @include tablet-max
+      padding-left: $container-padding*2
+      padding-right: $container-padding*2

data/app/components/component_docitem.rb

@@ -1,12 +1,21 @@
 class ComponentDocitem < ExpressTemplates::Container
 
+  has_option :examples, "Examples. Keys are partial names. :assigns and :expected_output are passed to component_example.", type: :hash
+
+  # TODO: See if we could pull this from RDoc
+  has_option :description, "A description of the component."
+
   prepends -> {
     h3(style: 'text-transform: none') { component_class.to_s.demodulize }
 
-    h5 "General Information"
+    h4 "General Information"
+
+    para(style: 'padding: 0 0.25rem 1rem 0.25rem', only_when: !!config[:description]) {
+      config[:description]
+    }
 
     table {
-      tbody {  
+      tbody {
         tr {
           th(width: "25%", style: "text-transform: none") { "Builder Method" }
           td { 
@@ -28,36 +37,61 @@ class ComponentDocitem < ExpressTemplates::Container
       }
     }
 
-    if component_class.respond_to?(:supported_options)
-      h5 "Supported Options"
+    if component_class.respond_to?(:supported_arguments) &&
+       component_class.supported_arguments.any?
+
+      h4 "Supported Arguments"
 
       table {
         thead {
           th { "option" }
           th { "type" }
           th { "default" }
+          th { "required" }
           th { "Description" }
         }
         tbody {
-          component_class.supported_options.each do |option, config|
+          component_class.supported_arguments.each do |arg, config|
             tr {
-              td(width: "25%", style: "text-transform: none") {
-                code {
-                  option.inspect
-                }
+              td(style: "text-transform: none") {
+                code { arg.inspect }
               }
-              td {
-                pre {
-                  option_types(config[:type])
-                }
+              td { pre { option_types(config[:type]) } }
+              td { pre { config[:default] } }
+              td { pre { config[:required] ? 'yes' : 'no' } }
+              td(width: "50%") { 
+                config[:description].html_safe
               }
-              td {
-                pre {
-                  config[:default]
-                }
+            }
+          end
+        }
+      }
+
+    end
+
+
+    if component_class.respond_to?(:supported_options)
+      h4 "Supported Options"
+
+      table {
+        thead {
+          th { "option" }
+          th { "type" }
+          th { "default" }
+          th { "required" }
+          th { "Description" }
+        }
+        tbody {
+          component_class.supported_options.each do |option, config|
+            tr {
+              td(style: "text-transform: none") {
+                code { option.inspect }
               }
-              td { 
-                config[:description]
+              td { pre { option_types(config[:type]) } }
+              td { pre { config[:default] } }
+              td { pre { config[:required] ? 'yes' : 'no' } }
+              td(width: "50%") { 
+                config[:description].html_safe
               }
             }
           end
@@ -95,6 +129,8 @@ class ComponentDocitem < ExpressTemplates::Container
       types.keys.map(&:inspect).join(', ')
     when config[:type].kind_of?(Array)
       types.map(&:inspect).join(', ')
+    when types.nil?
+      ''
     else
       types.inspect
     end

data/app/components/component_example.rb

@@ -3,23 +3,42 @@ class ComponentExample < ExpressTemplates::Component
   tag :section
 
   has_option :expected_output, "The markup that the example is expected to produce."
+  has_option :assigns, "Values to be passed in.", type: :hash
+  has_option :example_name, "A distinguishing name for the example if part of a set."
 
   contains -> {
+
+    h4 { example_title }
+
+    panel(only_when: config[:assigns].present?) {
+      para { "Input:" }
+      table {
+        tbody {
+          config[:assigns].each do |key, value|
+            tr {
+              td { code { key.to_s } }
+              td { pre { format(value) } }
+            }
+          end
+        }
+      }
+    }
+
     div(class: 'ae-demo-container') {
       ul(class: 'ae-tabs') {
-        li(class: 'ae-tab active-tab', 'data-tab' => input_id){
-          "Code"
+        li(class: 'ae-tab active-tab', 'data-tab' => usage_id){
+          "Usage"
         }
         li(class: 'ae-tab', 'data-tab' => output_id){
           "Output"
         }
         li(class: 'ae-tab', 'data-tab' => expected_id,
-                            :only_when => config[:expected_output]){
+                            :only_when => !!config[:expected_output]){
           "Expected Output"
         }
       }
 
-      div(id: input_id, class: 'ae-tab-content active-tab'){
+      div(id: usage_id, class: 'ae-tab-content active-tab'){
         highlight_code_block {
           partial_body
         }
@@ -27,12 +46,12 @@ class ComponentExample < ExpressTemplates::Component
 
       div(id: output_id, class: 'ae-tab-content'){
         div(class: 'demo-container'){
-          render partial: example_partial_name
+          render(partial: example_partial_path, locals: config[:assigns])
         }
       }
 
       div(id: expected_id, class: 'ae-tab-content',
-                           only_when: config[:expected_output]){
+                           only_when: !!config[:expected_output]){
         div(class: 'demo-container'){
           highlight_code_block {
             config[:expected_output]
@@ -42,9 +61,27 @@ class ComponentExample < ExpressTemplates::Component
     }
   }
 
-  def input_id; "input_#{example_partial_name}"; end
-  def output_id; "output_#{example_partial_name}"; end
-  def expected_id; "expected_#{example_partial_name}"; end
+  def format(value)
+    io = StringIO.new
+    PP.pp value, io
+    io.string.html_safe
+  end
+
+  def usage_id; "#{example_partial_name}_usage"; end
+  def output_id; "#{example_partial_name}_output"; end
+  def expected_id; "#{example_partial_name}_expected"; end
+
+  def example_title
+    if config[:example_name]
+      "Example #{config[:example_name].to_s.titleize}"
+    else
+      "Example"
+    end
+  end
+
+  def example_partial_path
+    "express_ui/uicomponents/examples/#{example_partial_name}"
+  end
 
   def example_partial_name
     s = component_name.dup
@@ -54,7 +91,7 @@ class ComponentExample < ExpressTemplates::Component
 
   def partial_body
     location = File.dirname(__FILE__)
-    File.read(File.join(location, '..', 'views', 'express_ui', 'uicomponents', "_#{example_partial_name}.html.et"))
+    File.read(File.join(location, '..', 'views', 'express_ui', 'uicomponents', 'examples', "_#{example_partial_name}.html.et"))
   end
 
   def component_name

data/app/components/express_ui/panel.rb

@@ -0,0 +1,37 @@
+module ExpressUi
+  class Panel < ExpressTemplates::Container
+
+    has_option :heading, "The panel heading text. Set to false to supress", default: true
+    has_option :footer, "The panel footing text."
+
+    before_build -> {
+      add_class 'panel'
+    }
+
+    contains -> (&block) {
+      div(class: "panel-heading", only_when: !!config[:heading]) {
+        panel_header
+      }
+      div(class: "panel-body") {
+        block.call
+      }
+      div(class: "panel-footer", only_when: !!config[:footer]) {
+        panel_footer
+      }
+    }
+
+    def panel_footer
+      config[:footer]
+    end
+
+    def panel_header
+      case config[:header]
+      when String
+        config[:header]
+      else
+        config[:id].to_s.titleize
+      end
+    end
+
+  end
+end

data/app/components/express_ui/table/express_table.rb

@@ -0,0 +1,6 @@
+module ExpressUi
+  module Table
+    class ExpressTable < ExpressTemplates::Component
+    end
+  end
+end

data/app/components/express_ui/unordered_list.rb

@@ -1,15 +1,29 @@
 module ExpressUi
   class UnorderedList < ExpressTemplates::Container
 
+    include ExpressTemplates::Components::Capabilities::Iteration
+
     tag :ul
 
+    has_option :collection_name, "Optional name for the collection if different from the :id"
+
     contains -> (&block) {
-      collection.each do |item|
-        assigns[:item] = item
-        li {
+      for_all(collection_name) {
+        li(id: item_id, class: singular_item_name) {
           block.call()
         }
-      end
+      }
     }
+
+    def collection_name
+      config[:collection_name] || config[:id]
+    end
+
+    def item_id
+      if item.respond_to?(:id)
+        "#{singular_item_name}:#{item.id}"
+      end
+    end
+
   end
 end

data/app/helpers/express_ui/application_helper.rb

@@ -24,5 +24,12 @@ module ExpressUi
         code_block.strip_heredoc.html_safe
       end
     end
+
+    # This only works for controllers within this engine. (eg test/dummy)
+    # Put this method in your application_helper.rb and
+    # customize it to your purpose.
+    def user_role_classes
+      return "role-user" if defined?(current_user) && current_user.present?
+    end
   end
 end

data/app/models/express_ui/examples/person.rb

@@ -0,0 +1,12 @@
+module ExpressUi
+  module Examples
+    class Person
+      include ActiveModel::Model
+      attr_accessor :id, :name
+
+      def inspect
+        "Person.new(id: #{id}, name: #{name})"
+      end
+    end
+  end
+end

data/app/views/express_ui/uicomponents/_lists.html.et

@@ -1,29 +1,49 @@
 component_docitem(:unordered_list) {
   component_example(:unordered_list,
-    expected_output: <<-HTML
+        assigns: {
+          people: ["Callahan", 'Reyes', 'Morrison', 'Quimby']
+        },
+        expected_output: <<-HTML
   <ul class="unordered-list" id="people">
-    <li>
-      <strong>Foo</strong>
+    <li class="person">
+      <strong>Callahan</strong>
     </li>
-    <li>
-      <strong>Foo</strong>
+    <li class="person">
+      <strong>Reyes</strong>
     </li>
-    <li>
-      <strong>Foo</strong>
+    <li class="person">
+      <strong>Morrison</strong>
+    </li>
+    <li class="person">
+      <strong>Quimby</strong>
     </li>
   </ul>
               HTML
-  )
-}
-
-
+    )
 
-h3 { 'definition_list()' }
+  component_example(:unordered_list, example_name: 'with_ids',
+        assigns: {
+          people: [ExpressUi::Examples::Person.new(id: 1, name: 'Callahan'),
+                   ExpressUi::Examples::Person.new(id: 2, name: 'Reyes'),
+                   ExpressUi::Examples::Person.new(id: 3, name: 'Morrison'),
+                   ExpressUi::Examples::Person.new(id: 4, name: 'Quimby')]
+        },
+        expected_output: <<-HTML
+  <ul class="unordered-list" id="people_with_ids">
+    <li id="person:1" class="person">
+      <strong>Callahan</strong>
+    </li>
+    <li id="person:2" class="person">
+      <strong>Reyes</strong>
+    </li>
+    <li id="person:3" class="person">
+      <strong>Morrison</strong>
+    </li>
+    <li id="person:4" class="person">
+      <strong>Quimby</strong>
+    </li>
+  </ul>
+              HTML
+    )
 
-section {
-  code_demo {
-    %Q{
-       definition_list()
-    }
-  }
-}
+}

data/app/views/express_ui/uicomponents/_panels.html.et

@@ -0,0 +1,14 @@
+component_docitem(:panel,
+  description:
+    %q(
+        A Panel provides a way of boxing up groups of related
+        contents to separate it from the rest of the document.
+
+        Panels usually have a header, content body, and footer.
+        Normal content blocks don't need to be in panels
+        if they only include texts or images. Panels offer styling
+        options.
+      )
+    ) {
+  component_example(:panel)
+}

data/app/views/express_ui/uicomponents/examples/_panel.html.et

@@ -0,0 +1,9 @@
+panel(:a_panel_example) {
+  para %q(Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.)
+  ul {
+    li "one"
+    li "two"
+    li "three"
+  }
+}

data/app/views/express_ui/uicomponents/examples/_unordered_list.html.et

@@ -0,0 +1,5 @@
+unordered_list(:people) {
+  strong {
+    person
+  }
+}

data/app/views/express_ui/uicomponents/examples/_unordered_list_with_ids.html.et

@@ -0,0 +1,5 @@
+unordered_list(:people_with_ids, collection_name: :people) {
+  strong {
+    person.name
+  }
+}

data/app/views/express_ui/uicomponents/index.html.et

@@ -9,49 +9,44 @@ div(class: "ae-template-content-sidebar-fixed") {
 
     div(class: "js-anchorific-content") {
 
-      h2 "Lists" 
+      h2 "Lists"
       render "express_ui/uicomponents/lists"
 
+      h2 "Panels"
+      render "express_ui/uicomponents/panels"
 
-# <!--       <h2>Buttons</h2>
+      h2 "Buttons"
+      # render "express_ui/uicomponents/buttons"
 
-#       render "express_ui/uicomponents/buttons"
+      h2 "Forms"
+      # render "express_ui/uicomponents/forms"
 
-#       <h2>Forms</h2>
-#       render "express_ui/uicomponents/forms"
-#       <h2>Flash Messages</h2>
-#       render "express_ui/uicomponents/flash_message"
+      h2 "Flash Messages"
+      # render "express_ui/uicomponents/flash_message"
 
-#       <h2>Heading</h2>
-#       render "express_ui/uicomponents/heading"
+      h2 "Heading"
+      # render "express_ui/uicomponents/heading"
 
-#       <h2>Icons</h2>
-#       render "express_ui/uicomponents/icons"
+      h2 "Icons"
+      # render "express_ui/uicomponents/icons"
 
-#       <h2>Layout</h2>
-#       render "express_ui/uicomponents/layout"
+      h2 "Layout"
+      # render "express_ui/uicomponents/layout"
 
-#       <h2>Nav</h2>
-#       render "express_ui/uicomponents/nav"
+      h2 "Nav"
+      # render "express_ui/uicomponents/nav"
 
-#       <h2>Panel</h2>
-#       render "express_ui/uicomponents/panel"
+      h2 "Popups"
+      # render "express_ui/uicomponents/popup"
 
-#       <h2>Popup</h2>
-#       render "express_ui/uicomponents/popup"
+      h2 "Tables"
+      # render "express_ui/uicomponents/table"
 
-#       <h2>Tables</h2>
-#       render "express_ui/uicomponents/table"
-#       <h2>Widget Box</h2>
+      h2 "Templates"
+      # render "express_ui/templates/templates"
 
-#       render "express_ui/uicomponents/widget_box"
-
-#       <h2>Templates</h2>
-#       render "express_ui/templates/templates"
-
-#       <h2>Pages</h2>
-#       render "express_ui/uicomponents/pages"
-#  -->
+      h2 "Pages"
+      # render "express_ui/uicomponents/pages"
     }
   }
 }

data/app/views/layouts/express_ui/_head.html.erb

@@ -5,9 +5,11 @@
   <head>
     <meta charset="utf-8"/>
     <meta content="AppExpress" name="author"/>
-    <title><%= @page_title || (page_title rescue "No Page Title Set") %></title>
+    <title><%= @page_title || content_for(:page_title) || (page_title rescue "No Page Title Set") %></title>
     <%= csrf_meta_tags %>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <%= stylesheet_link_tag 'express_ui/styleguide', :media => "all" %>
+    <%= stylesheet_link_tag 'application', :media => "all" %>
     <%= javascript_include_tag 'express_ui/application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>

data/app/views/layouts/express_ui/full_width.html.erb

@@ -1,10 +1,10 @@
 <html>
   <%= render partial: 'layouts/express_ui/head' %>
-  <body>
+  <body class="<%= controller_name %> <%= controller_name%>-<%= params[:action] %> <%= user_role_classes if defined?(user_role_classes) %>">
     <header>
       <%= content_for(:header) || render(partial: 'shared/header') rescue nil %>
     </header>
-    <div class=".ae-template-full-width">
+    <div class="ae-template-full-width">
       <div class="ae-container">
         <div class="ae-content">
           <%= yield %>

data/app/views/layouts/express_ui/half_width.html.erb

@@ -1,10 +1,10 @@
 <html>
   <%= render partial: 'layouts/express_ui/head' %>
-  <body>
+  <body class="<%= controller_name %> <%= controller_name%>-<%= params[:action] %> <%= user_role_classes if defined?(user_role_classes) %>">
     <header>
       <%= content_for(:header) || render(partial: 'shared/header') rescue nil %>
     </header>
-    <div class=".ae-template-full-width">
+    <div class="ae-template-half-width">
       <div class="ae-container">
         <div class="ae-content">
           <%= yield %>

data/app/views/layouts/express_ui/master_detail.html.html.erb

@@ -1,10 +1,10 @@
 <html>
   <%= render partial: 'layouts/express_ui/head' %>
-  <body>
+  <body class="<%= controller_name %> <%= controller_name%>-<%= params[:action] %> <%= user_role_classes if defined?(user_role_classes) %>">
     <header>
       <%= content_for(:header) || render(partial: 'shared/header') rescue nil %>
     </header>
-    <div class=".ae-template-master-detail">
+    <div class="ae-template-master-detail">
       <div class="ae-container">
         <div class="ae-content">
           <%= yield %>

data/app/views/layouts/express_ui/master_detail_fixed.html.erb

@@ -1,10 +1,10 @@
 <html>
   <%= render partial: 'layouts/express_ui/head' %>
-  <body>
+  <body class="<%= controller_name %> <%= controller_name%>-<%= params[:action] %> <%= user_role_classes if defined?(user_role_classes) %>">
     <header>
       <%= content_for(:header) || render(partial: 'shared/header') rescue nil %>
     </header>
-    <div class=".ae-template-master-detail-fixed">
+    <div class="ae-template-master-detail-fixed">
       <div class="ae-container">
         <div class="ae-content">
           <%= yield %>

data/lib/express_ui/engine.rb

@@ -32,6 +32,7 @@ module ExpressUi
       )
 
       # Load all component definitions.
+      # TODO: does this really belong here?
       Dir.glob(File.expand_path('../../../app/components/**/*.rb', __FILE__)).each do |component_file|
         component_name = File.basename(component_file).split('.').first
         part_to_remove = File.expand_path('../../../app/components/',__FILE__)

data/lib/express_ui/version.rb

@@ -1,3 +1,3 @@
 module ExpressUi
-  VERSION = '0.1.2'
+  VERSION = '0.1.3'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: express_ui
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Steven Talcott Smith
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-04-07 00:00:00.000000000 Z
+date: 2017-04-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: express_templates
@@ -18,14 +18,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.11.17
+        version: 0.11.18
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.11.17
+        version: 0.11.18
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
@@ -82,20 +82,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '4.7'
-- !ruby/object:Gem::Dependency
-  name: pry
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
 description: User interface library for AppExpress components (https://appexpress.io)
 email:
 - steve@aelogica.com
@@ -144,6 +130,7 @@ files:
 - app/assets/stylesheets/express_ui/molecules/_nav.sass
 - app/assets/stylesheets/express_ui/molecules/_tables.sass
 - app/assets/stylesheets/express_ui/molecules/_tabs.sass
+- app/assets/stylesheets/express_ui/organisms/_footer.sass
 - app/assets/stylesheets/express_ui/organisms/_header.sass
 - app/assets/stylesheets/express_ui/organisms/_sidebar.sass
 - app/assets/stylesheets/express_ui/style.sass
@@ -155,6 +142,8 @@ files:
 - app/components/code_demo.rb
 - app/components/component_docitem.rb
 - app/components/component_example.rb
+- app/components/express_ui/panel.rb
+- app/components/express_ui/table/express_table.rb
 - app/components/express_ui/unordered_list.rb
 - app/controllers/express_ui/about_controller.rb
 - app/controllers/express_ui/application_controller.rb
@@ -166,6 +155,7 @@ files:
 - app/jobs/express_ui/application_job.rb
 - app/mailers/express_ui/application_mailer.rb
 - app/models/express_ui/application_record.rb
+- app/models/express_ui/examples/person.rb
 - app/views/express_ui/atoms/_animations.html.erb
 - app/views/express_ui/atoms/_buttons.html.erb
 - app/views/express_ui/atoms/_headings.html.erb
@@ -217,13 +207,15 @@ files:
 - app/views/express_ui/uicomponents/_lists.html.et
 - app/views/express_ui/uicomponents/_nav.html.et
 - app/views/express_ui/uicomponents/_pages.html.erb
-- app/views/express_ui/uicomponents/_panel.html.et
+- app/views/express_ui/uicomponents/_panels.html.et
 - app/views/express_ui/uicomponents/_popup.html.et
 - app/views/express_ui/uicomponents/_register.html.erb
 - app/views/express_ui/uicomponents/_sidebar.html.et
 - app/views/express_ui/uicomponents/_table.html.et
-- app/views/express_ui/uicomponents/_unordered_list.html.et
 - app/views/express_ui/uicomponents/_widget_box.html.et
+- app/views/express_ui/uicomponents/examples/_panel.html.et
+- app/views/express_ui/uicomponents/examples/_unordered_list.html.et
+- app/views/express_ui/uicomponents/examples/_unordered_list_with_ids.html.et
 - app/views/express_ui/uicomponents/index.html.et
 - app/views/layouts/express_ui/_head.html.erb
 - app/views/layouts/express_ui/content_and_sidebar.html.erb
@@ -261,7 +253,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.2
+rubygems_version: 2.4.7
 signing_key: 
 specification_version: 4
 summary: User interface library for AppExpress components

data/app/views/express_ui/uicomponents/_panel.html.et

@@ -1,33 +0,0 @@
-section {
-  para {
-    "A panel is a way of boxing up groups of related contents to separate it from the rest of the document. Panels usually have a header, content body, and footer. Normal content blocks don't need to be in panels if all they are are texts or images. Panels have styling options. "
-  }
-
-  para {
-    'This outlines the basic structure of a panel'
-  }
-
-  highlight_code_block {
-    %Q{
-      <div class=\"panel\">
-        <div class=\"panel-heading\">
-          <h2>Heading</h2>
-        </div>
-
-        <div class=\"panel-body\">
-          {Content}
-        </div>
-
-        <div class=\"panel-footer\"></div>
-      </div>
-    }
-  }
-
-
-  code_demo {
-    %Q{
-      pane(){
-      }
-    }
-  }
-}

data/app/views/express_ui/uicomponents/_unordered_list.html.et

@@ -1,3 +0,0 @@
-unordered_list(:people) {
-  strong { 'Foo' }
-}