Merge pull request #76 from basemate/summary_details_components

Summary details components

Author: pascalwengerter

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

@@ -0,0 +1,3 @@
+%details{@tag_attributes}
+  - if block_given?
+    = yield

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

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

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

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

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

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

docs/components/details.md

@@ -0,0 +1,68 @@
+# matestack core component: Details
+
+Show [specs](../../spec/usage/components/details_summary_spec.rb)
+
+Use details to implement `<details>` and `<summary>` tags.
+
+
+## Parameters
+
+`<details>` and `<summary>` can take two optional configuration params and optional content.
+
+
+### Optional configuration
+
+#### id (optional)
+
+Expects a string with all ids the details tag should have.
+
+#### class (optional)
+
+Expects a string with all classes the details tag should have.
+
+
+## Example 1
+
+```ruby
+details id: 'foo', class: 'bar' do
+  summary text: 'Greetings'
+  plain "Hello World!" # optional content
+end
+```
+
+```html
+<details id="foo" class="bar">
+  <summary>Greetings</summary>
+  Hello World!
+</details>
+```
+
+## Example 2
+
+```ruby
+details id: 'foo', class: 'bar' do
+  summary id: 'baz', text: 'Greetings'
+  paragraph text: 'Hello World!'
+end
+```
+
+```html
+<details id="foo" class="bar">
+  <summary id="baz">Greetings</summary>
+  <p>Hello World!</p>
+</details>
+```
+
+## Example 3 (Without Summary)
+
+```ruby
+details id: 'foo' do
+  plain "Hello World!"
+end
+```
+
+```html
+<details id="foo">
+  Hello World!
+</details>
+```

logo.png

@@ -0,0 +1,51 @@
+require_relative "../../support/utils"
+include Utils
+
+describe 'Details Element with summary', type: :feature, js: true do
+  it 'Example 1' do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          # basic
+          details do
+            summary text: 'Hello'
+            paragraph text: 'World!'
+          end
+
+          # without summary
+          details id: 'foo' do
+            plain "Hello World!"
+          end
+ 
+          # enhanced
+          details id: 'detail_id', class: 'detail_class' do
+            summary id: 'summary_id', class: 'summary_class', text: 'Hello'
+            paragraph text: 'World!'
+          end
+        }
+      end
+    end
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+
+    <details>
+      <summary>Hello</summary>
+      <p>World!</p>
+    </details>
+
+    <details id="foo">
+      Hello World!
+    </details>
+
+    <details id="detail_id" class="detail_class">
+      <summary id="summary_id" class="summary_class">Hello</summary>
+      <p>World!</p>
+    </details>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+end