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

package/docs/navigation/collapsible-nav-demo/demo2.md

@@ -0,0 +1,108 @@
+---
+order: 2
+---
+
+# Collapsible nav group
+
+<EuiText>
+	<p>
+		An <strong>EuiCollapsibleNavGroup</strong> adds some basic borders and <EuiCode>background</EuiCode> color of <EuiCode>none</EuiCode>, <EuiCode>light</EuiCode>, or <EuiCode>dark</EuiCode>. Give each section a heading by providing an optional <EuiCode>title</EuiCode> and <EuiCode>iconType</EuiCode>. Make the section collapsible (accordion style) with <EuiCode>isCollapsible=true</EuiCode>.
+	</p>
+	<p>
+    	When in <EuiCode>isCollapsible</EuiCode> mode, a <EuiCode>title</EuiCode> and <EuiCode>initialIsOpen:boolean</EuiCode> is required.
+	</p>
+
+</EuiText>
+
+```hbs template
+<EuiCollapsibleNavGroup>
+  <:content>
+    <EuiText @size='s' @color='subdued'>
+      <p>This is a basic group without any modifications</p>
+    </EuiText>
+  </:content>
+</EuiCollapsibleNavGroup>
+<EuiCollapsibleNavGroup @title='Nav group' @iconType='logoElastic'>
+  <:content>
+    <EuiText @size='s' @color='subdued'>
+      <p>
+        This is a nice group with a heading supplied via{' '}
+        <EuiCode>title</EuiCode>
+        and
+        <EuiCode>iconType</EuiCode>.
+      </p>
+    </EuiText>
+  </:content>
+</EuiCollapsibleNavGroup>
+<EuiCollapsibleNavGroup
+  @background='light'
+  @title='Nav group'
+  @isCollapsible={{true}}
+  @iconType='logoElastic'
+  @initialIsOpen={{true}}
+>
+  <:content>
+    <EuiText @size='s' @color='subdued'>
+      <p>
+        This group is
+        <EuiCode>collapsible</EuiCode>
+        and set with
+        <EuiCode>initialIsOpen</EuiCode>. It has a heading that is the
+        collapsing button via
+        <EuiCode>title</EuiCode>
+        and
+        <EuiCode>iconType</EuiCode>.
+      </p>
+    </EuiText>
+  </:content>
+</EuiCollapsibleNavGroup>
+<EuiCollapsibleNavGroup
+  @title='Nav group'
+  @iconType='logoGCPMono'
+  @iconSize='xxl'
+  @titleSize='s'
+  @isCollapsible={{true}}
+  @initialIsOpen={{false}}
+  @background='dark'
+>
+  <:content>
+    <EuiText @size='s'>
+      <p>
+        This is a
+        <EuiCode>dark</EuiCode>
+        <EuiCode>collapsible</EuiCode>
+        group that is initally set to closed,
+        <EuiCode>iconSize=&quot;xxl&quot;</EuiCode>
+        and
+        <EuiCode>titleSize=&quot;s&quot;</EuiCode>.
+      </p>
+    </EuiText>
+  </:content>
+</EuiCollapsibleNavGroup>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoCollapsibleNavComponent extends Component {
+  @tracked collNavIsOpen = false;
+  @tracked navIsDocked = false;
+
+  @action
+  openCollapsibleNav() {
+    this.collNavIsOpen = true;
+  }
+
+  @action
+  closeCollapsibleNav() {
+    this.collNavIsOpen = false;
+  }
+
+  @action
+  toggleDockedNav() {
+    this.navIsDocked = !this.navIsDocked;
+  }
+}
+```

package/docs/navigation/collapsible-nav.md

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

package/docs/navigation/key-pad-menu-demo/demo1.md

