add files, whoops

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/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 {
+  &--hasBetaBadge {
+    position: relative;
+  }
+
+  &__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% - #{$euiCardSpacing*2});
+  }
+
+  .euiToolTipAnchor,
+  &__betaBadge {
+    width: 100%; /* 1 */
+  }
+
+  &__betaBadge {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}