[UI Framework][K7]: Badge component (elastic#13520)

Adds badge component to K7 UI.
cjcenizal · Aug 26, 2017 · c1ce402 · c1ce402
1 parent ddc69a6
commit c1ce402
Show file tree

Hide file tree

Showing 13 changed files with 392 additions and 0 deletions.
diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css
@@ -340,6 +340,66 @@ table {
   width: 64px;
   height: 64px; }
 
+.kuiBadge {
+  font-size: 12px;
+  line-height: 24px;
+  display: inline-block;
+  text-decoration: none;
+  border: solid 1px transparent;
+  border-radius: 24px;
+  padding: 0 8px;
+  background-color: transparent;
+  white-space: nowrap;
+  vertical-align: middle; }
+  .kuiBadge .kuiBadge__content {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center; }
+  .kuiBadge .kuiBadge__icon {
+    margin-left: 4px; }
+  .kuiBadge.kuiBadge--iconLeft .kuiBadge__content {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+    -webkit-flex-direction: row-reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse; }
+    .kuiBadge.kuiBadge--iconLeft .kuiBadge__content .kuiBadge__icon {
+      margin-right: 4px;
+      margin-left: 0; }
+
+.kuiBadge--default {
+  border-color: #444;
+  background-color: rgba(68, 68, 68, 0.1); }
+
+.kuiBadge--primary {
+  border-color: #4da1c0;
+  background-color: rgba(77, 161, 192, 0.1); }
+
+.kuiBadge--secondary {
+  border-color: #00A69B;
+  background-color: rgba(0, 166, 155, 0.1); }
+
+.kuiBadge--warning {
+  border-color: #E5830E;
+  background-color: rgba(229, 131, 14, 0.1); }
+
+.kuiBadge--danger {
+  border-color: #bf4d4d;
+  background-color: rgba(191, 77, 77, 0.1); }
+
+.kuiBadge--accent {
+  border-color: #DD0A73;
+  background-color: rgba(221, 10, 115, 0.1); }
+
 .kuiButton {
   display: inline-block;
   -webkit-appearance: none;

diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css
@@ -340,6 +340,66 @@ table {
   width: 64px;
   height: 64px; }
 
+.kuiBadge {
+  font-size: 12px;
+  line-height: 24px;
+  display: inline-block;
+  text-decoration: none;
+  border: solid 1px transparent;
+  border-radius: 24px;
+  padding: 0 8px;
+  background-color: transparent;
+  white-space: nowrap;
+  vertical-align: middle; }
+  .kuiBadge .kuiBadge__content {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center; }
+  .kuiBadge .kuiBadge__icon {
+    margin-left: 4px; }
+  .kuiBadge.kuiBadge--iconLeft .kuiBadge__content {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+    -webkit-flex-direction: row-reverse;
+        -ms-flex-direction: row-reverse;
+            flex-direction: row-reverse; }
+    .kuiBadge.kuiBadge--iconLeft .kuiBadge__content .kuiBadge__icon {
+      margin-right: 4px;
+      margin-left: 0; }
+
+.kuiBadge--default {
+  border-color: #D9D9D9;
+  background-color: rgba(217, 217, 217, 0.1); }
+
+.kuiBadge--primary {
+  border-color: #0079a5;
+  background-color: rgba(0, 121, 165, 0.1); }
+
+.kuiBadge--secondary {
+  border-color: #00A69B;
+  background-color: rgba(0, 166, 155, 0.1); }
+
+.kuiBadge--warning {
+  border-color: #E5830E;
+  background-color: rgba(229, 131, 14, 0.1); }
+
+.kuiBadge--danger {
+  border-color: #A30000;
+  background-color: rgba(163, 0, 0, 0.1); }
+
+.kuiBadge--accent {
+  border-color: #DD0A73;
+  background-color: rgba(221, 10, 115, 0.1); }
+
 .kuiButton {
   display: inline-block;
   -webkit-appearance: none;

diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
@@ -3,6 +3,9 @@ import Slugify from '../string/slugify';
 import AccessibilityExample
   from '../../views/accessibility/accessibility_example';
 
+import BadgeExample
+  from '../../views/badge/badge_example';
+
 import ButtonExample
   from '../../views/button/button_example';
 
@@ -63,6 +66,10 @@ const components = [{
   name: 'Button',
   component: ButtonExample,
   hasReact: true,
+}, {
+  name: 'Badge',
+  component: BadgeExample,
+  hasReact: true,
 }, {
   name: 'CallOut',
   component: CallOutExample,

diff --git a/ui_framework/doc_site/src/views/badge/badge.js b/ui_framework/doc_site/src/views/badge/badge.js
@@ -0,0 +1,44 @@
+import React from 'react';
+
+import {
+  KuiBadge,
+} from '../../../../components';
+
+export default () => (
+  <div>
+    <KuiBadge type="default">
+      Default
+    </KuiBadge>
+
+    &nbsp;&nbsp;
+
+    <KuiBadge type="primary">
+      Primary
+    </KuiBadge>
+
+    &nbsp;&nbsp;
+
+    <KuiBadge type="secondary">
+      Secondary
+    </KuiBadge>
+
+    &nbsp;&nbsp;
+
+    <KuiBadge type="accent">
+      Accent
+    </KuiBadge>
+
+    &nbsp;&nbsp;
+
+    <KuiBadge type="warning">
+      Warning
+    </KuiBadge>
+
+    &nbsp;&nbsp;
+
+    <KuiBadge type="danger">
+      Danger
+    </KuiBadge>
+  </div>
+
+);
diff --git a/ui_framework/doc_site/src/views/badge/badge_example.js b/ui_framework/doc_site/src/views/badge/badge_example.js
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+import Badge from './badge';
+const badgeSource = require('!!raw!./badge');
+const badgeHtml = renderToHtml(Badge);
+
+import BadgeWithIcon from './badge_with_icon';
+const badgeWithIconSource = require('!!raw!./badge_with_icon');
+const badgeWithIconHtml = renderToHtml(BadgeWithIcon);
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Badge"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: badgeSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: badgeHtml,
+      }]}
+    >
+      <GuideText>
+        Badges are used to focus on important bits of information.
+      </GuideText>
+
+      <GuideDemo>
+        <Badge />
+      </GuideDemo>
+    </GuideSection>
+
+    <GuideSection
+      title="Badge with Icon"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: badgeWithIconSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: badgeWithIconHtml,
+      }]}
+    >
+      <GuideText>
+        Badges can use icons on the left and right (default) sides.
+      </GuideText>
+
+      <GuideDemo>
+        <BadgeWithIcon />
+      </GuideDemo>
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/doc_site/src/views/badge/badge_with_icon.js b/ui_framework/doc_site/src/views/badge/badge_with_icon.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {
+  KuiBadge,
+} from '../../../../components';
+
+export default () => (
+  <div>
+
+    <KuiBadge iconType="help">
+      Primary
+    </KuiBadge>
+
+    &nbsp;&nbsp;
+
+    <KuiBadge type="primary" iconType="user" iconSide="left">
+      Secondary
+    </KuiBadge>
+
+  </div>
+
+);
diff --git a/ui_framework/src/components/badge/_badge.scss b/ui_framework/src/components/badge/_badge.scss
@@ -0,0 +1,49 @@
+.kuiBadge {
+  font-size: $kuiSizeM;
+  line-height: $kuiSizeL;
+  display: inline-block;
+  text-decoration: none;
+  border: solid 1px transparent;
+  border-radius: $kuiSizeL;
+  padding: 0 $kuiSizeS;
+  background-color: transparent;
+  white-space: nowrap;
+  vertical-align: middle;
+
+  .kuiBadge__content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .kuiBadge__icon {
+    margin-left: $kuiSizeXS;
+  }
+
+  &.kuiBadge--iconLeft .kuiBadge__content {
+    flex-direction: row-reverse;
+
+    .kuiBadge__icon {
+      margin-right: $kuiSizeXS;
+      margin-left: 0;
+    }
+  }
+}
+
+
+// Modifier naming and colors.
+$badgeTypes: (
+  default: $kuiColorLightShade,
+  primary: $kuiColorPrimary,
+  secondary: $kuiColorSecondary,
+  warning: $kuiColorWarning,
+  danger: $kuiColorDanger,
+  accent: $kuiColorAccent
+);
+
+@each $name, $color in $badgeTypes {
+  .kuiBadge--#{$name} {
+    border-color: $color;
+    background-color: transparentize($color, .9);
+  }
+}
diff --git a/ui_framework/src/components/badge/_index.scss b/ui_framework/src/components/badge/_index.scss
@@ -0,0 +1 @@
+@import 'badge';