@blaze-cms/plugin-data-ui 0.128.0-alpha.2 → 0.128.0-project-admin-customisations.0

package/lib-es/components/InfoBoxes/hooks/useData.js

@@ -0,0 +1,37 @@
+import { useQuery, gql } from '@apollo/client';
+import useInfoBoxData from './useInfoBox';
+function useData({
+  id,
+  schema,
+  infoBox
+}) {
+  const {
+    query
+  } = useInfoBoxData({
+    id,
+    schema,
+    infoBox
+  });
+  const infoBoxQuery = query || gql`
+      query {
+        __typename
+      }
+    `;
+  const {
+    data = {},
+    loading,
+    error
+  } = useQuery(infoBoxQuery, {
+    variables: {
+      id
+    },
+    skip: !query
+  });
+  return {
+    data: data.__typename !== 'Query' ? data : null,
+    loading,
+    error
+  };
+}
+export default useData;
+//# sourceMappingURL=useData.js.map

package/lib-es/components/InfoBoxes/hooks/useData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useData.js","names":["useQuery","gql","useInfoBoxData","useData","id","schema","infoBox","query","infoBoxQuery","data","loading","error","variables","skip","__typename"],"sources":["../../../../src/components/InfoBoxes/hooks/useData.js"],"sourcesContent":["import { useQuery, gql } from '@apollo/client';\nimport useInfoBoxData from './useInfoBox';\n\nfunction useData({ id, schema, infoBox }) {\n  const { query } = useInfoBoxData({ id, schema, infoBox });\n\n  const infoBoxQuery =\n    query ||\n    gql`\n      query {\n        __typename\n      }\n    `;\n\n  const { data = {}, loading, error } = useQuery(infoBoxQuery, { variables: { id }, skip: !query });\n\n  return { data: data.__typename !== 'Query' ? data : null, loading, error };\n}\n\nexport default useData;\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,GAAG,QAAQ,gBAAgB;AAC9C,OAAOC,cAAc,MAAM,cAAc;AAEzC,SAASC,OAAOA,CAAC;EAAEC,EAAE;EAAEC,MAAM;EAAEC;AAAQ,CAAC,EAAE;EACxC,MAAM;IAAEC;EAAM,CAAC,GAAGL,cAAc,CAAC;IAAEE,EAAE;IAAEC,MAAM;IAAEC;EAAQ,CAAC,CAAC;EAEzD,MAAME,YAAY,GAChBD,KAAK,IACLN,GAAI;AACR;AACA;AACA;AACA,KAAK;EAEH,MAAM;IAAEQ,IAAI,GAAG,CAAC,CAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAGX,QAAQ,CAACQ,YAAY,EAAE;IAAEI,SAAS,EAAE;MAAER;IAAG,CAAC;IAAES,IAAI,EAAE,CAACN;EAAM,CAAC,CAAC;EAEjG,OAAO;IAAEE,IAAI,EAAEA,IAAI,CAACK,UAAU,KAAK,OAAO,GAAGL,IAAI,GAAG,IAAI;IAAEC,OAAO;IAAEC;EAAM,CAAC;AAC5E;AAEA,eAAeR,OAAO"}

package/lib-es/components/InfoBoxes/hooks/useInfoBox.js

@@ -0,0 +1,19 @@
+import buildDynamicQuery from '../helpers/build-dynamic-query';
+function useInfoBox({
+  id,
+  schema,
+  infoBox
+}) {
+  const {
+    query
+  } = buildDynamicQuery({
+    id,
+    schema,
+    infoBox
+  });
+  return {
+    query: query || null
+  };
+}
+export default useInfoBox;
+//# sourceMappingURL=useInfoBox.js.map