@@ -0,0 +1,77 @@
+---
+order: 1
+---
+
+<EuiText>
+	<p>
+		The <strong>EuiKeyPadMenu</strong> component presents <strong>EuiKeyPadMenuItems</strong> in a tiled format, with a fixed width which will accommodate three items and then wrap.
+  </p>
+
+  <p>
+  <strong>EuiKeyPadMenu</strong> is just a wrapping element for creating the list elements but you must declare each <strong>EuiKeyPadMenu</strong> component manually and wrap them on li
+  </p>
+
+</EuiText>
+<EuiSpacer/>
+
+# Basic
+
+```hbs template
+<EuiCallOut @iconType='accessibility' @color='warning'>
+  <:body>
+    If the menu provides navigation for your application, wrap the EuiKeyPadMenu
+    with
+    <EuiCode @language='html'>{{this.navCode}}</EuiCode>
+  </:body>
+</EuiCallOut>
+
+<EuiSpacer />
+
+<nav aria-label='Nav title'>
+  <EuiKeyPadMenu>
+    <li>
+      <EuiKeyPadMenuItem @label='Dashboard'>
+        <EuiIcon @type='dashboardApp' @size='l' />
+      </EuiKeyPadMenuItem>
+    </li>
+
+    <li>
+      <EuiKeyPadMenuItem @label='Canvas'>
+        <EuiIcon @type='canvasApp' @size='l' />
+      </EuiKeyPadMenuItem>
+    </li>
+
+    <li>
+      <EuiKeyPadMenuItem @isSelected={{true}} @label='Lens'>
+        <EuiIcon @type='lensApp' @size='l' />
+      </EuiKeyPadMenuItem>
+    </li>
+
+    <li>
+      <EuiKeyPadMenuItem @isDisabled={{true}} @label='Visualize'>
+        <EuiIcon @type='visualizeApp' @size='l' />
+      </EuiKeyPadMenuItem>
+    </li>
+
+    <li>
+      <EuiKeyPadMenuItem @label='Graph'>
+        <EuiIcon @type='graphApp' @size='l' />
+      </EuiKeyPadMenuItem>
+    </li>
+
+    <li>
+      <EuiKeyPadMenuItem @label='Advanced Settings'>
+        <EuiIcon @type='advancedSettingsApp' @size='l' />
+      </EuiKeyPadMenuItem>
+    </li>
+  </EuiKeyPadMenu>
+</nav>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoSideNavComponent extends Component {
+  navCode = "<nav aria-label='Nav title'></nav>";
+}
+```

package/docs/navigation/key-pad-menu-demo/demo2.md

@@ -0,0 +1,102 @@
+---
+order: 2
+---
+
+<EuiText>
+	<p>
+		The <strong>EuiKeyPadMenuItem</strong> component can act both as an anchor as well as a button by specifying <EuiCode>href</EuiCode> or <EuiCode>onClick</EuiCode> respectively. It requires a text-based <EuiCode>label</EuiCode> and using the block for declaring the icon. This is the most flexible way for handling the customization of the icon itself.
+  </p>
+
+  <p>
+  When using the <EuiCode>isSelected</EuiCode> prop to create a toggle button, you must supply both the <EuiCode>true</EuiCode> and <EuiCode>false</EuiCode> states explicitly to ensure the attribute is added for both states.
+  </p>
+
+</EuiText>
+
+# Menu item
+
+```hbs template
+<EuiKeyPadMenu>
+  <li>
+    <EuiKeyPadMenuItem
+      @label='Button'
+      @isSelected={{eq this.selectedID this.keypadButtonId__1}}
+      @id={{this.keypadButtonId__1}}
+      {{on 'click' (set this 'selectedID' this.keypadButtonId__1)}}
+    >
+      <EuiIcon @type='grid' @size='l' />
+    </EuiKeyPadMenuItem>
+  </li>
+  <li>
+    <EuiKeyPadMenuItem
+      @label='Button'
+      @isSelected={{eq this.selectedID this.keypadButtonId__2}}
+      @id={{this.keypadButtonId__2}}
+      {{on 'click' (set this 'selectedID' this.keypadButtonId__2)}}
+    >
+      <EuiIcon @type='grid' @size='l' />
+    </EuiKeyPadMenuItem>
+  </li>
+  <li>
+    <EuiKeyPadMenuItem
+      @label='Disabled'
+      @id={{this.keypadButtonId__3}}
+      @isDisabled={{true}}
+    >
+      <EuiIcon @type='grid' @size='l' />
+    </EuiKeyPadMenuItem>
+  </li>
+  <li>
+    <EuiKeyPadMenuItem
+      @label='Link'
+      @isSelected={{eq this.selectedID this.keypadButtonId__4}}
+      @id={{this.keypadButtonId__4}}
+      @href='#'
+      {{on 'click' (set this 'selectedID' this.keypadButtonId__4)}}
+    >
+      <EuiIcon @type='link' @size='l' />
+    </EuiKeyPadMenuItem>
+  </li>
+  <li>
+    <EuiKeyPadMenuItem
+      @label='Button'
+      @isSelected={{eq this.selectedID this.keypadButtonId__5}}
+      @id={{this.keypadButtonId__5}}
+      {{on 'click' (set this 'selectedID' this.keypadButtonId__5)}}
+    >
+      <EuiIcon @type='link' @size='l' />
+    </EuiKeyPadMenuItem>
+  </li>
+  <li>
+    <EuiKeyPadMenuItem
+      @label='Button'
+      @isSelected={{eq this.selectedID this.keypadButtonId__6}}
+      @id={{this.keypadButtonId__6}}
+      {{on 'click' (set this 'selectedID' this.keypadButtonId__6)}}
+    >
+      <EuiIcon @type='link' @size='l' />
+    </EuiKeyPadMenuItem>
+  </li>
+</EuiKeyPadMenu>
+```
+
+```js component
+import Component from '@glimmer/component';
+// import { uniqueId } from '@ember-eui/core/helpers/unique-id';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoSideNavComponent extends Component {
+  @tracked selectedID;
+  keypadButtonId__1 = 'keypad1';
+  keypadButtonId__2 = 'keypad2';
+  keypadButtonId__3 = 'keypad3';
+  keypadButtonId__4 = 'keypad4';
+  keypadButtonId__5 = 'keypad5';
+  keypadButtonId__6 = 'keypad6';
+
+  constructor() {
+    super(...arguments);
+    this.selectedID = this.keypadButtonId__6;
+  }
+}
+```

