From 0cca3de7deebb1f62009e9d7d160b29faf502ba9 Mon Sep 17 00:00:00 2001
From: James Dindi <dindijjames@gmail.com>
Date: Sun, 17 May 2020 22:06:19 +0300
Subject: [PATCH 1/2] Add test on ArtistCreate

---
 src/containers/Artist/Create/ArtistCreate.js    | 11 +++++++++++
 .../Artist/Create/ArtistCreate.test.js          | 17 +++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 src/containers/Artist/Create/ArtistCreate.js
 create mode 100644 src/containers/Artist/Create/ArtistCreate.test.js

diff --git a/src/containers/Artist/Create/ArtistCreate.js b/src/containers/Artist/Create/ArtistCreate.js
new file mode 100644
index 00000000..368a5ad3
--- /dev/null
+++ b/src/containers/Artist/Create/ArtistCreate.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+class ArtistCreate extends React.Component {
+  render() {
+    return (
+      <form />
+    )
+  }
+}
+
+export default ArtistCreate
diff --git a/src/containers/Artist/Create/ArtistCreate.test.js b/src/containers/Artist/Create/ArtistCreate.test.js
new file mode 100644
index 00000000..e7b8f643
--- /dev/null
+++ b/src/containers/Artist/Create/ArtistCreate.test.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import ArtistCreate from './ArtistCreate'
+
+describe('<ArtistCreate />', () => {
+  let artistCreateWrapper
+  beforeEach(() => {
+    artistCreateWrapper = shallow(<ArtistCreate />)
+  })
+  it('has a form component', () => {
+    expect(artistCreateWrapper.find('form').length).toEqual(1)
+  })
+
+  it('has a textbox for name', () => {
+    expect(artistCreateWrapper.find("input[type='text']").length).toEqual(1)
+  })
+})

From 4dc587107565ba1721f6d34c7ec02f9e751c3101 Mon Sep 17 00:00:00 2001
From: James Dindi <dindijjames@gmail.com>
Date: Thu, 21 May 2020 21:16:41 +0300
Subject: [PATCH 2/2] Add Artist Create form

Work in progress

Co-authored-by: Gideon Kimutai <gideon.kimutai.kim@gmail.com>
Co-authored-by: Riccardo Giomi <contact@riccardogiomi.com>
Co-authored-by: Mike Aono <aonomike@gmail.com>
---
 src/components/App.js                         |  28 +++--
 src/containers/Artist/Create/ArtistCreate.js  |  27 ++++-
 .../Artist/Create/ArtistCreate.test.js        |  12 +-
 .../Artist/Create/artistCreate.scss           | 111 ++++++++++++++++++
 .../Users/Create/UserCreate.test.js           |  10 +-
 src/main.scss                                 |   1 +
 6 files changed, 169 insertions(+), 20 deletions(-)
 create mode 100644 src/containers/Artist/Create/artistCreate.scss

diff --git a/src/components/App.js b/src/components/App.js
index 71f8e661..7db05827 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { BrowserRouter, Route } from 'react-router-dom'
+import { BrowserRouter, Route, Switch } from 'react-router-dom'
 
 // CSS
 import '../main.scss'
@@ -12,6 +12,7 @@ import Causes from '../containers/Causes/Causes'
 import Cause from '../containers/Cause/Cause'
 import Artists from '../containers/Artists/Artists'
 import Artist from '../containers/Artist/Artist'
+import ArtistCreate from '../containers/Artist/Create/ArtistCreate'
 import Performances from '../containers/Performances/Performances'
 import Performance from '../containers/Performance/Performance'
 import Contact from '../containers/Contact/Contact'
@@ -23,17 +24,20 @@ const App = () => {
     <BrowserRouter>
       <Layout>
         <main className="main-container grid">
-          <Route path="/" exact component={Home} />
-          <Route path="/about" component={About} />
-          <Route path="/causes" exact component={Causes} />
-          <Route path="/causes/:id" component={Cause} />
-          <Route path="/artists" exact component={Artists} />
-          <Route path="/users/signin" exact component={UserSignIn} />
-          <Route path="/users/signup" exact component={UserCreate} />
-          <Route path="/artists/:id" component={Artist} />
-          <Route path="/performances" exact component={Performances} />
-          <Route path="/performances/:id" component={Performance} />
-          <Route path="/contact" component={Contact} />
+          <Switch>
+            <Route path="/" exact component={Home} />
+            <Route path="/about" component={About} />
+            <Route path="/causes" exact component={Causes} />
+            <Route path="/causes/:id" component={Cause} />
+            <Route path="/artists/signup" exact component={ArtistCreate} />
+            <Route path="/artists" exact component={Artists} />
+            <Route path="/users/signin" exact component={UserSignIn} />
+            <Route path="/users/signup" exact component={UserCreate} />
+            <Route path="/artists/:id" component={Artist} />
+            <Route path="/performances" exact component={Performances} />
+            <Route path="/performances/:id" component={Performance} />
+            <Route path="/contact" component={Contact} />
+          </Switch>
         </main>
       </Layout>
     </BrowserRouter>
diff --git a/src/containers/Artist/Create/ArtistCreate.js b/src/containers/Artist/Create/ArtistCreate.js
index 368a5ad3..71d0ab54 100644
--- a/src/containers/Artist/Create/ArtistCreate.js
+++ b/src/containers/Artist/Create/ArtistCreate.js
@@ -3,7 +3,32 @@ import React from 'react'
 class ArtistCreate extends React.Component {
   render() {
     return (
-      <form />
+      <div className="artist-registration-container">
+        <h1>Register as an artist</h1>
+        <div className="artist-registration-form-wrapper">
+          <form className="artist-registration-form">
+            <div className="field">
+              <label htmlFor="name">Name</label>
+              <input
+                name="name"
+                type="text"
+              />
+            </div>
+            <div className="field">
+              <label htmlFor="bio">Bio</label>
+              <textarea
+                name="bio"
+              />
+            </div>
+
+            <input
+              className="button body-large"
+              type="submit"
+              value="Register"
+            />
+          </form>
+        </div>
+      </div>
     )
   }
 }
diff --git a/src/containers/Artist/Create/ArtistCreate.test.js b/src/containers/Artist/Create/ArtistCreate.test.js
index e7b8f643..9c9332dc 100644
--- a/src/containers/Artist/Create/ArtistCreate.test.js
+++ b/src/containers/Artist/Create/ArtistCreate.test.js
@@ -8,10 +8,18 @@ describe('<ArtistCreate />', () => {
     artistCreateWrapper = shallow(<ArtistCreate />)
   })
   it('has a form component', () => {
-    expect(artistCreateWrapper.find('form').length).toEqual(1)
+    expect(artistCreateWrapper.find('form')).toHaveLength(1)
   })
 
   it('has a textbox for name', () => {
-    expect(artistCreateWrapper.find("input[type='text']").length).toEqual(1)
+    expect(artistCreateWrapper.find("input[type='text']")).toHaveLength(1)
+  })
+
+  it('has a text-area for capturing the bio', () => {
+    expect(artistCreateWrapper.find('textarea')).toHaveLength(1)
+  })
+
+  it('has a submit button', () => {
+    expect(artistCreateWrapper.find("input[type='submit']")).toHaveLength(1)
   })
 })