package/lib-es/components/InfoBoxes/hooks/useInfoBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfoBox.js","names":["buildDynamicQuery","useInfoBox","id","schema","infoBox","query"],"sources":["../../../../src/components/InfoBoxes/hooks/useInfoBox.js"],"sourcesContent":["import buildDynamicQuery from '../helpers/build-dynamic-query';\n\nfunction useInfoBox({ id, schema, infoBox }) {\n  const { query } = buildDynamicQuery({\n    id,\n    schema,\n    infoBox\n  });\n\n  return { query: query || null };\n}\n\nexport default useInfoBox;\n"],"mappings":"AAAA,OAAOA,iBAAiB,MAAM,gCAAgC;AAE9D,SAASC,UAAUA,CAAC;EAAEC,EAAE;EAAEC,MAAM;EAAEC;AAAQ,CAAC,EAAE;EAC3C,MAAM;IAAEC;EAAM,CAAC,GAAGL,iBAAiB,CAAC;IAClCE,EAAE;IACFC,MAAM;IACNC;EACF,CAAC,CAAC;EAEF,OAAO;IAAEC,KAAK,EAAEA,KAAK,IAAI;EAAK,CAAC;AACjC;AAEA,eAAeJ,UAAU"}

package/lib-es/components/InfoBoxes/index.js

@@ -0,0 +1,3 @@
+import InfoBoxes from './InfoBoxes';
+export default InfoBoxes;
+//# sourceMappingURL=index.js.map

package/lib-es/components/InfoBoxes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["InfoBoxes"],"sources":["../../../src/components/InfoBoxes/index.js"],"sourcesContent":["import InfoBoxes from './InfoBoxes';\n\nexport default InfoBoxes;\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AAEnC,eAAeA,SAAS"}

