fhir-react 0.2.2 → 0.3.1

package/src/components/ui/index.js

@@ -1,69 +1,214 @@
 import React from 'react';
 
-import './index.css';
+import { getBadgeColor } from '../../utils/getBadgeColor';
+import HeaderIcon from '../datatypes/HeaderIcon';
 
-export const Header = props => (
-  <div className="fhir-ui__Header">{props.children}</div>
-);
+export const Header = props => {
+  const rightItemsClass = 'align-items-center flex-fill d-flex';
+
+  return (
+    <>
+      {// This condition was left due to fact, that to much changes in Header will generate many errors in tests. This condition will be removed after all changes have been made.
+      props.children || (
+        <div
+          className={`fhir-ui__${props.resourceName}-Header w-100 p-4 position-relative`}
+        >
+          <div
+            className={`fhir-ui__${props.resourceName}-Header__title-data ${
+              props.isAccordionOpenable ? 'header__title-row' : ''
+            } d-flex w-100 flex-column flex-sm-row`}
+          >
+            <div className="d-flex">
+              <div
+                className={`fhir-ui__${props.resourceName}-Header__icon flex-shrink-1 m-half me-2`}
+              >
+                <HeaderIcon headerIcon={props.icon} />
+              </div>
+              <div
+                className={`fhir-ui__${props.resourceName}-Header__title flex-fill text-start`}
+              >
+                <Title data-testid={props.titleTestID || 'title'}>
+                  {props.title || ''}
+                </Title>
+              </div>
+            </div>
+
+            <div
+              className={`fhir-ui__${props.resourceName}-Header__badges ps-1 ps-sm-2 mt-3 mt-sm-0 badges-max-width-sm flex-wrap flex-sm-nowrap justify-content-between justify-content-sm-end ${rightItemsClass}`}
+            >
+              {props.prefixBadge && (
+                <div className="me-3">{props.prefixBadge}</div>
+              )}
+              <div className="d-flex">
+                {props.badges}
+                {props.additionalBadge && (
+                  <div className="ms-3">{props.additionalBadge}</div>
+                )}
+              </div>
+            </div>
+          </div>
+          <div
+            className={`fhir-ui__${
+              props.resourceName
+            }-Header__additional-content w-100 justify-content-start d-flex  ${
+              props.additionalContent ? ' pt-2' : ''
+            }`}
+          >
+            {props.additionalContent}
+            <div
+              className={`fhir-ui__${props.resourceName}-Header__rightAdditionalContent justify-content-end ${rightItemsClass}`}
+            >
+              {props.rightAdditionalContent}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
 
 export const Title = props => (
-  <h4 className="fhir-ui__Title" data-testid="title">
+  <h4
+    className="fhir-ui__Title fw-bold fs-4 lh-base mb-0 w-90 title-width-sm"
+    data-testid={props['data-testid'] || 'title'}
+  >
     {props.children}
   </h4>
 );
 
-export const Badge = props => (
-  <span className="fhir-ui__Badge" data-testid={props['data-testid']}>
-    {props.children}
-  </span>
-);
+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(
+        props,
+      )}`}
+      data-testid={props['data-testid']}
+    >
+      {props.children}
+    </small>
+  );
+};
 
 export const BadgeSecondary = props => (
-  <span className="fhir-ui__BadgeSecondary" data-testid={props['data-testid']}>
+  <small
+    className={`fhir-ui__BadgeSecondary px-2 py-1 rounded-1 fw-bold ${getBadgeColor(
+      props,
+    )}`}
+    data-testid={props['data-testid']}
+  >
     {props.children}
-  </span>
+  </small>
+);
+
+export const ValueUnit = props => (
+  <div className="fhir-ui__ValueUnitRoot">
+    <span
+      data-testid="valueQuantity"
+      className="fhir-ui__ValueUnitQty fw-bold me-1"
+    >
+      {props.valueQty}
+    </span>
+    <span
+      data-testid="valueQuantityUnit"
+      className="fhir-ui__ValueUnit fw-bold text-gray-500"
+    >
+      {props.valueUnit}
+    </span>
+  </div>
 );
 
-export const Body = props => <div>{props.children}</div>;
+export const Body = ({ tableData = [], reverseContent, children }) => (
+  <div className="fhir-ui__Body">
+    {reverseContent ? children : null}
+    <div className="row">
+      {tableData.map(
+        (value, index) =>
+          value.status && (
+            <div
+              className="d-flex flex-column flex-sm-row"
+              key={`table-data-item-${index}`}
+            >
+              <div className="dataTable__value-label ps-0">
+                <Label>{value.label}</Label>
+              </div>
+              <Data data-testid={value.testId}>{value.data}</Data>
+            </div>
+          ),
+      )}
+    </div>
+    {!reverseContent ? children : null}
+  </div>
+);
 
 export const Value = props => (
-  <div className="fhir-ui__Value">
-    <label className="fhir-ui__Value-label">{props.label}</label>
-    <div data-testid={props['data-testid']}>{props.children}</div>
+  <div
+    className={`fhir-ui__Value d-flex align-items-center flex-wrap flex-sm-nowrap pt-3 pb-2 pt-sm-0 pb-sm-0 ${
+      props.dirColumn ? 'flex-column align-items-baseline' : ''
+    }`}
+  >
+    <Label>{props.label}</Label>
+    <Data data-testid={props['data-testid']}>{props.children}</Data>
   </div>
 );
 
-export const Root = props => (
-  <div className={`fhir-resource fhir-resource__${props.name}`}>
+export const Label = props => (
+  <div className="fhir-ui__Label font-source text-secondary lh-lg me-2">
+    {props.children}
+  </div>
+);
+
+export const Data = props => (
+  <div
+    className="fhir-ui__Data font-source fw-normal lh-lg text-break"
+    data-testid={props['data-testid']}
+  >
     {props.children}
   </div>
 );
 
+export const Root = props => (
+  <div className={`fhir-resource__${props.name}`}>{props.children}</div>
+);
+
 export const Table = props => (
-  <table className="fhir-ui__Table">{props.children}</table>
+  <div className="table-responsive">
+    <table className={`table table-striped mb-0 ${props.className || ''}`}>
+      {props.children}
+    </table>
+  </div>
 );
 
 export const TableHeader = props => {
   const { expand, noWordWrap } = props;
-  let className = 'fhir-ui__TableHeader';
-  if (expand) className += ' fhir-ui__TableHeader--expand';
-  if (noWordWrap) className += ' fhir-ui__TableHeader--no-word-wrap';
-  return <th className={className}>{props.children}</th>;
+  return (
+    <th
+      className={`${expand ? 'w-100' : ''} ${
+        noWordWrap ? 'text-nowrap' : ''
+      } text-gray-500`}
+    >
+      {props.children}
+    </th>
+  );
 };
 
-export const TableRow = props => (
-  <tr className="fhir-ui__TableRow">{props.children}</tr>
-);
+export const TableRow = props => <tr>{props.children}</tr>;
 
 export const TableCell = props => (
-  <td className="fhir-ui__TableCell" data-testid={props['data-testid']}>
+  <td className="align-text-top border-0" data-testid={props['data-testid']}>
     {props.children}
   </td>
 );
 
 export const ValueSection = props => (
-  <div className="fhir-ui__ValueSection" data-testid={props['data-testid']}>
-    <label className="fhir-ui__ValueSection-label">{props.label}</label>
+  <div
+    className={`fhir-ui__ValueSection ${props.marginTop ? 'mt-40' : ''} ${
+      props.marginBottom ? 'mb-40' : ''
+    } ${props.className || ''}`}
+    data-testid={props['data-testid']}
+  >
+    <label className="fhir-ui__ValueSection-label fw-bold mb-2">
+      {props.label}
+    </label>
     <div className="fhir-ui__ValueSection-body">{props.children}</div>
   </div>
 );
@@ -77,3 +222,20 @@ export const NotEnoughData = props => (
     No additional data
   </div>
 );
+
+export const Chevron = props => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20 8L12.3769 15.8393C12.277 15.9422 12.1414 16 12 16C11.8586 16 11.723 15.9422 11.6231 15.8393L4 8"
+      stroke={props.strokeColor}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/constants/badge-status.jsx

@@ -0,0 +1,98 @@
+export default {
+  // condition
+  active: 'bg-teal-100 text-teal-600',
+  recurrence: '',
+  relapse: 'bg-indigo-100 text-indigo-600',
+  inactive:
+    'bg-gray-100 text-gray-600 border border-1 rounded-1 border-gray-200',
+  remission: 'bg-cyan-100 text-cyan-600',
+  resolved: 'bg-blue-100 text-blue-600',
+  // immunization
+  'in-progress': 'bg-orange-100 text-orange-600',
+  'on-hold': 'bg-gray-100 text-pink-500',
+  completed: 'bg-teal-100 text-teal-600',
+  'entered-in-error': 'bg-red-100 text-red-600',
+  stopped: 'bg-gray-100 text-gray-600',
+  'not-done': 'bg-yellow-100 text-yellow-600',
+  // procedure
+  preparation: 'border border-1 rounded-1 border-blue-200 text-blue-600',
+  suspended: '',
+  aborted: '',
+  unknown: 'border border-1 rounded-1 border-gray-200 text-gray-600',
+  // practitioner
+  // allergy intolerance
+  unconfirmed: '',
+  confirmed: '',
+  refuted: '',
+  // appointment
+  proposed: '',
+  pending: '',
+  booked: '',
+  arrived: '',
+  fulfilled: '',
+  cancelled: '',
+  noshow: '',
+  'checked-in': '',
+  waitlist: '',
+  // care plan
+  draft: '',
+  revoked: '',
+  // care team
+  // claim
+  // claim response
+  // device
+  available: '',
+  'not-available': '',
+  // diagnostic report
+  registered: '',
+  partial: '',
+  preliminary: '',
+  final: '',
+  corrected: '',
+  appended: '',
+  // document reference
+  current: '',
+  superseded: '',
+  // encounter
+  planned: '',
+  triaged: '',
+  onleave: '',
+  finished: '',
+  // explanation of benefit
+  // family member history
+  'health-unknown': '',
+  // goal
+  accepted: '',
+  rejected: '',
+  achieved: '',
+  sustaining: '',
+  'on-target': '',
+  'ahead-of-target': '',
+  'behind-target': '',
+  // list
+  retired: '',
+  // location
+  // mediacation
+  brand: '',
+  // medication administration
+  // medication knowledge
+  // medication statement
+  intended: '',
+  'not-taken': '',
+  // observation
+  amended: '',
+  // procedure
+  // questionnaire
+  published: '',
+  // questionnaire response
+  // research study
+  'administratively-completed': '',
+  approved: '',
+  'closed-to-accrual': '',
+  'closed-to-accrual-and-intervention': '',
+  disapproved: '',
+  'in-review': '',
+  'temporarily-closed-to-accrual': '',
+  'temporarily-closed-to-accrual-and-intervention': '',
+  withdrawn: '',
+};

package/src/fixtures/dstu2/resources/condition/condition.svg

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="condition-icon" transform="translate(-28.001 -27.999)">
+    <g id="Group_10" data-name="Group 10" transform="translate(46.93 29.733) rotate(41)">
+      <path id="Path_8" data-name="Path 8" d="M0,0,1.538.027,1.583,2.6.044,2.576Z" transform="translate(1.052 2.07)" fill="#7cddc8"/>
+      <path id="Path_9" data-name="Path 9" d="M.5,0,3.068.044a.536.536,0,0,1,.522.524L3.607,1.6a.493.493,0,0,1-.5.506L.539,2.061a.536.536,0,0,1-.522-.524L0,.506A.493.493,0,0,1,.5,0Z" transform="translate(0 0)" fill="#7cddc8"/>
+    </g>
+    <g id="Group_11" data-name="Group 11" transform="translate(32.977 49.942) rotate(-139)">
+      <path id="Path_10" data-name="Path 10" d="M0,0,1.538.027,1.583,2.6.044,2.576Z" transform="translate(1.052 2.07)" fill="#7cddc8"/>
+      <path id="Path_11" data-name="Path 11" d="M.5,0,3.068.044a.536.536,0,0,1,.522.524L3.607,1.6a.493.493,0,0,1-.5.506L.539,2.061a.536.536,0,0,1-.522-.524L0,.506A.493.493,0,0,1,.5,0Z" transform="translate(0 0)" fill="#7cddc8"/>
+    </g>
+    <g id="Group_12" data-name="Group 12" transform="translate(49.748 47.527) rotate(132)">
+      <path id="Path_12" data-name="Path 12" d="M.044.027,1.589,0,1.545,2.565,0,2.592Z" transform="translate(0.977 2.061)" fill="#7cddc8"/>
+      <path id="Path_13" data-name="Path 13" d="M.542.044,3.116,0a.493.493,0,0,1,.506.5L3.6,1.53a.536.536,0,0,1-.524.522L.506,2.1A.493.493,0,0,1,0,1.593L.018.566A.536.536,0,0,1,.542.044Z" transform="translate(0 0)" fill="#7cddc8"/>
+    </g>
+    <path id="Path_14" data-name="Path 14" d="M.044.027,1.589,0,1.545,2.565,0,2.592Z" transform="translate(32.344 33.701) rotate(-48)" fill="#7cddc8"/>
+    <path id="Path_15" data-name="Path 15" d="M.542.044,3.116,0a.493.493,0,0,1,.506.5L3.6,1.53a.536.536,0,0,1-.524.522L.506,2.1A.493.493,0,0,1,0,1.593L.018.566A.536.536,0,0,1,.542.044Z" transform="translate(30.159 33.048) rotate(-48)" fill="#7cddc8"/>
+    <g id="Group_13" data-name="Group 13" transform="translate(38.427 27.999)">
+      <path id="Path_16" data-name="Path 16" d="M0,0,1.522.008l.013,2.6L.013,2.6Z" transform="translate(1.023 2.085)" fill="#7cddc8"/>
+      <path id="Path_17" data-name="Path 17" d="M.393-.1,2.93-.086a.521.521,0,0,1,.51.523l.005,1.041a.508.508,0,0,1-.5.518L.4,1.982a.521.521,0,0,1-.51-.523L-.111.418A.508.508,0,0,1,.393-.1Z" transform="translate(0.111 0.1)" fill="#7cddc8"/>
+    </g>
+    <g id="Group_14" data-name="Group 14" transform="translate(38.427 47.303)">
+      <path id="Path_18" data-name="Path 18" d="M0,2.611,1.522,2.6,1.536,0,.013.008Z" transform="translate(1.023 0)" fill="#7cddc8"/>
+      <path id="Path_19" data-name="Path 19" d="M.393,2,2.93,1.982a.521.521,0,0,0,.51-.523L3.446.418a.508.508,0,0,0-.5-.518L.4-.086a.521.521,0,0,0-.51.523L-.111,1.478A.508.508,0,0,0,.393,2Z" transform="translate(0.111 2.7)" fill="#7cddc8"/>
+    </g>
+    <g id="Group_15" data-name="Group 15" transform="translate(52 38.458) rotate(90)">
+      <path id="Path_20" data-name="Path 20" d="M0,0,1.559.008l.014,2.541L.014,2.541Z" transform="translate(1.048 2.035)" fill="#7cddc8"/>
+      <path id="Path_21" data-name="Path 21" d="M.517,0l2.6.013a.521.521,0,0,1,.523.511l.006,1.016a.508.508,0,0,1-.517.505l-2.6-.013a.521.521,0,0,1-.523-.511L0,.505A.508.508,0,0,1,.517,0Z" transform="translate(0 0)" fill="#7cddc8"/>
+    </g>
+    <g id="Group_16" data-name="Group 16" transform="translate(32.585 38.458) rotate(90)">
+      <path id="Path_22" data-name="Path 22" d="M0,2.549l1.559-.008L1.573,0,.014.008Z" transform="translate(1.048 0)" fill="#7cddc8"/>
+      <path id="Path_23" data-name="Path 23" d="M.517,2.046l2.6-.013a.521.521,0,0,0,.523-.511L3.644.505A.508.508,0,0,0,3.127,0L.528.013A.521.521,0,0,0,.006.524L0,1.541A.508.508,0,0,0,.517,2.046Z" transform="translate(0 2.538)" fill="#7cddc8"/>
+    </g>
+    <path id="Subtraction_1" data-name="Subtraction 1" d="M8,16A8,8,0,0,1,2.343,2.343,8,8,0,0,1,13.657,13.657,7.948,7.948,0,0,1,8,16Zm.774-6.193a1.032,1.032,0,1,0,1.032,1.032A1.033,1.033,0,0,0,8.774,9.807ZM5.161,7.742A1.032,1.032,0,1,0,6.193,8.774,1.033,1.033,0,0,0,5.161,7.742Zm5.677-2.065A1.032,1.032,0,1,0,11.871,6.71,1.033,1.033,0,0,0,10.839,5.677ZM7.226,3.613A1.032,1.032,0,1,0,8.258,4.645,1.034,1.034,0,0,0,7.226,3.613Z" transform="translate(32.15 32.28)" fill="#3fc7a9"/>
+  </g>
+</svg>

package/src/fixtures/dstu2/resources/immunization/immunization.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.389" height="26.344" viewBox="0 0 20.389 26.344">
+  <g id="Group_34" data-name="Group 34" transform="matrix(0.819, 0.574, -0.574, 0.819, -1.32, -42.366)">
+    <rect id="Rectangle_15" data-name="Rectangle 15" width="9.6" height="1.028" rx="0.514" transform="translate(35.642 26.763)" fill="rgba(2,110,222,0.53)"/>
+    <rect id="Rectangle_16" data-name="Rectangle 16" width="4.8" height="3.598" transform="translate(38.047 27.799)" fill="rgba(2,110,222,0.53)"/>
+    <rect id="Rectangle_17" data-name="Rectangle 17" width="12" height="1.088" rx="0.544" transform="translate(34.47 32.134)" fill="#026ede"/>
+    <path id="Subtraction_2" data-name="Subtraction 2" d="M5.8,14.97H2a2,2,0,0,1-2-2V0H7.8V12.97A2,2,0,0,1,5.8,14.97ZM.036,8.615V9.684H1.9a.535.535,0,1,0,0-1.069ZM.024,5.882V6.951H1.89a.535.535,0,1,0,0-1.069ZM.014,3.147V4.217H1.878a.535.535,0,0,0,0-1.069Z" transform="translate(36.871 32.355)" fill="#026ede"/>
+    <path id="Rectangle_20" data-name="Rectangle 20" d="M0,0H1.626a0,0,0,0,1,0,0V5.829a.813.813,0,0,1-.813.813h0A.813.813,0,0,1,0,5.829V0A0,0,0,0,1,0,0Z" transform="translate(39.957 48.121)" fill="#7ab3ee"/>
+    <path id="Rectangle_19" data-name="Rectangle 19" d="M0,0H4.251a0,0,0,0,1,0,0V1.614a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V0A0,0,0,0,1,0,0Z" transform="translate(38.645 46.262)" fill="#026ede"/>
+  </g>
+</svg>

package/src/fixtures/example-icons.jsx

@@ -0,0 +1,169 @@
+import React from 'react';
+
+export default {
+  Condition: (
+    <img
+      src={require('../assets/containers/Condition/condition.svg')}
+      alt="germ"
+    />
+  ),
+  Immunization: (
+    <img
+      src={require('../assets/containers/Immunization/immunization.svg')}
+      alt="syringe"
+    />
+  ),
+  Procedure: (
+    <img
+      src={require('../assets/containers/Procedure/procedure.svg')}
+      alt="block diagram"
+    />
+  ),
+  Practitioner: (
+    <img
+      src={require('../assets/containers/Practitioner/practitioner.svg')}
+      alt="doctor avatar"
+    />
+  ),
+  AllergyIntolerance: (
+    <img
+      src={require('../assets/containers/AllergyIntolerance/allergy-intolerance.svg')}
+      alt="sneezing emoji"
+    />
+  ),
+  Appointment: (
+    <img
+      src={require('../assets/containers/Appointment/appointment.svg')}
+      alt="calendar"
+    />
+  ),
+  CarePlan: (
+    <img
+      src={require('../assets/containers/CarePlan/care-plan.svg')}
+      alt="note with a heart"
+    />
+  ),
+  CareTeam: (
+    <img
+      src={require('../assets/containers/CareTeam/care-team.svg')}
+      alt="group of people"
+    />
+  ),
+  Claim: (
+    <img
+      src={require('../assets/containers/Claim/claim.svg')}
+      alt="clipboard with a symmetrical cross"
+    />
+  ),
+  ClaimResponse: (
+    <img
+      src={require('../assets/containers/ClaimResponse/claim-response.svg')}
+      alt="clipboard with a symmetrical cross and a return arrow"
+    />
+  ),
+  Device: (
+    <img
+      src={require('../assets/containers/Device/device.svg')}
+      alt="computer rack"
+    />
+  ),
+  DiagnosticReport: (
+    <img
+      src={require('../assets/containers/DiagnosticReport/diagnostic-report.svg')}
+      alt="note with shapes"
+    />
+  ),
+  DocumentReference: (
+    <img
+      src={require('../assets/containers/DocumentReference/document-reference.svg')}
+      alt="hand holding a note"
+    />
+  ),
+  Encounter: (
+    <img
+      src={require('../assets/containers/Encounter/encounter.svg')}
+      alt="conversation between two individuals"
+    />
+  ),
+  ExplanationOfBenefit: (
+    <img
+      src={require('../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg')}
+      alt="percentage sign"
+    />
+  ),
+  FamilyMemberHistory: (
+    <img
+      src={require('../assets/containers/FamilyMemberHistory/family-member-history.svg')}
+      alt="parent and child"
+    />
+  ),
+  Goal: (
+    <img
+      src={require('../assets/containers/Goal/goal.svg')}
+      alt="arrow hits bullseye"
+    />
+  ),
+  List: (
+    <img src={require('../assets/containers/List/list.svg')} alt="checklist" />
+  ),
+  Location: (
+    <img
+      src={require('../assets/containers/Location/location.svg')}
+      alt="location marker"
+    />
+  ),
+  Medication: (
+    <img
+      src={require('../assets/containers/Medication/medication.svg')}
+      alt="some pills"
+    />
+  ),
+  MedicationAdministration: (
+    <img
+      src={require('../assets/containers/MedicationAdministration/medication-administration.svg')}
+      alt="pill gets swallowed"
+    />
+  ),
+  MedicationKnowledge: (
+    <img
+      src={require('../assets/containers/MedicationKnowledge/medication-knowledge.svg')}
+      alt="pill database"
+    />
+  ),
+  MedicationStatement: (
+    <img
+      src={require('../assets/containers/MedicationStatement/medication-statement.svg')}
+      alt="note with symmetrical cross"
+    />
+  ),
+  Observation: (
+    <img
+      src={require('../assets/containers/Observation/observation.svg')}
+      alt="hospital bed"
+    />
+  ),
+  Questionnaire: (
+    <img
+      src={require('../assets/containers/Questionnaire/questionnaire.svg')}
+      alt="clipboard and pen"
+    />
+  ),
+  QuestionnaireResponse: (
+    <img
+      src={require('../assets/containers/QuestionnaireResponse/questionnaire-response.svg')}
+      alt="clipboard and return arrow"
+    />
+  ),
+  ResearchStudy: (
+    <img
+      src={require('../assets/containers/ResearchStudy/research-study.svg')}
+      alt="finger pointing something in a book"
+    />
+  ),
+  ResourceCategoryPlaceholder: (
+    <img
+      src={require('../assets/containers/ResourceCategory/resource-placeholder.svg')}
+      alt="header icon"
+    />
+  ),
+};