Merge pull request #213 from basemate/introduce_code_component

Add HTML code tag, issue #177

Author: pascalwengerter

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

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

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

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

docs/components/code.md

@@ -0,0 +1,50 @@
+# matestack core component: Code
+
+Show [specs](/spec/usage/components/code_spec.rb)
+
+The HTML `<code>` tag implemented in Ruby.
+
+## Parameters
+
+This component can take 3 optional configuration params and optional content.
+
+#### # id (optional)
+Expects a string with all ids the `<code>` tag should have.
+
+#### # class (optional)
+Expects a string with all classes the `<code>` tag should have.
+
+#### # text (optional)
+Expects a string with the text that should go into the `<code>` tag.
+
+## Example 1
+Rendering content into the `code` component
+
+```ruby
+code id: "foo", class: "bar" do
+  plain 'puts "Hello Mate One"'
+end
+```
+
+returns
+
+```html
+<code id="foo" class="bar">
+  puts "Hello Mate One"
+</code>
+```
+
+## Example 2
+Passing content to the `text` param
+
+```ruby
+code id: "foo", class: "bar", text: 'puts "Hello Mate Two"'
+```
+
+returns
+
+```html
+<code id="foo" class="bar">
+  puts "Hello Mate Two"
+</code>
+```

spec/usage/components/code_spec.rb

@@ -0,0 +1,35 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Code Component', type: :feature, js: true do
+
+  it 'Example 1' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          # example 1
+          code id: "foo", class: "bar" do
+            plain 'puts "Hello Mate One"'
+          end
+          # example 2
+          code id: "foo", class: "bar", text: 'puts "Hello Mate Two"'
+        }
+      end
+
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <code id="foo" class="bar">puts "Hello Mate One"</code>
+    <code id="foo" class="bar">puts "Hello Mate Two"</code>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
+end