@ember-eui/core 4.3.0 → 5.0.0-alpha.3

package/docs/layout/header-demo/demo1.md

@@ -1,45 +1,175 @@
-# Demo
+---
+order: 1
+---
+
+# Header
+
+<EuiText>
+  The header is made up of
+  <strong>many</strong>
+  individual components starting with
+  <strong>EuiHeader</strong>
+  as the container. You can manually configure your header with the following
+  related components:
+  <br />
+  <br />
+
+  <ul>
+    <li><strong>EuiHeaderSection</strong>: Left/right containers with flex
+      properties.</li>
+    <li>
+      <strong>EuiHeaderSectionItem</strong>: Containers for individual header
+      items as flex items.</li>
+    <li><strong>EuiHeaderSectionItemButton</strong>: Specialized button that
+      extends EuiButtonEmpty but styled to fit the height of the header with
+      additional
+      <EuiCode>notification</EuiCode>
+      props.</li>
+    <li><strong>EuiHeaderLogo</strong>: A helpful component for creating a
+      linked logo that fits within the header sizing.</li>
+    <!-- <li><strong>EuiHeaderBreadcrumbs</strong>: A set of EuiBreadcrumbs
+      specifically stylized to fit inside the header.</li> -->
+  </ul>
+</EuiText>
 
 ```hbs template
-<EuiButtonEmpty {{on "click" (fn this.toggleHeaderPosition "header1Fixed")}}>
-  Toggle Header 1
-</EuiButtonEmpty>
-<EuiButtonEmpty {{on "click" (fn this.toggleHeaderPosition "header2Fixed")}}>
-  Toggle Header 2
-</EuiButtonEmpty>
-<EuiHeader @position={{if this.header1Fixed "fixed"}}>
-  <EuiHeaderSection @side="left">
-    <EuiHeaderSectionItem @border="right">
-      <EuiHeaderLogo @href="">
-        Header 1
-      </EuiHeaderLogo>
+<EuiHeader>
+  <EuiHeaderSection @side='left'>
+    <EuiHeaderSectionItem @border='right'>
+      <EuiHeaderLogo @iconType='logoElastic' aria-label='Go to home page' />
     </EuiHeaderSectionItem>
-    <EuiHeaderSectionItem @border="right">
-      <EuiHeaderSectionItemButton>
-        <EuiAvatar @name="Planta Prysmex" @type="space" @initialLength={{2}} @size="s" />
+    <EuiHeaderSectionItem @border='right'>
+      <EuiHeaderSectionItemButton @ref={{set this 'btn'}}>
+        <EuiAvatar
+          @name='Planta Prysmex'
+          @type='space'
+          @initialLength={{2}}
+          @size='s'
+        />
       </EuiHeaderSectionItemButton>
     </EuiHeaderSectionItem>
   </EuiHeaderSection>
-  <EuiHeaderSection @side="right">
-    <EuiHeaderSectionItem @border="left">
-      <EuiHeaderSectionItemButton @notification="3" @notificationColor="accent">
-        <EuiIcon @type="bell" @size="m" />
-      </EuiHeaderSectionItemButton>
+  <EuiHeaderBreadcrumbs
+    aria-label='Header breadcrumbs example'
+    @breadcrumbs={{this.breadcrumbs}}
+  />
+  <EuiHeaderSection @side='right'>
+    <EuiHeaderSectionItem @border='left'>
+      <EuiPopover
+        @isOpen={{this.userPopover}}
+        @closePopover={{set this 'userPopover' false}}
+      >
+        <:button>
+          <EuiHeaderSectionItemButton
+            aria-controls='header1'
+            aria-expanded={{this.isOpen}}
+            aria-haspopup='true'
+            aria-label='Account menu'
+            @onClick={{this.onMenuButtonClick}}
+          >
+            <EuiAvatar
+              @name='David Martinez'
+              @type='user'
+              @initialLength={{2}}
+              @size='s'
+            />
+          </EuiHeaderSectionItemButton>
+        </:button>
+        <:content>
+          <div style='width:320px;'>
+            <EuiFlexGroup
+              @gutterSize='m'
+              class='euiHeaderProfile'
+              @responsive={{false}}
+            >
+              <EuiFlexItem @grow={{false}}>
+                <EuiAvatar @name='David Martinez' @size='xl' />
+              </EuiFlexItem>
+
+              <EuiFlexItem>
+                <EuiText>
+                  <p>David Martinez</p>
+                </EuiText>
+
+                <EuiSpacer @size='m' />
+
+                <EuiFlexGroup>
+                  <EuiFlexItem>
+                    <EuiFlexGroup @justifyContent='spaceBetween'>
+                      <EuiFlexItem @grow={{false}}>
+                        <EuiLink>Edit profile</EuiLink>
+                      </EuiFlexItem>
+
+                      <EuiFlexItem @grow={{false}}>
+                        <EuiLink>Log out</EuiLink>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </div>
+        </:content>
+      </EuiPopover>
+
     </EuiHeaderSectionItem>
-    <EuiHeaderSectionItem @border="left">
-      <EuiHeaderSectionItemButton>
-        <EuiAvatar @name="David Martinez" @type="user" @initialLength={{2}} @size="m" />
+    <EuiHeaderSectionItem @border='left'>
+      <EuiHeaderSectionItemButton @notification='3' @notificationColor='accent'>
+        <EuiIcon @type='bell' @size='m' />
       </EuiHeaderSectionItemButton>
     </EuiHeaderSectionItem>
+    <EuiHeaderSectionItem @border='left'>
+
+      <EuiPopover
+        @isOpen={{this.appsPopover}}
+        @closePopover={{set this 'appsPopover' false}}
+        @anchorPosition="downRight"
+      >
+        <:button>
+          <EuiHeaderSectionItemButton
+            aria-label='Apps menu with 1 new app'
+            @notification='1'
+            @onClick={{set this 'appsPopover' true}}
+          >
+            <EuiIcon @type='apps' size='m' />
+          </EuiHeaderSectionItemButton>
+        </:button>
+        <:content>
+          <EuiKeyPadMenu id='headerAppKeyPadMenuId' style="width: 288px">
+            <EuiKeyPadMenuItem @label='Discover'>
+              <EuiIcon @type='discoverApp' @size='l' />
+            </EuiKeyPadMenuItem>
+
+            <EuiKeyPadMenuItem @label='Dashboard'>
+              <EuiIcon @type='dashboardApp' @size='l' />
+            </EuiKeyPadMenuItem>
+
+            <EuiKeyPadMenuItem @label='Dev Tools'>
+              <EuiIcon @type='devToolsApp' @size='l' />
+            </EuiKeyPadMenuItem>
+
+            <EuiKeyPadMenuItem @label='Machine Learning'>
+              <EuiIcon @type='machineLearningApp' @size='l' />
+            </EuiKeyPadMenuItem>
+
+            <EuiKeyPadMenuItem @label='Graph'>
+              <EuiIcon @type='graphApp' @size='l' />
+            </EuiKeyPadMenuItem>
+
+            <EuiKeyPadMenuItem @label='Visualize'>
+              <EuiIcon @type='visualizeApp' @size='l' />
+            </EuiKeyPadMenuItem>
+
+            <EuiKeyPadMenuItem @label='Timelion' @betaBadgeLabel='Beta'>
+              <EuiIcon @type='timelionApp' @size='l' />
+            </EuiKeyPadMenuItem>
+          </EuiKeyPadMenu>
+        </:content>
+      </EuiPopover>
+
+    </EuiHeaderSectionItem>
   </EuiHeaderSection>
 </EuiHeader>
-<EuiHeader @theme="dark" @position={{if this.header2Fixed "fixed"}}>
-  <EuiHeaderSectionItem @border="right">
-    <EuiHeaderLogo @href="">
-      Header 2
-    </EuiHeaderLogo>
-  </EuiHeaderSectionItem>
-</EuiHeader>
 ```
 
 ```js component
@@ -48,12 +178,131 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class DemoHeaderComponent extends Component {
-  @tracked header1Fixed = false;
-  @tracked header2Fixed = false;
+  @tracked isOpen = false;
+  @tracked userPopover = false;
+  @tracked appsPopover = false;
+  @tracked btn;
+
+  spacesValues = [
+    {
+      label: 'Sales team',
+      prepend: {
+        type: 'space',
+        name: 'Sales Team',
+        size: 's'
+      },
+      checked: 'on'
+    },
+    {
+      label: 'Engineering',
+      prepend: {
+        type: 'space',
+        name: 'Engineering',
+        size: 's'
+      }
+    },
+    {
+      label: 'Security',
+      prepend: {
+        type: 'space',
+        name: 'Security',
+        size: 's'
+      }
+    },
+    {
+      label: 'Default',
+      prepend: {
+        type: 'space',
+        name: 'Default',
+        size: 's'
+      }
+    }
+  ];
+
+  additionalSpaces = [
+    {
+      label: 'Sales team 2',
+      prepend: {
+        type: 'space',
+        name: 'Sales Team 2',
+        size: 's'
+      }
+    },
+    {
+      label: 'Engineering 2',
+      prepend: {
+        type: 'space',
+        name: 'Engineering 2',
+        size: 's'
+      }
+    },
+    {
+      label: 'Security 2',
+      prepend: {
+        type: 'space',
+        name: 'Security 2',
+        size: 's'
+      }
+    },
+    {
+      label: 'Default 2',
+      prepend: {
+        type: 'space',
+        name: 'Default 2',
+        size: 's'
+      }
+    }
+  ];
+
+  animate = () => {
+    this.btn?.euiAnimate?.();
+  };
+
+  breadcrumbs = [
+    {
+      text: 'Management',
+      href: '#',
+      onClick: (e) => {
+        e.preventDefault();
+      },
+      'data-test-subj': 'breadcrumbsAnimals',
+      className: 'customClass'
+    },
+    {
+      text: 'Truncation test is here for a really long item',
+      href: '#',
+      onClick: (e) => {
+        e.preventDefault();
+      }
+    },
+    {
+      text: 'Hidden',
+      href: '#',
+      onClick: (e) => {
+        e.preventDefault();
+      }
+    },
+    {
+      text: 'Users',
+      href: '#',
+      onClick: (e) => {
+        e.preventDefault();
+      }
+    },
+    {
+      text: 'Create'
+    }
+  ];
+
+  @action
+  onClick(e) {
+    e.preventDefault();
+  }
 
   @action
-  toggleHeaderPosition(header) {
-    this[header] = !this[header];
+  onMenuButtonClick(e) {
+    e.preventDefault();
+    this.userPopover = true;
   }
 }
 ```

