fhir-react 0.3.4 → 0.3.7

package/src/components/resources/ResourceCategory/ResourceCategory.js

@@ -1,22 +1,14 @@
-import { Root, Title } from '../../ui';
-import HeaderIcon from '../../datatypes/HeaderIcon';
+import { Header, Root } from '../../ui';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isUrl } from '../../../utils/isUrl';
-
-const ResourceCategory = props => {
-  const { title, itemsCount, fhirIcons } = props;
 
+const ResourceCategory = ({ title, itemsCount, fhirIcons }) => {
   const parseNumber = value =>
     /^[1-9]+\d*$/.test(value) ? Number.parseInt(value) : null;
 
   const getItemsCountLabel = () =>
     `${parsedItemsCount} ${parsedItemsCount === 1 ? 'item' : 'items'}`;
 
-  const headerIcon = isUrl(fhirIcons)
-    ? fhirIcons
-    : fhirIcons && fhirIcons['ResourceCategory'];
-
   const parsedItemsCount = parseNumber(itemsCount);
 
   return (
@@ -26,8 +18,11 @@ const ResourceCategory = props => {
         className="btn d-flex align-items-center justify-content-between w-100 py-4 px-4 bg-white"
       >
         <div className="d-flex gap-2">
-          <HeaderIcon headerIcon={headerIcon} />
-          <Title data-testid="title">{title}</Title>
+          <Header
+            resourceName={'ResourceCategory'}
+            title={title}
+            icon={fhirIcons}
+          />
         </div>
         <div className="d-flex gap-2 align-items-center">
           {parsedItemsCount > 0 && (

package/src/components/resources/ResourceCategory/ResourceCategory.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ResourceCategory from './ResourceCategory';
 import fhirIcons from '../../../fixtures/example-icons';
+import ResourceCategoryIcon from '../../../assets/containers/ResourceCategory/resource-category.svg';
 
 export default { title: 'ResourceCategory' };
 
@@ -9,7 +10,7 @@ export const ExampleWithAllProperties = () => {
     <ResourceCategory
       itemsCount={41}
       title="Resource name"
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/ResourceCategory/resource-category.svg')}
     />
   );
 };
@@ -19,7 +20,7 @@ export const ExampleWith1Item = () => {
     <ResourceCategory
       itemsCount={'1'}
       title="Resource name"
-      fhirIcons={fhirIcons}
+      fhirIcons={ResourceCategoryIcon}
     />
   );
 };
@@ -27,3 +28,13 @@ export const ExampleWith1Item = () => {
 export const ExampleWithoutItemsCount = () => {
   return <ResourceCategory title="Resource name" fhirIcons={fhirIcons} />;
 };
+
+export const ExampleWith1ItemAndDisableIcon = () => {
+  return (
+    <ResourceCategory
+      itemsCount={'1'}
+      title="Resource name"
+      fhirIcons={false}
+    />
+  );
+};

package/src/components/resources/ResourceCategory/ResourceCategory.test.js

@@ -5,42 +5,107 @@ import fhirIcons from '../../../fixtures/example-icons';
 import ResourceCategory from './ResourceCategory';
 
 describe('should render ResourceCategory component properly', () => {
-  const placeholderResource = fhirIcons['ResourceCategory'].props;
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      itemsCount: '41',
+      title: 'Resource name',
+    };
+
+    const { getByAltText } = render(<ResourceCategory {...defaultProps} />);
+    const headerIcon = getByAltText('resource category');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      itemsCount: '41',
+      title: 'Resource name',
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<ResourceCategory {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      itemsCount: '41',
+      title: 'Resource name',
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/ResourceCategory/resource-category.svg')}
+          alt="resource category"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<ResourceCategory {...defaultProps} />);
+    const headerIcon = getByAltText('resource category');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      itemsCount: '41',
+      title: 'Resource name',
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<ResourceCategory {...defaultProps} />);
+    const headerIcon = getByAltText('resource category');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      itemsCount: '41',
+      title: 'Resource name',
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<ResourceCategory {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
 
-  it('should render ResourceCategory component with icon and itemsCount > 1 correctly', () => {
+  it('should render ResourceCategory component with itemsCount > 1 correctly', () => {
     const defaultProps = {
       fhirIcons: fhirIcons,
       itemsCount: '41',
       title: 'Resource name',
     };
 
-    const { container, getByTestId, getByAltText } = render(
+    const { container, getByTestId } = render(
       <ResourceCategory {...defaultProps} />,
     );
     expect(container).not.toBeNull();
 
     expect(getByTestId('itemsCount').textContent).toContain('41 items');
     expect(getByTestId('title').textContent).toContain('Resource name');
-    const image = getByAltText(placeholderResource.alt);
-    expect(image.src).toContain(placeholderResource.src);
   });
 
-  it('should render ResourceCategory component with icon and itemsCount === 1 correctly', () => {
+  it('should render ResourceCategory component with itemsCount === 1 correctly', () => {
     const defaultProps = {
       fhirIcons: fhirIcons,
       itemsCount: 1,
       title: 'Resource name',
     };
 
-    const { container, getByTestId, getByAltText } = render(
+    const { container, getByTestId } = render(
       <ResourceCategory {...defaultProps} />,
     );
     expect(container).not.toBeNull();
 
     expect(getByTestId('itemsCount').textContent).toContain('1 item');
     expect(getByTestId('title').textContent).toContain('Resource name');
-    const image = getByAltText(placeholderResource.alt);
-    expect(image.src).toContain(placeholderResource.src);
   });
 
   it('should render ResourceCategory correctly with negative number passed as itemsCount', () => {
@@ -50,7 +115,7 @@ describe('should render ResourceCategory component properly', () => {
       title: 'Resource name',
     };
 
-    const { container, getByTestId, getByAltText, queryByTestId } = render(
+    const { container, getByTestId, queryByTestId } = render(
       <ResourceCategory {...defaultProps} />,
     );
     expect(container).not.toBeNull();
@@ -58,8 +123,6 @@ describe('should render ResourceCategory component properly', () => {
     const item = queryByTestId('itemsCount');
     expect(item).toBeNull();
     expect(getByTestId('title').textContent).toContain('Resource name');
-    const image = getByAltText(placeholderResource.alt);
-    expect(image.src).toContain(placeholderResource.src);
   });
 
   it('should render ResourceCategory correctly with invalid string passed as itemsCount', () => {
@@ -69,15 +132,13 @@ describe('should render ResourceCategory component properly', () => {
       title: 'Resource name',
     };
 
-    const { container, getByTestId, getByAltText, queryByTestId } = render(
+    const { container, getByTestId, queryByTestId } = render(
       <ResourceCategory {...defaultProps} />,
     );
     expect(container).not.toBeNull();
     const item = queryByTestId('itemsCount');
     expect(item).toBeNull();
     expect(getByTestId('title').textContent).toContain('Resource name');
-    const image = getByAltText(placeholderResource.alt);
-    expect(image.src).toContain(placeholderResource.src);
   });
 
   it('should render ResourceCategory correctly with floating point number passed as text in itemsCount', () => {
@@ -87,7 +148,7 @@ describe('should render ResourceCategory component properly', () => {
       title: 'Resource name',
     };
 
-    const { container, getByTestId, getByAltText, queryByTestId } = render(
+    const { container, getByTestId, queryByTestId } = render(
       <ResourceCategory {...defaultProps} />,
     );
     expect(container).not.toBeNull();
@@ -95,7 +156,5 @@ describe('should render ResourceCategory component properly', () => {
     const item = queryByTestId('itemsCount');
     expect(item).toBeNull();
     expect(getByTestId('title').textContent).toContain('Resource name');
-    const image = getByAltText(placeholderResource.alt);
-    expect(image.src).toContain(placeholderResource.src);
   });
 });

package/src/components/ui/bootstrap-reboot.min.css

@@ -173,8 +173,14 @@ sup {
 .fhir-resource kbd,
 .fhir-resource pre,
 .fhir-resource samp {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-    'Courier New', monospace;
+  font-family:
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    'Courier New',
+    monospace;
   font-size: 1em;
 }
 

package/src/components/ui/index.js

@@ -87,7 +87,7 @@ export const Title = props => (
 export const Badge = props => {
   return (
     <small
-      className={`fhir-ui__Badge text-capitalize d-flex align-items-center px-2 py-1 rounded-1 fw-bold ${getBadgeColor(
+      className={`fhir-ui__Badge text-capitalize d-flex align-items-center mx-1 px-2 py-1 rounded-1 fw-bold ${getBadgeColor(
         props,
       )}`}
       data-testid={props['data-testid']}
@@ -128,7 +128,7 @@ export const ValueUnit = props => (
 export const Body = ({ tableData = [], reverseContent, children }) => (
   <div className="fhir-ui__Body">
     {reverseContent ? children : null}
-    <div className="row">
+    <div className="row gap-3">
       {tableData.map(
         (value, index) =>
           value.status && (
@@ -199,10 +199,17 @@ export const TableHeader = props => {
   );
 };
 
-export const TableRow = props => <tr>{props.children}</tr>;
+export const TableRow = props => {
+  const { children, ...rest } = props;
+  return <tr {...rest}>{props.children}</tr>;
+};
 
 export const TableCell = props => (
-  <td className="align-text-top border-0" data-testid={props['data-testid']}>
+  <td
+    className={`align-middle border-0 ${props.className || ''}`}
+    data-testid={props['data-testid']}
+    style={props.style}
+  >
     {props.children}
   </td>
 );
@@ -225,6 +232,17 @@ export const MissingValue = () => (
   <span className="fhir-ui__MissingValue">-</span>
 );
 
+export const ValueSectionItem = props => {
+  return (
+    <div className="d-flex flex-column flex-sm-row my-2">
+      <div className="dataTable__value-label ps-0">
+        <Label>{props.label}</Label>
+      </div>
+      <Data data-testid={props['data-testid']}>{props.children}</Data>
+    </div>
+  );
+};
+
 export const NotEnoughData = props => (
   <div data-testid={props['data-testid']} className="fhir-ui__NotEnoughData">
     No additional data

package/src/fixtures/example-icons.jsx

@@ -1,6 +1,13 @@
 import React from 'react';
 
 export default {
+  Binary: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/Binary/binary.svg')}
+      alt="binary"
+    />
+  ),
   Condition: (
     <img
       className="header-icon__image"
@@ -33,7 +40,7 @@ export default {
     <img
       className="header-icon__image"
       src={require('../assets/containers/AllergyIntolerance/allergy-intolerance.svg')}
-      alt="sneezing emoji"
+      alt="allergy intolerance"
     />
   ),
   Appointment: (
@@ -47,7 +54,7 @@ export default {
     <img
       className="header-icon__image"
       src={require('../assets/containers/CarePlan/care-plan.svg')}
-      alt="note with a heart"
+      alt="care plan"
     />
   ),
   CareTeam: (
@@ -75,21 +82,21 @@ export default {
     <img
       className="header-icon__image"
       src={require('../assets/containers/Device/device.svg')}
-      alt="computer rack"
+      alt="device"
     />
   ),
   DiagnosticReport: (
     <img
       className="header-icon__image"
       src={require('../assets/containers/DiagnosticReport/diagnostic-report.svg')}
-      alt="note with shapes"
+      alt="diagnostic report"
     />
   ),
   DocumentReference: (
     <img
       className="header-icon__image"
       src={require('../assets/containers/DocumentReference/document-reference.svg')}
-      alt="hand holding a note"
+      alt="document reference"
     />
   ),
   Encounter: (
@@ -110,14 +117,14 @@ export default {
     <img
       className="header-icon__image"
       src={require('../assets/containers/FamilyMemberHistory/family-member-history.svg')}
-      alt="parent and child"
+      alt="family member history"
     />
   ),
   Goal: (
     <img
       className="header-icon__image"
       src={require('../assets/containers/Goal/goal.svg')}
-      alt="arrow hits bullseye"
+      alt="goal"
     />
   ),
   List: (
@@ -138,7 +145,21 @@ export default {
     <img
       className="header-icon__image"
       src={require('../assets/containers/Medication/medication.svg')}
-      alt="some pills"
+      alt="medication"
+    />
+  ),
+  MedicationOrder: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/MedicationOrder/medication-order.svg')}
+      alt="medication order"
+    />
+  ),
+  MedicationRequest: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/MedicationRequest/medication-request.svg')}
+      alt="medication request"
     />
   ),
   MedicationAdministration: (
@@ -159,7 +180,7 @@ export default {
     <img
       className="header-icon__image"
       src={require('../assets/containers/MedicationStatement/medication-statement.svg')}
-      alt="note with symmetrical cross"
+      alt="medication statement"
     />
   ),
   Observation: (
@@ -169,6 +190,13 @@ export default {
       alt="observation"
     />
   ),
+  Organization: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/Organization/organization.svg')}
+      alt="organization"
+    />
+  ),
   Questionnaire: (
     <img
       className="header-icon__image"
@@ -193,8 +221,8 @@ export default {
   ResourceCategory: (
     <img
       className="header-icon__image"
-      src={require('../assets/containers/ResourceCategory/resource-placeholder.svg')}
-      alt="header icon"
+      src={require('../assets/containers/ResourceCategory/resource-category.svg')}
+      alt="resource category"
     />
   ),
   Patient: (
@@ -204,4 +232,11 @@ export default {
       alt="patient"
     />
   ),
+  Coverage: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/Coverage/coverage.svg')}
+      alt="coverage"
+    />
+  ),
 };

package/src/style.scss

@@ -86,6 +86,7 @@ $enable-negative-margins: true;
   width: auto;
   @include media-breakpoint-up(sm) {
     width: 130px;
+    min-width: 130px;
   }
 }
 

package/src/utils/formatDate.js

@@ -1,7 +1,6 @@
 export const formatDate = (date, locale) => {
   const rawDate = new Date(date);
-  const usDate = rawDate.toLocaleDateString(locale, whichOptions(date));
-  return usDate;
+  return rawDate.toLocaleDateString(locale, whichOptions(date));
 };
 
 const whichOptions = date => {
@@ -9,13 +8,16 @@ const whichOptions = date => {
   const YEAR_MONTH_FORMAT = 'YYYY-MM';
 
   if (date.length === YEAR_FORMAT.length) {
-    return { year: 'numeric' };
+    return { year: 'numeric', timeZone: 'UTC' };
   }
   if (date.length <= YEAR_MONTH_FORMAT.length) {
     return {
       year: 'numeric',
       month: 'long',
+      timeZone: 'UTC',
     };
   }
-  return;
+  return {
+    timeZone: 'UTC',
+  };
 };

package/src/components/resources/AllergyIntolerance/AllergyIntolerance.css

@@ -1,4 +0,0 @@
-.fhir-resource__AllergyIntolerance__grouping {
-  display: flex;
-  align-items: center;
-}

package/src/components/resources/CarePlan/CarePlan.css

@@ -1,7 +0,0 @@
-.fhir-resource__CarePlan__activity {
-  margin-bottom: 0.5rem;
-}
-
-.fhir-resource__CarePlan__activity-title {
-  font-weight: bold;
-}