@koech/esm-core 8.0.0

package/packages/framework/esm-styleguide/src/location-picker/location-picker.resource.ts

@@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+import useSwrImmutable from 'swr/immutable';
+import useSwrInfinite from 'swr/infinite';
+import { type FetchResponse, fhirBaseUrl, openmrsFetch } from '@openmrs/esm-api';
+import { type FHIRLocationResource } from '@openmrs/esm-emr-api';
+import { useDebounce } from '@openmrs/esm-react-utils';
+
+export interface LocationResponse {
+  type: string;
+  total: number;
+  resourceType: string;
+  meta: {
+    lastUpdated: string;
+  };
+  link: Array<{
+    relation: string;
+    url: string;
+  }>;
+  id: string;
+  entry: Array<FHIRLocationResource>;
+}
+export interface LoginLocationData {
+  locations: Array<FHIRLocationResource>;
+  isLoading: boolean;
+  totalResults?: number;
+  hasMore: boolean;
+  loadingNewData: boolean;
+  error: Error | null;
+  setPage: (size: number | ((_size: number) => number)) => Promise<FetchResponse<LocationResponse>[] | undefined>;
+}
+
+export function useLocationByUuid(locationUuid?: string) {
+  const url = locationUuid ? `/ws/fhir2/R4/Location?_id=${locationUuid}` : null;
+
+  const { data, error, isLoading } = useSwrImmutable<FetchResponse<LocationResponse>>(url, openmrsFetch, {
+    shouldRetryOnError(err) {
+      if (err?.response?.status) {
+        return err.response.status >= 500;
+      }
+      return false;
+    },
+  });
+
+  return useMemo(
+    () => ({
+      location: data?.data?.entry ? data.data.entry[0] : null,
+      error: url ? error : null,
+      isLoading: url ? isLoading : false,
+    }),
+    [data, isLoading, error, url],
+  );
+}
+
+export function useLocations(locationTag?: string, count: number = 0, searchQuery: string = ''): LoginLocationData {
+  const debouncedSearchQuery = useDebounce(searchQuery);
+  function constructUrl(page: number, prevPageData: FetchResponse<LocationResponse>) {
+    if (prevPageData) {
+      const nextLink = prevPageData.data?.link?.find((link) => link.relation === 'next');
+
+      if (!nextLink) {
+        return null;
+      }
+
+      const nextUrl = new URL(nextLink.url);
+      // default for production
+      if (nextUrl.origin === window.location.origin) {
+        return nextLink.url;
+      }
+
+      // in development, the request should be funnelled through the local proxy
+      return new URL(
+        `${nextUrl.pathname}${nextUrl.search ? `?${nextUrl.search}` : ''}`,
+        window.location.origin,
+      ).toString();
+    }
+
+    let url = `${fhirBaseUrl}/Location?`;
+    let urlSearchParameters = new URLSearchParams();
+    urlSearchParameters.append('_summary', 'data');
+
+    if (count) {
+      urlSearchParameters.append('_count', '' + count);
+    }
+
+    if (page) {
+      urlSearchParameters.append('_getpagesoffset', '' + page * count);
+    }
+
+    if (locationTag) {
+      urlSearchParameters.append('_tag', locationTag);
+    }
+
+    if (typeof debouncedSearchQuery === 'string' && debouncedSearchQuery !== '') {
+      urlSearchParameters.append('name:contains', debouncedSearchQuery);
+    }
+
+    return url + urlSearchParameters.toString();
+  }
+
+  const { data, isLoading, isValidating, setSize, error } = useSwrInfinite<FetchResponse<LocationResponse>, Error>(
+    constructUrl,
+    openmrsFetch,
+  );
+
+  const memoizedLocations = useMemo(() => {
+    return {
+      locations: data?.length ? data?.flatMap((entries) => entries?.data?.entry ?? []) : [],
+      isLoading,
+      totalResults: data?.[0]?.data?.total,
+      hasMore: data?.length ? data?.[data.length - 1]?.data?.link?.some((link) => link.relation === 'next') : false,
+      loadingNewData: isValidating,
+      error: error || null,
+      setPage: setSize,
+    };
+  }, [isLoading, data, isValidating, setSize, error]);
+
+  return memoizedLocations;
+}

package/packages/framework/esm-styleguide/src/location-picker/location-picker.test.tsx

@@ -0,0 +1,429 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { type LoggedInUser, type Session } from '@openmrs/esm-api';
+import { type FHIRLocationResource } from '@openmrs/esm-emr-api';
+import { useConfig, useSession } from '@openmrs/esm-react-utils';
+import {
+  inpatientWardResponse,
+  locationResponseForNonExistingSearch,
+  outpatientClinicResponse,
+  mockLoginLocations,
+} from '../../__mocks__/locations.mock';
+import { mockConfig } from '../../__mocks__/config.mock';
+import { LocationPicker } from './location-picker.component';
+import { useLocationByUuid, useLocations } from './location-picker.resource';
+
+const validLocationUuid = '1ce1b7d4-c865-4178-82b0-5932e51503d6';
+const inpatientWardLocationUuid = 'ba685651-ed3b-4e63-9b35-78893060758a';
+
+const mockUseConfig = vi.mocked(useConfig);
+const mockUseSession = vi.mocked(useSession);
+const mockUseLocationByUuid = vi.mocked(useLocationByUuid);
+const mockUseLocations = vi.mocked(useLocations);
+
+vi.mock('./location-picker.resource', () => ({
+  useLocationByUuid: vi.fn(),
+  useLocations: vi.fn(),
+}));
+
+vi.mock('@openmrs/esm-api', async () => ({
+  ...(await import('@openmrs/esm-api')),
+  openmrsFetch: vi.fn((url) => {
+    if (url === `/ws/fhir2/R4/Location?_id=${inpatientWardLocationUuid}`) {
+      return inpatientWardResponse;
+    }
+    if (url === '/ws/fhir2/R4/Location?_summary=data&_count=50&name%3Acontains=search_for_no_location') {
+      return locationResponseForNonExistingSearch;
+    }
+    if (url === '/ws/fhir2/R4/Location?_summary=data&_count=50&name%3Acontains=outpatient') {
+      return outpatientClinicResponse;
+    }
+    return mockLoginLocations;
+  }),
+  setSessionLocation: vi.fn().mockResolvedValue({}),
+  setUserProperties: vi.fn().mockResolvedValue({}),
+}));
+
+describe('LocationPicker', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue(mockConfig);
+    mockUseSession.mockReturnValue({
+      user: {
+        display: 'Testy McTesterface',
+        uuid: '90bd24b3-e700-46b0-a5ef-c85afdfededd',
+        userProperties: {},
+      } as LoggedInUser,
+    } as Session);
+
+    mockUseLocationByUuid.mockReturnValue({
+      location: null,
+      error: null,
+      isLoading: false,
+    });
+
+    mockUseLocations.mockReturnValue({
+      locations: mockLoginLocations.data.entry as Array<FHIRLocationResource>,
+      isLoading: false,
+      totalResults: 4,
+      hasMore: false,
+      loadingNewData: false,
+      error: null,
+      setPage: vi.fn().mockResolvedValue(undefined),
+    });
+  });
+
+  it('should render a search input and list of login locations', async () => {
+    render(<LocationPicker selectedLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    const searchInput = screen.getByRole('searchbox', { name: /search for a location/i });
+    expect(searchInput).toBeInTheDocument();
+
+    await waitFor(() => {
+      const locations = screen.getAllByRole('radio');
+      expect(locations).toHaveLength(4);
+    });
+
+    const expectedLocations = [/community outreach/, /inpatient ward/, /mobile clinic/, /outpatient clinic/];
+    expectedLocations.forEach((locationName) => {
+      expect(screen.getByRole('radio', { name: new RegExp(locationName, 'i') })).toBeInTheDocument();
+    });
+  });
+
+  it('should call onChange when a location is selected', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(<LocationPicker selectedLocationUuid={validLocationUuid} onChange={handleChange} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('radio', { name: /inpatient ward/i })).toBeInTheDocument();
+    });
+
+    const location = screen.getByRole('radio', { name: /inpatient ward/i });
+    await user.click(location);
+
+    expect(handleChange).toHaveBeenCalledWith(inpatientWardLocationUuid);
+  });
+
+  it('should select the provided selectedLocation when the component is rendered', async () => {
+    render(<LocationPicker selectedLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      const inpatientWardOption = screen.getByRole('radio', { name: /inpatient ward/i });
+      expect(inpatientWardOption).toBeChecked();
+    });
+  });
+
+  it('should load the default location on top of the list', async () => {
+    mockUseLocationByUuid.mockReturnValue({
+      location: inpatientWardResponse.data.entry[0] as any,
+      error: null,
+      isLoading: false,
+    });
+
+    render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      const locations = screen.getAllByRole('radio');
+      expect(locations).toHaveLength(4);
+    });
+
+    // Verify the default location (Inpatient Ward) appears first in the list
+    const locations = screen.getAllByRole('radio');
+    expect(locations[0]).toHaveAccessibleName(/inpatient ward/i);
+
+    const expectedLocations = [/community outreach/, /inpatient ward/, /mobile clinic/, /outpatient clinic/];
+    expectedLocations.forEach((locationName) => {
+      expect(screen.getByRole('radio', { name: new RegExp(locationName, 'i') })).toBeInTheDocument();
+    });
+  });
+
+  it('should not display the default location if search result does not contain the default location', async () => {
+    const user = userEvent.setup();
+
+    mockUseLocationByUuid.mockReturnValue({
+      location: inpatientWardResponse.data.entry[0] as any,
+      error: null,
+      isLoading: false,
+    });
+
+    // Mock useLocations to return different results based on search query
+    mockUseLocations.mockImplementation((locationTag, count, searchQuery) => {
+      if (searchQuery === 'outpatient') {
+        return {
+          locations: outpatientClinicResponse.data.entry as any,
+          isLoading: false,
+          totalResults: 1,
+          hasMore: false,
+          loadingNewData: false,
+          error: null,
+          setPage: vi.fn().mockResolvedValue(undefined),
+        };
+      }
+      return {
+        locations: mockLoginLocations.data.entry as any,
+        isLoading: false,
+        totalResults: 4,
+        hasMore: false,
+        loadingNewData: false,
+        error: null,
+        setPage: vi.fn().mockResolvedValue(undefined),
+      };
+    });
+
+    render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('searchbox', { name: /search for a location/i })).toBeInTheDocument();
+    });
+
+    const searchInput = screen.getByRole('searchbox', { name: /search for a location/i });
+    await user.type(searchInput, 'outpatient');
+
+    await waitFor(() => {
+      expect(screen.queryByRole('radio', { name: /inpatient ward/i })).not.toBeInTheDocument();
+    });
+  });
+
+  it('should display a message and not display locations when search results are empty', async () => {
+    const user = userEvent.setup();
+
+    mockUseLocationByUuid.mockReturnValue({
+      location: inpatientWardResponse.data.entry[0] as any,
+      error: null,
+      isLoading: false,
+    });
+
+    // Mock useLocations to return empty results when searching for non-existent location
+    mockUseLocations.mockImplementation((locationTag, count, searchQuery) => {
+      if (searchQuery === 'search_for_no_location') {
+        return {
+          locations: [] as any,
+          isLoading: false,
+          totalResults: 0,
+          hasMore: false,
+          loadingNewData: false,
+          error: null,
+          setPage: vi.fn().mockResolvedValue(undefined),
+        };
+      }
+      return {
+        locations: mockLoginLocations.data.entry as any,
+        isLoading: false,
+        totalResults: 4,
+        hasMore: false,
+        loadingNewData: false,
+        error: null,
+        setPage: vi.fn().mockResolvedValue(undefined),
+      };
+    });
+
+    render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('searchbox', { name: /search for a location/i })).toBeInTheDocument();
+    });
+
+    const searchInput = screen.getByRole('searchbox', { name: /search for a location/i });
+    await user.type(searchInput, 'search_for_no_location');
+
+    await waitFor(() => {
+      expect(screen.getByText(/no results to display/i)).toBeInTheDocument();
+    });
+
+    const locations = screen.queryAllByRole('radio');
+    expect(locations).toHaveLength(0);
+  });
+
+  it('should display skeleton loaders when loading initial data', () => {
+    mockUseLocations.mockReturnValue({
+      locations: [] as any,
+      isLoading: true,
+      totalResults: undefined,
+      hasMore: false,
+      loadingNewData: false,
+      error: null,
+      setPage: vi.fn().mockResolvedValue(undefined),
+    });
+
+    render(<LocationPicker onChange={vi.fn()} />);
+
+    const skeletons = screen.getAllByRole('progressbar');
+    expect(skeletons).toHaveLength(5);
+  });
+
+  it('should display loading indicator when loading new data', async () => {
+    mockUseLocations.mockReturnValue({
+      locations: mockLoginLocations.data.entry as any,
+      isLoading: false,
+      totalResults: 4,
+      hasMore: true,
+      loadingNewData: true,
+      error: null,
+      setPage: vi.fn().mockResolvedValue(undefined),
+    });
+
+    render(<LocationPicker onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      // Find the loading text in the InlineLoading component (not in SVG title)
+      const loadingTexts = screen.getAllByText(/loading/i);
+      const loadingIndicator = loadingTexts.find((element) => element.className.includes('cds--inline-loading__text'));
+      expect(loadingIndicator).toBeInTheDocument();
+    });
+  });
+
+  it('should call onChange with undefined when search input changes', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(<LocationPicker onChange={handleChange} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('searchbox', { name: /search for a location/i })).toBeInTheDocument();
+    });
+
+    const searchInput = screen.getByRole('searchbox', { name: /search for a location/i });
+    await user.type(searchInput, 'test');
+
+    // onChange is called without arguments when search changes, which means locationUuid is undefined
+    expect(handleChange).toHaveBeenCalled();
+    expect(handleChange.mock.calls[0][0]).toBeUndefined();
+  });
+
+  it('should trim whitespace from search terms', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(<LocationPicker onChange={handleChange} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('searchbox', { name: /search for a location/i })).toBeInTheDocument();
+    });
+
+    const searchInput = screen.getByRole('searchbox', { name: /search for a location/i });
+    await user.type(searchInput, '  outpatient  ');
+
+    // Verify that the trimmed search term is used (check if the mock was called with trimmed value)
+    // The actual trimming happens in the component, so we verify by checking the search was performed
+    await waitFor(() => {
+      // The search should filter results - verify outpatient clinic appears
+      expect(screen.getByRole('radio', { name: /outpatient clinic/i })).toBeInTheDocument();
+    });
+  });
+
+  it('should filter out default location from fetched locations to avoid duplicates', async () => {
+    const defaultLocationEntry = inpatientWardResponse.data.entry[0];
+    const locationsWithDuplicate = [defaultLocationEntry, ...mockLoginLocations.data.entry];
+
+    mockUseLocationByUuid.mockReturnValue({
+      location: defaultLocationEntry as any,
+      error: null,
+      isLoading: false,
+    });
+
+    mockUseLocations.mockReturnValue({
+      locations: locationsWithDuplicate as any,
+      isLoading: false,
+      totalResults: 5,
+      hasMore: false,
+      loadingNewData: false,
+      error: null,
+      setPage: vi.fn().mockResolvedValue(undefined),
+    });
+
+    render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      const locations = screen.getAllByRole('radio');
+      expect(locations).toHaveLength(4);
+    });
+
+    // Verify the default location (Inpatient Ward) appears first in the list
+    const locations = screen.getAllByRole('radio');
+    expect(locations[0]).toHaveAccessibleName(/inpatient ward/i);
+
+    // Verify Inpatient Ward only appears once
+    const inpatientWardLocations = screen.getAllByRole('radio', { name: /inpatient ward/i });
+    expect(inpatientWardLocations).toHaveLength(1);
+  });
+
+  it('should not show default location when search term is provided', async () => {
+    const user = userEvent.setup();
+    const defaultLocationEntry = inpatientWardResponse.data.entry[0];
+
+    mockUseLocationByUuid.mockReturnValue({
+      location: defaultLocationEntry as any,
+      error: null,
+      isLoading: false,
+    });
+
+    // Mock useLocations to return filtered results when searching
+    mockUseLocations.mockImplementation((locationTag, count, searchQuery) => {
+      if (searchQuery === 'mobile') {
+        // Return only Mobile Clinic when searching for "mobile"
+        const mobileClinic = mockLoginLocations.data.entry.find((entry) => entry.resource.name === 'Mobile Clinic');
+        return {
+          locations: mobileClinic ? [mobileClinic] : ([] as any),
+          isLoading: false,
+          totalResults: 1,
+          hasMore: false,
+          loadingNewData: false,
+          error: null,
+          setPage: vi.fn().mockResolvedValue(undefined),
+        };
+      }
+      return {
+        locations: mockLoginLocations.data.entry as any,
+        isLoading: false,
+        totalResults: 4,
+        hasMore: false,
+        loadingNewData: false,
+        error: null,
+        setPage: vi.fn().mockResolvedValue(undefined),
+      };
+    });
+
+    render(<LocationPicker defaultLocationUuid={inpatientWardLocationUuid} onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('searchbox', { name: /search for a location/i })).toBeInTheDocument();
+    });
+
+    const searchInput = screen.getByRole('searchbox', { name: /search for a location/i });
+    await user.type(searchInput, 'mobile');
+
+    await waitFor(() => {
+      // Default location should not appear when searching
+      expect(screen.queryByRole('radio', { name: /inpatient ward/i })).not.toBeInTheDocument();
+    });
+  });
+
+  it('should display inline error notification when location loading fails', async () => {
+    const mockError = new Error('Failed to load locations');
+
+    mockUseLocations.mockReturnValue({
+      locations: [] as any,
+      isLoading: false,
+      totalResults: undefined,
+      hasMore: false,
+      loadingNewData: false,
+      error: mockError,
+      setPage: vi.fn().mockResolvedValue(undefined),
+    });
+
+    render(<LocationPicker onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      // Find the error text in the InlineNotification (not in SVG title)
+      const errorTexts = screen.getAllByText(/error/i);
+      const errorNotification = errorTexts.find((element) => element.textContent === 'Error');
+      expect(errorNotification).toBeInTheDocument();
+    });
+
+    expect(screen.getByText(/unable to load login locations/i)).toBeInTheDocument();
+  });
+});

