From a5a03ca253d83aaf074978a1bdd4dc3cc001c643 Mon Sep 17 00:00:00 2001
From: defless <simon.deflesschouwer@mmibordeaux.com>
Date: Mon, 15 Feb 2021 17:54:47 +0100
Subject: [PATCH] feat: new badge component

---
 packages/junipero/lib/Badge/index.js         | 28 +++++++++++++
 packages/junipero/lib/Badge/index.stories.js | 17 ++++++++
 packages/junipero/lib/Badge/index.styl       | 44 ++++++++++++++++++++
 packages/junipero/lib/Badge/index.test.js    |  0
 packages/junipero/lib/index.js               |  1 +
 packages/junipero/lib/index.styl             |  1 +
 6 files changed, 91 insertions(+)
 create mode 100644 packages/junipero/lib/Badge/index.js
 create mode 100644 packages/junipero/lib/Badge/index.stories.js
 create mode 100644 packages/junipero/lib/Badge/index.styl
 create mode 100644 packages/junipero/lib/Badge/index.test.js

diff --git a/packages/junipero/lib/Badge/index.js b/packages/junipero/lib/Badge/index.js
new file mode 100644
index 000000000..aecbf8e0c
--- /dev/null
+++ 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
new file mode 100644
index 000000000..1c4dd8da5
--- /dev/null
+++ 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
new file mode 100644
index 000000000..6030b20b2
--- /dev/null
+++ 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
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/junipero/lib/index.js b/packages/junipero/lib/index.js
index b9e767203..cabb27667 100644
--- 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
index 89e934610..240c87a91 100644
--- 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"