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

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

@@ -0,0 +1 @@
+<EuiPageHeader @pageTitle="Empty Prompt"/>

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

@@ -1,31 +1,34 @@
-# Demo
+---
+order: 1
+---
+
 
 ```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,9 @@
-# Health
+<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>
+    <EuiHorizontalRule />

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

@@ -1,56 +1,36 @@
-# Demo
+---
+order: 1
+---
+
+# Glyphs
+
+<EuiText>
+ <p>Glyphs are small, monochromatic icons that typically should always use the default size of <EuiCode @language="js">size<span class="token operator">=</span><span class="token string">"m"</span></EuiCode>.</p>
+</EuiText>
 
 ```hbs template
-<EuiIcon @type='logoGolang' />
-<EuiIcon @type='logoGolang' @size='m' />
-<EuiIcon @type='logoGolang' @size='l' />
-<EuiIcon @type='logoGolang' @size='xl' />
-<EuiIcon @type='logoGolang' @size='xxl' />
-<br />
-<EuiIcon @type='logoRedis' @size='s' />
-<EuiIcon @type='logoRedis' @size='m' />
-<EuiIcon @type='logoRedis' @size='l' />
-<EuiIcon @type='logoRedis' @size='xl' />
-<EuiIcon @type='logoRedis' @size='xxl' />
-<br />
-<EuiIcon @type='logoAWS' @size='s' />
-<EuiIcon @type='logoAWS' @size='m' />
-<EuiIcon @type='logoAWS' @size='l' />
-<EuiIcon @type='logoAWS' @size='xl' />
-<EuiIcon @type='logoAWS' @size='xxl' />
-<br />
-<EuiIcon @type='/assets/ember.svg' @size='s' />
-<EuiIcon @type='/assets/ember.svg' @size='m' />
-<EuiIcon @type='/assets/ember.svg' @size='l' />
-<EuiIcon @type='/assets/ember.svg' @size='xl' />
-<EuiIcon @type='/assets/ember.svg' @size='xxl' />
-<br />
-<EuiIcon
-  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
-  @size='s'
-/>
-<EuiIcon
-  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
-  @size='m'
-/>
-<EuiIcon
-  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
-  @size='l'
-/>
-<EuiIcon
-  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
-  @size='xl'
-/>
-<EuiIcon
-  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
-  @size='xxl'
-/>
-<br />
-<EuiIcon @type='flag' @size='s' @color='green' />
-<EuiIcon @type='flag' @size='m' @color='white' />
-<EuiIcon @type='flag' @size='l' @color='red' />
-<EuiIcon @type='flag' @size='xl' @color='green' />
-<EuiIcon @type='flag' @size='xxl' @color='white' />
+<EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+  {{this.javascriptCode}}
+</EuiCodeBlock>
+<EuiSpacer />
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.glyphs as |icon|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{icon}}
+        @afterMessage={{concat icon ' Copied'}}
+        as |copy|
+      >
+        <EuiPanel @paddingSize='s' @hasShadow={{false}} @onClick={{copy}}>
+          <EuiIcon @type='{{icon}}' />
+          <small>
+            {{icon}}
+          </small>
+        </EuiPanel>
+      </EuiCopy>
+    </EuiFlexItem>
+  {{/each}}
+</EuiFlexGrid>
 ```
 
 ```js component
