fhir-react 0.2.1 → 0.3.0

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import ResourceCategory from './ResourceCategory';
+import fhirIcons from '../../../fixtures/example-icons';
+
+export default { title: 'ResourceCategory' };
+
+export const ExampleWithAllProperties = () => {
+  return (
+    <ResourceCategory
+      itemsCount={41}
+      title="Resource name"
+      fhirIcons={fhirIcons}
+    />
+  );
+};
+
+export const ExampleWith1Item = () => {
+  return (
+    <ResourceCategory
+      itemsCount={'1'}
+      title="Resource name"
+      fhirIcons={fhirIcons}
+    />
+  );
+};
+
+export const ExampleWithoutItemsCount = () => {
+  return <ResourceCategory title="Resource name" fhirIcons={fhirIcons} />;
+};

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import fhirIcons from '../../../fixtures/example-icons';
+import ResourceCategory from './ResourceCategory';
+
+describe('should render ResourceCategory component properly', () => {
+  const placeholderResource = fhirIcons['ResourceCategoryPlaceholder'].props;
+
+  it('should render ResourceCategory component with icon and itemsCount > 1 correctly', () => {
+    const defaultProps = {
+      fhirIcons: fhirIcons,
+      itemsCount: '41',
+      title: 'Resource name',
+    };
+
+    const { container, getByTestId, getByAltText } = 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', () => {
+    const defaultProps = {
+      fhirIcons: fhirIcons,
+      itemsCount: 1,
+      title: 'Resource name',
+    };
+
+    const { container, getByTestId, getByAltText } = 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', () => {
+    const defaultProps = {
+      fhirIcons: fhirIcons,
+      itemsCount: -1,
+      title: 'Resource name',
+    };
+
+    const { container, getByTestId, getByAltText, 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 invalid string passed as itemsCount', () => {
+    const defaultProps = {
+      fhirIcons: fhirIcons,
+      itemsCount: 'asdf1',
+      title: 'Resource name',
+    };
+
+    const { container, getByTestId, getByAltText, 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', () => {
+    const defaultProps = {
+      fhirIcons: fhirIcons,
+      itemsCount: '0.5',
+      title: 'Resource name',
+    };
+
+    const { container, getByTestId, getByAltText, 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);
+  });
+});

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

@@ -0,0 +1,3 @@
+import ResourceCategory from './ResourceCategory';
+
+export default ResourceCategory;

package/src/components/supportedFhirResourceList.js

@@ -16,8 +16,10 @@ import Encounter from './resources/Encounter';
 import FamilyMemberHistory from './resources/FamilyMemberHistory';
 import Goal from './resources/Goal';
 import Immunization from './resources/Immunization';
+import List from './resources/List';
 import Location from './resources/Location';
 import Medication from './resources/Medication';
+import MedicationKnowledge from './resources/MedicationKnowledge';
 import MedicationOrder from './resources/MedicationOrder';
 import MedicationStatement from './resources/MedicationStatement';
 import Observation from './resources/Observation';
@@ -55,8 +57,10 @@ export {
   FamilyMemberHistory,
   Goal,
   Immunization,
+  List,
   Location,
   Medication,
+  MedicationKnowledge,
   MedicationOrder,
   MedicationStatement,
   Observation,

package/src/components/ui/_header.scss

@@ -0,0 +1,3 @@
+.header-rotate {
+  transform: rotate(-180deg);
+}

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

@@ -14,23 +14,9 @@
 }
 
 .fhir-resource {
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    'Noto Sans',
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'Noto Color Emoji';
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #212529;
   background-color: #fff;
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: transparent;
@@ -187,14 +173,8 @@ 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

@@ -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/dstu2/resources/list/example1.json

@@ -0,0 +1,49 @@
+{
+  "resourceType": "List",
+  "id": "example",
+  "text": {
+    "status": "generated",
+    "div": "<div>\n      <table>\n        <thead>\n          <tr>\n            <th>Condition</th>\n            <th>Severity</th>\n            <th>Date</th>\n            <th>Location</th>\n            <th>Status</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>Burnt Ear</td>\n            <td>Severe</td>\n            <td>24-May 2012</td>\n            <td>Left Ear</td>\n            <td>deleted</td>\n          </tr>\n          <tr>\n            <td>Asthma</td>\n            <td>Mild</td>\n            <td>21-Nov 2012</td>\n            <td>--</td>\n            <td>added</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>"
+  },
+  "identifier": [
+    {
+      "system": "urn:uuid:a9fcea7c-fcdf-4d17-a5e0-f26dda030b59",
+      "value": "23974652"
+    }
+  ],
+  "subject": {
+    "fhir_comments": [
+      "  This list doesn't have a code. In actual fact, \n    it's a Condition list produced at the end of an encounter \n    to a regular primary care practitioner. But the only way\n    to know this is to hunt down the place it is used \n    and find out  "
+    ],
+    "reference": "Patient/example"
+  },
+  "source": {
+    "reference": "Patient/example"
+  },
+  "encounter": {
+    "reference": "Encounter/example"
+  },
+  "status": "current",
+  "date": "2012-11-25T22:17:00+11:00",
+  "mode": "changes",
+  "entry": [
+    {
+      "flag": {
+        "text": "Deleted due to error"
+      },
+      "deleted": true,
+      "item": {
+        "reference": "Condition/example"
+      }
+    },
+    {
+      "flag": {
+        "text": "Added"
+      },
+      "date": "2012-11-21",
+      "item": {
+        "reference": "Condition/example2"
+      }
+    }
+  ]
+}