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

package/addon/components/eui-accordion/index.hbs

@@ -40,12 +40,12 @@
         {{on "click" this.onToggle}}
       >
         <span class={{this.buttonContentClasses}}>
-          {{yield to="buttonContent"}}
+          {{yield this.isOpen to="buttonContent"}}
         </span>
       </ButtonElement>
       {{#if (and @extraAction (not this.isLoading))}}
         <div class="euiAccordion__optionalAction">
-          {{yield to="extraAction"}}
+          {{yield this.isOpen to="extraAction"}}
         </div>
       {{else if this.isLoading}}
         <div class="euiAccordion__optionalAction">

package/addon/components/eui-code-block/controls/index.hbs

@@ -11,7 +11,7 @@
     {{/if}}
 
     {{#if @showCopyButton}}
-      <div className="euiCodeBlock__copyButton">
+      <div class="euiCodeBlock__copyButton">
         <EuiCopy @textToCopy={{@textToCopy}} @afterMessage="Copied" as |copy|>
           <EuiButtonIcon
             {{on "click" copy}}

package/addon/components/eui-loading-logo/index.hbs

@@ -8,7 +8,7 @@
     )
   }}
 >
-  <span className="euiLoadingLogo__icon">
+  <span class="euiLoadingLogo__icon">
     <EuiIcon @type={{arg-or-default @logo "logoKibana"}} @size={{arg-or-default @size "m"}} />
   </span>
 </span>

package/addon/components/eui-notification-event/index.hbs

@@ -0,0 +1,89 @@
+{{#let (unique-id) as |id|}}
+  <article
+    aria-labelledby={{id}}
+    key={{@id}}
+    class={{class-names
+      'euiNotificationEvent'
+      (if (eq (type-of @isRead) "boolean") 'euiNotificationEvent--withReadState')
+    }}
+    ...attributes
+  >
+
+    {{#if (eq (type-of @isRead) "boolean")}}
+      <div class="euiNotificationEvent__readButton">
+        {{#if @onRead}}
+          <EuiNotificationEventReadButton
+            @id={{@id}}
+            @isRead={{@isRead}}
+            @eventName={{@title}}
+            {{on "click" @onRead}}
+          />
+        {{else}}
+          <EuiNotificationEventReadIcon
+            @id={{@id}}
+            @isRead={{@isRead}}
+            @eventName={{@title}}
+          />
+        {{/if}}
+      </div>
+    {{/if}}
+
+    <div class="euiNotificationEvent__content">
+      <EuiNotificationEventMeta
+        @id={{@id}}
+        @type={{@type}}
+        @event={{@title}}
+        @severity={{@severity}}
+        @badgeColor={{@badgeColor}}
+        @iconType={{@iconType}}
+        @iconAriaLabel={{@iconAriaLabel}}
+        @time={{@time}}
+        @onOpenContextMenu={{@onOpenContextMenu}}
+        @eventName={{@title}}
+        @hasContextMenu={{has-block 'contextMenu'}}
+      >
+        {{yield to='contextMenu'}}
+      </EuiNotificationEventMeta>
+
+      {{#let
+        (class-names
+          'euiNotificationEvent__title'
+          (if @isRead 'euiNotificationEvent__title--isRead')
+        )
+        (arg-or-default
+          @headingLevel
+          'h2'
+        )
+      as |classNames headingLevel|}}
+        {{#if @onClickTitle}}
+          <EuiLink
+            @onClick={{@onClickTitle}}
+          >
+            <TextBlock @tagName={{headingLevel}} id={{id}} class={{classNames}}>
+              {{@title}}
+            </TextBlock>
+          </EuiLink>
+        {{else if @title}}
+          <TextBlock @tagName={{headingLevel}} id={{id}} class={{classNames}}>
+            {{@title}}
+          </TextBlock>
+        {{/if}}
+      {{/let}}
+
+      <EuiNotificationEventMessages
+        @messages={{@messages}}
+        @eventName={{@title}}
+        @accordionButtonText={{@accordionButtonText}}
+        @accordionHideText={{@accordionHideText}}
+      />
+
+      {{#if (has-block 'primaryAction')}}
+        <div class="euiNotificationEvent__primaryAction">
+          {{yield to='primaryAction'}}
+        </div>
+      {{/if}}
+
+    </div>
+
+  </article>
+{{/let}}

package/addon/components/eui-notification-event-messages/index.hbs

@@ -0,0 +1,49 @@
+<div
+  class="euiNotificationEventMessages"
+  ...attributes
+>
+  {{#let
+    (object-at 0 @messages)
+    (without (object-at 0 @messages) @messages)
+  as |first rest|}}
+    
+    {{#if first}}
+      <EuiText @size="s" @color="subdued">
+        <p>{{first}}</p>
+      </EuiText>
+    {{/if}}
+
+    {{#if rest}}
+
+      <EuiAccordion
+        {{!-- onToggle={{@onToggle}} --}}
+        {{!-- @buttonProps={{hash
+          aria-label = accordionAriaLabelButtonText
+        }} --}}
+        id={{concat 'euiNotificationEventMessagesAccordion' (unique-id)}}
+        class="euiNotificationEventMessages__accordion"
+        @buttonClassName="euiNotificationEventMessages__accordionButton"
+        @arrowDisplay="none"
+      >
+        <:buttonContent as |isOpen|>
+          {{@accordionButtonText}}
+          {{#unless isOpen}}
+            ({{@accordionHideText}})
+          {{/unless}}
+        </:buttonContent>
+
+        <:content>
+          <div class="euiNotificationEventMessages__accordionContent">
+            {{#each rest as |msg|}}
+              <EuiText @size="s" @color="subdued">
+                <p>{{msg}}</p>
+              </EuiText>
+            {{/each}}
+          </div>
+        </:content>
+
+      </EuiAccordion>
+    {{/if}}
+
+  {{/let}}
+</div>

package/addon/components/eui-notification-event-meta/index.hbs

@@ -0,0 +1,83 @@
+<div
+  class={{class-names
+    'euiNotificationEventMeta'
+    (if @hasContextMenu 'euiNotificationEventMeta--hasContextMenu')
+  }}
+  ...attributes
+>
+  <div class="euiNotificationEventMeta__section">
+
+    {{#if @iconType}}
+      <EuiIcon
+        @iconClasses="euiNotificationEventMeta__icon"
+        @type={{@iconType}}
+        {{!-- TODO only add one of the following html attributes --}}
+        aria-label={{@iconAriaLabel}}
+        aria-hidden={{if @iconAriaLabel false true}}
+      />
+    {{/if}}
+
+    {{#if @type}}
+        <EuiBadge
+          class="euiNotificationEventMeta__badge"
+          @color={{@badgeColor}}
+        >
+          {{#if @severity}}
+            {{@type}}: {{@severity}}
+          {{else}}
+            {{@type}}
+          {{/if}}
+        </EuiBadge>
+    {{/if}}
+
+  </div>
+
+  <div class="euiNotificationEventMeta__section">
+    <span class="euiNotificationEventMeta__time">{{@time}}</span>
+  </div>
+
+  {{#if @hasContextMenu}}
+    {{#let (unique-id) (use-state false) as |randomPopoverId isPopoverOpen|}}
+      <div class="euiNotificationEventMeta__contextMenuWrapper">
+        <EuiPopover
+          id={{randomPopoverId}}
+          @ownFocus={{true}}
+          @repositionOnScroll={{true}}
+          @isOpen={{isPopoverOpen.value}}
+          @panelPaddingSize="none"
+          @anchorPosition="leftUp"
+          @closePopover={{fn isPopoverOpen.setState false}}
+        >
+
+          <:button>
+            <EuiButtonIcon
+              {{!-- aria-label={contextMenuButton} --}}
+              aria-controls={{randomPopoverId}}
+              aria-expanded={{this.isPopoverOpen}}
+              aria-haspopup="true"
+              @iconType="boxesVertical"
+              @color="text"
+              data-test-subj={{concat @id '-notificationEventMetaButton'}}
+              {{on 'click' (fn isPopoverOpen.setState true)}}
+            />
+          </:button>
+
+          {{!-- The EuiContextMenu is wrapped with a div so it closes after an item is clicked --}}
+          <:content>
+            <div
+              {{on 'click' (queue
+                (optional @onOpenContextMenu)
+                (fn isPopoverOpen.setState false)
+              )}}
+              role="button"
+            >
+              {{yield}}
+            </div>
+          </:content>
+
+        </EuiPopover>
+      </div>
+    {{/let}}
+  {{/if}}
+
+</div>

package/addon/components/eui-notification-event-read-button/index.hbs

@@ -0,0 +1,13 @@
+{{!-- ToDo: title and aria-label translations --}}
+<EuiButtonIcon
+  @iconType="dot"
+  aria-label={{if @isRead (concat 'Mark ' @eventName ' as unread') (concat 'Mark ' @eventName ' as read')}}
+  title={{if @isRead 'Read' 'Unread'}}
+  class={{class-names
+    'euiNotificationEventReadButton'
+    (if @isRead 'euiNotificationEventReadButton--isRead')
+  }}
+  data-test-subj={{concat @id '-notificationEventReadButton'}}
+  id={{@id}}
+  ...attributes
+/>

package/addon/components/eui-notification-event-read-icon/index.hbs

@@ -0,0 +1,21 @@
+{{!-- ToDo: title and aria-label translations --}}
+<div
+  class={{class-names
+    'euiNotificationEventReadIcon'
+    (if @isRead 'euiNotificationEventReadIcon--isRead')
+  }}
+   ...attributes
+  >
+  <EuiIcon
+    @type="dot"
+    aria-label={{if
+      @isRead
+      (concat @eventName ' is read')
+      (concat @eventName ' is unread')
+    }}
+    title={{if @isRead 'Read' 'Unread'}}
+    @color="primary"
+    data-test-subj={{concat @id '-notificationEventReadIcon'}}
+    id={{@id}}
+  />
+</div>

package/addon/components/eui-tab/index.hbs

@@ -14,7 +14,7 @@
       ...attributes
     >
       {{#if (has-block "prepend")}}
-        <span className="euiTab__prepend">
+        <span class="euiTab__prepend">
           {{yield to="prepend"}}
         </span>
       {{/if}}
@@ -24,7 +24,7 @@
       </span>
 
       {{#if (has-block "append")}}
-        <span className="euiTab__append">
+        <span class="euiTab__append">
           {{yield to="append"}}
         </span>
       {{/if}}
@@ -44,7 +44,7 @@
       ...attributes
     >
       {{#if (has-block "prepend")}}
-        <span className="euiTab__prepend">
+        <span class="euiTab__prepend">
           {{yield to="prepend"}}
         </span>
       {{/if}}
@@ -54,7 +54,7 @@
       </span>
 
       {{#if (has-block "append")}}
-        <span className="euiTab__append">
+        <span class="euiTab__append">
           {{yield to="append"}}
         </span>
       {{/if}}

package/addon/utils/css-mappings/eui-image.ts

@@ -6,7 +6,7 @@ export const sizeMapping = {
   l: `${baseClass}--large`,
   xl: `${baseClass}--xlarge`,
   fullWidth: `${baseClass}--fullWidth`,
-  original: `${baseClass}----original`
+  original: `${baseClass}--original`
 };
 
 export const marginMapping = {

package/app/components/eui-notification-event/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-notification-event';

package/app/components/eui-notification-event-messages/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-notification-event-messages';

package/app/components/eui-notification-event-meta/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-notification-event-meta';

package/app/components/eui-notification-event-read-button/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-notification-event-read-button';

package/app/components/eui-notification-event-read-icon/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-notification-event-read-icon';

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

@@ -4,14 +4,6 @@ order: 1
 
 # Basic
 
-<EuiText>
-  <p>
-
-The <strong>EuiAvatar</strong> component typically creates a user icon. It will accept <EuiCode>name</EuiCode> (required) and <EuiCode>image</EuiCode> props and will configure the display and accessibility as needed. By default, the background colors come from the set of colors used for visualizations. Otherwise you can pass a hex value to the <EuiCode>color</EuiCode> prop.
-
-  </p>
-</EuiText>
-
 ```hbs template
 <div>
   <EuiAvatar @size='s' @name='Raphael' />

package/docs/display/avatar.md

@@ -1 +1,10 @@
 <EuiPageHeader @pageTitle="Avatar"/>
+<EuiHorizontalRule />
+<EuiText>
+
+  <p>
+
+The <strong>EuiAvatar</strong> component typically creates a user icon. It will accept <EuiCode>name</EuiCode> (required) and <EuiCode>image</EuiCode> props and will configure the display and accessibility as needed. By default, the background colors come from the set of colors used for visualizations. Otherwise you can pass a hex value to the <EuiCode>color</EuiCode> prop.
+
+  </p>
+</EuiText>

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

@@ -2,14 +2,6 @@
 order: 1
 ---
 
-<EuiText>
-  <p>
-
-<strong>EuiBadges</strong> are used to focus on important bits of information. Although they will automatically space themselves if you use them in a repetitive fashion it is good form to wrap them using a <strong>EuiBadgeGroup</strong> so that they will wrap when width is constrained (as seen below).
-
-  </p>
-</EuiText>
-
 ```hbs template
 <EuiTitle @size='xs'>
   Accepted color names

package/docs/display/badge.md

@@ -1 +1,8 @@
 <EuiPageHeader @pageTitle="Badge"/>
+<EuiHorizontalRule />
+<EuiText>
+
+  <p>
+<strong>EuiBadges</strong> are used to focus on important bits of information. Although they will automatically space themselves if you use them in a repetitive fashion it is good form to wrap them using a <strong>EuiBadgeGroup</strong> so that they will wrap when width is constrained (as seen below).
+  </p>
+</EuiText>

package/docs/display/comment-list.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Comment List"/>
+<EuiPageHeader @pageTitle="Comment List"/>
+<EuiHorizontalRule />

package/docs/display/description-list.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Description list"/>
+<EuiPageHeader @pageTitle="Description list"/>
+<EuiHorizontalRule />

package/docs/display/empty-prompt.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Empty Prompt"/>
+<EuiPageHeader @pageTitle="Empty Prompt"/>
+<EuiHorizontalRule />

package/docs/display/icons.md

@@ -1 +1,2 @@
 <EuiPageHeader @pageTitle="Icons"/>
+<EuiHorizontalRule />

package/docs/display/notification-event/demo/demo1.md

@@ -0,0 +1,83 @@
+---
+order: 1
+---
+
+# Basic
+
+```hbs template
+{{#let (slice
+  0 this.messagesCount this.messages
+) as |msgs|}}
+  <EuiPanel @paddingSize='xs'>
+    <EuiNotificationEvent
+      @type='Hey!'
+      @badgeColor='primary'
+      @time='1 min'
+      @title='Some nice title'
+      @messages={{msgs}}
+      @iconType='email'
+      @accordionButtonText={{concat '+ ' (sub msgs.length 1) ' more'}}
+      @accordionHideText='hide'
+    >
+
+    <:primaryAction>
+      <EuiButtonEmpty
+        style="display: {{if this.showPrimaryAction '' 'none'}};"
+        @flush="left"
+        @size="s"
+      >
+        Do something!
+      </EuiButtonEmpty>
+    </:primaryAction>
+
+    </EuiNotificationEvent>
+  </EuiPanel>
+{{/let}}
+
+<EuiSpacer/>
+
+Messages count:
+<EuiRange
+  @min={{1}}
+  @max={{3}}
+  @step={{1}}
+  @value={{this.messagesCount}}
+  @onChange={{this.setMessagesCount}}
+  @showLabels={{true}}
+/>
+
+<EuiSwitch
+  @label='Show primary action'
+  @checked={{this.showPrimaryAction}}
+  @onChange={{pick 'target.checked' (set this 'showPrimaryAction')}}
+/>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+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...'
+  ]
+
+  constructor() {
+    super(...arguments);
+    this.messagesCount = 1;
+    this.showPrimaryAction = false;
+  }
+
+  @action
+  setMessagesCount(e){
+    this.messagesCount = e.target.value;
+  }
+
+}
+```

package/docs/display/notification-event/demo/demo2.md

@@ -0,0 +1,141 @@
+---
+order: 2
+---
+
+# Read state
+
+```hbs template
+<EuiTabs>
+  {{#each this.tabs as |tab|}}
+    <EuiTab
+      @isSelected={{eq tab.id this.selectedTab.id}}
+      {{on 'click' (fn this.onTabSelection tab)}}
+    >
+      {{tab.name}}
+    </EuiTab>
+  {{/each}}
+</EuiTabs>
+
+<EuiSpacer/>
+
+{{#let (slice
+  0 this.messagesCount this.messages
+) as |msgs|}}
+  <EuiPanel @paddingSize='xs'>
+    <EuiNotificationEvent
+      @isRead={{this.isRead}}
+      @onRead={{this.selectedTab.onRead}}
+      @type='Hey!'
+      @badgeColor='primary'
+      @time='1 min'
+      @title='Some nice title'
+      @messages={{msgs}}
+      @iconType='email'
+      @accordionButtonText={{concat '+ ' (sub msgs.length 1) ' more'}}
+      @accordionHideText='hide'
+    >
+      <:contextMenu>
+        <!-- ToDo Missing EuiContextMenu component -->
+        <button
+          class="euiContextMenuItem"
+          type="button"
+          {{on 'click' this.onRead}}
+        >
+          <span class="euiContextMenu__itemLayout">
+            <span class="euiContextMenuItem__text">
+              Mark as {{if this.isRead 'unread' 'read'}}
+            </span>
+          </span>
+        </button>
+      </:contextMenu>
+
+      <:primaryAction>
+        <EuiButtonEmpty
+          style="display: {{if this.showPrimaryAction '' 'none'}};"
+          @flush="left"
+          @size="s"
+        >
+          Do something!
+        </EuiButtonEmpty>
+      </:primaryAction>
+
+    </EuiNotificationEvent>
+  </EuiPanel>
+{{/let}}
+
+<EuiSpacer/>
+
+Messages count:
+<EuiRange
+  @min={{1}}
+  @max={{3}}
+  @step={{1}}
+  @value={{this.messagesCount}}
+  @onChange={{this.setMessagesCount}}
+  @showLabels={{true}}
+/>
+
+<EuiSwitch
+  @label='Show primary action'
+  @checked={{this.showPrimaryAction}}
+  @onChange={{pick 'target.checked' (set this 'showPrimaryAction')}}
+/>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class NotificationEvent2Component extends Component {
+  @tracked selectedTab;
+  @tracked isRead;
+  @tracked messagesCount;
+  @tracked showPrimaryAction;
+  
+  messages = [
+    'This is a message',
+    "Wait, there's more",
+    'hmmm...'
+  ]
+
+  tabs = [
+    {
+      id: 'icon',
+      name: 'Icon',
+      isRead: false
+    },
+    {
+      id: 'button',
+      name: 'Button',
+      isRead: false,
+      onRead: this.onRead
+    }
+  ];
+
+  constructor() {
+    super(...arguments);
+    this.messagesCount = 1;
+    this.selectedTab = this.tabs[0];
+    this.isRead = this.selectedTab.isRead;
+    this.showPrimaryAction = false;
+  }
+
+  @action
+  onRead() {
+    this.isRead = !this.isRead
+  }
+
+  @action
+  onTabSelection(obj) {
+    this.isRead = obj.isRead;
+    this.selectedTab = obj
+  }
+
+  @action
+  setMessagesCount(e){
+    this.messagesCount = e.target.value;
+  }
+
+}
+```

package/docs/display/notification-event/demo/demo3.md

@@ -0,0 +1,112 @@
+---
+order: 3
+---
+
+# Feed
+
+```hbs template
+<div>
+  {{#each this.items as |item|}}
+    {{#let (slice
+      0 this.messagesCount (shuffle item.messages)
+    ) as |msgs|}}
+      <EuiNotificationEvent
+        @type={{item.type}}
+        @badgeColor={{item.badgeColor}}
+        @time={{item.time}}
+        @title={{item.title}}
+        @messages={{msgs}}
+        @iconType={{item.iconType}}
+        @accordionButtonText={{concat '+ ' (sub msgs.length 1) ' more'}}
+        @accordionHideText='hide'
+      >
+
+        <:primaryAction>
+          <EuiButtonEmpty
+            style="display: {{if this.showPrimaryAction '' 'none'}};"
+            @flush="left"
+            @size="s"
+          >
+            Do something!
+          </EuiButtonEmpty>
+        </:primaryAction>
+
+      </EuiNotificationEvent>
+    {{/let}}
+  {{/each}}
+</div>
+
+<EuiSpacer/>
+
+Messages count:
+<EuiRange
+  @min={{1}}
+  @max={{3}}
+  @step={{1}}
+  @value={{this.messagesCount}}
+  @onChange={{this.setMessagesCount}}
+  @showLabels={{true}}
+/>
+
+<EuiSwitch
+  @label='Show primary action'
+  @checked={{this.showPrimaryAction}}
+  @onChange={{pick 'target.checked' (set this 'showPrimaryAction')}}
+/>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class NotificationEvent3Component extends Component {
+  @tracked messagesCount;
+  @tracked showPrimaryAction;
+  
+  messages = [
+    'This is a message',
+    "Wait, there's more",
+    'hmmm...'
+  ]
+
+  items = [
+    {
+      messages: this.messages,
+      iconType: 'email',
+      badgeColor: 'primary',
+      type: 'Hey',
+      time: '1 min',
+      title: 'Welcome'
+    },
+    {
+      messages: this.messages,
+      iconType: 'tag',
+      badgeColor: 'accent',
+      type: 'News',
+      time: '3 min',
+      title: 'Someone tagged you'
+    },
+    {
+      messages: this.messages,
+      iconType: 'bug',
+      badgeColor: 'warning',
+      type: 'Alert',
+      time: '10 min',
+      title: 'Found a bug'
+    }
+  ]
+
+  constructor() {
+    super(...arguments);
+    this.messagesCount = 1;
+    this.showPrimaryAction = false;
+  }
+
+  @action
+  setMessagesCount(e){
+    this.messagesCount = e.target.value;
+  }
+
+}
+```

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

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

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

@@ -11,7 +11,7 @@ order: 4
 ```hbs template
 <EuiTabbedContent
   @tabs={{this.tabs}}
-  @initialSelectedTab={{object-at this.tabs 1}}
+  @initialSelectedTab={{object-at 1 this.tabs}}
   @autoFocus='selected'
   @onTabClick={{fn this.sayMyName}}
 >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.5",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -182,5 +182,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "1b88258ed3a11388d0e4f8557f5744b91ede144e"
+  "gitHead": "f51e8c4b246911462dae9af5445e6968516e2ce2"
 }