@ember-eui/core 5.6.0 → 5.7.0

package/docs/display/list-group/demo/d01-list-group.md

@@ -0,0 +1,236 @@
+```hbs template
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiListGroup
+      @bordered={{this.bordered}}
+      @flush={{this.flush}}
+      @maxWidth={{this.maxWidth}}
+      @gutterSize={{this.gutterSize}}
+    >
+      <EuiListGroupItem
+        @href={{if this.useHref '/'}}
+        @onClick={{if this.useOnClick this.onClick}}
+        @isActive={{this.isActive}}
+        @isDisabled={{this.isDisabled}}
+        @wrapText={{this.wrapText}}
+        @size={{this.size}}
+        @color={{this.color}}
+        @iconType={{if this.useIconType 'bell'}}
+      >
+        {{#if this.wrapText}}
+          First item with very long text with Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit
+        {{else}}
+          First item
+        {{/if}}
+      </EuiListGroupItem>
+      <EuiListGroupItem>
+        Second item
+      </EuiListGroupItem>
+      <EuiListGroupItem>
+        Third item
+      </EuiListGroupItem>
+      <EuiListGroupItem>
+        Fourth item
+      </EuiListGroupItem>
+    </EuiListGroup>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiTitle @size='xs'>Group</EuiTitle>
+        <div>
+          <Input @type='checkbox' @checked={{this.bordered}} name='bordered' />
+          <label for='bordered'>Bordered</label>
+        </div>
+        <div>
+          <Input @type='checkbox' @checked={{this.flush}} name='flushed' />
+          <label for='flushed'>Flush</label>
+        </div>
+        <div>
+          <EuiText>Gutter size</EuiText>
+          <EuiBadge
+            @color={{if (eq this.gutterSize 'none') 'primary'}}
+            @onClick={{set this 'gutterSize' 'none'}}
+          >none</EuiBadge>
+          <EuiBadge
+            @color={{if (eq this.gutterSize 's') 'primary'}}
+            @onClick={{set this 'gutterSize' 's'}}
+          >small</EuiBadge>
+          <EuiBadge
+            @color={{if (eq this.gutterSize 'm') 'primary'}}
+            @onClick={{set this 'gutterSize' 'm'}}
+          >medium</EuiBadge>
+        </div>
+        <div>
+          <EuiText>Max width</EuiText>
+          <EuiBadge
+            @color={{if (eq this.maxWidthType 'bool') 'primary'}}
+            @onClick={{pipe
+              (set this 'maxWidthType' 'bool')
+              (set this 'maxWidth' false)
+            }}
+          >
+            boolean
+          </EuiBadge>
+          <EuiBadge
+            @color={{if (eq this.maxWidthType 'num') 'primary'}}
+            @onClick={{pipe
+              (set this 'maxWidthType' 'num')
+              (set this 'maxWidth' 400)
+            }}
+          >
+            number
+          </EuiBadge>
+          <EuiBadge
+            @color={{if (eq this.maxWidthType 'string') 'primary'}}
+            @onClick={{pipe
+              (set this 'maxWidthType' 'string')
+              (set this 'maxWidth' '')
+            }}
+          >
+            string
+          </EuiBadge>
+        </div>
+        <div>
+          {{#if (eq this.maxWidthType 'bool')}}
+            <Input
+              @type='checkbox'
+              @checked={{this.maxWidth}}
+              name='maxwidth'
+            />
+            <label for='maxwidth'>{{this.maxWidth}}</label>
+          {{else if (eq this.maxWidthType 'num')}}
+            <label for='maxwidth'>Enter value</label>
+            <input
+              type='number'
+              value={{this.maxWidth}}
+              {{on 'input' this.parseToNum}}
+              name='maxwidth'
+            />
+          {{else}}
+            <label for='maxwidth'>Enter value</label>
+            <Input @value={{this.maxWidth}} name='maxwidth' />
+          {{/if}}
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiTitle @size='xs'>First Item</EuiTitle>
+        <div>
+          <Input @type='checkbox' @checked={{this.useHref}} name='useHref' />
+          <label for='useHref'>use Href</label>
+        </div>
+        <div>
+          <Input
+            @type='checkbox'
+            @checked={{this.useOnClick}}
+            name='useOnClick'
+          />
+          <label for='useOnClick'>use onClick</label>
+        </div>
+        <div>
+          <Input @type='checkbox' @checked={{this.isActive}} name='isActive' />
+          <label for='isActive'>isActive</label>
+        </div>
+        <div>
+          <Input
+            @type='checkbox'
+            @checked={{this.isDisabled}}
+            name='isDisabled'
+          />
+          <label for='isDisabled'>isDisabled</label>
+        </div>
+        <div>
+          <Input @type='checkbox' @checked={{this.wrapText}} name='wrapText' />
+          <label for='wrapText'>wrapText</label>
+        </div>
+        <div>
+          <EuiText>Size</EuiText>
+          <EuiBadge
+            @color={{if (eq this.size 'xs') 'primary'}}
+            @onClick={{set this 'size' 'xs'}}
+          >extra small</EuiBadge>
+          <EuiBadge
+            @color={{if (eq this.size 's') 'primary'}}
+            @onClick={{set this 'size' 's'}}
+          >small</EuiBadge>
+          <EuiBadge
+            @color={{if (eq this.size 'm') 'primary'}}
+            @onClick={{set this 'size' 'm'}}
+          >medium</EuiBadge>
+          <EuiBadge
+            @color={{if (eq this.size 'l') 'primary'}}
+            @onClick={{set this 'size' 'l'}}
+          >large</EuiBadge>
+        </div>
+        <div>
+          <EuiText>Color</EuiText>
+          <EuiBadge
+            @color={{if (eq this.color 'inherit') 'primary'}}
+            @onClick={{set this 'color' 'inherit'}}
+          >inherit</EuiBadge>
+          <EuiBadge
+            @color={{if (eq this.color 'text') 'primary'}}
+            @onClick={{set this 'color' 'text'}}
+          >text</EuiBadge>
+          <EuiBadge
+            @color={{if (eq this.color 'subdued') 'primary'}}
+            @onClick={{set this 'color' 'subdued'}}
+          >subdued</EuiBadge>
+          <EuiBadge
+            @color={{if (eq this.color 'ghost') 'primary'}}
+            @onClick={{set this 'color' 'ghost'}}
+          >ghost</EuiBadge>
+          <EuiBadge
+            @color={{if (eq this.color 'primary') 'primary'}}
+            @onClick={{set this 'color' 'primary'}}
+          >primary</EuiBadge>
+        </div>
+        <div>
+          <Input
+            @type='checkbox'
+            @checked={{this.useIconType}}
+            name='useIconType'
+          />
+          <label for='useIconType'>use iconType</label>
+        </div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiFlexItem>
+</EuiFlexGroup>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoListGroupComponent extends Component {
+  // Group config
+  @tracked bordered = false;
+  @tracked flush = false;
+  @tracked gutterSize = 's';
+  @tracked maxWidthType = 'bool';
+  @tracked maxWidth = false;
+
+  @action
+  parseToNum(event) {
+    this.maxWidth = Number(event.target.value);
+  }
+
+  @action
+  onClick(event) {
+    console.log('Item clicked');
+  }
+
+  //Item config
+  @tracked useHref = false;
+  @tracked useOnClick = false;
+  @tracked isActive = false;
+  @tracked isDisabled = false;
+  @tracked wrapText = false;
+  @tracked size = 'm';
+  @tracked color = 'inherit';
+  @tracked useIconType = false;
+}
+```

