diff --git a/lib/components/NavigationBar/NavigationBar.stories.tsx b/lib/components/NavigationBar/NavigationBar.stories.tsx index 68387b5..19c1ca0 100644 --- a/lib/components/NavigationBar/NavigationBar.stories.tsx +++ b/lib/components/NavigationBar/NavigationBar.stories.tsx @@ -14,7 +14,7 @@ type Story = StoryObj; const parameters = { design: { type: 'figma', - url: 'https://www.figma.com/file/TpFgprt8pjcFcrHlMuL8Ry/cx_jod_ui?node-id=42%3A3498', + url: 'https://www.figma.com/file/6M2LrpSCcB0thlFDaQAI2J/cx_jod_client?node-id=542%3A8159', }, layout: 'fullscreen', viewport: { @@ -63,7 +63,6 @@ const items: NavigationBarProps['items'] = [ const user: NavigationBarProps['user'] = { name: 'Jane Doe', - src: 'https://i.pravatar.cc/200?img=24', component: ({ children, ...rootProps }) => ( {children} diff --git a/lib/components/NavigationBar/NavigationBar.test.tsx b/lib/components/NavigationBar/NavigationBar.test.tsx index db342d4..fc87919 100644 --- a/lib/components/NavigationBar/NavigationBar.test.tsx +++ b/lib/components/NavigationBar/NavigationBar.test.tsx @@ -38,7 +38,6 @@ describe('NavigationBar', () => { const user = { name: 'Jane Doe', - src: 'user.jpg', component: ({ children, ...rootProps }: NavigationBarLinkProps) => ( {children} @@ -60,9 +59,8 @@ describe('NavigationBar', () => { }); // Assert user - const userImage = screen.getByAltText(user.name); - expect(userImage).toBeInTheDocument(); - expect(userImage).toHaveAttribute('src', user.src); + const userAvatar = screen.queryByTitle(user.name); + expect(userAvatar).toBeInTheDocument(); }); it('renders only navigation items', () => { @@ -79,8 +77,8 @@ describe('NavigationBar', () => { }); // Assert user is not rendered - const userImage = screen.queryByAltText(user.name); - expect(userImage).toBeNull(); + const userAvatar = screen.queryByTitle(user.name); + expect(userAvatar).toBeNull(); }); it('renders only user', () => { @@ -90,9 +88,8 @@ describe('NavigationBar', () => { expect(container.firstChild).toMatchSnapshot(); // Assert user - const userImage = screen.getByAltText(user.name); - expect(userImage).toBeInTheDocument(); - expect(userImage).toHaveAttribute('src', user.src); + const userAvatar = screen.queryByTitle(user.name); + expect(userAvatar).toBeInTheDocument(); // Assert navigation items are not rendered items.forEach((item) => { @@ -114,7 +111,7 @@ describe('NavigationBar', () => { }); // Assert user is not rendered - const userImage = screen.queryByAltText(user.name); - expect(userImage).toBeNull(); + const userAvatar = screen.queryByTitle(user.name); + expect(userAvatar).toBeNull(); }); }); diff --git a/lib/components/NavigationBar/NavigationBar.tsx b/lib/components/NavigationBar/NavigationBar.tsx index 74e3edb..5efeebc 100644 --- a/lib/components/NavigationBar/NavigationBar.tsx +++ b/lib/components/NavigationBar/NavigationBar.tsx @@ -1,5 +1,7 @@ export interface NavigationBarLinkProps { className?: string; + role?: string; + title?: string; children: React.ReactNode; } @@ -15,7 +17,6 @@ export interface NavigationBarProps { /** Navigation avatar */ user?: { name: string; - src: string; component?: NavigationBarLink; }; } @@ -23,37 +24,57 @@ export interface NavigationBarProps { /** * This component is a navigation bar that displays a logo, navigation items, and an avatar. */ -export const NavigationBar = ({ items, user }: NavigationBarProps) => ( -
- -
-); +export const NavigationBar = ({ items, user }: NavigationBarProps) => { + const initials = user?.name + .split(' ') + .map((part) => part[0]) + .splice(0, 2) + .join('') + .toUpperCase(); + + return ( +
+ +
+ ); +}; diff --git a/lib/components/NavigationBar/__snapshots__/NavigationBar.test.tsx.snap b/lib/components/NavigationBar/__snapshots__/NavigationBar.test.tsx.snap index 4e3d026..d9ed209 100644 --- a/lib/components/NavigationBar/__snapshots__/NavigationBar.test.tsx.snap +++ b/lib/components/NavigationBar/__snapshots__/NavigationBar.test.tsx.snap @@ -2,34 +2,37 @@ exports[`NavigationBar > renders navigation items and user 1`] = `