Added beta badges to cards and keypad menu items

src-docs/src/views/badge/badge_example.js

@@ -9,6 +9,8 @@ import {
 import {
   EuiBadge,
   EuiCode,
+  EuiBetaBadge,
+  EuiLink,
 } from '../../../../src/components';
 
 import Badge from './badge';
@@ -23,6 +25,10 @@ import BadgeButton from './badge_button';
 const badgeButtonSource = require('!!raw-loader!./badge_button');
 const badgeButtonHtml = renderToHtml(BadgeButton);
 
+import BetaBadge from './beta_badge';
+const betaBadgeSource = require('!!raw-loader!./beta_badge');
+const betaBadgeHtml = renderToHtml(BetaBadge);
+
 export const BadgeExample = {
   title: 'Badge',
   sections: [{
@@ -76,5 +82,29 @@ export const BadgeExample = {
       </p>
     ),
     demo: <BadgeButton />,
+  }, {
+    title: 'Beta badge type',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: betaBadgeSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: betaBadgeHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          The <EuiCode>EuiBetaBadge</EuiCode> was created specifically to call out
+          modules that are not in GA. Generally the labels used are &quot;Beta&quot; or &quot;Lab&quot;.
+          They require an extra <EuiCode>description</EuiCode> that will be presented in a tooltip.
+        </p>
+        <p>
+          They can also be used in conjunction
+          with <EuiLink href="/#/display/card">EuiCards</EuiLink> and EuiKeyPadMenuItems.
+        </p>
+      </div>
+    ),
+    props: { EuiBetaBadge },
+    demo: <BetaBadge />,
   }],
 };

src-docs/src/views/badge/beta_badge.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import {
+  EuiBetaBadge,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiBetaBadge label="Beta" description="This module is not GA. Please help us by reporting any bugs." />
+    &emsp;
+    <EuiBetaBadge label="Lab" description="This module is not GA. Please help us by reporting any bugs." />
+  </div>
+);

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

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  EuiCard,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+const icons = ['dashboard', 'monitoring', 'watches'];
+const badges = [null, 'Beta', 'Lab'];
+
+const cardNodes = icons.map(function (item, index) {
+  return (
+    <EuiFlexItem key={index}>
+      <EuiCard
+        icon={<EuiIcon size="xxl" type={`${item}App`} />}
+        title={`Kibana ${item}`}
+        description="Example of a card's description. Stick to one or two sentences."
+        betaLabel={badges[index]}
+        betaDescription={badges[index] ? "This module is not GA. Please help us by reporting any bugs." : undefined}
+        onClick={() => window.alert('Card clicked')}
+      />
+    </EuiFlexItem>
+  );
+});
+
+export default () => (
+  <EuiFlexGroup gutterSize="l">
+    {cardNodes}
+  </EuiFlexGroup>
+);

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

@@ -23,6 +23,10 @@ import CardFooter from './card_footer';
 const cardFooterSource = require('!!raw-loader!./card_footer');
 const cardFooterHtml = renderToHtml(CardFooter);
 
+import CardBeta from './card_beta';
+const cardBetaSource = require('!!raw-loader!./card_beta');
+const cardBetaHtml = renderToHtml(CardBeta);
+
 export const CardExample = {
   title: 'Card',
   sections: [{
@@ -91,5 +95,24 @@ export const CardExample = {
     ),
     components: { EuiCard },
     demo: <CardFooter />,
+  },
+  {
+    title: 'Beta badge',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: cardBetaSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: cardBetaHtml,
+    }],
+    text: (
+      <p>
+        If the card links to or references a module that is not GA (beta, lab, etc),
+        you can add a <EuiCode>betaLabel</EuiCode> and <EuiCode>betaDescription</EuiCode> to
+        the card and it will properly create and position an <EuiCode>EuiBetaBadge</EuiCode>.
+      </p>
+    ),
+    components: { EuiCard },
+    demo: <CardBeta />,
   }],
 };

src-docs/src/views/key_pad_menu/key_pad_beta.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {
+  EuiIcon,
+  EuiKeyPadMenu,
+  EuiKeyPadMenuItem,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiKeyPadMenu>
+    <EuiKeyPadMenuItem
+      label="Dashboard"
+      href="#"
+    >
+      <EuiIcon type="dashboardApp" size="l" />
+    </EuiKeyPadMenuItem>
+
+    <EuiKeyPadMenuItem
+      label="Dashboard"
+      href="#"
+      betaLabel="Beta"
+      betaDescription="This module is not GA. Please help us by reporting any bugs."
+    >
+      <EuiIcon type="dashboardApp" size="l" />
+    </EuiKeyPadMenuItem>
+
+    <EuiKeyPadMenuItem
+      label="Dashboard"
+      href="#"
+      betaLabel="Lab"
+      betaDescription="This module is not GA. Please help us by reporting any bugs."
+    >
+      <EuiIcon type="dashboardApp" size="l" />
+    </EuiKeyPadMenuItem>
+  </EuiKeyPadMenu>
+);

