Merge pull request topcoder-archive#388 from yoution/issue-376

fix: issue topcoder-archive#375 deploy error

Author: nikolay83

src/routes/CreateNewTeam/components/Progress/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/styles.module.scss

@@ -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;
+}