Design System - Component(s): Header and Footer

[lrchang2]

Overview

We need to develop library for the header and footer components so it can be passed off and used by the developers.

Additional Information

• Footer requires Access the Data logo and Hack for LA logo.
• Make the header reactive, current it is static.
• The drop down menu (desktop) should have a hover effect.

Action Items

• Do industry research on different types of headers and footers and the components that are included in them
• Do an audit of all the UI components for the header and footer of high-fi wireframes
  • mobile version
  • desktop version
• Collect all versions of header and footer and determine if designs need updating and standardizing (based on sizing, style, etc)
  • bring to design team to make final decisions
• detail out components in the design system of the figma
  • class
  • css
  • use
  • context
• Add a search bar function to the header #195

Resources/Instructions

figma

[lrchang2]

@KC243 Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

1. ask for help at your next meeting
2. put a "Status: Help Wanted" label on your issue and pull request
3. put up a request for assistance on the #access-the-data channel.

[KC243]

Progress: Finished action item 1 (Do industry research on different types of headers and footers and the components that are included in them)
Blockers: none
Availability: 4-6
ETA: In 1-2 weeks
Pictures: None
Reference for Action item 1: https://www.figma.com/file/ogRwU7dOorqIlORIoHsFiQ/Header-and-Footer-Comparison?node-id=0%3A1

[KC243]

Progress: Finished action items 2-3
Blockers: need to bring updated designs to the team for feedback and finalizing before I'm able to proceed further
Availability: 4-6
ETA: 1 week after meeting with the team
Pictures:

[KC243]

Progress: In progress Action item 3 (will make new mockups of the header and footer based on the group feedback)
Blockers: none
Availability: 4-6
ETA: TBD based on group review of new mockups)
Pictures



:

[KC243]

Progress: Action item 3 changed based on group feedback
Blockers: none
Availability: 4-6
ETA: by 4/24th tentatively
Pictures:

[KC243]

Progress: Completed
Blockers: none
Availability: 4-6
ETA: Completed
Pictures:

[KC243]

Progress: None (look into header and footer coloring)
Blockers: Lack of time this week
Availability: 4-6
ETA: 1-2 days
Pictures:

[KC243]

Progress: Redoing the header and footer based on research teams new IA
Blockers: none
Availability: 4-6
ETA: TBD
Pictures

:

[KC243]

Progress: Redoing the header and footer based on online research of footers and headers
Blockers: none
Availability: 4-6
ETA: TBD
Pictures:

[KC243]

Progress: Redoing the header and footer based on online research of footers and headers
Blockers: none
Availability: 4-6
ETA: TBD (I'm prototyping out the menus on both desktop and mobile.)
Current progress can be seen here: https://www.figma.com/proto/ogRwU7dOorqIlORIoHsFiQ/Header-and-Footer-Comparison?node-id=186%3A263&scaling=contain&page-id=0%3A1&starting-point-node-id=186%3A263&show-proto-sidebar=1

[lrchang2]

@KC243
Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

1. ask for help at your next meeting
2. put a "Status: Help Wanted" label on your issue and pull request
3. put up a request for assistance on the #access-the-data channel.

[KC243]

Progress: Components changed in mobile version to reflect changes agreed upon by the design team
Blockers: none
Availability: 4-6
ETA: TBD (based on looking at CKAN websites, we will need to add a search bar to the header on both versions)

[mxajPrice]

Closing issue per conversation with @KC243 in planning meeting 7 July 2022.

[KC243]

Progress: Currently cleaning up the components page since previously people have created multiple components for the same asset. Desktop Hi-fi pages have been redone with updated components. Still need to check spacing.
Blockers: Time
Availability: 2-4
ETA: TBD

[bkong]

@KC243 Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

1. ask for help at your next meeting
2. put a "Status: Help Wanted" label on your issue and pull request
3. put up a request for assistance on the #access-the-data channel.