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

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>
+```

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

@@ -0,0 +1,77 @@
+---
+order: 4
+---
+
+# Colors
+
+<EuiText>
+<p><strong>EuiProgress</strong> supports a few options for <EuiCode @language="text">color</EuiCode>. You can pass any value from our basic color set or from our visualization palette (<EuiCode @language="text">vis0</EuiCode> through <EuiCode @language="text">vis9</EuiCode>). To learn more about color usage, go to the <a href="#/guidelines/colors">Color guidelines</a> page.</p>
+</EuiText>
+
+```hbs template
+<EuiFlexGroup>
+  <EuiFlexItem>
+    {{#each this.mainColors as |color|}}
+      <EuiProgress
+        @valueText={{true}}
+        @value={{80}}
+        @max={{100}}
+        @color={{color}}
+        @size='m'
+      >
+        <:label>
+          {{color}}
+        </:label>
+      </EuiProgress>
+      <EuiSpacer size='s' />
+    {{/each}}
+  </EuiFlexItem>
+  <EuiFlexItem>
+    {{#each this.visColors as |color|}}
+      <EuiProgress
+        @valueText={{true}}
+        @value={{80}}
+        @max={{100}}
+        @color={{color}}
+        @size='m'
+      >
+        <:label>
+          {{color}}
+        </:label>
+      </EuiProgress>
+      <EuiSpacer size='s' />
+    {{/each}}
+  </EuiFlexItem>
+</EuiFlexGroup>
+```
+
+```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';
+
+export default class DemoIconComponent extends Component {
+  @tracked mainColors = [
+    'primary',
+    'success',
+    'warning',
+    'danger',
+    'subdued',
+    'accent'
+  ];
+
+  @tracked visColors = [
+    'vis0',
+    'vis1',
+    'vis2',
+    'vis3',
+    'vis4',
+    'vis5',
+    'vis6',
+    'vis7',
+    'vis8',
+    'vis9'
+  ];
+}
+```

package/docs/display/progress.md

@@ -1 +1 @@
-# Progress
+<EuiPageHeader @pageTitle="Progress"/>

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

@@ -1,7 +1,6 @@
 ---
 order: 1
 ---
-# Demo
 
 ```hbs template
 <div>
@@ -11,121 +10,4 @@ order: 1
     </EuiFlexItem>
   </EuiFlexGroup>
 </div>
-<EuiSpacer />
-<div>
-  <EuiFlexGroup>
-    <EuiFlexItem>
-      <EuiStat
-        @title='22,123'
-        @description='Total people'
-        @titleColor='primary'
-      />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiStat
-        @title='22,123'
-        @description='Total people'
-        @titleColor='accent'
-      />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiStat
-        @title='22,123'
-        @description='Total people'
-        @titleColor='danger'
-      />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-</div>
-
-<EuiSpacer />
-<div>
-  <EuiFlexGroup>
-    <EuiFlexItem>
-      <EuiStat
-        @title='22,123'
-        @description='Total people'
-        @isLoading={{this.isLoading}}
-        @titleColor='primary'
-      />
-      <EuiSpacer />
-      <EuiSwitch
-        @label='Show as loading'
-        @checked={{this.isLoading}}
-        @onChange={{pick 'target.checked' (set this 'isLoading')}}
-      />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-</div>
-<EuiSpacer />
-<div>
-  <EuiFlexGroup>
-    <EuiFlexItem>
-      <EuiPanel>
-        <EuiStat
-          @title='8,888'
-          @description='Total widgets'
-          @textAlign='right'
-          @isLoading={{this.isLoading}}
-        >
-          <EuiIcon @type='empty' />
-        </EuiStat>
-      </EuiPanel>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiPanel>
-        <EuiStat
-          @title='2,000'
-          @description='Pending widgets'
-          @titleColor='accent'
-          @textAlign='right'
-          @isLoading={{this.Loading}}
-        >
-          <EuiIcon @type='clock' @color='accent' />
-        </EuiStat>
-      </EuiPanel>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiPanel>
-        <EuiStat
-          @title='6,800'
-          @description='Success widgets'
-          @titleColor='success'
-          @textAlign='right'
-          @isLoading={{this.isLoading}}
-        >
-          <EuiIcon @type='check' @color='success' />
-        </EuiStat>
-      </EuiPanel>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiPanel>
-        <EuiStat
-          @title='88'
-          @description='Error widgets'
-          @titleColor='danger'
-          @textAlign='right'
-          @isLoading={{this.isLoading}}
-        >
-          <EuiIcon @type='alert' @color='danger' />
-        </EuiStat>
-      </EuiPanel>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiSpacer />
-  <EuiSwitch
-    @label='Show as loading'
-    @checked={{this.isLoading}}
-    @onChange={{pick 'target.checked' (set this 'isLoading')}}
-  />
-</div>
-```
-
-```js component
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class StatDemoComponent extends Component {
-  @tracked isLoading = true;
-}
 ```

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

@@ -1,48 +1,50 @@
-# Demo
+---
+order: 2
+---
+
+# Applying color
 
-<EuiTitle>Title size</EuiTitle>
 <EuiText>
-title uses the <EuiCode>EuiTitle</EuiCode> component and thus uses the same sizing property
-values (applied via the titleSize property). Although all EuiTitle sizes are
-available, suggested sizes include <EuiCode>'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs'</EuiCode>. By
-default, the size is set to large <EuiCode>l</EuiCode>. The @description label cannot be
-re-sized via component properties.
+<p>
+<EuiCode>title</EuiCode> can be altered using the color property. By default, it will appear in <EuiCode>full</EuiCode> color. For proper color contrast, only a limited set of EUI colors are offered. See the Props tab above for a list of available colors.
+</p>
 </EuiText>
-<EuiSpacer/>
 
 ```hbs template
 <div>
   <EuiFlexGroup>
     <EuiFlexItem>
-      <EuiStat @title='1,000,000' @description='Large size' @titleSize='l' />
+      <EuiStat @title='1' @description='Default color' />
     </EuiFlexItem>
     <EuiFlexItem>
-      <EuiStat @title='1,000,000' @description='Medium size' @titleSize='m' />
+      <EuiStat @title='10' @description='Subdued color' @titleColor='subdued' />
     </EuiFlexItem>
     <EuiFlexItem>
-      <EuiStat @title='1,000,000' @description='Small size' @titleSize='s' />
+      <EuiStat
+        @title='100'
+        @description='Primary color'
+        @titleColor='primary'
+      />
     </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiFlexGroup>
     <EuiFlexItem>
       <EuiStat
-        @title='1,000,000'
-        @description='Extra small size'
-        @titleSize='xs'
+        @title='1,000'
+        @description='Success color'
+        @titleColor='success'
       />
     </EuiFlexItem>
     <EuiFlexItem>
       <EuiStat
-        @title='1,000,000'
-        @description='Extra extra small size'
-        @titleSize='xxs'
+        @title='10,000'
+        @description='Danger color'
+        @titleColor='danger'
       />
     </EuiFlexItem>
     <EuiFlexItem>
       <EuiStat
-        @title='1,000,000'
-        @description='Extra extra extra small size'
-        @titleSize='xxxs'
+        @title='100,000'
+        @description='Accent color'
+        @titleColor='accent'
       />
     </EuiFlexItem>
   </EuiFlexGroup>

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

@@ -0,0 +1,39 @@
+---
+order: 3
+---
+
+# Text alignment
+
+<EuiText>
+<p>
+<strong>EuiStat</strong> also offers alignment options. By default, text will be left aligned.
+</p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat
+        @title='$ 1,000.00'
+        @description='Left align'
+        @textAlign='left'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat
+        @title='99.9999'
+        @description='Center align'
+        @textAlign='center'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat
+        @title='1,000.00 €'
+        @description='Right align'
+        @textAlign='right'
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+```

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

@@ -0,0 +1,50 @@
+---
+order: 4
+---
+
+# Title size
+
+<EuiText>
+<p>
+<EuiCode>title</EuiCode> uses the <strong>EuiTitle</strong> component and thus uses the same sizing property values (applied via the <EuiCode>titleSize</EuiCode> property). Although all <strong>EuiTitle</strong> sizes are available, suggested sizes include <EuiCode @language='js'>'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs'</EuiCode>. By default, the size is set to large <EuiCode>'l'</EuiCode>. The <EuiCode>description</EuiCode> label cannot be re-sized via component properties.
+</p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat @title='1,000,000' @description='Large size' @titleSize='l' />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat @title='1,000,000' @description='Medium size' @titleSize='m' />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat @title='1,000,000' @description='Small size' @titleSize='s' />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat
+        @title='1,000,000'
+        @description='Extra small size'
+        @titleSize='xs'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat
+        @title='1,000,000'
+        @description='Extra extra small size'
+        @titleSize='xxs'
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiStat
+        @title='1,000,000'
+        @description='Extra extra extra small size'
+        @titleSize='xxxs'
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+```

package/docs/display/stat-demo/demo5.md

@@ -0,0 +1,25 @@
+---
+order: 5
+---
+
+# Reverse the order
+
+<EuiText>
+<p>
+You can reverse the order of the <EuiCode>description</EuiCode> and <EuiCode>title</EuiCode> text by setting the <EuiCode>reverse</EuiCode> property to true. By default, the description (label) is displayed above the title (value).
+</p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat
+        @title='10,000'
+        @description='Description underneath'
+        @reverse={{true}}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+```

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

@@ -0,0 +1,40 @@
+---
+order: 6
+---
+
+# Stat loading
+
+<EuiText>
+<p>
+If you apply the <EuiCode>isLoading</EuiCode> prop, the title will indicate the loading status by swapping the provided title with two flashing dashes.
+</p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiStat
+        @title='7,600 mm'
+        @description='Total People'
+        @isLoading={{this.isLoading}}
+      />
+      <EuiSpacer />
+      <EuiSwitch
+        @label='Show as loading'
+        @checked={{this.isLoading}}
+        @onChange={{pick 'target.checked' (set this 'isLoading')}}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class StatDemoComponent extends Component {
+  @tracked isLoading = true;
+}
+```

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

@@ -0,0 +1,84 @@
+---
+order: 7
+---
+
+# Putting it all together
+
+<EuiText>
+<p>
+Following are samples demonstrating how you might assemble and display <strong>EuiStat</strong> components.
+</p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiPanel>
+        <EuiStat
+          @title='8,888'
+          @description='Total widgets'
+          @textAlign='right'
+          @isLoading={{this.isLoading}}
+        >
+          <EuiIcon @type='empty' />
+        </EuiStat>
+      </EuiPanel>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiPanel>
+        <EuiStat
+          @title='2,000'
+          @description='Pending widgets'
+          @titleColor='accent'
+          @textAlign='right'
+          @isLoading={{this.isLoading}}
+        >
+          <EuiIcon @type='clock' @color='accent' />
+        </EuiStat>
+      </EuiPanel>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiPanel>
+        <EuiStat
+          @title='6,800'
+          @description='Success widgets'
+          @titleColor='success'
+          @textAlign='right'
+          @isLoading={{this.isLoading}}
+        >
+          <EuiIcon @type='check' @color='success' />
+        </EuiStat>
+      </EuiPanel>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiPanel>
+        <EuiStat
+          @title='88'
+          @description='Error widgets'
+          @titleColor='danger'
+          @textAlign='right'
+          @isLoading={{this.isLoading}}
+        >
+          <EuiIcon @type='alert' @color='danger' />
+        </EuiStat>
+      </EuiPanel>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer />
+  <EuiSwitch
+    @label='Show as loading'
+    @checked={{this.isLoading}}
+    @onChange={{pick 'target.checked' (set this 'isLoading')}}
+  />
+</div>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class StatDemoComponent extends Component {
+  @tracked isLoading = false;
+}
+```

package/docs/display/stat.md

@@ -1 +1,8 @@
-# Stat
+<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>
+    <EuiHorizontalRule />