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

package/docs/layout/page-template/demo/demo4.md

@@ -0,0 +1,43 @@
+---
+order: 4
+---
+
+# Centered Body
+
+<EuiSpacer />
+<EuiText>
+  When the content for the page is minimal or in an empty/pre-setup state, the page content can be centered vertically and horizontally. We recommend then using the <strong>EuiEmptyPrompt</strong> for the content.
+</EuiText>
+<EuiSpacer />
+<EuiCallOut>
+  <:title>
+    This layout can be achieved in <strong>EuiPageTemplate</strong> by setting <EuiCode>template="centeredBody"</EuiCode>.
+  </:title>
+</EuiCallOut>
+
+```hbs template
+<EuiPageTemplate @template='centeredBody' @grow={{true}}>
+  <:pageSideBar>
+    <EuiLoadingContent @lines={{8}} />
+  </:pageSideBar>
+  <:default>
+    <EuiEmptyPrompt @paddingSize='l'>
+      <:content>
+        <EuiTitle>No spice</EuiTitle>
+        <EuiSpacer />
+        <figure class='euiImage euiImage--fullWidth'><img
+            src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQ2IiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDY0NiAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIG9wYWNpdHk9IjAuNDE1Ij4KPHJlY3Qgd2lkdGg9IjY0NiIgaGVpZ2h0PSIyNCIgcng9IjQiIGZpbGw9IiM3RDg2OUMiIGZpbGwtb3BhY2l0eT0iMC41Ii8+CjxyZWN0IHk9IjQ4IiB3aWR0aD0iNjQ2IiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzdEODY5QyIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPHJlY3QgeD0iMTM2LjUiIHk9Ijk2IiB3aWR0aD0iMzczIiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzdEODY5QyIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPC9nPgo8L3N2Zz4K'
+            class='euiImage__img'
+            alt='Fake paragraph'
+            title=''
+            style=''
+          /></figure>
+        <EuiSpacer />
+        <EuiButton @fill={{true}}>
+          Go to full screen
+        </EuiButton>
+      </:content>
+    </EuiEmptyPrompt>
+  </:default>
+</EuiPageTemplate>
+```

package/docs/layout/page-template/demo/demo5.md

@@ -0,0 +1,54 @@
+---
+order: 5
+---
+
+# Centered Content
+
+<EuiSpacer />
+<EuiText>
+  Similar to the previous example, you can create a centered panel to emphasize incompleteness even with a page header. For this setup, we recommend using setting <strong>EuiPageContent</strong> to use the <EuiCode>subdued</EuiCode> color as to not have nested shadows.
+</EuiText>
+<EuiSpacer />
+<EuiCallOut>
+  <:title>
+    This layout can be achieved in <strong>EuiPageTemplate</strong> by setting <EuiCode>template="centeredContent"</EuiCode>.
+  </:title>
+</EuiCallOut>
+
+```hbs template
+<EuiPageTemplate
+  @grow={{true}}
+  @template='centeredContent'
+  @pageHeader={{hash iconType='logoElastic' pageTitle='Page Title'}}
+>
+  <:pageSideBar>
+    <EuiLoadingContent @lines={{8}} />
+  </:pageSideBar>
+  <:pageHeaderRightSideItems as |Item|>
+    <Item>
+      <EuiButton>
+        Go to full screen
+      </EuiButton>
+    </Item>
+  </:pageHeaderRightSideItems>
+  <:default>
+    <EuiEmptyPrompt @paddingSize='l'>
+      <:content>
+        <EuiTitle>No spice</EuiTitle>
+        <EuiSpacer />
+        <figure class='euiImage euiImage--fullWidth'><img
+            src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQ2IiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDY0NiAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIG9wYWNpdHk9IjAuNDE1Ij4KPHJlY3Qgd2lkdGg9IjY0NiIgaGVpZ2h0PSIyNCIgcng9IjQiIGZpbGw9IiM3RDg2OUMiIGZpbGwtb3BhY2l0eT0iMC41Ii8+CjxyZWN0IHk9IjQ4IiB3aWR0aD0iNjQ2IiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzdEODY5QyIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPHJlY3QgeD0iMTM2LjUiIHk9Ijk2IiB3aWR0aD0iMzczIiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzdEODY5QyIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPC9nPgo8L3N2Zz4K'
+            class='euiImage__img'
+            alt='Fake paragraph'
+            title=''
+            style=''
+          /></figure>
+        <EuiSpacer />
+        <EuiButton @fill={{true}}>
+          Go to full screen
+        </EuiButton>
+      </:content>
+    </EuiEmptyPrompt>
+  </:default>
+</EuiPageTemplate>
+```

