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

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

@@ -0,0 +1,63 @@
+---
+order: 6
+---
+
+# Sizes
+
+<EuiText>
+  <p>Use the <EuiCode @language="text">size</EuiCode> prop to automatically size your icons. Medium is the default, and will output a <EuiCode @language="text">16x16</EuiCode> icon.</p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+  {{this.sizeCode}}
+</EuiCodeBlock>
+<EuiSpacer />
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.iconSizes as |size index|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{size}}
+        @afterMessage='logoElasticStack Copied'
+        as |copy|
+      >
+        <EuiPanel
+          @paddingSize='s'
+          @hasShadow={{false}}
+          @onClick={{copy}}
+        >
+          <EuiIcon @type='logoElasticStack' @size={{size}} />
+          <small>
+            {{get this.iconSizesText index}}
+          </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 sizeCode = `
+ <EuiIcon type="logoElasticsearch" size="xl" />
+`;
+
+  @tracked iconSizes = ['s', 'm', 'l', 'xl', 'xxl', 'original'];
+  @tracked iconSizesText = [
+    'small',
+    'medium',
+    'large',
+    'x-large',
+    'xx-large',
+    'original'
+  ];
+}
+```

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

@@ -0,0 +1,101 @@
+---
+order: 7
+---
+
+# Colors
+
+<EuiText>
+ <p>The default behavior of icons is to inherit from the text color. You can use the <EuiCode @language="text">color</EuiCode> prop to assign a custom color which accepts a named color from our palette or a valid&nbsp;<a class="euiLink euiLink--primary" href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank" rel="noopener noreferrer">CSS color data type<<span class="euiScreenReaderOnly">(opens in a new tab or window)</span></a>&nbsp;which will be passed down through the inline-style <EuiCode @language="text">fill</EuiCode>&nbsp; property. <strong>We recommend relying on the EUI named color palette</strong> unless the custom color is initiated by the user (like as a graph color).</p>
+</EuiText>
+
+```hbs template
+<EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+  {{this.colorCode}}
+</EuiCodeBlock>
+<EuiSpacer />
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.iconColors as |color|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{concat '@color=' '"' color '"'}}
+        @afterMessage='Copied'
+        as |copy|
+      >
+        <EuiPanel @paddingSize='s' @hasShadow={{false}} @onClick={{copy}}>
+          <EuiIcon @type='brush' @color={{color}} />
+          <small>
+            {{color}}
+          </small>
+        </EuiPanel>
+      </EuiCopy>
+    </EuiFlexItem>
+  {{/each}}
+</EuiFlexGrid>
+<EuiSpacer />
+<EuiText>
+  <p>Two-tone icons, like our app style icons, will behave similarly to normal
+    glyphs when provided a specific color by applying the color to
+    <strong>all</strong>
+    the shapes within. You can force the icon to match the parent's text color
+    by passing
+    <EuiCode @language='text'>color="inherit"</EuiCode>
+    to the icon.</p>
+</EuiText>
+<EuiSpacer />
+<EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+  {{this.colorinherit}}
+</EuiCodeBlock>
+<EuiSpacer />
+<EuiFlexGrid @columns={{3}}>
+  {{#each this.iconColors as |color|}}
+    <EuiFlexItem>
+      <EuiCopy
+        @textToCopy={{concat '@color=' '"' color '"'}}
+        @afterMessage='Copied'
+        as |copy|
+      >
+        <EuiPanel @paddingSize='s' @hasShadow={{false}} @onClick={{copy}}>
+          <EuiIcon @type='gisApp' @color={{color}} />
+          <small>
+            {{color}}
+          </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 colorCode = `
+ <EuiIcon type="brush" color="primary" />
+`;
+
+  @tracked colorinherit = `
+ <EuiIcon type="gisApp" color="primary" />
+`;
+
+  @tracked iconColors = [
+    'default',
+    'inherit',
+    'primary',
+    'success',
+    'accent',
+    'warning',
+    'danger',
+    'text',
+    'subdued',
+    'ghost',
+    '#DA8B45',
+    '#DDDDDD'
+  ];
+}
+```

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

@@ -0,0 +1,47 @@
+---
+order: 8
+---
+
+# Custom SVGs
+
+<EuiText>
+  <p>The <EuiCode @language="text">type</EuiCode> prop can accept a valid enum, string or React SVG Element. When using a custom SVG, please make sure it sits on a square canvas and preferably utilizes one of EUI's sizes (<EuiCode @language="text">16x16</EuiCode> or <EuiCode @language="text">32x32</EuiCode>).</p>
+  <p>When using custom SVGs for simple glyphs, <strong>remove all fill attributes</strong> on the SVG and utilize the CSS helpers if you have complex logos that need to work with theming.</p>
+</EuiText>
+<EuiSpacer />
+
+```hbs template
+<EuiFlexGrid @columns={{2}}>
+  <EuiPanel @paddingSize='s'>
+    <EuiFlexItem>
+      <EuiIcon
+        @type='https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg'
+        @size='xl'
+        @title='My SVG logo'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCodeBlock @language='html' @fontSize='m' @paddingSize='m'>
+        {{this.customsvg}}
+      </EuiCodeBlock>
+    </EuiFlexItem>
+  </EuiPanel>
+</EuiFlexGrid>
+<EuiSpacer />
+<EuiSpacer />
+```
+
+```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 customsvg = `
+ <EuiIcon type="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" size="xl" title="My SVG logo" />
+`;
+}
+```

package/docs/display/icons.md

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

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

@@ -1,52 +1,17 @@
-# Demo
+---
+order: 1
+---
 
 ```hbs template
-<EuiText @color="primary">
-  Size s
-</EuiText>
-<EuiImage
-  @url="https://picsum.photos/700/400"
-  @alt="random"
-  @size="s"
-  @caption="THE GREATEST"
-  @hasShadow={{true}}
-  @allowFullScreen={{true}}
-  @fullScreenIconColor="light"
-/>
-<EuiText @color="accent">
-  Size m
-</EuiText>
-<EuiImage
-  @url="https://picsum.photos/700/400"
-  @alt="random"
-  @size="m"
-  @caption="THE GREATEST"
-  @hasShadow={{true}}
-  @allowFullScreen={{true}}
-  @fullScreenIconColor="light"
-/>
-<EuiText @color="warning">
-  Size l
-</EuiText>
-<EuiImage
-  @url="https://picsum.photos/700/400"
-  @alt="random"
-  @size="l"
-  @caption="THE GREATEST"
-  @hasShadow={{true}}
-  @allowFullScreen={{true}}
-  @fullScreenIconColor="light"
-/>
-<EuiText @color="warning">
-  Size Custom 300px
-</EuiText>
-<EuiImage
-  @url="https://picsum.photos/700/400"
-  @alt="random"
-  @size="300"
-  @caption="THE GREATEST"
-  @hasShadow={{true}}
-  @allowFullScreen={{true}}
-  @fullScreenIconColor="light"
-/>
-```
+<EuiFlexGroup>
+  <EuiFlexItem @grow={{false}}>
+    <EuiImage
+      @size='l'
+      @hasShadow={{true}}
+      @caption='Random nature image'
+      @alt='Random nature image'
+      @src='https://picsum.photos/300/300'
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+```

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

@@ -0,0 +1,35 @@
+---
+order: 2
+---
+
+# Click an image for a fullscreen version
+
+ <EuiText>
+    <p>Apply the <EuiCode @language="text">allowFullScreen</EuiCode> prop to make the image clickable and show a fullscreen version. Note that the second image also passes <EuiCode @language="js">fullScreenIconColor<span class="token operator">=</span><span class="token string">"dark"</span></EuiCode> to change icon color to better contrast against the light background of that image.</p>
+    </EuiText>
+
+```hbs template
+<EuiFlexGroup>
+  <EuiFlexItem @grow={{false}}>
+    <EuiImage
+      @size='m'
+      @hasShadow={{true}}
+      @allowFullScreen={{true}}
+      @caption='Click me'
+      @alt='Accessible image alt goes here'
+      @url='https://source.unsplash.com/2000x1000/?Nature'
+    />
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiImage
+      @size='m'
+      @hasShadow={{true}}
+      @allowFullScreen={{true}}
+      @caption='Click me'
+      @alt='Accessible image alt goes here'
+      @fullScreenIconColor='dark'
+      @url='https://source.unsplash.com/1000x2000/?Nature'
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+```

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

@@ -0,0 +1,75 @@
+---
+order: 3
+---
+
+# Images can be sized
+
+<EuiText>
+    <p>Images can be sized by passing the <EuiCode @language="text">size</EuiCode> prop a value of <EuiCode @language="text">s / m / l / xl / original / fullWidth / number / string</EuiCode>. This size sets the <strong>maximum</strong> length of the longest edge of the image, whether that is height or width, and scales it. Only the provided sizing values will also increase the size of a smaller image.</p>
+    </EuiText>
+
+```hbs template
+<div>
+  <EuiImage
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @size='{{50}}'
+    @caption='Custom size (50)'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+  <EuiSpacer />
+  <EuiImage
+    @size='s'
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @caption='Small'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+  <EuiSpacer />
+  <EuiImage
+    @size='m'
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @caption='Medium'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+  <EuiSpacer />
+  <EuiImage
+    @size='l'
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @caption='Large'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+  <EuiSpacer />
+  <EuiImage
+    @size='xl'
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @caption='Extra large'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+  <EuiSpacer />
+  <EuiImage
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @caption='Original'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+  <EuiSpacer />
+  <EuiImage
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @size='fullWidth'
+    @caption='Full width'
+    @alt='Accessible image alt goes here'
+    @url='https://source.unsplash.com/1000x1000/?Nature'
+  />
+</div>
+```

