Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

33 - Create the navigation elements of the design system #54

Merged

Conversation

MellyGray
Copy link
Contributor

What this PR does / why we need it:

This PR adds the navigation elements of the design system. This is the Navbar.tsx, Breadcrumb.tsx and Tabs.tsx components.

Which issue(s) this PR closes:

Special notes for your reviewer:

I added the 3 navigation elements as described in the Design System Analysis following Bootstrap 5 styles. For the Navbar element since it was already developed I just did a refactor to improve readability.

Suggestions on how to test this:

npm run storybook

You can check in the Storybook the Breadcrumbs, Tabs and Navigation elements

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

None

Is there a release notes update needed for this change?:

Added navigation elements of the design system

Additional documentation:

Design System Analysis doc

@MellyGray MellyGray linked an issue Apr 14, 2023 that may be closed by this pull request
@MellyGray MellyGray marked this pull request as ready for review April 14, 2023 17:12
@ekraffmiller ekraffmiller self-assigned this Apr 17, 2023
Copy link
Contributor

@ekraffmiller ekraffmiller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good!

Copy link
Member

@pdurbin pdurbin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Found a typo so I'm pulling this out of QA. Still reviewing.

src/stories/ui/navbar/Navbar.stories.tsx Show resolved Hide resolved
@pdurbin pdurbin assigned pdurbin and unassigned ekraffmiller Apr 18, 2023
Copy link
Member

@pdurbin pdurbin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, this is looking great. I found a couple more little things.

defaultActiveKey: string
}

function Tabs({ defaultActiveKey, children }: PropsWithChildren<TabsProps>) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this have a heading of "Props"? This is what I see:

Screen Shot 2023-04-18 at 10 17 42 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @pdurbin ! The Props heading is missing because this branch is older than the #40 mdx storybook docs template. Then the template with the Props heading is missing in this branch but once this is merged it should look good in dev

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MellyGray yes, you're right. I hope you don't mind but I did git rebase develop on this PR and then force pushed it. The Props heading is there now:

Screen Shot 2023-04-18 at 2 21 51 PM

@pdurbin pdurbin force-pushed the feature/create-the-navigation-elements-of-the-design-system branch from 4b03d80 to 7ce257a Compare April 18, 2023 18:22
Copy link
Member

@pdurbin pdurbin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All set now after a couple typo fixes and rebasing. Tests are passing. Off to QA.

@kcondon kcondon self-assigned this Apr 24, 2023
@kcondon
Copy link
Contributor

kcondon commented Apr 24, 2023

I'm not sure what I should be seeing, verifying. I see a navbar item in the left hand links column. I open the docs for it and see model navbar header components: links, drop down list, but I do not see tabs?

@MellyGray
Copy link
Contributor Author

I'm not sure what I should be seeing, verifying. I see a navbar item in the left hand links column. I open the docs for it and see model navbar header components: links, drop down list, but I do not see tabs?

When you open storybook there should be 3 elements for the navigation: the Navbar, the Tabs and the Breadcrumbs

image

@kcondon
Copy link
Contributor

kcondon commented Apr 25, 2023

@MellyGray Thanks! I think it was the same -b issue. I wasn't seeing the latest? Anyway, I see them now.

@kcondon
Copy link
Contributor

kcondon commented Apr 25, 2023

@MellyGray There is a merge conflict with the pr. Can you take a look?

@MellyGray
Copy link
Contributor Author

@kcondon I fixed the conflicts now

@GPortas GPortas mentioned this pull request Apr 26, 2023
@kcondon kcondon merged commit a702cc5 into develop Apr 26, 2023
@kcondon kcondon deleted the feature/create-the-navigation-elements-of-the-design-system branch April 26, 2023 13:48
jayanthkomarraju pushed a commit to jayanthkomarraju/dataverse-frontend that referenced this pull request May 31, 2024
…ements-of-the-design-system

33 - Create the navigation elements of the design system
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create the navigation elements of the design system
4 participants