In our company, that has been around for over 50 years, a lot of things have changed, while others have stayed the same. This translates to a tech stack full of shiny modern technology, some tech that was shiny and modern a few years ago, and dinosaur technology that is not shiny or modern at all. As we make the transition to merge with another company, we’re confronted with a whole new set of modern and not-so-modern technologies.
Even if you are lucky enough in your day-to-day to work with modern front-end technologies, this does not mean that all of our products are or will be written using current technologies. We will always have legacy and no clear idea about what the tech future is going to look like. Also, as a large organization we build for multiple web and native platforms that need design consistency. This leads to a challenge: How do we make sure that our design system covers everything? Well, unfortunately, we can’t pick the convenient parts and ignore the rest. We have to embrace cross-platform and tech sharing.
As a consequence of this diverse tech stack we currently have the need to rebuilt our Design System components library from scratch.
The challenge to solve is:
Our main menu is one of the most important component of the library cause defines the behaviour of the navigation of all our applications. We need to build the main menu as a reusable and distributed npm library in a way that can be used everywhere. Meaning that we need to make our main menu component library framework agnostic.
The component specifications and requirements can be found in the mainmenu.pdf file inside of the repo. Feel free to deviate from the the design and requirements, but if you do so please be prepared to justify your choices.
Feel free to use icons that you prefer for the main menu.
There is no specific requirement for the js framework that you need to use to build this framework agnostic component. Although is a must for the solution that you build an example that shows the main menu correctly running in two different js frameworks, you can choose those frameworks.
The repo is empty with the purpose that you start working on it and make the right technical decisions by yourself.
To get started using github just follow these simple steps:
- Fork this repo.
- Have fun creating the main menu
- Please submit a pull request
- HTML Semantics
- Single responsability
- LIFT
- T-DRY
- Composition
- Structured CSS
- Clean JS
- Code readability
- Browser compatibility (latest versions)
- Unit testing
- E2E testing