Merge pull request #260 from lumisce/ins_tag

Add ins tag
Thank you for contributing @lumisce && props to @borref and @bdlb77 for reviewing!

Author: pascalwengerter

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

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

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

@@ -0,0 +1,9 @@
+module Matestack::Ui::Core::Ins
+  class Ins < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        cite: options[:cite],
+        datetime: options[:datetime]
+      })
+  end
+end

docs/components/README.md

@@ -14,6 +14,7 @@ You can build your [own components](/docs/extend/custom_components.md) as well,
 - [kbd](/docs/components/kbd.md)
 - [hr](/docs/components/hr.md)
 - [icon](/docs/components/icon.md)
+- [ins](/docs/components/ins.md)
 - [main](/docs/components/main.md)
 - [nav](/docs/components/nav.md)
 - [plain](/docs/components/plain.md)

docs/components/ins.md

@@ -0,0 +1,47 @@
+# matestack core component: Ins
+
+Show [specs](/spec/usage/components/ins_spec.rb)
+
+The HTML ins tag implemented in Ruby.
+
+## Parameters
+
+This component can take 4 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 ins tag should have.
+
+#### # class (optional)
+Expects a string with all classes the ins tag should have.
+
+#### # cite (optional)
+Expects a string with a URL to a document that explains the reason why the text was inserted/changed.
+
+#### # datetime (optional)
+Expects a string which specifies the date and time of when the text was inserted/changed.
+
+## Example 1: Yield a given block
+
+```ruby
+ins id: "foo", class: "bar", cite: "example.html", datetime: "2008-05-25T17:25:00Z" do
+  plain 'Inserted text' # optional content
+end
+```
+
+returns
+
+```html
+<ins id="foo" class="bar" cite="example.html" datetime="2008-05-25T17:25:00Z">Inserted text</ins>
+```
+
+## Example 2: Render options[:text] param
+
+```ruby
+ins id: "foo", class: "bar", cite: "example.html", datetime: "2008-05-25T17:25:00Z", text: 'Inserted text'
+```
+
+returns
+
+```html
+<ins id="foo" class="bar" cite="example.html" datetime="2008-05-25T17:25:00Z">Inserted text</ins>
+```

spec/usage/components/ins_spec.rb

@@ -0,0 +1,76 @@
+require_relative "../../support/utils"
+include Utils
+
+describe 'Ins Component', type: :feature, js: true do
+
+  it 'Example 1 - yield, no options[:text]' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          # simple ins
+          ins do
+            plain 'I am simple'
+          end
+
+          # enhanced ins
+          ins id: 'my-id', class: 'my-class' do
+            plain 'I am enhanced'
+          end
+
+          # ins with cite and datetime
+          ins cite: 'example.html', datetime: '2008-05-25T17:25:00Z' do
+            plain 'I have cite and datetime'
+          end
+        }
+      end
+
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <ins>I am simple</ins>
+    <ins id="my-id" class="my-class">I am enhanced</ins>
+    <ins cite="example.html" datetime="2008-05-25T17:25:00Z">I have cite and datetime</ins>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
+  it 'Example 2 - render options[:text]' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          # simple ins
+          ins text: 'I am simple'
+
+          # enhanced ins
+          ins id: 'my-id', class: 'my-class', text: 'I am enhanced'
+
+          # ins with cite and datetime
+          ins cite: 'example.html', datetime: '2008-05-25T17:25:00Z', text: 'I am enhanced'
+        }
+      end
+
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <ins>I am simple</ins>
+    <ins id="my-id" class="my-class">I am enhanced</ins>
+    <ins cite="example.html" datetime="2008-05-25T17:25:00Z">I have cite and datetime</ins>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
+end