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>
+```

docs/components/param.md

@@ -0,0 +1,46 @@
+# matestack core component: Param
+
+Show [specs](/spec/usage/components/param_spec.rb)
+
+The HTML `<param>` tag implemented in ruby.
+
+## Parameters
+
+This component can take 4 optional configuration params.
+
+#### # id (optional)
+Expects a string with all ids the `<param>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<param>` should have.
+
+#### # name (optional)
+Specifies the name of a parameter.
+
+#### # value (optional)
+Specifies the value of the parameter
+
+
+## Example 1:
+
+```ruby
+param name: 'autoplay', value: 'true'
+```
+
+returns
+
+```html
+<param name="autoplay" value="true">
+```
+
+## Example 2:
+
+```ruby
+param name: 'autoplay', value: 'true', id: 'my-id', class: 'my-class'
+```
+
+returns
+
+```html
+<param id="my-id" name="autoplay" value="true" class="my-class">
+```

docs/components/video.md

@@ -2,40 +2,56 @@
 
 Show [specs](/spec/usage/components/video_spec.rb)
 
-The HTML video tag implemented in ruby.
+The HTML video tag implemented in Ruby.
 
 ## Parameters
-The video tag takes a mandatory path argument and can take a number of optional configuration params.
+The video component takes mandatory path and type arguments and can take a number of optional configuration params.
 
-#### # path
-Expects a string with the source to the video. It looks for the video in the `assets/videos` folder and uses the standard Rails asset pipeline.
+#### # autoplay (optional)
+Expects a boolean and specifies whether the video should start playing as soon as it is ready.
 
-#### # id, class
-Like most of the core components, you can give a video an id and a class.
+#### # controls (optional)
+Expects a boolean and specifies whether the video controls (play/pause button etc) should be displayed.
 
 #### # height (optional)
 Expects an integer with the height of the video in px.
 
-#### # width (optional)
-Expects an integer with the width of the video in px.
+#### # id, class (optional)
+Like most of the core components, you can give a video an id and a class.
 
-#### # alt (optional)
-Expects a string with the alt text the video should have.
+#### # loop (optional)
+Expects a boolean and specifies whether the video will start over again every time it is finished.
 
-#### # preload
-Expects a string (`auto`, `metadata` or `none`) and specifies whether the whole video/only metadata/nothing should be loaded on pageload. Default (if not specified) depends on the client's browser.
+#### # muted (optional)
+Expects a boolean and specifies whether the audio output of the video should be muted.
 
-#### # autoplay
-Expects a boolean and specifies whether the video should start playing as soon as it is ready.
+#### # path
+Expects a string with the source to the video. It looks for the video in the `assets/videos` folder and uses the standard Rails asset pipeline.
 
-#### # muted
-Expects a boolean and specifies whether the audio output of the video should be muted.
+#### # type
+Expects a string with the type to the video.
 
-#### # playsinline
+#### # playsinline (optional)
 Expects a boolean and specifies whether the video should be played inline on iOS Safari.
 
-#### # loop
-Expects a boolean and specifies whether the video will start over again every time it is finished.
+#### # preload (optional)
+Expects a string (`auto`, `metadata` or `none`) and specifies whether the whole video/only metadata/nothing should be loaded on pageload. Default (if not specified) depends on the client's browser.
 
-#### # controls
-Expects a boolean and specifies whether the video controls (play/pause button etc) should be displayed.
+#### # width (optional)
+Expects an integer with the width of the video in px.
+
+## Example
+
+
+```ruby
+video path: 'corgi.mp4', type: "mp4", width: 500, height: 300
+```
+
+returns
+
+```HTML
+<video height='300' width='500'>
+  <source src='/assets/corgi-[...].mp4' type='video/mp4'>
+  Your browser does not support the video tag.
+</video>
+```

docs/contribute/README.md

@@ -55,6 +55,26 @@ bundle exec rspec
 
 Tests follow quite the same rules as the documentation: Make sure to either add relevant tests (when introducing new concepts or components) or change existing ones to fit your changes (updating existing concepts and components). Pull requests that add/change concepts & components and do not come with corresponding tests will not be approved.
 
+### Note: Running tests on macOS
+
+Make sure you have installed `chromedriver` on your machine. You can install `chromedriver` via `brew` with
+
+```shell
+brew cask install chromedriver
+```
+
+You can then run your the testsuite with `bundle exec rspec`.
+
+If you get an error about a version mismatch similar to this one:
+
+`Chrome version must be between X and Y (Driver info: chromedriver=X.Y.Z)`
+
+Make sure you update your chromedriver by executing this command in the project root:
+
+```shell
+rails app:webdrivers:chromedriver:update
+```
+
 ## Release
 
 Webpacker is used for managing all JS assets. In order to deploy a packed JS, we use a "builder" app found in `repo_root/builder`. This builder app uses a symlink in order to reference the actual core found in `builder/vendor`.

docs/tooling/generators/matestack_app_generator.md

@@ -13,15 +13,15 @@ Generates matestack apps to `app/matestack/apps`.
 ## Example 1
 
 ```bash
