Merge pull request #91 from yoution/issue-80

fix: issue #80

Author: maxceem

src/components/Babge/index.jsx

@@ -0,0 +1,22 @@
+/**
+ * Babge
+ *
+ * - type - see BABGE_TYPE values
+ *
+ */
+import React from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import { BABGE_TYPE } from "constants";
+import "./styles.module.scss";
+
+const Babge = ({ children, type = BABGE_TYPE.PRIMARY }) => {
+  return <span styleName={cn("babge", `type-${type}`)}>{children}</span>;
+};
+
+Babge.propTypes = {
+  children: PT.node,
+  type: PT.oneOf(Object.values(BABGE_TYPE)),
+};
+
+export default Babge;

src/components/Babge/styles.module.scss

@@ -0,0 +1,21 @@
+@import "styles/include";
+
+.babge {
+  @include font-roboto;
+  padding: 0 8px;
+  line-height: 20px;
+  border-radius: 5px;
+  height: 20px;
+  color: #FFFFFF;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  text-align: left;
+}
+
+.type-primary {
+  background-color: #0ab88a;
+}
+
+.type-danger {
+  background-color: #ef476f;
+}

src/constants/index.js

@@ -73,6 +73,14 @@ export const BUTTON_TYPE = {
   SEGMENT_SELECTED: "segment-selected",
 };
 
+/**
+ * Supported Babge Types
+ */
+export const BABGE_TYPE = {
+  PRIMARY: "primary",
+  DANGER: "danger",
+};
+
 /**
  * Type of rate
  */

src/routes/PositionDetails/components/CandidatesStatusFilter/index.jsx

@@ -6,6 +6,7 @@ import PT from "prop-types";
 import "./styles.module.scss";
 import _ from "lodash";
 import Button from "components/Button";
+import Babge from "components/Babge";
 import {
   CANDIDATE_STATUS,
   CANDIDATE_STATUS_FILTERS,
@@ -15,14 +16,17 @@ import {
 const CandidatesStatusFilter = ({ currentStatus, onChange, candidates }) => {
   return (
     <div styleName="candidates-status-filter">
-      {CANDIDATE_STATUS_FILTERS.map((status) => (
+      {CANDIDATE_STATUS_FILTERS.map((status, index) => (
         <Button
           key={status}
           type={currentStatus === status ? "segment-selected" : "segment"}
           onClick={() => onChange(status)}
         >
           {CANDIDATE_STATUS_TO_TEXT[status]} (
           {_.filter(candidates, { status }).length})
+          {index === 0 && _.filter(candidates, { status }).length ? (
+            <Babge type="danger">Pending</Babge>
+          ) : null}
         </Button>
       ))}
     </div>

src/routes/PositionDetails/components/CandidatesStatusFilter/styles.module.scss

@@ -8,4 +8,9 @@
   > *:not(:last-child) {
     margin-right: 10px;
   }
+  button {
+    span {
+      margin-left: 5px;
+    }
+  }
 }