Merge pull request #301 from basemate/add_bdo_component

Add bdo core component including tests & docs

Author: pascalwengerter

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

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

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

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

docs/components/README.md

@@ -13,6 +13,7 @@ You can build your [own components](/docs/extend/README.md) as well, both static
 - [aside](/docs/components/aside.md)
 - [b](/docs/components/b.md)
 - [bdi](/docs/components/bdi.md)
+- [bdi](/docs/components/bdo.md)
 - [blockquote](/docs/components/blockquote.md)
 - [br](/docs/components/br.md)
 - [button](/docs/components/button.md)

docs/components/bdo.md

@@ -0,0 +1,47 @@
+# matestack core component: Bdo
+
+Show [specs](/spec/usage/components/bdo_spec.rb)
+
+The HTML `<bdo>` tag implemented in ruby.
+
+## Parameters
+
+This component takes 1 required param and 2 optional configuration params and either yield content or display what gets passed to the `text` configuration param.
+
+#### # dir (required)
+Expects a string with either 'ltr' or 'rtl' to specify text direction inside the `<bdo>` element.
+
+#### # id (optional)
+Expects a string with all ids the `<bdo>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<bdo>` should have.
+
+## Example 1: Yield a given block
+
+```ruby
+bdo id: 'foo', class: 'bar', dir: 'ltr' do
+  plain 'This text will go left-to-right.' # optional content
+end
+```
+
+returns
+
+```html
+<bdo id="foo" class="bar" dir="ltr">
+  This text will go left-to-right.
+</bdo>
+```
+
+## Example 2: Render `options[:text]` param
+
+```ruby
+bdo id: 'foo', class: 'bar', dir: 'rtl', text: 'This text will go right-to-left.'
+```
+
+returns
+
+```html
+<bdo id="foo" class="bar" dir="rtl">
+  This text will go right-to-left.
+</bdo>

spec/usage/components/bdo_spec.rb

@@ -0,0 +1,53 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Bdo component', type: :feature, js: true do
+  it 'Renders a simple and enhanced bdo tag on a page' do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          # Simple bdo
+          bdo dir: 'ltr', text: 'Simple bdo ltr tag'
+          bdo dir: 'rtl', text: 'Simple bdo rtl tag'
+
+          # Enhanced bdo
+          bdo id: 'foo', class: 'bar', dir: 'ltr' do
+            plain 'This text will go left-to-right.' # optional content
+          end
+          bdo id: 'bar', class: 'foo', dir: 'rtl' do
+            plain 'This text will go right-to-left.' # optional content
+          end
+        }
+      end
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+      <bdo dir="ltr">Simple bdo ltr tag</bdo>
+      <bdo dir="rtl">Simple bdo rtl tag</bdo>
+      <bdo dir="ltr" id="foo" class="bar">This text will go left-to-right.</bdo>
+      <bdo dir="rtl" id="bar" class="foo">This text will go right-to-left.</bdo>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+
+  end
+
+  it 'Fails if required dir tag is not set' do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          bdo text: 'Simple bdo ltr tag'
+        }
+      end
+    end
+
+    visit '/example'
+
+    expect(page).to have_content("required key 'dir' is missing")
+
+  end
+end