Merge pull request #124 from basemate/add-abbr-tag

Add abbr component with specs and documentation

Author: pascalwengerter

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

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

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

@@ -0,0 +1,12 @@
+module Matestack::Ui::Core::Abbr
+  class Abbr < Matestack::Ui::Core::Component::Static
+    REQUIRED_KEYS = [:title]
+
+    def setup
+      @tag_attributes.merge!({
+        "title": options[:title]
+      })
+    end
+
+  end
+end

docs/components/abbr.md

@@ -0,0 +1,48 @@
+# matestack core component: abbr
+
+Show [specs](../../spec/usage/components/abbr_spec.rb)
+
+The HTML `abbr` tag implemented in ruby.
+
+## Parameters
+
+This component expects 1 required param, 2 optional configuration params and either yield content or display what gets passed to the `text` configuration param.
+
+#### # title - required
+Expects a string with the meaning of the abbreviation contained within the tag.
+
+#### # id - optional
+Expects a string with all ids the `abbr` should have.
+
+#### # class - optional
+Expects a string with all classes the `abbr` should have.
+
+#### # text - optional
+Expects a string which will be displayed as the content inside the `abbr`. If this is not passed, a block must be passed instead.
+
+## Example 1 - render options[:text] param
+
+```ruby
+abbr title: 'Hypertext Markup Language', text: 'HTML'
+```
+
+returns
+
+```html
+<abbr title="Hypertext Markup Language">HTML</abbr>
+```
+
+
+## Example 2 - yield a given block
+
+```ruby
+abbr title: 'Cascading Style Sheets' do
+  span text: 'CSS'
+end
+```
+
+returns
+
+```html
+<abbr title="Cascading Style Sheets">CSS</abbr>
+```

spec/usage/components/abbr_spec.rb

@@ -0,0 +1,54 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Abbr Component', type: :feature, js: true do
+
+  it 'Example 1' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          abbr title: 'Hypertext Markup Language', text: 'HTML'
+        }
+      end
+
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <abbr title="Hypertext Markup Language">HTML</abbr>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
+  it 'Example 2' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          abbr title: 'Cascading Style Sheets' do
+            span text: 'CSS'
+          end
+        }
+      end
+
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <abbr title="Cascading Style Sheets"><span>CSS</span></abbr>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
+end