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

package/docs/display/callout.md

@@ -1,15 +1,9 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Callout
-      </h1>
-    </EuiTitle>
+<EuiPageHeader @pageTitle="Callout"/>
+
 <EuiSpacer />
   <EuiText>
   <p>
    <strong>EuiCallOut</strong> contains a message directly related to content on the page. This includes general information, success, warning, and error messages.</p><p><strong>Keep these guidelines in mind:</strong></p><ul><li>Minimize the number of callouts per page.</li><li>Stack callouts in the order in which they require users' attention: error, warning, info, and then success.</li><li>Offer only one action per callout and ensure it's an action users can perform quickly.</li><li>If the callout has a permanent spot in the UI, but needs to be less obstructive, set the <EuiCode @language="text">size</EuiCode> property to <EuiCode @language=="text">s</EuiCode> (small).</li><li>Use an <EuiCode @language="text">icon</EuiCode> prop if it adds context.</li></ul>
 </EuiText>
 
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiHorizontalRule />

package/docs/display/comment-list.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Comment List
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Comment List"/>

package/docs/display/description-list-demo/demo1.md

@@ -2,7 +2,6 @@
 order: 1
 ---
 
-# Description list
 
 <EuiText>
 	<p>

package/docs/display/description-list.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Description list
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Description list"/>

package/docs/display/empty-prompt-demo/demo1.md

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Basic Empty prompt
-
 <EuiText>
  While no one piece of content is required, each <strong>EuiEmptyPrompt</strong> should contain at least a <EuiCode>title</EuiCode> (wrapped in an HTML heading element) and/or a <EuiCode>description</EuiCode>. They usually contain one or more <EuiCode>actions</EuiCode> that promotes the primary call-to-actions. You can also provide a <EuiCode>footer</EuiCode> to direct users towards making informed decisions.
 </EuiText>
