update docs hero docs

test-apps/new-addon/tests/dummy/app/templates/index.md

@@ -1,8 +1,8 @@
-{{docs-hero
-  logo='ember'
-  slimHeading='New'
-  strongHeading='Addon'
-  byline='A simple addon.'}}
+<DocsHero
+  @logo="ember"
+  @slimHeading="New"
+  @strongHeading="Addon"
+  @byline="A simple addon."/>
 
 # Home
 

tests/dummy/app/templates/docs/components/docs-hero.md

@@ -7,11 +7,11 @@ The component has three arguments. By default, these arguments are pulled from y
   - `prefix` and `heading` come from the `name` field
   - `byline` comes from the `description` field
 
-As long as these are present, you can just render `{{docs-hero}}` with no arguments:
+As long as these are present, you can just render `<DocsHero/>` with no arguments:
 
 <DocsDemo as |demo|>
   <demo.example @name="docs-hero-1.hbs">
-    {{docs-hero}}
+    <DocsHero/>
   </demo.example>
 
   <demo.snippet @name="docs-hero-1.hbs"/>
@@ -21,12 +21,11 @@ You can also override any of the args if necessary:
 
 <DocsDemo as |demo|>
   <demo.example @name="docs-hero-2.hbs">
-    {{docs-hero
-      prefix="EmberData"
-      heading="Something"
-      byline="The best addon ever. Now playing in theaters."
-      class="some-custom-class"
-    }}
+    <DocsHero
+      @prefix="EmberData"
+      @heading="Something"
+      @byline="The best addon ever. Now playing in theaters."
+      class="some-custom-class"/>
   </demo.example>
 
   <demo.snippet @name="docs-hero-2.hbs"/>

tests/dummy/app/templates/index.hbs

@@ -1,4 +1,4 @@
-{{docs-hero}}
+<DocsHero />
 
 <div class="docs-container docs-md">
   <section class="docs-max-w-md docs-mx-auto docs-pb-8">
@@ -13,4 +13,4 @@
       </LinkTo>
     </div>
   </section>
-</div>
+</div>