@ember-eui/core 7.1.5 → 8.0.0-beta.1

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

@@ -1,15 +0,0 @@
----
-order: 1
----
-
-<EuiText>
-
-<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
-<div>
-  <EuiProgress @size='xs' @color='accent' />
-</div>
-```

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

@@ -1,62 +0,0 @@
----
-order: 2
----
-
-# Progress with values
-
-<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>
-
-</EuiText>
-
-```hbs template
-<EuiButton {{on 'click' this.increaseValue1}}>
-  Click!
-</EuiButton>
-<EuiSpacer @size='m' />
-<EuiProgress
-  @max={{100}}
-  @color='primary'
-  @size='l'
-  @value={{this.value1}}
-  @valueText={{true}}
->
-  <:label>
-    Click it!
-  </:label>
-</EuiProgress>
-```
-
-```js component
-// should be Controller
-import Component from '@ember/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import { computed } from '@ember/object';
-
-export default class DemoProgressComponent extends Component {
-  @tracked value1 = 0;
-
-  @computed('value1')
-  get value1Text() {
-    if (this.value1 == 0) {
-      return 'Progress me!';
-    } else if (this.value1 < 40) {
-      return 'Keep at it!';
-    } else if (this.value1 >= 40 && this.value1 < 70) {
-      return 'Keep going!! Grind it!';
-    } else if (this.value1 >= 70 && this.value1 < 100) {
-      return 'Almost there!!';
-    } else if (this.value1 == 100) {
-      return 'Nailed it!';
-    }
-  }
-
-  @action
-  increaseValue1() {
-    if (this.value1 < 100) {
-      this.value1 += 10;
-    }
-  }
-}
-```

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

@@ -1,27 +0,0 @@
----
-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

@@ -1,77 +0,0 @@
----
-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/index.md

@@ -1,7 +0,0 @@
----
-title: Progress
----
-
-<EuiSpacer/>
-<EuiPageHeader @pageTitle="Progress"/>
-<EuiHorizontalRule />

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

@@ -1,13 +0,0 @@
----
-order: 1
----
-
-```hbs template
-<div>
-  <EuiFlexGroup>
-    <EuiFlexItem>
-      <EuiStat @title='7,600 mm' @description='Total people' />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-</div>
-```

package/docs/display/stat-demo/demo/d02-applying-color.md

@@ -1,61 +0,0 @@
----
-order: 2
----
-
-# Applying color
-
-<EuiText>
-<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>
-
-```hbs template
-<div>
-  <EuiFlexGroup>
-    <EuiFlexItem>
-      <EuiStat @title='1' @description='Default color' />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiStat @title='10' @description='Subdued color' @titleColor='subdued' />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiStat
-        @title='100'
-        @description='Primary color'
-        @titleColor='primary'
-      />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiStat
-        @title='1,000'
-        @description='Success color'
-        @titleColor='success'
-      />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiStat
-        @title='10,000'
-        @description='Danger color'
-        @titleColor='danger'
-      />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiStat
-        @title='100,000'
-        @description='Accent color'
-        @titleColor='accent'
-      />
-    </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/demo/d03-text-alignment.md

@@ -1,39 +0,0 @@
----
-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/demo/d04-title-size.md

@@ -1,50 +0,0 @@
----
-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/demo/d05-reverse-the-order.md

@@ -1,25 +0,0 @@
----
-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/demo/d06-stat-loading.md

@@ -1,40 +0,0 @@
----
-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/demo/d07-putting-it-all-together.md

@@ -1,84 +0,0 @@
----
-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='warning' @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-demo/index.md

@@ -1,13 +0,0 @@
----
-title: Stat
----
-
-<EuiSpacer/>
-<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 />

package/docs/display/text/demo/d01-text.md

@@ -1,124 +0,0 @@
----
-order: 1
----
-
-```hbs template
-<div>
-  <EuiText @grow={{false}}>
-    <h1>This is Heading One</h1>
-    <p>
-      Far out in the uncharted backwaters of the
-      <a href='#'>unfashionable</a>{' '} end of the western spiral arm of the
-      Galaxy lies a small unregarded yellow sun. When suddenly some wild
-      JavaScript code appeared!{' '}
-      <code>const whoa = &quot;!&quot;</code>
-    </p>
-
-    <pre>
-      <code>const completelyUnexpected = &quot;the audacity!&quot;;</code>
-    </pre>
-
-    <p>That was close.</p>
-
-    <blockquote>
-      <p>
-        I&apos;ve seen things you people wouldn&apos;t believe. Attack ships on
-        fire off the shoulder of Orion. I watched C-beams glitter in the dark
-        near the Tannhäuser Gate. All those moments will be lost in time, like
-        tears in rain. Time to die.
-      </p>
-    </blockquote>
-
-    <p>
-      Orbiting this at a distance of roughly ninety-two million miles is an
-      utterly insignificant little blue green planet whose ape- descended life
-      forms are so amazingly primitive that they still think digital watches are
-      a pretty neat idea.
-    </p>
-
-    <ul>
-      <li>List item one</li>
-      <li>List item two</li>
-      <li>Dolphins</li>
-    </ul>
-
-    <p>
-      This planet has - or rather had - a problem, which was this: most of the
-      people living on it were unhappy for pretty much of the time. Many
-      solutions were suggested for this problem, but most of these were largely
-      concerned with the movements of small green pieces of paper, which is odd
-      because on the whole it was not the small green pieces of paper that were
-      unhappy.
-    </p>
-
-    <h2>This is Heading Two</h2>
-
-    <ol>
-      <li>Number one</li>
-      <li>Number two</li>
-      <li>Dolphins again</li>
-    </ol>
-
-    <p>
-      But the dog wasn&rsquo;t lazy, it was just practicing mindfulness, so it
-      had a greater sense of life-satisfaction than that fox with all its silly
-      jumping.
-    </p>
-
-    <p>
-      And from the fox&rsquo;s perspective, life was full of hoops to jump{' '}
-      <em>through</em>, low-hanging fruit to jump
-      <em>for</em>, and dead car batteries to jump-<em>start</em>.
-    </p>
-
-    <h3>This is Heading Three</h3>
-
-    <p>
-      So it thought the dog was making a poor life choice by focusing so much on
-      mindfulness. What if its car broke down?
-    </p>
-
-    <h4>This is Heading Four</h4>
-
-    <p>
-      So it thought the dog was making a poor life choice by focusing so much on
-      mindfulness. What if its car broke down?
-    </p>
-
-    <h5>This is Heading Five</h5>
-
-    <p>
-      <small>
-        So it thought the dog was making a poor life choice by focusing so much
-        on mindfulness. What if its car broke down?
-      </small>
-    </p>
-
-    <h6>This is Heading Six</h6>
-
-    <EuiHorizontalRule />
-
-    <dl>
-      <dt>The Elder Scrolls: Morrowind</dt>
-      <dd>The opening music alone evokes such strong memories.</dd>
-      <dt>TIE Fighter</dt>
-      <dd>
-        The sequel to XWING, join the dark side and fly for the Emporer.
-      </dd>
-      <dt>Quake 2</dt>
-      <dd>The game that made me drop out of college.</dd>
-    </dl>
-
-    <EuiHorizontalRule />
-
-    <dl className='eui-definitionListReverse'>
-      <dt>Name</dt>
-      <dd>The Elder Scrolls: Morrowind</dd>
-      <dt>Game style</dt>
-      <dd>Open-world, fantasy, action role-playing</dd>
-      <dt>Release date</dt>
-      <dd>2002</dd>
-    </dl>
-  </EuiText>
-</div>
-```