update span, main, map, mark, meter, noscript, object, optgroup, option, output, paragraph, param, picture, plain, pre, progress, q, rp, rt, ruby, s, samp, section, small, strong, sub, sup, template, time, transition components and specs

Author: Nils Henning

.byebug_history

@@ -1,2 +1,4 @@
 continue
 static_output
+continue
+static_output

app/concepts/matestack/ui/core/pg/pg.haml

@@ -69,18 +69,43 @@ def self.require_core_component(name)
   require_core_component "li"
   require_core_component "link"
   require_core_component "main"
+  require_core_component "map"
+  require_core_component "mark"
+  require_core_component "meter"
   require_core_component "nav"
+  require_core_component "noscript"
+  require_core_component "object"
   require_core_component "ol"
+  require_core_component "optgroup"
+  require_core_component "option"
+  require_core_component "output"
   require_core_component "paragraph"
+  require_core_component "param"
+  require_core_component "picture"
   require_core_component "plain"
+  require_core_component "pre"
+  require_core_component "progress"
+  require_core_component "q"
+  require_core_component "rp"
+  require_core_component "rt"
+  require_core_component "ruby"
+  require_core_component "s"
+  require_core_component "samp"
+  require_core_component "section"
+  require_core_component "small"
   require_core_component "span"
+  require_core_component "strong"
+  require_core_component "sub"
   require_core_component "summary"
+  require_core_component "sup"
   require_core_component "table"
   require_core_component "tbody"
   require_core_component "td"
+  require_core_component "template"
   require_core_component "tfoot"
   require_core_component "th"
   require_core_component "thead"
+  require_core_component "time"
   require_core_component "tr"
   require_core_component "transition"
   require_core_component "ul"
@@ -136,20 +161,46 @@ def self.require_core_component(name)
   li: Matestack::Ui::Core::Li::Li,
   link: Matestack::Ui::Core::Link::Link,
   main: Matestack::Ui::Core::Main::Main,
+  map: Matestack::Ui::Core::Map::Map,
+  mark: Matestack::Ui::Core::Mark::Mark,
+  meter: Matestack::Ui::Core::Meter::Meter,
   nav: Matestack::Ui::Core::Nav::Nav,
+  noscript: Matestack::Ui::Core::Noscript::Noscript,
+  object: Matestack::Ui::Core::Object::Object,
   ol: Matestack::Ui::Core::Ol::Ol,
+  optgroup: Matestack::Ui::Core::Optgroup::Optgroup,
+  option: Matestack::Ui::Core::Option::Option,
+  output: Matestack::Ui::Core::Output::Output,
   paragraph: Matestack::Ui::Core::Paragraph::Paragraph,
+  pg: Matestack::Ui::Core::Paragraph::Paragraph, # alias paragraph as pg
+  param: Matestack::Ui::Core::Param::Param,
+  picture: Matestack::Ui::Core::Picture::Picture,
   plain: Matestack::Ui::Core::Plain::Plain,
+  pre: Matestack::Ui::Core::Pre::Pre,
+  progress: Matestack::Ui::Core::Progress::Progress,
+  q: Matestack::Ui::Core::Q::Q,
+  rp: Matestack::Ui::Core::Rp::Rp,
+  rt: Matestack::Ui::Core::Rt::Rt,
+  ruby: Matestack::Ui::Core::Ruby::Ruby,
+  s: Matestack::Ui::Core::S::S,
+  samp: Matestack::Ui::Core::Samp::Samp,
+  section: Matestack::Ui::Core::Section::Section,
+  small: Matestack::Ui::Core::Small::Small,
   span: Matestack::Ui::Core::Span::Span,
+  strong: Matestack::Ui::Core::Strong::Strong,
+  sub: Matestack::Ui::Core::Sub::Sub,
   summary: Matestack::Ui::Core::Summary::Summary,
-  transition: Matestack::Ui::Core::Transition::Transition,
+  sup: Matestack::Ui::Core::Sup::Sup,
   table: Matestack::Ui::Core::Table::Table,
   tbody: Matestack::Ui::Core::Tbody::Tbody,
   td: Matestack::Ui::Core::Td::Td,
+  template: Matestack::Ui::Core::Template::Template,
   tfoot: Matestack::Ui::Core::Tfoot::Tfoot,
   th: Matestack::Ui::Core::Th::Th,
   thead: Matestack::Ui::Core::Thead::Thead,
