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

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

@@ -0,0 +1,53 @@
+---
+order: 1
+---
+
+
+<EuiText>
+	<p>
+	<strong>EuiDescriptionList</strong> is a component for listing pairs of information together. You can use the component on its own, passing in an object for the list, or use the <strong>EuiDescriptionListTitle</strong> and <strong>EuiDescriptionListDescription</strong> components separately to build a list manually.
+  </p>
+
+</EuiText>
+
+```hbs template
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiDescriptionList @listItems={{this.favoriteVideoGames}} />
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiDescriptionList>
+      <EuiDescriptionListTitle>Dota 2</EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>
+        A videogame that I have spent way too much time on over the years.
+      </EuiDescriptionListDescription>
+      <EuiDescriptionListTitle>Kings Quest VI</EuiDescriptionListTitle>
+      <EuiDescriptionListDescription>
+        The game that forced me to learn DOS.
+      </EuiDescriptionListDescription>
+    </EuiDescriptionList>
+  </EuiFlexItem>
+</EuiFlexGroup>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoComponent extends Component {
+  favoriteVideoGames = [
+    {
+      title: 'The Elder Scrolls: Morrowind',
+      description: 'The opening music alone evokes such strong memories.'
+    },
+    {
+      title: 'TIE Fighter',
+      description:
+        'The sequel to XWING, join the dark side and fly for the Emporer.'
+    },
+    {
+      title: 'Quake 2',
+      description: 'The game that made me drop out of college.'
+    }
+  ];
+}
+```

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

@@ -0,0 +1,43 @@
+---
+order: 2
+---
+
+# Reverse style
+
+<EuiText>
+	<p>
+	Setting the <EuiCode>textStyle</EuiCode> arg to <EuiCode>reverse</EuiCode> will reverse the text styles of the <EuiCode>title</EuiCode> and <EuiCode>description</EuiCode> elements so that the description is more prominent. This works best for key/value type content.
+  </p>
+	<p>
+		Adding this property to the <EuiCode>inline</EuiCode> type will not change anything.
+	</p>
+
+</EuiText>
+
+```hbs template
+<EuiDescriptionList
+  @textStyle='reverse'
+  @listItems={{this.favoriteVideoGames}}
+/>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class extends Component {
+  favoriteVideoGames = [
+    {
+      title: 'Name',
+      description: 'The Elder Scrolls: Morrowind'
+    },
+    {
+      title: 'Game style',
+      description: 'Open-world, fantasy, action role-playing'
+    },
+    {
+      title: 'Release date',
+      description: '2002'
+    }
+  ];
+}
+```

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

@@ -0,0 +1,58 @@
+---
+order: 3
+---
+
+# As columns
+
+<EuiText>
+	<p>
+	Using the arg <EuiCode>type</EuiCode> set to <EuiCode>column</EuiCode> description lists can be presented in an inline, column format.
+  </p>
+	<p>
+	To return to the typical row format on smaller screens set <EuiCode>type</EuiCode> to <EuiCode>responsiveColumn</EuiCode>.
+	</p>
+
+</EuiText>
+
+```hbs template
+<EuiDescriptionList
+  @type='column'
+  @listItems={{this.favoriteVideoGames}}
+  style='max-width:400px;'
+/>
+<EuiSpacer @size='xl' />
+<EuiTitle @size='s'>
+  <h3>
+    The following list will become the typical row format on small screens
+  </h3>
+</EuiTitle>
+<EuiSpacer />
+
+<EuiDescriptionList
+  @type='responsiveColumn'
+  @listItems={{this.favoriteVideoGames}}
+  style='max-width:400px;'
+/>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoComponent extends Component {
+  favoriteVideoGames = [
+    {
+      title: 'The Elder Scrolls: Morrowind',
+      description: 'The opening music alone evokes such strong memories.'
+    },
+    {
+      title: 'TIE Fighter',
+      description:
+        'The sequel to XWING, join the dark side and fly for the Emporer.'
+    },
+    {
+      title: 'Quake 2',
+      description: 'The game that made me drop out of college.'
+    }
+  ];
+}
+```

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

