@ember-eui/core 4.2.6 → 5.0.0-alpha.1

package/docs/navigation/link.md

@@ -0,0 +1,9 @@
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Link
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/navigation/side-nav-demo/demo1.md

@@ -2,11 +2,25 @@
 
 ```hbs template
 <EuiSideNav
-  @mobileTitle="Test Mobile Title"
+  @mobileTitle='Mobile Title'
+  @heading='Title'
   @isOpenMobile={{true}}
   @items={{this.sideNavItems}}
   @selectedItem={{this.selectedItem}}
+  @truncate={{true}} {{! you can also truncate per item }}
 />
+
+<EuiSpacer />
+<EuiSideNav
+  @isOpenMobile={{true}}
+  @items={{this.sideNavItems}}
+  @selectedItem={{this.selectedItem}}
+  @truncate={{true}} {{! you can also truncate per item }}
+>
+  <:heading>
+    <EuiIcon @type="faceHappy"/> Header!
+  </:heading>
+</EuiSideNav>
 ```
 
 ```js component
@@ -25,7 +39,7 @@ export default class DemoSideNavComponent extends Component {
       ...data,
       id: name,
       name,
-      onClick,
+      onClick
     };
   }
 
@@ -38,14 +52,15 @@ export default class DemoSideNavComponent extends Component {
       createItem('Elasticsearch', {
         icon: 'logoElasticsearch',
         items: [
-          createItem('Data sources'),
+          createItem('Data sources', { disabled: true }),
           createItem('Users'),
           createItem('Roles'),
           createItem('Watches'),
           createItem(
-            'Extremely long title will become truncated when the browser is narrow enough'
-          ),
-        ],
+            'Extremely long title will become truncated when the browser is narrow enough',
+            { truncate: true }
+          )
+        ]
       }),
       createItem('Kibana', {
         icon: 'logoKibana',
@@ -57,31 +72,32 @@ export default class DemoSideNavComponent extends Component {
                 items: [
                   createItem('Time stuff', {
                     icon: 'clock',
+                    emphasize: true
                   }),
                   createItem('Lion stuff', {
                     icon: 'stats',
                     items: [
                       createItem('Hello sstuff', {
                         icon: 'logoGolang',
-                      }),
-                    ],
-                  }),
-                ],
+                        disabled: true
+                      })
+                    ]
+                  })
+                ]
               }),
-              createItem('Visualizations'),
-            ],
+              createItem('Visualizations')
+            ]
           }),
           createItem('Index Patterns'),
           createItem('Saved Objects'),
-          createItem('Reporting'),
-        ],
+          createItem('Reporting')
+        ]
       }),
       createItem('Logstash', {
         icon: 'logoLogstash',
-        items: [createItem('Pipeline viewer')],
-      }),
+        items: [createItem('Pipeline viewer')]
+      })
     ];
   }
 }
-
-```
+```

package/docs/navigation/side-nav.md

@@ -1 +1,9 @@
-# Side nav
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Side nav
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/navigation/steps-demo/demo1.md

@@ -2,28 +2,26 @@
 order: 1
 ---
 
-# Basic Steps
+<EuiText>
+<p><strong>EuiSteps</strong> presents procedural content in a numbered outline format. It is best used when presenting instructional content that must be conducted in a particular order. It requires a <EuiCode>title</EuiCode> and <EuiCode>children</EuiCode> to be present and will automatically increment the step number based on the initial <EuiCode>firstStepNumber</EuiCode>.</p>
+</EuiText>
 
 ```hbs template
 <EuiSteps>
-  <EuiStep
-    @step={{1}}
-    @title="Step 1"
-  >
-    You do this!
+  <EuiStep @step={{1}} @title='Step 1'>
+    Do this first
   </EuiStep>
-  <EuiStep
-    @step={{2}}
-    @title="Step 2"
-  >
-    You do that!
-  </EuiStep>
-  <EuiStep
-    @step={{3}}
-    @title="Step 3"
-    @status="danger"
-  >
-    You did what!?
+  <EuiStep @step={{2}} @title='Step 2'>
+    Then this
   </EuiStep>
 </EuiSteps>
