Additional questions UI partial commit

src/pages/signup/AdditionalQuestions.tsx

@@ -0,0 +1,54 @@
+import { IonContent, IonButton, IonPage, IonSlides, IonSlide } from '@ionic/react';
+import { Component } from 'react';
+import styles from './Signup.module.scss';
+
+type Props = { };
+
+type OwnState = {
+    index: number,
+};
+
+const slideOpts = {
+    initialSlide: 1,
+    speed: 400
+};
+
+
+class AdditionalQuestions extends Component<Props, OwnState> {
+    constructor(
+        props: Props
+    ) {
+        super(props);
+        this.state = {
+            index: 0
+        };
+    }
+
+    render() {
+        return <IonPage>
+            <IonContent fullscreen>
+                <header>
+                    <h4>
+                        { this.state.index } / 05
+                    </h4>
+                    <IonButton> Skip &gt;&gt; </IonButton>
+                </header>
+                <IonSlides pager={false} options={slideOpts}
+                className={styles.slides}>
+                    <IonSlide>
+                        <div className={styles.questionContainer}>
+                            <p> Select if you represent a <strong> company </strong> of if you're an <strong> individual </strong> </p>
+                            <p> Select answer below </p>
+                        </div>
+                        <div className={styles.choiceContainer}>
+                            <IonButton> Company </IonButton>
+                            <IonButton> Individual </IonButton>
+                        </div>
+                    </IonSlide>                    
+                </IonSlides>
+            </IonContent>
+        </IonPage>
+    };
+};
+
+export default AdditionalQuestions;

src/pages/signup/Signup.module.scss

@@ -158,4 +158,13 @@
         opacity: 1;
         transform: translateY(0vh);
     }
+}
+
+
+.slides {
+    width: 100%;
+    
+    ion-slide {
+        display: block;
+    }
 }

src/pages/signup/Signup.tsx

@@ -4,22 +4,27 @@ import { Component } from 'react';
 import InputWidget from '../../components/input/InputWidget';
 import styles from './Signup.module.scss';
 import { Link } from "react-router-dom";
+import AdditionalQuestions from '../signup/AdditionalQuestions';
 
 type Props = { };
 
-type OwnState = { };
+type OwnState = {
+    signupStep: 'BASIC' | 'ADDITIONAL';
+};
 
 class SignupPage extends Component<Props, OwnState> {
     constructor(
         props: Props
     ) {
         super(props);
-        this.state = {};
+        this.state = {
+            signupStep: 'ADDITIONAL'
+        };
     }
 
     render() {
         return <IonPage>
-            <IonContent fullscreen>
+            { this.state.signupStep === 'BASIC' && <IonContent fullscreen>
                 <section className={styles.upfold}>
                     <div className={styles.container}>
                         <figure>
@@ -57,12 +62,16 @@ class SignupPage extends Component<Props, OwnState> {
                     </div>
 
                     <div className={styles.actionButtonsHolder}>
-                        <IonButton className={styles.actionButton} expand="block"> Create </IonButton>
+                        <IonButton className={styles.actionButton} expand="block"
+                        onClick={e => this.setState({ signupStep: 'ADDITIONAL' })}> Create </IonButton>
                     </div>                    
                 </section>
 
                 <div className={ styles.navigationLink }> Already have an account? <Link to='/login'> <span> Login </span> </Link> </div>
-            </IonContent>
+            </IonContent> }
+
+
+            { this.state.signupStep === 'ADDITIONAL' && <AdditionalQuestions /> }
         </IonPage>
     };
 };