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

package/docs/display/callout-demo/demo1.md

@@ -1,95 +1,43 @@
-# Demo
+---
+order: 1
+---
 
-```hbs template
-<EuiText size="xs">
-  <:body>
-    <p>
-      Default Small callout H3
-    </p>
-  </:body>
-</EuiText>
-<EuiCallOut
-  @iconType="searchProfilerApp"
-  @title="Good status"
-  @heading="h3"
-  @color="primary"
-  @size="s"
->
-  <:body>
-    <p>
-      All systems check, you are good to go. Good luck!
-    </p>
-  </:body>
-</EuiCallOut>
-<EuiSpacer />
-<EuiText size="xs">
-  <:body>
-    <p>
-      Warning Medium callout H3
-    </p>
-  </:body>
-</EuiText>
-<EuiCallOut @iconType="alert" @title="INCOMING!" @heading="h3" @color="warning">
-  <:body>
-    <p>
-      You have an homing rocket coming your way! Take evasive action!
-    </p>
-  </:body>
-</EuiCallOut>
-<EuiSpacer />
-<EuiText size="xs">
+# Info
+
+<EuiText>
   <p>
-    Danger Medium callout H1
+    Use <strong>EuiCallOut</strong> to communicate general information to the user.
   </p>
 </EuiText>
+
+```hbs template
 <EuiCallOut
-  @iconType="wrench"
-  @title="Watch out! Danger close!"
-  @heading="h1"
-  @color="danger"
-  @size="m"
+  @iconType='search'
+  @title="Check it out, here's a really long title that will wrap within a narrower browser"
+  @color='primary'
 >
   <:body>
     <p>
-      You have been hit! Seek the repair ship immediately!
+      Here&rsquo;s some stuff that you need to know. We can make this text
+      really long so that, when viewed within a browser that&rsquo;s fairly
+      narrow, it will wrap, too.
     </p>
-  </:body>
-</EuiCallOut>
-<EuiSpacer />
-<EuiText size="xs">
-  <p>
-    Success Medium callout H3
-  </p>
-</EuiText>
-<EuiCallOut
-  @iconType="bullseye"
-  @title="Great, you're ready for deployment!"
-  @heading="h3"
-  @color="success"
-  @size="m"
->
-  <:body>
     <p>
-      Your ship has been repaired, you are good to launch again. Next time evade those missiles!
+      And some other stuff on another line, just for kicks.
+
     </p>
   </:body>
 </EuiCallOut>
-<EuiSpacer />
-<EuiText size="xs">
-  <p>
-    Default Callout without block
-  </p>
-</EuiText>
-<EuiCallOut @iconType="grid" @title="This is a Callout without block!" @size="m" />
-<EuiSpacer />
-<EuiText size="xs">
-  <p>
-    Default Callout H3 without block or icon
-  </p>
-</EuiText>
-<EuiCallOut @heading="h3" @size="m" @iconType="grid">
-  <:title>
-    You can also use block named param for title
-  </:title>
-</EuiCallOut>
+<EuiSpacer @size='m' />
+<EuiCallOut
+  @iconType='lensApp'
+  @title='Callouts can exist as just a title. Simply omit the child content.'
+  @color='primary'
+/>
+<EuiSpacer @size='m' />
+<EuiCallOut
+  @size='s'
+  @title='This is a small callout for more unintrusive but constant messages.'
+  @iconType='pin'
+/>
 ```

package/docs/display/callout-demo/demo2.md

@@ -0,0 +1,28 @@
+---
+order: 2
+---
+
+# Success
+
+<EuiText>
+  <p>
+    Use this callout to notify the user of an action that succesfully completed.
+    Use success callouts sparingly—callouts are typically used for things that
+    are broken rather than things that succeed.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiCallOut
+  @size='s'
+  @title='This is a small callout for more unintrusive but constant messages.'
+  @iconType='pin'
+  @color='success'
+>
+  <:body>
+    <p>
+      I have no news. Which is good!
+    </p>
+  </:body>
+</EuiCallOut>
+```

package/docs/display/callout-demo/demo3.md

@@ -0,0 +1,29 @@
+---
+order: 3
+---
+
+# Warning
+
+<EuiText>
+  <p>
+    Use this callout to warn the user against decisions they might regret.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiCallOut
+  @size='s'
+  @title='Proceed with caution!'
+  @iconType='pin'
+  @color='warning'
+>
+  <:body>
+    <p>
+      Here be dragons. Don’t wanna mess with no dragons.
+    </p>
+    <EuiButton @color='warning'>
+      Link button
+    </EuiButton>
+  </:body>
+</EuiCallOut>
+```

package/docs/display/callout-demo/demo4.md

@@ -0,0 +1,26 @@
+---
+order: 4
+---
+
+# Danger
+
+<EuiText>
+  <p>
+    Use this callout to let the user know that something went wrong.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiCallOut
+  @size='s'
+  @title='Sorry, there was an error'
+  @iconType='pin'
+  @color='danger'
+>
+  <:body>
+    <p>
+      Now you have to fix it, but maybe this link can help.
+    </p>
+  </:body>
+</EuiCallOut>
+```