+<EuiSpacer @size='m' />
+<EuiText>
+  <p>
+    Set
+    <EuiCode>firstStepNumber</EuiCode>
+    to continue step numbering after any type of break in the content
+  </p>
+</EuiText>
+<EuiSpacer @size='m' />
 ```

package/docs/navigation/steps-demo/demo2.md

@@ -1,63 +1,60 @@
 ---
-order: 2
+order: 4
 ---
 
 # Statuses
 
+<EuiText>
+<p>Steps can optionally include <EuiCode>status</EuiCode> prop that will alter the look of the number prefix. The options are <EuiCode>incomplete</EuiCode>, <EuiCode>complete</EuiCode>, <EuiCode>warning</EuiCode>, <EuiCode>danger</EuiCode>, <EuiCode>disabled</EuiCode> and <EuiCode>loading</EuiCode>. This is used mostly as a final step when you need to make some sort of final check.</p>
+</EuiText>
+
 ```hbs template
 <EuiSteps>
-  <EuiStep
-    @step={{1}}
-    @title="Step 1"
-  >
+  <EuiStep @step={{1}} @title='Step 1'>
     You do this!
   </EuiStep>
-  <EuiStep
-    @title="Step 2"
-    @status={{this.status}}
-    @step={{2}}
-  >
-    You did good! {{if (eq this.status "danger") "(or not)"}}
-    <EuiSubSteps>
-      Click the buttons below to change status!
+  <EuiStep @title='Step 2' @status={{this.status}} @step={{2}}>
+    We are fancy buttons just waiting to be pushed!
+    <div>
+      <EuiSpacer />
       <EuiFlexGroup>
         <EuiFlexItem @grow={{false}}>
-          <EuiButton @color="danger" {{on "click" this.setDanger}}>
+          <EuiButton @color='danger' {{on 'click' this.setDanger}}>
             Set Danger
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButton @color="secondary" {{on "click" this.setComplete}}>
+          <EuiButton @color='success' {{on 'click' this.setComplete}}>
             Set Complete
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButton @color="warning" {{on "click" this.setWarning}}>
+          <EuiButton @color='warning' {{on 'click' this.setWarning}}>
             Set Warning
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButton @color="primary" {{on "click" this.setLoading}}>
+          <EuiButton @color='primary' {{on 'click' this.setLoading}}>
             Set Loading
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButtonEmpty {{on "click" this.setDisabled}}>
+          <EuiButtonEmpty {{on 'click' this.setDisabled}}>
             Set Disabled
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButtonEmpty {{on "click" this.setIncomplete}}>
+          <EuiButtonEmpty {{on 'click' this.setIncomplete}}>
             Set Incomplete
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButtonEmpty {{on "click" this.reset}}>
+          <EuiButtonEmpty {{on 'click' this.reset}}>
             Reset
           </EuiButtonEmpty>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </EuiSubSteps>
+    </div>
   </EuiStep>
 </EuiSteps>
 ```

package/docs/navigation/steps-demo/demo3.md

@@ -1,28 +1,30 @@
 ---
-order: 3
+order: 5
 ---
 
 # Horizontal Steps
 
+<EuiText>
+<p>For use when forms/setup instructions can and should be split into multiple pages. Each step should correspond to an individual page of form elements, using the <EuiCode>status</EuiCode> key to denote the user's progress.</p>
+<p>For horizontal steps, the <EuiCode>status</EuiCode> key defaults to <EuiCode>"incomplete"</EuiCode> and the default filled styling is reserved for indicating <EuiCode>"current"</EuiCode> status.</p>
+</EuiText>
+
 ```hbs template
 <EuiStepsHorizontal>
   <EuiStepHorizontal
-    @title="Cart"
+    @title='Completed step 1'
+    @status='complete'
     @step={{1}}
     @isComplete={{true}}
   />
+  <EuiStepHorizontal @title='Selected step 2' @step={{2}} @status='current' />
   <EuiStepHorizontal
-    @title="Shipping"
-    @step={{2}}
-    @isComplete={{true}}
-  />
-  <EuiStepHorizontal
-    @title="Payment Method"
+    @title='Incomplete step 3 which will wrap to the next line'
     @step={{3}}
-    @isSelected={{true}}
   />
   <EuiStepHorizontal
-    @title="Review Order"
+    @title='Disabled step 4'
+    @status='disabled'
     @step={{4}}
     @disabled={{true}}
   />

package/docs/navigation/steps-demo/demo4.md

