Adds docs and tests for onclick component

Author: cameronnorman

docs/components/onclick.md

@@ -1,3 +1,28 @@
 # matestack core component: Action
 
-Show [specs](../../spec/usage/components/action_spec.rb)
+Show [specs](../../spec/usage/components/onclick_spec.rb)
+
+The `onclick` component renders a div that runs a function on click. This is a nice component for use cases where you would like to wrap multiple components into one click function. The function called by the onclick component requires two fields. These two fields are `emit` and `data`. These two fields are then emitted as a event in javascript when the component is clicked
+
+```ruby
+class Pages::MyPage::Home < Matestack::Ui::Page
+  def response
+    components{
+      onclick run_this_function do
+        plain "Hello world"
+      end
+    }
+  end
+
+  def run_this_function
+    return {
+      emit: "abc",
+      data: {
+        id: 1,
+        name: "John",
+        detail: "Clicked the button"
+      }
+    }
+  end
+end
+```

spec/usage/components/onclick_spec.rb

@@ -0,0 +1,50 @@
+require_relative "../../support/utils"
+include Utils
+
+describe "Nav Component", type: :feature, js: true do
+
+  it "Example 1" do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          async show_on: 'show_message' do
+            div id: 'the_message' do
+              plain "{{event.data.message}}"
+            end
+          end
+          onclick click_function do
+            div id: 'click_this' do
+              plain "Click me"
+            end
+          end
+        }
+      end
+
+      def click_function
+        return {
+          emit: 'show_message',
+          data: {
+            message: "This is a cool message"
+          }
+        }
+      end
+    end
+
+    visit "/example"
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <div><div id="click_this">Click me</div></div>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+    find('div', id: 'click_this').click
+
+    new_expected_static_output = <<~HTML
+    <div id="the_message">This is a cool message</div>
+    <div>Click me!</div>
+    HTML
+  end
+
+end