Skip to content

Add article component with docs and specs #122

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

Closed
wants to merge 11 commits into from
Closed
19 changes: 19 additions & 0 deletions .github/issue_template.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!-- This is a template only, remove/add sections below as appropriate (e.g. for a new feature, there might be no 'current behaviour'.) -->

<!-- First indicate whether you want to request an ENHANCEMENT or report a BUG by using the correct Github label in the side panel* -->

**What is the current behaviour?**

<!-- add current behaviour here -->

**If the current behaviour is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug might get fixed faster if we can run your code and it doesn't have extra dependencies. Add a link to a sample repo and/or any relevant code below:**

<!-- add additional links/info here -->

**What is the expected behaviour?**

<!-- add expected behaviour here -->

**Which versions of Matestack, and which browser/OS are affected by this issue? Did this work in previous versions of Matestack?**

<!-- add version and browser(s) affected, where relevant -->
9 changes: 9 additions & 0 deletions .github/pull_request_template.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
## Issue https://github.com/basemate/matestack-ui-core/issues/XXX: Short description here

### Changes

- [x] Describe the changes in one or more bulletpoints

### Notes

- Let the reviewers know something special
10 changes: 1 addition & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -213,15 +213,7 @@ Changelog can be found [here](./CHANGELOG.md)

### Roadmap

Scheduled for 0.7.0:
- Better naming conventions
- Webpacker/Yarn Integration
- Advanced Websockets Integration
- 1:n Relations in Form components
- More Form Components (Multi Select Components)
- Component Based Caching
- Rails View Integration
- Dockerized Core Development
We're currently finalizing the roadmap towards to a stable 1.0 release, supposed to happen towards the end of the year! For details make sure to check the [release management project](https://github.com/basemate/matestack-ui-core/projects/2) and get in touch via our [chat](https://gitter.im/basemate/community) for feedback!

### Community

Expand Down
5 changes: 5 additions & 0 deletions app/concepts/matestack/ui/core/article/article.haml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
%article{@tag_attributes}
- if options[:text].nil? && block_given?
= yield
- else
= options[:text]
5 changes: 5 additions & 0 deletions app/concepts/matestack/ui/core/article/article.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module Matestack::Ui::Core::Article
class Article < Matestack::Ui::Core::Component::Static

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

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

The HTML article 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 span should have.

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

## Example 1: Yield a given block

```ruby
article do
paragraph text: "Hello world"
end
```

returns

```html
<article>
<p>Hello world</p>
</article>
```

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

```ruby
article text: "Hello world"
```

returns

```html
<article>Hello world</article>
```
27 changes: 6 additions & 21 deletions docs/components/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,33 +8,18 @@ Show [specs](../../spec/usage/components/form_spec.rb)

These examples show generic use cases and can be used as a guideline of what is possible with the form core component.

Beforehand, we define open routes for the form input in our `config/routes.rb`:
Beforehand, we define some example routes for the form input in our `config/routes.rb`:

```ruby
post '/success_form_test/:id', to: 'form_test#success_submit', as: 'success_form_test'
post '/failure_form_test/:id', to: 'form_test#failure_submit', as: 'failure_form_test'
post '/model_form_test', to: 'model_form_test#model_submit', as: 'model_form_test'
```

We also configure our controllers to accept form input and react in a predictable and verbose way:
We also configure our example controllers to accept form input and react in a predictable and verbose way:

```ruby
class TestController < ActionController::Base

before_action :check_params

def check_params
expect_params(params.permit!.to_h)
end

def expect_params(params)
end

end
```

```ruby
class FormTestController < TestController
class FormTestController < ApplicationController

def success_submit
render json: { message: 'server says: form submitted successfully' }, status: 200
Expand All @@ -51,7 +36,7 @@ end
```

```ruby
class ModelFormTestController < TestController
class ModelFormTestController < ApplicationController

def model_submit
@test_model = TestModel.create(model_params)
Expand Down Expand Up @@ -110,7 +95,7 @@ end

When we visit `localhost:3000/example`, fill in the input field with *bar* and click the submit button, our `FormTestController` receives the input.

Furthermore, our *bar* input disappears from the input field and we get displayed our nice little succes message of `server says: form submitted successfully` - Easy!
Furthermore, our *bar* input disappears from the input field - Easy!

### Example 2: Async submit request with failure event

Expand Down Expand Up @@ -157,7 +142,7 @@ Now, when we visit our example page on `localhost:3000/example` and fill in the

In this example, things get a bit more complex. We now want to transition to another page of our application after successfully submitting a form!

First, we define our application layout with messages, using the *async core component*:
In order to additionally show a success/failure message, we define our matestack app layout with messages, using the *async core component*:

```ruby
class Apps::ExampleApp < Matestack::Ui::App
Expand Down
5 changes: 5 additions & 0 deletions docs/contribute/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ If you want to contribute and are unsure what to work on, take a look at the [op

Other case: You plan to built something that you think should be part of the Matestack UI Core (or you have already built it)? Great, then open a pull request and we will take a look!

## How to contribute

Please create a pull request to the `develop` branch with your tested and documented code. Bonus points for using our PR template!


## Documentation

Documentation can be found in the `/docs` folder. Please make sure to cover basic use cases of your concepts & components for other users!
Expand Down
52 changes: 52 additions & 0 deletions spec/usage/components/article_spec.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
require_relative "../../support/utils"
include Utils

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

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

class ExamplePage < Matestack::Ui::Page

def response
components {
article do
paragraph text: "Hello world"
end
}
end

end

visit '/example'
static_output = page.html

expected_static_output = <<~HTML
<article><p>Hello world</p></article>
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 {
article text: "Hello world"
}
end

end

visit '/example'

static_output = page.html

expected_static_output = <<~HTML
<article>Hello world</article>
HTML

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

end