@@ -0,0 +1,84 @@
+---
+order: 2
+---
+
+# Complex steps
+
+<EuiText>
+<p>If you need to call out a set of substeps that are not lines of code, most likely a <EuiCode>&lt;ol/&gt;</EuiCode>, wrap the block in a <EuiCode>&lt;EuiSubSteps/&gt;</EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiSteps>
+  <EuiStep @step={{1}} @title='Step 1 has intro plus code snippet'>
+    <EuiText>
+      <p>Run this code snippet to install things.</p>
+    </EuiText>
+    <EuiSpacer />
+    <EuiCodeBlock @language='bash'>npm install</EuiCodeBlock>
+  </EuiStep>
+  <EuiStep @step={{2}} @title='Step 2 has sub steps'>
+    <EuiText>
+      <p>
+        In order to complete this step, do the following things{' '}
+        <strong>in order</strong>.
+      </p>
+      <EuiSubSteps>
+        <ol>
+          <li>Do thing 1</li>
+          <li>Do thing 2</li>
+          <li>Do thing 3</li>
+        </ol>
+      </EuiSubSteps>
+      <p>Here are some bullet point reminders.</p>
+      <ul>
+        <li>Reminder 1</li>
+        <li>Reminder 2</li>
+        <li>Reminder 3</li>
+      </ul>
+    </EuiText>
+  </EuiStep>
+  <EuiStep @step={{3}} @title='Step 3 has an intro and one line instruction'>
+    <EuiText>
+      <p>
+        Now that you&apos;ve completed step 2, go find the{' '}
+        <EuiCode>thing</EuiCode>.
+      </p>
+      <p>
+        Go to
+        <strong>Overview &gt;&gt; Endpoints</strong>
+        note{' '}
+        <strong>Elasticsearch</strong>
+        as
+        <EuiCode>&lt;thing&gt;</EuiCode>.
+      </p>
+    </EuiText>
+  </EuiStep>
+  <EuiStep @step={{4}} @title='The last step has two options'>
+    <EuiText @size='s'>
+      <h3>
+        <strong>Option 1:</strong>
+        If you have this type of instance
+      </h3>
+      <EuiSubSteps>
+        <ol>
+          <li>Do thing 1</li>
+          <li>Do thing 2</li>
+          <li>Do thing 3</li>
+        </ol>
+      </EuiSubSteps>
+      <h3>
+        <strong>Option 2:</strong>
+        If you have the other type of instance
+      </h3>
+      <EuiSubSteps>
+        <ol>
+          <li>Do thing 1</li>
+          <li>Do thing 2</li>
+          <li>Do thing 3</li>
+        </ol>
+      </EuiSubSteps>
+    </EuiText>
+  </EuiStep>
+</EuiSteps>
+```

package/docs/navigation/steps-demo/demo5.md

@@ -0,0 +1,29 @@
+---
+order: 3
+---
+
+# Heading elements
+
+<EuiText>
+<p>To aid with accessibility and hierarchical headings, you can and should pass in a heading element to use for each step title. The example below shows that the logical heading element should be an <EuiCode>h2</EuiCode>and therefore adds <EuiCode>headingElement<span class="token verb keyword">=</span><span class="token conjunction variable">"</span>h2<span class="token conjunction variable">"</span></EuiCode> to the EuiSteps component.</p>
+<p>The style of the title will <strong>not</strong> be affected.</p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiTitle size='l'>
+    <h1>Heading 1</h1>
+  </EuiTitle>
+
+  <EuiSpacer size='xl' />
+
+  <EuiSteps @headingElement='h2'>
+    <EuiStep @step={{1}} @title='Step 1'>
+      <EuiTitle @size='xs'>
+        <h3>Did you notice the step title is inside a Heading 2 element?</h3>
+      </EuiTitle>
+    </EuiStep>
+
+  </EuiSteps>
+</div>
+```

package/docs/navigation/steps.md

@@ -1 +1,9 @@
-# Steps
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Steps
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/navigation/tabs.md

@@ -1 +1,9 @@
-# Tabs
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Tabs
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/utilities/auto-sizer-demo/demo1.md

