Merge pull request #350 from matestack/exchange-component-order

Adjust the order in which components are provided

Author: jonasjabari

docs/concepts/component.md

@@ -219,26 +219,19 @@ This gets rendered into HTML as shown below. Notice that the `@foo` from the com
 To use *component instance scope slots*, first define slots within a static component:
 
 ```ruby
-class Components::Some::Component < Matestack::Ui::StaticComponent
+class Components::Other::Component < Matestack::Ui::StaticComponent
 
   def prepare
-    @foo = "foo from component"
+    @foo = "foo from other component"
   end
 
   def response
     components {
-      div id: "my-component" do
-        custom_other_component slots: {
-          my_slot_from_component: my_slot_from_component,
-          my_slot_from_page: @options[:my_slot_from_page]
-        }
-      end
-    }
-  end
-
-  def my_slot_from_component
-    slot {
-      span id: "my-slot-from-component" do
+      div id: "my-other-component" do
+        slot @options[:slots][:my_slot_from_component]
+        br
+        slot @options[:slots][:my_slot_from_page]
+        br
         plain @foo
       end
     }
@@ -247,22 +240,29 @@ class Components::Some::Component < Matestack::Ui::StaticComponent
 end
 ```
 
-And another component:
+and also in some component:
 
 ```ruby
-class Components::Other::Component < Matestack::Ui::StaticComponent
+class Components::Some::Component < Matestack::Ui::StaticComponent
 
   def prepare
-    @foo = "foo from other component"
+    @foo = "foo from component"
   end
 
   def response
     components {
-      div id: "my-other-component" do
-        slot @options[:slots][:my_slot_from_component]
-        br
-        slot @options[:slots][:my_slot_from_page]
-        br
+      div id: "my-component" do
+        custom_other_component slots: {
+          my_slot_from_component: my_slot_from_component,
+          my_slot_from_page: @options[:my_slot_from_page]
+        }
+      end
+    }
+  end
+
+  def my_slot_from_component
+    slot {
+      span id: "my-slot-from-component" do
         plain @foo
       end
     }
@@ -271,7 +271,7 @@ class Components::Other::Component < Matestack::Ui::StaticComponent
 end
 ```
 
-Then, put both components to use on the example page:
+Then, put both components (note that some component uses other component so that's how they're both in here) to use on the example page:
 
 ```ruby
 class Pages::ExamplePage < Matestack::Ui::Page
@@ -367,7 +367,7 @@ Not a fancy example, but this is the result:
 <div id="div-on-page">
   <div id="my-component">
     foo from page
-  </div>  
+  </div>
 </div>
 ```