BN-19 | Add. Basic Clinical Layout (#15)

* BN-19 | Refactor. Extract header out of clinical layout

* BN-19 | Refactor. Call ClinicalLayout From ConsultationPage

* BN-19 | Add. CSS Module Import Setup

* BN-19 | Add. Basic Clinical Layout

* BN-19 | Add. Sidebar and SidebarItem Component

* BN-19 | Add. Basic Consulatation Page Layout Setup

---------

Co-authored-by: arshiyaTW2021 <arshiya.shehzad@thoughtworks.com>

Author: rahu1ramesh

declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export = classes;
+}

src/App.tsx

@@ -1,21 +1,18 @@
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { Content } from '@carbon/react';
-import ClinicalLayout from './layouts/clinical/ClinicalLayout';
 import HomePage from './pages/ConsultationPage';
 import NotFoundPage from './pages/NotFoundPage';
 
 const App: React.FC = () => {
   return (
-    <ClinicalLayout>
-      <Content>
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/clinical/:patientUuid" element={<HomePage />} />
-          <Route path="*" element={<NotFoundPage />} />
-        </Routes>
-      </Content>
-    </ClinicalLayout>
+    <Content>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/clinical/:patientUuid" element={<HomePage />} />
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </Content>
   );
 };
 

src/__tests__/App.test.tsx

@@ -2,17 +2,9 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import App from '../App';
-import ClinicalLayout from '@layouts/clinical/ClinicalLayout';
 import ConsultationPage from '@pages/ConsultationPage';
 import NotFoundPage from '@pages/NotFoundPage';
 
-// Mock dependencies
-jest.mock('@layouts/clinical/ClinicalLayout', () => {
-  return jest.fn(({ children }) => (
-    <div data-testid="mock-main-layout">{children}</div>
-  ));
-});
-
 jest.mock('@pages/ConsultationPage', () => {
   return jest.fn(() => <div data-testid="mock-home-page">Home Page</div>);
 });
@@ -41,7 +33,6 @@ describe('App Component', () => {
       </MemoryRouter>,
     );
 
-    expect(screen.getByTestId('mock-main-layout')).toBeInTheDocument();
     expect(screen.getByTestId('mock-carbon-content')).toBeInTheDocument();
   });
 
@@ -83,21 +74,6 @@ describe('App Component', () => {
     expect(screen.queryByTestId('mock-home-page')).not.toBeInTheDocument();
   });
 