package/lib-es/components/InfoBoxes/presentational/InfoBox.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+const InfoBox = ({
+  items,
+  infoBoxKey
+}) => {
+  if (!items) return null;
+  const infoBoxItems = items.map(item => Object.values(item).map(info => {
+    if (!info.label || !info.value) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "info-box--item",
+      key: `${infoBoxKey}-${info.label.toLowerCase()}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "info-box--label"
+    }, info.label, ": "), /*#__PURE__*/React.createElement("div", {
+      className: "info-box--value"
+    }, info.value));
+  }).filter(Boolean));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "info-box",
+    key: infoBoxKey
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "info-box--container"
+  }, infoBoxItems));
+};
+export default InfoBox;
+InfoBox.propTypes = {
+  infoBoxKey: PropTypes.string.isRequired,
+  items: PropTypes.array.isRequired
+};
+//# sourceMappingURL=InfoBox.js.map

package/lib-es/components/InfoBoxes/presentational/InfoBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoBox.js","names":["PropTypes","React","InfoBox","items","infoBoxKey","infoBoxItems","map","item","Object","values","info","label","value","createElement","className","key","toLowerCase","filter","Boolean","propTypes","string","isRequired","array"],"sources":["../../../../src/components/InfoBoxes/presentational/InfoBox.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nconst InfoBox = ({ items, infoBoxKey }) => {\n  if (!items) return null;\n\n  const infoBoxItems = items.map(item =>\n    Object.values(item)\n      .map(info => {\n        if (!info.label || !info.value) return null;\n\n        return (\n          <div className=\"info-box--item\" key={`${infoBoxKey}-${info.label.toLowerCase()}`}>\n            <div className=\"info-box--label\">{info.label}: </div>\n            <div className=\"info-box--value\">{info.value}</div>\n          </div>\n        );\n      })\n      .filter(Boolean)\n  );\n\n  return (\n    <div className=\"info-box\" key={infoBoxKey}>\n      <div className=\"info-box--container\">{infoBoxItems}</div>\n    </div>\n  );\n};\n\nexport default InfoBox;\n\nInfoBox.propTypes = {\n  infoBoxKey: PropTypes.string.isRequired,\n  items: PropTypes.array.isRequired\n};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,KAAK,MAAM,OAAO;AAEzB,MAAMC,OAAO,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAW,CAAC,KAAK;EACzC,IAAI,CAACD,KAAK,EAAE,OAAO,IAAI;EAEvB,MAAME,YAAY,GAAGF,KAAK,CAACG,GAAG,CAACC,IAAI,IACjCC,MAAM,CAACC,MAAM,CAACF,IAAI,CAAC,CAChBD,GAAG,CAACI,IAAI,IAAI;IACX,IAAI,CAACA,IAAI,CAACC,KAAK,IAAI,CAACD,IAAI,CAACE,KAAK,EAAE,OAAO,IAAI;IAE3C,oBACEX,KAAA,CAAAY,aAAA;MAAKC,SAAS,EAAC,gBAAgB;MAACC,GAAG,EAAG,GAAEX,UAAW,IAAGM,IAAI,CAACC,KAAK,CAACK,WAAW,EAAG;IAAE,gBAC/Ef,KAAA,CAAAY,aAAA;MAAKC,SAAS,EAAC;IAAiB,GAAEJ,IAAI,CAACC,KAAK,EAAC,IAAE,CAAM,eACrDV,KAAA,CAAAY,aAAA;MAAKC,SAAS,EAAC;IAAiB,GAAEJ,IAAI,CAACE,KAAK,CAAO,CAC/C;EAEV,CAAC,CAAC,CACDK,MAAM,CAACC,OAAO,CAAC,CACnB;EAED,oBACEjB,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAC,UAAU;IAACC,GAAG,EAAEX;EAAW,gBACxCH,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAC;EAAqB,GAAET,YAAY,CAAO,CACrD;AAEV,CAAC;AAED,eAAeH,OAAO;AAEtBA,OAAO,CAACiB,SAAS,GAAG;EAClBf,UAAU,EAAEJ,SAAS,CAACoB,MAAM,CAACC,UAAU;EACvClB,KAAK,EAAEH,SAAS,CAACsB,KAAK,CAACD;AACzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/plugin-data-ui",
-  "version": "0.128.0-alpha.2",
+  "version": "0.128.0-project-admin-customisations.0",
   "description": "Blaze plugin data ui",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,12 +27,13 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/admin-ui-utils": "0.128.0-alpha.0",
-    "@blaze-cms/core-errors": "^0.127.0",
-    "@blaze-cms/react-form-builder": "0.128.0-alpha.0",
-    "@blaze-cms/react-page-builder": "0.128.0-alpha.2",
-    "@blaze-cms/setup-ui": "0.128.0-alpha.0",
-    "@blaze-cms/versioning-ui": "0.128.0-alpha.0",
+    "@blaze-cms/admin-ui-utils": "0.128.0-project-admin-customisations.0",
+    "@blaze-cms/core-errors": "0.128.0-project-admin-customisations.0",
+    "@blaze-cms/plugin-render-hooks-ui": "0.128.0-project-admin-customisations.0",
+    "@blaze-cms/react-form-builder": "0.128.0-project-admin-customisations.0",
+    "@blaze-cms/react-page-builder": "0.128.0-project-admin-customisations.0",
+    "@blaze-cms/setup-ui": "0.128.0-project-admin-customisations.0",
+    "@blaze-cms/versioning-ui": "0.128.0-project-admin-customisations.0",
     "@blaze-react/button": "0.5.19",
     "@blaze-react/more": "0.5.19",
     "@blaze-react/multiselect": "0.6.6",
@@ -53,7 +54,7 @@
     "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@blaze-cms/core-ui": "0.128.0-alpha.0"
+    "@blaze-cms/core-ui": "0.128.0-project-admin-customisations.0"
   },
   "peerDependencies": {
     "@apollo/client": "3.x",
@@ -65,5 +66,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "c2d83b0701dc4e4db0d93143f7383779d1e3627d"
+  "gitHead": "e980a4e631f7e2d3a8939a754d87167f48da315f"
 }

package/src/components/EntityManager/Entity/Entity.js

@@ -3,6 +3,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { withRouter, Prompt } from 'react-router-dom';
 import { useApolloClient } from '@apollo/client';
 import PropTypes from 'prop-types';
+import { RenderHook } from '@blaze-cms/plugin-render-hooks-ui';
 import { getQuery, GET_CURRENT_TAB_ID } from '@blaze-cms/admin-ui-utils';
 import { FormBuilder, parseFormValues } from '@blaze-cms/react-form-builder';
 import { DeleteAction, CopyDataFromAction } from '@blaze-cms/admin';
@@ -34,6 +35,7 @@ import {
   checkFulfilConditions
 } from '../utils/entity';
 import useToggle from '../../../utils/hooks/useToggle';
+import InfoBoxes from '../../InfoBoxes/InfoBoxes';
 
 const Entity = ({
   formData,
@@ -403,68 +405,72 @@ const Entity = ({
 
   return (
     <div className="page">
-      <Prompt when={hasToDisplayPrompt} message={LEAVE_PAGE_MESSAGE} />
-      {showModal && (
-        <DeleteAction
-          onClose={setModalStatus}
-          deleteAction={onDelete}
-          itemName={formData.values.name}
-        />
-      )}
-      {copyModalStatus && (
-        <CopyDataFromAction
-          onClose={handleCopyDataFromClose}
-          copyAction={onCopy}
-          getFormData={getFormData}
-        />
-      )}
-
-      <div className="row row--display-row">
-        <div className="column column--three-quarters">
-          <EntityHeader
-            entityData={entityData}
-            entityIdentifier={entityIdentifier}
-            pageTitle={pageTitle}
-            pageName={pageName}
-            onSubmit={onSubmit}
-            handlePublishAndUnpublish={handlePublishAndUnpublish}
-            isSaveButtonAvailable={isSaveButtonAvailable}
-            isEnablePublishButton={isEnablePublishButton}
-            isEnablePreviewButton={isEnablePreviewButton}
-            toggleCopyModal={setCopyModalStatus}
-            toggleModal={setModalStatus}
-            formData={formData}
-            onViewUrl={onViewUrlHandler}
-            saveButtonText={saveButtonText}
-          />
-
-          <div className="page__content">
-            <div className="content">
-              <Tabs
-                enabled={showPageBuilderTabs}
-                onTabChange={tabId => {
-                  client.writeQuery({
-                    query: GET_CURRENT_TAB_ID,
-                    data: { currentTabId: tabId }
-                  });
-                  setCurrentTabId(tabId);
-                }}>
-                <FormBuilder
-                  getIsFormValid={setIsFormValid}
-                  getFormValues={getFormValues}
-                  schema={schema}
-                  data={clonedFormData}
-                  onChange={onChangeFormValues}
-                  shouldCopyData={shouldCopyData}
-                  updateCopyData={updateCopyData}
-                  formValues={formValues}
-                  isNewEntity={isNewEntity}
-                />
-              </Tabs>
+      <EntityHeader
+        entityData={entityData}
+        entityIdentifier={entityIdentifier}
+        pageTitle={pageTitle}
+        pageName={pageName}
+        onSubmit={onSubmit}
+        handlePublishAndUnpublish={handlePublishAndUnpublish}
+        isSaveButtonAvailable={isSaveButtonAvailable}
+        isEnablePublishButton={isEnablePublishButton}
+        isEnablePreviewButton={isEnablePreviewButton}
+        toggleCopyModal={setCopyModalStatus}
+        toggleModal={setModalStatus}
+        formData={formData}
+        onViewUrl={onViewUrlHandler}
+        saveButtonText={saveButtonText}
+      />
+      <div className="page-wrapper__content">
+        <div className="tabs-wrapper tabs-wrapper__tab">
+          <Prompt when={hasToDisplayPrompt} message={LEAVE_PAGE_MESSAGE} />
+          {showModal && (
+            <DeleteAction
+              onClose={setModalStatus}
+              deleteAction={onDelete}
+              itemName={formData.values.name}
+            />
+          )}
+          {copyModalStatus && (
+            <CopyDataFromAction
+              onClose={handleCopyDataFromClose}
+              copyAction={onCopy}
+              getFormData={getFormData}
+            />
+          )}
+
+          <div className="page__content--fixed">
+            <div className="page__content">
+              <div className="content">
+                <RenderHook hookKey={`entity:${action}:main:top`} entity={entity} schema={schema} />
+                <InfoBoxes id={entity.id} schema={schema} />
+                <Tabs
+                  enabled={showPageBuilderTabs}
+                  onTabChange={tabId => {
+                    client.writeQuery({
+                      query: GET_CURRENT_TAB_ID,
+                      data: { currentTabId: tabId }
+                    });
+                    setCurrentTabId(tabId);
+                  }}>
+                  <FormBuilder
+                    getIsFormValid={setIsFormValid}
+                    getFormValues={getFormValues}
+                    schema={schema}
+                    data={clonedFormData}
+                    onChange={onChangeFormValues}
+                    shouldCopyData={shouldCopyData}
+                    updateCopyData={updateCopyData}
+                    formValues={formValues}
+                    isNewEntity={isNewEntity}
+                  />
+                </Tabs>
+              </div>
             </div>
           </div>
         </div>
-        <div className="column column--one-third">
+
+        <div className="column column--one-third page-sidebar">
           {showSideBarRelations && (
             <SideBarRelations
               entity={entity}

package/src/components/EntityManager/Entity/SideBarRelations/index.js

@@ -4,16 +4,21 @@ import uuidv1 from 'uuid/v1';
 import { useApolloClient } from '@apollo/client';
 import { getQuery } from '@blaze-cms/admin-ui-utils';
 import { formFieldTypes } from '@blaze-cms/react-form-builder';
-import Badge from '@blaze-react/badge';
+import classnames from 'classnames';
 import { VersionsList } from '@blaze-cms/versioning-ui';
-import { PUBLISHED } from '../../../../constants';
+import { PUBLISHED, UNPUBLISHED } from '../../../../constants';
 
 const SideBarRelations = ({ schema, onChange, formData, entity }) => {
   const { relation: RelationComponent } = formFieldTypes;
-  const { formattedStatus, formattedUpdated, formattedCreated, formattedPublished } = formData;
+  const {
+    formattedStatus,
+    formattedUpdated,
+    formattedCreated,
+    formattedPublished,
+    status
+  } = formData;
   const client = useApolloClient();
   const [relationsComponents, setRelationsComponents] = useState(null);
-
   useEffect(
     () => {
       (async () => {
@@ -51,17 +56,26 @@ const SideBarRelations = ({ schema, onChange, formData, entity }) => {
   const { id: itemId } = entity;
   const { identifier: itemEntity, interfaces } = schema;
 
+  const statusClassName = classnames('sidebar__status__badge', {
+    'sidebar__status__badge--published': status === PUBLISHED,
+    'sidebar__status__badge--unpublished': status === UNPUBLISHED
+  });
+
   return (
     <div className="sidebar" data-testid="sideBarRelations-main-div">
       <div className="sidebar__content">
         {formattedCreated && (
           <div className="sidebar__status">
-            {formattedStatus && (
-              <Badge type="status" modifiers={formattedStatus}>
-                {formattedStatus}
-                {formattedStatus === PUBLISHED && `: ${formattedPublished}`}
-              </Badge>
+            <div className="sidebar__status__wrapper">
+              <b>Status</b>
+              <span className={statusClassName}>{formattedStatus}</span>
+            </div>
+            {formattedStatus === PUBLISHED && (
+              <p>
+                {formattedStatus} on: <span> {formattedPublished}</span>
+              </p>
             )}
+
             <p>
               Created: <span>{formattedCreated}</span>
             </p>

package/src/components/InfoBoxes/InfoBoxes.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import InfoBoxContainer from './container/InfoBoxContainer';
+
+const InfoBoxes = ({ id, schema }) => {
+  const {
+    displayProperties: { adminInfoBoxes = [] }
+  } = schema;
+
+  if (adminInfoBoxes.length <= 0) {
+    return null;
+  }
+
+  return adminInfoBoxes.map(infoBox => (
+    <InfoBoxContainer id={id} schema={schema} key={infoBox.key} infoBox={infoBox} />
+  ));
+};
+
+export default InfoBoxes;
+
+InfoBoxes.propTypes = {
+  id: PropTypes.string.isRequired,
+  schema: PropTypes.object.isRequired
+};

package/src/components/InfoBoxes/container/InfoBoxContainer.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import useData from '../hooks/useData';
+import InfoBox from '../presentational/InfoBox';
+
+const InfoBoxContainer = ({ id, schema, infoBox }) => {
+  const { data } = useData({ id, schema, infoBox });
+
+  if (!data || !Object.keys(data) || Object.keys(data).length === 0) return null;
+
+  const items = Object.values(data).flatMap(item => Object.values(item));
+
+  return <InfoBox items={items} infoBoxKey={infoBox.key} />;
+};
+
+export default InfoBoxContainer;
+
+InfoBoxContainer.propTypes = {
+  id: PropTypes.string.isRequired,
+  infoBox: PropTypes.object.isRequired,
+  schema: PropTypes.object.isRequired
+};

package/src/components/InfoBoxes/helpers/build-dynamic-query.js

@@ -0,0 +1,25 @@
+import { gql } from '@apollo/client';
+import { BlazeError } from '@blaze-cms/core-errors';
+
+export default function buildDynamicQuery({ id, schema, infoBox }) {
+  if (!schema || !schema.actions || !schema.actions.get || !schema.properties) {
+    throw new BlazeError(
+      'DataEntity query requires get action, properties and fields from entity schema'
+    );
+  }
+
+  const fields = `${infoBox.property} {
+      label
+      value
+    }`;
+
+  return {
+    query: gql`query getInfoBoxData($id: String!){
+    ${schema.actions.get}( id: $id ) {
+      id
+     ${fields}
+     __typename
+    }
+  }`
+  };
+}

package/src/components/InfoBoxes/hooks/useData.js

@@ -0,0 +1,20 @@
+import { useQuery, gql } from '@apollo/client';
+import useInfoBoxData from './useInfoBox';
+
+function useData({ id, schema, infoBox }) {
+  const { query } = useInfoBoxData({ id, schema, infoBox });
+
+  const infoBoxQuery =
+    query ||
+    gql`
+      query {
+        __typename
+      }
+    `;
+
+  const { data = {}, loading, error } = useQuery(infoBoxQuery, { variables: { id }, skip: !query });
+
+  return { data: data.__typename !== 'Query' ? data : null, loading, error };
+}
+
+export default useData;

package/src/components/InfoBoxes/hooks/useInfoBox.js

@@ -0,0 +1,13 @@
+import buildDynamicQuery from '../helpers/build-dynamic-query';
+
+function useInfoBox({ id, schema, infoBox }) {
+  const { query } = buildDynamicQuery({
+    id,
+    schema,
+    infoBox
+  });
+
+  return { query: query || null };
+}
+
+export default useInfoBox;

package/src/components/InfoBoxes/index.js

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

package/src/components/InfoBoxes/presentational/InfoBox.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const InfoBox = ({ items, infoBoxKey }) => {
+  if (!items) return null;
+
+  const infoBoxItems = items.map(item =>
+    Object.values(item)
+      .map(info => {
+        if (!info.label || !info.value) return null;
+
+        return (
+          <div className="info-box--item" key={`${infoBoxKey}-${info.label.toLowerCase()}`}>
+            <div className="info-box--label">{info.label}: </div>
+            <div className="info-box--value">{info.value}</div>
+          </div>
+        );
+      })
+      .filter(Boolean)
+  );
+
+  return (
+    <div className="info-box" key={infoBoxKey}>
+      <div className="info-box--container">{infoBoxItems}</div>
+    </div>
+  );
+};
+
+export default InfoBox;
+
+InfoBox.propTypes = {
+  infoBoxKey: PropTypes.string.isRequired,
+  items: PropTypes.array.isRequired
+};