@@ -25,25 +23,3 @@ order: 1
   </:footer>
 </EuiEmptyPrompt>
 ```
-
-```js component
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class DemoIconComponent extends Component {
-  tabs = [
-    { label: 'Tab 1', isSelected: true },
-    {
-      label: 'Tab 2',
-      onClick: this.setShowBottomBar
-    }
-  ];
-  @tracked showing = false;
-
-  @action
-  setSHowBottomBar() {
-    this.showing = !this.showing;
-  }
-}
-```

package/docs/display/empty-prompt-demo/demo2.md

@@ -0,0 +1,16 @@
+---
+order: 2
+---
+
+# Less content, more actions
+
+<EuiText>
+ You can remove parts of the prompt to simplify it. You can also provide an array of multiple actions. Be sure to list primary actions first and secondary actions as empty buttons.
+</EuiText>
+
+```hbs template
+<EuiEmptyPrompt
+  @title="Upgrade your license to use Machine Learning"
+  @actions={{array (component "eui-button-title" title="Add a case") (component "eui-button-title" title="Start a trial")}}
+/>
+```

package/docs/display/empty-prompt-demo/demo3.md

@@ -0,0 +1,67 @@
+---
+order: 3
+---
+
+# Panel options
+
+<EuiText>
+ The <strong>EuiEmptyPrompt</strong> is wrapped by <strong>EuiPanel</strong>. By default, the panel is set to <EuiCode>transparent</EuiCode> but you can customize other panel options like <EuiCode>color</EuiCode>, <EuiCode>hasBorder</EuiCode> and <EuiCode>paddingSize</EuiCode>. Changing the <EuiCode>color</EuiCode> prop will also attempt to adjust the <EuiCode>iconColor</EuiCode> and <EuiCode>footer</EuiCode> color.
+</EuiText>
+
+```hbs template
+{{#let (unique-id) as |selectId|}}
+  <EuiFormRow
+    @id={{selectId}}
+  >
+    <EuiSelect
+      @value={{this.panelColor}}
+      @hasNoInitialSelection={{true}}
+      @options={{array
+        (hash value='transparent' text='transparent')
+        (hash value='plain' text='plain')
+        (hash value='subdued' text='subdued')
+        (hash value='accent' text='accent')
+        (hash value='primary' text='primary')
+        (hash value='success' text='success')
+        (hash value='warning' text='warning')
+        (hash value='danger' text='danger')
+      }}
+      @id={{selectId}}
+      {{on 'change' (pick 'target.value' (set this 'panelColor'))}}
+    >
+      <:prepend as |classes|>
+        <EuiFormLabel class={{classes}} for={{selectId}}>
+          Color
+        </EuiFormLabel>
+      </:prepend>
+    </EuiSelect>
+  </EuiFormRow>
+{{/let}}
+<EuiSpacer @size="l" />
+<EuiEmptyPrompt
+  @iconType='securityAnalyticsApp'
+  @color={{this.panelColor}}
+  @title='Start adding cases'
+  @body='There are no cases to display. Add a new case or change your filter
+          settings.'
+  @actions={{array (component 'eui-button-title' title='Add a case')}}
+>
+  <:footer>
+    <EuiTitle @size='xxs'>
+      <h3>Want to learn more?</h3>
+    </EuiTitle>
+    <EuiLink href='#' target='_blank'>
+      Read documentation
+    </EuiLink>
+  </:footer>
+</EuiEmptyPrompt>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoComponent extends Component {
+  @tracked panelColor = 'accent';
+}
+```

package/docs/display/empty-prompt-demo/demo4.md

@@ -0,0 +1,21 @@
+---
+order: 4
+---
+
+# Title sizes and icon colors
+
+<EuiText>
+ Other customization options include changing the <EuiCode>titleSize</EuiCode> to any of the <strong>EuiTitle</strong> sizes and <EuiCode>iconColor</EuiCode>. When using an application or solution logo as the <EuiCode>iconType</EuiCode>, you can reset to the multi-tone colors with <EuiCode>iconColor="default"</EuiCode>
+</EuiText>
+
+```hbs template
+<EuiEmptyPrompt
+  @iconType='securityAnalyticsApp'
+  @iconColor='default'
+  @title='Start adding cases'
+  @titleSize='xs'
+  @body='There are no cases to display. Add a new case or change your filter
+          settings.'
+  @actions={{array (component 'eui-button-title' title='Add a case')}}
+/>
+```

package/docs/display/empty-prompt-demo/demo5.md

@@ -0,0 +1,33 @@
+---
+order: 5
+---
+
+# Loading and error prompts
+
+<EuiText>
+ Empty prompts can also be used to emulate loading and error states, by utilizing the same patterns.
+ For <strong>loading</strong> states, instead of passing a <EuiCode>iconType</EuiCode>, you can provide a custom <EuiCode>icon</EuiCode> and pass in one of our loading components.
+</EuiText>
+
+```hbs template
+<EuiEmptyPrompt @title='Loading Dashboards'>
+  <:icon>
+    <EuiLoadingLogo @logo='logoKibana' @size='xl' />
+  </:icon>
+</EuiEmptyPrompt>
+<EuiSpacer @size='l' />
+<EuiText>
+  For error states, you can simply set the
+  <EuiCode>color</EuiCode>
+  to
+  <EuiCode>danger</EuiCode>.
+</EuiText>
+<EuiSpacer />
+<EuiEmptyPrompt
+  @iconType='alert'
+  @color='danger'
+  @title='Error loading Dashboards'
+  @body='There was an error loading the Dashboard application. Contact your
+        administrator for help.'
+/>
+```

package/docs/display/empty-prompt-demo/demo6.md

@@ -0,0 +1,43 @@
+---
+order: 6
+---
+
+# Layout
+
+<EuiText>
+ You can supply a <EuiCode>layout</EuiCode> of either <EuiCode>"horizontal"</EuiCode> or <EuiCode>"vertical"</EuiCode> with the default being <EuiCode>vertical</EuiCode>. When creating empty states we want the content to be short and straight to the point. So most of the time, the <EuiCode>vertical</EuiCode> layout is enough.
+  All the content will be center aligned and this type of text alignment only works with small content. When you have longer body text with multiple calls to action, you can use the <EuiCode>horizontal</EuiCode> layout. This layout works best when you can provide a larger graphic like an illustration as the <EuiCode>icon</EuiCode>. For consistency, we recommend providing the illustration using a <strong>EuiImage</strong> with <EuiCode>size="fullWidth"</EuiCode>.
+</EuiText>
+
+```hbs template
+<EuiEmptyPrompt
+  @title='Create your first visualization'
+  @layout='horizontal'
+  @color='plain'
+  @body='There are no cases to display. Add a new case or change your filter
+          settings.'
+  @actions={{array (component 'eui-button-title' title='Create visualization')}}
+>
+  <:icon>
+    <EuiImage @size='fullWidth' @src={{this.illustration}} alt='' />
+  </:icon>
+  <:body>
+    <p>
+      There are no visualizations to display. This tool allows you to create a
+      wide range of charts, graphs, maps, and other graphics.
+    </p>
+    <p>
+      The visualizations you create can be easily shared with your peers.
+    </p>
+  </:body>
+</EuiEmptyPrompt>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoComponent extends Component {
+  @tracked illustration = 'https://source.unsplash.com/64x64/?cat';
+}
+```

package/docs/display/empty-prompt-demo/demo7.md

@@ -0,0 +1,162 @@
+---
+order: 7
+---
+
+# More types of empty states
+
+<EuiText>
+ <strong>EuiEmptyPrompt</strong> can be used for more than just empty pages. The following example showcases different types of empty states that you can create with the <strong>EuiEmptyPrompt</strong>. For a full list see the usage guidelines.
+</EuiText>
+
+```hbs template
+{{#let (unique-id) as |selectId|}}
+  <EuiFormRow
+    @id={{selectId}}
+  >
+    <EuiSelect
+      @value={{this.exampleValue}}
+      @hasNoInitialSelection={{true}}
+      @options={{array
+        (hash value='page not found' text='Page not found')
+        (hash value='no permission' text='No permission')
+        (hash value='license upgrade' text='License Upgrade')
+        (hash value='complex' text='Complex')
+      }}
+      @id={{selectId}}
+      {{on 'change' (pick 'target.value' (set this 'exampleValue'))}}
+    >
+      <:prepend as |classes|>
+        <EuiFormLabel class={{classes}} for={{selectId}}>
+          Examples
+        </EuiFormLabel>
+      </:prepend>
+    </EuiSelect>
+  </EuiFormRow>
+{{/let}}
+<EuiSpacer @size="xl"/>
+{{#if (eq this.exampleValue 'page not found')}}
+  <EuiEmptyPrompt
+    @title='Page not found'
+    @layout='vertical'
+    @body='The page you are looking for might have been removed or temporarily
+        unavailable.'
+    @actions={{array
+      (component 'eui-button-title' title='Go Home')
+      (component
+        'eui-button-title' title='Go Back' iconType='arrowLeft' flush='left'
+      )
+    }}
+  >
+    <:icon>
+      <EuiImage @size='fullWidth' @src={{this.illustration}} alt='' />
+    </:icon>
+  </EuiEmptyPrompt>
+{{else if (eq this.exampleValue 'no permission')}}
+  <EuiEmptyPrompt
+    @iconType='lock'
+    @color='subdued'
+    @title='Contact your administrator for access'
+    @body='To view cases in this space, you need additional privileges.'
+  />
+{{else if (eq this.exampleValue 'license upgrade')}}
+  <EuiEmptyPrompt
+    @iconType='logoKibana'
+    @title='Do more with Kibana!'
+    @layout='vertical'
+    @hasBorder={{true}}
+    @body='Start a free trial or upgrade your license to use anomaly detection.'
+    @actions={{array
+      (component 'eui-button-title' title='Update')
+      (component 'eui-button-title' title='start a free trial' color='warning')
+    }}
+  >
+    <:footer>
+      <EuiTitle @size='xxs'>
+        <h3>Want to learn more?</h3>
+      </EuiTitle>
+      <EuiLink href='#' target='_blank'>
+        Read documentation
+      </EuiLink>
+    </:footer>
+  </EuiEmptyPrompt>
+{{else}}
+  <EuiEmptyPrompt
+    @title='Get started by adding your data'
+    @layout='horizontal'
+    @color='plain'
+    @actions={{array
+      (component 'eui-button-title' title='Add your data')
+      (component
+        'eui-button-title' title='Try sample data' color='warning'
+      )
+    }}
+  >
+    <:icon>
+      <EuiImage @size='fullWidth' @src={{this.illustration}} alt='' />
+    </:icon>
+    <:body>
+      <p>
+        To start working with your data, use one of our many ingest options.
+        Collect data from an app or service, or upload a file.
+      </p>
+      <p>
+        If you&apos;re not ready to use your own data, add a sample data set.
+      </p>
+    </:body>
+    <:footer>
+      <EuiFlexGroup class="eui-textLeft">
+        <EuiFlexItem @grow={{false}}>
+          <EuiTitle @size="xxs">
+            <h3>Want to learn more?</h3>
+          </EuiTitle>
+          <span>
+            <EuiButtonEmpty
+              href="#"
+              @iconType="popout"
+              @iconSide="right"
+              @iconSize="s"
+              @flush="both"
+              @size="s"
+            >
+              Read documentation
+            </EuiButtonEmpty>
+          </span>
+        </EuiFlexItem>
+        <EuiFlexItem @grow={{false}}>
+          <EuiTitle @size="xxs">
+            <h3>Pretty sure you have data?</h3>
+          </EuiTitle>
+          <span>
+            <EuiButtonEmpty
+              onClick={{this.onClick}}
+              @iconType="refresh"
+              @iconSide="right"
+              @iconSize="s"
+              @flush="both"
+              @size="s"
+            >
+              Check for new data
+            </EuiButtonEmpty>
+          </span>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </:footer>
+  </EuiEmptyPrompt>
+{{/if}}
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoComponent extends Component {
+  @tracked illustration = 'https://source.unsplash.com/64x64/?cat';
+  @tracked exampleValue = 'page not found';
+
+  @action
+  onClick(e){
+    e.preventDefault();
+  }
+}
+```

package/docs/display/empty-prompt-demo/demo8.md

@@ -0,0 +1,57 @@
+---
+order: 8
+---
+
+# Using in a page template
+
+<EuiText>
+ When using a <strong>EuiEmptyPrompt</strong> in a <strong>EuiPageTemplate</strong>, pay attention to the template you’re passing. The template will determine which <EuiCode>color</EuiCode> and <EuiCode>hasBorder</EuiCode> prop you should use to ensure consistency across our Elastic products.
+
+ <!-- The following example shows the usage of a <strong>EuiEmptyPrompt</strong> in a page template where the template is set to "empty". -->
+</EuiText>
+
+```hbs template
+<EuiPageTemplate
+  @template='empty'
+  @pageContentProps={{hash paddingSize='none'}}
+>
+  <EuiEmptyPrompt
+    @title='Create your first visualization'
+    @color='plain'
+    @layout='horizontal'
+    @actions={{array
+      (component 'eui-button-title' title='Create visualization')
+    }}
+  >
+    <:icon>
+      <EuiImage @size="fullWidth" @src={{this.illustration}} alt="" />
+    </:icon>
+    <:body>
+      <p>
+        There are no visualizations to display. This tool allows you to create a
+        wide range of charts, graphs, maps, and other graphics.
+      </p>
+      <p>
+        The visualizations you create can be easily shared with your peers.
+      </p>
+    </:body>
+    <:footer>
+      <EuiTitle @size='xxs'>
+        <span>Want to learn more?</span>
+      </EuiTitle>
+      <EuiLink href='#' target='_blank'>
+        Read documentation
+      </EuiLink>
+    </:footer>
+  </EuiEmptyPrompt>
+</EuiPageTemplate>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoComponent extends Component {
+  @tracked illustration = 'https://source.unsplash.com/64x64/?cat';
+}
+```

package/docs/display/empty-prompt.md

@@ -1,11 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Empty Prompt
-      </h1>
-    </EuiTitle>
-    <EuiHorizontalRule @margin="m" />
-    <EuiSpacer></EuiSpacer>
-</EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Empty Prompt"/>

package/docs/display/health-demo/demo1.md

@@ -2,7 +2,6 @@
 order: 1
 ---
 
-# Demo
 
 ```hbs template
 <EuiHealth @color='subdued'>

package/docs/display/health.md

@@ -1,15 +1,9 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Health
-      </h1>
-    </EuiTitle>
-    <EuiSpacer />
+<EuiPageHeader @pageTitle="Health"/>
+
+<EuiSpacer />
     <EuiText>
     <p>
     <p>The <strong>EuiHealth</strong> component should be used when showing comparitive health of listed objects (like servers, HTTP response status codes(as per convenience), nodes, indexes..etc). Because icons are vague and bulky and color alone does not work, color plus text provides a recognizable, lightweight combo that works in most situations.</p>
     </p>
     </EuiText>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+    <EuiHorizontalRule />

package/docs/display/icons.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Icons
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Icons"/>

package/docs/display/image.md

@@ -1,13 +1,9 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Image
-      </h1>
-    </EuiTitle>
-     <EuiSpacer />
+
+<EuiPageHeader @pageTitle="Image"/>
+
+ <EuiSpacer />
     <EuiText>
     <p>Use <strong>EuiImage</strong> when you need to place a static image into a page with an optional caption.</p>
     </EuiText>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+
+  <EuiHorizontalRule />

package/docs/display/list-group.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        List Group
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="List Group"/>

package/docs/display/loading/logo-demo/demo1.md

@@ -0,0 +1,15 @@
+# Basic loading logo
+
+<EuiText>
+ <strong>EuiLoadingLogo</strong> accepts any of our <strong>EuiIcon</strong> logos. It should only be used in very large panels, like full screen pages.
+</EuiText>
+
+```hbs template
+<div>
+  <EuiLoadingLogo />
+  &emsp;
+  <EuiLoadingLogo @logo='logoObservability' @size='l' />
+  &emsp;
+  <EuiLoadingLogo @logo='logoSecurity' @size='xl' />
+</div>
+```

package/docs/display/loading/logo.md

@@ -0,0 +1 @@
+# Logo

package/docs/display/progress.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Progress
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Progress"/>

package/docs/display/stat.md

@@ -1,15 +1,8 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Stat
-      </h1>
-    </EuiTitle>
-    <EuiSpacer></EuiSpacer>
-    <EuiText>
+<EuiPageHeader @pageTitle="Stat"/>
+
+<EuiText>
     <p>
     <strong>EuiStat</strong> can be used to display prominent text or number values. It consists of <EuiCode>title</EuiCode> and <EuiCode>description</EuiCode> elements with several visual styling properties (examples below).
     </p>
     </EuiText>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+    <EuiHorizontalRule />

package/docs/display/text.md

@@ -1,13 +1,6 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Text
-      </h1>
-    </EuiTitle>
-    <EuiHorizontalRule @margin="m" />
-    <EuiSpacer></EuiSpacer>
-    <EuiText>
+<EuiPageHeader @pageTitle="Text"/>
+
+<EuiText>
   <p>
 <strong>EuiText</strong> is a generic catchall wrapper that will apply our standard typography styling and spacing to naked HTML. Because of its forced style it <strong>only accepts raw XHTML</strong> and can not / should not be used to wrap React components (which would break their styling).
 
@@ -16,5 +9,4 @@ EuiText can ensure proper line-length for readability by setting a <EuiCode>max-
   </p>
 </EuiText>
 
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiHorizontalRule />

package/docs/display/title.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Title
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Title"/>