fhir-react 0.2.4 → 0.3.0

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;

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/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>
+);