Add descriptions to panels

Author: MrEssex

docs/pages/components/panel.md

@@ -7,7 +7,7 @@ layout: component
 
 ```html:preview
 
-<zn-panel caption="Example Panel" flush tabbed>
+<zn-panel caption="Example Panel" description="Full Example of a panel" flush tabbed>
 
   <!-- All the panel actions -->
   <zn-chip slot="actions" icon="home">Awesome</zn-chip>
@@ -50,7 +50,7 @@ Basic panels are just that, basic. However, they are a key component in the zn f
 around been displayed in a panel.
 
 ```html:preview
-<zn-panel caption="Example Panel">
+<zn-panel caption="Example Panel" description="Simple Panels are the best">
   <div>Panel Content</div>
 </zn-panel>
 ```

src/components/panel/panel.component.ts

@@ -29,6 +29,8 @@ export default class ZnPanel extends ZincElement {
 
   @property() caption: string;
 
+  @property() description: string;
+
   @property({type: Boolean}) tabbed: boolean;
 
   @property({type: Boolean}) flush: boolean;
@@ -71,7 +73,10 @@ export default class ZnPanel extends ZincElement {
 
         ${hasHeader ? html`
           <div class="panel__header">
-            <span class="panel__caption">${this.caption}</span>
+            <div class="panel__header__left">
+              <span class="panel__caption">${this.caption}</span>
+              <span class="panel__description">${this.description}</span>
+            </div>
             ${hasActionSlot ? html`
               <slot name="actions" class="panel__header__actions"></slot>
             ` : null}

src/components/panel/panel.scss

@@ -27,10 +27,17 @@
   background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
 
   &__header {
-    display: flex;;
+    display: flex;
     justify-items: center;
     padding: var(--zn-spacing-medium) var(--zn-spacing-medium) 0;
 
+    &__left {
+      display: flex;
+      flex-direction: column;
+      gap: var(--zn-spacing-2x-small);
+      flex-grow: 1;
+    }
+
     &__actions {
       display: flex;
       gap: var(--zn-spacing-2x-small);
@@ -39,11 +46,15 @@
 
     .panel__caption {
       font-weight: var(--zn-font-weight-bold);
-      flex-grow: 1;
       font-size: var(--zn-font-size-medium);
-      color: rgba(var(--zn-text-panel-title), 100%);
-      display: flex;
-      align-items: center;
+      color: rgb(var(--zn-text-panel-title));
+      margin: 0;
+    }
+
+    .panel__description {
+      font-weight: var(--zn-font-weight-semibold);
+      font-size: var(--zn-font-size-medium);
+      color: rgb(var(--zn-text));
       margin: 0;
     }
   }