user feedback form

Author: Joshmanny

src/components.d.ts

@@ -16,6 +16,8 @@ export namespace Components {
         "to"?: string;
         "value": string | number;
     }
+    interface AppFeedback {
+    }
     interface AppLanding {
     }
     interface AppLayout {
@@ -44,6 +46,12 @@ declare global {
         prototype: HTMLAppButtonElement;
         new (): HTMLAppButtonElement;
     };
+    interface HTMLAppFeedbackElement extends Components.AppFeedback, HTMLStencilElement {
+    }
+    var HTMLAppFeedbackElement: {
+        prototype: HTMLAppFeedbackElement;
+        new (): HTMLAppFeedbackElement;
+    };
     interface HTMLAppLandingElement extends Components.AppLanding, HTMLStencilElement {
     }
     var HTMLAppLandingElement: {
@@ -76,6 +84,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "app-button": HTMLAppButtonElement;
+        "app-feedback": HTMLAppFeedbackElement;
         "app-landing": HTMLAppLandingElement;
         "app-layout": HTMLAppLayoutElement;
         "app-result": HTMLAppResultElement;
@@ -94,6 +103,8 @@ declare namespace LocalJSX {
         "to"?: string;
         "value"?: string | number;
     }
+    interface AppFeedback {
+    }
     interface AppLanding {
     }
     interface AppLayout {
@@ -110,6 +121,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "app-button": AppButton;
+        "app-feedback": AppFeedback;
         "app-landing": AppLanding;
         "app-layout": AppLayout;
         "app-result": AppResult;
@@ -122,6 +134,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "app-button": LocalJSX.AppButton & JSXBase.HTMLAttributes<HTMLAppButtonElement>;
+            "app-feedback": LocalJSX.AppFeedback & JSXBase.HTMLAttributes<HTMLAppFeedbackElement>;
             "app-landing": LocalJSX.AppLanding & JSXBase.HTMLAttributes<HTMLAppLandingElement>;
             "app-layout": LocalJSX.AppLayout & JSXBase.HTMLAttributes<HTMLAppLayoutElement>;
             "app-result": LocalJSX.AppResult & JSXBase.HTMLAttributes<HTMLAppResultElement>;

src/global/app.css

@@ -82,6 +82,12 @@ h2 {
   font-weight: 600;
 }
 
+textarea, ion-select {
+  background: #ededed !important;
+  border-radius: 3px;
+  margin-bottom: 20px;
+}
+
 @media only screen and (max-width: 390px) {
   h2 {
     margin-top: 10px;

src/helpers/routes.ts

@@ -11,6 +11,10 @@ const routes = {
     url: '/page/result',
     component: 'app-result',
   },
+  feedback: {
+    url: '/page/feedback',
+    component: 'app-feedback',
+  },
 };
 
 export default routes;

src/pages/feedback/feedback.css

@@ -0,0 +1,5 @@
+.feedback-btn {
+  margin-top: 30px;
+  display: grid;
+  justify-content: center;
+}

src/pages/feedback/feedback.tsx

@@ -0,0 +1,55 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'app-feedback',
+  styleUrl: 'feedback.css',
+  scoped: true,
+})
+export class FeedbackPage {
+
+  render() {
+    return (
+      <app-layout hasBack={false}>
+        <div class="ion-padding">
+          <h2 data-testid="landing-page-title">Ishihara Feedback form</h2>
+          <form>
+            <ion-row>
+              <ion-col>
+                <ion-label>Name</ion-label>
+                <ion-input type="text"></ion-input>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-label>Email</ion-label>
+                <ion-input type="email"></ion-input>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-label>Rating</ion-label>
+                <ion-select>
+                  <ion-select-option value="1">1</ion-select-option>
+                  <ion-select-option value="2">2</ion-select-option>
+                  <ion-select-option value="3">3</ion-select-option>
+                  <ion-select-option value="4">4</ion-select-option>
+                  <ion-select-option value="5">5</ion-select-option>
+                </ion-select>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-label>Message</ion-label>
+                <ion-textarea></ion-textarea>
+              </ion-col>
+            </ion-row>
+          </form>
+
+          <ion-row class="feedback-btn">
+            <app-button dataTestId="feedback-btn" clickHandler={() => {}} value="Submit" expand="block" />
+          </ion-row>
+        </div>
+      </app-layout>
+    );
+  }
+}