Background
In T289716: Create sticky header skeleton we are building the skeleton for the sticky header. This task will cover the beginning of adding distinct functionality to the header, focusing on the search functionality.
Acceptance criteria
- Add the following items to the sticky header as per the prototype below:
- Search icon
- Search widget
- It should be impossible to see two searches at any given time (e.g. it should not be possible to see the search icon in the header as well as the one in the sticky header)
Prototype
https://di-community-round-2.web.app/Audre_Lorde
Developer notes
A placeholder for the search exists. You'll likely want to update the SkinVector data to make the search icon visible, and add classes to ensure that it gets wired up correctly.
It's possible you'll need to create a new Vue instance to handle this case.
Note, that conversations about WVUI are still ongoing. For now, it would be acceptable to link the search icon via an anchor tag to the input at the top of the page if WVUI is not loaded.
The "meat and potatoes" of this work will include:
- We'll need a Vue instance for each search component (the sticky search and the search in the main header). Modifying skins.vector.search.js might be a good place to do this.
- searchToggle.js will also need to be modified to instantiate multiple search toggles.
- Given that there will now be multiple search toggles, some of the styles we have for the search toggle in the main header are unnecessary/deleterious for the sticky header search toggle behavior (they will try to override). I recommend we scope those styles to the main header only.
See https://gerrit.wikimedia.org/r/716693
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T289724#7393949 |
| 2 | ✅ | T289724#7393949 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T289724#7393949 |
| 2 | ✅ | T289724#7393949 |
