kids-first / kf-uikit

🎨 Design System for Kids First
https://kf-uikit.netlify.com
Apache License 2.0
1 stars 1 forks source link

✨ Add SecondaryNav component #105

Closed XuTheBunny closed 5 years ago

XuTheBunny commented 5 years ago

Motivation

The secondary nav is typically displayed below the primary navigation at the header of the site. image

Use Cases

Because the primary navigation's intent is to stay consistent across Kids First applications, the secondary navigation will house much of an applications navigation content. Examples:

API changes

No API changes are made on this component.

Implementation Notes

An example of how to pass buttons props to the SecondaryNav component:

<SecondaryNav
    buttons={[
      <NavLink active key={1}><a href="/">Dashboard</a></NavLink>,
      <NavLink key={2}><a href="/">File Repository</a></NavLink>]}
  />

Rendering and Storybook location

src/
└── components
    ├──SeconadryNav
    │   ├── __tests__/
    │   ├── SeconadryNav.jsx
    │   ├── SeconadryNav.story.jsx
    │   └── SeconadryNav.css
    └── index.js

Functional Tests

SeconadryNav-tests is available to test if secondary navigation renders correctly.

Closes #72

dankolbman commented 5 years ago

UIKit Storybook for Review

Built with commit 5b653f6c04811f88f928988c91a1a91aa20f51da

https://deploy-preview-105--kf-uikit.netlify.com

bdolly commented 5 years ago

@XuTheBunny is this a duplicate of #71 and can we combine them somehow?