src-docs/src/views/key_pad_menu/key_pad_menu_example.js

@@ -20,6 +20,10 @@ import KeyPadMenuItemButton from './key_pad_menu_item_button';
 const keyPadMenuItemButtonSource = require('!!raw-loader!./key_pad_menu_item_button');
 const keyPadMenuItemButtonHtml = renderToHtml(KeyPadMenuItemButton);
 
+import KeyPadBeta from './key_pad_beta';
+const keyPadBetaSource = require('!!raw-loader!./key_pad_beta');
+const keyPadBetaHtml = renderToHtml(KeyPadBeta);
+
 export const KeyPadMenuExample = {
   title: 'Key Pad Menu',
   sections: [{
@@ -54,5 +58,22 @@ export const KeyPadMenuExample = {
       </p>
     ),
     demo: <KeyPadMenuItemButton />,
+  }, {
+    title: 'Beta item',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: keyPadBetaSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: keyPadBetaHtml,
+    }],
+    text: (
+      <p>
+        If the item links to a module that is not GA (beta, lab, etc),
+        you can add a <EuiCode>betaLabel</EuiCode> and <EuiCode>betaDescription</EuiCode> to
+        the card and it will properly create and position an <EuiCode>EuiBetaBadge</EuiCode>.
+      </p>
+    ),
+    demo: <KeyPadBeta />,
   }],
 };

src/components/badge/_index.scss

@@ -1 +1,2 @@
 @import 'badge';
+@import 'beta_badge/index';

src/components/badge/beta_badge/__snapshots__/beta_badge.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiBetaBadge is rendered 1`] = `
+<span
+  aria-label="aria-label"
+  class="euiBetaBadge testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  Beta
+</span>
+`;

src/components/badge/beta_badge/_beta_badge.scss

@@ -0,0 +1,19 @@
+.euiBetaBadge {
+  display: inline-block;
+  padding: 0 $euiSizeL;
+  border-radius: $euiSizeL;
+  background-color: $euiColorAccent;
+  vertical-align: text-bottom; // if displayed inline with text
+  @include euiSlightShadowHover($euiColorAccent);
+
+  font-size: $euiSizeM;
+  font-weight: $euiFontWeightBold;
+  letter-spacing: .05em;
+  color: chooseLightOrDarkText($euiColorAccent, $euiColorEmptyShade, $euiColorFullShade);
+  text-transform: uppercase;
+  line-height: $euiSizeL;
+  text-align: center;
+  white-space: nowrap;
+
+  cursor: default;
+}

src/components/badge/beta_badge/_index.scss

@@ -0,0 +1 @@
+@import 'beta_badge';

src/components/badge/beta_badge/beta_badge.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { EuiToolTip } from '../../tool_tip';
+
+export const EuiBetaBadge = ({
+  className,
+  label,
+  description,
+  tooltipPosition,
+  title,
+  ...rest,
+}) => {
+
+  const classes = classNames(
+    'euiBetaBadge',
+    className
+  );
+
+  if (description) {
+    return (
+      <EuiToolTip
+        position={tooltipPosition}
+        content={description}
+        title={title}
+      >
+        <span
+          className={classes}
+          {...rest}
+        >
+          {label}
+        </span>
+      </EuiToolTip>
+    );
+  } else {
+    return (
+      <span
+        className={classes}
+        title={title}
+        {...rest}
+      >
+        {label}
+      </span>
+    )
+  }
+}
+
+EuiBetaBadge.propTypes = {
+  className: PropTypes.string,
+
+  /**
+   * One word label like "Beta" or "Lab"
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Description for the tooltip
+   */
+  description: PropTypes.node,
+
+  /**
+   * Custom position of the tooltip
+   */
+  tooltipPosition: PropTypes.string,
+
+  /**
+   * Optional title will be supplied as tooltip title or title attribute
+   */
+  title: PropTypes.string,
+}
+
+EuiBetaBadge.defaultProps = {
+  tooltipPosition: 'top',
+};

src/components/badge/beta_badge/beta_badge.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test';
+
+import { EuiBetaBadge } from './beta_badge';
+
+describe('EuiBetaBadge', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiBetaBadge label="Beta" {...requiredProps} />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});

src/components/badge/beta_badge/index.js

@@ -0,0 +1,3 @@
+export {
+  EuiBetaBadge,
+} from './beta_badge';

src/components/badge/index.js

@@ -1,3 +1,7 @@
 export {
   EuiBadge,
 } from './badge';
+
+export {
+  EuiBetaBadge,
+} from './beta_badge';