package/docs/navigation/key-pad-menu-demo/demo3.md

@@ -0,0 +1,54 @@
+---
+order: 3
+---
+
+<EuiText>
+	<p>
+		If the item links to a module that is not GA (beta, lab, etc), you can add a <EuiCode>betaBadgeLabel</EuiCode> and <EuiCode>betaBadgeTooltipContent</EuiCode> to the card and it will properly create and position an <a href="/docs/core/docs/navigation/key-pad-menu">EuiBetaBadge</a>.
+  </p>
+
+  <p>
+  Supplying just a label will only show the first letter in the badge but displays the full label to the tooltip. You can also pass an <EuiCode>iconType</EuiCode> to replace the letter.
+  </p>
+
+</EuiText>
+<EuiSpacer/>
+
+# Beta item
+
+```hbs template
+<EuiKeyPadMenu>
+  <li>
+    <EuiKeyPadMenuItem @label='No beta'>
+      <EuiIcon @type='editorStrike' @size='l' />
+    </EuiKeyPadMenuItem>
+  </li>
+
+  <li>
+    <EuiKeyPadMenuItem
+      @label='Single letter'
+      @betaBadgeTooltipContent='This module is not GA. Please help us by reporting any bugs.'
+      @betaBadgeLabel='Beta'
+    >
+      <EuiIcon @type='editorBold' @size='l' />
+    </EuiKeyPadMenuItem>
+  </li>
+  <li>
+    <EuiKeyPadMenuItem
+      @label='Icon'
+      @betaBadgeLabel='External'
+      @betaBadgeTooltipContent='This module is an external app'
+      @betaBadgeIconType='popout'
+    >
+      <EuiIcon @type='editorCodeBlock' @size='l' />
+    </EuiKeyPadMenuItem>
+  </li>
+
+</EuiKeyPadMenu>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoSideNavComponent extends Component {}
+```

package/docs/navigation/key-pad-menu-demo/demo4.md

