"Alert" component - Actions as named blocks

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

@@ -6,13 +6,26 @@
     </div>
   {{/unless}}
 
-  <div class="hds-alert__text">
-    {{#if @title}}
-      <div class="hds-alert__title">{{@title}}</div>
-    {{/if}}
+  <div class="hds-alert__content">
+    <div class="hds-alert__text">
+      {{#if @title}}
+        <div class="hds-alert__title">{{@title}}</div>
+      {{/if}}
+      {{#if @description}}
+        <div class="hds-alert__description">{{html-safe @description}}</div>
+      {{/if}}
+    </div>
 
-    {{#if @description}}
-      <div class="hds-alert__description">{{html-safe @description}}</div>
+    {{#if (has-block "actions")}}
+      {{! IMPORTANT: don't change the formatting or it will add empty space inside the element (we're using ":empty" in CSS to hide it when it's empty!) }}
+      <div class="hds-alert__actions">{{yield
+          (hash
+            Button=(component "hds/button")
+            Link::Standalone=(component "hds/link/standalone")
+            LinkTo::Standalone=(component "hds/link-to/standalone")
+          )
+          to="actions"
+        }}</div>
     {{/if}}
   </div>
 </div>

packages/components/app/styles/components/alert.scss

@@ -105,3 +105,17 @@
     color: var(--token-color-foreground-success-on-surface);
   }
 }
+
+.hds-alert__actions {
+  align-items: center;
+  display: flex;
+  margin-top: 1rem; // 16px
+
+  > * + * {
+    margin-left: 1rem; // 16px
+  }
+
+  &:empty {
+    display: none;
+  }
+}

packages/components/tests/dummy/app/components/dummy-placeholder/index.js

@@ -11,7 +11,7 @@ export default class DummyPlaceholderIndexComponent extends Component {
   get width() {
     let { width = '100%' } = this.args;
 
-    if (typeof width === 'string' && width.match(/[\d]+/)) {
+    if (typeof width === 'string' && width.match(/^[\d]+$/)) {
       width = `${parseInt(width, 10)}px`;
     }
 
@@ -28,7 +28,7 @@ export default class DummyPlaceholderIndexComponent extends Component {
   get height() {
     let { height = '100%' } = this.args;
 
-    if (typeof height === 'string' && height.match(/[\d]+/)) {
+    if (typeof height === 'string' && height.match(/^[\d]+$/)) {
       height = `${parseInt(height, 10)}px`;
     }
 

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

@@ -100,21 +100,9 @@
       </ol>
     </dd>
 
-    <dt>🚧 hasActions <code>boolean</code></dt>
+    <dt>&lt;:actions&gt; <code>named block</code></dt>
     <dd>
-      <p>The alert has content below the
-        <code class="dummy-code">title</code>
-        and
-        <code class="dummy-code">description</code>, such as an
-        <code class="dummy-code">Hds::Button</code>
-        and an
-        <code class="dummy-code">Hds::LinkTo::Standalone</code>.
-      </p>
-      <p>Acceptable values:</p>
-      <ol>
-        <li>true</li>
-        <li class="default">false</li>
-      </ol>
+      <p>TODO</p>
     </dd>
 
     <dt>“splattributes”</dt>
@@ -268,6 +256,49 @@
       view to be useful."
   />
   <br />
+
+  <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>
 
 <section>