add option matestack core component

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

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

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

@@ -0,0 +1,12 @@
+module Matestack::Ui::Core::Option
+  class Option < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!(
+        disabled: options[:disabled] ||= nil,
+        selected: options[:selected] ||= nil,
+        label: options[:label],
+        value: options[:value]
+      )
+    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)
+- [option](/docs/components/option.md)
 - [output](/docs/components/output.md)
 - [paragraph](/docs/components/paragraph.md)
 - [param](/docs/components/param.md)

docs/components/option.md

@@ -0,0 +1,83 @@
+# matestack core component: Option
+
+Show [specs](/spec/usage/components/option_spec.rb)
+
+The HTML `<option>` tag implemented in ruby.
+
+## Parameters
+
+This component can take 7 optional configuration params and either yield content or display what gets passed to the `text` configuration param.
+
+#### # id (optional)
+Expects a string with all ids the `<option>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<option>` should have.
+
+#### # disabled (optional)
+Specifies that the `<option>` should be disabled.
+
+#### # label (optional)
+Specifies a shorter label for the `<option>`.
+
+#### # text (optional)
+Specifies the text the `<option>` should contain.
+
+#### # selected (optional)
+Specifies that the `<option>` should be pre-selected when the page loads.
+
+#### # value (optional)
+Specifies the value to be sent to a server.
+
+
+## Example 1: Render `options[:text]` param
+
+```ruby
+option text: 'Option 1'
+```
+
+returns
+
+```html
+<option>Option 1</option>
+```
+
+## Example 2: Render `options[:label]` param
+
+```ruby
+option label: 'Option 2'
+```
+
+returns
+
+```html
+<option label="Option 2"></option>
+```
+
+## Example 3: Render with more attributes
+
+```ruby
+option disabled: true, label: 'Option 3', selected: true, value: '3'
+```
+
+returns
+
+```html
+<option disabled="disabled" label="Option 3" selected="selected" value="3"></option>
+```
+
+## Example 4: Yield a given block
+
+```ruby
+option id: 'foo', class: 'bar' do
+  plain 'Option 4'
+end
+```
+
+returns
+
+```html
+<option id="foo" class="bar">
+  Option 4
+</option>
+```

spec/usage/components/option_spec.rb

@@ -0,0 +1,52 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Option component', type: :feature, js: true do
+  it 'Renders a option tag on a page' do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          option text: 'TEXT text'
+          option label: 'TEXT label'
+          option text: 'TEXT text', label: 'TEXT label'
+
+          option id: 'my-id', class: 'my-class' do
+            plain 'TEXT plain'
+          end
+
+          option text: 'TEXT text' do
+            plain 'TEXT plain'
+          end
+
+          option text: 'TEXT text', label: 'TEXT label' do
+            plain 'TEXT plain'
+          end
+
+          option disabled: true, label: 'TEXT label', selected: true, value: 'value'
+          option disabled: false, label: 'TEXT label', selected: true, value: 'value'
+          option disabled: true, label: 'TEXT label', selected: false, value: 'value'
+          option disabled: false, label: 'TEXT label', selected: false, value: 'value'
+        }
+      end
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+      <option>TEXT text</option>
+      <option label="TEXT label"></option>
+      <option label="TEXT label">TEXT text</option>
+      <option id="my-id" class="my-class">TEXT plain</option>
+      <option>TEXT text</option>
+      <option label="TEXT label">TEXT text</option>
+      <option disabled="disabled" label="TEXT label" selected="selected" value="value"></option>
+      <option label="TEXT label" selected="selected" value="value"></option>
+      <option disabled="disabled" label="TEXT label" value="value"></option>
+      <option label="TEXT label" value="value"></option>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+end