+  time: Matestack::Ui::Core::Time::Time,
   tr: Matestack::Ui::Core::Tr::Tr,
+  transition: Matestack::Ui::Core::Transition::Transition,
   ul: Matestack::Ui::Core::Ul::Ul,
   form: Matestack::Ui::Core::Form::Form,
   form_input: Matestack::Ui::Core::Form::Input::Input,

app/concepts/matestack/ui/core/pg/pg.rb

@@ -4,62 +4,44 @@
 describe 'Span Component', type: :feature, js: true do
 
   it 'Example 1 - yield, no options[:text]' do
-
     class ExamplePage < Matestack::Ui::Page
-
       def response
-        components {
-          # simple span
-          span do
-            plain 'I am simple'
-          end
-
-          # enhanced span
-          span id: 'my-id', class: 'my-class' do
-            plain 'I am enhanced'
-          end
-        }
+        # simple span
+        span do
+          plain 'I am simple'
+        end
+        # enhanced span
+        span id: 'my-id', class: 'my-class' do
+          plain 'I am enhanced'
+        end
       end
-
     end
 
     visit '/example'
-
     static_output = page.html
-
     expected_static_output = <<~HTML
-    <span>I am simple</span>
-    <span id="my-id" class="my-class">I am enhanced</span>
+      <span>I am simple</span>
+      <span id="my-id" class="my-class">I am enhanced</span>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
 
   it 'Example 2 - render options[:text]' do
-
     class ExamplePage < Matestack::Ui::Page
-
       def response
-        components {
-          # simple span
-          span text: 'I am simple'
-
-          # enhanced span
-          span id: 'my-id', class: 'my-class',text: 'I am enhanced'
-        }
+        # simple span
+        span text: 'I am simple'
+        # enhanced span
+        span id: 'my-id', class: 'my-class',text: 'I am enhanced'
       end
-
     end
 
     visit '/example'
-
     static_output = page.html
-
     expected_static_output = <<~HTML
-    <span>I am simple</span>
-    <span id="my-id" class="my-class">I am enhanced</span>
+      <span>I am simple</span>
+      <span id="my-id" class="my-class">I am enhanced</span>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
 

lib/matestack/ui/core/components.rb

@@ -4,29 +4,21 @@
 describe 'Main Component', type: :feature, js: true do
 
   it 'Example 1' do
-
     class ExamplePage < Matestack::Ui::Page
-
       def response
-        components {
-          main id: 'my-id', class: 'my-class' do
-            plain 'Hello World' #optional content
-          end
-        }
+        main id: 'my-id', class: 'my-class' do
+          plain 'Hello World' #optional content
+        end
       end
-
     end
 
     visit '/example'
-
     static_output = page.html
-
     expected_static_output = <<~HTML
-    <main id="my-id" class="my-class">
-      Hello World
-    </main>
+      <main id="my-id" class="my-class">
+        Hello World
+      </main>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
 

spec/0.7/components/span_spec.rb

@@ -4,33 +4,26 @@
 describe 'Map Component', type: :feature, js: true do
 
   it 'Renders an image and a map containing areas on the page' do
-
     class ExamplePage < Matestack::Ui::Page
       def response
-        components {
-          img path: 'matestack-logo.png', width: 500, height: 300, alt: "otherlogo",  usemap: "#newmap"
-
-          map name: 'newmap' do
-            area shape: 'rect', coords: [0,0,100,100], href: 'first.htm', alt: 'First'
-            area shape: 'rect', coords: [100,100,200,200], href: 'second.htm', alt: 'Second'
-            area shape: 'rect', coords: [200,200,300,300], href: 'third.htm', alt: 'Third'
-          end
-        }
+        img path: 'matestack-logo.png', width: 500, height: 300, alt: "otherlogo",  usemap: "#newmap"
+        map name: 'newmap' do
+          area shape: 'rect', coords: [0,0,100,100], href: 'first.htm', alt: 'First'
+          area shape: 'rect', coords: [100,100,200,200], href: 'second.htm', alt: 'Second'
+          area shape: 'rect', coords: [200,200,300,300], href: 'third.htm', alt: 'Third'
+        end
       end
     end
 
     visit '/example'
-
     static_output = page.html
-
     expected_static_output = <<~HTML
