update em, fieldset, figure, footer, header, heading, hr, icon, iframe, img, input, ins, kbd, label, legen, link, ul, ol, li components and specs

Author: Nils Henning

.byebug_history

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

.gitignore

@@ -21,5 +21,6 @@ builder/tmp/
 builder/public/packs
 .idea/
 .vscode
+.byebug_history
 
 /coverage

lib/matestack/ui/core/components.rb

@@ -51,10 +51,26 @@ def self.require_core_component(name)
   require_core_component "div"
   require_core_component "dl"
   require_core_component "dt"
+  require_core_component "em"
+  require_core_component "fieldset"
+  require_core_component "figure"
+  require_core_component "footer"
+  require_core_component "header"
   require_core_component "heading"
+  require_core_component "hr"
+  require_core_component "icon"
+  require_core_component "iframe"
+  require_core_component "img"
+  require_core_component "input"
+  require_core_component "ins"
+  require_core_component "kbd"
+  require_core_component "label"
+  require_core_component "legend"
+  require_core_component "li"
   require_core_component "link"
   require_core_component "main"
   require_core_component "nav"
+  require_core_component "ol"
   require_core_component "paragraph"
   require_core_component "plain"
   require_core_component "span"
@@ -67,6 +83,7 @@ def self.require_core_component(name)
   require_core_component "thead"
   require_core_component "tr"
   require_core_component "transition"
+  require_core_component "ul"
   require_core_component "form"
   require_core_component "form/input"
   require_core_component "form/select"
@@ -100,10 +117,27 @@ def self.require_core_component(name)
   div: Matestack::Ui::Core::Div::Div,
   dl: Matestack::Ui::Core::Dl::Dl,
   dt: Matestack::Ui::Core::Dt::Dt,
+  em: Matestack::Ui::Core::Em::Em,
+  fieldset: Matestack::Ui::Core::Fieldset::Fieldset,
+  figure: Matestack::Ui::Core::Figure::Figure,
+  footer: Matestack::Ui::Core::Footer::Footer,
+  header: Matestack::Ui::Core::Header::Header,
   heading: Matestack::Ui::Core::Heading::Heading,
+  hr: Matestack::Ui::Core::Hr::Hr,
+  icon: Matestack::Ui::Core::Icon::Icon,
+  italic: Matestack::Ui::Core::Icon::Icon, # alias icon as italic
+  iframe: Matestack::Ui::Core::Iframe::Iframe,
+  img: Matestack::Ui::Core::Img::Img,
+  input: Matestack::Ui::Core::Input::Input,
+  ins: Matestack::Ui::Core::Ins::Ins,
+  kbd: Matestack::Ui::Core::Kbd::Kbd,
+  label: Matestack::Ui::Core::Label::Label,
+  legend: Matestack::Ui::Core::Legend::Legend,
+  li: Matestack::Ui::Core::Li::Li,
   link: Matestack::Ui::Core::Link::Link,
   main: Matestack::Ui::Core::Main::Main,
   nav: Matestack::Ui::Core::Nav::Nav,
+  ol: Matestack::Ui::Core::Ol::Ol,
   paragraph: Matestack::Ui::Core::Paragraph::Paragraph,
   plain: Matestack::Ui::Core::Plain::Plain,
   span: Matestack::Ui::Core::Span::Span,
@@ -116,6 +150,7 @@ def self.require_core_component(name)
   th: Matestack::Ui::Core::Th::Th,
   thead: Matestack::Ui::Core::Thead::Thead,
   tr: Matestack::Ui::Core::Tr::Tr,
+  ul: Matestack::Ui::Core::Ul::Ul,
   form: Matestack::Ui::Core::Form::Form,
   form_input: Matestack::Ui::Core::Form::Input::Input,
   form_select: Matestack::Ui::Core::Form::Select::Select,

spec/0.8/components/em_spec.rb

@@ -7,54 +7,42 @@
   it 'Example 1 - yield, no options[:text]' do
     class ExamplePage < Matestack::Ui::Page
       def response
-        components do
-          # simple em tag
-          em do
-            plain 'Emphasized text'
-          end
-
-          # enhanced em tag
-          em id: 'my-id', class: 'my-class' do
-            plain 'Enhanced emphasized text'
-          end
+        # simple em tag
+        em do
+          plain 'Emphasized text'
+        end
+        # enhanced em tag
+        em id: 'my-id', class: 'my-class' do
+          plain 'Enhanced emphasized text'
         end
       end
     end
 
     visit '/example'
-
     static_output = page.html
-
     expected_static_output = <<~HTML
       <em>Emphasized text</em>
       <em id="my-id" class="my-class">Enhanced emphasized text</em>
     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 do
