Create the navigation elements of the design system

[MellyGray]

Overview of the Feature Request

We would like to add the navigation elements of our design system as React components and document them in Storybook. This will make it easier for developers to use and maintain consistent navigation elements across our applications.

The navigation elements would be the ones documented in the Design System Analysis document.

These navigation elements would be using the Design tokens as SASS variables if applicable. These variables are described in the document

The Header/navbar is already implemented as part of the Layout, but we may need to improve the Storybook documentation and tests and maybe use the design tokens as SASS variables for the brand color or any other font/color applicable.

What kind of user is the feature intended for?

This feature is intended for developers who use React to build and test components for our web applications.

What inspired the request?

Our design system includes a set of navigation elements that are used consistently across our applications. By creating reusable React components for these elements and documenting them in Storybook, we can provide a centralized and easy-to-use reference for developers.

Some references for the Storybook:

• Vibe Design System
• Storybook Design System
• More references

What existing behavior do you want changed?

We want to add a new section to Storybook that displays our navigation elements as React components. This section should include documentation on how to use each component, as well as examples of how the components can be customized.

Any brand new behavior do you want to add to Dataverse?

No, this feature request does not introduce any brand new behavior to Dataverse.

Any open or closed issues related to this feature request?

• Identify UI elements for the Dataverse Design System and create issues for their development #14

• Create the design tokens of the design system using SASS variables #30