@ember-eui/core 4.4.0 → 5.0.0-alpha.4

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

@@ -1,191 +1,191 @@
 # Demo
 
 ```hbs template
-<EuiTitle @size="m">
+<EuiTitle @size='m'>
   Button
 </EuiTitle>
-<EuiSpacer @size="s" />
-<div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter">
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
+<EuiSpacer @size='s' />
+<div
+  class='euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter'
+>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
     <EuiButton>
       Primary
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
     <EuiButton @fill={{true}}>
       Filled
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @size="s">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @size='s'>
       Small
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @size="s" @fill={{true}}>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @size='s' @fill={{true}}>
       Small Filled
     </EuiButton>
   </div>
 </div>
-<div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter">
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @color="secondary">
-      Primary
+<div
+  class='euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter'
+>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @color='success'>
+      Success
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @fill={{true}} @color="secondary">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @fill={{true}} @color='success'>
       Filled
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @size="s" @color="secondary">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @size='s' @color='success'>
       Small
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @size="s" @fill={{true}} @color="secondary">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @size='s' @fill={{true}} @color='success'>
       Small Filled
     </EuiButton>
   </div>
 </div>
-<div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter">
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @color="warning">
-      Primary
+<div
+  class='euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter'
+>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @color='warning'>
+      Warning
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @fill={{true}} @color="warning">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @fill={{true}} @color='warning'>
       Filled
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @size="s" @color="warning">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @size='s' @color='warning'>
       Small
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @size="s" @fill={{true}} @color="warning">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @size='s' @fill={{true}} @color='warning'>
       Small Filled
     </EuiButton>
   </div>
 </div>
-<div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter">
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @color="danger">
-      Primary
+<div
+  class='euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter'
+>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @color='danger'>
+      Danger
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @fill={{true}} @color="danger">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @fill={{true}} @color='danger'>
       Filled
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @size="s" @color="danger">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @size='s' @color='danger'>
       Small
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @size="s" @fill={{true}} @color="danger">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @size='s' @fill={{true}} @color='danger'>
       Small Filled
     </EuiButton>
   </div>
 </div>
-<div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter">
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @isDisabled={{true}} @color="danger">
-      Primary
+<div
+  class='euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter'
+>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @isDisabled={{true}}>
+      Disabled
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton
-      @isDisabled={{true}}
-      @fill={{true}}
-      @color="danger"
-
-    >
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @isDisabled={{true}} @fill={{true}}>
       Filled
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @isDisabled={{true}} @size="s" @color="danger">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @isDisabled={{true}} @size='s'>
       Small
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton
-      @isDisabled={{true}}
-      @size="s"
-      @fill={{true}}
-      @color="danger"
-
-    >
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @isDisabled={{true}} @size='s' @fill={{true}}>
       Small Filled
     </EuiButton>
   </div>
 </div>
-<EuiSpacer @size="s" />
-<EuiTitle @size="xs">
+<EuiSpacer @size='s' />
+<EuiTitle @size='xs'>
   Button as links
 </EuiTitle>
-<EuiSpacer @size="s" />
-<div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter">
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @href="http://www.elastic.co">
+<EuiSpacer @size='s' />
+<div
+  class='euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter'
+>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @href='http://www.elastic.co'>
       Link to elastic.co
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonEmpty @isDisabled={{this.disabledLink}} @href="http://www.elastic.co">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonEmpty
+      @isDisabled={{this.disabledLink}}
+      @href='http://www.elastic.co'
+    >
       Link to elastic.co
     </EuiButtonEmpty>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonIcon @href="http://www.elastic.co" @iconType="link" aria-label="This is a link" />
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonIcon
+      @href='http://www.elastic.co'
+      @iconType='link'
+      aria-label='This is a link'
+    />
   </div>
 </div>
-<EuiSpacer @size="s" />
-<EuiTitle @size="xs">
+<EuiSpacer @size='s' />
+<EuiTitle @size='xs'>
   Button with Icon
 </EuiTitle>
-<EuiSpacer @size="s" />
-<div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter">
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @iconType="pencil">
+<EuiSpacer @size='s' />
+<div
+  class='euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter'
+>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @iconType='pencil'>
       Primary
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton
-      @iconType="pencil"
-      @fill={{true}}
-      @iconSide="right"
-
-    >
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @iconType='pencil' @fill={{true}} @iconSide='right'>
       Primary
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <div class="euiFlexItem euiFlexItem--flexGrowZero">
-      <EuiButton
-        @iconType="pencil"
-        @iconSide="right"
-        @isDisabled={{true}}
-
-      >
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+      <EuiButton @iconType='pencil' @iconSide='right' @isDisabled={{true}}>
         Disabled
       </EuiButton>
     </div>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <div class="euiFlexItem euiFlexItem--flexGrowZero">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <div class='euiFlexItem euiFlexItem--flexGrowZero'>
       <EuiButton
-        @iconType="pencil"
+        @iconType='pencil'
         @fill={{true}}
         @isDisabled={{true}}
-        {{on "click" this.clickedButton}}
+        {{on 'click' this.clickedButton}}
       >
         Disabled
       </EuiButton>
@@ -193,138 +193,190 @@
   </div>
 </div>
 <EuiSpacer />
-<EuiTitle @size="xs">
+<EuiTitle @size='xs'>
   Loading State
 </EuiTitle>
-<EuiSpacer @size="s" />
-<div class="euiFlexGrid euiFlexGrid--responsive euiFlexGrid--fourths euiFlexGrid--gutterLarge">
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @color="primary" @isLoading={{true}}>
+<EuiSpacer @size='s' />
+<div
+  class='euiFlexGrid euiFlexGrid--responsive euiFlexGrid--fourths euiFlexGrid--gutterLarge'
+>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @color='primary' @isLoading={{true}}>
       Loading...
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @color="primary" @isLoading={{true}} @fill={{true}}>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton @color='primary' @isLoading={{true}} @fill={{true}}>
       Loading...
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton @color="primary" @isLoading={{true}} @fill={{true}} @iconSide="right">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton
+      @color='primary'
+      @isLoading={{true}}
+      @fill={{true}}
+      @iconSide='right'
+    >
       Loading...
     </EuiButton>
   </div>
 </div>
 <EuiSpacer />
-<EuiTitle @size="m">
+<EuiTitle @size='m'>
   Button Empty
 </EuiTitle>
-<div class="euiFlexGrid euiFlexGrid--responsive euiFlexGrid--fourths euiFlexGrid--gutterLarge">
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonEmpty @color="primary">
+<div
+  class='euiFlexGrid euiFlexGrid--responsive euiFlexGrid--fourths euiFlexGrid--gutterLarge'
+>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonEmpty @color='primary'>
       Primary
     </EuiButtonEmpty>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonEmpty @color="primary" @isLoading={{false}} @isDisabled={{true}}>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonEmpty @color='primary' @isLoading={{false}} @isDisabled={{true}}>
       Disabled
     </EuiButtonEmpty>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonEmpty @color="primary" @isLoading={{true}} @isDisabled={{false}}>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonEmpty @color='primary' @isLoading={{true}} @isDisabled={{false}}>
       Loading
     </EuiButtonEmpty>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonEmpty @color="primary" @iconSide="right" @isLoading={{true}} @isDisabled={{false}}>
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonEmpty
+      @color='primary'
+      @iconSide='right'
+      @isLoading={{true}}
+      @isDisabled={{false}}
+    >
       Loading Right
     </EuiButtonEmpty>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonEmpty @color="danger">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonEmpty @color='danger'>
       Danger
     </EuiButtonEmpty>
   </div>
 </div>
-<EuiSpacer @size="l" />
-<EuiTitle @size="m">
+<EuiSpacer @size='l' />
+<EuiTitle @size='m'>
   Icon Button
 </EuiTitle>
 <div
-  class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--gutterLarge"
+  class='euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--gutterLarge'
 >
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonIcon @color="primary" @iconType="arrowRight" @iconSize="s" />
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonIcon
+      @color='primary'
+      @iconType='arrowRight'
+      @size='xs'
+      @iconSize='s'
+    />
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonIcon @color="text" @iconType="arrowRight" @iconSize="m" />
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonIcon
+      @color='text'
+      @iconType='arrowRight'
+      @size='s'
+      @iconSize='m'
+    />
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonIcon @color="accent" @iconType="arrowRight" @iconSize="l" />
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonIcon
+      @color='accent'
+      @iconType='arrowRight'
+      @size='m'
+      @iconSize='l'
+    />
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonIcon @color="warning" @iconType="arrowRight" @iconSize="xl" />
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonIcon
+      @color='warning'
+      @iconType='arrowRight'
+      @size='m'
+      @iconSize='xl'
+    />
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonIcon @color="danger" @iconType="arrowRight" @iconSize="xxl" />
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonIcon
+      @color='danger'
+      @iconType='arrowRight'
+      @iconSize='original'
+    />
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonIcon @color="ghost" @iconType="arrowRight" @iconSize="xxl" />
+  <div class='bg-black euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonIcon
+      @color='ghost'
+      @iconType='arrowRight'
+      @size='m'
+      @iconSize='xxl'
+    />
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonIcon @color="subdued" @iconType="arrowRight" @iconSize="xxl" />
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonIcon
+      @color='subdued'
+      @iconType='arrowRight'
+      @size='m'
+      @iconSize='xxl'
+    />
   </div>
 </div>
 <div
-  class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--gutterLarge"
+  class='euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--gutterLarge'
 >
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
     <EuiButtonIcon
-      @color="primary"
-      @iconType="arrowRight"
-      @iconSize="original"
-      {{on "click" this.toggleIconButton}}
+      @color='primary'
+      @iconType='arrowRight'
+      @iconSize='original'
+      {{on 'click' this.toggleIconButton}}
     />
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButtonIcon @color="success" @iconType="arrowRight" @isDisabled={{true}} />
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButtonIcon
+      @color='success'
+      @iconType='arrowRight'
+      @isDisabled={{true}}
+    />
   </div>
 </div>
 <EuiSpacer />
-<EuiTitle @size="m">
+<EuiTitle @size='m'>
   Toggle Buttons
 </EuiTitle>
 <EuiSpacer />
 <EuiCallOut
-  @color="warning"
-  @iconType="alert"
-  @title="Do not add @aria-pressed or @isSelected if you also change the readable text."
+  @color='warning'
+  @iconType='alert'
+  @title='Do not add @aria-pressed or @isSelected if you also change the readable text.'
 />
-<EuiSpacer @size="xs" />
+<EuiSpacer @size='xs' />
 <div
-  class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--alignItemsCenter euiFlexGroup--gutterSmall"
+  class='euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--alignItemsCenter euiFlexGroup--gutterSmall'
 >
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
     <EuiButton
       @isSelected={{this.button1On}}
       @fill={{this.button1On}}
-      @iconType={{if this.button1On "stopFilled" "stop"}}
-      {{on "click" (fn this.toggleButtonState "button1On")}}
+      @iconType={{if this.button1On 'stopFilled' 'stop'}}
+      {{on 'click' (fn this.toggleButtonState 'button1On')}}
     >
       Toggle me
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
-    <EuiButton {{on "click" (fn this.toggleButtonState "button2On")}}>
-      {{if this.button2On "I have changed!" "Click to change text!"}}
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
+    <EuiButton {{on 'click' (fn this.toggleButtonState 'button2On')}}>
+      {{if this.button2On 'I have changed!' 'Click to change text!'}}
     </EuiButton>
   </div>
-  <div class="euiFlexItem euiFlexItem--flexGrowZero">
+  <div class='euiFlexItem euiFlexItem--flexGrowZero'>
     <EuiButtonIcon
-      @title="Autosave"
-      @iconType="save"
+      @title='Autosave'
+      @iconType='save'
       aria-pressed={{this.button3On}}
-      @color={{if this.button3On "primary" "subdued"}}
-      {{on "click" (fn this.toggleButtonState "button3On")}}
+      @color={{if this.button3On 'primary' 'subdued'}}
+      {{on 'click' (fn this.toggleButtonState 'button3On')}}
     />
   </div>
 </div>

package/docs/navigation/button.md

@@ -1 +1 @@
-# Button
+<EuiPageHeader @pageTitle="Button"/>

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

@@ -1,24 +1,28 @@
-# Demo
+---
+order: 1
+---
+# Collapsible nav
 
 ```hbs template
-<EuiTitle @size="s">
+<EuiTitle @size='s'>
   Collapsible Nav
 </EuiTitle>
 <EuiCollapsibleNav
   @isOpen={{this.collNavIsOpen}}
   @onClose={{this.closeCollapsibleNav}}
   @showCloseButton={{true}}
-  @navIsDocked={{this.navIsDocked}}
+  @size={{240}}
+  @isDocked={{this.navIsDocked}}
 >
-  <:button>
-    <EuiButton {{on "click" this.openCollapsibleNav}}>
-      Open Collapsible Nav
+  <:button as |handlers|>
+    <EuiButton {{on 'click' this.openCollapsibleNav}} {{handlers}}>
+      Toggle nav
     </EuiButton>
   </:button>
   <:content>
     <EuiCollapsibleNavGroup
-      @iconType="alert"
-      @background="dark"
+      @iconType='alert'
+      @background='dark'
       @initialIsOpen={{false}}
       @isCollapsible={{true}}
     >
@@ -30,8 +34,8 @@
       </:content>
     </EuiCollapsibleNavGroup>
     <EuiCollapsibleNavGroup
-      @iconType="check"
-      @background="light"
+      @iconType='check'
+      @background='light'
       @initialIsOpen={{false}}
       @isCollapsible={{true}}
     >
