Issue #375 #376

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/CompleteProgress/index.jsx → 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/SearchContainer/index.jsx

@@ -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/SubmitContainer/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/Completeness/index.jsx → 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 → 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/pages/InputJobDescription/index.jsx

@@ -56,8 +56,8 @@ function InputJobDescription() {
     <SearchAndSubmit
       stages={stages}
       setStages={setStages}
-      isCompletenessDisabled={jdString.length < 10 || jdString.length > 100000}
-      completenessStyle="input-job-description"
+      isProgressDisabled={jdString.length < 10 || jdString.length > 100000}
+      progressStyle="input-job-description"
       searchObject={searchObject}
       page="jd"
       onClick={onClick}

src/routes/CreateNewTeam/pages/InputSkills/components/SkillsList/index.jsx

@@ -8,6 +8,7 @@ import React, { useCallback, useState } from "react";
 import PT from "prop-types";
 import SkillItem from "../SkillItem";
 import ItemList from "../../../../components/ItemList";
+import "./styles.module.scss";
 import { formatPlural } from "utils/format";
 
 function SkillsList({ skills, selectedSkills, toggleSkill }) {
@@ -38,6 +39,11 @@ function SkillsList({ skills, selectedSkills, toggleSkill }) {
           : null
       }
     >
+      <p styleName="subtitle">
+        Please select one or more essential skills you require your talent to
+        have. Topcoder will match to profiles which contain most or all of these
+        skills.
+      </p>
       {filteredSkills.map(({ id, name }) => (
         <SkillItem
           key={id}

src/routes/CreateNewTeam/pages/InputSkills/components/SkillsList/styles.module.scss

@@ -0,0 +1,7 @@
+.subtitle {
+  position: relative;
+  font-size: 12px;
+  line-height: normal;
+  margin: 10px 24px 0px;
+  top: -15px;
+}

src/routes/CreateNewTeam/pages/InputSkills/index.jsx

@@ -48,10 +48,10 @@ function InputSkills() {
     <SearchAndSubmit
       stages={stages}
       setStages={setStages}
-      isCompletenessDisabled={selectedSkills.length < 1}
+      isProgressDisabled={selectedSkills.length < 1}
       searchObject={{ skills: selectedSkills }}
       page="skills"
-      completenessStyle="input-skills"
+      progressStyle="input-skills"
       toRender={() => (
         <SkillsList
           skills={skills}

src/routes/CreateNewTeam/pages/SelectRole/index.jsx

@@ -46,10 +46,10 @@ function SelectRole() {
     <SearchAndSubmit
       stages={stages}
       setStages={setStages}
-      isCompletenessDisabled={!selectedRoleId}
+      isProgressDisabled={!selectedRoleId}
       page="role"
       searchObject={{ roleId: selectedRoleId }}
-      completenessStyle="role-selection"
+      progressStyle="role-selection"
       toRender={() => (
         <>
           <RolesList