Merge pull request #38 from mustaphaturhan/patch-workflows

Patch workflows
Ucurtma · Jul 14, 2019 · f6d58d9 · f6d58d9
2 parents a5e9bf9 + 1e4bf44
commit f6d58d9
Show file tree

Hide file tree

Showing 10 changed files with 422 additions and 755 deletions.
diff --git a/packages/frontend/components/forms/sign-up.js b/packages/frontend/components/forms/sign-up.js
@@ -81,23 +81,23 @@ function Signup() {
             onChange={handleChange}
           />
           {/* TODO: add checkbox here after pr comes. */}
-          <div className="flex items-center mt-6">
+          <div className="flex justify-between items-center mt-6">
             <Paragraph>
               Already have an account?{' '}
               <Button
                 textColor="#66E5B8"
                 className="py-0 px-0 sm:py-0 sm:px-0"
                 noPadding
-                type="flat"
+                variant="flat"
               >
                 Log in
               </Button>
             </Paragraph>
             <Button
-              type="custom"
+              variant="custom"
               textColor="#FFF"
               color="#66E5B8"
-              isSubmit
+              type="submit"
               disabled={isSubmitting}
               className="w-full sm:w-auto ml-auto uc-onboarding-signup-button"
             >

diff --git a/packages/frontend/components/student-journey/create-journey-content.js b/packages/frontend/components/student-journey/create-journey-content.js
@@ -17,7 +17,7 @@ function CreateJourneyContent() {
             <div className="flex justify-center my-12 p-4 sm:p-0">
               <Button
                 onClick={() => dispatch({ type: 'setActiveStep', step: 1 })}
-                type="custom"
+                variant="custom"
                 color="#FCFCFC"
                 className="uc-onboarding-step1-continue-btn"
               >

diff --git a/packages/frontend/components/student-journey/step-three.js b/packages/frontend/components/student-journey/step-three.js
@@ -25,12 +25,12 @@ function StepThree() {
       </StepTitle>
       <div className="flex justify-center my-4 sm:p-0">
         <Link href="/">
-          <Button type="custom" textColor="#E56666">
+          <Button variant="custom" textColor="#E56666">
             <a>Go to homepage</a>
           </Button>
         </Link>
         <div className="flex justify-center my-4 sm:p-0">
-          <Button type="custom" color="#FCFCFC">
+          <Button variant="custom" color="#FCFCFC">
             CREATE DRAFT
           </Button>
         </div>

diff --git a/packages/frontend/components/success-stories.js b/packages/frontend/components/success-stories.js
@@ -103,8 +103,8 @@ function SuccessStories() {
       <div className="flex flex-wrap justify-between sm:flex-no-wrap mb-4 mb-8 p-4 sm:p-0">
         {stories.map(story => (
           <Button
-            type="custom"
-            className="shadow-light stories-button mt-4 h-72 w-5/12 sm:h-auto sm:mr-8"
+            variant="custom"
+            className="shadow-light stories-button mt-4 h-72 sm:h-auto sm:mr-8 w-full"
             color={story.id === activeStoryIndex ? '#FFF' : '#F5F5F5'}
             key={story.id}
             style={{ height: '72px' }}
@@ -122,8 +122,8 @@ function SuccessStories() {
           </Button>
         ))}
         <Button
-          type="custom"
-          className="shadow-light stories-button mt-4 h-72 sm:h-auto sm:mr-8 w-5/12"
+          variant="custom"
+          className="shadow-light stories-button mt-4 h-72 sm:h-auto sm:mr-8 w-full"
           color="#F4F4F4"
         >
           SEE MORE

diff --git a/packages/frontend/components/ui/button.js b/packages/frontend/components/ui/button.js
@@ -5,51 +5,54 @@ import PropTypes from 'prop-types';
 function Button({
   tag,
   children,
-  type,
+  variant,
   className,
   color,
   textColor,
   style,
-  isSubmit,
   noPadding,
+  disabled,
+  type,
   ...otherProps
 }) {
   const Tag = tag;
+  const hasColor = color || textColor;
 
   const buttonType = {
     outlined: 'text-default-button border-2 border-solid',
     flat: 'button-flat p-0 m-0 text-navbar-link',
     bg: 'bg-default-button text-navbar-link',
   };
 
-  let customStyle = {
-    border: `2px solid ${color}`,
-    color: textColor || color,
-  };
-
-  if (type === 'flat') {
-    customStyle = {
+  const customStyles = {
+    outlined: {
+      border: `2px solid ${color}`,
+      color: textColor || color,
+    },
+    flat: {
       color: textColor,
-    };
-  }
-
-  if (type === 'custom') {
-    customStyle = {
+    },
+    custom: {
       background: color,
       color: textColor || '#111d27',
-    };
-  }
+    },
+  };
 
   return (
     <Tag
       className={cls(
-        'font-bold text-sm sm:text-base rounded-full',
+        'ui-button font-bold text-sm sm:text-base rounded-full',
         noPadding ? 'py-0 sm:py-0 px-0' : 'py-2 sm:py-3 px-6',
-        buttonType[type],
+        buttonType[variant],
         className
       )}
-      type={isSubmit ? 'submit' : 'button'}
-      style={color || textColor ? { ...customStyle, ...style } : undefined}
+      type={type}
+      style={
+        !disabled && hasColor
+          ? { ...customStyles[variant], ...style }
+          : undefined
+      }
+      disabled={disabled}
       {...otherProps}
     >
       {children}
@@ -62,9 +65,11 @@ Button.defaultProps = {
   className: '',
   textColor: '',
   color: '',
-  type: 'outlined',
-  isSubmit: false,
+  variant: 'outlined',
   noPadding: false,
+  disabled: false,
+  style: {},
+  type: 'button',
 };
 
 Button.propTypes = {
@@ -73,9 +78,13 @@ Button.propTypes = {
   className: PropTypes.string,
   color: PropTypes.string,
   textColor: PropTypes.string,
-  type: PropTypes.oneOf(['outlined', 'flat', 'bg', 'custom']),
-  isSubmit: PropTypes.bool,
+  variant: PropTypes.oneOf(['outlined', 'flat', 'bg', 'custom']),
+  style: PropTypes.objectOf(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  ),
+  type: PropTypes.string,
   noPadding: PropTypes.bool,
+  disabled: PropTypes.bool,
 };
 
 export default Button;
diff --git a/packages/frontend/components/workflows.js b/packages/frontend/components/workflows.js
@@ -11,51 +11,57 @@ import Paragraph from './ui/paragraph';
 
 function Workflows() {
   const [activeItem, setActiveItem] = useState(0);
+  const isStudentWorkflow = activeItem === 1;
+  const isStudentQuotaFull = false; // todo: we will get this parameter from sql or something like admin panel.
 
   const workflows = [
     {
       id: 0,
-      title: 'I am Investor',
+      title: 'I am Student',
+      buttonText: 'Create a Journey',
+      href: '/create-journey',
       card: [
         {
           icon: CampaignIcon,
-          title: "I didn't",
+          title: 'Create Campaign',
           desc:
             'Our team invented awesome campaign creator for you. Give us some details about you and your campaign. But this should little longer.',
         },
         {
           icon: WalletIcon,
-          title: 'Think About',
+          title: 'Take Your Wallet',
           desc:
             'We have awesome system that creates digital wallet for you. Also, I have no words for saying in here. Lets call our marketing team.',
         },
         {
           icon: SuccessIcon,
-          title: 'Investor Workflow',
+          title: 'Success',
           desc:
             'Success is key for everything. Taking good grades is a success for example. Go step by step, don’t be like me. I need marketing team I guess.',
         },
       ],
     },
     {
       id: 1,
-      title: 'I am Student',
+      title: 'I am Investor',
+      buttonText: 'Invest a Journey',
+      href: '/create-journey',
       card: [
         {
           icon: CampaignIcon,
-          title: 'Create Campaign',
+          title: "I didn't",
           desc:
             'Our team invented awesome campaign creator for you. Give us some details about you and your campaign. But this should little longer.',
         },
         {
           icon: WalletIcon,
-          title: 'Take Your Wallet',
+          title: 'Think About',
           desc:
             'We have awesome system that creates digital wallet for you. Also, I have no words for saying in here. Lets call our marketing team.',
         },
         {
           icon: SuccessIcon,
-          title: 'Success',
+          title: 'Investor Workflow',
           desc:
             'Success is key for everything. Taking good grades is a success for example. Go step by step, don’t be like me. I need marketing team I guess.',
         },
@@ -70,7 +76,7 @@ function Workflows() {
       <div className="flex justify-center mt-4 sm:mt-16">
         {workflows.map((workflow, i) => (
           <Button
-            type="flat"
+            variant="flat"
             key={i.toString()}
             onClick={() => setActiveItem(workflow.id)}
             className={cls(
@@ -104,12 +110,15 @@ function Workflows() {
         ))}
       </div>
       <div className="flex justify-center mb-8 p-4 sm:p-0">
-        <Link href="/create-journey">
-          <a className="text-navbar-link font-bold no-underline uc-create-journey-btn">
-            <Button type="custom" color="#FCFCFC">
-              CREATE A JOURNEY
-            </Button>
-          </a>
+        <Link href={workflows[activeItem].href}>
+          <Button
+            className="uc-create-journey-btn"
+            disabled={isStudentWorkflow && isStudentQuotaFull}
+            variant="custom"
+            color="#FCFCFC"
+          >
+            {workflows[activeItem].buttonText.toUpperCase()}
+          </Button>
         </Link>
         <div className="count border-l border-solid border-text-color ml-8 pl-8 opacity-50">
           <p className="font-light text-text-color">We have</p>

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -21,8 +21,7 @@
     "autoprefixer": "^9.6.1",
     "classnames": "^2.2.6",
     "formik": "^1.5.7",
-    "next": "^9.0.0",
-    "polished": "^3.4.1",
+    "next": "^9.0.1",
     "postcss-easy-import": "^3.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
@@ -45,10 +44,6 @@
     ]
   },
   "devDependencies": {
-    "c21e": "1.1.9",
-    "gherkin-testcafe": "^2.3.2",
-    "cucumber": "^5.1.0",
-    "testcafe": "^1.3.1",
     "@babel/core": "^7.4.5",
     "@fullhuman/postcss-purgecss": "^1.2.0",
     "@storybook/addon-actions": "^5.1.9",
@@ -58,7 +53,9 @@
     "@storybook/react": "^5.1.9",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
+    "c21e": "1.1.9",
     "cssnano": "^4.1.10",
+    "cucumber": "^5.1.0",
     "eslint": "5.3.0",
     "eslint-config-airbnb": "^17.1.1",
     "eslint-config-prettier": "^6.0.0",
@@ -67,8 +64,10 @@
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "7.14.2",
     "eslint-plugin-react-hooks": "^1.6.1",
+    "gherkin-testcafe": "^2.3.2",
     "lint-staged": "^8.2.1",
     "prettier": "^1.18.2",
-    "pretty-quick": "^1.11.1"
+    "pretty-quick": "^1.11.1",
+    "testcafe": "^1.3.1"
   }
 }
diff --git a/packages/frontend/stories/button.stories.js b/packages/frontend/stories/button.stories.js
@@ -13,7 +13,7 @@ storiesOf('Button', module)
       className={text('Classname', 'mt-10 ml-10')}
       textColor={color('Text Color')}
       color={color('Color')}
-      type={select('Type', ['outlined', 'flat', 'bg', 'custom'], 'outlined')}
+      variant={select('Type', ['outlined', 'flat', 'bg', 'custom'], 'outlined')}
     >
       {text('Button Text', 'Click Here')}
     </Button>
@@ -25,7 +25,7 @@ storiesOf('Button', module)
       className={text('Classname', 'mt-10 ml-10')}
       textColor={color('Text Color')}
       color={color('Color')}
-      type={select('Type', ['outlined', 'flat', 'bg', 'custom'], 'flat')}
+      variant={select('Type', ['outlined', 'flat', 'bg', 'custom'], 'flat')}
     >
       {text('Button Text', 'Click Here')}
     </Button>
@@ -37,7 +37,7 @@ storiesOf('Button', module)
       className={text('Classname', 'mt-10 ml-10')}
       textColor={color('Text Color')}
       color={color('Color')}
-      type={select('Type', ['outlined', 'flat', 'bg', 'custom'], 'bg')}
+      variant={select('Type', ['outlined', 'flat', 'bg', 'custom'], 'bg')}
     >
       {text('Button Text', 'Click Here')}
     </Button>
@@ -49,7 +49,7 @@ storiesOf('Button', module)
       className={text('Classname', 'mt-10 ml-10')}
       textColor={color('Text Color')}
       color={color('Color')}
-      type={select('Type', ['outlined', 'flat', 'bg', 'custom'], 'custom')}
+      variant={select('Type', ['outlined', 'flat', 'bg', 'custom'], 'custom')}
     >
       {text('Button Text', 'Click Here')}
     </Button>

diff --git a/packages/frontend/styles/global.css b/packages/frontend/styles/global.css
@@ -20,26 +20,23 @@
   --dropbox-border-disabled: #deedff;
 }
 
-button {
+.ui-button {
   border: none;
   margin: 0;
-  padding: 0;
-  width: auto;
   overflow: visible;
   background: transparent;
-  color: inherit;
-  font: inherit;
   cursor: pointer;
 }
 
-button:focus {
+.ui-button:focus {
   outline: none;
   box-shadow: 0px 0px 2px blue;
 }
 
-a {
-  display: inline-block;
-  cursor: pointer;
+.ui-button:disabled,
+.ui-button[disabled] {
+  cursor: not-allowed;
+  background: var(--disabled-title);
 }
 
 .stories-button:first-child,
@@ -50,7 +47,6 @@ a {
 .stories-button:last-child,
 .workflow-card:last-child {
   margin-right: 0;
-  margin-bottom: 0;
 }
 
 input:disabled {