feat: new badge component

p3ol · Feb 15, 2021 · a5a03ca · a5a03ca
1 parent 0173e94
commit a5a03ca
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 0 deletions.
diff --git a/packages/junipero/lib/Badge/index.js b/packages/junipero/lib/Badge/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { classNames } from '@poool/junipero-utils';
+
+const Badge = ({
+  className,
+  value,
+}) => {
+
+  return (
+    <div
+      className={classNames(
+        'junipero',
+        'badge',
+        className,
+      )}>
+      <span>
+        { value }
+      </span>
+    </div>
+  );
+};
+
+export default Badge;
+
+Badge.propTypes = {
+  value: PropTypes.string,
+};
diff --git a/packages/junipero/lib/Badge/index.stories.js b/packages/junipero/lib/Badge/index.stories.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Badge from './index';
+
+export default { title: 'junipero/Badge' };
+
+export const basic = () => (
+  <>
+    <p><Badge value="1" /></p>
+    <p><Badge className="primary" value="1" /></p>
+    <p><Badge className="secondary" value="1" /></p>
+    <p><Badge className="ternary" value="1" /></p>
+    <p><Badge className="warning" value="1" /></p>
+    <p><Badge className="danger" value="1" /></p>
+    <p><Badge className="success" value="1" /></p>
+  </>
+);
diff --git a/packages/junipero/lib/Badge/index.styl b/packages/junipero/lib/Badge/index.styl
@@ -0,0 +1,44 @@
+@require "../theme/colors"
+
+.junipero.badge
+  font-weight: bold
+  font-size: 10px;
+  border-radius: 10px
+  outline: none
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 7px;
+  width: 20px;
+  height: 20px;
+  background: $color-alto;
+
+  // Primary
+  &.primary
+    background: $color-eastern-blue
+    color: $color-white
+
+  // Secondary
+  &.secondary
+    background: $color-persian-green
+    color: $color-white
+
+  // Ternary
+  &.ternary
+    background: $color-portage
+    color: $color-white
+
+  // Warning
+  &.warning
+    background: $color-buttercup
+    color: $color-white
+
+  // Danger
+  &.danger
+    background: $color-monza
+    color: $color-white
+
+  // Success
+  &.success
+    background: $color-java
+    color: $color-white
diff --git a/packages/junipero/lib/Badge/index.test.js b/packages/junipero/lib/Badge/index.test.js
diff --git a/packages/junipero/lib/index.js b/packages/junipero/lib/index.js
@@ -1,3 +1,4 @@
+export { default as Badge } from './Badge';
 export { default as BaseField } from './BaseField';
 export { default as BreadCrumb } from './BreadCrumb';
 export { default as Button } from './Button';

diff --git a/packages/junipero/lib/index.styl b/packages/junipero/lib/index.styl
@@ -1,6 +1,7 @@
 @require "./theme/colors"
 @require "./theme/fonts"
 
+@import "./Badge"
 @import "./BaseField"
 @import "./BreadCrumb"
 @import "./Button"