package/docs/layout/header-demo/demo2.md

@@ -0,0 +1,42 @@
+---
+order: 2
+---
+
+# Header links
+
+<EuiText>
+  <p>
+    In addition to the components mentioned prior, which lend themselves to more application style navigation patterns, <strong>EuiHeaderLinks</strong> and <strong>EuiHeaderLink</strong> supply the ability to inline a list of navigational or menu style links.
+  </p>
+  <p>
+    <strong>EuiHeaderLinks</strong> comes with responsive functionality built-in which will convert the inline list of links to a popover list triggered by a <strong>EuiHeaderSectionItemButton</strong>. You can adjust at which breakpoints to switch to the popover display by passing your own array of named breakpoints to <EuiCode>popoverBreakpoints</EuiCode>.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiHeader>
+  <EuiHeaderSectionItem @border='right'>
+    <EuiHeaderLogo>Elastic</EuiHeaderLogo>
+  </EuiHeaderSectionItem>
+
+  <EuiHeaderSectionItem>
+    <EuiHeaderLinks aria-label='App navigation links example'>
+      <EuiHeaderLink @isActive={{false}}>Docs</EuiHeaderLink>
+
+      <EuiHeaderLink>Code</EuiHeaderLink>
+
+      <EuiHeaderLink @iconType='help'>Help</EuiHeaderLink>
+    </EuiHeaderLinks>
+  </EuiHeaderSectionItem>
+</EuiHeader>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoHeaderComponent extends Component {
+  @tracked isFixedPosition = false;
+}
+```

package/docs/layout/header-demo/demo3.md

@@ -0,0 +1,48 @@
+---
+order: 3
+---
+
+# Fixed header
+
+<EuiText>
+  <p>
+  Most consumers need a header that does not scroll away with the page contents. You can apply this display by applying the property <EuiCode @language="jsx">position="fixed"</EuiCode>. This will also add a class of <EuiCode>.euiBody--headerIsFixed</EuiCode> to the window body.
+  </p>
+  <p>
+  You will then need to apply your own padding to this body class to afford for the header height. EUI supplies a helper mixin that also accounts for this height in flyouts and the collapsible nav.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiSwitch
+  @label={{'Make header fixed position'}}
+  @checked={{eq this.position 'fixed'}}
+  @onChange={{this.setPosition}}
+/>
+<EuiSpacer />
+<EuiHeader @position={{this.position}}>
+  <EuiHeaderSection @side='left'>
+    <EuiHeaderSectionItem @border='right'>
+      <EuiHeaderLogo>Elastic</EuiHeaderLogo>
+    </EuiHeaderSectionItem>
+  </EuiHeaderSection>
+</EuiHeader>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoHeaderComponent extends Component {
+  @tracked position = 'static';
+
+  setPosition = (e) => {
+    if (e.target.checked) {
+      this.position = 'fixed';
+    } else {
+      this.position = 'static';
+    }
+  };
+}
+```