package/docs/display/list-group/index.md

@@ -0,0 +1,8 @@
+---
+title: List Group
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="List Group"/>
+
+  <EuiHorizontalRule />

package/docs/display/loading/spinner-demo/d02-spinner.md

@@ -0,0 +1,6 @@
+```hbs template
+<EuiLoadingSpinner @size='s' />
+<EuiLoadingSpinner @size='m' />
+<EuiLoadingSpinner @size='l' />
+<EuiLoadingSpinner @size='xl' />
+```

package/docs/display/loading/text-content-demo/{demo1.md → d3-text-content.md}

@@ -1,5 +1,3 @@
-# Demo
-
 Text Content Loading display will only render a maximum of 10 lines.
 <br>
 <br>

package/docs/display/notification-event/demo/{demo1.md → d01-notification-event.md}

@@ -2,12 +2,8 @@
 order: 1
 ---
 
-# Basic
-
 ```hbs template
-{{#let (slice
-  0 this.messagesCount this.messages
-) as |msgs|}}
+{{#let (slice 0 this.messagesCount this.messages) as |msgs|}}
   <EuiPanel @paddingSize='xs'>
     <EuiNotificationEvent
       @type='Hey!'
@@ -20,21 +16,21 @@ order: 1
       @accordionHideText='hide'
     >
 
-    <:primaryAction>
-      <EuiButtonEmpty
-        style="display: {{if this.showPrimaryAction '' 'none'}};"
-        @flush="left"
-        @size="s"
-      >
-        Do something!
-      </EuiButtonEmpty>
-    </:primaryAction>
+      <:primaryAction>
+        <EuiButtonEmpty
+          style='display: {{if this.showPrimaryAction "" "none"}};'
+          @flush='left'
+          @size='s'
+        >
+          Do something!
+        </EuiButtonEmpty>
+      </:primaryAction>
 
     </EuiNotificationEvent>
   </EuiPanel>
 {{/let}}
 
-<EuiSpacer/>
+<EuiSpacer />
 
 Messages count:
 <EuiRange
@@ -61,12 +57,8 @@ import { action } from '@ember/object';
 export default class NotificationEvent1Component extends Component {
   @tracked messagesCount;
   @tracked showPrimaryAction;
-  
-  messages = [
-    'This is a message',
-    "Wait, there's more",
-    'hmmm...'
-  ]
+
+  messages = ['This is a message', "Wait, there's more", 'hmmm...'];
 
   constructor() {
     super(...arguments);
@@ -75,9 +67,8 @@ export default class NotificationEvent1Component extends Component {
   }
 
   @action
-  setMessagesCount(e){
+  setMessagesCount(e) {
     this.messagesCount = e.target.value;
   }
-
 }
-```
+```

package/docs/display/notification-event/index.md

@@ -1,6 +1,6 @@
 ---
-order: 1
 title: Notification Event
 ---
 
-<EuiPageHeader @pageTitle="Notification Event"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Notification Event"/>

package/docs/display/progress/index.md

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

package/docs/display/{stat.md → stat-demo/index.md}

@@ -1,3 +1,8 @@
+---
+title: Stat
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Stat"/>
 
 <EuiText>

package/docs/display/{text.md → text/index.md}

@@ -1,3 +1,8 @@
+---
+title: Text
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Text"/>
 
 <EuiText>
@@ -9,4 +14,4 @@ EuiText can ensure proper line-length for readability by setting a <EuiCode>max-
   </p>
 </EuiText>
 
-<EuiHorizontalRule />
+<EuiHorizontalRule />

package/docs/display/title/index.md

@@ -0,0 +1,6 @@
+---
+title: Title
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Title"/>

package/docs/display/toast/{toast-list-demo/demo1.md → demo/d01-toast.md}

@@ -1,11 +1,9 @@
-# Demo
-
 ```hbs template
