Add icon implementation with manual showcase

Author: amyrlam

packages/components/addon/components/hds/alert/index.hbs

@@ -1,7 +1,17 @@
 <div class={{this.classNames}} ...attributes role="alert">
-  {{#if @icon}}
+  {{#if (or @icon @color)}}
     <div class="hds-alert__icon">
-      <FlightIcon @name={{this.icon}} @size="24" @isInlineBlock={{false}} />
+      {{#if @icon}}
+        <FlightIcon @name={{@icon}} @size="24" @isInlineBlock={{false}} />
+      {{else if (or (eq @color "neutral") (eq @color "highlight"))}}
+        <FlightIcon @name="info" @size="24" @isInlineBlock={{false}} />
+      {{else if (eq @color "success")}}
+        <FlightIcon @name="check-circle" @size="24" @isInlineBlock={{false}} />
+      {{else if (eq @color "warning")}}
+        <FlightIcon @name="alert-triangle" @size="24" @isInlineBlock={{false}} />
+      {{else if (eq @color "critical")}}
+        <FlightIcon @name="alert-octagon" @size="24" @isInlineBlock={{false}} />
+      {{/if}}
     </div>
   {{/if}}
 

packages/components/tests/dummy/app/templates/components/alert.hbs

@@ -142,7 +142,6 @@
 
   <Hds::Alert
     @color="neutral"
-    @icon="alert-triangle"
     @title="Neutral! Alert w/title & description"
     @description="Your Intention settings are currently set to default allow. This
       means that this view will show connections to every service in your
@@ -154,7 +153,6 @@
 
   <Hds::Alert
     @color="highlight"
-    @icon="alert-triangle"
     @title="Highlight! Alert w/title & description"
     @description="Your Intention settings are currently set to default allow. This
       means that this view will show connections to every service in your
@@ -166,7 +164,6 @@
 
   <Hds::Alert
     @color="success"
-    @icon="alert-triangle"
     @title="Success! Alert w/title & description"
     @description="Your Intention settings are currently set to default allow. This
       means that this view will show connections to every service in your
@@ -178,7 +175,6 @@
 
   <Hds::Alert
     @color="warning"
-    @icon="alert-triangle"
     @title="Warning! Alert w/title & description"
     @description="Your Intention settings are currently set to default allow. This
       means that this view will show connections to every service in your
@@ -190,7 +186,6 @@
 
   <Hds::Alert
     @color="critical"
-    @icon="alert-triangle"
     @title="Critical! Alert w/title & description"
     @description="Your Intention settings are currently set to default allow. This
       means that this view will show connections to every service in your
@@ -200,6 +195,18 @@
   />
   <br />
 
+  <Hds::Alert
+    @color="critical"
+    @icon="meh"
+    @title="Critical! With special icon"
+    @description="Your Intention settings are currently set to default allow. This
+      means that this view will show connections to every service in your
+      cluster. We recommend changing your Intention settings to default deny and
+      creating specific Intentions for upstream and downstream services for this
+      view to be useful."
+  />
+  <br />
+
   Other variations:
 
   <Hds::Alert @color="critical" @icon="alert-triangle" @description="Description only please" />