@@ -0,0 +1,34 @@
+---
+order: 1
+---
+
+# Auto sizer
+
+<EuiText>
+	<p>
+	<strong>EuiAutoSizer</strong> helps components that use virtualized rendering and/or require explicit dimensions to fill all available space in the parent container. See the <EuiLink @href="https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md">react-virtualized</EuiLink> documentation as <strong>EuiAutoSizer</strong> is a port from component for <strong>AutoSizer</strong>.
+  </p>
+</EuiText>
+
+```hbs template
+<div style='height:200px; width: 100%;'>
+  <EuiAutoSizer as |dimensions|>
+    <EuiPanel
+      style='position: absolute; display: flex; align-items:center; justify-content:center; height: {{dimensions.height}}; width: {{dimensions.width}}'
+    >
+      <EuiCode>height:
+        {{dimensions.height}}, width:
+        {{dimensions.width}}</EuiCode>
+    </EuiPanel>
+  </EuiAutoSizer>
+</div>
+```
+
+```javascript component
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class OutsideClickDetectorComponentDemo1 extends GlimmerComponent {
+  @tracked copyText = 'I am the text that will be copied';
+}
+```

package/docs/utilities/auto-sizer.md

@@ -0,0 +1,9 @@
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Auto sizer
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/utilities/copy-demo/demo1.md

@@ -0,0 +1,37 @@
+---
+order: 1
+---
+
+# Copy
+
+<EuiText>
+	<p>
+	The <strong>EuiCopy</strong> component is a utility for copying text to clipboard. Wrap a function that returns a component. The first argument will be a <EuiCode>copy</EuiCode> function
+  </p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiFormRow @label='Enter text that will be copied to clipboard'>
+    <EuiFieldText
+      @value={{this.copyText}}
+      {{on 'input' (pick 'target.value' (set this 'copyText'))}}
+    />
+  </EuiFormRow>
+
+  <EuiSpacer @size='m' />
+
+  <EuiCopy @textToCopy={{this.copyText}} as |copy|>
+    <EuiButton {{on 'click' copy}}>Click to copy input text</EuiButton>
+  </EuiCopy>
+</div>
+```
+
+```javascript component
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class OutsideClickDetectorComponentDemo1 extends GlimmerComponent {
+  @tracked copyText = 'I am the text that will be copied';
+}
+```

package/docs/utilities/copy-demo/demo2.md

@@ -0,0 +1,70 @@
+---
+	order: 2
+---
+
+# Copy to clipboard function
+
+<EuiText>
+	<p>
+	The function <EuiCode>copyToClipboard</EuiCode> allows you to copy text to the clipboard. It receives an argument of type <EuiCode>string</EuiCode>.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiComment>
+  <:username>
+    Gusteau
+  </:username>
+  <:event>
+    added a comment
+  </:event>
+  <:timestamp>
+    on tuesday
+  </:timestamp>
+  <:actions>
+    <EuiToolTip @content={{this.tooltipText}}>
+      <:anchor>
+        <EuiButtonIcon
+          {{did-insert (set this 'buttonRef')}}
+          aria-label='Copy text to clipboard'
+          @color='text'
+          @iconType='copy'
+          @onClick={{onClick}}
+          {{on 'click' this.onClick}}
+          {{on 'blur' (set this 'isTextCopied' false)}}
+        />
+      </:anchor>
+    </EuiToolTip>
+  </:actions>
+  <:body>
+    <EuiText @size='s'>
+      <p>{{this.text}}</p>
+    </EuiText>
+  </:body>
+</EuiComment>
+```
+
+```javascript component
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { copyToClipboard } from '@ember-eui/core/utils/copy-to-clipboard';
+
+export default class OutsideClickDetectorComponentDemo1 extends GlimmerComponent {
+  @tracked isTextCopied = false;
+  buttonRef = null;
+
+  text =
+    'You must be imaginative, strong-hearted. You must try things that may not work, and you must not let anyone define your limits because of where you come from. Your only limit is your soul. What I say is true—anyone can cook… but only the fearless can be great.';
+
+  get tooltipText() {
+    return this.isTextCopied ? 'Text copied to clipboard' : 'Copy Text';
+  }
+
+  onClick = () => {
+    this.buttonRef?.focus?.();
+    copyToClipboard(this.text);
+    this.isTextCopied = true;
+  };
+}
+```

package/docs/utilities/copy.md

@@ -0,0 +1,9 @@
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Copy
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/utilities/mutation-observer.md

@@ -1 +1,9 @@
-# Mutation observer
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Mutation observer
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/utilities/outside-click-detector.md

@@ -1 +1,9 @@
-# Outside click detector
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Outside click detector
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/utilities/overlay-mask.md

@@ -1 +1,9 @@
-# Overlay mask
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Overlay Mask
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/utilities/portal.md

@@ -1 +1,9 @@
-# Portal
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Portal
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/utilities/resize-observer.md

@@ -1 +1,9 @@
-# Resize observer
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Resize Observer
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>