Details and Summary

Added Components / Docs / tests for Details and Summary html tags

Author: bdlb77

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'
+  pg 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
+    plan "Hello World!"
+  end
+```
+
+```html
+  <details id="foo">
+    Hello World!
+  </details>
+```

spec/usage/components/details_summary_spec.rb

@@ -3,7 +3,7 @@
 
 describe 'Details Element with summary', type: :feature, js: true do
   it 'Example 1' do
-    class ExamplePage < Page::Cell::Page
+    class ExamplePage < Matestack::Ui::Page
       def response
         components {
           # basic
@@ -12,6 +12,11 @@ def response
             pg 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'
@@ -25,10 +30,20 @@ def response
     static_output = page.html
 
     expected_static_output = <<~HTML
-      <details class="detail_class" id="detail_id">
-        <summary id="summary_id" class="summary_class">Hello</summary>
-        <p>World!</p>
-      </details>
+
+    <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))