diff --git a/src/containers/Artist/Create/artistCreate.scss b/src/containers/Artist/Create/artistCreate.scss
new file mode 100644
index 00000000..5ec059c3
--- /dev/null
+++ b/src/containers/Artist/Create/artistCreate.scss
@@ -0,0 +1,111 @@
+.artist-registration-container {
+  grid-column: 1/-1;
+  min-height: 0;
+  padding-top: $padding-l;
+  margin-bottom: $margin-r;
+
+  h1 {
+    color: $primary-color-white;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    margin-top: $margin-r;
+
+    label,
+    .label {
+      color: $primary-color-white;
+      margin-bottom: $margin-xs;
+
+      span {
+        color: $primary-color-white-darkest;
+      }
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: $margin-r;
+
+      .sign-up-error {
+        margin-top: $margin-xs;
+        color: $validation-color-red;
+      }
+    }
+
+    input[type="text"],
+    input[type="password"],
+    input[type="email"] {
+      border: none;
+      background-image: none;
+      background-color: $primary-color-white;
+      padding: $padding-xs;
+      border-radius: 24px;
+      outline: rgba($primary-color-white, 0);
+    }
+
+    input[type="submit"] {
+      width: fit-content;
+      font-size: 18px;
+    }
+
+    label[for="avatar"] {
+      cursor: pointer;
+      width: 72px;
+      height: 72px;
+      border: 2px dashed $primary-color-white;
+      border-radius: 50%;
+      background-color: $primary-color-darkblue-lightest;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .camera-icon {
+        width: 24px;
+        height: 24px;
+      }
+
+      .image-container {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+
+        img {
+          border-radius: 50%;
+        }
+      }
+    }
+
+    #avatar-label:hover {
+      cursor: pointer;
+    }
+
+    #upload-avatar {
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+    }
+
+    .actions {
+      margin-top: $margin-s;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      a {
+        text-decoration: underline;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .artist-registration-container {
+    grid-column: 4/10;
+  }
+}
diff --git a/src/containers/Users/Create/UserCreate.test.js b/src/containers/Users/Create/UserCreate.test.js
index e113c6a4..7edaafca 100644
--- a/src/containers/Users/Create/UserCreate.test.js
+++ b/src/containers/Users/Create/UserCreate.test.js
@@ -19,22 +19,22 @@ describe('<UserCreate />', () => {
   })
 
   it('has form component to submit the form', () => {
-    expect(userCreateWrapper.find('form').length).toEqual(1)
+    expect(userCreateWrapper.find('form')).toHaveLength(1)
   })
 
   it('has an input to upload the avatar for the profile', () => {
-    expect(userCreateWrapper.find('#upload-avatar').length).toEqual(1)
+    expect(userCreateWrapper.find('#upload-avatar')).toHaveLength(1)
   })
 
   it('has an input field to fill in the username', () => {
-    expect(userCreateWrapper.find("input[name='username']").length).toEqual(1)
+    expect(userCreateWrapper.find("input[name='username']")).toHaveLength(1)
   })
 
   it('has an input field to fill in the email', () => {
-    expect(userCreateWrapper.find("input[type='email']").length).toEqual(1)
+    expect(userCreateWrapper.find("input[type='email']")).toHaveLength(1)
   })
 
   it('has an input field to fill in the password and password confirmation', () => {
-    expect(userCreateWrapper.find("input[type='password']").length).toEqual(2)
+    expect(userCreateWrapper.find("input[type='password']")).toHaveLength(2)
   })
 })
diff --git a/src/main.scss b/src/main.scss
index 83b5cc4b..cd8ffa9c 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -24,6 +24,7 @@
 @import "containers/Causes/ExploreCauses/ExploreCauses.scss";
 @import "containers/Artist/ArtistPerformances/artistperformances.scss";
 @import "containers/Performances/TrendingPerformances/TrendingPerformances.scss";
+@import "containers/Artist/Create/artistCreate.scss";
 @import "components/Artist/ArtistPerformance/artistperformance.scss";
 @import "components/Artist/MoneyRaised/MoneyRaised.scss";
 @import "components/Artist/MoneyRaised/Charts.scss";