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

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

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

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

@@ -0,0 +1,11 @@
+module Matestack::Ui::Core::Q
+  class Q < Matestack::Ui::Core::Component::Static
+
+    def setup
+      @tag_attributes.merge!({
+        "cite": options[:cite]
+        })
+    end
+
+  end
+end

docs/components/blockquote.md

@@ -9,10 +9,10 @@ The HTML blockquote tag implemented in ruby.
 This component can take 3 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 span should have.
+Expects a string with all ids the blockquote should have.
 
 #### # class (optional)
-Expects a string with all classes the span should have.
+Expects a string with all classes the blockquote should have.
 
 #### # cite (optional)
 Expects a string referencing a cite for the blockquote.

docs/components/q.md

@@ -0,0 +1,50 @@
+# matestack core component: Q
+
+Show [specs](../../spec/usage/components/q_spec.rb)
+
+The HTML q tag implemented in ruby.
+
+## Parameters
+
+This component can take 4 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 quote should have.
+
+#### # class (optional)
+Expects a string with all classes the quote should have.
+
+#### # text (optional)
+Expects a string with the text that should go into the `<q>` tag.
+
+#### # cite (optional)
+Expects a string for referencing the source for the quote.
+
+## 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", cite: "helloworld.io" text: 'Hello World'
+```
+
+returns
+
+```html
+<q id="foo" class="bar" cite="helloworld.io">
+  Hello World
+</q>

spec/usage/components/q_spec.rb

@@ -0,0 +1,36 @@
+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 text: "A simple quote"
+
+          # enhanced q
+          q id: 'my-id', class: 'my-class', cite: 'www.matestack.org/example' do
+            plain 'This is a enhanced q with text'
+          end
+        }
+      end
+
+    end
+
+    visit "/example"
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <q>A simple quote</q>
+    <q cite="www.matestack.org/example" id="my-id" class="my-class">This is a enhanced q with text</q>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
+end