package/packages/framework/esm-styleguide/src/logo/_logo.scss

@@ -0,0 +1,34 @@
+#omrs-logo-full-color,
+#omrs-logo-partial-color,
+#omrs-logo-icon-color {
+  --logo-red: #e15d29;
+  --logo-orange: #e4a12a;
+  --logo-purple: #545090;
+  --logo-green: #008877;
+  --logo-black: #1a1919;
+}
+
+#omrs-logo-full-mono,
+#omrs-logo-partial-mono,
+#omrs-logo-icon-mono {
+  --logo-red: rgba(19, 19, 21, 0.6);
+  --logo-orange: rgba(19, 19, 21, 0.6);
+  --logo-purple: rgba(19, 19, 21, 0.6);
+  --logo-green: rgba(19, 19, 21, 0.6);
+  --logo-black: rgba(19, 19, 21, 0.6);
+}
+
+#omrs-logo-full-grey,
+#omrs-logo-partial-grey,
+#omrs-logo-icon-grey {
+  --logo-red: #eee;
+  --logo-orange: #eee;
+  --logo-purple: #c6c6c6;
+  --logo-green: #c6c6c6;
+  --logo-black: #c6c6c6;
+}
+
+#omrs-logo-white {
+  --logo-grey: #c6c6c6;
+  --logo-white: #fff;
+}