@@ -62,12 +42,245 @@ import { typeToPathMap } from '@ember-eui/core/utils/css-mappings/eui-icon';
 const iconKeys = Object.keys(typeToPathMap);
 
 export default class DemoIconComponent extends Component {
-  @tracked icon = 'tokenNumber';
-  icons = iconKeys;
+  @tracked javascriptCode = `
+ <EuiIcon @type='accessibility' />
+`;
 
-  @action
-  update() {
-    this.icon = this.icons[Math.floor(Math.random() * this.icons.length)];
-  }
+  @tracked glyphs = [
+    'accessibility',
+    'aggregate',
+    'alert',
+    'analyzeEvent',
+    'annotation',
+    'apmTrace',
+    'apps',
+    'arrowDown',
+    'arrowLeft',
+    'arrowRight',
+    'arrowUp',
+    'asterisk',
+    'beaker',
+    'bell',
+    'bellSlash',
+    'bolt',
+    'boxesHorizontal',
+    'boxesVertical',
+    'branch',
+    'broom',
+    'brush',
+    'bug',
+    'bullseye',
+    'calendar',
+    'check',
+    'checkInCircleFilled',
+    'cheer',
+    'clock',
+    'cloudDrizzle',
+    'cloudStormy',
+    'cloudSunny',
+    'color',
+    'compute',
+    'console',
+    'continuityAbove',
+    'continuityAboveBelow',
+    'continuityBelow',
+    'continuityWithin',
+    'controlsHorizontal',
+    'controlsVertical',
+    'copy',
+    'copyClipboard',
+    'cross',
+    'crosshairs',
+    'crossInACircleFilled',
+    'currency',
+    'cut',
+    'database',
+    'document',
+    'documentation',
+    'documentEdit',
+    'documents',
+    'dot',
+    'download',
+    'email',
+    'empty',
+    'eql',
+    'eraser',
+    'exit',
+    'expand',
+    'expandMini',
+    'exportAction',
+    'eye',
+    'eyeClosed',
+    'faceHappy',
+    'faceNeutral',
+    'faceSad',
+    'filter',
+    'flag',
+    'fold',
+    'folderCheck',
+    'folderClosed',
+    'folderExclamation',
+    'folderOpen',
+    'frameNext',
+    'framePrevious',
+    'fullScreen',
+    'fullScreenExit',
+    'function',
+    'gear',
+    'glasses',
+    'globe',
+    'grab',
+    'grabHorizontal',
+    'grid',
+    'heart',
+    'heatmap',
+    'help',
+    'home',
+    'iInCircle',
+    'image',
+    'importAction',
+    'indexClose',
+    'indexEdit',
+    'indexFlush',
+    'indexMapping',
+    'indexOpen',
+    'indexRuntime',
+    'indexSettings',
+    'inputOutput',
+    'inspect',
+    'invert',
+    'ip',
+    'keyboardShortcut',
+    'kqlField',
+    'kqlFunction',
+    'kqlOperand',
+    'kqlSelector',
+    'kqlValue',
+    'layers',
+    'link',
+    'list',
+    'listAdd',
+    'lock',
+    'lockOpen',
+    'logstashFilter',
+    'logstashIf',
+    'logstashInput',
+    'logstashOutput',
+    'logstashQueue',
+    'magnifyWithMinus',
+    'magnifyWithPlus',
+    'magnet',
+    'mapMarker',
+    'memory',
+    'merge',
+    'menu',
+    'menuDown',
+    'menuLeft',
+    'menuRight',
+    'menuUp',
+    'minimize',
+    'minus',
+    'minusInCircle',
+    'minusInCircleFilled',
+    'mobile',
+    'moon',
+    'nested',
+    'node',
+    'number',
+    'offline',
+    'online',
+    'package',
+    'pageSelect',
+    'pagesSelect',
+    'paperClip',
+    'partial',
+    'pause',
+    'payment',
+    'pencil',
+    'percent',
+    'pin',
+    'pinFilled',
+    'play',
+    'playFilled',
+    'plus',
+    'plusInCircle',
+    'plusInCircleFilled',
+    'popout',
+    'push',
+    'questionInCircle',
+    'quote',
+    'refresh',
+    'reporter',
+    'returnKey',
+    'save',
+    'scale',
+    'search',
+    'securitySignal',
+    'securitySignalDetected',
+    'securitySignalResolved',
+    'shard',
+    'share',
+    'snowflake',
+    'sortable',
+    'sortDown',
+    'sortLeft',
+    'sortRight',
+    'sortUp',
+    'starEmpty',
+    'starEmptySpace',
+    'starFilled',
+    'starFilledSpace',
+    'starMinusEmpty',
+    'starMinusFilled',
+    'starPlusEmpty',
+    'starPlusFilled',
+    'stats',
+    'stop',
+    'stopFilled',
+    'stopSlash',
+    'storage',
+    'string',
+    'submodule',
+    'symlink',
+    'tableOfContents',
+    'tableDensityExpanded',
+    'tableDensityCompact',
+    'tableDensityNormal',
+    'tag',
+    'tear',
+    'temperature',
+    'timeline',
+    'timeslider',
+    'training',
+    'trash',
+    'unfold',
+    'unlink',
+    'user',
+    'users',
+    'vector',
+    'videoPlayer',
+    'visArea',
+    'visAreaStacked',
+    'visBarHorizontal',
+    'visBarHorizontalStacked',
+    'visBarVertical',
+    'visBarVerticalStacked',
+    'visGauge',
+    'visGoal',
+    'visLine',
+    'visMapCoordinate',
+    'visMapRegion',
+    'visMetric',
+    'visPie',
+    'visTable',
+    'visTagCloud',
+    'visText',
+    'visTimelion',
+    'visVega',
+    'visVisualBuilder',
+    'wordWrap',
+    'wordWrapDisabled',
+    'wrench'
+  ];
 }
 ```

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

@@ -0,0 +1,76 @@
+---
+order: 2
+---
+
+# Editor controls
+
+<EuiText>
+ <p>Editor icons relate to the visual styling of elements and are commonly used within <strong>EuiButtonGroup</strong> components.</p>
+</EuiText>
+
+```hbs template
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.editor as |icon|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{icon}}
+        @afterMessage={{concat icon ' Copied'}}
+        as |copy|
+      >
+        <EuiPanel
+          @paddingSize='s'
+          @hasShadow={{false}}
+          @onClick={{copy}}
+        >
+          <EuiIcon @type='{{icon}}' />
+          <small>
+            {{icon}}
+          </small>
+        </EuiPanel>
+      </EuiCopy>
+    </EuiFlexItem>
+  {{/each}}
+</EuiFlexGrid>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { typeToPathMap } from '@ember-eui/core/utils/css-mappings/eui-icon';
+
+const iconKeys = Object.keys(typeToPathMap);
+
+export default class DemoIconComponent extends Component {
+  @tracked editor = [
+    'editorAlignCenter',
+    'editorAlignLeft',
+    'editorAlignRight',
+    'editorBold',
+    'editorCodeBlock',
+    'editorComment',
+    'editorDistributeHorizontal',
+    'editorDistributeVertical',
+    'editorHeading',
+    'editorItalic',
+    'editorItemAlignBottom',
+    'editorItemAlignCenter',
+    'editorItemAlignLeft',
+    'editorItemAlignMiddle',
+    'editorItemAlignRight',
+    'editorItemAlignTop',
+    'editorLink',
+    'editorOrderedList',
+    'editorPositionBottomLeft',
+    'editorPositionBottomRight',
+    'editorPositionTopLeft',
+    'editorPositionTopRight',
+    'editorRedo',
+    'editorStrike',
+    'editorTable',
+    'editorUnderline',
+    'editorUndo',
+    'editorUnorderedList'
+  ];
+}
+```

package/docs/display/icons-demo/demo3.md

@@ -0,0 +1,76 @@
+---
+order: 3
+---
+
+# Elastic logos
+
+<EuiText>
+  <p>These logos are restricted in use to Elastic products or when referencing Elastic products. They are multi-color with some internal paths having a class of <EuiCode @language="text">.euiIcon__fillNegative</EuiCode> to handle flipping colors for dark mode. The only other colors most of them support are ghost and text which turn them into a solid shape.</p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+  {{this.elasticCode}}
+</EuiCodeBlock>
+<EuiSpacer />
+
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.logos as |icon|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{icon}}
+        @afterMessage={{concat icon ' Copied'}}
+        as |copy|
+      >
+        <EuiPanel
+          @paddingSize='s'
+          @hasShadow={{false}}
+          @onClick={{copy}}
+        >
+          <EuiIcon @type='{{icon}}' @size='xl' />
+          <small>
+            {{icon}}
+          </small>
+        </EuiPanel>
+      </EuiCopy>
+    </EuiFlexItem>
+  {{/each}}
+</EuiFlexGrid>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { typeToPathMap } from '@ember-eui/core/utils/css-mappings/eui-icon';
+
+const iconKeys = Object.keys(typeToPathMap);
+
+export default class DemoIconComponent extends Component {
+  @tracked elasticCode = `
+<EuiIcon type="logoElasticsearch" size="xl" />
+`;
+
+  @tracked logos = [
+    'logoElastic',
+    'logoElasticStack',
+    'logoElasticsearch',
+    'logoAppSearch',
+    'logoBeats',
+    'logoBusinessAnalytics',
+    'logoCloud',
+    'logoCloudEnterprise',
+    'logoEnterpriseSearch',
+    'logoKibana',
+    'logoLogging',
+    'logoLogstash',
+    'logoMaps',
+    'logoMetrics',
+    'logoObservability',
+    'logoSecurity',
+    'logoSiteSearch',
+    'logoUptime',
+    'logoWorkplaceSearch'
+  ];
+}
+```