Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Navigation: Create dropdown and toggle components #2557

Closed
1 task
tochwill opened this issue Nov 4, 2019 · 2 comments · Fixed by #2613
Closed
1 task

Navigation: Create dropdown and toggle components #2557

tochwill opened this issue Nov 4, 2019 · 2 comments · Fixed by #2613
Assignees
Labels
ws-home Tasks for the WS Home Team

Comments

@tochwill
Copy link
Contributor

tochwill commented Nov 4, 2019

Is your feature request related to a problem? Please describe.
The new navigation designs contain a burger menu icon, which opens a dropdown of navigation items when selected.

See burger menu in navigation in the designs in zeplin:
Screenshot 2019-11-04 at 17 19 57

Once the burger menu has been interacted with, the dropdown menu is presented:
Screenshot 2019-11-04 at 17 20 51

(See zeplin for margin + padding values)

Right to left designs:
Screenshot 2019-11-04 at 17 21 47

Screenshot 2019-11-04 at 17 22 15

Describe the solution you'd like

  • Add burger menu and cross icons to psammead assets.

  • Currently this contains the same list of nav items as the scrollable navigation, but this will not always be the case, so the navigation dropdown needs to accept a separate list than the scrollable nav.

  • This dropdown menu pushes the rest of the page content down, it does not overlay on top of it (just need to build the dropdown in psammead).

When the user interacts with the cross icon, the dropdown menu is closed. The interaction will need to be handled differently between Canonical and AMP pages - the psammead package should export presentational components that can be composed into the navigation, and controlled when integrated.

We can reuse the presentational components between AMP and Canonical exports, which accept event handlers in a format such as this (this is not meant to represent the final component design, just to show how to accept AMP and Canonical actions):

export AmpDropdown = ({ closeAction, children, etc... }) => (
    <DropdownWrapper>
        <button on={closeAction}><CloseIcon /></button>
        <DropdownList>
            {children}
        </DropdownList>
    </DropdownWrapper>
); 
export CanonicalDropdown = ({ onClose, children, etc... }) => (
    <DropdownWrapper>
        <button onClick={onClose}><CloseIcon /></button>
        <DropdownList>
            {children}
        </DropdownList>
    </DropdownWrapper>
); 

Similary for the burger menu:

export AmpBurger = ({ action, etc... }) => (
    <button on={action}><BurgerIcon /></button>
); 
export CanonicalBurger = ({ onClick, etc... }) => (
    <button onClick={onClick}><BurgerIcon /></button>
); 

(There may be a preferable name for this component than 'Burger' 🍔 )

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Testing notes
Storybook testing in psammead

Dev insight: Will there be any potential regression? etc

  • This feature is expected to need manual testing.

Additional context
Add any other context or screenshots about the feature request here.

@tochwill tochwill added Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. ws-home Tasks for the WS Home Team labels Nov 4, 2019
@tochwill tochwill added this to the Navigation (WS FP) milestone Nov 5, 2019
@tochwill tochwill changed the title Create navigation dropdown and add dropdown toggling Create navigation dropdown and toggle components Nov 6, 2019
@tochwill tochwill changed the title Create navigation dropdown and toggle components Navigation: Create dropdown and toggle components Nov 7, 2019
@tochwill tochwill removed the Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. label Nov 7, 2019
@OlgaLyubin OlgaLyubin self-assigned this Nov 7, 2019
@PriyaKR
Copy link
Contributor

PriyaKR commented Nov 29, 2019

Looks good to me except one small font size with the dropdown menu ie) at 360-599px expected font size is 15px actual its 16px.If UX is fine with it then this PR can be merged.

@PriyaKR
Copy link
Contributor

PriyaKR commented Nov 29, 2019

UX is fine with the above small issue.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
ws-home Tasks for the WS Home Team
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants