Appointment components added.

src/components/Appointment/Confirm.js

@@ -0,0 +1,15 @@
+import React from "react";
+import Button from "components/Button";
+
+export default function Confirm(props) {
+
+  return (
+    <main className="appointment__card appointment__card--confirm">
+      <h1 className="text--semi-bold">{props.message}</h1>
+      <section className="appointment__actions">
+        <Button onClick={props.onCancel} danger>Cancel</Button>
+        <Button onClick={props.onConfirm} danger>Confirm</Button>
+      </section>
+    </main>
+  )
+}

src/components/Appointment/Empty.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function Empty(props) {
+
+  return (
+  <main className="appointmentadd">
+    <img
+      className="appointmentadd-button"
+      src="images/add.png"
+      alt="Add"
+      onClick={props.onAdd}
+    />
+  </main>
+  )
+}

src/components/Appointment/Error.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+export default function Error(props) {
+
+  return (
+    <main className="appointment__card appointment__card--error">
+      <section className="appointment__error-message">
+        <h1 className="text--semi-bold">Error</h1>
+        <h3 className="text--light">{props.message}</h3>
+      </section>
+      <img
+        className="appointment__error-close"
+        src="images/close.png"
+        alt="Close"
+        onClick={props.onClose}
+      />
+    </main>
+  )
+}

src/components/Appointment/Header.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function Header(props) {
+
+  return (
+    <header className="appointment__time">
+      <h4 className="text--semi-bold">{props.time}</h4>
+      <hr className="appointment__separator" />
+    </header>
+  )
+}

src/components/Appointment/Show.js

@@ -0,0 +1,30 @@
+import React from "react";
+
+export default function Show(props) {
+
+  return (
+    <main className="appointment__card appointment__card--show">
+      <section className="appointment__card-left">
+        <h2 className="text--regular">{props.student}</h2>
+        <section className="interviewer">
+          <h4 className="text--light">Interviewer</h4>
+          <h3 className="text--regular">{props.interviewer.name}</h3>
+        </section>
+      </section>
+      <section className="appointment__card-right">
+        <section className="appointment__actions">
+          <img onClick={props.onEdit}
+            className="appointment__actions-button"
+            src="images/edit.png"
+            alt="Edit"
+          />
+          <img onClick={props.onDelete}
+            className="appointment__actions-button"
+            src="images/trash.png"
+            alt="Delete"
+          />
+        </section>
+      </section>
+    </main>
+  )
+}

src/components/Appointment/Status.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function Status(props) {
+
+  return (
+    <main className="appointment__card appointment__card--status">
+      <img
+        className="appointment__status-image"
+        src="images/status.png"
+        alt="Loading"
+      />
+      <h1 className="text--semi-bold">{props.message}</h1>
+    </main>
+  )
+}

src/components/Appointment/index.js

@@ -1,7 +1,9 @@
 import React from "react";
 
+import "components/Appointment/styles.scss";
+
 export default function Appointment(props) {
-  
+
   return (
     <article className="appointment"></article>
   )

stories/index.js

@@ -11,6 +11,15 @@ import DayList from "components/DayList";
 import InterviewerListItem from "components/InterviewerListItem";
 import InterviewerList from "components/InterviewerList";
 
+import Appointment from "components/Appointment/index.js";
+import Header from "components/Appointment/Header";
+import Empty from "components/Appointment/Empty";
+import Show from "components/Appointment/Show";
+import Confirm from "components/Appointment/Confirm";
+import Status from "components/Appointment/Status";
+import Error from "components/Appointment/Error";
+
+
 //--------Button Component--------
 storiesOf("Button", module)
   .addParameters({
@@ -130,4 +139,36 @@ storiesOf("InterviewerList", module)
       interviewer={3}
       setInterviewer={action("setInterviewer")}
     />
-  ));
+  ));
+
+//------appointment Component---------
+storiesOf("Appointment", module)
+  .addParameters({
+    backgrounds: [{ name: "white", value: "#fff", default: true }]
+  })
+  .add("Appointment", () => <Appointment />)
+  .add("Appointment with Time", () => <Appointment time="12pm" />)
+  .add("Header", () => <Header time="12pm" />)
+  .add("Empty", () => <Empty onAdd={action("onAdd")} />)
+  .add("Show", () => (
+    <Show
+      student="Lydia Miller-Jones"
+      interviewer={interviewer}
+      onEdit={action("onEdit")}
+      onDelete={action("onDelete")}
+    />
+  ))
+  .add("Confirm", () => (
+    <Confirm
+      message="Delete the appointment?"
+      onConfirm={action("onConfirm")}
+      onCancel={action("onCancel")}
+    />
+  ))
+  .add("Status", () => <Status message="Deleting" />)
+  .add("Error", () => (
+    <Error
+      message="Could not delete appointment."
+      onClose={action("onClose")}
+    />
+  ))