@@ -0,0 +1,71 @@
+---
+order: 4
+---
+
+<EuiText>
+	<p>
+		<strong>EuiKeyPadMenuItems</strong> can also be rendered as checkbox or radio form controls using the <EuiCode>checkable</EuiCode> prop. Pass in <EuiCode>"multi"</EuiCode> for checkboxes or <EuiCode>"single"</EuiCode> for radios.
+  </p>
+
+  <p>
+  To ensure the <strong>EuiKeyPadMenu</strong> renders the semantically appropriate HTML elements, you will need to pass in the <EuiCode>checkable</EuiCode> prop as <EuiCode>true</EuiCode> or an object that requires a <EuiCode>legend</EuiCode>. This will wrap the input group in a <EuiCode>fieldset</EuiCode> with a <EuiCode>legend</EuiCode>.
+  </p>
+
+</EuiText>
+
+# Checkable
+
+```hbs template
+<EuiKeyPadMenu @checkable={{hash legend='Multi select as checkboxes'}}>
+
+  <EuiKeyPadMenuItem
+    @checkable='multi'
+    @isSelected={{this.multiSelect1isSelected}}
+    @id={{this.keypadMultiSelectButtonId__1}}
+    @label='Check one'
+    @onChange={{fn this.toggleCheckbox 'multiSelect1isSelected'}}
+  >
+    <EuiIcon @type='faceHappy' @size='l' />
+  </EuiKeyPadMenuItem>
+  <EuiKeyPadMenuItem
+    @checkable='multi'
+    @isSelected={{this.multiSelect2isSelected}}
+    @id={{this.keypadMultiSelectButtonId__2}}
+    @label='Check two'
+    @onChange={{fn this.toggleCheckbox 'multiSelect2isSelected'}}
+  >
+    <EuiIcon @type='faceNeutral' @size='l' />
+  </EuiKeyPadMenuItem>
+  <EuiKeyPadMenuItem
+    @checkable='multi'
+    @id={{this.keypadMultiSelectButtonId__3}}
+    @label='Disabled'
+    @isDisabled={{true}}
+    @onChange={{fn this.toggleCheckbox 'multiSelect2isSelected'}}
+  >
+    <EuiIcon @type='faceSad' @size='l' />
+  </EuiKeyPadMenuItem>
+</EuiKeyPadMenu>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoSideNavComponent extends Component {
+  @tracked multiSelect1isSelected = false;
+  @tracked multiSelect2isSelected = false;
+
+  keypadMultiSelectButtonId__1 = 'keypaddemo41';
+  keypadMultiSelectButtonId__2 = 'keypaddemo42';
+  keypadMultiSelectButtonId__3 = 'keypaddemo43';
+
+  toggleCheckbox = (name) => {
+    if (this[name]) {
+      this[name] = false;
+      return;
+    }
+    this[name] = true;
+  };
+}
+```

package/docs/navigation/key-pad-menu-demo/demo5.md

@@ -0,0 +1,65 @@
+---
+order: 5
+---
+
+<EuiText>
+	<p>
+		For single selection (radio) items, you must pass a singular <EuiCode>name</EuiCode> prop to each item to ensure they are grouped properly. Also, if you would like to hide the visible <EuiCode>legend</EuiCode> in favor of an screen-reader only solution, you can pass <EuiCode>ariaLegend</EuiCode> instead of <EuiCode>legend</EuiCode>.
+  </p>
+</EuiText>
+
+# Checkable Radio
+
+```hbs template
+<EuiKeyPadMenu @checkable={{hash ariaLegend='Single select as radios'}}>
+
+  <EuiKeyPadMenuItem
+    @checkable='single'
+    @isSelected={{eq this.singleSelectedID this.keypadRadioId__1}}
+    @id={{this.keypadRadioId__1}}
+    @name={{this.radioGroupName}}
+    @label='Radio one'
+    @onChange={{this.setSingleSelectedID}}
+  >
+    <EuiIcon @type='faceHappy' @size='l' />
+  </EuiKeyPadMenuItem>
+  <EuiKeyPadMenuItem
+    @checkable='single'
+    @isSelected={{eq this.singleSelectedID this.keypadRadioId__2}}
+    @id={{this.keypadRadioId__2}}
+    @name={{this.radioGroupName}}
+    @label='Radio two'
+    @onChange={{this.setSingleSelectedID}}
+  >
+    <EuiIcon @type='faceNeutral' @size='l' />
+  </EuiKeyPadMenuItem>
+  <EuiKeyPadMenuItem
+    @checkable='single'
+    @id={{this.keypadRadioId__3}}
+    @name={{this.radioGroupName}}
+    @label='Disabled'
+    @isDisabled={{true}}
+    @onChange={{this.setSingleSelectedID}}
+  >
+    <EuiIcon @type='faceSad' @size='l' />
+  </EuiKeyPadMenuItem>
+</EuiKeyPadMenu>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoSideNavComponent extends Component {
+  @tracked singleSelectedID = false;
+
+  radioGroupName = 'radioGroupDemo5';
+  keypadRadioId__1 = 'keypaddemo51';
+  keypadRadioId__2 = 'keypaddemo52';
+  keypadRadioId__3 = 'keypaddemo53';
+
+  setSingleSelectedID = (id) => {
+    this.singleSelectedID = id;
+  };
+}
+```

package/docs/navigation/key-pad-menu.md

@@ -0,0 +1,9 @@
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Key pad menu
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/navigation/link-demo/demo1.md

