Merge pull request #1680 from MichalBryxi/Add-example-of-passing-down-argument-components

feat: Arg Components

Author: NullVoxPopuli

apps/tutorial/public/docs/6-component-patterns/8-arg-components/answer.gjs

@@ -1,5 +1,35 @@
-<template>
-  This tutorial chapter needs to be written!
+// Renders: 🐹 + 🧑‍💻 = 🧡
+
+import { hash } from '@ember/helper';
+
+const Hamster = <template>
+  🐹
+</template>;
+
+const Computer = <template>
+  🧑‍💻
+</template>;
 
-  It could be written by you!, if you want &lt;3
+const BlueHeart = <template>💙</template>;
+const GreenHeart = <template>💚</template>;
+const OrangeHeart = <template>🧡</template>;
+
+const Love = <template>
+  {{yield
+    (hash
+      blue=BlueHeart
+      green=GreenHeart
+      orange=OrangeHeart
+    )
+  }}
+</template>;
+
+const Ember = <template>
+  <@hamster /> + <@computer /> = <@love />
+</template>;
+
+<template>
+  <Love as |love|>
+    <Ember @hamster={{Hamster}} @computer={{Computer}} @love={{love.orange}} />
+  </Love>
 </template>

apps/tutorial/public/docs/6-component-patterns/8-arg-components/prompt.gjs

@@ -1,5 +1,33 @@
-<template>
-  This tutorial chapter needs to be written!
+// Renders: 🐹 + 🧑‍💻 = 🧡
+
+import { hash } from '@ember/helper';
+
+const Hamster = <template>
+  🐹
+</template>;
+
+const Computer = <template>
+  🧑‍💻
+</template>;
 
-  It could be written by you!, if you want &lt;3
+const BlueHeart = <template>💙</template>;
+const GreenHeart = <template>💚</template>;
+const OrangeHeart = <template>🧡</template>;
+
+const Love = <template>
+  {{yield
+    (hash
+      blue=BlueHeart
+      green=GreenHeart
+      orange=OrangeHeart
+    )
+  }}
+</template>;
+
+const Ember = <template>
+  <@hamster /> + <@computer /> = <@love />
+</template>;
+
+<template>
+  <Ember />
 </template>

apps/tutorial/public/docs/6-component-patterns/8-arg-components/prose.md

@@ -1,3 +1,54 @@
-This tutorial chapter needs to be written!
+Argument components are components passed down as arguments.
 
-It could be written by you!, if you want <3
+Here is an example of a `Greeter` component being passed down `Me` component as `@person` argument:
+
+```gjs
+const Me = <template>
+  NullVoxPopuli
+</template>;
+
+const Greeter = <template>
+  Hello <@person />!
+</template>;
+
+<template>
+  <Greeter @person={{Me}} />
+</template>
+```
+ 
+This pattern can be also used in cases where a _component A_ `yields` _component B_ and this one then needs to be used in _component C_:
+
+```gjs
+import { hash } from '@ember/helper';
+
+const Button = <template>
+  <button type="button">Close</button>
+</template>;
+
+const Sidebar = <template>
+  <side>
+    {{yield (hash closeButton=Button)}}
+  </side>
+</template>;
+
+const Menu = <template>
+  <nav>
+    <ul>
+      <li>Home</li>
+      <li>About</li>
+    </ul>
+  </nav>
+
+  <@closeMenu />
+</template>;
+
+<template>
+  <Sidebar as |side|>
+    <Menu @closeMenu={{side.closeButton}} />
+  </Sidebar>
+</template>;
+```
+
+[Documentation on rendering values][docs]
+
+[docs]: https://guides.emberjs.com/release/in-depth-topics/rendering-values/