OPHJOD-287: Use Tailwind CSS rules and remove placeholder avatar

Opetushallitus · Apr 8, 2024 · e796b43 · e796b43
1 parent 4db41eb
commit e796b43
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 87 deletions.
diff --git a/lib/components/NavigationBar/NavigationBar.stories.tsx b/lib/components/NavigationBar/NavigationBar.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof meta>;
 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 }) => (
     <a href="/profiili" aria-label="Profiili" {...rootProps}>
       {children}

diff --git 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) => (
       <a href="/profile" aria-label="Profile" {...rootProps}>
         {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
@@ -1,5 +1,7 @@
 export interface NavigationBarLinkProps {
   className?: string;
+  role?: string;
+  title?: string;
   children: React.ReactNode;
 }
 
@@ -15,45 +17,64 @@ export interface NavigationBarProps {
   /** Navigation avatar */
   user?: {
     name: string;
-    src: string;
     component?: NavigationBarLink;
   };
 }
 
 /**
  * This component is a navigation bar that displays a logo, navigation items, and an avatar.
  */
-export const NavigationBar = ({ items, user }: NavigationBarProps) => (
-  <div className="min-w-min border-b-2 border-[#808080] bg-[#FFFFFFE5]">
-    <nav className="mx-auto flex h-[72px] items-center justify-between gap-4 p-4 font-semibold lg:container">
-      <div className="inline-flex select-none items-center gap-2 text-[24px] leading-[140%] text-[#888]">
-        <div className="h-8 w-8 bg-[#808080]"></div>JOD
-      </div>
-      {(items ?? user) && (
-        <ul className="inline-flex items-center gap-4">
-          {items?.map((item, index) => (
-            <li key={index}>
-              <item.component
-                aria-current={item.active ? 'location' : undefined}
-                className={`block rounded-lg px-4 py-2 ${item.active ? 'bg-[#697077] text-white' : 'hover:bg-[#edeff0] focus:bg-[#edeff0]'}`}
-              >
-                {item.text}
-              </item.component>
-            </li>
-          ))}
-          {user && (
-            <li>
-              {user.component ? (
-                <user.component className="block h-[40px] w-[40px] rounded-full">
-                  <img className="rounded-full" src={user.src} alt={user.name} />
-                </user.component>
-              ) : (
-                <img className="block h-[40px] w-[40px] rounded-full" src={user.src} alt={user.name} />
-              )}
-            </li>
-          )}
-        </ul>
-      )}
-    </nav>
-  </div>
-);
+export const NavigationBar = ({ items, user }: NavigationBarProps) => {
+  const initials = user?.name
+    .split(' ')
+    .map((part) => part[0])
+    .splice(0, 2)
+    .join('')
+    .toUpperCase();
+
+  return (
+    <div className="min-w-min border-b-[4px] border-inactive-gray bg-[#FFFFFFE5]">
+      <nav className="mx-auto flex h-[68px] items-center justify-between gap-4 px-[72px] py-[14px] font-semibold lg:container">
+        <div className="inline-flex select-none items-center gap-4 text-[24px] leading-[140%] text-accent">
+          <div className="h-8 w-8 bg-accent"></div>JOD
+        </div>
+        {(items ?? user) && (
+          <ul className="inline-flex items-center gap-6">
+            {items?.map((item, index) => (
+              <li key={index}>
+                <item.component
+                  aria-current={item.active ? 'location' : undefined}
+                  className={`flex items-center gap-3 rounded-lg px-5 py-2 ${item.active ? 'text-accent' : 'text-primary-gray'}`}
+                >
+                  {item.active && <div className="h-5 w-5 rounded-full bg-accent" />}
+                  {item.text}
+                </item.component>
+              </li>
+            ))}
+            {user && (
+              <li className="ml-6">
+                {user.component ? (
+                  <user.component
+                    className="flex h-8 w-8 items-center justify-center rounded-full bg-accent text-white"
+                    role="img"
+                    title={user.name}
+                  >
+                    {initials}
+                  </user.component>
+                ) : (
+                  <div
+                    className="flex h-8 w-8 items-center justify-center rounded-full bg-accent text-white"
+                    role="img"
+                    title={user.name}
+                  >
+                    {initials}
+                  </div>
+                )}
+              </li>
+            )}
+          </ul>
+        )}
+      </nav>
+    </div>
+  );
+};
diff --git a/lib/components/NavigationBar/__snapshots__/NavigationBar.test.tsx.snap b/lib/components/NavigationBar/__snapshots__/NavigationBar.test.tsx.snap
@@ -2,58 +2,61 @@
 
 exports[`NavigationBar > renders navigation items and user 1`] = `
 <div
-  class="min-w-min border-b-2 border-[#808080] bg-[#FFFFFFE5]"
+  class="min-w-min border-b-[4px] border-inactive-gray bg-[#FFFFFFE5]"
 >
   <nav
-    class="mx-auto flex h-[72px] items-center justify-between gap-4 p-4 font-semibold lg:container"
+    class="mx-auto flex h-[68px] items-center justify-between gap-4 px-[72px] py-[14px] font-semibold lg:container"
   >
     <div
-      class="inline-flex select-none items-center gap-2 text-[24px] leading-[140%] text-[#888]"
+      class="inline-flex select-none items-center gap-4 text-[24px] leading-[140%] text-accent"
     >
       <div
-        class="h-8 w-8 bg-[#808080]"
+        class="h-8 w-8 bg-accent"
       />
       JOD
     </div>
     <ul
-      class="inline-flex items-center gap-4"
+      class="inline-flex items-center gap-6"
     >
       <li>
         <a
           aria-current="location"
-          class="block rounded-lg px-4 py-2 bg-[#697077] text-white"
+          class="flex items-center gap-3 rounded-lg px-5 py-2 text-accent"
           href="/home"
         >
+          <div
+            class="h-5 w-5 rounded-full bg-accent"
+          />
           Home
         </a>
       </li>
       <li>
         <a
-          class="block rounded-lg px-4 py-2 hover:bg-[#edeff0] focus:bg-[#edeff0]"
+          class="flex items-center gap-3 rounded-lg px-5 py-2 text-primary-gray"
           href="/about"
         >
           About
         </a>
       </li>
       <li>
         <a
-          class="block rounded-lg px-4 py-2 hover:bg-[#edeff0] focus:bg-[#edeff0]"
+          class="flex items-center gap-3 rounded-lg px-5 py-2 text-primary-gray"
           href="/contact"
         >
           Contact
         </a>
       </li>
-      <li>
+      <li
+        class="ml-6"
+      >
         <a
           aria-label="Profile"
-          class="block h-[40px] w-[40px] rounded-full"
+          class="flex h-8 w-8 items-center justify-center rounded-full bg-accent text-white"
           href="/profile"
+          role="img"
+          title="Jane Doe"
         >
-          <img
-            alt="Jane Doe"
-            class="rounded-full"
-            src="user.jpg"
-          />
+          JD
         </a>
       </li>
     </ul>
@@ -63,16 +66,16 @@ exports[`NavigationBar > renders navigation items and user 1`] = `
 
 exports[`NavigationBar > renders no navigation items and no user 1`] = `
 <div
-  class="min-w-min border-b-2 border-[#808080] bg-[#FFFFFFE5]"
+  class="min-w-min border-b-[4px] border-inactive-gray bg-[#FFFFFFE5]"
 >
   <nav
-    class="mx-auto flex h-[72px] items-center justify-between gap-4 p-4 font-semibold lg:container"
+    class="mx-auto flex h-[68px] items-center justify-between gap-4 px-[72px] py-[14px] font-semibold lg:container"
   >
     <div
-      class="inline-flex select-none items-center gap-2 text-[24px] leading-[140%] text-[#888]"
+      class="inline-flex select-none items-center gap-4 text-[24px] leading-[140%] text-accent"
     >
       <div
-        class="h-8 w-8 bg-[#808080]"
+        class="h-8 w-8 bg-accent"
       />
       JOD
     </div>
@@ -82,42 +85,45 @@ exports[`NavigationBar > renders no navigation items and no user 1`] = `
 
 exports[`NavigationBar > renders only navigation items 1`] = `
 <div
-  class="min-w-min border-b-2 border-[#808080] bg-[#FFFFFFE5]"
+  class="min-w-min border-b-[4px] border-inactive-gray bg-[#FFFFFFE5]"
 >
   <nav
-    class="mx-auto flex h-[72px] items-center justify-between gap-4 p-4 font-semibold lg:container"
+    class="mx-auto flex h-[68px] items-center justify-between gap-4 px-[72px] py-[14px] font-semibold lg:container"
   >
     <div
-      class="inline-flex select-none items-center gap-2 text-[24px] leading-[140%] text-[#888]"
+      class="inline-flex select-none items-center gap-4 text-[24px] leading-[140%] text-accent"
     >
       <div
-        class="h-8 w-8 bg-[#808080]"
+        class="h-8 w-8 bg-accent"
       />
       JOD
     </div>
     <ul
-      class="inline-flex items-center gap-4"
+      class="inline-flex items-center gap-6"
     >
       <li>
         <a
           aria-current="location"
-          class="block rounded-lg px-4 py-2 bg-[#697077] text-white"
+          class="flex items-center gap-3 rounded-lg px-5 py-2 text-accent"
           href="/home"
         >
+          <div
+            class="h-5 w-5 rounded-full bg-accent"
+          />
           Home
         </a>
       </li>
       <li>
         <a
-          class="block rounded-lg px-4 py-2 hover:bg-[#edeff0] focus:bg-[#edeff0]"
+          class="flex items-center gap-3 rounded-lg px-5 py-2 text-primary-gray"
           href="/about"
         >
           About
         </a>
       </li>
       <li>
         <a
-          class="block rounded-lg px-4 py-2 hover:bg-[#edeff0] focus:bg-[#edeff0]"
+          class="flex items-center gap-3 rounded-lg px-5 py-2 text-primary-gray"
           href="/contact"
         >
           Contact
@@ -130,33 +136,33 @@ exports[`NavigationBar > renders only navigation items 1`] = `
 
 exports[`NavigationBar > renders only user 1`] = `
 <div
-  class="min-w-min border-b-2 border-[#808080] bg-[#FFFFFFE5]"
+  class="min-w-min border-b-[4px] border-inactive-gray bg-[#FFFFFFE5]"
 >
   <nav
-    class="mx-auto flex h-[72px] items-center justify-between gap-4 p-4 font-semibold lg:container"
+    class="mx-auto flex h-[68px] items-center justify-between gap-4 px-[72px] py-[14px] font-semibold lg:container"
   >
     <div
-      class="inline-flex select-none items-center gap-2 text-[24px] leading-[140%] text-[#888]"
+      class="inline-flex select-none items-center gap-4 text-[24px] leading-[140%] text-accent"
     >
       <div
-        class="h-8 w-8 bg-[#808080]"
+        class="h-8 w-8 bg-accent"
       />
       JOD
     </div>
     <ul
-      class="inline-flex items-center gap-4"
+      class="inline-flex items-center gap-6"
     >
-      <li>
+      <li
+        class="ml-6"
+      >
         <a
           aria-label="Profile"
-          class="block h-[40px] w-[40px] rounded-full"
+          class="flex h-8 w-8 items-center justify-center rounded-full bg-accent text-white"
           href="/profile"
+          role="img"
+          title="Jane Doe"
         >
-          <img
-            alt="Jane Doe"
-            class="rounded-full"
-            src="user.jpg"
-          />
+          JD
         </a>
       </li>
     </ul>