From bcf8042a2f98eb1228fa2107cfc8e1e8f90f7005 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sat, 21 Mar 2026 17:52:36 +0000
Subject: [PATCH] Improve styles for Header

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .storybook/themes/spotify.css                 |  11 +-
 .../src/components/Header/Header.stories.tsx  |  40 -----
 .../PluginHeader/PluginHeader.stories.tsx     |   8 +-
 .../recipes/PluginHeaderAndHeader.stories.tsx | 164 +++++-------------
 4 files changed, 54 insertions(+), 169 deletions(-)

diff --git a/.storybook/themes/spotify.css b/.storybook/themes/spotify.css
index 47706497d8..add82b87ab 100644
--- a/.storybook/themes/spotify.css
+++ b/.storybook/themes/spotify.css
@@ -258,19 +258,12 @@
   }
 
   .bui-PluginHeaderTabsWrapper {
-    margin: 0;
     padding: 0;
     border: none;
     background: none;
   }
-}
 
-[data-theme-mode='light'][data-theme-name='spotify'] {
-  .bui-HeaderToolbarWrapper {
-    border: 1px solid var(--bui-border-2);
-  }
-
-  .bui-HeaderTabsWrapper {
-    border: 1px solid var(--bui-border-2);
+  .bui-PluginHeaderTabsWrapper {
+    margin-left: -8px;
   }
 }
diff --git a/packages/ui/src/components/Header/Header.stories.tsx b/packages/ui/src/components/Header/Header.stories.tsx
index 0adfb43d55..82f0df7311 100644
--- a/packages/ui/src/components/Header/Header.stories.tsx
+++ b/packages/ui/src/components/Header/Header.stories.tsx
@@ -95,42 +95,6 @@ const withRouter = (Story: StoryFn) => (
   </MemoryRouter>
 );
 
-// Extract layout decorator as a reusable constant
-const layoutDecorator = [
-  (Story: StoryFn) => (
-    <>
-      <div
-        style={{
-          width: '250px',
-          position: 'fixed',
-          left: 'var(--sb-panel-left)',
-          top: 'var(--sb-panel-top)',
-          bottom: 'var(--sb-panel-bottom)',
-          backgroundColor: 'var(--sb-sidebar-bg)',
-          borderRadius: 'var(--sb-panel-radius)',
-          border: 'var(--sb-sidebar-border)',
-          borderRight: 'var(--sb-sidebar-border-right)',
-          zIndex: 1,
-        }}
-      />
-      <div
-        style={{
-          paddingLeft: 'var(--sb-content-padding-inline)',
-          minHeight: '200vh',
-        }}
-      >
-        <Story />
-        <Container>
-          <Text>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            quos.
-          </Text>
-        </Container>
-      </div>
-    </>
-  ),
-];
-
 export const Default = meta.story({
   args: {
     title: 'Page Title',
@@ -208,10 +172,6 @@ export const WithEverything = meta.story({
   ),
 });
 
-export const WithLayout = WithEverything.extend({
-  decorators: [...layoutDecorator],
-});
-
 export const WithTabsMatchingStrategies = meta.story({
   args: {
     title: 'Route Matching Demo',
diff --git a/packages/ui/src/components/PluginHeader/PluginHeader.stories.tsx b/packages/ui/src/components/PluginHeader/PluginHeader.stories.tsx
index faadd4fc67..815fadf6e7 100644
--- a/packages/ui/src/components/PluginHeader/PluginHeader.stories.tsx
+++ b/packages/ui/src/components/PluginHeader/PluginHeader.stories.tsx
@@ -119,11 +119,11 @@ export const WithCustomActions = meta.story({
       {...args}
       customActions={
         <>
-          <ButtonIcon variant="tertiary" icon={<RiCloudy2Line />} />
-          <ButtonIcon variant="tertiary" icon={<RiEmotionHappyLine />} />
-          <ButtonIcon variant="tertiary" icon={<RiHeartLine />} />
+          <ButtonIcon variant="secondary" icon={<RiCloudy2Line />} />
+          <ButtonIcon variant="secondary" icon={<RiEmotionHappyLine />} />
+          <ButtonIcon variant="secondary" icon={<RiHeartLine />} />
           <MenuTrigger>
-            <ButtonIcon variant="tertiary" icon={<RiMore2Line />} />
+            <ButtonIcon variant="secondary" icon={<RiMore2Line />} />
             <Menu placement="bottom end">
               {menuItems.map(option => (
                 <MenuItem
diff --git a/packages/ui/src/recipes/PluginHeaderAndHeader.stories.tsx b/packages/ui/src/recipes/PluginHeaderAndHeader.stories.tsx
index b3fc2efc57..729fed0985 100644
--- a/packages/ui/src/recipes/PluginHeaderAndHeader.stories.tsx
+++ b/packages/ui/src/recipes/PluginHeaderAndHeader.stories.tsx
@@ -83,11 +83,28 @@ const meta = preview.meta({
   },
 });
 
-// ---------------------------------------------------------------------------
-// Story: Catalog entity page
-// ---------------------------------------------------------------------------
+export const NoHeader = meta.story({
+  decorators: [withLayout],
+  render: () => (
+    <>
+      <PluginHeader icon={<RiCodeSSlashLine />} title="APIs" />
+      <PageContent />
+    </>
+  ),
+});
 
-export const CatalogEntityPage = meta.story({
+export const SimpleHeader = meta.story({
+  decorators: [withLayout],
+  render: () => (
+    <>
+      <PluginHeader icon={<RiCodeSSlashLine />} title="APIs" />
+      <Header title="payments-api" />
+      <PageContent />
+    </>
+  ),
+});
+
+export const WithTabs = meta.story({
   decorators: [withLayout],
   render: () => (
     <>
@@ -126,17 +143,6 @@ export const CatalogEntityPage = meta.story({
       />
       <Header
         title="payment-service"
-        breadcrumbs={[
-          { label: 'Catalog', href: '/catalog' },
-          { label: 'Services', href: '/catalog?kind=Component' },
-        ]}
-        tabs={[
-          { id: 'overview', label: 'Overview', href: '/overview' },
-          { id: 'ci-cd', label: 'CI/CD', href: '/ci-cd' },
-          { id: 'api', label: 'API', href: '/api' },
-          { id: 'dependencies', label: 'Dependencies', href: '/dependencies' },
-          { id: 'docs', label: 'Docs', href: '/docs' },
-        ]}
         customActions={
           <>
             <Button variant="secondary" iconStart={<RiEdit2Line />}>
@@ -153,11 +159,7 @@ export const CatalogEntityPage = meta.story({
   ),
 });
 
-// ---------------------------------------------------------------------------
-// Story: CI/CD pipeline view
-// ---------------------------------------------------------------------------
-
-export const CICDPipelineView = meta.story({
+export const WithBreadcrumb = meta.story({
   decorators: [withLayout],
   render: () => (
     <>
@@ -174,7 +176,7 @@ export const CICDPipelineView = meta.story({
         customActions={
           <>
             <ButtonIcon
-              variant="tertiary"
+              variant="secondary"
               icon={<RiRefreshLine />}
               aria-label="Refresh"
             />
@@ -183,11 +185,9 @@ export const CICDPipelineView = meta.story({
       />
       <Header
         title="main · #842"
-        tabs={[
-          { id: 'summary', label: 'Summary', href: '/summary' },
-          { id: 'steps', label: 'Steps', href: '/steps' },
-          { id: 'artifacts', label: 'Artifacts', href: '/artifacts' },
-          { id: 'logs', label: 'Logs', href: '/logs' },
+        breadcrumbs={[
+          { label: 'Catalog', href: '/catalog' },
+          { label: 'Services', href: '/catalog?kind=Component' },
         ]}
         customActions={
           <>
@@ -205,102 +205,49 @@ export const CICDPipelineView = meta.story({
   ),
 });
 
-// ---------------------------------------------------------------------------
-// Story: TechDocs page
-// ---------------------------------------------------------------------------
-
-export const TechDocsPage = meta.story({
+export const WithSubTabs = meta.story({
   decorators: [withLayout],
   render: () => (
     <>
       <PluginHeader
-        icon={<RiBookOpenLine />}
-        title="TechDocs"
+        icon={<RiGitBranchLine />}
+        title="CI/CD"
         titleLink="/"
         tabs={[
-          { id: 'explore', label: 'Explore', href: '/explore' },
-          { id: 'owned', label: 'Owned by me', href: '/owned' },
-          { id: 'starred', label: 'Starred', href: '/starred' },
-        ]}
-      />
-      <Header
-        title="Getting started"
-        tabs={[
-          { id: 'overview', label: 'Overview', href: '/overview' },
-          {
-            id: 'architecture',
-            label: 'Architecture',
-            href: '/architecture',
-          },
-          { id: 'runbooks', label: 'Runbooks', href: '/runbooks' },
-          { id: 'adr', label: 'ADRs', href: '/adr' },
-        ]}
-        customActions={
-          <MenuTrigger>
-            <ButtonIcon
-              variant="tertiary"
-              icon={<RiMore2Line />}
-              aria-label="More options"
-            />
-            <Menu placement="bottom end">
-              <MenuItem iconStart={<RiShareBoxLine />} href="/share">
-                Share link
-              </MenuItem>
-              <MenuItem iconStart={<RiEdit2Line />} href="/edit">
-                Edit on GitHub
-              </MenuItem>
-            </Menu>
-          </MenuTrigger>
-        }
-      />
-      <PageContent />
-    </>
-  ),
-});
-
-// ---------------------------------------------------------------------------
-// Story: Security / compliance audit page
-// ---------------------------------------------------------------------------
-
-export const SecurityAuditPage = meta.story({
-  decorators: [withLayout],
-  render: () => (
-    <>
-      <PluginHeader
-        icon={<RiShieldCheckLine />}
-        title="Security"
-        titleLink="/"
-        tabs={[
-          { id: 'overview', label: 'Overview', href: '/overview' },
-          { id: 'vulnerabilities', label: 'Vulnerabilities', href: '/vulns' },
-          { id: 'policies', label: 'Policies', href: '/policies' },
-          { id: 'audits', label: 'Audits', href: '/audits' },
+          { id: 'builds', label: 'Builds', href: '/builds' },
+          { id: 'pipelines', label: 'Pipelines', href: '/pipelines' },
+          { id: 'deployments', label: 'Deployments', href: '/deployments' },
+          { id: 'settings', label: 'Settings', href: '/settings' },
         ]}
         customActions={
           <>
             <ButtonIcon
-              variant="tertiary"
+              variant="secondary"
               icon={<RiRefreshLine />}
-              aria-label="Refresh scan"
+              aria-label="Refresh"
             />
-            <Button variant="primary" iconStart={<RiTerminalLine />}>
-              Run scan
-            </Button>
           </>
         }
       />
       <Header
-        title="payment-service"
+        title="main · #842"
         tabs={[
-          { id: 'critical', label: 'Critical', href: '/critical' },
-          { id: 'high', label: 'High', href: '/high' },
-          { id: 'medium', label: 'Medium', href: '/medium' },
-          { id: 'low', label: 'Low', href: '/low' },
+          { id: 'summary', label: 'Summary', href: '/summary' },
+          { id: 'steps', label: 'Steps', href: '/steps' },
+          { id: 'artifacts', label: 'Artifacts', href: '/artifacts' },
+          { id: 'logs', label: 'Logs', href: '/logs' },
+        ]}
+        breadcrumbs={[
+          { label: 'Catalog', href: '/catalog' },
+          { label: 'Services', href: '/catalog?kind=Component' },
         ]}
         customActions={
           <>
             <Button variant="secondary" iconStart={<RiDownloadLine />}>
-              Export report
+              Download logs
+            </Button>
+            <Button variant="primary" iconStart={<RiPlayLine />}>
+              Re-run pipeline
             </Button>
           </>
         }
@@ -309,18 +256,3 @@ export const SecurityAuditPage = meta.story({
     </>
   ),
 });
-
-// ---------------------------------------------------------------------------
-// Story: Minimal — no tabs, no actions
-// ---------------------------------------------------------------------------
-
-export const Minimal = meta.story({
-  decorators: [withLayout],
-  render: () => (
-    <>
-      <PluginHeader icon={<RiCodeSSlashLine />} title="APIs" titleLink="/" />
-      <Header title="payments-api" />
-      <PageContent />
-    </>
-  ),
-});