@@ -47,49 +51,22 @@
         </EuiButtonEmpty>
       </:content>
     </EuiCollapsibleNavGroup>
-    <EuiCollapsibleNavGroup @iconType="alert" @initialIsOpen={{true}} @isCollapsible={{true}}>
+    <EuiCollapsibleNavGroup
+      @iconType='alert'
+      @initialIsOpen={{true}}
+      @isCollapsible={{true}}
+    >
       <:title>
         Submenu 3
       </:title>
       <:content>
-        <EuiButton {{on "click" this.toggleDockedNav}}>
-          {{unless this.navIsDocked "Dock it!" "Undock it!"}}
+        <EuiButton {{on 'click' this.toggleDockedNav}}>
+          {{unless this.navIsDocked 'Dock it!' 'Undock it!'}}
         </EuiButton>
       </:content>
     </EuiCollapsibleNavGroup>
   </:content>
 </EuiCollapsibleNav>
-<EuiSpacer />
-<EuiTitle @size="s">
-  Collapsible Nav Group
-</EuiTitle>
-<EuiSpacer />
-<EuiCollapsibleNavGroup>
-  <:content>
-    BASIC WITH NOTHING
-  </:content>
-</EuiCollapsibleNavGroup>
-<EuiCollapsibleNavGroup @iconType="alert" @background="light">
-  <:title>
-    Hello My friends!
-  </:title>
-  <:content>
-    This is not collapsible! But the bottom one is!
-  </:content>
-</EuiCollapsibleNavGroup>
-<EuiCollapsibleNavGroup
-  @iconType="alert"
-  @background="dark"
-  @initialIsOpen={{false}}
-  @isCollapsible={{true}}
->
-  <:title>
-    Click me!!
-  </:title>
-  <:content>
-    This is the collapsible content!!!
-  </:content>
-</EuiCollapsibleNavGroup>
 ```
 
 ```js component