Merge pull request #297 from basemate/add_samp_component

Add samp tag incl. test & docs

Author: pascalwengerter

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

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

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

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

docs/components/README.md

@@ -60,6 +60,7 @@ You can build your [own components](/docs/extend/README.md) as well, both static
 - [rt](/docs/components/rb.md)
 - [ruby](/docs/components/ruby.md)
 - [s](/docs/components/s.md)
+- [samp](/docs/components/samp.md)
 - [section](/docs/components/section.md)
 - [small](/docs/components/small.md)
 - [span](/docs/components/span.md)

docs/components/samp.md

@@ -0,0 +1,44 @@
+# matestack core component: Samp
+
+Show [specs](/spec/usage/components/samp_spec.rb)
+
+The HTML `<samp>` 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 `<samp>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<samp>` should have.
+
+## Example 1: Yield a given block
+
+```ruby
+samp id: 'foo', class: 'bar' do
+  plain 'Samp example 1' # optional content
+end
+```
+
+returns
+
+```html
+<samp id="foo" class="bar">
+  Samp example 1
+</samp>
+```
+
+## Example 2: Render `options[:text]` param
+
+```ruby
+samp id: 'foo', class: 'bar', text: 'Samp example 2'
+```
+
+returns
+
+```html
+<samp id="foo" class="bar">
+  Samp example 2
+</samp>

spec/usage/components/samp_spec.rb

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