-<EuiButton @color="primary" {{on "click" this.showRandomToast}}>
+<EuiButton @color='primary' {{on 'click' this.showRandomToast}}>
   Add toast to global toast list
 </EuiButton>
 
-<EuiSpacer @size="l" />
+<EuiSpacer @size='l' />
 
 <EuiGlobalToastList @toastLifeTimeMs={{3000}} />
 ```
@@ -22,11 +20,11 @@ export default class DemoToastListComponent extends Component {
   @action
   showRandomToast() {
     this.euiToaster.show({
-      onClose: function() {
+      onClose: function () {
         console.log('A toast is being closed');
       },
       ...this.toasts[Math.floor(Math.random() * 4)]
-    })
+    });
   }
 
   toasts = [
@@ -35,25 +33,25 @@ export default class DemoToastListComponent extends Component {
       body: 'This toast overrides the default toastLifeTimeMs value and will be around for 15 seconds.',
       color: 'warning',
       iconType: 'clock',
-      toastLifeTimeMs: 15000,
+      toastLifeTimeMs: 15000
     },
     {
       title: `Download complete!`,
       body: 'Thanks for your patience!',
-      color: 'success',
+      color: 'success'
     },
     {
       title: `Logging you out soon, due to inactivity`,
       body: 'This is a security measure.',
       color: 'warning',
-      iconType: 'user',
+      iconType: 'user'
     },
-     {
+    {
       title: `Oops, there was an error`,
       body: 'Sorry. We’ll try not to let it happen it again.',
       color: 'danger',
-      iconType: 'help',
+      iconType: 'help'
     }
-  ]
+  ];
 }
-```
+```

package/docs/display/{tool-tip.md → toast/index.md}

@@ -1,4 +1,9 @@
-<EuiPageHeader @pageTitle="Tooltip"/>
+---
+title: Toast
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Toast"/>
 
 <EuiSpacer @size='l' />
 <EuiText>

package/docs/display/{tool-tip-demo/demo1.md → tool-tip/demo/d01-tool-tip.md}

@@ -2,9 +2,6 @@
 order: 1
 ---
 
-<EuiText>
-  Generally, tooltips should provide short, <strong>non-essential</strong>, contextual information, usually naming or describing with more detail. If you need interactive content or anything other than text, we recommend using <strong>EuiPopover</strong> instead.
-</EuiText>
 <EuiSpacer />
 <EuiCallOut @color="warning" @size="s" @iconType="accessibility" @title="Putting anything other than plain text in a tooltip is lost on screen readers." />
 <EuiSpacer />

package/docs/display/tool-tip/index.md

@@ -0,0 +1,10 @@
+---
+title: Tooltip
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Tooltip"/>
+
+<EuiSpacer @size='l' />
+
+<EuiHorizontalRule />

package/docs/editors/code/{inline-demo/demo1.md → demo/d01-inline.md}

@@ -2,7 +2,7 @@
 order: 1
 ---
 
-# Demo
+# Inline
 
 ```hbs template
 <EuiText>

