From 9fcbff681475fdbf576472cbd4635e6cc2e233aa Mon Sep 17 00:00:00 2001
From: Pierre DE SOYRES <pierre.de-soyres@clever-cloud.com>
Date: Wed, 28 Feb 2024 09:27:20 +0100
Subject: [PATCH] feat(cc-logs-control): add header slot

Fixes #964
---
 src/components/cc-logs-control/cc-logs-control.js   |  4 +++-
 .../cc-logs-control/cc-logs-control.stories.js      | 13 +++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/cc-logs-control/cc-logs-control.js b/src/components/cc-logs-control/cc-logs-control.js
index 1076ecb35..1dceea4b6 100644
--- a/src/components/cc-logs-control/cc-logs-control.js
+++ b/src/components/cc-logs-control/cc-logs-control.js
@@ -69,6 +69,8 @@ const PALETTES = {
  * @cssdisplay grid
  *
  * @fires {CustomEvent<LogsControlOption>} cc-logs-control:option-change - Fires a `LogsControlOption` whenever an `option` changes.
+ *
+ * @slot header - The content of the space on top of the logs block.
  */
 export class CcLogsControl extends LitElement {
 
@@ -278,7 +280,7 @@ export class CcLogsControl extends LitElement {
 
   render () {
     return html`
-      <div class="header"></div>
+      <div class="header"><slot name="header"></slot></div>
 
       <cc-button
         class="header-scroll-button"
diff --git a/src/components/cc-logs-control/cc-logs-control.stories.js b/src/components/cc-logs-control/cc-logs-control.stories.js
index 3a9574644..75856bdca 100644
--- a/src/components/cc-logs-control/cc-logs-control.stories.js
+++ b/src/components/cc-logs-control/cc-logs-control.stories.js
@@ -1,4 +1,5 @@
 import './cc-logs-control.js';
+import '../cc-input-text/cc-input-text.js';
 import { makeStory } from '../../stories/lib/make-story.js';
 
 import { createFakeLogs, CUSTOM_METADATA_RENDERERS } from '../cc-logs/fake-logs.js';
@@ -41,6 +42,18 @@ export const defaultStory = makeStory(conf, {
   ],
 });
 
+export const withHeaderSlot = makeStory(conf, {
+  items: [
+    {
+      follow: true,
+      metadataDisplay: metadataDisplay,
+      metadataRenderers: CUSTOM_METADATA_RENDERERS,
+      logs: createFakeLogs(100, { longMessage: true, ansi: true }),
+      innerHTML: `<cc-input-text inline label="Filter" slot="header" style="width: 100%"></cc-input-text>`,
+    },
+  ],
+});
+
 export const withoutMetadataDisplay = makeStory(conf, {
   items: [
     {