package/docs/display/image-demo/demo4.md

@@ -0,0 +1,80 @@
+---
+order: 4
+---
+
+# Float images within text
+
+<EuiText>
+<p>When using <EuiCode @language="text">EuiImage</EuiCode> within <EuiCode @language="text">EuiText</EuiCode> it is often useful to apply floats. Almost always you'll want to pair the <EuiCode @language="text">float</EuiCode> prop usage, with a <EuiCode @language="text">margin</EuiCode> prop usage to give space around your image. Margins, when used in combo with floats, will adjust depending upon the position of the float.</p>
+</EuiText>
+
+```hbs template
+<EuiText>
+  <EuiImage
+    @size='l'
+    @float='right'
+    @margin='l'
+    @hasShadow={{true}}
+    @caption='Random nature image'
+    @allowFullScreen={{true}}
+    @alt='Random nature image'
+    @url='https://picsum.photos/800/500'
+  />
+  <p>Eius et sunt. Nisi neque quis. Quae expedita non iure odit qui consequatur
+    beatae. Quos laboriosam voluptas eaque aut nostrum blanditiis sint aut enim.
+    Quos alias aliquam modi laborum. Mollitia qui minima suscipit voluptatem
+    nesciunt labore vero qui quia. Voluptatem quibusdam deleniti laudantium
+    totam laborum architecto ad eligendi consequatur. Iusto architecto debitis
+    sit aspernatur consectetur corrupti sit excepturi quasi. Vero error facilis
+    ea eum molestias sunt aliquam rerum libero. Eos aut aut commodi optio quod
+    repellat. Dolorem exercitationem placeat a dicta. Maiores qui quia ratione
+    quasi. Facilis laboriosam est magni tempore qui pariatur quia.
+  </p>
+  <p>Qui minus quo. Aut est rem totam. Et aliquid vitae ad aspernatur blanditiis
+    illo nam voluptatem numquam. Voluptatem ducimus iure voluptas voluptates est
+    quibusdam porro aliquam accusantium. Accusantium repellendus consequatur
+    eveniet omnis autem. Et deleniti consequatur aliquam et quis nemo rem
+    excepturi modi. Delectus beatae magni quasi dolorem fugiat. Et qui debitis
+    in et. Qui id aut maxime consequatur. Optio et ut quam sint excepturi.
+    Tenetur cum maiores accusamus ea. Ad sit ut aliquam rerum eius culpa et.</p>
+  <p>Velit doloribus expedita eos voluptas est debitis adipisci laboriosam
+    consequuntur. Officia repellat aut voluptas sunt. Ipsam dignissimos natus
+    labore reiciendis est numquam quia soluta rerum. Nisi modi est aliquid.
+    Animi mollitia et fugit enim et. Voluptatem laudantium laudantium corrupti
+    sit explicabo itaque esse omnis voluptate. Nemo dolorum ut. Voluptatibus eum
+    voluptatem sit laborum velit cupiditate repudiandae id. Atque neque sed
+    corporis aut quia error voluptates cupiditate aut. Ut quam aperiam earum
+    dolor est dicta tempore voluptatem sint. Beatae assumenda nemo aperiam
+    nesciunt. Quaerat id voluptas commodi.</p>
+  <EuiImage
+    @size='l'
+    @float='left'
+    @margin='l'
+    @hasShadow={{true}}
+    @allowFullScreen={{true}}
+    @caption='Another random image'
+    @alt='Random nature image'
+    @url='https://picsum.photos/300/300'
+  />
+  <p>Earum ea voluptatibus reprehenderit dolorum non et aperiam eum non.
+    Expedita doloribus itaque. Consectetur non et aut sit quis inventore eos et.
+    Aut fuga veniam magnam excepturi nihil. Enim ut et. Dolores sint iste minima
+    itaque non et atque magnam iure. Odio perspiciatis qui cumque autem autem.
+    Ut nam beatae voluptatem expedita incidunt vel ea enim. Qui unde dolores
+    earum eos. Et repudiandae aliquid quia rerum ducimus doloremque. Consectetur
+    ut perferendis totam. Veniam in suscipit omnis. Ut est quidem et iste
+    voluptatem officia ad. Officia in perferendis necessitatibus.</p>
+  <p>Est ut ut iure sunt ab et. Iste possimus necessitatibus quia totam dolorem
+    distinctio harum totam et. Quaerat in totam non officiis ut. Provident
+    fugiat repellendus autem libero harum ducimus doloribus autem reiciendis.
+    Odio qui nesciunt consequatur et illum quia. Non dicta et voluptatibus rerum
+    dolor. Illum consequatur deleniti dolor dignissimos quod rerum. Ut quidem
+    eos sapiente rerum numquam laudantium. Nostrum sunt quia quis est sit.
+    Ratione sint error. Alias animi ullam unde magnam repellendus omnis et quia
+    dolorem. Voluptas quidem laudantium totam quisquam in reiciendis officiis.
+    Et suscipit doloribus earum quis nihil voluptatem provident aut vero.
+    Accusantium ducimus voluptatem ad aperiam ut consequatur. Ut dicta
+    consequatur. Dignissimos ipsum accusamus quos provident consequatur. Sequi
+    temporibus quisquam voluptates eum eos consectetur et.</p>
+</EuiText>
+```

