beta badges on panels

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public changes since 0.0.50
+- Added `textStyle="reverse"` prop to `EuiDescriptionList` as well as a class (`.eui-definitionListReverse`) for `dl`'s within `EuiText` ([#882](https://github.com/elastic/eui/pull/882))
+- Added `inspect` icon ([#886](https://github.com/elastic/eui/pull/886))
+- Added `layout` prop to `EuiCard` ([#885](https://github.com/elastic/eui/pull/885))
 
 ## [`0.0.50`](https://github.com/elastic/eui/tree/v0.0.50)
 

src-docs/src/views/card/card_example.js

@@ -9,6 +9,7 @@ import {
 import {
   EuiCode,
   EuiCard,
+  EuiCallOut,
 } from '../../../../src/components';
 
 import Card from './card';
@@ -27,6 +28,10 @@ import CardBeta from './card_beta';
 const cardBetaSource = require('!!raw-loader!./card_beta');
 const cardBetaHtml = renderToHtml(CardBeta);
 
+import CardLayout from './card_layout';
+const cardLayoutSource = require('!!raw-loader!./card_layout');
+const cardLayoutHtml = renderToHtml(CardLayout);
+
 export const CardExample = {
   title: 'Card',
   sections: [{
@@ -54,6 +59,30 @@ export const CardExample = {
     props: { EuiCard },
     demo: <Card />,
   },
+  {
+    title: 'Layout',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: cardLayoutSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: cardLayoutHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          Most of the time, cards should read from top to bottom (vertical). However, in some cases, you may
+          want the icon to be to the left of the content. In this case, add the prop <EuiCode>layout=&quot;horizontal&quot;</EuiCode>.
+        </p>
+        <EuiCallOut
+          color="danger"
+          title={<span>Horizontal layouts <strong>do not</strong> work with images, footers or <EuiCode>textAlign</EuiCode>. Therefore, these properties will be ignored.</span>}
+        />
+      </div>
+    ),
+    components: { EuiCard },
+    demo: <CardLayout />,
+  },
   {
     title: 'Images',
     source: [{
@@ -69,9 +98,9 @@ export const CardExample = {
           Images can be added in place of, or in conjuction with, icons.
           Just pass a url into the <EuiCode>image</EuiCode> prop and it will expand to to edges of the card.
         </p>
-        <p>
-          Make sure that all images are the <strong>same proportions</strong> when used in a singular row.
-        </p>
+        <EuiCallOut
+          title={<span>Make sure that all images are the <strong>same proportions</strong> when used in a singular row.</span>}
+        />
       </div>
     ),
     components: { EuiCard },

src-docs/src/views/card/card_layout.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {
+  EuiCard,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiFlexGroup gutterSize="l">
+    <EuiFlexItem>
+      <EuiCard
+        layout="horizontal"
+        icon={<EuiIcon size="xxl" type={`logoBeats`} />}
+        title={`Elastic Beats`}
+        description="Example of a card's description. Stick to one or two sentences."
+        onClick={() => window.alert('Card clicked')}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCard
+        layout="horizontal"
+        icon={<EuiIcon size="xxl" type={`logoCloud`} />}
+        title={`Elastic Cloud`}
+        description="Example of a card's description. Stick to one or two sentences."
+        onClick={() => window.alert('Card clicked')}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiCard
+        layout="horizontal"
+        title={`No icon example`}
+        description="Example of a card's description. Stick to one or two sentences."
+        onClick={() => window.alert('Card clicked')}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);

src-docs/src/views/description_list/description_list_example.js

@@ -27,6 +27,10 @@ import DescriptionListInline from './description_list_inline';
 const descriptionListInlineSource = require('!!raw-loader!./description_list_inline');
 const descriptionListInlineHtml = renderToHtml(DescriptionListInline);
 
+import DescriptionListReverse from './description_list_reverse';
+const descriptionListReverseSource = require('!!raw-loader!./description_list_reverse');
+const descriptionListReverseHtml = renderToHtml(DescriptionListReverse);
+
 export const DescriptionListExample = {
   title: 'Description List',
   sections: [{
@@ -48,6 +52,28 @@ export const DescriptionListExample = {
     ),
     props: { EuiDescriptionList },
     demo: <DescriptionList />,
+  }, {
+    title: 'Reverse style',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: descriptionListReverseSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: descriptionListReverseHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          Setting the <EuiCode>textStyle</EuiCode> prop to <EuiCode>reverse</EuiCode> will reverse
+          the text styles of the <EuiCode>title</EuiCode> and <EuiCode>description</EuiCode> elements
+          so that the description is more prominent. This works best for key/value type content.
+        </p>
+        <p>
+          Adding this property to the <EuiCode>inline</EuiCode> type will not change anything.
+        </p>
+      </div>
+    ),
+    demo: <DescriptionListReverse />,
   }, {
     title: 'As columns',
     source: [{

src-docs/src/views/description_list/description_list_reverse.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {
+  EuiDescriptionList,
+} from '../../../../src/components';
+
+const favoriteVideoGame = [
+  {
+    title: 'Name',
+    description: 'The Elder Scrolls: Morrowind',
+  },
+  {
+    title: 'Game style',
+    description: 'Open-world, fantasy, action role-playing',
+  },
+  {
+    title: 'Release date',
+    description: '2002',
+  },
+];
+
+export default () => (
+  <EuiDescriptionList textStyle="reverse" listItems={favoriteVideoGame} />
+);

src-docs/src/views/icon/icons.js

@@ -72,6 +72,7 @@ const iconTypes = [
   'indexMapping',
   'indexOpen',
   'indexSettings',
+  'inspect',
   'invert',
   'inputOutput',
   'kqlField',

src-docs/src/views/panel/panel_badge.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+const badges = [null, 'Beta', 'Lab'];
+
+const panelNodes = badges.map(function (item, index) {
+  return (
+    <EuiFlexItem key={index}>
+      <EuiPanel
+        betaBadgeLabel={badges[index]}
+        betaBadgeTooltipContent={badges[index] ? "This module is not GA. Please help us by reporting any bugs." : undefined}
+        onClick={() => window.alert('Card clicked')}
+      >
+        I am some panel content
+      </EuiPanel>
+    </EuiFlexItem>
+  );
+});
+
+export default () => (
+  <EuiFlexGroup gutterSize="l">
+    {panelNodes}
+  </EuiFlexGroup>
+);

src-docs/src/views/panel/panel_example.js

@@ -21,6 +21,10 @@ import PanelHover from './panel_hover';
 const panelHoverSource = require('!!raw-loader!./panel_hover');
 const panelHoverHtml = renderToHtml(PanelHover);
 
+import PanelBadge from './panel_badge';
+const panelBadgeSource = require('!!raw-loader!./panel_badge');
+const panelBadgeHtml = renderToHtml(PanelBadge);
+
 export const PanelExample = {
   title: 'Panel',
   sections: [{
@@ -56,5 +60,21 @@ export const PanelExample = {
       </p>
     ),
     demo: <PanelHover />,
+  }, {
+    title: 'Panel beta badges',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: panelBadgeSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: panelBadgeHtml,
+    }],
+    text: (
+      <p>
+        Similar to <Link to="/display/card">EuiCard</Link> panels can also accept
+        an <Link to="/display/badge">EuiBetaBadge</Link>.
+      </p>
+    ),
+    demo: <PanelBadge />,
   }],
 };

src-docs/src/views/text/text.js

@@ -124,6 +124,29 @@ export default () => (
           The game that made me drop out of college.
         </dd>
       </dl>
+
+      <EuiHorizontalRule />
+
+      <dl className="eui-definitionListReverse">
+        <dt>
+          Name
+        </dt>
+        <dd>
+          The Elder Scrolls: Morrowind
+        </dd>
+        <dt>
+          Game style
+        </dt>
+        <dd>
+          Open-world, fantasy, action role-playing
+        </dd>
+        <dt>
+          Release date
+        </dt>
+        <dd>
+          2002
+        </dd>
+      </dl>
     </EuiText>
   </div>
 );

src/components/badge/beta_badge/_index.scss

@@ -1 +1,2 @@
+@import 'mixins';
 @import 'beta_badge';

src/components/badge/beta_badge/_mixins.scss

@@ -0,0 +1,30 @@
+
+/**
+ * 1. Extend beta badges to at least 40% of the card's width
+ */
+
+@mixin hasBetaBadge($selector, $spacing: $euiSize) {
+  &.#{$selector}--hasBetaBadge {
+    position: relative;
+
+    .#{$selector}__betaBadgeWrapper {
+      position: absolute;
+      top: $euiSizeL/-2;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 3; // get above abs positioned image
+      min-width: 40%; /* 1 */
+      max-width: calc(100% - #{$spacing*2});
+
+      .euiToolTipAnchor,
+      .#{$selector}__betaBadge {
+        width: 100%; /* 1 */
+      }
+
+      .#{$selector}__betaBadge {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}

src/components/card/__snapshots__/card.test.js.snap

@@ -1,8 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiCard horizontal 1`] = `
+<div
+  class="euiCard euiCard--centerAligned euiCard--horizontal"
+>
+  <span
+    class="euiCard__content"
+  >
+    <span
+      class="euiTitle euiTitle--medium euiCard__title"
+    >
+      Card title
+    </span>
+    <div
+      class="euiText euiText--small euiCard__description"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </span>
+</div>
+`;
+
 exports[`EuiCard icon 1`] = `
 <div
-  class="euiCard euiCard--centerAligned"
+  class="euiCard euiCard--centerAligned euiCard--hasIcon"
 >
   <span
     class="euiCard__top"