Merge pull request #95 from basemate/make_buttons_disableable

Make buttons disableable

Author: jonasjabari

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

@@ -1,5 +1,11 @@
 module Matestack::Ui::Core::Button
   class Button < Matestack::Ui::Core::Component::Static
 
+    def setup
+      @tag_attributes.merge!({
+        "disabled": options[:disabled] ||= nil
+      })
+    end
+
   end
 end

docs/components/button.md

@@ -1,3 +1,69 @@
 # matestack core component: Button
 
 Show [specs](../../spec/usage/components/button_spec.rb)
+
+The HTML `<button>` tag implemented in Ruby.
+
+## Parameters
+
+This component can take 4 optional configuration params and optional content.
+
+#### # id (optional)
+Expects a string with all ids the button should have.
+
+#### # class (optional)
+Expects a string with all classes the button should have.
+
+#### # text (optional)
+Expects a string with the text that should go inside the `<button>` tag.
+
+#### # disabled (optional)
+Expects a boolean to specify a disabled `<button>` tag.
+
+## Example 1
+
+Specifying the button text directly
+
+```ruby
+button text: 'Click me'
+```
+
+returns
+
+```html
+<button>Click me</button>
+```
+
+## Example 2
+
+Rendering a content block inside the `<button>` tag:
+
+```ruby
+button id: 'foo', class: 'bar' do
+  plain "Click me"
+end
+```
+
+returns
+
+```html
+<button id="foo" class="bar">Click me</button>
+```
+
+## Example 3
+
+By passing a boolean via `disabled: true`, you define disabled buttons. Passing nothing or explicitly defining `disabled: false` return the same result:
+
+```ruby
+button disabled: true, text: 'You can not click me'
+button disabled: false, text: 'You can click me'
+button text: 'You can click me too'
+```
+
+returns
+
+```html
+<button disabled="disabled">You can not click me</button>
+<button>You can click me</button>
+<button>You can click me too</button>
+```

spec/usage/components/button_spec.rb

@@ -41,7 +41,34 @@ def response
     <button>Click me too, m8</button>
     <button>I am prefered</button>
     HTML
-    # <!-- <button id='my-button-id-1' class='my-button-class'>Click me, m8</button> -->
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
+  it 'Example 2: disabled buttons' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          # three possible ways of (not) using disabled buttons
+          button disabled: true, text: 'You can not click me'
+          button disabled: false, text: 'You can click me'
+          button text: 'You can click me too'
+        }
+      end
+
+    end
+
+    visit "/example"
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <button disabled="disabled">You can not click me</button>
+    <button>You can click me</button>
+    <button>You can click me too</button>
+    HTML
 
     expect(stripped(static_output)).to include(stripped(expected_static_output))
   end