package/docs/editors/code/{code-block-demo/demo1.md → demo/d02-code-block.md}

@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 2
 ---
 
 # Code block

package/docs/editors/code/{code-block-demo/demo5.md → demo/d03-line-numbers.md}

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 3
 ---
 
 # Line numbers

package/docs/editors/code/{code-block-demo/demo2.md → demo/d04-copy.md}

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 4
 ---
 
 # Copy

package/docs/editors/code/{code-block-demo/demo3.md → demo/d05-overflow-height.md}

@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 5
 ---
 
 # Overflow height

package/docs/editors/code/{code-block-demo/demo4.md → demo/d06-white-space.md}

@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 6
 ---
 
 # White space

package/docs/editors/code/{code-block-demo/demo6.md → demo/d07-line-numbers-highlighted.md}

@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 7
 ---
 
 # Line numbers highlighted

package/docs/editors/code/{code-block-demo/demo7.md → demo/d08-code-block-virtualization.md}

@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 8
 ---
 
 # Code block virtualization

package/docs/editors/code/{code-block-demo/demo8.md → demo/d09-flyout.md}

@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 9
 ---
 
 # Flyout

package/docs/editors/code/{code-block.md → index.md}

@@ -1,14 +1,18 @@
+---
+title: Code
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Code"/>
 
-<EuiSpacer />
+<EuiSpacer @size='l' />
+
 <EuiCallOut>
   <:body>
     <strong>EuiCode</strong> and <strong>EuiCodeBlock</strong> are intended to render static lines or blocks of code in <strong>read-only</strong> contexts. If you need capabilities to edit, or want to print long code (e.g., printing JSON from an API), we recommend installing a version of Monaco. If you are building within the Kibana platform, you can use their CodeEditor.
   </:body>
 </EuiCallOut>
 
-<EuiSpacer />
-
 <EuiText>
 <p>
   The <strong>EuiCode</strong> and <strong>EuiCodeBlock</strong> components support <a href="https://prismjs.com/#supported-languages" target="_blank">all language syntaxes</a> supported by the <EuiCode>prism</EuiCode> <a href="https://prismjs.com" target="_blank">library</a>. The language prop can also be omitted to simply render formatted but unhighlighted code.
@@ -19,3 +23,4 @@
 </EuiText>
 
 <EuiHorizontalRule />
+<EuiSpacer/>

package/docs/editors/markdown-editor/base-editor-demo/demo1.md

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Demo
-
 ```hbs template
 <EuiMarkdownEditor
   @value={{this.value}}
@@ -19,7 +17,6 @@ import { action } from '@ember/object';
 import { visit } from '@ember-eui/core/utils/markdown/plugins/markdown-add-components';
 import { defaultProcessingPlugins } from '@ember-eui/core/utils/markdown/plugins/markdown-default-plugins';
 
-
 /*
  Quick example how you can extend plugins, this plugin adds _blank to `a` elements
 */
@@ -27,7 +24,7 @@ function TargetBlankProcessingPlugin() {
   return (tree) => {
     visit(tree, (node) => {
       if (node.type === 'element' && node.tagName === 'a') {
-				node.properties.target = '_blank';
+        node.properties.target = '_blank';
       }
       return node;
     });

package/docs/editors/markdown-editor/base-editor.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Base editor"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Base editor"/>