added showcase for “actions” in “Alert” component

Author: didoo

packages/components/tests/dummy/app/styles/app.scss

@@ -3,6 +3,7 @@
 
 @import "./_typography";
 
+@import "./pages/db-alert";
 @import "./pages/db-badge";
 @import "./pages/db-breadcrumb";
 @import "./pages/db-button";

packages/components/tests/dummy/app/styles/pages/db-alert.scss

@@ -0,0 +1,15 @@
+// ALERT
+
+.dummy-alert-sample-custom-actions__actions {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+}
+
+.dummy-alert-sample-custom-actions__text {
+    @include dummyFontFamily();
+    @include dummyFontSize(0.8rem);
+    display: block;
+    color: #999;
+    margin-top: 1rem;
+}

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

@@ -155,7 +155,7 @@
   />
   <br />
   Below alert with no title, no description, does not appear in local dev (see error in console):
-  <Hds::Alert @icon="meh" />
+  {{! <Hds::Alert @icon="meh" /> }}
   <br />
 </section>
 
@@ -177,4 +177,46 @@
 
   <h4 class="dummy-h4">Color:</h4>
 
+  <h4 class="dummy-h4">Actions</h4>
+  <span class="dummy-text-small">with actions passed as yielded components</span>
+  <Hds::Alert
+    @icon="alert-triangle"
+    @title="This is the title"
+    @description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  >
+    <:actions as |A|>
+      <A.Button @text="Button" @size="small" @color="secondary" />
+      <A.Button @icon="plus" @text="Button" @size="small" @color="tertiary" />
+      <A.Link::Standalone @icon="plus" @text="Link" href="#" @size="small" @color="secondary" />
+    </:actions>
+  </Hds::Alert>
+  <br />
+  <span class="dummy-text-small">with content yielded in the "actions" named block</span>
+  <Hds::Alert
+    @icon="alert-triangle"
+    @title="This is the title"
+    @description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  >
+    <:actions>
+      <DummyPlaceholder @text="generic content" @height="80" @background="#e1f5fe" />
+    </:actions>
+  </Hds::Alert>
+  <br />
+  <span class="dummy-text-small">with custom content yielded in the "actions" named block</span>
+  <Hds::Alert
+    @icon="alert-triangle"
+    @title="This is the title"
+    @description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  >
+    <:actions>
+      <div>
+        <div class="dummy-alert-sample-custom-actions__actions">
+          <Hds::Button @text="Button" @size="small" @color="secondary" />
+          <Hds::Link::Standalone @icon="plus" @text="Link text" href="#" @size="small" @color="secondary" />
+        </div>
+        <span class="dummy-alert-sample-custom-actions__text">This for example could be extra text, specific only for
+          one special use case.</span>
+      </div>
+    </:actions>
+  </Hds::Alert>
 </section>