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

Feat(web-react): Introduce Vertical Navigation #DS-1627 #1864

Open
wants to merge 18 commits into
base: feat/vertical-navigation
Choose a base branch
from

Conversation

curdaj
Copy link
Contributor

@curdaj curdaj commented Jan 22, 2025

Description

Additional context

Issue reference

@github-actions github-actions bot added the feature New feature or request label Jan 22, 2025
Copy link

netlify bot commented Jan 22, 2025

Deploy Preview for spirit-design-system ready!

Name Link
🔨 Latest commit 408b8f7
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system/deploys/67938e2fa3f801000802df3e
😎 Deploy Preview https://deploy-preview-1864--spirit-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 96 (no change from production)
Accessibility: 91 (no change from production)
Best Practices: 100 (no change from production)
SEO: 91 (no change from production)
PWA: -
View the detailed breakdown and full score reports

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

@curdaj curdaj changed the base branch from main to feat/vertical-navigation January 22, 2025 12:32
Copy link

netlify bot commented Jan 22, 2025

Deploy Preview for spirit-design-system-storybook ready!

Name Link
🔨 Latest commit 408b8f7
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system-storybook/deploys/67938e2faddc96000850923d
😎 Deploy Preview https://deploy-preview-1864--spirit-design-system-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@crishpeen crishpeen force-pushed the feat/vertical-navigation branch from 7184850 to d34b9f7 Compare January 23, 2025 14:08
@curdaj curdaj force-pushed the feat/ds-1627-vertical-navigation-react branch from a1eba7e to 449a000 Compare January 24, 2025 09:40
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Not sure about placing partial components

<NavigationAction href="#">Link</NavigationAction>
</NavigationItem>
<NavigationItem>
<Dropdown
Copy link
Collaborator

Choose a reason for hiding this comment

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

suggestion (if-minor): What about using UncontrolledDropdown so you will not need to create the state handlers?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Not sure about placing partial components

<Text elementType="span" size="small" emphasis="semibold" UNSAFE_className="text-primary">
My Account
</Text>
<Icon name="chevron-up" boxSize={20} UNSAFE_className="accessibility-open" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

question: accessibility-open/closed - are we missing some props for this?

@curdaj curdaj marked this pull request as ready for review January 27, 2025 08:59
@curdaj curdaj requested review from pavelklibani and a team as code owners January 27, 2025 08:59
Comment on lines +40 to +41
expect(screen.getByRole('navigation')).toHaveClass('Navigation');
expect(screen.getByRole('navigation')).toHaveClass(directionClassName);
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
expect(screen.getByRole('navigation')).toHaveClass('Navigation');
expect(screen.getByRole('navigation')).toHaveClass(directionClassName);
const element = screen.getByRole('navigation');
expect(element).toHaveClass('Navigation');
expect(element).toHaveClass(directionClassName);

Comment on lines 34 to 36
const navigationClass = useClassNamePrefix('Navigation');
const navigationActionClass = useClassNamePrefix('NavigationAction');
const navigationItemClass = useClassNamePrefix('NavigationItem');
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const navigationClass = useClassNamePrefix('Navigation');
const navigationActionClass = useClassNamePrefix('NavigationAction');
const navigationItemClass = useClassNamePrefix('NavigationItem');
const navigationClass = useClassNamePrefix('Navigation');
const navigationActionClass = `${navigationClass}Action`;
const navigationItemClass = `${navigationClass}Item`;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants