Add figure tag

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

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

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

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

docs/components/README.md

@@ -8,6 +8,7 @@ You can build your [own components](/docs/extend/custom_components.md) as well,
 - [b](/docs/components/b.md)
 - [br](/docs/components/br.md)
 - [div](/docs/components/div.md)
+- [figure](/docs/components/figure.md)
 - [footer](/docs/components/footer.md)
 - [header](/docs/components/header.md)
 - [heading](/docs/components/heading.md)

docs/components/figure.md

@@ -0,0 +1,31 @@
+# matestack core component: Figure
+
+Show [specs](/spec/usage/components/figure_spec.rb)
+
+The HTML `<figure>` tag implemented in ruby.
+
+## Parameters
+
+This component can take 2 optional configuration params and optional content.
+
+#### # id (optional)
+Expects a string with all ids the figure tag should have.
+
+#### # class (optional)
+Expects a string with all classes the figure tag should have.
+
+## Example 1
+
+```ruby
+figure id: "foo", class: "bar" do
+  img path: 'matestack-logo.png', width: 500, height: 300, alt: "logo"
+end
+```
+
+returns
+
+```html
+<figure id="foo" class="bar">
+  <img src="your-asset-path/matestack-logo.png" width="500" height="300" alt="logo"/>
+</figure>
+```

spec/usage/components/figure_spec.rb

@@ -0,0 +1,22 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Figure Component', type: :feature, js: true do
+
+  it 'Example 1' do
+
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          figure id: "my-id", class: "my-class" do
+            img path: 'matestack-logo.png', width: 500, height: 300, alt: "logo"
+          end
+        }
+      end
+    end
+
+    visit '/example'
+
+    expect(page).to have_xpath("//figure[@id='my-id' and @class='my-class']/img[contains(@src,'matestack-logo') and @alt='logo' and @width='500' and @height='300']")
+  end
+end