-    <map name="newmap">
-       <area alt="First" coords="0,0,100,100" href="first.htm" shape="rect"/>
-       <area alt="Second" coords="100,100,200,200" href="second.htm" shape="rect"/>
-       <area alt="Third" coords="200,200,300,300" href="third.htm" shape="rect"/>
-    </map>
+      <map name="newmap">
+        <area alt="First" coords="0,0,100,100" href="first.htm" shape="rect"/>
+        <area alt="Second" coords="100,100,200,200" href="second.htm" shape="rect"/>
+        <area alt="Third" coords="200,200,300,300" href="third.htm" shape="rect"/>
+      </map>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
     expect(page).to have_xpath("//img[contains(@src,'matestack-logo') and @alt='otherlogo' and @width='500' and @height='300' and @usemap='\#newmap']")
   end

spec/0.8/components/main_spec.rb

@@ -2,30 +2,26 @@
 include Utils
 
 describe 'mark Component', type: :feature, js: true do
+
   it 'Renders a simple and enhanced mark tag on a page' do
     class ExamplePage < Matestack::Ui::Page
       def response
-        components {
-          # simple mark
-          mark text: 'Simple mark Tag'
-
-          # enhanced mark
-          mark id: 'my-id', class: 'my-class' do
-            plain 'Enhanced mark Tag'
-          end
-        }
+        # simple mark
+        mark text: 'Simple mark Tag'
+        # enhanced mark
+        mark id: 'my-id', class: 'my-class' do
+          plain 'Enhanced mark Tag'
+        end
       end
     end
 
     visit '/example'
-
     static_output = page.html
-
     expected_static_output = <<~HTML
       <mark>Simple mark Tag</mark>
       <mark id="my-id" class="my-class">Enhanced mark Tag</mark>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
+  
 end

spec/0.8/components/map_spec.rb

@@ -4,39 +4,29 @@
 describe 'Meter Component', type: :feature, js: true do
 
   it 'Renders an meter tag on the page' do
-
     class ExamplePage < Matestack::Ui::Page
       def response
-        components {
-          #label for: 'meter_id'
-          meter id: 'meter_id', value: 0.6
-
-          #label for: 'meter'
-          meter id: 'meter', min: 0, max: 10, value: 6 do
-            plain '6 out of 10. 60%.'
-          end
-          
-          meter id: 'meter', low: 2, high: 8, optimum: 6, min: 0, max: 10, value: 6 do
-            plain '6 out of 10. 60%.'
-          end
-        }
+        #label for: 'meter_id'
+        meter id: 'meter_id', value: 0.6
+        #label for: 'meter'
+        meter id: 'meter', min: 0, max: 10, value: 6 do
+          plain '6 out of 10. 60%.'
+        end
+        meter id: 'meter', low: 2, high: 8, optimum: 6, min: 0, max: 10, value: 6 do
+          plain '6 out of 10. 60%.'
+        end
       end
     end
 
     visit '/example'
-
     output_html = page.html
-
     expected_output = <<~HTML 
       <meter id="meter_id" value="0.6"></meter>
-      
       <meter id="meter" max="10" min="0" value="6">6 out of 10. 60%.</meter>
-
       <meter high="8" id="meter" low="2" max="10" min="0" optimum="6" value="6">
         6 out of 10. 60%.
       </meter>
     HTML
-
     expect(stripped(output_html)).to include(stripped(expected_output))
   end
 end

spec/0.8/components/mark_spec.rb

@@ -4,32 +4,23 @@
 describe 'Noscript Component', type: :feature, js: true do
 
   it 'Example 1' do
-
     class ExamplePage < Matestack::Ui::Page
-
       def response
-        components {
-          # simple noscript
-          noscript text: 'I am simple'
-
-          # enhanced noscript
-          noscript id: 'my-id', class: 'my-class' do
-            plain 'I am enhanced'
-          end
-        }
+        # simple noscript
+        noscript text: 'I am simple'
+        # enhanced noscript
+        noscript id: 'my-id', class: 'my-class' do
+          plain 'I am enhanced'
+        end
       end
-
     end
 
     visit '/example'
-
     static_output = page.html
-
     expected_static_output = <<~HTML
-    <noscript>I am simple</noscript>
-    <noscript id="my-id" class="my-class">I am enhanced</noscript>
+      <noscript>I am simple</noscript>
+      <noscript id="my-id" class="my-class">I am enhanced</noscript>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end