-          # simple em
-          em text: 'Emphasized text'
-
-          # enhanced em
-          em id: 'my-id', class: 'my-class', text: 'Enhanced emphasized text'
-        end
+        # simple em
+        em text: 'Emphasized text'
+        # enhanced em
+        em id: 'my-id', class: 'my-class', text: 'Enhanced emphasized text'
       end
     end
 
     visit '/example'
-
     static_output = page.html
-
     expected_static_output = <<~HTML
       <em>Emphasized text</em>
       <em id="my-id" class="my-class">Enhanced emphasized text</em>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
 end

spec/0.8/components/fieldset_spec.rb

@@ -5,47 +5,38 @@
   it 'fieldset with 1 input and legend' do
     class ExamplePage < Matestack::Ui::Page
       def response
-        components {
-          fieldset do
-            legend text: 'input legend'
-            input
-          end
-          
-          # advanced
-          fieldset class: 'foo', id: 'world' do
-            legend id: 'bar', class: 'hello', text: 'input legend'
-            input
-          end
-          
-          # with disabled 
-          fieldset disabled: true do
-            legend text: 'input legend'
-            input
-          end
-        }
+        fieldset do
+          legend text: 'input legend'
+          input
+        end
+        # advanced
+        fieldset class: 'foo', id: 'world' do
+          legend id: 'bar', class: 'hello', text: 'input legend'
+          input
+        end
+        # with disabled 
+        fieldset disabled: true do
+          legend text: 'input legend'
+          input
+        end
       end
     end
 
     visit '/example'
-
     static_output = page.html
-    
     expected_html_output = <<~HTML
       <fieldset>
         <legend>input legend</legend>
         <input/>
       </fieldset>
-      
       <fieldset id="world" class="foo">
       <legend id="bar" class="hello">input legend</legend>
       <input/>
       </fieldset>
-      
       <fieldset disabled="disabled">
         <legend>input legend</legend>
         <input/>
       </fieldset>
-
     HTML
     expect(stripped(static_output)).to include(stripped(expected_html_output))
   end

spec/0.8/components/figure_spec.rb

@@ -7,16 +7,19 @@
 
     class ExamplePage < Matestack::Ui::Page
       def response
-        components {
-          figure id: "my-id", class: "my-class" do
-            img path: 'matestack-logo.png', width: 500, height: 300, alt: "logo"
-          end
-        }
+        figure id: "my-id", class: "my-class" do
+          img path: 'matestack-logo.png', width: 500, height: 300, alt: "logo"
+        end
       end
     end
 
     visit '/example'
-
-    expect(page).to have_xpath("//figure[@id='my-id' and @class='my-class']/img[contains(@src,'matestack-logo') and @alt='logo' and @width='500' and @height='300']")
+    static_output = page.html
+    expected_html_output = <<~HTML
+      <figure id="my-id" class="my-class">
+        <img alt="logo" height="300" src="#{ActionController::Base.helpers.asset_path('matestack-logo.png')}" width="500" />
+      </figure>
+    HTML
+    expect(stripped(static_output)).to include(stripped(expected_html_output))
   end
 end

spec/0.8/components/footer_spec.rb

@@ -4,36 +4,27 @@
 describe 'Footer Component', type: :feature, js: true do
 
   it 'Example 1' do
-
     class ExamplePage < Matestack::Ui::Page
-
       def response
-        components {
-          # simple footer tag
-          footer do
-            plain 'hello world!'
-          end
-
-          # advanced footer tag
-          footer id: 'my-unique-footer', class: 'awesome-footer' do
-            paragraph class: 'footer-text', text: 'hello world!'
-          end
-        }
+        # simple footer tag
+        footer do
+          plain 'hello world!'
+        end
+        # advanced footer tag
+        footer id: 'my-unique-footer', class: 'awesome-footer' do
+          paragraph class: 'footer-text', text: 'hello world!'
+        end
       end
-
     end
 
     visit "/example"
-
     static_output = page.html
-
     expected_static_output = <<~HTML
     <footer>hello world!</footer>
     <footer id="my-unique-footer" class="awesome-footer">
       <p class="footer-text">hello world!</p>
     </footer>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end
 

spec/0.8/components/header_spec.rb

@@ -4,29 +4,21 @@
 describe "Header Component", type: :feature, js: true do
 
   it "Example 1" do
-
     class ExamplePage < Matestack::Ui::Page
-
       def response
-        components {
-          header id: "my-id", class: "my-class" do
-            plain "Hello World" #optional content
-          end
-        }
+        header 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
-    <header id="my-id" class="my-class">
-      Hello World
-    </header>
+      <header id="my-id" class="my-class">
+        Hello World
+      </header>
     HTML
-
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end