[Emotion] Convert EuiHeader and EuiHeaderLogo (#6878)

* Combine global and Amsterdam and Sass vars

- makes it easier to work with and the distinction isn't necessary at this point

* Set up `header.styles.ts`

* Set up `euiHeaderVariables` and convert more shared CSS

- see `src/global_styling/variables/_header.scss` for variable definitions
- NOTE: not removing the Sass variables for now as they're used by other Sass files and also by Kibana

* Convert position styles to Emotion

- remove modifier map

+ remove `border-top` override - unnecessary since the header already has a `bottom-border`, and unused since I don't see this pattern anywhere in EUI or Kibana

+ fix incorrect logical mapping - horizontal is `inline` and vertical is `block` 🤦

* Convert default and dark theme styles to Emotion

* [EuiHeader] Convert tests to RTL

* Remove unused `euiHeaderProfile` Sass

- Only used in `src-docs/` and can be totally replaced by `panelPaddingSize` 🤷

- not used anywhere in Kibana

* [EuiHeaderLogo] Clean up CSS

- Merge Amsterdam overrides and default CSS

- Remove unused `@include euiLink` mixin - it's basically not doing anything whatsoever since the hover/focus states are being unset later

- remove unused icon size override - XL icons aren't being used anyway and the modifier map was removed in the Emotion conversion

* [EuiHeaderLogo] Convert to Emotion

+ opinionated change - tweak padding-left on logo text to match other padding on `xs` breakpoint

+ remove unused `vertical-align: middle` CSS - flex handles alignment instead

* [EuiHeaderLogo] Update tests

- convert to RTL from Enyzme + add a test for `euiHeaderLogo__text`

* [EuiHeaderLogo] Reorganize files into its own subdirectory

- to match other subcomponents

* Add storybook stories

* Delete Sass files

* changelog

src-docs/src/components/guide_page/_guide_page.scss

@@ -10,7 +10,7 @@
 .euiBody--headerIsFixed--double {
   @include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);
 
-  .euiHeader:not(.euiHeader--fixed) {
+  .euiHeader:not([data-fixed-header]) {
     // Force headers below the fullscreen.
     // This shouldn't be necessary in consuming applications because headers should always be at the top of the page
     z-index: 0;

src-docs/src/views/header/header.tsx

@@ -171,14 +171,10 @@ const HeaderUserMenu = () => {
       isOpen={isOpen}
       anchorPosition="downRight"
       closePopover={closeMenu}
-      panelPaddingSize="none"
+      panelPaddingSize="m"
     >
-      <div style={{ width: 320 }}>
-        <EuiFlexGroup
-          gutterSize="m"
-          className="euiHeaderProfile"
-          responsive={false}
-        >
+      <div style={{ width: 300 }}>
+        <EuiFlexGroup gutterSize="m" responsive={false}>
           <EuiFlexItem grow={false}>
             <EuiAvatar name="John Username" size="xl" />
           </EuiFlexItem>

src-docs/src/views/header/header_alert.tsx

@@ -278,14 +278,10 @@ const HeaderUserMenu = () => {
       isOpen={isOpen}
       anchorPosition="downRight"
       closePopover={closeMenu}
-      panelPaddingSize="none"
+      panelPaddingSize="m"
     >
-      <div style={{ width: 320 }}>
-        <EuiFlexGroup
-          gutterSize="m"
-          className="euiHeaderProfile"
-          responsive={false}
-        >
+      <div style={{ width: 300 }}>
+        <EuiFlexGroup gutterSize="m" responsive={false}>
           <EuiFlexItem grow={false}>
             <EuiAvatar name="John Username" size="xl" />
           </EuiFlexItem>

src/components/flyout/__snapshots__/flyout.test.tsx.snap

@@ -1093,7 +1093,7 @@ exports[`EuiFlyout renders extra screen reader instructions when fixed EuiHeader
 >
   <div>
     <div
-      class="euiHeader euiHeader--default euiHeader--fixed"
+      class="euiHeader emotion-euiHeader-fixed-default"
       data-fixed-header="true"
     />
     <div>

src/components/header/__snapshots__/header.test.tsx.snap

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiHeader is rendered 1`] = `
+exports[`EuiHeader renders 1`] = `
 <div
   aria-label="aria-label"
-  class="euiHeader euiHeader--default euiHeader--static testClass1 testClass2 emotion-euiTestCss"
+  class="euiHeader testClass1 testClass2 emotion-euiHeader-static-default-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiHeader renders children 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--static"
+  class="euiHeader emotion-euiHeader-static-default"
 >
   <span>
     Hello!
@@ -20,13 +20,13 @@ exports[`EuiHeader renders children 1`] = `
 
 exports[`EuiHeader renders dark theme 1`] = `
 <div
-  class="euiHeader euiHeader--dark euiHeader--static"
+  class="euiHeader emotion-euiHeader-static-dark"
 />
 `;
 
 exports[`EuiHeader renders in fixed position 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--fixed"
+  class="euiHeader emotion-euiHeader-fixed-default"
   data-fixed-header="true"
 >
   <span>
@@ -37,7 +37,7 @@ exports[`EuiHeader renders in fixed position 1`] = `
 
 exports[`EuiHeader sections render breadcrumbs and props 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--static"
+  class="euiHeader emotion-euiHeader-static-default"
 >
   <nav
     aria-label="Breadcrumbs"
@@ -53,6 +53,7 @@ exports[`EuiHeader sections render breadcrumbs and props 1`] = `
         <span
           aria-current="page"
           class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncatedLast-onlyChild-euiTextColor-default"
+          title="Breadcrumb"
         >
           Breadcrumb
         </span>
@@ -64,7 +65,7 @@ exports[`EuiHeader sections render breadcrumbs and props 1`] = `
 
 exports[`EuiHeader sections render simple items and borders 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--static"
+  class="euiHeader emotion-euiHeader-static-default"
 >
   <div
     class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
@@ -99,7 +100,7 @@ exports[`EuiHeader sections render simple items and borders 1`] = `
 
 exports[`EuiHeader throws a warning if both children and sections were passed 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--static"
+  class="euiHeader emotion-euiHeader-static-default"
 >
   <div
     class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"

src/components/header/_index.scss

@@ -1,9 +1,3 @@
-// Components
-@import 'mixins';
-
-@import 'header';
-@import 'header_profile';
 @import 'header_links/index';
-@import 'header_logo';
 @import 'header_alert/index';
 @import 'header_section/index';

src/components/header/header.stories.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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 type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiHeader, EuiHeaderProps } from './header';
+
+const meta: Meta<EuiHeaderProps> = {
+  title: 'EuiHeader',
+  component: EuiHeader,
+};
+
+export default meta;
+type Story = StoryObj<EuiHeaderProps>;
+
+export const Playground: Story = {
+  args: {
+    position: 'static',
+    theme: 'default',
+  },
+};