Patterns: Top-navigation (+ variations: mega menu and section container alignment) & side navigation

MI6-255 commented 1 year ago

Summary

Offer basic pattern examples and code on the site for users to be able to copy the code and use them straight away.

💬 Description

These patterns initially should be:

A starter app (not with surrounding technology, just a site with with side nav/top nav, page header, content and a footer)
Other popular components used together

This issue should include testing. One idea: which may mean duplicating the examples in Storybook, unless there is a way to automate this. Although, bare in mind any failing tests on this should be picked up in ic-ui-kit as otherwise it'll have been released before the tests fail on ic-ui-kit. Also issues if we use visual testing they'll break whenever we change components, which would mean they need fixing on ic-design-system too at the point of release, making it a difficult process. Open to a new idea.

They should include imports, which may be linked to another issue that looks how we display them.

💰 Use value

Tests components integrated together
Save customers time by offering templates that can just be copy and pasted into their app

📝 Acceptance Criteria

Given that a top navigation pattern is being used When the screen resizes Then all components follow their responsive behaviours

Given the footer is on all of the patterns When the patterns are initially opened Then ensure the classification banner has been added at full width, at the bottom of each screen and is anchored

Given the footer is used on all patterns When the user opens the page Then ensure that the footer is always below the fold in it's entirety

Given there are two options for how the side navigation should appear at the extra-small breakpoints (collapsed or expanded) When the extra-small breakpoint is used Then default to the collapsed varient

✏ Designs

Top-navigation based patterns must include: Top-navigation, Footer, section container & classification banner.

They can also include: Mega-menu and page header

Side-navigation based patterns must include: Side-navigation, Footer, section container & classification banner.

🧾 Guidance

If there's written guidance or documentation, include it here.

MI6-255 commented 1 year ago

Copy/paste from Storybook but need to make it clear to people in design-system to update Storybook that they'd need to update the code there too

MI6-255 commented 1 year ago

Code examples with React router etc as we do on component pages

MI6-255 commented 1 year ago

Code examples should just use inline styling CSS, to leave the CSS selectors/library up to the consumer

mi6 / ic-design-system