Merge pull request #65 from topcoder-platform/dev

[PROD] Release 1.0.2

Author: nkumar-topcoder

src/assets/images/icon-checkmark-circled.svg

@@ -9,11 +9,12 @@ import styles from "./styles.module.scss";
  * @param {Object} props component properties
  * @param {Object} props.children button text
  * @param {string} [props.className] class name added to root element
- * @param {'primary'|'primary-dark'|'primary-light'} [props.color] button color
+ * @param {'primary'|'primary-dark'|'primary-light'|'error'|'warning'} [props.color]
+ * button color
  * @param {boolean} [props.isDisabled] if button is disabled
  * @param {boolean} [props.isSelected] if button is selected
  * @param {string} [props.name] button name
- * @param {(e: any) => void} props.onClick function called when button is clicked
+ * @param {(e: any) => void} [props.onClick] function called when button is clicked
  * @param {'medium'|'small'} [props.size] button size
  * @param {'circle'|'rounded'} [props.style] button style
  * @param {'button'|'submit'|'reset'} [props.type] button type
@@ -42,13 +43,11 @@ const Button = ({
     type={type}
     className={cn(
       styles.button,
-      {
-        [styles.selected]: isSelected,
-        [styles[color]]: true,
-        [styles[size]]: true,
-        [styles[style]]: true,
-        [styles[variant]]: true,
-      },
+      styles[color],
+      styles[size],
+      styles[style],
+      styles[variant],
+      { [styles.selected]: isSelected },
       className
     )}
     onClick={onClick}
@@ -60,7 +59,13 @@ const Button = ({
 Button.propTypes = {
   children: PT.node,
   className: PT.string,
-  color: PT.oneOf(["primary"]),
+  color: PT.oneOf([
+    "primary",
+    "primary-dark",
+    "primary-light",
+    "error",
+    "warning",
+  ]),
   isDisabled: PT.bool,
   isSelected: PT.bool,
   name: PT.string,

src/assets/images/icon-cross-light.svg

@@ -7,6 +7,7 @@
   align-items: center;
   @include roboto-bold;
   letter-spacing: 0.8px;
+  white-space: nowrap;
   text-transform: uppercase;
   outline: none;
   cursor: pointer;
@@ -61,6 +62,16 @@
     color: $primary-dark-text-color;
   }
 
+  &.error {
+    border-color: $error-color;
+    color: $error-text-color;
+  }
+
+  &.warning {
+    border-color: $warning-color;
+    color: $warning-text-color;
+  }
+
   &:disabled {
     border-color: $control-disabled-border-color;
     background-color: $control-disabled-bg-color;
@@ -88,6 +99,16 @@
     background-color: $primary-dark-color;
   }
 
+  &.error {
+    border-color: $error-color;
+    background-color: $error-color;
+  }
+
+  &.warning {
+    border-color: $warning-color;
+    background-color: $warning-color;
+  }
+
   &:disabled {
     border-color: $control-disabled-border-color;
     background-color: $control-disabled-bg-color;

src/components/Button/index.jsx

@@ -10,6 +10,7 @@ import styles from "./styles.module.scss";
  * @param {Object} props component properties
  * @param {boolean} props.checked whether checkbox is checked
  * @param {string} [props.className] class name added to root element
+ * @param {string} [props.impostorClassName] class name added to checkbox impostor
  * @param {boolean} [props.isDisabled] if checkbox is disabled
  * @param {string} props.name name for input element
  * @param {() => void} props.onChange function called when checkbox changes state
@@ -21,6 +22,7 @@ import styles from "./styles.module.scss";
 const Checkbox = ({
   checked,
   className,
+  impostorClassName,
   isDisabled = false,
   name,
   onChange,
@@ -47,7 +49,7 @@ const Checkbox = ({
       checked={checked}
       value={option ? option.value : ""}
     />
-    <span className={styles.impostor} />
+    <span className={cn(styles.impostor, impostorClassName)} />
     {option && option.label && (
       <span className={styles.label}>{option.label}</span>
     )}
@@ -57,6 +59,7 @@ const Checkbox = ({
 Checkbox.propTypes = {
   checked: PT.bool,
   className: PT.string,
+  impostorClassName: PT.string,
   isDisabled: PT.bool,
   name: PT.string.isRequired,
   size: PT.oneOf(["medium", "small"]),

src/components/Button/styles.module.scss

@@ -96,7 +96,7 @@ input.checkbox {
     z-index: 2;
     position: relative;
     display: inline-block;
-    vertical-align: -2px;
+    vertical-align: -3px;
     width: 15px;
     height: 15px;
     line-height: 13px;

src/components/Checkbox/index.jsx

@@ -4,7 +4,8 @@
   padding: 0 10px;
 
   @include desktop {
-    flex: 1 1 auto;
+    flex: 1 1 0;
     padding: 0 35px;
+    min-width: 0;
   }
 }

src/components/Checkbox/styles.module.scss

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import Icon from "../../../assets/images/icon-checkmark-circled.svg";
+import styles from "./styles.module.scss";
+
+/**
+ * Displays an animated checkmark inside circle. After the specified timeout
+ * the checkmark is faded out and after fade transition ends the onTimeout
+ * is called.
+ *
+ * @param {Object} props component properties
+ * @param {string} [props.className] class name to be added to root element
+ * @param {() => void} props.onTimeout
+ * @param {number} props.timeout timeout milliseconds
+ * @returns {JSX.Element}
+ */
+const CheckmarkCircled = ({ className, onTimeout, timeout = 2000 }) => {
+  const [isAnimated, setIsAnimated] = useState(false);
+  const [isTimedOut, setIsTimedOut] = useState(false);
+
+  useEffect(() => {
+    setIsAnimated(true);
+  }, []);
+
+  useEffect(() => {
+    setIsTimedOut(false);
+    let timeoutId = setTimeout(() => {
+      timeoutId = 0;
+      setIsTimedOut(true);
+    }, Math.max(timeout, /* total CSS animation duration */ 1200));
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [timeout]);
+
+  return (
+    <span
+      className={cn(
+        styles.container,
+        { [styles.fadeOut]: isTimedOut },
+        className
+      )}
+      onTransitionEnd={isTimedOut ? onTimeout : null}
+    >
+      <Icon
+        className={cn(styles.checkmark, { [styles.animated]: isAnimated })}
+      />
+    </span>
+  );
+};
+
+CheckmarkCircled.propTypes = {
+  className: PT.string,
+  onTimeout: PT.func.isRequired,
+  timeout: PT.number,
+};
+
+export default CheckmarkCircled;

src/components/Content/styles.module.scss

@@ -0,0 +1,79 @@
+@import "styles/variables";
+
+.container {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+
+.checkmark {
+  display: block;
+  width: auto;
+  height: 100%;
+  border-radius: 999px;
+  stroke-width: 2;
+  stroke: $primary-color;
+  stroke-miterlimit: 10;
+  box-shadow: inset 0px 0px 0px $primary-color;
+  animation-play-state: paused;
+  animation: /*checkmark-circled-fill 0.4s ease-in-out 0.4s forwards,*/ checkmark-circled-scale
+    0.3s ease-in-out 0.9s both;
+
+  :global(.checkmark__circle) {
+    stroke-dasharray: 166;
+    stroke-dashoffset: 166;
+    stroke-width: 2;
+    stroke-miterlimit: 10;
+    stroke: $primary-color;
+    fill: rgba(255, 255, 255, 0);
+    animation-play-state: paused;
+    animation: checkmark-circled-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1)
+      forwards;
+  }
+
+  :global(.checkmark__check) {
+    transform-origin: 50% 50%;
+    stroke-dasharray: 48;
+    stroke-dashoffset: 48;
+    animation-play-state: paused;
+    animation: checkmark-circled-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s
+      forwards;
+  }
+}
+
+.animated {
+  animation-play-state: running;
+
+  :global(.checkmark__circle),
+  :global(.checkmark__check) {
+    animation-play-state: running;
+  }
+}
+
+.fadeOut {
+  opacity: 0;
+}
+
+@keyframes checkmark-circled-stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes checkmark-circled-scale {
+  0%,
+  100% {
+    transform: none;
+  }
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+}
+
+@keyframes checkmark-circled-fill {
+  100% {
+    box-shadow: inset 0px 0px 0px 10px $primary-color;
+  }
+}

src/components/Icons/CheckmarkCircled/index.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import styles from "./styles.module.scss";
+
+/**
+ * Displays a white exclamation mark inside red circle.
+ *
+ * @param {Object} props component properties
+ * @returns {JSX.Element}
+ */
+const ExclamationMarkCircled = (props) => (
+  <span {...props} className={cn(styles.icon, props.className)} />
+);
+
+ExclamationMarkCircled.propTypes = {
+  className: PT.string,
+};
+
+export default ExclamationMarkCircled;

src/components/Icons/CheckmarkCircled/styles.module.scss

@@ -0,0 +1,22 @@
+@import "styles/mixins";
+@import "styles/variables";
+
+.icon {
+  display: inline-block;
+  padding: 2px 0 0;
+  font-size: 12px;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  line-height: 14px;
+  @include roboto-bold;
+  text-align: center;
+  background: $error-color;
+  color: #fff;
+  cursor: pointer;
+
+  &::before {
+    content: "!";
+    display: inline;
+  }
+}

src/components/Icons/ExclamationMarkCircled/index.jsx

@@ -0,0 +1,30 @@
+import React, { memo, useContext, useEffect } from "react";
+import PT from "prop-types";
+import cn from "classnames";
+import { JobNameContext } from "components/JobNameProvider";
+import { JOB_NAME_LOADING } from "constants/workPeriods";
+import styles from "./styles.module.scss";
+
+const JobName = ({ className, jobId }) => {
+  const [getName, fetchName] = useContext(JobNameContext);
+  const [jobName, error] = getName(jobId);
+
+  useEffect(() => {
+    fetchName(jobId);
+  }, [fetchName, jobId]);
+
+  return (
+    <span
+      className={cn(styles.container, { [styles.error]: !!error }, className)}
+    >
+      {jobName || JOB_NAME_LOADING}
+    </span>
+  );
+};
+
+JobName.propTypes = {
+  className: PT.string,
+  jobId: PT.oneOfType([PT.number, PT.string]).isRequired,
+};
+
+export default memo(JobName);