Introduce new widget EmptyStateBar

asset/css/empty-state.less

@@ -0,0 +1,11 @@
+.empty-state {
+  color: @empty-state-color;
+}
+
+.empty-state-bar {
+  padding: 1em;
+  text-align: center;
+
+  .rounded-corners();
+  background-color: @empty-state-bar-bg;
+}

asset/css/variables.less

@@ -121,6 +121,9 @@
 @schedule-element-fields-disabled-selected-bg: @base-gray-light;
 @schedule-element-keyboard-note-bg: @base-gray-light;
 
+@empty-state-color: @base-disabled;
+@empty-state-bar-bg: @base-gray-lighter;
+
 @empty-state-bg-in-lists: @base-gray-lighter;
 @list-item-title-hover-color: @base-primary-color;
 @list-item-separation-bg: @base-gray-light;
@@ -204,6 +207,9 @@
     --schedule-element-fields-disabled-selected-bg: var(--base-gray-light);
     --schedule-element-keyboard-note-bg: var(--base-gray-light);
 
+    --empty-state-color: var(--base-disabled);
+    --empty-state-bar-bg: var(--base-gray-lighter);
+
     --empty-state-bg-in-lists: var(--base-gray-lighter);
     --list-item-title-hover-color: var(--base-primary-color);
     --list-item-separation-bg: var(--base-gray-light);

src/Widget/EmptyStateBar.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace ipl\Web\Widget;
+
+use ipl\Html\BaseHtmlElement;
+
+class EmptyStateBar extends BaseHtmlElement
+{
+    /** @var mixed Content */
+    protected $content;
+
+    protected $tag = 'div';
+
+    protected $defaultAttributes = ['class' => ['empty-state', 'empty-state-bar']];
+
+    /**
+     * Create an empty list
+     *
+     * @param mixed $content
+     */
+    public function __construct($content)
+    {
+        $this->content = $content;
+    }
+
+    protected function assemble(): void
+    {
+        $this->add($this->content);
+    }
+}