Merge pull request #298 from basemate/add_data_component

add data core component & tests & docs

Author: pascalwengerter

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

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

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

@@ -0,0 +1,9 @@
+module Matestack::Ui::Core::Data
+  class Data < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        "value": options[:value] ||= nil
+      })
+    end
+  end
+end

docs/components/README.md

@@ -19,6 +19,7 @@ You can build your [own components](/docs/extend/README.md) as well, both static
 - [caption](/docs/components/caption.md)
 - [cite](/docs/components/cite.md)
 - [code](/docs/components/code.md)
+- [data](/docs/components/data.md)
 - [dl](/docs/components/dl.md)
   - dd
   - dt

docs/components/data.md

@@ -0,0 +1,47 @@
+# matestack core component: Data
+
+Show [specs](/spec/usage/components/data_spec.rb)
+
+The HTML `<data>` 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 `<data>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<data>` should have.
+
+#### # value (optional)
+Expects a string and specifies the machine-readable translation of the content of the `<data>` element.
+
+## Example 1: Yield a given block
+
+```ruby
+data id: 'foo', class: 'bar', value: '1300' do
+  plain 'Data example 1' # optional content
+end
+```
+
+returns
+
+```html
+<data id="foo" class="bar" value="1300">
+  Data example 1
+</data>
+```
+
+## Example 2: Render `options[:text]` param
+
+```ruby
+data id: 'foo', class: 'bar', value: '1301', text: 'Data example 2'
+```
+
+returns
+
+```html
+<data id="foo" class="bar" value="1301">
+  Data example 2
+</data>

spec/usage/components/data_spec.rb

@@ -0,0 +1,35 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Data component', type: :feature, js: true do
+  it 'Renders a simple and enhanced data tag on a page' do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          # Simple data
+          data id: 'foo', class: 'bar', value: '1301', text: 'Data example 1'
+
+          # Enhanced data
+          data id: 'foo', class: 'bar', value: '1300' do
+            plain 'Data example 2' # optional content
+          end
+        }
+      end
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+      <data id="foo" value="1301" class="bar">
+        Data example 1
+      </data>
+      <data id="foo" value="1300" class="bar">
+        Data example 2
+      </data>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+end