feat(cc-logs-control): add header slot

Fixes #964
CleverCloud · Apr 11, 2024 · 9fcbff6 · 9fcbff6
1 parent bc67946
commit 9fcbff6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git 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
@@ -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: [
     {