@ember-eui/core 5.6.0 → 5.7.0

package/addon/components/eui-described-form-group/index.hbs

@@ -8,7 +8,11 @@
 >
   <EuiFlexGroup @gutterSize={{arg-or-default @gutterSize "l"}}>
     <EuiFlexItem @grow={{@descriptionFlexItemProps.grow}}>
-      <EuiTitle class="euiDescribedFormGroup__title" @size={{@titleSize}}>
+      <EuiTitle
+        class="euiDescribedFormGroup__title"
+        @size={{@titleSize}}
+        @tagName={{@titleTagName}}
+      >
         {{yield to="title"}}
       </EuiTitle>
       <EuiText

package/docs/display/{avatar-demo/demo1.md → avatar/demo/d01-basic.md}

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Basic
-
 ```hbs template
 <div>
   <EuiAvatar @size='s' @name='Raphael' />

package/docs/display/{avatar.md → avatar/index.md}

@@ -1,3 +1,8 @@
+---
+title: Avatar
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Avatar"/>
 <EuiHorizontalRule />
 <EuiText>

package/docs/display/{badge.md → badge/index.md}

@@ -1,3 +1,8 @@
+---
+title: Badge
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Badge"/>
 <EuiHorizontalRule />
 <EuiText>

package/docs/display/{callout.md → callout/index.md}

@@ -1,3 +1,8 @@
+---
+title: CallOut
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Callout"/>
 
 <EuiSpacer />
@@ -6,4 +11,4 @@
    <strong>EuiCallOut</strong> contains a message directly related to content on the page. This includes general information, success, warning, and error messages.</p><p><strong>Keep these guidelines in mind:</strong></p><ul><li>Minimize the number of callouts per page.</li><li>Stack callouts in the order in which they require users' attention: error, warning, info, and then success.</li><li>Offer only one action per callout and ensure it's an action users can perform quickly.</li><li>If the callout has a permanent spot in the UI, but needs to be less obstructive, set the <EuiCode @language="text">size</EuiCode> property to <EuiCode @language=="text">s</EuiCode> (small).</li><li>Use an <EuiCode @language="text">icon</EuiCode> prop if it adds context.</li></ul>
 </EuiText>
 
-<EuiHorizontalRule />
+<EuiHorizontalRule />

package/docs/display/card/{basic-card-demo/demo1.md → demo/d01-basic-card.md}

@@ -1,4 +1,8 @@
-# Basic card
+---
+order: 1
+---
+
+# Basic Card
 
 <EuiText>
 <p>At its core an <strong>EuiCard</strong> should contain a <EuiCode @language="text">title</EuiCode>,<EuiCode @language="text">description</EuiCode>, and an <EuiCode @language="text">icon</EuiCode>. You can make the whole card clickable by giving it an <EuiCode @language="text">onClick</EuiCode> handler or <EuiCode @language="text">href</EuiCode>.</p>

package/docs/display/card/{layout-demo/demo1.md → demo/d02-layout.md}

@@ -1,3 +1,7 @@
+---
+order: 2
+---
+
 # Layout
 
 <EuiText>

package/docs/display/card/{images-demo/demo1.md → demo/d03-images.md}

@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 3
 ---
 
 # Images

package/docs/display/card/{footer-demo/demo1.md → demo/d04-footer.md}

@@ -1,3 +1,7 @@
+---
+order: 4
+---
+
 # Footer
 
 <EuiText>

package/docs/display/card/{beta-badge-demo/demo1.md → demo/d05-beta-badge.md}

@@ -1,3 +1,7 @@
+---
+order: 5
+---
+
 # Beta Badge
 
 <EuiText>

package/docs/display/card/{selectable-demo/demo1.md → demo/d06-selectable.md}

@@ -1,4 +1,8 @@
-# Demo
+---
+order: 6
+---
+
+# Selectable
 
 ```hbs template
 <EuiFlexGroup @gutterSize='l'>

package/docs/display/card/{checkable-demo/demo1.md → demo/d07-checkable.md}

@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 7
 ---
 
 # Checkable

package/docs/display/card/{checkable-demo/demo2.md → demo/d07.1-cheekable.md}

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 8
 ---
 
 <EuiCallOut @iconType='accessibility' @color='warning'>

package/docs/display/card/{custom-children-demo/demo1.md → demo/d08-custom-children.md}

@@ -1,4 +1,8 @@
-# Custom Children
+---
+order: 9
+---
+
+# Custom children
 
 <EuiText>
 <p>In the event that you need <strong>more than</strong> just paragraph text for the <EuiCode>description</EuiCode>, you can suppliment with anything you need as the <EuiCode>children</EuiCode> of the component. You can also completely replace the description with custom children, but <strong>EuiCard</strong> at least one of these.</p>

package/docs/display/card/index.md

@@ -0,0 +1,14 @@
+---
+title: Card
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Card"/>
+<EuiSpacer/>
+<EuiText>
+  <p>
+  <strong>EuiCard</strong>  is a content-oriented component built on top of EuiPanel. Be sure to check out the guidelines for properly nesting panels.
+   </p>
+</EuiText>
+
+<EuiHorizontalRule/>

package/docs/display/{comment-list-demo/demo1.md → comment-list/demo/d01-comment-list.md}

@@ -1,14 +1,18 @@
-# Comment List
-
+<EuiText>
+	<p>
 The Comment List serves merely as a wrapper for various comments.
 It does contain the comments from trying to connect each other in case you had multiple
 unrelated comment lists in the same page.
 
