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

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}}