Add new Toolbar component

[djalmaaraujo]

Description

This component is the base for the Responsiveness Project Header Part. I will create at least two more components:

• Toolbar.Toggler (to create a hamburger menu and open the Navigation sidebar)
• Navigation sidebar (Migration from the VIP Dashboard to a generic component)

What's included:

• Generation of the correct Valet Theme Breakpoints built-in with theme-ui;
• The new Toolbar (former Header) component and its sub-parts;
• A new variant for the Nav component, allowing us to re-use code 🥳 . The Toolbar can now use the Nav component
• Storybook examples;
• Unit tests

The Plan

• After merging this component, I will put it in the VIP Dashboard. Once the other parts are done, we will move the other parts to the VIP Dashboard, including the Responsiveness behavior

Checklist

• [x] This PR has good automated test coverage
• [x] The storybook for the component has been updated

Steps to Test

1. Pull down PR. OR go to https://deploy-preview-298--vip-design-system-components.netlify.app/ and jump to item 3
2. npm run dev.
3. Open Storybook in Navigation / Toolbar
4. Check all components of Stories
5. Navigation works with the keyboard
6. The component is similar to the VIP Dashboard header component

[netlify[bot]]

✅ Deploy Preview for vip-design-system-components ready!

Name	Link
🔨 Latest commit	49baf2c58e9699ecf8392db12e90b36fd4b6f5e2
🔍 Latest deploy log	https://app.netlify.com/sites/vip-design-system-components/deploys/654a561c7de0b400077da0e2
😎 Deploy Preview	https://deploy-preview-298--vip-design-system-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.