@@ -0,0 +1,44 @@
+---
+order: 1
+---
+
+# Basic
+
+<EuiText>
+	<p>
+		<strong>EuiLink</strong> is any anchor or button element that is designed to display nicely within a block of text. It also provides more anchor-specific styling onto links and makes sure they are accessible.
+  </p>
+
+</EuiText>
+
+```hbs template
+<EuiText>
+  <p>
+    A simple
+    <EuiLink @href='#'>EuiLink</EuiLink>
+    used within a paragraph of text.
+  </p>
+  <p>
+    This is actually a
+    <EuiLink @onClick={{(noop)}}>button</EuiLink>
+    with an onClick handler.
+  </p>
+  <p>
+    Here is an example of a
+    <EuiLink @href='https://google.com' @onClick={{(noop)}}>
+      link
+    </EuiLink>
+    with both an
+    <EuiCode>href</EuiCode>
+    and an
+    <EuiCode>onClick</EuiCode>
+    handler.
+  </p>
+</EuiText>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoSideNavComponent extends Component {}
+```

package/docs/navigation/link-demo/demo2.md

@@ -0,0 +1,41 @@
+---
+order: 1
+---
+
+# External links
+
+<EuiText>
+	<p>
+		Setting <EuiCode>target="_blank"</EuiCode> defaults to <EuiCode>external={true}</EuiCode>. This adds an icon indicator instructing users that a new window will open. You can also manually apply this icon in case you handle the target behavior by other means.
+  </p>
+
+</EuiText>
+
+
+
+```hbs template
+<EuiText>
+  <p>
+    Open the
+    <EuiLink @href='http://www.elastic.co' @target='_blank'>
+      Elastic website
+    </EuiLink>
+    in a new tab.
+  </p>
+  <p>
+    This
+    <EuiLink @href='#/navigation/link' @external={{true}}>
+      link
+    </EuiLink>
+    has the
+    <EuiCode>external</EuiCode>
+    prop set to true.
+  </p>
+</EuiText>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoSideNavComponent extends Component {}
+```

package/docs/navigation/link-demo/demo3.md

@@ -0,0 +1,45 @@
+---
+order: 1
+---
+
+# Coloring links
+
+<EuiText>
+	<p>
+		Like any other <EuiLink @href="/docs/core/docs/navigation/button">button component</EuiLink>, links can be passed a <EuiCode>color</EuiCode>. Note that the <EuiCode>ghost</EuiCode> type should only be used on dark backgrounds (regardless of theming) as it will always create a white link.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiText>
+  <ul>
+    {{#each this.links as |value|}}
+      <li>
+        <EuiLink @color={{if (not-eq value 'disabled') value}} @href='#'>
+          {{value}}
+        </EuiLink>
+      </li>
+
+    {{/each}}
+    <li style="background-color: black">
+      <EuiLink @color='ghost'>Ghost</EuiLink>
+    </li>
+  </ul>
+</EuiText>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoSideNavComponent extends Component {
+  links = [
+    'primary',
+    'subdued',
+    'success',
+    'accent',
+    'warning',
+    'danger',
+    'text'
+  ];
+}
+```

package/docs/navigation/link-demo/demo4.md

@@ -0,0 +1,61 @@
+---
+order: 4
+---
+
+# Disabled links
+
+<EuiText>
+	<p>
+		When an <strong>EuiLink</strong> is passed an <EuiCode>onClick</EuiCode> method, and is not passed an <EuiCode>href</EuiCode>, it can optionally be set to <EuiCode>disabled</EuiCode> which disables the click behavior, and removes the link styling.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiText>
+  <EuiSwitch
+    @compressed={{true}}
+    @label='Disable links'
+    @checked={{this.disableLink}}
+    @onChange={{set this 'disableLink' (not this.disableLink)}}
+  />
+  <EuiHorizontalRule margin='m' />
+  <p>
+    This
+    <EuiLink @color='accent' @disabled={{this.disableLink}} @onClick={{(noop)}}>
+      paragraph
+    </EuiLink>
+    has two
+    {{if this.disableLink ' disabled ' ' enabled '}}
+    <EuiLink
+      @color='warning'
+      @disabled={{this.disableLink}}
+      @onClick={{(noop)}}
+    >
+      links
+    </EuiLink>
+    in it.
+  </p>
+  <p>
+    <EuiTextColor @color='accent'>
+      When links are disabled, they inherit the
+      <EuiLink
+        @color='success'
+        @disabled={{this.disableLink}}
+        @onClick={{(noop)}}
+      >
+        color
+      </EuiLink>
+      of surrounding text.
+    </EuiTextColor>
+  </p>
+</EuiText>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoSideNavComponent extends Component {
+  @tracked disableLink = false;
+}
+```