Dashboard page - Home page

[lloan]

This is a three part task:

• Design the new page
• Create the proof of concept
• Implement the proof of concept

Design

What is the new component or item:
Create a design PDF for developers to create a static copy with code. You will be using UIKit components along with Fontawesome PRO icons. Any comments you need to make, make them in the discussion of the issue or the implementation issue for this component.

The expected deliverable will be a design documents that shows all the possible states it has. Provide notes as necessary.

** Proof of Concept**

Create a proof of concept using Storybook.js. Take the design PDF and convert it to code. You will be using UIKit as the CSS library along with Fontawesome PRO icons. Do not worry about logic during this step, just build out the component.

The expected deliverable will be a component that is responsive and mobile-ready. Make sure you address all stories requested (states). The next task will deal with adding any additional logic that might be needing. For example, creating API requests, iterating through data, etc.

Implement the Proof of Concept

Take the proof of concept and add missing logic. This means take it from static and make it dynamic if it requires it. Build it to be modular, add comments and make sure component is polished.

[lloan]

Design deliverables for issue:

Note: The PSD file corrupted, managed to save the work, but there are some glitches (white pixels - remnants throughout the rendered image within notes image)

JPGs:

[lloan]

This is ready to be assigned to someone.

[lloan]

@zootechdrum assigning this to you, please take a look and let me know if you need any help getting started. Thanks a ton!

[zootechdrum]

hey @lloan. So i am thinking of creating a notification component, a cohort component, and a status component (upper bar) I then assume someone will import these into the pages directory eventually?

[lloan]

@zootechdrum I know we were on a call yesterday. You were able to get your setup going. Apart from that, everything going well? Thanks!

[lloan]

@zootechdrum Hi, when do you want to get on a call to get you moving forward? Thanks!

[JacobSNGoodwin]

@kvera001 asked me to take this on.

Do we want to start with a limited set of message types that a user can receive?

This component is probably one of the easiest in terms of markup as there's no need for forms nor anything really dynamic doing on. But like, is this just a dashboard for teachers? What are bookmarks? What is the weekly content? A syllabus?

[JacobSNGoodwin]

I just added the basic design and data to storybook on branch: https://github.com/inland-empire-software-development/spark/tree/059-dashboard-home.

You can play with this by running yarn storybook and opening "Dashboard Home."

I still don't quite understand the data and what we should be linking to from this page. For now, if you click on the items at the top (Messages, Students, Courses, Bookmarks), it will navigate to a link provided in the props.