Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add notification event component #140

Merged
merged 4 commits into from
Apr 26, 2022
Merged

add notification event component #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
94773e1
add notification event component
patodevilla Apr 26, 2022
f9b6eee
fix className in multiple components
patodevilla Apr 26, 2022
2f00346
fix tabs-demo/demo4 improve notification-event compatibility
patodevilla Apr 26, 2022
4aa8da9
better notification event demos
patodevilla Apr 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/core/addon/components/eui-accordion/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion packages/core/addon/components/eui-code-block/controls/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
2 changes: 1 addition & 1 deletion packages/core/addon/components/eui-loading-logo/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
49 changes: 49 additions & 0 deletions packages/core/addon/components/eui-notification-event-messages/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
83 changes: 83 additions & 0 deletions packages/core/addon/components/eui-notification-event-meta/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 13 additions & 0 deletions packages/core/addon/components/eui-notification-event-read-button/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
/>
21 changes: 21 additions & 0 deletions packages/core/addon/components/eui-notification-event-read-icon/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
89 changes: 89 additions & 0 deletions packages/core/addon/components/eui-notification-event/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}}
8 changes: 4 additions & 4 deletions packages/core/addon/components/eui-tab/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
...attributes
>
{{#if (has-block "prepend")}}
<span className="euiTab__prepend">
<span class="euiTab__prepend">
{{yield to="prepend"}}
</span>
{{/if}}
Expand All @@ -24,7 +24,7 @@
</span>

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

{{#if (has-block "append")}}
<span className="euiTab__append">
<span class="euiTab__append">
{{yield to="append"}}
</span>
{{/if}}
Expand Down
1 change: 1 addition & 0 deletions packages/core/app/components/eui-notification-event-messages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from '@ember-eui/core/components/eui-notification-event-messages';
1 change: 1 addition & 0 deletions packages/core/app/components/eui-notification-event-meta/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from '@ember-eui/core/components/eui-notification-event-meta';
1 change: 1 addition & 0 deletions packages/core/app/components/eui-notification-event-read-button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from '@ember-eui/core/components/eui-notification-event-read-button';
1 change: 1 addition & 0 deletions packages/core/app/components/eui-notification-event-read-icon/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from '@ember-eui/core/components/eui-notification-event-read-icon';
1 change: 1 addition & 0 deletions packages/core/app/components/eui-notification-event/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from '@ember-eui/core/components/eui-notification-event';
Loading