(feat) O3-3178: Add a reusable dashboard header to the styleguide (#1084

)

Co-authored-by: Brandon Istenes <bistenes@gmail.com>

packages/framework/esm-framework/docs/API.md

@@ -873,6 +873,16 @@ ___
 
 ___
 
+### PageHeaderProps
+
+Ƭ **PageHeaderProps**: `XOR`<[`PageHeaderWrapperProps`](interfaces/PageHeaderWrapperProps.md), [`PageHeaderContentProps`](interfaces/PageHeaderContentProps.md)\>
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/page-header/page-header.component.tsx:29](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx#L29)
+
+___
+
 ### SnackbarType
 
 Ƭ **SnackbarType**: ``"error"`` \| ``"info"`` \| ``"info-square"`` \| ``"success"`` \| ``"warning"`` \| ``"warning-alt"``
@@ -1121,6 +1131,16 @@ ___
 
 ___
 
+### AppointmentsPictogram
+
+• `Const` **AppointmentsPictogram**: `MemoExoticComponent`<`ForwardRefExoticComponent`<[`PictogramProps`](API.md#pictogramprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:48](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L48)
+
+___
+
 ### ArrowDownIcon
 
 • `Const` **ArrowDownIcon**: `MemoExoticComponent`<`ForwardRefExoticComponent`<[`IconProps`](API.md#iconprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
@@ -1425,6 +1445,16 @@ ___
 
 ___
 
+### HomePictogram
+
+• `Const` **HomePictogram**: `MemoExoticComponent`<`ForwardRefExoticComponent`<[`PictogramProps`](API.md#pictogramprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:36](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L36)
+
+___
+
 ### HospitalBedIcon
 
 • `Const` **HospitalBedIcon**: `MemoExoticComponent`<`ForwardRefExoticComponent`<[`IconProps`](API.md#iconprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
@@ -1467,6 +1497,16 @@ ___
 
 ___
 
+### LaboratoryPictogram
+
+• `Const` **LaboratoryPictogram**: `MemoExoticComponent`<`ForwardRefExoticComponent`<[`PictogramProps`](API.md#pictogramprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:60](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L60)
+
+___
+
 ### ListCheckedIcon
 
 • `Const` **ListCheckedIcon**: `MemoExoticComponent`<`ForwardRefExoticComponent`<[`IconProps`](API.md#iconprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
@@ -1601,6 +1641,16 @@ ___
 
 ___
 
+### PatientListsPictogram
+
+• `Const` **PatientListsPictogram**: `MemoExoticComponent`<`ForwardRefExoticComponent`<[`PictogramProps`](API.md#pictogramprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:42](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L42)
+
+___
+
 ### PedestrianFamilyIcon
 
 • `Const` **PedestrianFamilyIcon**: `MemoExoticComponent`<`ForwardRefExoticComponent`<[`IconProps`](API.md#iconprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
@@ -1693,6 +1743,16 @@ ___
 
 ___
 
+### ServiceQueuesPictogram
+
+• `Const` **ServiceQueuesPictogram**: `MemoExoticComponent`<`ForwardRefExoticComponent`<[`PictogramProps`](API.md#pictogramprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/pictograms/pictograms.tsx:54](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/pictograms/pictograms.tsx#L54)
+
+___
+
 ### ShoppingCartAddItemIcon
 
 • `Const` **ShoppingCartAddItemIcon**: `MemoExoticComponent`<`ForwardRefExoticComponent`<[`IconProps`](API.md#iconprops) & `RefAttributes`<`SVGSVGElement`\>\>\> = `ShoppingCartArrowDownIcon`
@@ -1928,6 +1988,62 @@ ___
 
 ___
 
+### PageHeader
+
+• `Const` **PageHeader**: `React.FC`<[`PageHeaderProps`](API.md#pageheaderprops)\>
+
+The page header is typically located at the top of a dashboard. It includes a pictogram on the left,
+the name of the dashboard or page, and the `implementationName` from the configuration, which is typically
+the name of the clinic or the authority that is using the implementation. It can also include interactive
+content on the right-hand side. It can be used in two ways:
+
+1. Alone, in order to render just the page header, with no content on the right side:
+
+**`example`**
+```tsx
+  <PageHeader title="My Dashboard" illustration={<Illustration />} />
+```
+
+2. Wrapped around the [PageHeaderContent](API.md#pageheadercontent) component, in order to render the page header on the left
+and some other content on the right side:
+
+**`example`**
+```tsx
+  <PageHeader>
+    <PageHeaderContent title="My Dashboard" illustration={<Illustration />} />
+    <Button>Click me</Button>
+  </PageHeader>
+```
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/page-header/page-header.component.tsx:57](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx#L57)
+
+___
+
+### PageHeaderContent
+
+• `Const` **PageHeaderContent**: `React.FC`<[`PageHeaderContentProps`](interfaces/PageHeaderContentProps.md)\>
+
+The PageHeaderContent component should be used inside the [PageHeader](API.md#pageheader) component. It is used if the page
+header should include some content on the right side, in addition to the pictogram and the name of the page.
+If only the page header is needed, without any additional content, the [PageHeader](API.md#pageheader) component can be used
+on its own, and the PageHeaderContent component is not needed.
+
+**`example`**
+```tsx
+  <PageHeader>
+    <PageHeaderContent title="My Dashboard" illustration={<Illustration />} />
+    <Button>Click me</Button>
+  </PageHeader>
+```
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/page-header/page-header.component.tsx:85](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx#L85)
+
+___
+
 ### ResponsiveWrapper
 
 • `Const` **ResponsiveWrapper**: `React.FC`<[`ResponsiveWrapperProps`](interfaces/ResponsiveWrapperProps.md)\>

packages/framework/esm-framework/docs/interfaces/PageHeaderContentProps.md

@@ -0,0 +1,41 @@
+[@openmrs/esm-framework](../API.md) / PageHeaderContentProps
+
+# Interface: PageHeaderContentProps
+
+## Table of contents
+
+### UI Properties
+
+- [className](PageHeaderContentProps.md#classname)
+- [illustration](PageHeaderContentProps.md#illustration)
+- [title](PageHeaderContentProps.md#title)
+
+## UI Properties
+
+### className
+
+• `Optional` **className**: `string`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/page-header/page-header.component.tsx:11](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx#L11)
+
+___
+
+### illustration
+
+• **illustration**: `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`\>\>
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/page-header/page-header.component.tsx:10](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx#L10)
+
+___
+
+### title
+
+• **title**: `string` \| `Element`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/page-header/page-header.component.tsx:9](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx#L9)

packages/framework/esm-framework/docs/interfaces/PageHeaderWrapperProps.md

@@ -0,0 +1,30 @@
+[@openmrs/esm-framework](../API.md) / PageHeaderWrapperProps
+
+# Interface: PageHeaderWrapperProps
+
+## Table of contents
+
+### UI Properties
+
+- [children](PageHeaderWrapperProps.md#children)
+- [className](PageHeaderWrapperProps.md#classname)
+
+## UI Properties
+
+### children
+
+• **children**: `ReactNode`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/page-header/page-header.component.tsx:15](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx#L15)
+
+___
+
+### className
+
+• `Optional` **className**: `string`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/page-header/page-header.component.tsx:16](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx#L16)

packages/framework/esm-framework/docs/interfaces/StyleguideConfigObject.md

@@ -9,6 +9,7 @@
 - [Brand color #1](StyleguideConfigObject.md#brand color #1)
 - [Brand color #2](StyleguideConfigObject.md#brand color #2)
 - [Brand color #3](StyleguideConfigObject.md#brand color #3)
+- [implementationName](StyleguideConfigObject.md#implementationname)
 - [patientPhotoConceptUuid](StyleguideConfigObject.md#patientphotoconceptuuid)
 - [preferredCalendar](StyleguideConfigObject.md#preferredcalendar)
 
@@ -44,13 +45,23 @@ ___
 
 ___
 
+### implementationName
+
+• **implementationName**: `string`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/config-schema.ts:7](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/config-schema.ts#L7)
+
+___
+
 ### patientPhotoConceptUuid
 
 • **patientPhotoConceptUuid**: `string`
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/config-schema.ts:7](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/config-schema.ts#L7)
+[packages/framework/esm-styleguide/src/config-schema.ts:8](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/config-schema.ts#L8)
 
 ___
 
@@ -64,4 +75,4 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/config-schema.ts:8](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/config-schema.ts#L8)
+[packages/framework/esm-styleguide/src/config-schema.ts:9](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/config-schema.ts#L9)

packages/framework/esm-styleguide/src/config-schema.ts

@@ -4,6 +4,7 @@ export interface StyleguideConfigObject {
   'Brand color #1': string;
   'Brand color #2': string;
   'Brand color #3': string;
+  implementationName: string;
   patientPhotoConceptUuid: string;
   preferredCalendar: {
     [key: string]: string;
@@ -23,6 +24,11 @@ export const esmStyleGuideSchema = {
     _default: '#007d79',
     _type: Type.String,
   },
+  implementationName: {
+    _type: Type.String,
+    _description: 'A name of the place (or authority) where all possible locations a user can choose are located.',
+    _default: 'Clinic',
+  },
   patientPhotoConceptUuid: {
     _type: Type.ConceptUuid,
     _default: '736e8771-e501-4615-bfa7-570c03f4bef5',

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

@@ -8,6 +8,7 @@ import { setupPictograms } from './pictograms/pictogram-registration';
 export * from './breakpoints';
 export * from './spinner';
 export * from './notifications';
+export * from './page-header';
 export * from './toasts';
 export * from './snackbars';
 export * from './modals';

packages/framework/esm-styleguide/src/page-header/index.ts

@@ -0,0 +1 @@
+export * from './page-header.component';