-  it('should wrap content with ClinicalLayout', () => {
-    render(
-      <MemoryRouter>
-        <App />
-      </MemoryRouter>,
-    );
-
-    expect(ClinicalLayout).toHaveBeenCalled();
-    const clinicalLayout = screen.getByTestId('mock-main-layout');
-    expect(clinicalLayout).toBeInTheDocument();
-    expect(clinicalLayout).toContainElement(
-      screen.getByTestId('mock-carbon-content'),
-    );
-  });
-
   it('should render Routes component correctly', () => {
     render(
       <MemoryRouter>

src/__tests__/__snapshots__/App.test.tsx.snap

@@ -3,16 +3,12 @@
 exports[`App Component should match snapshot 1`] = `
 <DocumentFragment>
   <div
-    data-testid="mock-main-layout"
+    data-testid="mock-carbon-content"
   >
     <div
-      data-testid="mock-carbon-content"
+      data-testid="mock-home-page"
     >
-      <div
-        data-testid="mock-home-page"
-      >
-        Home Page
-      </div>
+      Home Page
     </div>
   </div>
 </DocumentFragment>

src/components/clinical/header/Header.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Header as CarbonHeader,
+  HeaderName,
+  HeaderNavigation,
+  HeaderMenuItem,
+} from '@carbon/react';
+import BahmniIcon from '@components/common/bahmniIcon/BahmniIcon';
+import { ICON_SIZE } from '@constants/icon';
+
+/**
+ * Header component for the Bahmni Clinical application
+ * Provides navigation and branding elements
+ *
+ * @returns {React.ReactElement} The Header component
+ */
+const Header: React.FC = () => {
+  return (
+    <CarbonHeader aria-label="Bahmni Clinical">
+      <HeaderName href="/" prefix="">
+        Bahmni Clinical
+      </HeaderName>
+      <HeaderNavigation aria-label="Main Navigation">
+        <HeaderMenuItem href="/" aria-label="Bahmni Home">
+          <BahmniIcon
+            name="fa-home"
+            size={ICON_SIZE.LG}
+            id="homeIcon"
+          ></BahmniIcon>
+          Home
+        </HeaderMenuItem>
+      </HeaderNavigation>
+    </CarbonHeader>
+  );
+};
+
+export default Header;

src/components/clinical/header/__tests__/Header.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import Header from '../Header';
+
+// Mock FontAwesomeIcon for BahmniIcon
+jest.mock('@fortawesome/react-fontawesome', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  FontAwesomeIcon: ({ icon, size, color, ...props }: any) => (
+    <svg
+      data-testid={props['data-testid']}
+      data-icon={icon[1]}
+      data-prefix={icon[0]}
+      data-size={size}
+      data-color={color}
+      {...props}
+    />
+  ),
+}));
+
+describe('Header Component', () => {
+  // Helper function to render the component with router
+  const renderWithRouter = () =>
+    render(
+      <BrowserRouter>
+        <Header />
+      </BrowserRouter>,
+    );
+
+  // Happy Path Tests
+  describe('Happy Path', () => {
+    test('renders the header with correct aria-label', () => {
+      renderWithRouter();
+      const header = screen.getByRole('banner');
+      expect(header).toHaveAttribute('aria-label', 'Bahmni Clinical');
+    });
+
+    test('renders the Bahmni Clinical header text', () => {
+      renderWithRouter();
+      const headerText = screen.getByText('Bahmni Clinical');
+      expect(headerText).toBeInTheDocument();
+      expect(headerText.tagName).toBe('A'); // Should be a link
+      expect(headerText).toHaveAttribute('href', '/');
+    });
+
+    test('renders the Home menu item with icon', () => {
+      renderWithRouter();
+      const homeMenuItem = screen.getByText('Home');
+      expect(homeMenuItem).toBeInTheDocument();
+
+      // Check if it's a link to the home page
+      const homeLink = homeMenuItem.closest('a');
+      expect(homeLink).toHaveAttribute('href', '/');
+
+      // Check if the icon is rendered
+      const homeIcon = screen.getByTestId('homeIcon');
+      expect(homeIcon).toBeInTheDocument();
+    });
+
+    test('renders the HeaderNavigation with correct aria-label', () => {
+      renderWithRouter();
+      const navigation = screen.getByRole('navigation');
+      expect(navigation).toHaveAttribute('aria-label', 'Main Navigation');
+    });
+  });
+
+  // Edge Cases
+  describe('Edge Cases', () => {
+    test('supports keyboard navigation', () => {
+      renderWithRouter();
+
+      // Get all interactive elements
+      const interactiveElements = screen.getAllByRole('link');
+
+      // Ensure they have proper tab index
+      interactiveElements.forEach((element) => {
+        expect(element.tabIndex).not.toBe(-1);
+      });
+    });
+  });
+
+  // Accessibility Tests
+  describe('Accessibility', () => {
+    test('all interactive elements have accessible names', () => {
+      renderWithRouter();
+
+      // Check all buttons and links have accessible names
+      const links = screen.getAllByRole('link', { hidden: true });
+
+      links.forEach((element) => {
+        expect(element).toHaveAccessibleName();
+      });
+    });
+  });
+});

src/components/common/sidebar/Sidebar.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import SidebarItem, { SidebarItemProps } from './SidebarItem';
+import * as styles from './styles/Sidebar.module.scss';
+
+/**
+ * Sidebar component that renders a vertical list of sidebar items.
+ *
+ * @component
+ * @param {SidebarItemProps[]} items - Array of sidebar items to render
+ * @param {string} [className] - Optional CSS class name for additional styling
+ */
+interface SidebarProps {
+  items: SidebarItemProps[];
+  className?: string;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ items, className = '' }) => {
+  return (
+    <div className={`${styles.sidebar} ${className}`} data-testid="sidebar">
+      {items.map((item) => (
+        <SidebarItem
+          key={item.id}
+          id={item.id}
+          icon={item.icon}
+          label={item.label}
+          active={item.active}
+          action={item.action}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Sidebar;

src/components/common/sidebar/SidebarItem.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import BahmniIcon from '@components/common/bahmniIcon/BahmniIcon';
+import * as styles from './styles/Sidebar.module.scss';
+import { ICON_SIZE } from '@constants/icon';
+
+/**
+ * SidebarItem component displays a single item in the sidebar with an icon and label.
+ * It can be in an active or inactive state and can handle click actions.
+ *
+ * @component
+ * @param {string} id - Unique identifier for the item
+ * @param {string} icon - Icon name in FontAwesome format (e.g., "fa-clipboard-list")
+ * @param {string} label - Display text for the item
+ * @param {boolean} [active=false] - Whether the item is currently active/selected
+ * @param {function} [action] - Callback function executed when the item is clicked
+ */
+export interface SidebarItemProps {
+  id: string;
+  icon: string;
+  label: string;
+  active?: boolean;
+  action?: () => void;
+}
+
+const SidebarItem: React.FC<SidebarItemProps> = ({
+  id,
+  icon,
+  label,
+  active = false,
+  action,
+}) => {
+  const handleClick = () => {
+    if (action) {
+      action();
+    }
+  };
+
+  return (
+    <div
+      className={`${styles.sidebarItem} ${active ? styles.active : ''}`}
+      onClick={handleClick}
+      data-testid={`sidebar-item-${id}`}
+    >
+      <BahmniIcon
+        name={icon}
+        id={`sidebar-icon-${id}`}
+        color={active ? 'var(--cds-link-primary)' : 'var(--cds-text-secondary)'}
+        size={ICON_SIZE.SM}
+      />
+      <span className={styles.label}>{label}</span>
+    </div>
+  );
+};
+
+export default SidebarItem;