feat(side-by-side): Add icon to placeholder (#587)

* feat(side-by-side): Add icon to placeholder

* chore: Use placeholder component in dummy app

* chore: Bump package version

* chore: Update tests

addon/components/nrg-side-by-side/placeholder.hbs

@@ -1,7 +1,10 @@
 {{#if (has-block)}}
   {{yield}}
 {{else}}
-  <div class="ui header" ...attributes>
-    {{or @text "Please select an item"}}
+  <div class="ui center aligned icon header" ...attributes>
+    <i class="large list icon"></i>
+    <div class="content">
+      {{or @text "Please select an item"}}
+    </div>
   </div>
 {{/if}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-nrg-ui",
-  "version": "4.7.10",
+  "version": "4.8.0",
   "description": "Opinionated UI addon based on how KUB scaffolds web applications",
   "keywords": [
     "ember-addon",

tests/dummy/app/components/freestyle/side-by-side.hbs

@@ -19,7 +19,7 @@
               </div>
             </NrgResponsiveTakeover>
           {{else}}
-            <h2>Select a human</h2>
+            <NrgSideBySide::Placeholder />
           {{/if}}
         </:secondary>
 

tests/integration/components/nrg-side-by-side/placeholder-test.js

@@ -11,15 +11,17 @@ module(
     test('it renders (inline)', async function (assert) {
       await render(hbs`<NrgSideBySide::Placeholder />`);
 
-      assert.dom('div.ui.header').hasText('Please select an item');
+      assert.dom('div.ui.header > .content').hasText('Please select an item');
+      assert.dom('div.ui.header > i').hasClass('list');
 
       await render(
         hbs`<NrgSideBySide::Placeholder @text="Please select an item from the list" />`
       );
 
       assert
-        .dom('div.ui.header')
+        .dom('div.ui.header > .content')
         .hasText('Please select an item from the list');
+      assert.dom('div.ui.header > i').hasClass('list');
     });
 
     test('it renders (block)', async function (assert) {