package/docs/display/image.md

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

package/docs/display/list-group.md

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

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

@@ -1,10 +1,15 @@
-# Indefinite Progress
+---
+order: 1
+---
 
-Indefinite progress bar is displayed whenever the component DOES NOT have the `@max` prop. When in indefinite mode, the component will ignore the `@value`, `@valueText`, and `@label` props
+<EuiText>
 
-> you can still define `@size` and `@color` props.<br>
+<p>The <strong>EuiProgress</strong> component by default will display in an indeterminate loading state (rendered as a single div) until you define a <EuiCode @language="text">max</EuiCode> and <EuiCode @language="text">value</EuiCode> prop. The <EuiCode @language="text">size</EuiCode> prop refers to its vertical height. It will always stretch <EuiCode @language="text">100%</EuiCode> to its container.</p>
+
+</EuiText>
 
 ```hbs template
-<EuiProgress @color="accent" @size="s" />
-<EuiSpacer @size="m" />
+<div>
+  <EuiProgress @size='xs' @color='accent' />
+</div>
 ```

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

@@ -1,22 +1,23 @@
-# Demo 2
+---
+order: 2
+---
 
-To make a progress bar actually progressable, you should pass down the `@max` prop.
+# Progress with values
 
-`:label` prop is used as a named block.
+<EuiText>
+<p>Once the <EuiCode @language="text">max</EuiCode> and <EuiCode @language="text">value</EuiCode> props are set, it will act as a determinate progress bar. This is rendered using an HTML5 <EuiCode @language="text">progress</EuiCode> tag.</p>
 
-`@value` is the number value of the progress bar that is passed down as a HTML attribute to the `<progress />` tag.
-
-ValueText can be and should be a `@valueText` prop and `:valueText` named block. Whenever the `@valueText` prop is passed as TRUE, that means you want the `@value` prop to be displayed atop the progress bar. When set to false or not passed at all, that means you DON'T want `@value` to be displayed OR that you are passing a custom `:valueText` named block.<br><br>
+</EuiText>
 
 ```hbs template
-<EuiButton {{on "click" this.increaseValue1}}>
+<EuiButton {{on 'click' this.increaseValue1}}>
   Click!
 </EuiButton>
-<EuiSpacer @size="m" />
+<EuiSpacer @size='m' />
 <EuiProgress
   @max={{100}}
-  @color="primary"
-  @size="l"
+  @color='primary'
+  @size='l'
   @value={{this.value1}}
   @valueText={{true}}
 >
@@ -24,22 +25,6 @@ ValueText can be and should be a `@valueText` prop and `:valueText` named block.
     Click it!
   </:label>
 </EuiProgress>
-
-<EuiSpacer @size="m" />
-
-<EuiProgress
-  @max={{100}}
-  @color="secondary"
-  @size="l"
-  @value={{this.value1}}
->
-  <:label>
-    Click it!
-  </:label>
-  <:valueText>
-    {{this.value1Text}}
-  </:valueText>
-</EuiProgress>
 ```
 
 ```js component

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

@@ -0,0 +1,27 @@
+---
+order: 3
+---
+
+# Sizes
+
+<EuiText>
+<p>You can adjust the <EuiCode @language="text">size</EuiCode> of both determinate and indeterminate progress bars.</p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiProgress @value='{{20}}' @max='{{100}}' @size='xs' />
+  <EuiSpacer @size='l' />
+
+  <EuiProgress @value='{{40}}' @max='{{100}}' @size='xs' />
+  <EuiSpacer @size='l' />
+
+  <EuiProgress @value='{{60}}' @max='{{100}}' @size='s' />
+  <EuiSpacer @size='l' />
+
+  <EuiProgress @value='{{80}}' @max='{{100}}' @size='m' />
+  <EuiSpacer @size='l' />
+
+  <EuiProgress @value='{{90}}' @max='{{100}}' @size='l' />
+</div>
+```