Merge pull request #49 from basemate/hr-component

Add <hr> tag with documentation and spec

Author: jonasjabari

app/concepts/hr/cell/hr.rb

@@ -0,0 +1,5 @@
+module Hr::Cell
+  class Hr < Component::Cell::Static
+
+  end
+end

app/concepts/hr/view/hr.haml

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

docs/components/hr.md

@@ -0,0 +1,49 @@
+# matestack core component: Hr
+
+Show [specs](../../spec/usage/components/hr_spec.rb)
+
+The HTML `<hr>` tag implemented in ruby.
+
+## Parameters
+
+This component can take 2 optional configuration params.
+
+#### # id (optional)
+Expects a string with all ids the hr should have.
+
+#### # class (optional)
+Expects a string with all classes the hr should have.
+
+## Example 1
+Adding an optional id
+
+```ruby
+div id: "foo", class: "bar" do
+  hr id: "hr-id"
+end
+```
+
+returns
+
+```html
+<div id="foo" class="bar">
+  <hr id="hr-id">
+</div>
+```
+
+## Example 2
+Adding an optional class
+
+```ruby
+div id: "foo", class: "bar" do
+  hr class: "hr-class"
+end
+```
+
+returns
+
+```html
+<div id="foo" class="bar">
+  <hr class="hr-class">
+</div>
+```

spec/usage/components/hr_spec.rb

@@ -0,0 +1,26 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Horizontal Rule Component', type: :feature, js: true do
+  it 'Renders an hr tag on the page' do
+
+    class ExamplePage < Page::Cell::Page
+      def response
+        components {
+          # simple horizontal rule
+          hr id: 'my-id', class: 'my-class'
+        }
+      end
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <hr id="my-id" class="my-class">
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+end