package/docs/layout/header-demo/demo4.md

@@ -0,0 +1,57 @@
+---
+order: 4
+---
+
+# Dark theme
+
+<EuiText>
+  <p>
+  To make site-wide navigation more prominent, <strong>EuiHeader</strong> supports reversing the colors to dark theme with <EuiCode>theme="dark"</EuiCode>. However, it only supports a <strong>limited set of children</strong> that will also shift their theme. These components include <strong>EuiHeaderLogo</strong>, <strong>EuiHeaderLink(s)</strong>, <strong>EuiHeaderSectionItemButton</strong> and <strong>EuiSelectableTemplateSitewide</strong>. Any other content may not render correctly without custom configurations.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiHeader @theme='dark'>
+  <EuiHeaderSection @side='left' @border='right'>
+    <EuiHeaderSectionItem>
+      <EuiHeaderLogo>Elastic</EuiHeaderLogo>
+    </EuiHeaderSectionItem>
+    <EuiHeaderSectionItem>
+      <EuiHeaderLinks aria-label='App navigation dark theme example'>
+        <EuiHeaderLink @isActive={{true}}>Docs</EuiHeaderLink>
+        <EuiHeaderLink>Code</EuiHeaderLink>
+        <EuiHeaderLink @iconType='help'> Help</EuiHeaderLink>
+      </EuiHeaderLinks>
+    </EuiHeaderSectionItem>
+
+  </EuiHeaderSection>
+  <EuiHeaderSection @side='right'>
+    <EuiHeaderSectionItem @border='left'>
+      <EuiBadge @iconType='arrowDown' @iconSide='right'>
+        Production logs
+      </EuiBadge>
+    </EuiHeaderSectionItem>
+    <EuiHeaderSectionItem>
+      <EuiHeaderSectionItemButton
+        @notification='2'
+        aria-label='2 Notifications'
+      >
+        <EuiIcon @type='cheer' @size='m' />
+      </EuiHeaderSectionItemButton>
+    </EuiHeaderSectionItem>
+
+    <EuiHeaderSectionItem>
+      <EuiHeaderSectionItemButton aria-label='Account menu'>
+        <EuiAvatar @name='John Username' @size='s' />
+      </EuiHeaderSectionItemButton>
+    </EuiHeaderSectionItem>
+
+  </EuiHeaderSection>
+</EuiHeader>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoHeaderComponent extends Component {}
+```