package/packages/framework/esm-styleguide/src/logo/index.ts

@@ -0,0 +1,18 @@
+import fullLogo from './openmrs-logo-full.svg';
+import partialLogo from './openmrs-logo-partial.svg';
+import iconLogo from './openmrs-logo-icon.svg';
+import whiteLogo from './openmrs-logo-white.svg';
+import { addSvg } from '../svg-utils';
+
+export function setupLogo() {
+  addSvg('omrs-logo-full-color', fullLogo);
+  addSvg('omrs-logo-full-mono', fullLogo);
+  addSvg('omrs-logo-full-grey', fullLogo);
+  addSvg('omrs-logo-partial-color', partialLogo);
+  addSvg('omrs-logo-partial-mono', partialLogo);
+  addSvg('omrs-logo-partial-grey', partialLogo);
+  addSvg('omrs-logo-icon-color', iconLogo);
+  addSvg('omrs-logo-icon-mono', iconLogo);
+  addSvg('omrs-logo-icon-grey', iconLogo);
+  addSvg('omrs-logo-white', whiteLogo);
+}

package/packages/framework/esm-styleguide/src/logo/openmrs-logo-full.svg

@@ -0,0 +1,32 @@
+<svg viewBox="0 0 380 119" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M40.29 40.3278C45.3275 35.2904 52.2878 32.1739 59.9776 32.1739C67.6466 32.1739 74.5911 35.2765 79.6245 40.29L79.6454 21.7502C73.7513 18.7143 67.0622 17 59.9776 17C52.8891 17 46.1652 18.9309 40.2692 21.9679L40.29 40.3278Z" fill="var(--logo-red)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M79.6454 79.6712C74.6079 84.7096 67.6506 87.8251 59.9608 87.8251C52.2918 87.8251 45.3473 84.7236 40.3099 79.709L40.29 98.2498C46.1871 101.285 52.8732 103 59.9608 103C67.0493 103 73.7374 101.285 79.6315 98.2488L79.6454 79.6712Z" fill="var(--logo-orange)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M40.3278 79.6961C35.2904 74.6586 32.1739 67.7012 32.1739 60.0114C32.1739 52.3425 35.2755 45.399 40.29 40.3616L21.7492 40.3417C18.7143 46.2378 17 52.9229 17 60.0114C17 67.1 18.7143 73.7881 21.7522 79.6831L40.3278 79.6961Z" fill="var(--logo-purple)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M79.6344 40.289C84.6719 45.3255 87.7883 52.2868 87.7883 59.9766C87.7883 67.6456 84.6868 74.5901 79.6712 79.6225L98.213 79.6434C101.248 73.7493 102.962 67.0612 102.962 59.9766C102.962 52.8871 101.248 46.198 98.211 40.302L79.6344 40.289Z" fill="var(--logo-green)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M156.184 60.0025C156.184 51.2543 150.066 44.2264 141.159 44.2264C132.25 44.2264 126.134 51.2543 126.134 60.0025C126.134 68.7507 132.25 75.7816 141.159 75.7816C150.066 75.7816 156.184 68.7507 156.184 60.0025ZM121.303 60.0025C121.303 48.5205 129.621 40.0436 141.159 40.0436C152.695 40.0436 161.014 48.5205 161.014 60.0025C161.014 71.4875 152.695 79.9674 141.159 79.9674C129.621 79.9674 121.303 71.4875 121.303 60.0025Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M179.514 75.5401C185.021 75.5401 188.564 71.4 188.564 66.0585C188.564 60.717 185.021 56.575 179.514 56.575C174.009 56.575 170.468 60.717 170.468 66.0585C170.468 71.4 174.009 75.5401 179.514 75.5401ZM166.22 53.3064H170.468V57.0102H170.578C172.922 54.2853 176.027 52.6506 179.732 52.6506C187.746 52.6506 193.14 58.32 193.14 66.0585C193.14 73.6887 187.527 79.4645 180.388 79.4645C175.808 79.4645 172.157 77.1749 170.578 74.286H170.468V90.87H166.22V53.3064Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M217.773 63.7679C217.61 59.4629 214.773 56.575 210.087 56.575C205.402 56.575 202.297 59.4629 201.752 63.7679H217.773ZM221.426 74.1796C218.425 78.0484 214.83 79.4645 210.087 79.4645C202.077 79.4645 197.173 73.4711 197.173 66.0585C197.173 58.157 202.732 52.6506 210.253 52.6506C217.449 52.6506 222.349 57.5568 222.349 66.0049V67.3673H201.752C202.077 71.7797 205.456 75.5401 210.087 75.5401C213.737 75.5401 216.192 74.2333 218.207 71.6723L221.426 74.1796Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M227.854 59.3565C227.854 57.0102 227.638 54.9959 227.638 53.3064H231.669C231.669 54.6689 231.779 56.083 231.779 57.5012H231.889C233.033 54.9959 236.195 52.6506 240.389 52.6506C247.094 52.6506 250.088 56.9029 250.088 63.0603V78.8086H245.84V63.4986C245.84 59.2462 243.984 56.575 240.007 56.575C234.504 56.575 232.104 60.554 232.104 66.3865V78.8086H227.854V59.3565Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M259.211 41.0085H265.919L278.8 70.7909H278.907L291.889 41.0085H298.438V78.9994H293.932V47.1242H293.826L280.192 78.9994H277.454L263.825 47.1242H263.718V78.9994H259.211V41.0085Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M312.392 57.7516H316.415C321.407 57.7516 327.902 57.7516 327.902 51.47C327.902 45.9992 323.126 45.1943 318.725 45.1943H312.392V57.7516ZM307.886 41.0085H317.597C324.949 41.0085 332.729 42.0798 332.729 51.47C332.729 56.9973 329.135 60.5948 323.234 61.507L334.018 78.9994H328.493L318.189 61.9364H312.392V78.9994H307.886V41.0085Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M358.123 47.7125C356.617 45.2986 353.936 44.2264 351.197 44.2264C347.224 44.2264 343.097 46.1056 343.097 50.6113C343.097 54.1005 345.028 55.6577 351.091 57.5906C356.994 59.4688 362.468 61.3997 362.468 68.858C362.468 76.4246 355.973 79.9674 349.108 79.9674C344.706 79.9674 339.983 78.5174 337.408 74.7063L341.27 71.5412C342.88 74.3347 346.1 75.7816 349.375 75.7816C353.237 75.7816 357.638 73.5277 357.638 69.18C357.638 64.5112 354.473 63.7063 347.71 61.4524C342.344 59.6805 338.268 57.3183 338.268 50.989C338.268 43.6907 344.545 40.0436 351.197 40.0436C355.438 40.0436 359.033 41.2222 361.822 44.4947L358.123 47.7125Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M185.885 90.9982H187.309L190.043 97.3236H190.066L192.824 90.9982H194.215V99.0676H193.258V92.2971H193.234L190.34 99.0676H189.758L186.864 92.2971H186.842V99.0676H185.885V90.9982Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M198.386 90.9982H203.457V91.8867H199.343V94.4168H203.184V95.3062H199.343V98.1782H203.663V99.0676H198.386V90.9982Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M207.891 98.1782H209.713C211.561 98.1782 212.963 97.2431 212.963 95.0319C212.963 92.8218 211.561 91.8867 209.713 91.8867H207.891V98.1782ZM206.934 90.9982H210.034C211.617 90.9982 213.987 92.0586 213.987 95.0319C213.987 98.0083 211.617 99.0676 210.034 99.0676H206.934V90.9982Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M217.007 99.0676H217.965V90.9982H217.007V99.0676Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M227.105 92.6628C226.627 92.0119 225.863 91.6819 225.088 91.6819C223.288 91.6819 222.011 93.266 222.011 95.0319C222.011 96.9012 223.277 98.3839 225.088 98.3839C226.068 98.3839 226.855 97.9844 227.425 97.255L228.143 97.8582C227.425 98.8281 226.377 99.2724 225.088 99.2724C222.774 99.2724 220.986 97.4826 220.986 95.0319C220.986 92.6628 222.695 90.7935 225.088 90.7935C226.183 90.7935 227.254 91.1701 227.937 92.0586L227.105 92.6628Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M233.557 92.2295H233.533L231.858 96.1947H235.152L233.557 92.2295ZM233.123 90.9982H234.023L237.453 99.0676H236.336L235.516 97.0841H231.482L230.65 99.0676H229.568L233.123 90.9982Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M240.006 90.9982H240.964V98.1782H244.656V99.0676H240.006V90.9982Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M252.793 94.5539H253.648C254.708 94.5539 256.087 94.5539 256.087 93.2203C256.087 92.0586 255.073 91.8867 254.139 91.8867H252.793V94.5539ZM251.836 90.9982H253.899C255.46 90.9982 257.113 91.2258 257.113 93.2203C257.113 94.3939 256.349 95.1582 255.095 95.3519L257.386 99.0676H256.213L254.023 95.4434H252.793V99.0676H251.836V90.9982Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M260.51 90.9982H265.58V91.8867H261.468V94.4168H265.308V95.3062H261.468V98.1782H265.786V99.0676H260.51V90.9982Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M274.402 92.6628C273.923 92.0119 273.16 91.6819 272.384 91.6819C270.584 91.6819 269.307 93.266 269.307 95.0319C269.307 96.9012 270.573 98.3839 272.384 98.3839C273.364 98.3839 274.151 97.9844 274.72 97.255L275.438 97.8582C274.72 98.8281 273.672 99.2724 272.384 99.2724C270.071 99.2724 268.282 97.4826 268.282 95.0319C268.282 92.6628 269.991 90.7935 272.384 90.7935C273.478 90.7935 274.55 91.1701 275.234 92.0586L274.402 92.6628Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M284.739 95.0319C284.739 93.1746 283.439 91.6819 281.548 91.6819C279.656 91.6819 278.357 93.1746 278.357 95.0319C278.357 96.8903 279.656 98.3839 281.548 98.3839C283.439 98.3839 284.739 96.8903 284.739 95.0319ZM277.33 95.0319C277.33 92.5932 279.097 90.7935 281.548 90.7935C283.998 90.7935 285.765 92.5932 285.765 95.0319C285.765 97.4726 283.998 99.2724 281.548 99.2724C279.097 99.2724 277.33 97.4726 277.33 95.0319Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M289.514 94.5539H290.369C291.428 94.5539 292.807 94.5539 292.807 93.2203C292.807 92.0586 291.793 91.8867 290.859 91.8867H289.514V94.5539ZM288.556 90.9982H290.618C292.181 90.9982 293.833 91.2258 293.833 93.2203C293.833 94.3939 293.07 95.1582 291.817 95.3519L294.106 99.0676H292.933L290.744 95.4434H289.514V99.0676H288.556V90.9982Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M297.81 98.1782H299.635C301.48 98.1782 302.881 97.2431 302.881 95.0319C302.881 92.8218 301.48 91.8867 299.635 91.8867H297.81V98.1782ZM296.853 90.9982H299.953C301.538 90.9982 303.909 92.0586 303.909 95.0319C303.909 98.0083 301.538 99.0676 299.953 99.0676H296.853V90.9982Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M315.407 92.4223C315.089 91.9095 314.517 91.6819 313.937 91.6819C313.093 91.6819 312.216 92.0814 312.216 93.0384C312.216 93.7788 312.626 94.1097 313.914 94.5202C315.168 94.9187 316.331 95.3291 316.331 96.9132C316.331 98.5201 314.951 99.2724 313.493 99.2724C312.558 99.2724 311.555 98.9643 311.007 98.1554L311.828 97.4826C312.17 98.0759 312.854 98.3839 313.549 98.3839C314.37 98.3839 315.303 97.9049 315.303 96.9807C315.303 95.9899 314.633 95.818 313.196 95.341C312.057 94.9644 311.19 94.4625 311.19 93.1189C311.19 91.5677 312.523 90.7935 313.937 90.7935C314.837 90.7935 315.601 91.0439 316.193 91.7386L315.407 92.4223Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M320.844 95.5914L317.835 90.9982H319.054L321.323 94.6454L323.658 90.9982H324.81L321.8 95.5914V99.0676H320.844V95.5914Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M330.565 92.4223C330.245 91.9095 329.675 91.6819 329.094 91.6819C328.251 91.6819 327.374 92.0814 327.374 93.0384C327.374 93.7788 327.784 94.1097 329.072 94.5202C330.326 94.9187 331.487 95.3291 331.487 96.9132C331.487 98.5201 330.109 99.2724 328.65 99.2724C327.716 99.2724 326.713 98.9643 326.165 98.1554L326.986 97.4826C327.328 98.0759 328.012 98.3839 328.707 98.3839C329.528 98.3839 330.461 97.9049 330.461 96.9807C330.461 95.9899 329.79 95.818 328.354 95.341C327.215 94.9644 326.348 94.4625 326.348 93.1189C326.348 91.5677 327.681 90.7935 329.094 90.7935C329.995 90.7935 330.759 91.0439 331.351 91.7386L330.565 92.4223Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M339.283 91.8867H336.617V99.0676H335.659V91.8867H332.992V90.9982H339.283V91.8867Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M341.665 90.9982H346.736V91.8867H342.623V94.4168H346.463V95.3062H342.623V98.1782H346.942V99.0676H341.665V90.9982Z" fill="var(--logo-black)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M349.905 90.9982H351.329L354.064 97.3236H354.087L356.845 90.9982H358.236V99.0676H357.278V92.2971H357.255L354.361 99.0676H353.779L350.884 92.2971H350.863V99.0676H349.905V90.9982Z" fill="var(--logo-black)"/>
+</svg>

