Merge pull request #253 from bdlb77/add_fieldset_component

Add fieldset component

Author: jonasjabari

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

@@ -0,0 +1,5 @@
+%fieldset{@tag_attributes}
+  -if options[:text].nil? && block_given?
+    = yield
+  - else 
+    = options[:text]

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

@@ -0,0 +1,9 @@
+module Matestack::Ui::Core::Fieldset
+  class Fieldset < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        disabled: options[:disabled]
+      })
+    end
+  end
+end

docs/components/fieldset.md

@@ -0,0 +1,81 @@
+# matestack core component: Fieldset
+
+Show [specs](/spec/usage/components/fieldset_spec.rb)
+
+Use Fieldset to group several `<input>` and `<label>` tags.
+
+
+## Parameters
+
+`<fieldset>` can take two optional configuration params and optional content.
+
+
+### Optional configuration
+
+#### id (optional)
+
+Expects a string with all ids the details tag should have.
+
+#### class (optional)
+
+Expects a string with all classes the details tag should have.
+
+#### Disabled (optional)
+
+Set `disabled` attribute on `<fieldset>` to disable all controls inside the `<fieldset>`
+
+## Example 1
+
+```ruby
+ fieldset do
+    legend text: 'Your Inputs for Personal details'
+    label text: 'Personal Detail'
+    input
+  end
+```
+
+```html
+<fieldset>
+  <legend>Your Inputs for Personal details</legend>
+  <label>Personal Detail</label>
+  <input>
+</fieldset>
+```
+
+## Example 2
+
+```ruby
+fieldset id: 'foo', class: 'bar' do
+  legend id: 'baz', text: 'Your Inputs for Personal details'
+  label text: 'Personal Detail'
+  input 
+end
+```
+
+```html
+<fieldset id="foo" class="bar">
+  <legend id="baz">Your Inputs for Personal details</legend>
+  <label>Personal Detail</label>
+  <input>
+</fieldset>
+```
+
+
+### Example 3
+
+**With Disabled Attribute**
+
+```ruby 
+fieldset disabled: true do
+  legend text: 'input legend'
+  input
+end
+```
+
+```html 
+<fieldset disabled="disabled">
+  <legend>input legend</legend>
+  <input>
+</fieldset>
+```
+

spec/usage/components/fieldset_spec.rb

@@ -0,0 +1,52 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Fieldset Component', type: :feature, js: true do 
+  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
+        }
+      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
+end