npm - fhir-react - Versions diffs - 0.3.8 → 0.3.11 - Mend

fhir-react 0.3.8 → 0.3.11

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 (102) hide show

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import RelatedPerson from './RelatedPerson';
 import fhirVersions from '../fhirResourceVersions';
@@ -10,37 +10,33 @@ import exampleR4 from '../../../fixtures/r4/resources/relatedPerson/example1.jso
 import fhirIcons from '../../../fixtures/example-icons';
-export default { title: 'RelatedPerson' };
-export const ExampleDSTU2 = () => {
-  const fhirResource = object('Resource', exampleDSTU2);
-  return (
-    <RelatedPerson
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
-  );
+export default {
+  title: 'Coverage/RelatedPerson',
+  component: RelatedPerson,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', exampleSTU3);
-  return (
-    <RelatedPerson
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={false}
-    />
-  );
+const Template = args => <RelatedPerson {...args} />;
+export const ExampleDSTU2 = Template.bind({});
+ExampleDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleDSTU2,
+  fhirIcons: fhirIcons,
+};
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleSTU3,
+  fhirIcons: false,
 };
-export const ExampleR4 = () => {
-  const fhirResource = object('Resource', exampleR4);
-  return (
-    <RelatedPerson
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={'random text'}
-    />
-  );
+export const ExampleR4 = Template.bind({});
+ExampleR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: exampleR4,
+  fhirIcons: 'random text',
 };

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

@@ -94,7 +94,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const ResearchStudy = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const ResearchStudy = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -289,6 +295,7 @@ const ResearchStudy = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import ResearchStudy from './ResearchStudy';
 import fhirVersions from '../fhirResourceVersions';
@@ -10,22 +10,24 @@ import fhirIcons from '../../../fixtures/example-icons';
 export default {
   title: 'ResearchStudy',
+  component: ResearchStudy,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <ResearchStudy
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+const Template = args => <ResearchStudy {...args} />;
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: fhirIcons,
 };
-export const ExampleOfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <ResearchStudy fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
-  );
+export const ExampleOfR4 = Template.bind({});
+ExampleOfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: false,
 };

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

