Skip to content

rename pg component to paragraph component #48

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 2 commits into from
Jun 4, 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/paragraph/cell/paragraph.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module Paragraph::Cell
class Paragraph < Component::Cell::Static

end
end
8 changes: 8 additions & 0 deletions app/concepts/paragraph/view/paragraph.haml
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
- if options[:text].nil?
%p{@tag_attributes}
- if block_given?
= yield

- else
%p{@tag_attributes}
= options[:text]
73 changes: 73 additions & 0 deletions docs/components/paragraph.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
# matestack core component: Paragraph

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

The HTML `<p>` tag implemented in ruby. This is a workaround because the single `p` is the short version of `puts` in ruby.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@PasWen actually p is a bit different from puts, it's not the short version. p calls .inspect on the printed object, puts not.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey,
thanks for pointing it out, just fixed it in the documentation (and learned sth new on the way;)!


## Parameters

This component can take 3 optional configuration params and optional content.

#### # id (optional)
Expects a string with all ids the p should have.

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

#### # text (optional)
Expects a string with the text that should go into the `<p>` tag.

## Example 1
Specifying the text directly

```ruby
div id: "foo", class: "bar" do
paragraph text: "Hello World"
end
```

returns

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

## Example 2
Rendering a content block between the `<p>` tags

```ruby
div id: "foo", class: "bar" do
paragraph do
plain "Hello World"
end
end
```

returns

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

## Example 3
Rendering a `<span>` tag into `<p>` tags

```ruby
paragraph id: "foo", class: "bar" do
span do
plain "Hello World"
end
end
```

returns

```html
<p id="foo" class="bar">
<span>Hello World</span>
</p>
```
72 changes: 2 additions & 70 deletions docs/components/pg.md
Original file line number Diff line number Diff line change
@@ -1,73 +1,5 @@
# matestack core component: Pg
# matestack core component: PG

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

The HTML `<p>` tag implemented in ruby. This is a workaround because the single `p` is the short version of `puts` in ruby.

## Parameters

This component can take 3 optional configuration params and optional content.

#### # id (optional)
Expects a string with all ids the p should have.

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

#### # text (optional)
Expects a string with the text that should go into the `<p>` tag.

## Example 1
Specifying the text directly

```ruby
div id: "foo", class: "bar" do
pg text: "Hello World"
end
```

returns

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

## Example 2
Rendering a content block between the `<p>` tags

```ruby
div id: "foo", class: "bar" do
pg do
plain "Hello World"
end
end
```

returns

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

## Example 3
Rendering a `<span>` tag into `<p>` tags

```ruby
pg id: "foo", class: "bar" do
span do
plain "Hello World"
end
end
```

returns

```html
<p id="foo" class="bar">
<span>Hello World</span>
</p>
```
The HTML `<p>` tag implemented in ruby. Please refer to the [paragraph core component](./paragraph.md) since the PG component is deprecated and will be removed sometime in the future.
2 changes: 1 addition & 1 deletion spec/usage/components/action_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -534,7 +534,7 @@ class Pages::ExampleApp::SecondExamplePage < Page::Cell::Page
def response
components {
heading size: 2, text: "This is Page 2"
pg text: 'You made it!'
paragraph text: 'You made it!'
}
end

Expand Down
2 changes: 1 addition & 1 deletion spec/usage/components/footer_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ def response

# advanced footer tag
footer id: 'my-unique-footer', class: 'awesome-footer' do
pg class: 'footer-text', text: 'hello world!'
paragraph class: 'footer-text', text: 'hello world!'
end
}
end
Expand Down
36 changes: 36 additions & 0 deletions spec/usage/components/paragraph_spec.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
require_relative '../../support/utils'
include Utils

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

it 'Example 1' do

class ExamplePage < Page::Cell::Page

def response
components {
# simple paragraph
paragraph text: 'I am simple'

# enhanced paragraph
paragraph id: 'my-id', class: 'my-class' do
plain 'I am enhanced'
end
}
end

end

visit '/example'

static_output = page.html

expected_static_output = <<~HTML
<p>I am simple</p>
<p id="my-id" class="my-class">I am enhanced</p>
HTML

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

end
4 changes: 2 additions & 2 deletions spec/usage/components/time_spec.rb
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ class ExamplePage < Page::Cell::Page
def response
components {
# simple time tag
pg do
paragraph do
plain 'This should show '
time class: 'my-simple-time' do
plain '12:00'
end
end

# time tag with timestamp
pg id: 'my-parent-paragraph' do
paragraph id: 'my-parent-paragraph' do
plain 'Today is '
time id: 'example-timestamp', datetime: DateTime.new(2019,2,12,10,38,39,'+02:00') do
plain 'July 7'
Expand Down