Merge branch 'dev' of https://github.com/topcoder-platform/taas-app into dev

Author: mbaghel

src/routes/CreateNewTeam/components/InputContainer/index.jsx

@@ -8,27 +8,27 @@
 import React from "react";
 import PT from "prop-types";
 import AddedRolesAccordion from "../AddedRolesAccordion";
-import Completeness from "../Completeness";
+import Progress from "../Progress";
 import "./styles.module.scss";
 
 function InputContainer({
   stages,
-  isCompletenessDisabled,
+  isProgressDisabled,
   toRender,
   search,
   onClick,
-  completenessStyle,
+  progressStyle,
   addedRoles,
 }) {
   return (
     <div styleName="page">
       {toRender(search)}
       <div styleName="right-side">
         <AddedRolesAccordion addedRoles={addedRoles} />
-        <Completeness
-          isDisabled={isCompletenessDisabled}
+        <Progress
+          isDisabled={isProgressDisabled}
           onClick={onClick ? onClick: search}
-          extraStyleName={completenessStyle}
+          extraStyleName={progressStyle}
           buttonLabel="Search"
           stages={stages}
           percentage="26"
@@ -40,11 +40,11 @@ function InputContainer({
 
 InputContainer.propTypes = {
   stages: PT.array,
-  isCompletenessDisabled: PT.bool,
+  isProgressDisabled: PT.bool,
   search: PT.func,
   onClick: PT.func,
   toRender: PT.func,
-  completenessStyle: PT.string,
+  progressStyle: PT.string,
   addedRoles: PT.array,
 };
 

src/routes/CreateNewTeam/components/Completeness/index.jsx renamed to src/routes/CreateNewTeam/components/Progress/index.jsx

@@ -1,20 +1,20 @@
 /**
- * Completeness Sidebar
- * Shows level of completeness through skill
+ * Progress Sidebar
+ * Shows level of progress through skill
  * input process and contains a button for
  * searching for users or submitting the job.
  */
 import Button from "components/Button";
 import React from "react";
 import cn from "classnames";
 import PT from "prop-types";
-import CompleteProgress from "../CompleteProgress";
+import ProgressBar from "../ProgressBar";
 import "./styles.module.scss";
 import IconMultipleActionsCheck from "../../../../assets/images/icon-multiple-actions-check-2.svg";
 import IconListQuill from "../../../../assets/images/icon-list-quill.svg";
 import IconOfficeFileText from "../../../../assets/images/icon-office-file-text.svg";
 
-function Completeness({
+function Progress({
   extraStyleName,
   isDisabled,
   onClick,
@@ -23,7 +23,7 @@ function Completeness({
   percentage,
 }) {
 
-  let backgroundIcon 
+  let backgroundIcon
   if (extraStyleName === "input-skills") {
      backgroundIcon= <IconListQuill styleName="transparent-icon" />
   } else if (extraStyleName === "input-job-description") {
@@ -33,8 +33,8 @@ function Completeness({
   }
 
   return (
-    <div styleName={cn("completeness", extraStyleName)}>
-      <CompleteProgress percentDone={percentage} />
+    <div styleName={cn("progress", extraStyleName)}>
+      <ProgressBar percentDone={percentage} />
       <ul styleName="list">
         {stages.map((stage) => (
           <li
@@ -60,7 +60,7 @@ function Completeness({
   );
 }
 
-Completeness.propTypes = {
+Progress.propTypes = {
   extraStyleName: PT.string,
   isDisabled: PT.bool,
   onClick: PT.func,
@@ -69,4 +69,4 @@ Completeness.propTypes = {
   stages: PT.arrayOf(PT.string),
 };
 
-export default Completeness;
+export default Progress;

src/routes/CreateNewTeam/components/Completeness/styles.module.scss renamed to src/routes/CreateNewTeam/components/Progress/styles.module.scss

@@ -1,6 +1,6 @@
 @import "styles/include";
 
-.completeness {
+.progress {
   @include rounded-card;
   overflow: hidden;
   padding: 12px;

src/routes/CreateNewTeam/components/CompleteProgress/index.jsx renamed to src/routes/CreateNewTeam/components/ProgressBar/index.jsx

@@ -1,13 +1,13 @@
 /**
- * Complete Progress Tracker
+ * Progress Tracker
  * Graphical representation of
- * completeness percentage for skill input.
+ * progress percentage for skill input.
  */
 import React from "react";
 import PT from "prop-types";
 import "./styles.module.scss";
 
-function CompleteProgress({ percentDone }) {
+function ProgressBar({ percentDone }) {
   if (!percentDone || percentDone < 0) {
     percentDone = 0;
   } else if (percentDone > 100) {
@@ -17,7 +17,7 @@ function CompleteProgress({ percentDone }) {
   return (
     <div styleName="progress">
       <div styleName="heading">
-        <p>Completeness</p>
+        <p>Progress</p>
         <h6>{percentDone}%</h6>
       </div>
       <div styleName="progress-bar">
@@ -30,8 +30,8 @@ function CompleteProgress({ percentDone }) {
   );
 }
 
-CompleteProgress.propTypes = {
+ProgressBar.propTypes = {
   percentDone: PT.number,
 };
 
-export default CompleteProgress;
+export default ProgressBar;

src/routes/CreateNewTeam/components/CompleteProgress/styles.module.scss renamed to src/routes/CreateNewTeam/components/ProgressBar/styles.module.scss

@@ -11,7 +11,7 @@ import _ from "lodash";
 import { useDispatch } from "react-redux";
 import { editRoleAction } from "../../actions";
 import AddedRolesAccordion from "../AddedRolesAccordion";
-import Completeness from "../Completeness";
+import Progress from "../Progress";
 import SearchCard from "../SearchCard";
 import ResultCard from "../ResultCard";
 import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
@@ -22,7 +22,7 @@ import "./styles.module.scss";
 function SearchContainer({
   isNewRole,
   stages,
-  completenessStyle,
+  progressStyle,
   navigate,
   addedRoles,
   searchState,
@@ -87,14 +87,14 @@ function SearchContainer({
       {renderLeftSide()}
       <div styleName="right-side">
         <AddedRolesAccordion addedRoles={addedRoles} />
-        <Completeness
+        <Progress
           isDisabled={
             !buttonClickable ||
             searchState === "searching" ||
             (searchState === "done" && (!addedRoles || !addedRoles.length))
           }
           onClick={() => setAddAnotherOpen(true)}
-          extraStyleName={completenessStyle}
+          extraStyleName={progressStyle}
           buttonLabel="Continue"
           stages={stages}
           percentage={getPercentage()}
@@ -114,7 +114,7 @@ function SearchContainer({
 SearchContainer.propTypes = {
   isNewRole: PT.bool,
   stages: PT.array,
-  completenessStyle: PT.string,
+  progressStyle: PT.string,
   previousSearchId: PT.string,
   navigate: PT.func,
   addedRoles: PT.array,

src/routes/CreateNewTeam/components/SearchContainer/index.jsx

@@ -17,7 +17,7 @@ import { toastr } from "react-redux-toastr";
 import { navigate } from "@reach/router";
 import ResultCard from "../ResultCard";
 import AddedRolesAccordion from "../AddedRolesAccordion";
-import Completeness from "../Completeness";
+import Progress from "../Progress";
 import AddAnotherModal from "../AddAnotherModal";
 import TeamDetailsModal from "../TeamDetailsModal";
 import ConfirmationModal from "../ConfirmationModal";
@@ -31,7 +31,7 @@ import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
 function SubmitContainer({
   stages,
   setStages,
-  completenessStyle,
+  progressStyle,
   matchingRole,
   addedRoles,
 }) {
@@ -120,9 +120,9 @@ function SubmitContainer({
       )}
       <div styleName="right-side">
         <AddedRolesAccordion addedRoles={addedRoles} />
-        <Completeness
+        <Progress
           onClick={() => setAddAnotherOpen(true)}
-          extraStyleName={completenessStyle}
+          extraStyleName={progressStyle}
           buttonLabel="Continue"
           stages={stages}
           percentage="98"
@@ -154,7 +154,7 @@ function SubmitContainer({
 SubmitContainer.propTypes = {
   stages: PT.array,
   setStages: PT.func,
-  completenessStyle: PT.string,
+  progressStyle: PT.string,
   addedRoles: PT.array,
   matchingRole: PT.object,
 };

src/routes/CreateNewTeam/components/SubmitContainer/index.jsx

@@ -0,0 +1,72 @@
+/**
+ * Progress Sidebar
+ * Shows level of progress through skill
+ * input process and contains a button for
+ * searching for users or submitting the job.
+ */
+import Button from "components/Button";
+import React from "react";
+import cn from "classnames";
+import PT from "prop-types";
+import ProgressBar from "../ProgressBar";
+import "./styles.module.scss";
+import IconMultipleActionsCheck from "../../../../assets/images/icon-multiple-actions-check-2.svg";
+import IconListQuill from "../../../../assets/images/icon-list-quill.svg";
+import IconOfficeFileText from "../../../../assets/images/icon-office-file-text.svg";
+
+function Progress({
+  extraStyleName,
+  isDisabled,
+  onClick,
+  buttonLabel,
+  stages,
+  percentage,
+}) {
+
+  let backgroundIcon
+  if (extraStyleName === "input-skills") {
+     backgroundIcon= <IconListQuill styleName="transparent-icon" />
+  } else if (extraStyleName === "input-job-description") {
+     backgroundIcon= <IconOfficeFileText styleName="transparent-icon" />
+  } else {
+     backgroundIcon= <IconMultipleActionsCheck styleName="transparent-icon" />
+  }
+
+  return (
+    <div styleName={cn("progress", extraStyleName)}>
+      <ProgressBar percentDone={percentage} />
+      <ul styleName="list">
+        {stages.map((stage) => (
+          <li
+            styleName={cn("list-item", {
+              active: stage.isCurrent,
+              done: stage.completed,
+            })}
+          >
+            {stage.name}
+          </li>
+        ))}
+      </ul>
+      <Button
+        size="medium"
+        type="secondary"
+        disabled={isDisabled}
+        onClick={onClick}
+      >
+        {buttonLabel}
+      </Button>
+      {backgroundIcon}
+    </div>
+  );
+}
+
+Progress.propTypes = {
+  extraStyleName: PT.string,
+  isDisabled: PT.bool,
+  onClick: PT.func,
+  buttonLabel: PT.string,
+  currentStageIdx: PT.number,
+  stages: PT.arrayOf(PT.string),
+};
+
+export default Progress;

src/routes/CreateNewTeam/components/progress/index.jsx

@@ -0,0 +1,81 @@
+@import "styles/include";
+
+.progress {
+  @include rounded-card;
+  overflow: hidden;
+  padding: 12px;
+  position: relative;
+  width: 250px;
+  color: #fff;
+  button {
+    border: none;
+  }
+}
+
+.input-job-description {
+  background-image: linear-gradient(135deg, #2984BD 0%, #0AB88A 100%);
+}
+
+.input-skills {
+  background-image: linear-gradient(221.5deg, #646CD0 0%, #9d41c9 100%);
+}
+
+.role-selection {
+  background-image: linear-gradient(45deg, #8B41B0 0%, #EF476F 100%);
+}
+
+.list {
+  margin-bottom: 55px;
+  & + button[disabled] {
+    background-color: #E9E9E9;
+    color: #FFF;
+    opacity: 1;
+    filter: none;
+  }
+}
+
+.list-item {
+  margin-bottom: 14px;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 400;
+
+  &:before {
+    content: "";
+    color: #fff;
+    border: 1px solid #ffffff;
+    border-radius: 100%;
+    width: 16px;
+    height: 16px;
+    margin-right: 10px;
+    display: block;
+    float: left;
+  }
+
+  &.active {
+    font-weight: 500;
+    &:before {
+      background-color: #fff;
+    }
+  }
+
+  &.done {
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.6);
+    &:before {
+      content: "✓";
+      font-size: 9px;
+      line-height: 14px;
+      padding-left: 2px;
+    }
+  }
+}
+
+.transparent-icon {
+  position: absolute;
+  right: -50px;
+  top: 85px;
+  opacity: 10%;
+  width: 144px;
+  height: 144px;
+}