Skip to content

Add dt component with docs and specs. #215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 2, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions app/concepts/matestack/ui/core/dt/dt.haml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
%dt{@tag_attributes}
- if options[:text].nil? && block_given?
= yield
- else
= options[:text]
5 changes: 5 additions & 0 deletions app/concepts/matestack/ui/core/dt/dt.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module Matestack::Ui::Core::Dt
class Dt < Matestack::Ui::Core::Component::Static

end
end
46 changes: 46 additions & 0 deletions docs/components/dt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# matestack core component: Dt

Show [specs](/spec/usage/components/dt_spec.rb)

The HTML dt tag implemented in ruby.

## Parameters

This component can take 3 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 `dt` should have.

#### # class (optional)
Expects a string with all classes the `dt` should have.

## Example 1: Yield a given block

```ruby
dt id: "foo", class: "bar" do
plain 'Hello World' # optional content
end
```

returns

```html
<dt id="foo" class="bar">
Hello World
</dt>
```

## Example 2: Render options[:text] param

```ruby
dt id: "foo", class: "bar", text: 'Hello World'
```

returns

```html
<dt id="foo" class="bar">
Hello World
</dt>
```

64 changes: 64 additions & 0 deletions spec/usage/components/dt_spec.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
require_relative "../../support/utils"
include Utils

describe 'Dt Component', type: :feature, js: true do

it 'Example 1 - yield, no options[:text]' do

class ExamplePage < Matestack::Ui::Page

def response
components {
# simple dt tag
dt do
plain 'This is simple dt text'
end

# enhanced dt tag
dt id: 'my-id', class: 'my-class' do
plain 'This is a enhanced dt with text'
end
}
end

end

visit '/example'
static_output = page.html

expected_static_output = <<~HTML
<dt>This is simple dt text</dt>
<dt id="my-id" class="my-class">This is a enhanced dt with text</dt>
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 dt tag
dt text: 'This is simple dt text'

# enhanced dt tag
dt id: 'my-id', class: 'my-class', text: 'This is a enhanced dt with text'
}
end

end

visit '/example'

static_output = page.html

expected_static_output = <<~HTML
<dt>This is simple dt text</dt>
<dt id="my-id" class="my-class">This is a enhanced dt with text</dt>
HTML

expect(stripped(static_output)).to include(stripped(expected_static_output))
end

end