@@ -15,7 +15,7 @@ const ResourceCategory = ({ title, itemsCount, fhirIcons }) => {
     <Root name="ResourceCategory">
       <button
         type="button"
-        className="btn d-flex align-items-center justify-content-between w-100 py-4 px-4 bg-white"
+        className="btn d-flex align-items-center justify-content-between w-100 px-md-4 py-md-4 bg-white"
       >
         <div className="d-flex gap-2">
           <Header

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

@@ -1,40 +1,53 @@
 import React from 'react';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import ResourceCategory from './ResourceCategory';
 import fhirIcons from '../../../fixtures/example-icons';
 import ResourceCategoryIcon from '../../../assets/containers/ResourceCategory/resource-category.svg';
-export default { title: 'ResourceCategory' };
+export default {
+  title: 'ResourceCategory',
+  component: ResourceCategory,
+  argTypes: {
+    ...defaultArgTypes,
+    itemsCount: {
+      table: {
+        disable: true,
+      },
+    },
+    title: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+const Template = args => <ResourceCategory {...args} />;
-export const ExampleWithAllProperties = () => {
-  return (
-    <ResourceCategory
-      itemsCount={41}
-      title="Resource name"
-      fhirIcons={require('../../../assets/containers/ResourceCategory/resource-category.svg')}
-    />
-  );
+export const ExampleWithAllProperties = Template.bind({});
+ExampleWithAllProperties.args = {
+  itemsCount: 41,
+  title: 'Resource name',
+  fhirIcons: require('../../../assets/containers/ResourceCategory/resource-category.svg'),
 };
-export const ExampleWith1Item = () => {
-  return (
-    <ResourceCategory
-      itemsCount={'1'}
-      title="Resource name"
-      fhirIcons={ResourceCategoryIcon}
-    />
-  );
+export const ExampleWith1Item = Template.bind({});
+ExampleWith1Item.args = {
+  itemsCount: '1',
+  title: 'Resource name',
+  fhirIcons: ResourceCategoryIcon,
 };
-export const ExampleWithoutItemsCount = () => {
-  return <ResourceCategory title="Resource name" fhirIcons={fhirIcons} />;
+export const ExampleWithoutItemsCount = Template.bind({});
+ExampleWithoutItemsCount.args = {
+  title: 'Resource name',
+  fhirIcons: fhirIcons,
 };
-export const ExampleWith1ItemAndDisableIcon = () => {
-  return (
-    <ResourceCategory
-      itemsCount={'1'}
-      title="Resource name"
-      fhirIcons={false}
-    />
-  );
+export const ExampleWith1ItemAndDisableIcon = Template.bind({});
+ExampleWith1ItemAndDisableIcon.args = {
+  itemsCount: '1',
+  title: 'Resource name',
+  fhirIcons: false,
 };

package/src/components/supportedFhirResourceList.js CHANGED Viewed

@@ -36,6 +36,7 @@ import MedicationAdministration from './resources/MedicationAdministration';
 import Questionnaire from './resources/Questionnaire';
 import QuestionnaireResponse from './resources/QuestionnaireResponse';
 import ReferralRequest from './resources/ReferralRequest';
+import RelatedPerson from './resources/RelatedPerson';
 import ResearchStudy from './resources/ResearchStudy';
 import ResourceCategory from './resources/ResourceCategory';
@@ -78,6 +79,7 @@ export {
   Questionnaire,
   QuestionnaireResponse,
   ReferralRequest,
+  RelatedPerson,
   ResearchStudy,
   ResourceCategory,
 };

package/src/components/ui/index.js CHANGED Viewed

@@ -32,7 +32,7 @@ export const Header = ({
               isAccordionOpenable ? 'header__title-row' : ''
             } d-flex w-100 flex-column flex-sm-row`}
           >
-            <div className="d-flex">
+            <div className="d-flex align-items-center">
               {!isNoIcon && (
                 <div
                   className={`fhir-ui__${resourceName}-Header__icon d-flex align-items-center flex-shrink-1 m-half me-2`}
@@ -52,30 +52,34 @@ export const Header = ({
               </div>
             </div>
-            <div
-              className={`fhir-ui__${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}`}
-            >
-              {prefixBadge && <div className="me-3">{prefixBadge}</div>}
-              <div className="d-flex">
-                {badges}
-                {additionalBadge && (
-                  <div className="ms-3">{additionalBadge}</div>
-                )}
+            {(prefixBadge || badges || additionalBadge) && (
+              <div
+                className={`fhir-ui__${resourceName}-Header__badges 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}`}
+              >
+                {prefixBadge && <div className="me-3">{prefixBadge}</div>}
+                <div className="d-flex align-items-center">
+                  {badges}
+                  {additionalBadge && (
+                    <div className="ms-3">{additionalBadge}</div>
+                  )}
+                </div>
               </div>
-            </div>
+            )}
           </div>
-          <div
-            className={`fhir-ui__${resourceName}-Header__additional-content w-100 justify-content-start d-flex  ${
-              additionalContent ? ' pt-2' : ''
-            }`}
-          >
-            {additionalContent}
+          {(additionalContent || rightAdditionalContent) && (
             <div
-              className={`fhir-ui__${resourceName}-Header__rightAdditionalContent justify-content-end ${rightItemsClass}`}
+              className={`fhir-ui__${resourceName}-Header__additional-content w-100 justify-content-start d-flex ${
+                additionalContent ? ' pt-2' : ''
+              }`}
             >
-              {rightAdditionalContent}
+              {additionalContent}
+              <div
+                className={`fhir-ui__${resourceName}-Header__rightAdditionalContent justify-content-md-end mx-0 ${rightItemsClass}`}
+              >
+                {rightAdditionalContent}
+              </div>
             </div>
-          </div>
+          )}
         </div>
       )}
     </>
@@ -84,7 +88,7 @@ export const Header = ({
 export const Title = props => (
   <h4
-    className={`fhir-ui__Title fw-bold fs-4 lh-base mb-0 w-90 title-width-sm ${
+    className={`fhir-ui__Title fw-bold lh-base mb-0 text-break d-flex ${
       props.capitalize ? 'text-capitalize' : ''
     }`}
     data-testid={props['data-testid'] || 'title'}
@@ -96,7 +100,7 @@ export const Title = props => (
 export const Badge = props => {
   return (
     <small
-      className={`fhir-ui__Badge text-capitalize d-flex align-items-center mx-1 px-2 py-1 rounded-1 fw-bold ${getBadgeColor(
+      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']}
@@ -108,7 +112,7 @@ export const Badge = props => {
 export const BadgeSecondary = props => (
   <small
-    className={`fhir-ui__BadgeSecondary px-2 py-1 rounded-1 fw-bold ${getBadgeColor(
+    className={`fhir-ui__BadgeSecondary px-2 py-1 rounded-1 fw-bold d-flex align-items-center ${getBadgeColor(
       props,
     )}`}
     data-testid={props['data-testid']}

package/src/style.scss CHANGED Viewed

@@ -106,6 +106,17 @@ $enable-negative-margins: true;
 .fhir-ui__Badge {
   width: fit-content;
+  margin: 0 4px;
+  @include media-breakpoint-down(sm) {
+    margin: 4px 0;
+  }
+}
+.fhir-ui__Title {
+  font-size: 1.125rem;
+  @include media-breakpoint-down(sm) {
+    font-size: 1rem !important;
+  }
 }
 .header__title-row {

package/.storybook/addons.js DELETED Viewed

	@@ -1 +0,0 @@
1	- import '@storybook/addon-knobs/register';

package/.storybook/config.js DELETED Viewed

@@ -1,26 +0,0 @@
-import '../src/components/ui/bootstrap-reboot.min.css';
-import '../src/style.css';
-import '../src/style.scss';
-import { addDecorator, addParameters, configure } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs';
-if (typeof document !== 'undefined') {
-  require('bootstrap/dist/js/bootstrap.min.js');
-}
-addParameters({
-  options: {
-    name: 'FHIR-REACT storybook',
-    showRoots: true,
-  },
-});
-addDecorator(
-  withKnobs({
-    escapeHTML: false,
-  }),
-);
-configure(require.context('../src', true, /\.stories\.js$/), module);

package/.storybook/presets.js DELETED Viewed

	@@ -1 +0,0 @@
1	- module.exports = ['@storybook/preset-scss'];