package/packages/framework/esm-styleguide/src/logo/openmrs-logo-icon.svg

@@ -0,0 +1,6 @@
+<svg id="omrs-logo-icon" width="121" height="118" viewBox="0 0 121 118" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M40.436 39.474C45.505 34.405 52.509 31.269 60.247 31.269C67.964 31.269 74.952 34.391 80.017 39.436L80.038 20.78C74.107 17.725 67.376 16 60.247 16C53.114 16 46.348 17.943 40.415 20.999L40.436 39.474Z" fill="var(--logo-red)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M80.038 79.064C74.969 84.134 67.968 87.269 60.23 87.269C52.513 87.269 45.525 84.148 40.456 79.102L40.436 97.759C46.37 100.813 53.098 102.539 60.23 102.539C67.363 102.539 74.093 100.813 80.024 97.758L80.038 79.064Z" fill="var(--logo-orange)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M40.474 79.089C35.405 74.02 32.269 67.019 32.269 59.281C32.269 51.564 35.39 44.577 40.436 39.508L21.779 39.488C18.725 45.421 17 52.148 17 59.281C17 66.414 18.725 73.144 21.782 79.076L40.474 79.089Z" fill="var(--logo-purple)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M80.027 39.435C85.096 44.503 88.232 51.508 88.232 59.246C88.232 66.963 85.111 73.951 80.064 79.015L98.722 79.036C101.776 73.105 103.501 66.375 103.501 59.246C103.501 52.112 101.776 45.381 98.72 39.448L80.027 39.435Z" fill="var(--logo-green)"/>
+</svg>