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

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

@@ -0,0 +1,54 @@
+---
+order: 1
+---
+
+# Description list
+
+<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,9 @@
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Description list
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

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

@@ -0,0 +1,49 @@
+---
+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>
+
+```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>
+```
+
+```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.md

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

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

@@ -1,31 +1,35 @@
+---
+order: 1
+---
+
 # Demo
 
 ```hbs template
-<EuiHealth @color="subdued">
+<EuiHealth @color='subdued'>
   Inactive
 </EuiHealth>
 <EuiSpacer />
-<EuiHealth @color="primary">
+<EuiHealth @color='primary'>
   Active
 </EuiHealth>
 <EuiSpacer />
-<EuiHealth @color="success">
+<EuiHealth @color='success'>
   Healthy
 </EuiHealth>
 <EuiSpacer />
-<EuiHealth @color="warning">
+<EuiHealth @color='warning'>
   Warning
 </EuiHealth>
 <EuiSpacer />
-<EuiHealth @color="danger">
+<EuiHealth @color='danger'>
   Failure
 </EuiHealth>
 <EuiSpacer />
-<EuiHealth @color="#000000">
+<EuiHealth @color='#000000'>
   Custom color as hex
 </EuiHealth>
 <EuiSpacer />
 <EuiHealth>
   No color
 </EuiHealth>
-```
+```

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

@@ -0,0 +1,31 @@
+---
+order: 2
+---
+
+# Text sizes
+
+<EuiText>
+  <p>Match the text size of <strong>EuiHealth</strong> to your context by passing <EuiCode @language="text">xs / s / m / inherit</EuiCode> to the <EuiCode @language="text">textSize</EuiCode> prop. The <EuiCode @language="text">inherit</EuiCode> style will get its font size from the parent element.</p>
+</EuiText>
+
+```hbs template
+<EuiHealth @color='subdued' @textSize='xs'>
+  Inactive
+</EuiHealth>
+<EuiSpacer />
+<EuiHealth @color='primary' @textSize='s'>
+  Active
+</EuiHealth>
+<EuiSpacer />
+<EuiHealth @color='success' @textSize='m'>
+  Healthy
+</EuiHealth>
+<EuiSpacer />
+<EuiTitle @size='s'>
+  <h3>
+    <EuiHealth @color='warning' @textSize='inherit'>
+      Warning
+    </EuiHealth>
+  </h3>
+</EuiTitle>
+```

package/docs/display/health.md

@@ -1 +1,15 @@
-# Health
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Health
+      </h1>
+    </EuiTitle>
+    <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>