feat(#1295) Hero banner upgrades

apps/angular-demo/src/app/hero-banner/hero-banner.component.html

@@ -1,16 +1,26 @@
 <h1>Hero Banner</h1>
 
 <h2>Default</h2>
-<goa-hero-banner
-  heading="Hero Banner"
-  backgroundurl="https://i.picsum.photos/id/1076/600/400.jpg?hmac=iLAZWoEDYRRPGnsbx7aWOGf-olRn3R5eOLDgH_IfXRw"
->
+<goa-hero-banner heading="Hero Banner">
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur optio,
   eius expedita, quasi vero maxime, laudantium voluptates eaque illum officiis
   hic!
 </goa-hero-banner>
 
-<h2>With Actions</h2>
+<h2>Default with actions</h2>
+<goa-hero-banner heading="Hero Banner">
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur optio,
+  eius expedita, quasi vero maxime, laudantium voluptates eaque illum officiis
+  hic!
+  <div slot="actions">
+    <goa-button-group>
+      <goa-button>Action</goa-button>
+      <goa-button type="tertiary">Other Action</goa-button>
+    </goa-button-group>
+  </div>
+</goa-hero-banner>
+
+<h2>Background image With Actions</h2>
 <goa-hero-banner
   heading="Hero Banner"
   backgroundurl="https://i.picsum.photos/id/1076/600/400.jpg?hmac=iLAZWoEDYRRPGnsbx7aWOGf-olRn3R5eOLDgH_IfXRw"
@@ -36,3 +46,20 @@ <h2>Min Height</h2>
   eius expedita, quasi vero maxime, laudantium voluptates eaque illum officiis
   hic!
 </goa-hero-banner>
+
+<h2>Custom background and text colors</h2>
+<goa-hero-banner
+  heading="Colorful Banner"
+  backgroundcolor="linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)"
+  textcolor="yellow"
+>
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur optio,
+  eius expedita, quasi vero maxime, laudantium voluptates eaque illum officiis
+  hic!
+  <div slot="actions">
+    <goa-button-group>
+      <goa-button>Action</goa-button>
+      <goa-button type="tertiary">Other Action</goa-button>
+    </goa-button-group>
+  </div>
+</goa-hero-banner>