Add <sup> tag

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
  remote: .
  specs:
- matestack-ui-core (0.7.1)
+ matestack-ui-core (0.7.2.1)
  cells-haml
  cells-rails
  haml
@@ -123,7 +123,7 @@ GEM
  mini_mime (1.0.1)
  mini_portile2 (2.4.0)
  minitest (5.11.3)
- nio4r (2.4.0)
+ nio4r (2.5.2)
  nokogiri (1.10.4)
  mini_portile2 (~> 2.4.0)
  pipetree (0.1.1)

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

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

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

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

docs/components/README.md

@@ -38,6 +38,8 @@ You can build your [own components](/docs/extend/custom_components.md) as well,
 - [rp](/docs/components/rt.md)
 - [legend](/docs/components/legend.md)
 - [noscript](/docs/components/noscript.md)
+- [sup](/docs/components/sup.md)
+- [sub](/docs/components/sub.md)
 
 ## Dynamic Core Components
 

docs/components/sup.md

@@ -0,0 +1,51 @@
+# matestack core component: Sup
+
+Show [specs](../../spec/usage/components/sup_spec.rb)
+
+The HTML sup tag implemented in ruby.
+
+## Parameters
+
+This component can take 2 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 sup should have.
+
+#### # class (optional)
+
+Expects a string with all classes the sup should have.
+
+#### # text (optional)
+
+Expects a string with the text that should go into the `<sup>` tag.
+
+## Example 1: Yield a given block
+
+```ruby
+sup id: "foo", class: "bar" do
+ plain 'Hello World' # optional content
+end
+```
+
+returns
+
+```html
+<sup id="foo" class="bar">
+ Hello World
+</sup>
+```
+
+## Example 2: Render options[:text] param
+
+```ruby
+sup id: "foo", class: "bar", text: 'Hello World'
+```
+
+returns
+
+```html
+<sup id="foo" class="bar">
+ Hello World
+</sup>
+```

spec/usage/components/sup_spec.rb

@@ -0,0 +1,66 @@
+require_relative "../../support/utils"
+include Utils
+
+describe 'Sup Component', type: :feature, js: true do
+
+ it 'Example 1 - yield, no options[:text]' do
+
+ class ExamplePage < Matestack::Ui::Page
+
+ def response
+ components {
+ # simple sup
+ sup do
+ plain 'I am simple'
+ end
+
+ # enhanced sup
+ sup id: 'my-id', class: 'my-class' do
+ plain 'I am enhanced'
+ end
+ }
+ end
+
+ end
+
+ visit '/example'
+
+ static_output = page.html
+
+ expected_static_output = <<~HTML
+ <sup>I am simple</sup>
+ <sup id="my-id" class="my-class">I am enhanced</sup>
+ HTML
+
+ expect(stripped(static_output)).to include(stripped(expected_static_output))
+ end
+
+ it 'Example 2 - render options[:text]' do
+
+ class ExamplePage < Matestack::Ui::Page
+
+ def response
+ components {
+ # simple sup
+ sup text: 'I am simple'
+
+ # enhanced sup
+ sup id: 'my-id', class: 'my-class', text: 'I am enhanced'
+ }
+ end
+
+ end
+
+ visit '/example'
+
+ static_output = page.html
+
+ expected_static_output = <<~HTML
+ <sup>I am simple</sup>
+ <sup id="my-id" class="my-class">I am enhanced</sup>
+ HTML
+
+ expect(stripped(static_output)).to include(stripped(expected_static_output))
+ end
+
+end