Merge pull request #261 from bdlb77/add_meter_component

Add meter component

Author: pascalwengerter

Gemfile

@@ -13,6 +13,7 @@ gemspec
 
 # To use a debugger
 # gem 'byebug', group: [:development, :test]
+# gem 'pry-byebug', group: [:development, :test]
 
 gem "trailblazer"
 gem "trailblazer-rails"

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

@@ -0,0 +1,4 @@
+%meter{@tag_attributes}
+  - if block_given?
+    = yield
+    

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

@@ -0,0 +1,14 @@
+module Matestack::Ui::Core::Meter
+  class Meter < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        value: options[:value],
+        min: options[:min],
+        max: options[:max],
+        low: options[:low],
+        high: options[:high],
+        optimum: options[:optimum]
+      })
+    end
+  end
+end

docs/components/meter.md

@@ -0,0 +1,60 @@
+# matestack core component: Meter
+
+Show [specs](/spec/usage/components/meter_spec.rb)
+
+Use the Meter component to implement `<meter>` tag.
+
+## Parameters
+
+#### # value (required)
+Expects a number thats is the current value of the gauge.
+
+#### # id (optional)
+Expects a string with all ids the meter should have.
+
+#### # class (optional)
+Expects a string with all classes the meter should have.
+
+#### # min (optional)
+Expects a number that defines the minimum value of the range.
+
+#### # max (optional)
+Expects a number that defines the maximum value of the range.
+
+#### # low (optional)
+Expects a number that defines which value is considered a low value
+
+#### # high (optional)
+Expects a number that defines which value is considered a high value
+
+#### # optimum (optional)
+Expects a number that defines which value is optimal for the gauge
+
+
+
+
+## Example
+
+```ruby
+meter id: 'meter_id', value: 0.6
+
+meter id: 'meter', min: 0, max: 10, value: 6 do
+	plain '6 out of 10. 60%.'
+end
+
+meter id: 'meter', low: 2, high: 8, optimum: 6, min: 0, max: 10, value: 6 do
+	plain '6 out of 10. 60%.'
+end
+```
+
+returns
+
+```html
+<meter id="meter_id" value="0.6"></meter>
+      
+<meter id="meter" max="10" min="0" value="6">6 out of 10. 60%.</meter>
+
+<meter high="8" id="meter" low="2" max="10" min="0" optimum="6" value="6">
+	6 out of 10. 60%.
+</meter>
+```

spec/usage/components/meter_spec.rb

@@ -0,0 +1,42 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Meter Component', type: :feature, js: true do
+
+  it 'Renders an meter tag on the page' do
+
+    class ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          #label for: 'meter_id'
+          meter id: 'meter_id', value: 0.6
+
+          #label for: 'meter'
+          meter id: 'meter', min: 0, max: 10, value: 6 do
+            plain '6 out of 10. 60%.'
+          end
+          
+          meter id: 'meter', low: 2, high: 8, optimum: 6, min: 0, max: 10, value: 6 do
+            plain '6 out of 10. 60%.'
+          end
+        }
+      end
+    end
+
+    visit '/example'
+
+    output_html = page.html
+
+    expected_output = <<~HTML 
+      <meter id="meter_id" value="0.6"></meter>
+      
+      <meter id="meter" max="10" min="0" value="6">6 out of 10. 60%.</meter>
+
+      <meter high="8" id="meter" low="2" max="10" min="0" optimum="6" value="6">
+        6 out of 10. 60%.
+      </meter>
+    HTML
+
+    expect(stripped(output_html)).to include(stripped(expected_output))
+  end
+end