@ember-eui/core 5.0.0-alpha.6 → 5.0.2

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

@@ -1,5 +1,16 @@
-{{#let (unique-id) as |id|}}
-  <article
+{{#let
+  (unique-id)
+  (element (arg-or-default @tagName 'article'))
+  (and
+    (arg-or-default @hasContextMenuBlock true)
+    (has-block 'contextMenu')
+  )
+  (and
+    (arg-or-default @hasPrimaryActionBlock true)
+    (has-block 'primaryAction')
+  )
+as |id Element hasContextMenuBlock hasPrimaryActionBlock|}}
+  <Element
     aria-labelledby={{id}}
     key={{@id}}
     class={{class-names
@@ -41,7 +52,7 @@
         @time={{@time}}
         @onOpenContextMenu={{@onOpenContextMenu}}
         @eventName={{@title}}
-        @hasContextMenu={{has-block 'contextMenu'}}
+        @hasDefaultBlock={{hasContextMenuBlock}}
         @iconColor={{@iconColor}}
       >
         {{yield to='contextMenu'}}
@@ -59,15 +70,17 @@
       as |classNames headingLevel|}}
         {{#if (or @href @onClickTitle)}}
           <EuiLink
-            @onClick={{@onClickTitle}}
+            class={{classNames}}
+            id={{id}}
             @href={{@href}}
+            {{on 'click' (optional @onClickTitle)}}
           >
-            <TextBlock @tagName={{headingLevel}} id={{id}} class={{classNames}}>
+            <TextBlock @tagName={{headingLevel}}>
               {{@title}}
             </TextBlock>
           </EuiLink>
         {{else if @title}}
-          <TextBlock @tagName={{headingLevel}} id={{id}} class={{classNames}}>
+          <TextBlock id={{id}} class={{classNames}} @tagName={{headingLevel}}>
             {{@title}}
           </TextBlock>
         {{/if}}
@@ -80,7 +93,7 @@
         @accordionHideText={{@accordionHideText}}
       />
 
-      {{#if (has-block 'primaryAction')}}
+      {{#if hasPrimaryActionBlock}}
         <div class="euiNotificationEvent__primaryAction">
           {{yield to='primaryAction'}}
         </div>
@@ -88,5 +101,5 @@
 
     </div>
 
-  </article>
+  </Element>
 {{/let}}

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

@@ -1,84 +1,91 @@
-<div
-  class={{class-names
-    'euiNotificationEventMeta'
-    (if @hasContextMenu 'euiNotificationEventMeta--hasContextMenu')
-  }}
-  ...attributes
->
-  <div class="euiNotificationEventMeta__section">
+{{#let
+  (and
+    (arg-or-default @hasDefaultBlock true)
+    (has-block)
+  )
+as |hasDefaultBlock|}}
+  <div
+    class={{class-names
+      'euiNotificationEventMeta'
+      (if hasDefaultBlock 'euiNotificationEventMeta--hasContextMenu')
+    }}
+    ...attributes
+  >
+    <div class="euiNotificationEventMeta__section">
 
-    {{#if @iconType}}
-      <EuiIcon
-        @iconClasses="euiNotificationEventMeta__icon"
-        @type={{@iconType}}
-        @color={{@iconColor}}
-        {{!-- TODO only add one of the following html attributes --}}
-        aria-label={{@iconAriaLabel}}
-        aria-hidden={{if @iconAriaLabel false true}}
-      />
-    {{/if}}
+      {{#if @iconType}}
+        <EuiIcon
+          @iconClasses="euiNotificationEventMeta__icon"
+          @type={{@iconType}}
+          @color={{@iconColor}}
+          {{!-- 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}}
+      {{#if @type}}
+          <EuiBadge
+            class="euiNotificationEventMeta__badge"
+            @color={{@badgeColor}}
+          >
+            {{#if @severity}}
+              {{@type}}: {{@severity}}
+            {{else}}
+              {{@type}}
+            {{/if}}
+          </EuiBadge>
+      {{/if}}
 
-  </div>
+    </div>
 
-  <div class="euiNotificationEventMeta__section">
-    <span class="euiNotificationEventMeta__time">{{@time}}</span>
-  </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}}
-        >
+    {{#if hasDefaultBlock}}
+      {{#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>
+            <: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>
+            {{!-- 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}}
+          </EuiPopover>
+        </div>
+      {{/let}}
+    {{/if}}
 
-</div>
+  </div>
+{{/let}}

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

@@ -1,27 +1,22 @@
-{{#let (arg-or-default @restrictWidth false) as |restrictWidth|}}
-  {{#let
-    (if
-      (eq restrictWidth true)
-      (hash widthClassName="euiPage--restrictWidth-default")
-      (if
-        (not-eq restrictWidth false)
-        (hash
-          widthClassName="euiPage--restrictWidth-custom"
-          widthStyle=restrictWidth
-        )
-      )
-    ) as |styling|
-  }}
+{{#let
+  (arg-or-default @restrictWidth false)
+  (arg-or-default @paddingSize "m")
+  (arg-or-default @grow true)
+  (arg-or-default @direction "row")
+  as |restrictWidth paddingSize grow direction|
+}}
+  {{#let (eui-page-restrict-width restrictWidth @style) as |styling|}}
     <div
       class={{class-names
-        (if @grow "euiPage--grow" "")
-        styling.widthClassName
+        (if grow "euiPage--grow")
+        (concat "euiPage--" styling.widthClassName)
         componentName="EuiPage"
-        paddingSize=(arg-or-default @paddingSize "m")
+        paddingSize=paddingSize
+        direction=direction
       }}
       ...attributes
       {{style
-        (if styling.widthStyle (inline-styles max-width=styling.widthStyle))
+        (if styling.newStyle (inline-styles styling.newStyle))
         (inline-styles min-height="460px;")
       }}
     >

package/addon/components/eui-page-body/index.hbs

@@ -1,63 +1,46 @@
 {{#let
-  (arg-or-default @tagName "div")
   (arg-or-default @restrictWidth false)
+  (arg-or-default @tagName "div")
   (arg-or-default @borderRadius "none")
   (arg-or-default @paddingSize (if @panelled "l" "none"))
-  as |tagName restrictWidth borderRadius paddingSize|
+  as |restrictWidth tagName borderRadius paddingSize|
 }}
 
-  {{#let
-    (if
-      (eq restrictWidth true)
-      (hash widthClassName="euiPageBody--restrictWidth-custom")
-      (if
-        (eq restrictWidth false)
-        (hash
-          widthClassName="euiPageBody--restrictWidth-default"
-          widthStyle=restrictWidth
-        )
-      )
-    )
-    as |styling|
-  }}
+  {{#let (eui-page-restrict-width restrictWidth @style) as |styling|}}
     {{#if @panelled}}
       <EuiPanel
         class={{class-names
+          (if (eq borderRadius "none") "euiPageBody--borderRadiusNone")
+          (if
+            styling.widthClassName
+            (concat "euiPageBody--" styling.widthClassName)
+          )
           componentName="EuiPageBody"
-          borderRadiusSize=borderRadius
           paddingSize=@paddingSize
         }}
         @paddingSize={{paddingSize}}
         @borderRadius={{borderRadius}}
-        {{!-- @paddingSize={{arg-or-default @paddingSize "none"}} --}}
-        {{!-- @restrictWidth={{@restrictWidth}} --}}
+        @color={{@color}}
+        @hasBorder={{@hasBorder}}
+        @hasShadow={{@hasShadow}}
+        {{style styling.newStyle}}
         ...attributes
-        {{style
-          (if styling.widthStyle (inline-styles max-width=styling.widthStyle))
-        }}
       >
-        {{!-- <div
-          class={{class-names
-            componentName="EuiPageBody"
-            borderRadiusSize=borderRadius
-            paddingSize=paddingSize
-          }}
-        > --}}
         {{yield}}
-        {{! </div> }}
       </EuiPanel>
     {{else}}
       {{#let (element tagName) as |Tag|}}
         <Tag
           class={{class-names
+            (if (eq borderRadius "none") "euiPageBody--borderRadiusNone")
+            (if
+              styling.widthClassName
+              (concat "euiPageBody--" styling.widthClassName)
+            )
             componentName="EuiPageBody"
-            borderRadiusSize=borderRadius
-            paddingSize=paddingSize
-          }}
-          style={{if
-            styling.widthStyle
-            (inline-styles max-width=styling.widthStyle)
+            paddingSize=@paddingSize
           }}
+          {{style styling.newStyle}}
           ...attributes
         >
           {{yield}}

package/addon/components/eui-page-content/index.hbs

@@ -1,17 +1,20 @@
-<EuiPanel
-  class={{class-names
-    componentName="EuiPageContent"
-    verticalPosition=@verticalPosition
-    horizontalPosition=@horizontalPosition
-    borderRadius=@borderRadius
-  }}
-  @hasShadow={{@hasShadow}}
-  @hasBorder={{@hasBorder}}
-  @paddingSize={{arg-or-default @paddingSize "l"}}
-  @borderRadius={{@borderRadius}}
-  @color={{@color}}
-  @grow={{@grow}}
-  ...attributes
->
-  {{yield}}
-</EuiPanel>
+{{#let (arg-or-default @role "main") as |role|}}
+  <EuiPanel
+    role={{if (eq role null) undefined role}}
+    class={{class-names
+      (if (eq @borderRadius "none") "euiPageContent--borderRadiusNone")
+      componentName="EuiPageContent"
+      verticalPosition=@verticalPosition
+      horizontalPosition=@horizontalPosition
+    }}
+    @hasShadow={{@hasShadow}}
+    @hasBorder={{@hasBorder}}
+    @paddingSize={{arg-or-default @paddingSize "l"}}
+    @borderRadius={{@borderRadius}}
+    @color={{@color}}
+    @grow={{@grow}}
+    ...attributes
+  >
+    {{yield}}
+  </EuiPanel>
+{{/let}}

package/addon/components/eui-page-content-body/index.hbs

@@ -1,15 +1,16 @@
-<div
-  class={{class-names
-    (if
-      @restrictWidth
-      "euiPage--restrictWidth-custom"
-      "euiPage--restrictWidth-default"
-    )
-    componentName="EuiPageContentBody"
-    paddingSize=@paddingSize
-  }}
-  {{style (inline-styles width=@restrictWidth)}}
-  ...attributes
->
-  {{yield}}
-</div>
+{{#let
+  (eui-page-restrict-width (arg-or-default @restrictWidth false) @style)
+  as |styling|
+}}
+  <div
+    class={{class-names
+      (concat "euiPage--" styling.widthClassName)
+      componentName="EuiPageContentBody"
+      paddingSize=@paddingSize
+    }}
+    {{style styling.newStyle}}
+    ...attributes
+  >
+    {{yield}}
+  </div>
+{{/let}}

package/addon/components/eui-page-content-header/index.hbs

@@ -2,20 +2,8 @@
   class={{class-names
     "euiPageContentHeader"
     (if @responsive "euiPageContentHeader--responsive")
-    (if
-      @restrictWidth
-      "euiPanel--restrictWidth-custom"
-      "euiPanel--restrictWidth-default"
-    )
   }}
-  {{style (inline-styles width=@restrictWidth)}}
   ...attributes
 >
-  {{yield
-    (hash
-      Section=(component
-        "eui-page-content-header-section"
-      )
-    )
-  }}
+  {{yield}}
 </div>

package/addon/components/eui-page-header/index.hbs

@@ -1,36 +1,94 @@
-<header
-  class={{class-names
-    (if @bottomBorder "euiPageHeader--bottomBorder")
-    (if @responsive "euiPageHeader--responsive")
-    (if (and @pageTitle @tabs) "euiPageHeader--tabsAtBottom")
-    (if
-      (and @tabs (not @pageTitle) (not @rightSideItems) (not @description))
-      "euiPageHeader--onlyTabs"
+{{#let
+  (eui-page-restrict-width (arg-or-default @restrictWidth false) @style)
+  (arg-or-default @responsive true)
+  (and (arg-or-default @hasDefaultBlock true) (has-block "default"))
+  (or
+    (and (arg-or-default @hasDescriptionBlock true) (has-block "description"))
+    @description
+  )
+  (or
+    (and (arg-or-default @hasPageTitleBlock true) (has-block "pageTitle"))
+    @pageTitle
+  )
+  (or
+    (and
+      (arg-or-default @hasRightSideItemsBlock true) (has-block "rightSideItems")
     )
-    (if (eq @responsive "reverse") "euiPageHeader--responsiveReverse")
-    (if
-      @alignItems (concat "euiPageHeader--" @alignItems) "euiPageHeader--center"
+    @rightSideItems
+  )
+  as |styling responsive hasDefaultBlock hasDescriptionBlock hasPageTitleBlock hasRightSideItemsBlock|
+}}
+  {{#let
+    (class-names
+      (if
+        styling.widthClassName (concat "euiPageHeader--" styling.widthClassName)
+      )
+      (if @bottomBorder "euiPageHeader--bottomBorder")
+      (if responsive "euiPageHeader--responsive")
+      (if (eq responsive "reverse") "euiPageHeader--responsiveReverse")
+      (if (and hasPageTitleBlock @tabs) "euiPageHeader--tabsAtBottom")
+      (if
+        (and
+          @tabs
+          (not hasPageTitleBlock)
+          (not hasRightSideItemsBlock)
+          (not hasDescriptionBlock)
+          (not hasDefaultBlock)
+        )
+        "euiPageHeader--onlyTabs"
+      )
+      (if
+        @alignItems
+        (concat "euiPageHeader--" @alignItems)
+        "euiPageHeader--center"
+      )
+      componentName="EuiPageHeader"
+      paddingSize=@paddingSize
     )
-    (if
-      (eq @restrictWidth true)
-      "euiPageHeader--restrictWidth-default"
-      (if (not-eq @restrictWidth false) "euiPageHeader--restrictWidth-custom")
-    )
-    componentName="EuiPageHeader"
-    paddingSize=@paddingSize
+    as |classes|
   }}
-  ...attributes
->
-  <EuiPageHeaderContent
-    @alignItems={{@alignItems}}
-    @responsive={{@responsive}}
-    @pageTitle={{@pageTitle}}
-    @iconType={{@iconType}}
-    @tabs={{@tabs}}
-    @description={{@description}}
-    @rightSideItems={{@rightSideItems}}
-    @restrictWidth={{@restrictWidth}}
-  >
-    {{yield}}
-  </EuiPageHeaderContent>
-</header>
+    {{#if
+      (and
+        (not @tabs)
+        (not hasPageTitleBlock)
+        (not hasDescriptionBlock)
+        (not hasRightSideItemsBlock)
+      )
+    }}
+      <header class={{classes}} {{style styling.newStyle}} ...attributes>
+        {{yield to="default"}}
+      </header>
+    {{else}}
+      {{!template-lint-disable}}
+      <header class={{classes}} {{style styling.newStyle}} ...attributes>
+        <EuiPageHeaderContent
+          @alignItems={{@alignItems}}
+          @responsive={{responsive}}
+          @pageTitle={{@pageTitle}}
+          @iconType={{@iconType}}
+          @breadcrumbs={{@breadcrumbs}}
+          @tabs={{@tabs}}
+          @description={{@description}}
+          @restrictWidth={{@restrictWidth}}
+          @hasDescriptionBlock={{not (not hasDescriptionBlock)}}
+          @hasPageTitleBlock={{not (not hasPageTitleBlock)}}
+          @hasRightSideItemsBlock={{not (not hasRightSideItemsBlock)}}
+          @hasDefaultBlock={{not (not hasDefaultBlock)}}
+        >
+          <:pageTitle>
+            {{yield to="pageTitle"}}
+          </:pageTitle>
+          <:rightSideItems as |item|>
+            {{yield item to="rightSideItems"}}
+          </:rightSideItems>
+          <:description>
+            {{yield to="description"}}
+          </:description>
+          <:default>
+            {{yield to="default"}}
+          </:default>
+        </EuiPageHeaderContent>
+      </header>
+    {{/if}}
+  {{/let}}
+{{/let}}