feat: Arg components exercise

Author: MichalBryxi

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

@@ -1,5 +1,33 @@
-<template>
-  This tutorial chapter needs to be written!
+import { hash } from '@ember/helper';
+
+const Hamster = <template>
+  🐹
+</template>;
+
+const Computer = <template>
+  🧑‍💻
+</template>;
+
+const BlueHeart = <template>💙</template>;
+const GreenHeart = <template>💚</template>;
+const OrangeHeart = <template>🧡</template>;
 
-  It could be written by you!, if you want &lt;3
+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,31 @@
-<template>
-  This tutorial chapter needs to be written!
+import { hash } from '@ember/helper';
+
+const Hamster = <template>
+  🐹
+</template>;
+
+const Computer = <template>
+  🧑‍💻
+</template>;
+
+const BlueHeart = <template>💙</template>;
+const GreenHeart = <template>💚</template>;
+const OrangeHeart = <template>🧡</template>;
 
-  It could be written by you!, if you want &lt;3
+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

@@ -48,3 +48,7 @@ const Menu = <template>
   </Sidebar>
 </template>;
 ```
+
+[Documentation on rendering values][docs]
+
+[docs]: https://guides.emberjs.com/release/in-depth-topics/rendering-values/