@@ -0,0 +1,42 @@
+---
+order: 4
+---
+
+# Inline
+
+<EuiText>
+	<p>
+	Using a arg <EuiCode>type</EuiCode> set to <EuiCode>inline</EuiCode> description lists can be presented in an inline, blob format. This is useful for JSON code blocks. Inline description lists are sized smaller than normal lists due to their compact nature.
+  </p>
+
+</EuiText>
+
+```hbs template
+<EuiDescriptionList
+  @type='inline'
+  @listItems={{this.favoriteVideoGames}}
+  style='max-width:400px;'
+/>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoComponent extends Component {
+  favoriteVideoGames = [
+    {
+      title: 'The Elder Scrolls: Morrowind',
+      description: 'The opening music alone evokes such strong memories.'
+    },
+    {
+      title: 'TIE Fighter',
+      description:
+        'The sequel to XWING, join the dark side and fly for the Emporer.'
+    },
+    {
+      title: 'Quake 2',
+      description: 'The game that made me drop out of college.'
+    }
+  ];
+}
+```

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

@@ -0,0 +1,62 @@
+---
+order: 5
+---
+
+# Centered and compressed
+
+<EuiText>
+	<p>
+	Using the <EuiCode>align</EuiCode> and <EuiCode>compressed</EuiCode> args you can further tailor the look of a description list. This works with column and inline types.
+  </p>
+
+</EuiText>
+
+```hbs template
+<div style='maxWidth: 400px;'>
+  <EuiDescriptionList
+    @listItems={{this.favoriteVideoGames}}
+    @align='center'
+    @compressed={{true}}
+  />
+
+  <EuiSpacer @size='l' />
+
+  <EuiDescriptionList
+    @listItems={{this.favoriteVideoGames}}
+    @align='center'
+    @type='column'
+    @compressed={{true}}
+  />
+
+  <EuiSpacer @size='l' />
+
+  <EuiDescriptionList
+    @listItems={{this.favoriteVideoGames}}
+    @align='center'
+    @type='inline'
+    @compressed={{true}}
+  />
+</div>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoComponent extends Component {
+  favoriteVideoGames = [
+    {
+      title: 'The Elder Scrolls: Morrowind',
+      description: 'The opening music alone evokes such strong memories.'
+    },
+    {
+      title: 'TIE Fighter',
+      description:
+        'The sequel to XWING, join the dark side and fly for the Emporer.'
+    },
+    {
+      title: 'Quake 2',
+      description: 'The game that made me drop out of college.'
+    }
+  ];
+}
+```

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

@@ -0,0 +1,46 @@
+---
+order: 6
+---
+
+# Passing className
+
+<EuiText>
+	<p>
+	When using the <EuiCode>listItems</EuiCode> arg to pass an array of items and you could also add a <EuiCode>className</EuiCode> (or other available arg) to the individual pieces throught the <EuiCode>titleProps</EuiCode> and <EuiCode>descriptionProps</EuiCode>
+  </p>
+
+</EuiText>
+
+```hbs template
+<div style='max-width: 400px;'>
+  <EuiDescriptionList
+    @listItems={{this.favoriteVideoGames}}
+    @align='center'
+    @type='column'
+    @titleProps={{hash className='eui-textTruncate'}}
+    @descriptionProps={{hash className='eui-textTruncate'}}
+  />
+</div>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoComponent extends Component {
+  favoriteVideoGames = [
+    {
+      title: 'The Elder Scrolls: Morrowind',
+      description: 'The opening music alone evokes such strong memories.'
+    },
+    {
+      title: 'TIE Fighter',
+      description:
+        'The sequel to XWING, join the dark side and fly for the Emporer.'
+    },
+    {
+      title: 'Quake 2',
+      description: 'The game that made me drop out of college.'
+    }
+  ];
+}
+```

package/docs/display/description-list.md

@@ -0,0 +1 @@
+<EuiPageHeader @pageTitle="Description list"/>

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

@@ -0,0 +1,25 @@
+---
+order: 1
+---
+
+<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>
+
+```hbs template
+<EuiEmptyPrompt
+  @iconType="logoSecurity"
+  @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>
+```

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();
+  }
+}
+```