-rails generate matestack_app example_app
+rails generate matestack:app example_app
 ```
 
 Creates an ExampleApp in `app/matestack/apps/example_app.rb`.
 
 ## Example 2
 
 ```bash
-rails generate matestack_app simple_app --all_inclusive
+rails generate matestack:app simple_app --all_inclusive
 ```
 
 Creates:
@@ -32,5 +32,5 @@ Creates:
 
 To see all options, run
 ```bash
-rails generate matestack_app -h
+rails generate matestack:app -h
 ```

docs/tooling/generators/matestack_component_generator.md

@@ -17,12 +17,12 @@ Generates matestack components to `app/matestack/components`.
 ## Example
 
 ```bash
-rails generate matestack_component simple_component
+rails generate matestack:component simple_component
 ```
 
 Creates a SimpleComponent in `app/matestack/components/simple_component.rb`.
 
 To see all options, run
 ```bash
-rails generate matestack_component -h
+rails generate matestack:component -h
 ```

docs/tooling/generators/matestack_page_generator.md

@@ -17,7 +17,7 @@ Generates matestack pages to `app/matestack/pages`.
 ## Example 1
 
 ```bash
-rails generate matestack_page simple_page --app_name example_app
+rails generate matestack:page simple_page --app_name example_app
 ```
 
 Creates a SimplePage in `app/matestack/pages/example_app/simple_page.rb`.
@@ -33,7 +33,7 @@ in the terminal to use in your controller.
 ## Example 2
 
 ```bash
-rails generate matestack_page second_page --app_name example_app --namespace sample_namespace
+rails generate matestack:page second_page --app_name example_app --namespace sample_namespace
 ```
 
 Creates a SimplePage in `app/matestack/pages/example_app/sample_namespace/second_page.rb`.
@@ -48,5 +48,5 @@ in the terminal to use in your, e.g., `example_app_controller.rb`.
 
 To see all options, run
 ```bash
-rails generate matestack_page -h
+rails generate matestack:page -h
 ```

lib/generators/matestack/app/USAGE

@@ -0,0 +1,21 @@
+Description:
+  Stubs out a new matestack app. Pass the app name under_scored.
+
+  If you want so, pass the option '--all_inclusive' to also create
+  a corresponding matestack example_page, a controller, its action
+  and the route in 'config/routes.rb'.
+
+Example 1:
+  `rails generate matestack:app example_app`
+
+  This will create:
+    app/matestack/apps/example_app.rb
+
+Example 2:
+  `rails generate matestack:app example_app --all_inclusive`
+
+  This will create:
+    app/matestack/apps/example_app.rb
+    app/matestack/pages/example_app/example_page.rb
+    app/controllers/example_app_controller.rb
+    route  get 'example_app/example_page', to: 'example_app#example_page'