->The original component from the React.js framework receives a @comments object, and maps them into the EuiCommentList component. For Ember.js, just pass them as children.
+The original component from the React.js framework receives a @comments object, and maps them into the EuiCommentList component. For Ember.js, just pass them as children.
+
+  </p>
+
+</EuiText>
 
 ```hbs template
 <EuiCommentList>
-  <EuiComment @type="regular">
+  <EuiComment @type='regular'>
     <:username>
       kyloRen
     </:username>
@@ -24,10 +28,10 @@ unrelated comment lists in the same page.
       </EuiText>
     </:body>
     <:actions>
-      <EuiButtonIcon @iconType="wrench"/>
+      <EuiButtonIcon @iconType='wrench' />
     </:actions>
   </EuiComment>
-  <EuiComment @type="update">
+  <EuiComment @type='update'>
     <:username>
       lukeSW
     </:username>
@@ -38,7 +42,7 @@ unrelated comment lists in the same page.
       on 2015-02-05
     </:timestamp>
   </EuiComment>
-  <EuiComment @type="update">
+  <EuiComment @type='update'>
     <:username>
       r2d2
     </:username>
@@ -48,8 +52,8 @@ unrelated comment lists in the same page.
     <:body>
       <EuiText>
         <p>
-          He went into a sort of hibernation or low power mode,
-          you know? Like when you 'sleep' a computer.
+          He went into a sort of hibernation or low power mode, you know? Like
+          when you 'sleep' a computer.
         </p>
       </EuiText>
     </:body>
@@ -57,11 +61,17 @@ unrelated comment lists in the same page.
       on 2015-02-05
     </:timestamp>
   </EuiComment>
-  <EuiComment @timelineIcon="listAdd" @type="update">
+  <EuiComment @timelineIcon='listAdd' @type='update'>
     <:username>
-      <EuiFlexGroup @responsive={{false}} @alignItems="center" @gutterSize="s">
+      <EuiFlexGroup @responsive={{false}} @alignItems='center' @gutterSize='s'>
         <EuiFlexItem @grow={{false}}>
-          <EuiAvatar @type="space" @initials="FO" @name="First Order" @initialLength={{2}} @size="s" />
+          <EuiAvatar
+            @type='space'
+            @initials='FO'
+            @name='First Order'
+            @initialLength={{2}}
+            @size='s'
+          />
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
           firstOrder
@@ -69,12 +79,12 @@ unrelated comment lists in the same page.
       </EuiFlexGroup>
     </:username>
     <:event>
-      <EuiFlexGroup @responsive={{false}} @alignItems="center" @gutterSize="s">
+      <EuiFlexGroup @responsive={{false}} @alignItems='center' @gutterSize='s'>
         <EuiFlexItem @grow={{false}}>
           was created by
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiBadge @color="accent">snoke</EuiBadge>
+          <EuiBadge @color='accent'>snoke</EuiBadge>
         </EuiFlexItem>
       </EuiFlexGroup>
     </:event>
@@ -82,13 +92,9 @@ unrelated comment lists in the same page.
       on 2015-02-05
     </:timestamp>
   </EuiComment>
-  <EuiComment @type="regular">
+  <EuiComment @type='regular'>
     <:timelineIcon>
-      <EuiAvatar
-        @initials="RS"
-        @name="Rey Skywokah"
-        @type="user"
-      />
+      <EuiAvatar @initials='RS' @name='Rey Skywokah' @type='user' />
     </:timelineIcon>
     <:username>
       reySkywokah
@@ -104,11 +110,11 @@ unrelated comment lists in the same page.
       </EuiText>
     </:body>
     <:actions>
-      <EuiButtonIcon @iconType="questionInCircle" />
+      <EuiButtonIcon @iconType='questionInCircle' />
     </:actions>
     <:timestamp>
       on 2015-02-05
     </:timestamp>
   </EuiComment>
 </EuiCommentList>
-```
+```

package/docs/display/{comment-list.md → comment-list/index.md}

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

package/docs/display/{description-list.md → description-list/index.md}

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

package/docs/display/empty-prompt/index.md

@@ -0,0 +1,13 @@
+---
+title: Empty Prompt
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Empty prompt"/>
+<EuiSpacer/>
+<EuiText>
+  <p>
+  The <strong>EuiEmptyPrompt</strong> is the building block to create an empty state. You can use it as a placeholder for any type of empty content. They are especially helpful for replacing entire pages or parts of a product that contain no content.
+   </p>
+</EuiText>
+<EuiHorizontalRule />

package/docs/display/health/index.md

@@ -0,0 +1,13 @@
+---
+title: Health
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Health"/>
+
+<EuiHorizontalRule />
+<EuiText>
+<p>
+<p>The <strong>EuiHealth</strong> component should be used when showing comparitive health of listed objects (like servers, HTTP response status codes(as per convenience), nodes, indexes..etc). Because icons are vague and bulky and color alone does not work, color plus text provides a recognizable, lightweight combo that works in most situations.</p>
+</p>
+</EuiText>

package/docs/display/{icons.md → icons/index.md}

@@ -1,2 +1,7 @@
+---
+title: Icons
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Icons"/>
 <EuiHorizontalRule />

package/docs/display/{image.md → image/index.md}

@@ -1,4 +1,8 @@
+---
+title: Image
+---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Image"/>
 
  <EuiSpacer />
@@ -6,4 +10,4 @@
     <p>Use <strong>EuiImage</strong> when you need to place a static image into a page with an optional caption.</p>
     </EuiText>
 
-  <EuiHorizontalRule />
+  <EuiHorizontalRule />