MF-635: Fix patient chart widget card headers

openmrs · Oct 30, 2021 · 6139e20 · 6139e20
1 parent fb41112
commit 6139e20
Show file tree

Hide file tree

Showing 33 changed files with 414 additions and 171 deletions.
diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-detailed-summary.component.tsx
@@ -86,7 +86,7 @@ const AllergiesDetailedSummary: React.FC<AllergiesDetailedSummaryProps> = ({ pat
     return (
       <div className={styles.widgetCard}>
         <div className={styles.allergiesHeader}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+          <h4>{headerTitle}</h4>
           <span>{isValidating ? <InlineLoading /> : null}</span>
           {showAddAllergy && (
             <Button kind="ghost" renderIcon={Add16} iconDescription="Add allergies" onClick={launchAllergiesForm}>

diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.component.tsx
@@ -22,7 +22,7 @@ import {
 } from '@openmrs/esm-patient-common-lib';
 import { useTranslation } from 'react-i18next';
 import { useAllergies } from './allergy-intolerance.resource';
-import { usePagination } from '@openmrs/esm-framework';
+import { useLayoutType, usePagination } from '@openmrs/esm-framework';
 import { allergiesToShowCount, patientAllergiesFormWorkspace } from '../constants';
 
 interface AllergiesOverviewProps {
@@ -37,6 +37,7 @@ const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient, showAddA
   const headerTitle = t('allergies', 'Allergies');
   const urlLabel = t('seeAll', 'See all');
   const pageUrl = window.spaBase + basePath + '/allergies';
+  const isTablet = useLayoutType() === 'tablet';
 
   const { data: allergies, isError, isLoading, isValidating } = useAllergies(patient.id);
   const { results: paginatedAllergies, goTo, currentPage } = usePagination(allergies ?? [], allergiesToShowCount);
@@ -68,8 +69,8 @@ const AllergiesOverview: React.FC<AllergiesOverviewProps> = ({ patient, showAddA
   if (allergies?.length) {
     return (
       <div className={styles.widgetCard}>
-        <div className={styles.allergiesHeader}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+        <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
+          <h4>{headerTitle}</h4>
           <span>{isValidating ? <InlineLoading /> : null}</span>
           {showAddAllergy && (
             <Button kind="ghost" renderIcon={Add16} iconDescription="Add allergies" onClick={launchAllergiesForm}>

diff --git a/packages/esm-patient-allergies-app/src/allergies/allergies-overview.scss b/packages/esm-patient-allergies-app/src/allergies/allergies-overview.scss
@@ -6,18 +6,34 @@
   border: 1px solid $ui-03;
 }
 
-.allergiesHeader {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
 }
 
-.allergiesHeader > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.scss b/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.scss
@@ -9,28 +9,44 @@
 $color-blue-30 : #a6c8ff;
 $color-blue-10: #edf5ff;
 
-.card {
+.widgetCard {
   border: 1px solid $ui-03;
 }
 
 .productiveHeading01 {
   @include carbon--type-style("productive-heading-01");
 }
 
-.appointmentsHeader {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
 }
 
-.appointmentsHeader > h4:after {
-  content: "";
-  display: block;
-  width: $spacing-07;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
 
 .contentSwitcherWrapper {

diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.tsx b/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import Add16 from '@carbon/icons-react/es/add/16';
-import { attach } from '@openmrs/esm-framework';
+import { useLayoutType } from '@openmrs/esm-framework';
 import { EmptyDataIllustration, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import { Button, DataTableSkeleton, ContentSwitcher, InlineLoading, Switch, Tile } from 'carbon-components-react';
 import { useAppointments } from './appointments.resource';
@@ -22,6 +22,7 @@ enum AppointmentTypes {
 const AppointmentsBase: React.FC<AppointmentsBaseProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const headerTitle = t('appointments', 'Appointments');
+  const isTablet = useLayoutType() === 'tablet';
 
   const [contentSwitcherValue, setContentSwitcherValue] = useState(0);
   const startDate = dayjs(new Date().toISOString()).subtract(6, 'month').toISOString();
@@ -40,9 +41,9 @@ const AppointmentsBase: React.FC<AppointmentsBaseProps> = ({ patientUuid }) => {
   }
   if (Object.keys(appointmentsData)?.length) {
     return (
-      <div className={styles.card}>
-        <div className={styles.appointmentsHeader}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+      <div className={styles.widgetCard}>
+        <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
+          <h4>{headerTitle}</h4>
           {isValidating ? (
             <span>
               <InlineLoading />

diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-base.component.tsx
@@ -7,7 +7,7 @@ import BiometricsChart from './biometrics-chart.component';
 import BiometricsPagination from './biometrics-pagination.component';
 import { Button, DataTableSkeleton, InlineLoading } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
-import { useConfig } from '@openmrs/esm-framework';
+import { useConfig, useLayoutType } from '@openmrs/esm-framework';
 import { useBiometrics } from './biometrics.resource';
 import {
   EmptyState,
@@ -39,6 +39,7 @@ const BiometricsBase: React.FC<BiometricsBaseProps> = ({
   const displayText = t('biometrics', 'biometrics');
   const headerTitle = t('biometrics', 'Biometrics');
   const [chartView, setChartView] = React.useState(false);
+  const isTablet = useLayoutType() === 'tablet';
 
   const config = useConfig() as ConfigObject;
   const { bmiUnit } = config.biometrics;
@@ -76,9 +77,9 @@ const BiometricsBase: React.FC<BiometricsBaseProps> = ({
   if (isError) return <ErrorState error={isError} headerTitle={headerTitle} />;
   if (biometrics?.length) {
     return (
-      <div className={styles.biometricsWidgetContainer}>
-        <div className={styles.biometricsHeaderContainer}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+      <div className={styles.widgetCard}>
+        <div className={isTablet ? styles.tabletHeader : styles.desktopHeader}>
+          <h4>{headerTitle}</h4>
           <div className={styles.backgroundDataFetchingIndicator}>
             <span>{isValidating ? <InlineLoading /> : null}</span>
           </div>

diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-overview.scss b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-overview.scss
@@ -2,18 +2,40 @@
 @import "~carbon-components/src/globals/scss/vars";
 @import "~carbon-components/src/globals/scss/mixins";
 
-.biometricsWidgetContainer {
-  background-color: $ui-background;
+.widgetCard {
   border: 1px solid $ui-03;
-  position: relative;
 }
 
-.biometricsHeaderContainer {
+.desktopHeader, .tabletHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: $spacing-04 0 $spacing-04 $spacing-05;
   background-color: $ui-background;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
+}
+
+.desktopHeader {  
+  height: 3rem;
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeader {  
+  height: 4.5rem;
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
 }
 
 .biometricsHeaderActionItems {
@@ -30,14 +52,6 @@
   margin: 0rem 0.5rem;
 }
 
-.biometricsHeaderContainer > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
-}
-
 .toggleButtons {
   width: fit-content;
   margin: 0 $spacing-03;
@@ -98,10 +112,6 @@
   }
 }
 
-.customRow tbody{
-  white-space: nowrap;
-}
-
 .backgroundDataFetchingIndicator {
   align-items: center;
   display: flex;

diff --git a/packages/esm-patient-biometrics-app/src/biometrics/biometrics-pagination.component.tsx b/packages/esm-patient-biometrics-app/src/biometrics/biometrics-pagination.component.tsx
@@ -36,7 +36,7 @@ const BiometricsPagination: React.FC<BiometricsPaginationProps> = ({
       <TableContainer>
         <DataTable rows={paginatedBiometrics} headers={tableHeaders} isSortable size="short">
           {({ rows, headers, getHeaderProps, getTableProps }) => (
-            <Table {...getTableProps()} className={styles.customRow}>
+            <Table {...getTableProps()} useZebraStyles>
               <TableHead>
                 <TableRow>
                   {headers.map((header) => (

diff --git a/packages/esm-patient-common-lib/src/empty-state/empty-state.component.tsx b/packages/esm-patient-common-lib/src/empty-state/empty-state.component.tsx
@@ -3,6 +3,7 @@ import styles from './empty-state.scss';
 import { Link, Tile } from 'carbon-components-react';
 import { Trans, useTranslation } from 'react-i18next';
 import { EmptyDataIllustration } from './empty-data-illustration.component';
+import { useLayoutType } from '@openmrs/esm-framework';
 
 export interface EmptyStateProps {
   headerTitle: string;
@@ -12,10 +13,13 @@ export interface EmptyStateProps {
 
 export const EmptyState: React.FC<EmptyStateProps> = (props) => {
   const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
 
   return (
     <Tile light className={styles.tile}>
-      <h1 className={styles.heading}>{props.headerTitle}</h1>
+      <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+        <h4>{props.headerTitle}</h4>
+      </div>
       <EmptyDataIllustration />
       <p className={styles.content}>
         <Trans i18nKey="emptyStateText" values={{ displayText: props.displayText.toLowerCase() }}>

diff --git a/packages/esm-patient-common-lib/src/empty-state/empty-state.scss b/packages/esm-patient-common-lib/src/empty-state/empty-state.scss
@@ -13,12 +13,32 @@
   margin-bottom: $spacing-03;
 }
 
-.heading {
+.desktopHeading {
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading, .tabletHeading {
   text-align: left;
   text-transform: capitalize;
-  margin-bottom: 1rem;
-  @include carbon--type-style("productive-heading-03");
-  color: $text-02;
+  margin-bottom: $spacing-05;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
 }
 
 .heading:after {

diff --git a/packages/esm-patient-common-lib/src/error-state/error-state.component.tsx b/packages/esm-patient-common-lib/src/error-state/error-state.component.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styles from './error-state.scss';
 import { Tile } from 'carbon-components-react';
 import { useTranslation } from 'react-i18next';
+import { useLayoutType } from '@openmrs/esm-react-utils';
 
 export interface ErrorStateProps {
   error: any;
@@ -10,10 +11,13 @@ export interface ErrorStateProps {
 
 export const ErrorState: React.FC<ErrorStateProps> = ({ error, headerTitle }) => {
   const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
 
   return (
     <Tile light className={styles.tile}>
-      <h1 className={styles.heading}>{headerTitle}</h1>
+      <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+        <h4>{headerTitle}</h4>
+      </div>
       <p className={styles.errorMessage}>
         {t('error', 'Error')} {`${error?.response?.status}: `}
         {error?.response?.statusText}

diff --git a/packages/esm-patient-common-lib/src/error-state/error-state.scss b/packages/esm-patient-common-lib/src/error-state/error-state.scss
@@ -15,20 +15,32 @@
   color: $text-02;
 }
 
-.heading {
+.desktopHeading {
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading, .tabletHeading {
   text-align: left;
   text-transform: capitalize;
   margin-bottom: $spacing-05;
-  @include carbon--type-style("productive-heading-03");
-  color: $text-02;
-}
 
-.heading:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid $brand-teal-01;
+  }
 }
 
 .tile {