From 0c062795891667a982d94783f838d46d691321e5 Mon Sep 17 00:00:00 2001 From: Jamie Arodi <51090527+arodidev@users.noreply.github.com> Date: Wed, 17 Apr 2024 10:40:49 +0300 Subject: [PATCH] (feat) O3-2901: Add a page header to the home page (#186) * home page header * Update translations file * cleanup * load header via extension * loaded header via extension * remove tertiary files * removed tertiary files commited * removed extra committed files * cleanup * yarn.lock * PR reviews * cleanup * PR review resolutions * updated translations * Update packages/esm-home-app/src/homepage-header-date/homepage-header-date.scss Co-authored-by: Dennis Kigen * PR reviews * translations and cleanup * PR review resolutions * reinstate RTL style overrides * translations * Name changes * Useful tweaks --------- Co-authored-by: Dennis Kigen --- .../src/dashboard/home-dashboard.scss | 4 -- .../src/header-date/header-date.component.tsx | 15 +++++ .../src/header-date/header-date.scss | 3 + packages/esm-home-app/src/index.ts | 2 + .../src/page-header/page-header.component.tsx | 39 +++++++++++ .../src/page-header/page-header.scss | 66 +++++++++++++++++++ .../page-illustration.component.tsx | 24 +++++++ packages/esm-home-app/src/routes.json | 5 ++ packages/esm-home-app/translations/en.json | 4 +- 9 files changed, 157 insertions(+), 5 deletions(-) create mode 100644 packages/esm-home-app/src/header-date/header-date.component.tsx create mode 100644 packages/esm-home-app/src/header-date/header-date.scss create mode 100644 packages/esm-home-app/src/page-header/page-header.component.tsx create mode 100644 packages/esm-home-app/src/page-header/page-header.scss create mode 100644 packages/esm-home-app/src/page-header/page-illustration.component.tsx diff --git a/packages/esm-home-app/src/dashboard/home-dashboard.scss b/packages/esm-home-app/src/dashboard/home-dashboard.scss index 8a1eea03a..85beb97cb 100644 --- a/packages/esm-home-app/src/dashboard/home-dashboard.scss +++ b/packages/esm-home-app/src/dashboard/home-dashboard.scss @@ -14,10 +14,6 @@ width: 100%; } } -/*TO BE REMOVED ONCE WE IMPROVE LEFT SIDE NAVIGATION*/ -li::marker{ - font-size: 0px; -} .logoSection { display: flex; diff --git a/packages/esm-home-app/src/header-date/header-date.component.tsx b/packages/esm-home-app/src/header-date/header-date.component.tsx new file mode 100644 index 000000000..d042d595e --- /dev/null +++ b/packages/esm-home-app/src/header-date/header-date.component.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Calendar } from '@carbon/react/icons'; +import { formatDate } from '@openmrs/esm-framework'; +import styles from './header-date.scss'; + +const HeaderDate: React.FC = () => { + return ( + <> + + {formatDate(new Date(), { mode: 'standard' })} + + ); +}; + +export default HeaderDate; diff --git a/packages/esm-home-app/src/header-date/header-date.scss b/packages/esm-home-app/src/header-date/header-date.scss new file mode 100644 index 000000000..95170282d --- /dev/null +++ b/packages/esm-home-app/src/header-date/header-date.scss @@ -0,0 +1,3 @@ +.value { + margin-left: 0.25rem +} diff --git a/packages/esm-home-app/src/index.ts b/packages/esm-home-app/src/index.ts index ae503ffe6..bf3e71009 100644 --- a/packages/esm-home-app/src/index.ts +++ b/packages/esm-home-app/src/index.ts @@ -24,6 +24,8 @@ export const homeWidgetDbLink = getSyncLifecycle(createDashboardLink(dashboardMe export const homeWidgetDashboard = getSyncLifecycle(homeWidgetDashboardComponent, options); +export const pageHeader = getAsyncLifecycle(() => import('./page-header/page-header.component'), options); + export const metrics = getAsyncLifecycle(() => import('./metrics/metrics.component'), options); export function startupApp() { diff --git a/packages/esm-home-app/src/page-header/page-header.component.tsx b/packages/esm-home-app/src/page-header/page-header.component.tsx new file mode 100644 index 000000000..005287cb8 --- /dev/null +++ b/packages/esm-home-app/src/page-header/page-header.component.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Location } from '@carbon/react/icons'; +import { useSession } from '@openmrs/esm-framework'; +import HomepageIllustration from './page-illustration.component'; +import HeaderDate from '../header-date/header-date.component'; +import styles from './page-header.scss'; + +interface PageHeaderProps { + dashboardTitle: string; +} + +const PageHeader: React.FC = ({ dashboardTitle }) => { + const { t } = useTranslation(); + const session = useSession(); + const location = session?.sessionLocation?.display; + + return ( +
+
+ +
+

{t('home', 'Home')}

+

{dashboardTitle}

+
+
+
+
+ + {location} + · + +
+
+
+ ); +}; + +export default PageHeader; diff --git a/packages/esm-home-app/src/page-header/page-header.scss b/packages/esm-home-app/src/page-header/page-header.scss new file mode 100644 index 000000000..ecc2ddfec --- /dev/null +++ b/packages/esm-home-app/src/page-header/page-header.scss @@ -0,0 +1,66 @@ +@use '@carbon/colors'; +@use '@carbon/layout'; +@use '@carbon/type'; +@import '~@openmrs/esm-styleguide/src/vars'; + +.header { + @include type.type-style('body-compact-02'); + color: $text-02; + height: layout.$spacing-12; + background-color: $ui-02; + border-bottom: 1px solid $ui-03; + display: flex; + justify-content: space-between; +} + +.left-justified-items { + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; +} + +.right-justified-items { + @include type.type-style('body-compact-02'); + color: $text-02; + margin: 1rem; +} + +.page-name { + @include type.type-style('heading-04'); +} + +.page-labels { + margin: 1rem 0; + + p:first-of-type { + margin-bottom: 0.25rem; + } +} + +.date-and-location { + display: flex; + justify-content: flex-end; + align-items: center; +} + +.value { + margin-left: 0.25rem; +} + +.middot { + margin: 0 0.5rem; +} + +// Overriding styles for RTL support +html[dir='rtl'] { + .date-and-location { + & > svg { + order: -1; + } + + & > span:nth-child(2) { + order: -2; + } + } +} diff --git a/packages/esm-home-app/src/page-header/page-illustration.component.tsx b/packages/esm-home-app/src/page-header/page-illustration.component.tsx new file mode 100644 index 000000000..54126cbea --- /dev/null +++ b/packages/esm-home-app/src/page-header/page-illustration.component.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +const HomepageIllustration: React.FC = () => { + const { t } = useTranslation(); + return ( + + {t('homepageIllustration', 'Homepage illustration')} + + + + + + + ); +}; + +export default HomepageIllustration; diff --git a/packages/esm-home-app/src/routes.json b/packages/esm-home-app/src/routes.json index debbd418c..3d28a3682 100644 --- a/packages/esm-home-app/src/routes.json +++ b/packages/esm-home-app/src/routes.json @@ -32,6 +32,11 @@ "online": true, "offline": true }, + { + "name": "page-header", + "slot": "home-dashboard-slot", + "component": "pageHeader" + }, { "name": "metrics-slot", "slot": "home-dashboard-slot", diff --git a/packages/esm-home-app/translations/en.json b/packages/esm-home-app/translations/en.json index a5ff8c612..477e93a06 100644 --- a/packages/esm-home-app/translations/en.json +++ b/packages/esm-home-app/translations/en.json @@ -1,3 +1,5 @@ { - "Home": "Home" + "home": "Home", + "Home": "Home", + "homepageIllustration": "Homepage illustration" }