Fix issue #208: Add HTML <q> tag to core components

.github/pull_request_template.md

@@ -1,11 +1,13 @@
 **Please make sure to target feature and bugfix requests to develop branch**
 
-## Issue https://github.com/basemate/matestack-ui-core/issues/XXX: Short description here
+## Issue https://github.com/basemate/matestack-ui-core/issues/208: Add HTML <q> tag to core components
 
 ### Changes
 
-- [x] Describe the changes in one or more bulletpoints
+- Created q folder, q.haml and q.rb files to matestack ui core components
+- Created q.md to docs > components
+- Created q_spec.rb to usage > components
 
 ### Notes
 
-- Let the reviewers know something special
+- Nothing here

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

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

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

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Q
+  class Q < Matestack::Ui::Core::Component::Static
+
+  end
+end

docs/components/q.md

@@ -0,0 +1,47 @@
+# matestack core component: Q
+
+Show [specs](../../spec/usage/components/q_spec.rb)
+
+The HTML q tag implemented in ruby.
+
+## Parameters
+
+This component can take 2 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 q should have.
+
+#### # class (optional)
+Expects a string with all classes the q should have.
+
+#### # text (optional)
+Expects a string with the text that should go into the `<q>` tag.
+
+## Example 1: Yield a given block
+
+```ruby
+q id: "foo", class: "bar" do
+  plain 'Hello World' # optional content
+end
+```
+
+returns
+
+```html
+<q id="foo" class="bar">
+  Hello World
+</q>
+```
+
+## Example 2: Render options[:text] param
+
+```ruby
+q id: "foo", class: "bar", text: 'Hello World'
+```
+
+returns
+
+```html
+<q id="foo" class="bar">
+  Hello World
+</q>

spec/support/components.rb

@@ -155,6 +155,25 @@ def self.specs
               websocket_event: true
             }
           }
+        },
+        q: {
+          type: :static,
+          tag: "q",
+          options: {
+            optional: {
+              id: :string,
+              class: :string,
+              attributes: :hash,
+            },
+            required: {}
+          },
+          block: true,
+          optional_dynamics: {
+            rerender_on: {
+              client_side_event: true,
+              websocket_event: true
+            }
+          }
         }
       }
     end

spec/usage/components/q_spec.rb

@@ -0,0 +1,44 @@
+require_relative "../../support/utils"
+include Utils
+
+describe "Q Component", type: :feature, js: true do
+
+  it "Example 1" do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          #simple q
+          q
+
+          #simple q with attributes
+          q id: "my-id", class: "my-class"
+
+          #nested q
+          q do
+            q id: "my-nested-q"
+          end
+        }
+      end
+
+    end
+
+    visit "/example"
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <q></q>
+
+    <q id="my-id" class="my-class"></q>
+
+    <q>
+      <q id="my-nested-q"></q>
+    </q>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
+end