Merge pull request #299 from basemate/add_wbr_tag

add tested & documented wbr core component

Author: pascalwengerter

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

@@ -0,0 +1 @@
+%wbr{@tag_attributes}

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

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

docs/components/README.md

@@ -74,6 +74,7 @@ You can build your [own components](/docs/extend/README.md) as well, both static
 - [var](/docs/components/var.md)
 - [video](/docs/components/video.md)
 - [youtube](/docs/components/youtube.md)
+- [wbr](/docs/components/wbr.md)
 
 ## Dynamic Core Components
 

docs/components/wbr.md

@@ -0,0 +1,31 @@
+# matestack core component: Wbr
+
+Show [specs](/spec/usage/components/wbr_spec.rb)
+
+The HTML `<wbr>` tag implemented in ruby.
+
+## Parameters
+
+This component can take 2 optional configuration params.
+
+#### # id (optional)
+Expects a string with all ids the `<wbr>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<wbr>` should have.
+
+## Example 1: Usage
+
+```ruby
+paragraph do
+  plain 'First part of text'
+  wbr id: 'foo', class: 'bar'
+  plain 'Second part of text'
+end
+```
+
+returns
+
+```html
+<p>First part of text<wbr id="foo" class="bar">Second part of text</p>
+```

spec/usage/components/wbr_spec.rb

@@ -0,0 +1,37 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Wbr component', type: :feature, js: true do
+  it 'Renders a simple and enhanced wbr tag on a page' do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          # Simple wbr
+          paragraph do
+            plain 'First part of text'
+            wbr
+            plain 'Second part of text'
+          end
+
+          # Enhanced wbr
+          paragraph do
+            plain 'First part of second text'
+            wbr id: 'special', class: 'nice-wbr'
+            plain 'Second part of second text'
+          end
+        }
+      end
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+      <p>First part of text<wbr>Second part of text</p>
+      <p>First part of second text<wbr id="special" class="nice-wbr">Second part of second text</p>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+end