Merge pull request #318 from basemate/add_dialog_component

Add dialog component, add missing line in core component generator

Author: pascalwengerter

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

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

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

@@ -0,0 +1,9 @@
+module Matestack::Ui::Core::Dialog
+  class Dialog < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        "open": options[:open] ||= nil
+      })
+    end
+  end
+end

docs/components/README.md

@@ -25,6 +25,7 @@ You can build your [own components](/docs/extend/README.md) as well, both static
 - [dl](/docs/components/dl.md)
   - dd
   - dt
+- [dialog](/docs/components/dialog.md)
 - [div](/docs/components/div.md)
 - [em](/docs/components/em.md)
 - [fieldset](/docs/components/fieldset.md)

docs/components/dialog.md

@@ -0,0 +1,48 @@
+# matestack core component: Dialog
+
+Show [specs](/spec/usage/components/dialog_spec.rb)
+
+The HTML `<dialog>` tag implemented in Ruby.
+
+## Parameters
+
+This component can take 3 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 `<dialog>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<dialog>` should have.
+
+#### # open (optional)
+Expects a boolean. If set to true, the `<dialog>` will be visible.
+
+## Example 1: Yield a given block
+
+```ruby
+dialog id: 'foo', class: 'bar' do
+  plain 'Dialog example 1' # optional content
+end
+```
+
+returns
+
+```html
+<dialog id="foo" class="bar">
+  Dialog example 1
+</dialog>
+```
+
+## Example 2: Render `options[:text]` param
+
+```ruby
+dialog id: 'foo', class: 'bar', text: 'Dialog example 2', open: true
+```
+
+returns
+
+```html
+<dialog id="foo" class="bar" open="open">
+  Dialog example 2
+</dialog>
+```

lib/generators/matestack/core/component/templates/docs/components/%file_name%.md.tt

@@ -42,3 +42,4 @@ returns
 <<%= file_name.underscore %> id="foo" class="bar">
   <%= file_name.camelcase %> example 2
 </<%= file_name.underscore %>>
+```

spec/usage/components/dialog_spec.rb

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