Skip to content

Add <s> tag to core components #214

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 8 commits into from
Oct 1, 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
2 changes: 2 additions & 0 deletions .github/pull_request_template.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
**Please make sure to target feature and bugfix requests to develop branch**

## Issue https://github.com/basemate/matestack-ui-core/issues/XXX: Short description here

### Changes
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ dynamic Web-App.

### Installation:

Click here to see how you can add Matestack UI to your existing Rails application: [Installation Guide](./docs/install)
Click here to see how you can add Matestack UI to your existing Rails application: [Installation Guide](https://www.matestack.org/docs/install)

### Features:

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

end
end

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

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

The HTML `<s>` tag implemented in ruby.

## Parameters

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

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

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

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

## Example 1
Specifying the text directly

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

returns

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

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

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

returns

```html
<s id="foo" class="bar">Hello World</s>
```
25 changes: 15 additions & 10 deletions guides/hello_world.md → guides/10_hello_world.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
# Hello World Guide

## Getting from zero to one, quickly

*Prerequisite:* We assume you have read and followed the [installation guide](/docs/install), either in a new or existing Rails application.

### Creating your first Matestack app

*A matestack `app` is something like a classic Rails `layout`. It will wrap `pages`.*

Within your `app/matestack/` folder, create a folder called `apps` and there,
we will start by adding a file called `my_app.rb`!
Put the following code inside it:

`app/matestack/apps/my_app.rb`

```ruby
class Apps::MyApp < Matestack::Ui::App

Expand All @@ -27,15 +29,19 @@ class Apps::MyApp < Matestack::Ui::App
end
```

Great! Now we have our first Matestack app inside our Rails application. It can have many pages, and adding a first one is our next step!
Great! Now we have our first matestack app inside our Rails application. It can wrap many pages, and adding a first one is our next step!

### Creating your first Matestack page
### Creating your first matestack page

*A matestack `page` is something like a classic Rails `view`. It will be wrapped by an `app`.*

Now, within `app/matestack/`, create another folder called `pages/`, and put a folder for our app in it (`my_app`).
In `app/matestack/pages/my_app/`, create a file called `my_example_page.rb` for our first view.

Notice how we describe our User Interface with elements that resemble `HTML tags` - but we can also write Ruby just the way we want to!

`app/matestack/pages/my_app/my_example_page.rb`

```ruby
class Pages::MyApp::MyExamplePage < Matestack::Ui::Page

Expand All @@ -54,7 +60,7 @@ class Pages::MyApp::MyExamplePage < Matestack::Ui::Page
end
```

After creating this example page for our example Matestack app, we're nearly finished. But as you may have guessed, we've yet to prepare the routes and the controller!
After creating this example page for our example matestack app, we're nearly finished. But as you may have guessed, we've yet to prepare the routes and the controller!

### Setting up router and controller

Expand All @@ -63,7 +69,7 @@ This is straightforward and just works *the Rails way*.
Inside `config/routes.rb`, add a route for the example page:

```ruby
scope :my_app do
Rails.application.routes.draw do
get 'my_example_page', to: 'my_app#my_example_page'
end
```
Expand All @@ -74,19 +80,18 @@ In `app/controllers/`, create a file called `my_app_controller.rb` and define ou
class MyAppController < ApplicationController

# if it is not already included in the ApplicationController
# add the Matestack ApplicationHelper here by
# uncommenting the line below
# include Matestack::Ui::Core::ApplicationHelper
include Matestack::Ui::Core::ApplicationHelper

def my_example_page
responder_for(Pages::MyApp::MyExamplePage)
end

end
```

### Test it

All we got left to do is to start Rails by entering `rails server` in the console and then head to [localhost:3000/my_app/my_example_page](http://localhost:3000/my_app/my_example_page) in our favorite browser!
All we got left to do is to start Rails by entering `rails server` in the console and then head to [localhost:3000/my_example_page](http://localhost:3000/my_example_page) in our favorite browser!

### Summary

Expand Down
Loading