Merge pull request #305 from marcoroth/picture_tag

add picture matestack core component

Author: pascalwengerter

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

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

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

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

docs/components/README.md

@@ -54,6 +54,7 @@ You can build your [own components](/docs/extend/README.md) as well, both static
 - [paragraph](/docs/components/paragraph.md)
 - [param](/docs/components/param.md)
 - [pg](/docs/components/pg.md)
+- [picture](/docs/components/picture.md)
 - [plain](/docs/components/plain.md)
 - [pre](/docs/components/pre.md)
 - [progress](/docs/components/progress.md)

docs/components/picture.md

@@ -0,0 +1,31 @@
+# matestack core component: Picture
+
+Show [specs](/spec/usage/components/picture_spec.rb)
+
+The HTML `<picture>` tag implemented in ruby.
+
+## Parameters
+
+This component can take 2 optional configuration params and yield the passed content.
+
+#### # id (optional)
+Expects a string with all ids the `<picture>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<picture>` should have.
+
+## Example: Yield a given block
+
+```ruby
+picture id: 'foo', class: 'bar' do
+  img path: 'matestack-logo.png'
+end
+```
+
+returns
+
+```html
+<picture id="foo" class="bar">
+  <img src="/assets/matestack-logo-XXXX.png" />
+</picture>
+```

spec/usage/components/picture_spec.rb

@@ -0,0 +1,35 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Picture component', type: :feature, js: true do
+  it 'Renders a picture tag on a page' do
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          # Just the tag
+          picture
+
+          # With attributes
+          picture id: 'my-id', class: 'my-class'
+
+          # With a sub-component
+          picture do
+            img path: 'matestack-logo.png'
+          end
+        }
+      end
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+      <picture></picture>
+      <picture id="my-id" class="my-class"></picture>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+    expect(page).to have_xpath("//img[contains(@src,'matestack-logo')]")
+  end
+end