Merge branch 'develop' into document_link_param_option

Author: pascalwengerter

Gemfile

@@ -32,6 +32,7 @@ group :development, :test do
   gem 'simplecov', require: false, group: :test
   gem 'byebug'
   gem 'webmock'
+  gem 'webdrivers', '~> 4.1'
 end
 
 group :test do

Gemfile.lock

@@ -231,6 +231,10 @@ GEM
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
     uber (0.1.0)
+    webdrivers (4.1.2)
+      nokogiri (~> 1.6)
+      rubyzip (~> 1.0)
+      selenium-webdriver (>= 3.0, < 4.0)
     webmock (3.5.1)
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
@@ -264,6 +268,7 @@ DEPENDENCIES
   trailblazer
   trailblazer-cells
   trailblazer-rails
+  webdrivers (~> 4.1)
   webmock
   webpacker (~> 3.5)
 

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

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

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

@@ -0,0 +1,11 @@
+module Matestack::Ui::Core::Output
+  class Output < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!(
+        name: options[:name],
+        for: options[:for],
+        form: options[:form]
+      )
+    end
+  end
+end

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

@@ -0,0 +1 @@
+%param{@tag_attributes}

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

@@ -0,0 +1,10 @@
+module Matestack::Ui::Core::Param
+  class Param < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        name: options[:name],
+        value: options[:value]
+      })
+    end
+  end
+end

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

@@ -1 +1,3 @@
-= video_tag(@tag_attributes, ActionController::Base.helpers.asset_path(options[:path]), height: options[:height], width: options[:width], preload: options[:preload], autoplay: options[:autoplay], muted: options[:muted], playsinline: options[:playsinline], loop: options[:loop], controls: options[:controls])
+%video{@tag_attributes}
+  %source{:src => @source, :type => @type}
+  Your browser does not support the video tag.

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

@@ -1,7 +1,23 @@
 module Matestack::Ui::Core::Video
   class Video < Matestack::Ui::Core::Component::Static
 
-    REQUIRED_KEYS = [:path]
+    REQUIRED_KEYS = [:path, :type]
+
+    def setup
+      @tag_attributes.merge!({
+        autoplay: options[:autoplay],
+        controls: options[:controls],
+        height: options[:height],
+        loop: options[:loop],
+        muted: options[:muted],
+        playsinline: options[:playsinline],
+        preload: options[:preload],
+        width: options[:width]
+      })
+
+      @source = ActionController::Base.helpers.asset_path(options[:path])
+      @type = "video/#{@options[:type]}"
+    end
 
   end
 end

docs/components/README.md

@@ -34,13 +34,15 @@ You can build your [own components](/docs/extend/custom_components.md) as well,
 - [button](/docs/components/button.md)
 - [link](/docs/components/link.md)
 - [label](/docs/components/label.md)
+- [param](/docs/components/param.md)
 - [progress](/docs/components/progress.md)
 - [ruby](/docs/components/ruby.md)
 - [rt](/docs/components/rb.md)
 - [rp](/docs/components/rt.md)
 - [legend](/docs/components/legend.md)
 - [mark](/docs/components/mark.md)
 - [noscript](/docs/components/noscript.md)
+- [output](/docs/components/output.md)
 - [sup](/docs/components/sup.md)
 - [sub](/docs/components/sub.md)
 - [var](/docs/components/var.md)

docs/components/output.md

@@ -0,0 +1,52 @@
+# matestack core component: Output
+
+Show [specs](/spec/usage/components/output_spec.rb)
+
+The HTML `<output>` tag implemented in ruby.
+
+## Parameters
+
+This component can take up to 5 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 `<output>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<output>` should have.
+
+#### # name (optional)
+Specifies a name for the `<output>` element
+
+#### # for (optional)
+Specifies the relationship between the result of the calculation, and the elements used in the calculation
+
+#### # form (optional)
+Specifies one or more forms the `<output>` element belongs to
+
+## Example 1:
+
+```ruby
+output name: 'x', for: 'a b', text: ''
+```
+
+returns
+
+```html
+<output for="a b" name="x"></output>
+```
+
+## Example 2:
+
+```ruby
+output id: 'my-id', class: 'my-class', name: 'x', for: 'a b', form: 'form_id' do
+  plain 'All attributes'
+end
+```
+
+returns
+
+```html
+<output for="a b" form="form_id" id="my-id" name="x" class="my-class">
+  All attributes
+</output>
+```