add optgroup matestack core component

Closes #202

Author: marcoroth

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

@@ -0,0 +1,3 @@
+%optgroup{@tag_attributes}
+  - if block_given?
+    = yield

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

@@ -0,0 +1,10 @@
+module Matestack::Ui::Core::Optgroup
+  class Optgroup < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!(
+        disabled: options[:disabled] ||= nil,
+        label: options[:label]
+      )
+    end
+  end
+end

docs/components/README.md

@@ -50,6 +50,7 @@ You can build your [own components](/docs/extend/README.md) as well, both static
 - [nav](/docs/components/nav.md)
 - [noscript](/docs/components/noscript.md)
 - [object](/docs/components/object.md)
+- [optgroup](/docs/components/optgroup.md)
 - [option](/docs/components/option.md)
 - [output](/docs/components/output.md)
 - [paragraph](/docs/components/paragraph.md)

docs/components/optgroup.md

@@ -0,0 +1,39 @@
+# matestack core component: Optgroup
+
+Show [specs](/spec/usage/components/optgroup_spec.rb)
+
+The HTML `<optgroup>` tag implemented in ruby.
+
+## Parameters
+
+This component can take 4 optional configuration params and yield the passed content.
+
+#### # id (optional)
+Expects a string with all ids the `<optgroup>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<optgroup>` should have.
+
+#### # disabled (optional)
+Specifies that the `<optgroup>` should be disabled.
+
+#### # label (optional)
+Specifies a label for the `<optgroup>`.
+
+## Example: Yield a given block
+
+```ruby
+optgroup label: 'Swedish Cars' do
+  option text: 'Volvo', value: 'volvo'
+  option text: 'Saab', value: 'saab'
+end
+```
+
+returns
+
+```html
+<optgroup label="Swedish Cars">
+  <option value="volvo">Volvo</option>
+  <option value="saab">Saab</option>
+</optgroup>
+```

spec/usage/components/optgroup_spec.rb

@@ -0,0 +1,89 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Optgroup component', type: :feature, js: true do
+  it 'Renders a optgroup tag on a page' do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          # Just the tag
+          optgroup
+
+          # The tag with a label
+          optgroup label: 'Optgroup'
+
+          # Optgroup tag without label but sub-components
+          optgroup do
+            option text: 'Option A'
+            option text: 'Option B'
+            option text: 'Option C'
+          end
+
+          # Simple optgroup
+          optgroup label: 'Simple Group' do
+            option text: 'Option D'
+            option text: 'Option E'
+            option text: 'Option F'
+          end
+
+          # Enhanced optgroups
+          optgroup label: 'Enabled Group 1', class: 'enabled' do
+            option text: 'Option G'
+            option text: 'Option H'
+            option text: 'Option I'
+          end
+
+          optgroup label: 'Disabled Group 2', disabled: true, id: 'disabled' do
+            option text: 'Option J'
+            option text: 'Option K'
+            option text: 'Option L'
+          end
+
+          optgroup label: 'Not Disabled Group 3', disabled: false, class: 'group', id: 'not-disabled' do
+            option text: 'Option M'
+            option text: 'Option N'
+            option text: 'Option O'
+          end
+        }
+      end
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    File.write("static.html", static_output)
+
+    expected_static_output = <<~HTML
+      <optgroup></optgroup>
+      <optgroup label="Optgroup"></optgroup>
+      <optgroup>
+        <option>Option A</option>
+        <option>Option B</option>
+        <option>Option C</option>
+      </optgroup>
+      <optgroup label="Simple Group">
+        <option>Option D</option>
+        <option>Option E</option>
+        <option>Option F</option>
+      </optgroup>
+      <optgroup label="Enabled Group 1" class="enabled">
+        <option>Option G</option>
+        <option>Option H</option>
+        <option>Option I</option>
+      </optgroup>
+      <optgroup disabled="disabled" id="disabled" label="Disabled Group 2">
+        <option>Option J</option>
+        <option>Option K</option>
+        <option>Option L</option>
+      </optgroup>
+      <optgroup id="not-disabled" label="Not Disabled Group 3" class="group">
+        <option>Option M</option>
+        <option>Option N</option>
+        <option>Option O</option>
+      </optgroup>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+end