package/docs/display/callout.md

@@ -1 +1,15 @@
-# Callout
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Callout
+      </h1>
+    </EuiTitle>
+<EuiSpacer />
+  <EuiText>
+  <p>
+   <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>
+
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/display/card/basic-card-demo/demo1.md

@@ -1,330 +1,36 @@
-# Demo
+# 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>
+</EuiText>
 
 ```hbs template
-<div class="euiFlexGrid euiFlexGrid--halves euiFlexGrid--responsive euiFlexGrid--gutterLarge">
-  <div class="euiFlexItem">
-    <EuiText @size="s">
-      Clickable with href
-    </EuiText>
-    <EuiCard
-      @title="Darth Vader"
-      @titleSize="s"
-      @titleElement="h3"
-      @description="Dark Lord of the Sith"
-      @layout="vertical"
-      @paddingSize="l"
-      @href="https://starwars.fandom.com/wiki/Anakin_Skywalker"
-      @image="https://1.bp.blogspot.com/-nMzqcqU8SwE/W4l4yJdZUVI/AAAAAAAAALQ/qUNHiJg-OwEccNcDzOMLdRhEOvn7sgI2gCLcBGAs/s1600/Darth%2BVader%2B-%2BStar%2BWars%2B-%2BBlack%2BWallpaper%2BBackground.jpg"
-    >
-      <:body>
-        <EuiText @size="xs" @textAlign="left" @grow={{true}}>
-          <p>
-            Darth Vader's true name is Anakin Skywalker.
-            <br />
-            The One chosen by the force itself to bring balance to the galaxy.
-                The potentially most powerful force user to ever come to existence,
-                only to be seduced by the dark side; bringing chaos and destruction across the galaxy.
-          </p>
-        </EuiText>
-      </:body>
-      <:footer>
-        <EuiBadgeGroup @gutterSize="m">
-          <EuiBadge>
-            Dark Side
-          </EuiBadge>
-          <EuiBadge>
-            Sith Lord
-          </EuiBadge>
-          <EuiBadge>
-            Force
-          </EuiBadge>
-          <EuiBadge>
-            Empire
-          </EuiBadge>
-        </EuiBadgeGroup>
-      </:footer>
-    </EuiCard>
-  </div>
-  <div class="euiFlexItem">
-    <EuiText @size="s">
-      Basic
-    </EuiText>
-    <EuiCard
-      @title="Darth Sidious"
-      @titleSize="s"
-      @titleElement="h3"
-      @description="Galactic Emperor"
-      @layout="vertical"
-      @paddingSize="l"
-      @image="https://i.pinimg.com/originals/ab/eb/f4/abebf495862d9b822d0b368879d1ea00.jpg"
-    >
-      <:body>
-        <EuiText @size="xs" @textAlign="left" @grow={{true}}>
-          <p>
-            Sidious's real name is Sheev Palpatine. He was a former member of the Galactic Senat annd secretly the Dark Lord of the Sith.
-                After the Jedi genocide, he became the self-titled Emperor of the Galaxy.
-            <br />
-            "There is only one plan—one great design which shall govern the universe—mine."
-          </p>
-        </EuiText>
-      </:body>
-      <:footer>
-        <EuiBadgeGroup>
-          <EuiBadge>
-            Dark Side
-          </EuiBadge>
-          <EuiBadge>
-            Sith Lord
-          </EuiBadge>
-          <EuiBadge>
-            Force
-          </EuiBadge>
-          <EuiBadge>
-            Empire
-          </EuiBadge>
-        </EuiBadgeGroup>
-      </:footer>
-    </EuiCard>
-  </div>
-  <div class="euiFlexItem">
-    <EuiText @size="s">
-      Disabled
-    </EuiText>
-    <EuiCard
-      @title="Darth Nihilus"
-      @titleSize="s"
-      @titleElement="h3"
-      @description="Lord of Hunger"
-      @layout="vertical"
-      @isDisabled={{true}}
-      @paddingSize="l"
-      @href="https://starwars.fandom.com/"
-      @image="https://cdn.hipwallpaper.com/i/29/87/pyJ0Pi.jpg"
-    >
-      <:body>
-        <EuiText @size="xs" @textAlign="left" @grow={{true}}>
-          <p>
-            Considered to be an actual wound in the force, Nihilus experiences a never-ending hunger
-            <br />
-            for force energy. Able to strip entire planets of their life-force energy for himself,
-            <br />
-            He became to be considered as arguably one of the most powerful Sith Lords to have ever existed.
-          </p>
-        </EuiText>
-      </:body>
-      <:footer>
-        <EuiBadgeGroup>
-          <EuiBadge>
-            Sith Lord
-          </EuiBadge>
-          <EuiBadge>
-            Old Republic
-          </EuiBadge>
-          <EuiBadge>
-            Jedi Civil War
-          </EuiBadge>
-        </EuiBadgeGroup>
-      </:footer>
-    </EuiCard>
-  </div>
-  <div class="euiFlexItem">
-    <EuiText @size="s">
-      Beta Badge
-    </EuiText>
-    <EuiSpacer @size="m" />
-    <EuiCard
-      @title="Millenium Falcon"
-      @titleSize="s"
-      @titleElement="h3"
-      @description="From Smuggler to Warship"
-      @layout="vertical"
-      @paddingSize="l"
-      @betaBadgeLabel="Alpha"
-      @image="https://cdn.wallpapersafari.com/8/67/A3xeaM.jpg"
-    >
-      <:body>
-        <EuiText @size="xs" @textAlign="left" @grow={{true}}>
-          <p>
-            By far the most iconic ship in the galaxy.
-            <br />
-            Commandeered by the its trusty crew of smugglers turned warriors: Han Solo and Chewbacca.
-          </p>
-        </EuiText>
-      </:body>
-      <:footer>
-        <div class="euiFlexGroup euiFlexGroup--justifyContentSpaceAround">
-          <EuiButton class="euiFlexItem euiFlexItem--flexGrowZero" {{on "click" this.punchIt}} @fill={{true}}>
-              Try it!
-          </EuiButton>
-        </div>
-      </:footer>
-    </EuiCard>
-  </div>
-  <div class="euiFlexItem">
-    <EuiText @size="s">
-      Plain Card
-    </EuiText>
-    <EuiSpacer @size="m" />
-    <EuiCard
-      @title="X Wing"
-      @titleSize="s"
-      @titleElement="h3"
-      @description="Republic Signature"
-      @layout="vertical"
-      @paddingSize="l"
-      @display="plain"
-      @image="https://i.pinimg.com/originals/09/60/ab/0960ab6bb8a217da7362d88ff7b3a0af.jpg"
-    >
-      <:body>
-        <EuiText @size="xs" @textAlign="left" @grow={{true}}>
-          <p>
-            The fighter of the republic.
-            <br />
-            Maneuvered by the galaxy's most talented pilots,
-                this is the primary starfighter of the Rebellion and New Republic.
-          </p>
-        </EuiText>
-      </:body>
-      <:footer>
-        <EuiBadgeGroup>
-          <EuiBadge>
-            Republic
-          </EuiBadge>
-          <EuiBadge>
-            xwing
-          </EuiBadge>
-          <EuiBadge>
-            starfighter
-          </EuiBadge>
-        </EuiBadgeGroup>
-      </:footer>
-    </EuiCard>
-  </div>
-  <div class="euiFlexItem">
-    <EuiText @size="s">
-      Plain Card with Beta Badge and OnClick
-    </EuiText>
-    <EuiSpacer @size="m" />
-    <EuiCard
-      @title="Slave I"
-      @titleSize="s"
-      @titleElement="h3"
-      @description="Fierce"
-      @layout="vertical"
-      @paddingSize="l"
-      @display="plain"
-      @betaBadgeLabel="Beta"
-      @image="https://i.imgur.com/LWzoQ0S.png"
-      @onClick={{this.punchIt}}
-    >
-      <:body>
-        <EuiText @size="xs" @textAlign="left" @grow={{true}}>
-          <p>
-            The powerhouse of the most feared bounty hunter across the galaxy: Boba Fett.
-            <br />
-            The Slave I is slave to none but the bounty hunter himself.
-                If you see it coming, you know he is out for you, and there is no stopping him.
-          </p>
-        </EuiText>
-      </:body>
-      <:footer>
-        <EuiBadgeGroup>
-          <EuiBadge>
-            Mandalore
-          </EuiBadge>
-          <EuiBadge>
-            Fett
-          </EuiBadge>
-          <EuiBadge>
-            bounty
-          </EuiBadge>
-        </EuiBadgeGroup>
-      </:footer>
-    </EuiCard>
-  </div>
-</div>
-<EuiSpacer @size="l" />
-<EuiTitle @size="m">
-  Warring Factions
-</EuiTitle>
-<EuiSpacer @size="s" />
-<div
-  class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--gutterLarge"
->
-  <div class="euiFlexItem">
-    <EuiText @size="s">
-      Card with horizontal Layout and BetaBadge
-    </EuiText>
-    <EuiSpacer @size="m" />
-    <EuiCard
-      @layout="horizontal"
-      @icon="https://vignette.wikia.nocookie.net/starwarsofthecaribbean/images/0/0d/NR_Seal_red.svg.png/revision/latest/scale-to-width-down/340?cb=20171216141737"
-      @iconSize="xxl"
-      @title="Galatic Republic"
-      @titleSize="s"
-      @titleElement="h3"
-      @description="The Rebellion"
-      @betaBadgeLabel="A New Hope"
-    >
-      <EuiText @size="xs" @textAlign="left" @grow={{true}}>
-        <p>
-          Firstly known as the Rebellion, was a group of freedom fighters
-              that overthrew the Galactic Empire, and established the New Republic.
-        </p>
-      </EuiText>
-    </EuiCard>
-  </div>
-  <div class="euiFlexItem">
-    <EuiText @size="s">
-      Plain Card horizontal layout
-    </EuiText>
-    <EuiSpacer @size="m" />
-    <EuiCard
-      @layout="horizontal"
-      @display="plain"
-      @icon="https://i.pinimg.com/originals/10/54/a4/1054a48bf3914f0fae0f974e2e021af3.png"
-      @iconSize="xxl"
-      @title="Galatic Empire"
-      @titleSize="s"
-      @titleElement="h3"
-      @description="Reign of the Sith"
-      @href="https://starwars.fandom.com/wiki/Galactic_Empire"
-    >
-      <EuiText @size="xs" @textAlign="left" @grow={{true}}>
-        <p>
-          The Galactic Empire was the reign of Darth Sidious, the Dark Lord of the Sith.
-        </p>
-        <p>
-          Click on the card for more info!
-        </p>
-      </EuiText>
-    </EuiCard>
-  </div>
-</div>
+<EuiFlexGroup @gutterSize='l'>
+  {{#each this.icons as |icon|}}
+    <EuiFlexItem>
+      <EuiCard
+        @onClick={{this.click}}
+        @icon={{concat 'logo' icon}}
+        @title={{concat 'Elastic ' icon}}
+        @iconSize='xxl'
+        @description="Example of a card's description. Stick to one or two sentences."
+      />
+    </EuiFlexItem>
+  {{/each}}
+</EuiFlexGroup>
 ```
 
 ```js component
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class DemoCardComponent extends Component {
-  @tracked cardOneSelected = false;
-  @tracked cardTwoSelected = false;
-  @tracked cardThreeSelected = false;
-  @tracked cardFourSelected = false;
-
-  @tracked weaponLocked = true;
-
-  @action
-  punchIt() {
-    alert('You punched into hyperspacer!');
-  }
+  @tracked icons = ['Beats', 'Cloud', 'Logging', 'Kibana'];
 
   @action
-  selectToggle(card, event) {
-    this[card] = !this[card];
-    event.stopPropagation();
+  click() {
+    alert('clicked!');
   }
 }
 ```

