npm - fhir-react - Versions diffs - 0.2.1 → 0.3.0 - Mend

fhir-react 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/src/components/resources/Practitioner/Practitioner.js CHANGED Viewed

@@ -1,19 +1,21 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import md5 from 'md5';
-import _get from 'lodash/get';
-import _has from 'lodash/has';
+import './Practitioner.css';
-import HumanName from '../../datatypes/HumanName';
-import PatientContact from './PatientContact';
-import fhirVersions from '../fhirResourceVersions';
-import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
+import { Badge, Body, Header, Root } from '../../ui';
+import Accordion from '../../containers/Accordion/Accordion';
 import Address from '../../datatypes/Address';
-import Telecom from '../../datatypes/Telecom';
 import Date from '../../datatypes/Date';
-import { Root, Header, Title, Body, Value, Badge } from '../../ui';
-import './Practitioner.css';
+import HumanName from '../../datatypes/HumanName';
 import Identifier from '../../datatypes/Identifier';
+import PatientContact from './PatientContact';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Telecom from '../../datatypes/Telecom';
+import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
+import _get from 'lodash/get';
+import _has from 'lodash/has';
+import fhirVersions from '../fhirResourceVersions';
+import md5 from 'md5';
 const commonDTO = fhirResource => {
   const id = _get(fhirResource, 'id', '');
@@ -26,6 +28,7 @@ const commonDTO = fhirResource => {
     name: _get(fhirResource, 'contact[0].name'),
     relationship: _get(fhirResource, 'contact[0].relationship[0].text'),
   };
   return {
     id,
     identifier,
@@ -101,56 +104,73 @@ const Practitioner = props => {
     address,
     birthDate,
   } = fhirResourceData;
+  const use = _get(name, 'use');
+  const tableData = [
+    {
+      label: 'Identifiers',
+      testId: 'identifier',
+      data: identifier && <Identifier fhirData={identifier} />,
+      status: identifier,
+    },
+    {
+      label: 'Gender',
+      testId: 'gender',
+      data: gender,
+      status: !!gender,
+    },
+    {
+      label: 'Birth date',
+      testId: 'birthDate',
+      data: birthDate && <Date fhirData={birthDate} isBlack />,
+      status: birthDate,
+    },
+    {
+      label: 'Contact',
+      testId: 'contact',
+      data: isContactData && (
+        <PatientContact
+          name={contactData.name}
+          relationship={contactData.relationship}
+        />
+      ),
+      status: isContactData,
+    },
+    {
+      label: 'Address',
+      testId: 'address',
+      data: address && <Address fhirData={address} />,
+      status: address,
+    },
+    {
+      label: 'Telephone',
+      testId: 'telecom',
+      data: telecom && <Telecom fhirData={telecom} />,
+      status: telecom,
+    },
+  ];
   return (
     <Root name="Practitioner">
-      <Header>
-        <img
-          className="fhir-resource__Practitioner__practitioner-avatar"
-          src={`http://www.gravatar.com/avatar/${md5(
-            id,
-          )}?s=30&r=any&default=identicon&forcedefault=1`}
-          alt=""
-        />
-        <Title>
-          <HumanName fhirData={name} primary={true} />
-        </Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-      </Header>
-      <Body>
-        {identifier && (
-          <Value label="Identifiers" data-testid="identifier">
-            <Identifier fhirData={identifier} />
-          </Value>
-        )}
-        {gender && (
-          <Value label="Gender" data-testid="gender">
-            {gender}
-          </Value>
-        )}
-        {birthDate && (
-          <Value label="Birth date" data-testid="birthDate">
-            <Date fhirData={birthDate} />
-          </Value>
-        )}
-        {isContactData && (
-          <Value label="Contact" data-testid="contact">
-            <PatientContact
-              name={contactData.name}
-              relationship={contactData.relationship}
-            />
-          </Value>
-        )}
-        {address && (
-          <Value label="Address" data-testid="address">
-            <Address fhirData={address} />
-          </Value>
-        )}
-        {telecom && (
-          <Value label="Telephone" data-testid="telecom">
-            <Telecom fhirData={telecom} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            additionalContent={<p className="mb-0">{`(${use})`}</p>}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={
+              <img
+                className="header-icon__practitioner-avatar rounded-1"
+                src={`http://www.gravatar.com/avatar/${md5(
+                  id,
+                )}?s=30&r=any&default=identicon&forcedefault=1`}
+                alt=""
+              />
+            }
+            title={<HumanName fhirData={name} isTitle />}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

package/src/components/resources/Practitioner/Practitioner.test.js CHANGED Viewed

@@ -17,7 +17,7 @@ describe('Practitioner should render component correctly', () => {
     const { getByTestId } = render(<Practitioner {...defaultProps} />);
     expect(String(getByTestId('title').textContent).trim()).toEqual(
-      'Physician Family Medicine (usual)',
+      'Physician Family Medicine',
     );
     expect(getByTestId('gender').textContent).toEqual('male');
   });
@@ -30,7 +30,7 @@ describe('Practitioner should render component correctly', () => {
     const { getByTestId } = render(<Practitioner {...defaultProps} />);
     expect(String(getByTestId('title').textContent).trim()).toEqual(
-      'Sameer Sharma M.D. (official)',
+      'Sameer Sharma M.D.',
     );
     expect(getByTestId('gender').textContent).toEqual('male');
     expect(getByTestId('address').textContent).toContain('5815 S Calumet');
@@ -64,12 +64,12 @@ describe('Practitioner should render component correctly', () => {
     const { getByTestId } = render(<Practitioner {...defaultProps} />);
     expect(String(getByTestId('title').textContent).trim()).toEqual(
-      'Pieter Voigt MD (official)',
+      'Pieter Voigt MD',
     );
     expect(getByTestId('gender').textContent).toEqual('male');
     expect(getByTestId('address').textContent).toContain('Galapagosweg 91');
     expect(getByTestId('telecom').textContent).toContain('phone0205569336');
-    expect(getByTestId('birthDate').textContent).toContain('1979-04-29');
+    expect(getByTestId('birthDate').textContent).toContain('4/29/1979');
   });
   it('component without fhirVersion props', () => {

package/src/components/resources/Procedure/Procedure.js CHANGED Viewed

@@ -1,27 +1,21 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _get from 'lodash/get';
-import _has from 'lodash/has';
+import { Badge, Body, Header, MissingValue, Root } from '../../ui';
+import Accordion from '../../containers/Accordion/Accordion';
 import Annotation from '../../datatypes/Annotation';
+import CodeableConcept from '../../datatypes/CodeableConcept';
 import Coding from '../../datatypes/Coding';
 import Date from '../../datatypes/Date';
+import DatePeriod from '../../datatypes/DatePeriod/DatePeriod';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Reference from '../../datatypes/Reference';
-import CodeableConcept from '../../datatypes/CodeableConcept';
-import {
-  Root,
-  Header,
-  Title,
-  Body,
-  Value,
-  Badge,
-  BadgeSecondary,
-  MissingValue,
-} from '../../ui';
+import _get from 'lodash/get';
+import _has from 'lodash/has';
 import { isNotEmptyArray } from '../../../utils';
+import { Value } from '../../ui';
 const Procedure = props => {
-  const { fhirResource } = props;
+  const { fhirResource, fhirIcons } = props;
   const display =
     _get(fhirResource, 'code.coding[0].display') ||
     _get(fhirResource, 'code.text');
@@ -42,79 +36,97 @@ const Procedure = props => {
   const hasNote = _has(fhirResource, 'note');
   const note = _get(fhirResource, 'note', []);
   const outcome = _get(fhirResource, 'outcome');
+  const headerIcon = fhirIcons[_get(fhirResource, 'resourceType')];
+  const tableData = [
+    {
+      label: 'Identification',
+      testId: 'hasCoding',
+      data: coding && (
+        <>
+          {coding.map((coding, i) => (
+            <Coding key={`item-${i}`} fhirData={coding} />
+          ))}
+        </>
+      ),
+      status: hasCoding,
+    },
+    {
+      label: 'Category',
+      testId: 'category',
+      data: category && <Coding fhirData={category} />,
+      status: category,
+    },
+    {
+      label: 'Performed by',
+      testId: 'dateRecorded',
+      data: performer && (
+        <>
+          {performer.map((item, i) => (
+            <div key={`item-${i}`}>
+              {_get(item, 'actor.display', <MissingValue />)}
+            </div>
+          ))}
+        </>
+      ),
+      status: hasPerformerData,
+    },
+    {
+      label: 'Reason procedure performed',
+      testId: 'hasReasonCode',
+      data: reasonCode && <Annotation fhirData={reasonCode} />,
+      status: hasReasonCode,
+    },
+    {
+      label: 'Location',
+      testId: 'location',
+      data: locationReference && <Reference fhirData={locationReference} />,
+      status: locationReference,
+    },
+    {
+      label: 'Additional information about the procedure',
+      testId: 'hasNote',
+      data: note && <Annotation fhirData={note} />,
+      status: hasNote,
+    },
+    {
+      label: 'The result of procedure',
+      testId: '',
+      data: outcome && <CodeableConcept fhirData={outcome} />,
+      status: isNotEmptyArray(outcome),
+    },
+  ];
   return (
     <Root name="Procedure">
-      <Header>
-        {display && <Title>{display}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {hasPerformedDateTime && (
-          <BadgeSecondary data-testid="performedDateTime">
-            on <Date fhirData={performedDateTime} />
-          </BadgeSecondary>
-        )}
-        {hasPerformedPeriod && (
-          <BadgeSecondary>
-            {'performed '}
-            {performedPeriodStart ? (
-              <Date fhirData={performedPeriodStart} />
-            ) : (
-              <MissingValue />
-            )}
-            {' to '}
-            {performedPeriodEnd ? (
-              <Date fhirData={performedPeriodEnd} />
-            ) : (
-              <MissingValue />
-            )}
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {hasCoding && (
-          <Value label="Identification" data-testid="hasCoding">
-            {coding.map((coding, i) => (
-              <Coding key={`item-${i}`} fhirData={coding} />
-            ))}
-          </Value>
-        )}
-        {category && (
-          <Value label="Category" data-testid="category">
-            <Coding fhirData={category} />
-          </Value>
-        )}
-        {hasPerformerData && (
-          <Value label="Performed the procedure">
-            {performer.map((item, i) => (
-              <div key={`item-${i}`}>
-                {_get(item, 'actor.display', <MissingValue />)}
-              </div>
-            ))}
-          </Value>
-        )}
-        {hasReasonCode && (
-          <Value label="Reason procedure performed" data-testid="hasReasonCode">
-            <Annotation fhirData={reasonCode} />
-          </Value>
-        )}
-        {locationReference && (
-          <Value label="Location" data-testid="location">
-            <Reference fhirData={locationReference} />
-          </Value>
-        )}
-        {hasNote && (
-          <Value
-            label="Additional information about the procedure"
-            data-testid="hasNote"
-          >
-            <Annotation fhirData={note} />
-          </Value>
-        )}
-        {isNotEmptyArray(outcome) && (
-          <Value label="The result of procedure">
-            <CodeableConcept fhirData={outcome} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Procedure"
+            additionalContent={
+              <>
+                {hasPerformedDateTime && (
+                  <Value label="Start date" data-testid="headerStartDate">
+                    <Date fhirData={performedDateTime} isBlack />
+                  </Value>
+                )}
+                {hasPerformedPeriod && (
+                  <DatePeriod
+                    periodBeginLabel="performed"
+                    periodBeginDate={performedPeriodStart}
+                    periodEndLabel="to"
+                    periodEndDate={performedPeriodEnd}
+                  />
+                )}
+              </>
+            }
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={headerIcon}
+            title={display}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

package/src/components/resources/Procedure/Procedure.stories.js CHANGED Viewed

@@ -11,34 +11,36 @@ import r4Example1 from '../../../fixtures/r4/resources/procedure/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/procedure/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/procedure/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 export default { title: 'Procedure' };
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', example1);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 export const ExampleOfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', r4Example3);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };

package/src/components/resources/Procedure/Procedure.test.js CHANGED Viewed

@@ -1,17 +1,18 @@
-import React from 'react';
-import { render } from '@testing-library/react';
 import Procedure from './Procedure';
+import React from 'react';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/procedure/example1.json';
-import stu3Example1 from '../../../fixtures/stu3/resources/procedure/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/procedure/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/procedure/example3.json';
+import { render } from '@testing-library/react';
+import stu3Example1 from '../../../fixtures/stu3/resources/procedure/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 describe('Procedure should render component correctly', () => {
   it('should render component correctly with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId } = render(<Procedure {...defaultProps} />);
@@ -22,6 +23,7 @@ describe('Procedure should render component correctly', () => {
   it('should render component correctly with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId } = render(<Procedure {...defaultProps} />);
@@ -34,6 +36,7 @@ describe('Procedure should render component correctly', () => {
   it('should render component that contain extra fields based of STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId } = render(<Procedure {...defaultProps} />);
@@ -48,6 +51,7 @@ describe('Procedure should render component correctly', () => {
   it('should render component correctly with R4 source data - example 1', () => {
     const defaultProps = {
       fhirResource: r4Example2,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId, queryByTestId } = render(
       <Procedure {...defaultProps} />,
@@ -57,9 +61,7 @@ describe('Procedure should render component correctly', () => {
       'Insertion of intracardiac pacemaker (procedure)',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('performedDateTime').textContent).toEqual(
-      'on 2015-04-05',
-    );
+    expect(getByTestId('providedDate').textContent).toEqual('4/5/2015');
     expect(getByTestId('hasCoding').textContent).toContain(
       'Insertion of intracardiac',
     );
@@ -77,6 +79,7 @@ describe('Procedure should render component correctly', () => {
   it('should render component correctly with STU3 source data - example 2', () => {
     const defaultProps = {
       fhirResource: r4Example3,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId, queryByTestId } = render(
       <Procedure {...defaultProps} />,

package/src/components/resources/Questionnaire/Questionnaire.test.js CHANGED Viewed

@@ -58,7 +58,7 @@ describe('Questionnaire should render component correctly', () => {
       'Cancer Quality Forum Questionnaire',
     );
     expect(getByTestId('status').textContent).toEqual('draft');
-    expect(getByTestId('dateTime').textContent).toEqual('2012-01');
+    expect(getByTestId('dateTime').textContent).toEqual('January 2012');
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-1.1').textContent).trim()).toContain(
@@ -119,7 +119,7 @@ describe('Questionnaire should render component correctly', () => {
       'Cancer Quality Forum Questionnaire',
     );
     expect(getByTestId('status').textContent).toEqual('draft');
-    expect(getByTestId('dateTime').textContent).toEqual('2012-01');
+    expect(getByTestId('dateTime').textContent).toEqual('January 2012');
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-1.1').textContent).trim()).toContain(
@@ -180,7 +180,7 @@ describe('Questionnaire should render component correctly', () => {
       'Cancer Quality Forum Questionnaire',
     );
     expect(getByTestId('status').textContent).toEqual('draft');
-    expect(getByTestId('dateTime').textContent).toEqual('2012-01');
+    expect(getByTestId('dateTime').textContent).toEqual('January 2012');
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-1.1').textContent).trim()).toContain(

package/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.test.js CHANGED Viewed

@@ -23,7 +23,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Questionnaire Response',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('dateTime').textContent).toEqual('2013-06-18');
+    expect(getByTestId('dateTime').textContent).toEqual('6/18/2013');
     expect(getByTestId('subject').textContent).toEqual('RoelPatient/f201');
     expect(getByTestId('author').textContent).toEqual('Practitioner/f201');
@@ -34,7 +34,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'What is your gender?Male ',
     );
     expect(getByTestId('linkId-2.2').textContent).toEqual(
-      'What is your date of birth?1960-03-13 ',
+      'What is your date of birth?3/13/1960 ',
     );
     expect(getByTestId('linkId-2.3').textContent).toEqual(
       'What is your country of birth?The Netherlands ',
@@ -56,7 +56,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Glasgow Coma Score',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('dateTime').textContent).toEqual('2014-12-11');
+    expect(getByTestId('dateTime').textContent).toEqual('12/11/2014');
     expect(getByTestId('linkId-1.1').textContent).toContain('(LA6560-2) ');
   });
@@ -72,7 +72,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Questionnaire Response',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('dateTime').textContent).toEqual('2013-02-19');
+    expect(getByTestId('dateTime').textContent).toEqual('2/19/2013');
     expect(getByTestId('answer-nameOfChild-0').textContent).toContain(
       'Cathy Jones',
@@ -90,7 +90,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Questionnaire Response',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('dateTime').textContent).toEqual('2013-06-18');
+    expect(getByTestId('dateTime').textContent).toEqual('6/18/2013');
     expect(getByTestId('subject').textContent).toEqual('RoelPatient/f201');
     expect(getByTestId('author').textContent).toEqual('Practitioner/f201');

package/src/components/resources/ReferralRequest/ReferralRequest.test.js CHANGED Viewed

@@ -21,7 +21,7 @@ describe('should render ReferralRequest component properly', () => {
     expect(getByTestId('typeCoding').textContent).toContain(
       'Referral for service',
     );
-    expect(getByTestId('dateSent').textContent).toContain('2014-02-14');
+    expect(getByTestId('dateSent').textContent).toContain('2/14/2014');
     expect(getByTestId('reason').textContent).toContain(
       'For consideration of Grommets',
     );
@@ -46,7 +46,7 @@ describe('should render ReferralRequest component properly', () => {
     expect(getByTestId('typeCoding').textContent).toContain(
       'Patient referral to specialist',
     );
-    expect(getByTestId('dateSent').textContent).toContain('2014-02-14');
+    expect(getByTestId('dateSent').textContent).toContain('2/14/2014');
     expect(getByTestId('reason').textContent).toContain(
       'For consideration of Grommets',
     );

package/src/components/resources/ResearchStudy/ResearchStudy.test.js CHANGED Viewed

@@ -48,7 +48,7 @@ describe('should render ResearchStudy component properly', () => {
     expect(title).toEqual('Example study');
     expect(status).toEqual('completed');
-    expect(period).toEqual('2015-02-01 - 2015-02-21');
+    expect(period).toEqual('2/1/2015 - 2/21/2015');
     expect(category).toEqual('Gene expression (GENE)');
     expect(focus).toEqual('Prostate cancer (PRC)');
     expect(protocol).toEqual('PlanDefinition/pdf1');

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

@@ -0,0 +1,56 @@
+import { Root, Title } from '../../ui';
+import ChevronRight from '../../../assets/common/chevron-right.svg';
+import HeaderIcon from '../../datatypes/HeaderIcon';
+import React from 'react';
+import PropTypes from 'prop-types';
+const ResourceCategory = props => {
+  const { title, itemsCount, fhirIcons } = props;
+  const parseNumber = value =>
+    /^[1-9]+\d*$/.test(value) ? Number.parseInt(value) : null;
+  const getItemsCountLabel = () =>
+    `${parsedItemsCount} ${parsedItemsCount === 1 ? 'item' : 'items'}`;
+  const headerIcon = fhirIcons['ResourceCategoryPlaceholder'];
+  const parsedItemsCount = parseNumber(itemsCount);
+  return (
+    <Root name="ResourceCategory">
+      <button
+        type="button"
+        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>
+        </div>
+        <div className="d-flex gap-2 align-items-center">
+          {parsedItemsCount > 0 && (
+            <div
+              className="d-flex rounded-pill py-1 px-2 bg-gray-200"
+              data-testid="itemsCount"
+            >
+              <small className="fw-bold text-nowrap ">
+                {getItemsCountLabel()}
+              </small>
+            </div>
+          )}
+          <img
+            src={ChevronRight}
+            alt="chevron"
+            style={{ height: 28, width: 28 }}
+          />
+        </div>
+      </button>
+    </Root>
+  );
+};
+ResourceCategory.propTypes = {
+  title: PropTypes.string.isRequired,
+  itemsCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+export default ResourceCategory;