Update stories

- Add EuiHeaderLinks story
  - Skipping `EuiHeaderLink` story for now as it really just has one meaningful prop that's already being tested/displayed in `EuiHeaderLinks`

- Update EuiHeader story with everything put together in `sections`

- Expand EuiHeaderLogo stories

src/components/header/_index.scss

@@ -1 +0,0 @@
-@import 'header_links/index';

src/components/header/header.stories.tsx

@@ -6,8 +6,18 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import {
+  EuiHeaderLogo,
+  EuiHeaderSectionItemButton,
+  EuiHeaderLinks,
+  EuiHeaderLink,
+  EuiIcon,
+  EuiAvatar,
+} from '../../components';
+
 import { EuiHeader, EuiHeaderProps } from './header';
 
 const meta: Meta<EuiHeaderProps> = {
@@ -24,3 +34,49 @@ export const Playground: Story = {
     theme: 'default',
   },
 };
+
+export const Sections: Story = {
+  args: {
+    position: 'fixed',
+    sections: [
+      {
+        items: [
+          <EuiHeaderLogo
+            iconType="logoElastic"
+            href="#"
+            aria-label="Go to home page"
+          />,
+          <EuiHeaderSectionItemButton aria-label="Spaces menu">
+            <EuiAvatar type="space" name="Sales Team" size="s" />
+          </EuiHeaderSectionItemButton>,
+        ],
+        breadcrumbs: [
+          { text: 'Management', href: '#' },
+          { text: 'Users', href: '#' },
+          { text: 'Create' },
+        ],
+        breadcrumbProps: {
+          'aria-label': 'Header sections breadcrumbs',
+        },
+      },
+      {
+        items: [
+          <EuiHeaderLinks aria-label="App navigation dark theme example">
+            <EuiHeaderLink isActive>Docs</EuiHeaderLink>
+            <EuiHeaderLink>Code</EuiHeaderLink>
+            <EuiHeaderLink iconType="help"> Help</EuiHeaderLink>
+          </EuiHeaderLinks>,
+          <EuiHeaderSectionItemButton aria-label="Account menu">
+            <EuiAvatar name="John Username" size="s" />
+          </EuiHeaderSectionItemButton>,
+          <EuiHeaderSectionItemButton
+            notification="1"
+            aria-label="Apps menu with 1 new app"
+          >
+            <EuiIcon type="apps" size="m" />
+          </EuiHeaderSectionItemButton>,
+        ],
+      },
+    ],
+  },
+};

src/components/header/header_links/header_links.stories.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiHeader, EuiHeaderSection, EuiHeaderSectionItem } from '../';
+
+import { EuiHeaderLink } from './header_link';
+import { EuiHeaderLinks, EuiHeaderLinksProps } from './header_links';
+
+const meta: Meta<EuiHeaderLinksProps> = {
+  title: 'EuiHeaderLinks',
+  component: EuiHeaderLinks,
+};
+
+export default meta;
+type Story = StoryObj<EuiHeaderLinksProps>;
+
+export const Playground: Story = {
+  render: ({ ...args }) => (
+    <EuiHeader position="fixed">
+      <EuiHeaderSection>
+        <EuiHeaderSectionItem>
+          <EuiHeaderLinks {...args}>
+            <EuiHeaderLink isActive>Docs</EuiHeaderLink>
+            <EuiHeaderLink>Code</EuiHeaderLink>
+            <EuiHeaderLink iconType="help"> Help</EuiHeaderLink>
+          </EuiHeaderLinks>
+        </EuiHeaderSectionItem>
+      </EuiHeaderSection>
+    </EuiHeader>
+  ),
+  args: {
+    gutterSize: 's',
+    popoverBreakpoints: ['xs', 's'],
+  },
+};

src/components/header/header_logo/header_logo.stories.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { EuiHeader } from '../header';
+import { EuiHeader, EuiHeaderSectionItem } from '../';
 import { EuiHeaderLogo, EuiHeaderLogoProps } from './header_logo';
 
 const meta: Meta<EuiHeaderLogoProps> = {
@@ -22,12 +22,28 @@ type Story = StoryObj<EuiHeaderLogoProps>;
 
 export const Playground: Story = {
   render: ({ ...args }) => (
-    <EuiHeader>
-      <EuiHeaderLogo {...args} />
+    <EuiHeader position="fixed">
+      <EuiHeaderSectionItem>
+        <EuiHeaderLogo {...args} />
+      </EuiHeaderSectionItem>
     </EuiHeader>
   ),
   args: {
     iconType: 'logoElastic',
     iconTitle: 'Elastic',
   },
 };
+
+export const WithText: Story = {
+  render: ({ ...args }) => (
+    <EuiHeader position="fixed">
+      <EuiHeaderSectionItem>
+        <EuiHeaderLogo {...args} />
+      </EuiHeaderSectionItem>
+    </EuiHeader>
+  ),
+  args: {
+    iconType: 'logoElastic',
+    children: 'Elastic',
+  },
+};

upcoming_changelogs/7005.md

@@ -11,3 +11,4 @@
 
 - Converted `EuiHeaderAlert` to Emotion; Removed unused `.euiHeaderAlert__dismiss` CSS
 - Converted `EuiHeaderSection`, `EuiHeaderSectionItem`, and `EuiHeaderSectionItemButton` to Emotion
+- Converted `EuiHeaderLinks` and `EuiHeaderLink` to Emotion; Removed `$euiHeaderLinksGutterSizes` Sass variables