package/docs/display/card/basic-card.md

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

package/docs/display/card/beta-badge-demo/demo1.md

@@ -0,0 +1,47 @@
+# Beta Badge
+
+<EuiText>
+<p>Footers can contain any number of elements and will always align to the bottom of the card. However, if you supply a footer containing a <strong>EuiButton</strong> you <strong>must not</strong> also give it an <EuiCode @language="text">onClick</EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiFlexGroup @gutterSize='l'>
+
+  <EuiFlexItem>
+    <EuiCard
+      @icon='dashboardApp'
+      @iconSize='xxl'
+      @title='Dashboard'
+      @description='Example of a short card description.'
+    />
+  </EuiFlexItem>
+
+  <EuiFlexItem>
+    <EuiCard
+      @betaBadgeProps={{hash
+        label='Beta'
+        tooltipContent='This feature requires a Basic License'
+      }}
+      @icon='monitoringApp'
+      @iconSize='xxl'
+      @title='Monitoring'
+      @description='Example of a longer card description. See how the footers stay lined up.'
+    />
+  </EuiFlexItem>
+
+  <EuiFlexItem>
+    <EuiCard
+      @betaBadgeProps={{hash
+        label='Basic'
+        tooltipContent='This feature requires a Basic License'
+      }}
+      @isDisabled={{true}}
+      @icon='lensApp'
+      @iconSize='xxl'
+      @title='Lens'
+      @description='Disabled cards can have active links using EuiBetaBadge.'
+    />
+  </EuiFlexItem>
+
+</EuiFlexGroup>
+```

package/docs/display/card/beta-badge.md

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