package/docs/layout/{page-demo → page-template/demo}/demo6.md

@@ -20,11 +20,19 @@ order: 6
   @pageHeader={{hash
     iconType='logoElastic'
     pageTitle='Page Title'
-    rightSideItems=(array (component 'eui-button-title' title='Go full screen'))
     tabs=this.tabs
   }}
 >
-  <EuiLoadingContent @lines={{16}} />
+  <:pageHeaderRightSideItems as |Item|>
+    <Item>
+      <EuiButton>
+        Go to full screen
+      </EuiButton>
+    </Item>
+  </:pageHeaderRightSideItems>
+  <:default>
+    <EuiLoadingContent @lines={{16}} />
+  </:default>
 </EuiPageTemplate>
 ```
 

package/docs/layout/page-template/demo/demo8.md

@@ -0,0 +1,46 @@
+---
+order: 8
+---
+
+# Simple layout with centered body
+
+<EuiText>
+ Similar to the version with a side bar, when the content for the page is minimal or in an empty/pre-setup state, the page content can be centered vertically and horizontally. We recommend then using the <strong>EuiEmptyPrompt</strong> for the content.
+</EuiText>
+
+```hbs template
+<EuiPageTemplate @grow={{true}} @template='centeredBody'>
+  <:default>
+    <EuiPageContent
+      @borderRadius='none'
+      @hasShadow={{false}}
+      style='display: flex'
+    >
+      <EuiPageContent
+        @verticalPosition='center'
+        @horizontalPosition='center'
+        @paddingSize='none'
+        @color='subdued'
+        @hasShadow={{false}}
+        @hasBorder={{false}}
+      >
+        <EuiEmptyPrompt @paddingSize='l'>
+          <:content>
+            <EuiTitle>No spice</EuiTitle>
+            <EuiSpacer />
+            <EuiText>
+              <figure class='euiImage euiImage--fullWidth'><img
+                  src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQ2IiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDY0NiAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIG9wYWNpdHk9IjAuNDE1Ij4KPHJlY3Qgd2lkdGg9IjY0NiIgaGVpZ2h0PSIyNCIgcng9IjQiIGZpbGw9IiM3RDg2OUMiIGZpbGwtb3BhY2l0eT0iMC41Ii8+CjxyZWN0IHk9IjQ4IiB3aWR0aD0iNjQ2IiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzdEODY5QyIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPHJlY3QgeD0iMTM2LjUiIHk9Ijk2IiB3aWR0aD0iMzczIiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzdEODY5QyIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPC9nPgo8L3N2Zz4K'
+                  class='euiImage__img'
+                  alt='Fake paragraph'
+                  title=''
+                  style=''
+                /></figure>
+            </EuiText>
+          </:content>
+        </EuiEmptyPrompt>
+      </EuiPageContent>
+    </EuiPageContent>
+  </:default>
+</EuiPageTemplate>
+```

package/docs/layout/page-template/demo/demo9.md

@@ -0,0 +1,43 @@
+---
+order: 9
+---
+
+# Simple layout with centered content
+
+<EuiText>
+ Also similar to the previous examples, you can create a centered panel to emphasis incompleteness even with a page header. For this setup, You will need to use nested <strong>EuiPageContent</strong> components in order for the centering to work.
+</EuiText>
+
+```hbs template
+<EuiPageTemplate
+  @template='centeredContent'
+  @pageContentProps={{hash paddingSize='none'}}
+  @pageHeader={{hash iconType='logoElastic' pageTitle='Page Title'}}
+>
+  <:pageHeaderRightSideItems as |Item|>
+    <Item>
+      <EuiButton @fill={{true}}>
+        Go to full screen
+      </EuiButton>
+    </Item>
+  </:pageHeaderRightSideItems>
+  <:default>
+    <EuiEmptyPrompt @paddingSize='l'>
+      <:content>
+        <EuiTitle>No spice</EuiTitle>
+        <EuiSpacer />
+        <EuiText>
+          <figure class='euiImage euiImage--fullWidth'><img
+              src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQ2IiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDY0NiAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIG9wYWNpdHk9IjAuNDE1Ij4KPHJlY3Qgd2lkdGg9IjY0NiIgaGVpZ2h0PSIyNCIgcng9IjQiIGZpbGw9IiM3RDg2OUMiIGZpbGwtb3BhY2l0eT0iMC41Ii8+CjxyZWN0IHk9IjQ4IiB3aWR0aD0iNjQ2IiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzdEODY5QyIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPHJlY3QgeD0iMTM2LjUiIHk9Ijk2IiB3aWR0aD0iMzczIiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iIzdEODY5QyIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPC9nPgo8L3N2Zz4K'
+              class='euiImage__img'
+              alt='Fake paragraph'
+              title=''
+              style=''
+            /></figure>
+        </EuiText>
+      </:content>
+    </EuiEmptyPrompt>
+  </:default>
+
+</EuiPageTemplate>
+```

package/docs/layout/page-template/index.md

@@ -0,0 +1,11 @@
+---
+order: 1
+title: Page Template
+---
+
+<EuiPageHeader @pageTitle="Page Template" @bottomBorder={{true}}>
+	<:description>
+	<EuiText>While the <strong>EuiPageHeader</strong> component can be placed anywhere within your page layout, we recommend using it within the <a href="#"><strong>EuiPageTemplate</strong></a> component by passing the configuration props as its <EuiCode>pageHeader</EuiCode>.</EuiText>
+	</:description>
+	
+</EuiPageHeader>

package/package.json

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

package/docs/layout/page-demo/demo10.md

@@ -1,42 +0,0 @@
----
-order: 10
----
-
-# A simple page layout with custom content
-
-<EuiText>
- You can replace the inner parts of <strong>EuiPageBody</strong> with your own content, with or without a page header. This allows you to create dashboard style layouts with lots of panels. It is not recommended, however, to use this setup when you also have side bar.
-</EuiText>
-<EuiSpacer />
-<EuiCallOut>
-  <:body>
-    This layout can be achieved in <strong>EuiPageTemplate</strong> by setting <EuiCode>template="empty"</EuiCode>.
-  </:body>
-</EuiCallOut>
-
-```hbs template
-<EuiPageTemplate
-  @grow={{true}}
-  @template='empty'
-  @pageHeader={{hash
-    iconType='logoElastic'
-    pageTitle='Page Title'
-    rightSideItems=(array (component 'eui-button-title' title='Go full screen' color='warning')(component 'eui-button-title' title='Do something'))
-  }}
->
-  <EuiFlexGrid @columns={{2}}>
-    <EuiFlexItem>
-      <EuiPanel style='height: 200px' />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiPanel style='height: 200px' />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiPanel style='height: 200px' />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiPanel style='height: 200px' />
-    </EuiFlexItem>
-  </EuiFlexGrid>
-</EuiPageTemplate>
-```

package/docs/layout/page-demo/demo4.md

@@ -1,38 +0,0 @@
----
-order: 4
----
-
-# Centered Body
-
-<EuiSpacer />
-<EuiText>
-  When the content for the page is minimal or in an empty/pre-setup state, the page content can be centered vertically and horizontally. We recommend then using the <strong>EuiEmptyPrompt</strong> for the content.
-</EuiText>
-<EuiSpacer />
-<EuiCallOut>
-  <:title>
-    This layout can be achieved in <strong>EuiPageTemplate</strong> by setting <EuiCode>template="centeredBody"</EuiCode>.
-  </:title>
-</EuiCallOut>
-
-```hbs template
-<EuiPageTemplate
-  @template='centeredBody'
-  @grow={{true}}
-  @pageSideBar={{component 'eui-loading-content' lines=8}}
->
-  <EuiEmptyPrompt @paddingSize='l'>
-    <:content>
-      <EuiTitle>No spice</EuiTitle>
-      <EuiSpacer />
-      <EuiLoadingContent @lines={{8}} />
-      <EuiButton>
-        Go to full screen
-      </EuiButton>
-    </:content>
-    <:footer>
-      Footer
-    </:footer>
-  </EuiEmptyPrompt>
-</EuiPageTemplate>
-```

package/docs/layout/page-demo/demo5.md

@@ -1,30 +0,0 @@
----
-order: 5
----
-
-# Centered Content
-<EuiSpacer />
-<EuiText>
-  Similar to the previous example, you can create a centered panel to emphasize incompleteness even with a page header. For this setup, we recommend using setting <strong>EuiPageContent</strong> to use the <EuiCode>subdued</EuiCode> color as to not have nested shadows.
-</EuiText>
-<EuiSpacer />
-<EuiCallOut>
-  <:title>
-    This layout can be achieved in <strong>EuiPageTemplate</strong> by setting <EuiCode>template="centeredContent"</EuiCode>.
-  </:title>
-</EuiCallOut>
-
-```hbs template
-<EuiPageTemplate
-  @grow={{true}}
-  @template='centeredContent'
-  @pageHeader={{hash
-    iconType='logoElastic'
-    pageTitle='Page Title'
-    rightSideItems=(array (component 'eui-button-title' title='Go full screen'))
-  }}
-  @pageSideBar={{component 'eui-loading-content' lines=8}}
->
-  <EuiEmptyPrompt @paddingSize="l" @title='No spice' @body={{component 'eui-loading-content' lines=8}}/>
-</EuiPageTemplate>
-```

package/docs/layout/page-demo/demo8.md

@@ -1,19 +0,0 @@
----
-order: 8
----
-
-# Simple layout with centered body
-
-<EuiText>
- Similar to the version with a side bar, when the content for the page is minimal or in an empty/pre-setup state, the page content can be centered vertically and horizontally. We recommend then using the <strong>EuiEmptyPrompt</strong> for the content.
-</EuiText>
-
-```hbs template
-<EuiPageTemplate @grow={{true}} @template='centeredBody'>
-  <EuiEmptyPrompt
-    @title='No spice'
-    @paddingSize='l'
-    @body={{component 'eui-loading-content' lines=4}}
-  />
-</EuiPageTemplate>
-```

package/docs/layout/page-demo/demo9.md

@@ -1,29 +0,0 @@
----
-order: 9
----
-
-# Simple layout with centered content
-
-<EuiText>
- Also similar to the previous examples, you can create a centered panel to emphasis incompleteness even with a page header. For this setup, You will need to use nested <strong>EuiPageContent</strong> components in order for the centering to work.
-</EuiText>
-
-```hbs template
-<EuiPageTemplate
-  @template='centeredContent'
-  @pageContentProps={{hash
-    paddingSize='none'
-  }}
-  @pageHeader={{hash
-    iconType='logoElastic'
-    pageTitle='Page Title'
-    rightSideItems=(array (component 'eui-button-title' title='Go full screen'))
-  }}
->
-  <EuiEmptyPrompt
-    @title='No spice'
-    @paddingSize="l"
-    @body={{component 'eui-loading-content' lines=4}}
-  />
-</EuiPageTemplate>
-```

package/docs/layout/page.md

@@ -1 +0,0 @@
-<EuiPageHeader @pageTitle="Page"/>