@eeacms/volto-clms-theme 1.0.104 → 1.0.107

package/CHANGELOG.md

@@ -4,8 +4,47 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.0.107](https://github.com/eea/volto-clms-theme/compare/1.0.106...1.0.107)
+
+- Minor fixes [`#277`](https://github.com/eea/volto-clms-theme/pull/277)
+- remove unused import [`dc57cf5`](https://github.com/eea/volto-clms-theme/commit/dc57cf5d5a3c1537edd762854be35ae076fc0359)
+- unify related items in one component [`87fa84f`](https://github.com/eea/volto-clms-theme/commit/87fa84f78c06ec666b2a5ae720e6faa76df9ed1d)
+- show related products/datasets always [`a35faad`](https://github.com/eea/volto-clms-theme/commit/a35faad04dc54e78afa9fc47fe9545ff7fe36303)
+- show only File items [`abb4859`](https://github.com/eea/volto-clms-theme/commit/abb48592819a4bf338fc34aebdc1f1ecd920a226)
+
+#### [1.0.106](https://github.com/eea/volto-clms-theme/compare/1.0.105...1.0.106)
+
+> 13 July 2022
+
+- Develop [`#276`](https://github.com/eea/volto-clms-theme/pull/276)
+- new field types for form [`a452429`](https://github.com/eea/volto-clms-theme/commit/a452429eff799806d58e05e3e4164bc885d6eeb9)
+- handle SelectWidget choices until the vocabulary is loaded [`0614fb5`](https://github.com/eea/volto-clms-theme/commit/0614fb584f52571d15e37fbe921e0694594a01f4)
+- EmailWidget fix and ImageWidget created for form block [`fc1d16b`](https://github.com/eea/volto-clms-theme/commit/fc1d16baf2466dec09d835147fc3df839811e409)
+- lint fix [`af5f960`](https://github.com/eea/volto-clms-theme/commit/af5f9605ec147cb010245a58696087abaed55c35)
+- EmailWidget override for correct anguage and size limitation [`8a6c253`](https://github.com/eea/volto-clms-theme/commit/8a6c253f590fcf753d1a274e8ab7767f366d8c1e)
+- number of current filters [`195cc43`](https://github.com/eea/volto-clms-theme/commit/195cc43d351d0e9793a0f462ecf8bdf9433a1def)
+- subscription modal block [`30db876`](https://github.com/eea/volto-clms-theme/commit/30db876826dd53db6bbb11507de11af10a71a4eb)
+
+#### [1.0.105](https://github.com/eea/volto-clms-theme/compare/1.0.104...1.0.105)
+
+> 11 July 2022
+
+- Develop [`#275`](https://github.com/eea/volto-clms-theme/pull/275)
+- File card [`#274`](https://github.com/eea/volto-clms-theme/pull/274)
+- sort items taxonomy items [`#272`](https://github.com/eea/volto-clms-theme/pull/272)
+- Changes in download cart [`#271`](https://github.com/eea/volto-clms-theme/pull/271)
+- related products and datasets added to news and meeting views and login-plone route created [`5704a1a`](https://github.com/eea/volto-clms-theme/commit/5704a1a766148746162b60efaf232ea90dc20cf4)
+- sort items according to the lowercased label and put those with special meaning at the end [`6410abe`](https://github.com/eea/volto-clms-theme/commit/6410abe096f60dcad54dced2026c9df9b7946d68)
+- lint fix [`1264a7a`](https://github.com/eea/volto-clms-theme/commit/1264a7adfe8d679fea1bd821ad087add20f4271d)
+- footer newsletter subscription change, global search maxLength change from 8000 to 200 and /login design change [`a09d24a`](https://github.com/eea/volto-clms-theme/commit/a09d24adbb6fa053fb2a2cc0071506b906593b42)
+- show Collection on download cart, add dropdown selection to it and remove from Type [`3a13417`](https://github.com/eea/volto-clms-theme/commit/3a13417b92c15187fe0e91ca891ccf9f8b0ed3f1)
+- change form label [`c512a2e`](https://github.com/eea/volto-clms-theme/commit/c512a2e1048c977847cedc8379f58f42adebba18)
+
 #### [1.0.104](https://github.com/eea/volto-clms-theme/compare/1.0.103...1.0.104)
 
+> 30 June 2022
+
+- Develop [`#270`](https://github.com/eea/volto-clms-theme/pull/270)
 - use a combined vocabulary of Products and Datasets [`9f9d0c6`](https://github.com/eea/volto-clms-theme/commit/9f9d0c693a1e870614eb8adc07c58657d9d72a06)
 - allow multiple values [`1edb5dd`](https://github.com/eea/volto-clms-theme/commit/1edb5dd166f31ade19bdcae0b7fa92836dbad420)
 - Products Vocabulary for volto-form-block CLMS-747 [`3f48358`](https://github.com/eea/volto-clms-theme/commit/3f48358dab6a3c20a8367bf4be93c94af6c86350)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.104",
+  "version": "1.0.107",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CclSubscriptionBlock/SubscriptionEdit.jsx

@@ -1,4 +1,4 @@
-import { SubscriptionView } from '@eeacms/volto-clms-theme/components/CLMSSubscriptionView';
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import { SidebarPortal } from '@plone/volto/components';
 import { SubscriptionSchema } from './schema';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
@@ -16,7 +16,7 @@ const SubscriptionBlockEdit = (props) => {
           aria-hidden="true"
         />
       </div>
-      <SubscriptionView type={data.type || 'events'} />
+      <CclButton mode={'filled'}>{data.title || 'Text example...'}</CclButton>
       <SidebarPortal selected={selected}>
         <InlineForm
           schema={SubscriptionSchema()}

package/src/components/Blocks/CclSubscriptionBlock/SubscriptionView.jsx

@@ -1,9 +1,20 @@
 import { SubscriptionView } from '@eeacms/volto-clms-theme/components/CLMSSubscriptionView';
+import CclModal from '@eeacms/volto-clms-theme/components/CclModal/CclModal';
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 
 const SubscriptionBlockView = (props) => {
   const { data } = props;
 
-  return <SubscriptionView type={data.type || 'events'} />;
+  return (
+    <CclModal
+      trigger={
+        <CclButton mode={'filled'}>{data.title || 'Text example...'}</CclButton>
+      }
+      size="small"
+    >
+      <SubscriptionView type={data.type || 'events'} />
+    </CclModal>
+  );
 };
 
 export default SubscriptionBlockView;

package/src/components/Blocks/CclSubscriptionBlock/schema.js

@@ -4,7 +4,7 @@ export const SubscriptionSchema = () => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['type'],
+      fields: ['type', 'title'],
     },
   ],
   properties: {
@@ -16,6 +16,10 @@ export const SubscriptionSchema = () => ({
         ['newsletter', 'newsletter'],
       ],
     },
+    title: {
+      title: 'Title',
+      type: 'string',
+    },
   },
   required: ['product'],
 });

package/src/components/Blocks/CustomTemplates/VoltoFormBlock/VocabularyWidget.jsx

@@ -45,11 +45,13 @@ const VocabularyWidget = ({
       getVocabulary={() => {}}
       getVocabularyTokenTitle={() => {}}
       choices={
-        vocabItems?.loaded && [
-          ...vocabItems.items.map((item) => {
-            return [item.label, item.label];
-          }),
-        ]
+        vocabItems?.loaded
+          ? [
+              ...vocabItems.items.map((item) => {
+                return [item.label, item.label];
+              }),
+            ]
+          : []
       }
       value={value}
       onChange={onChange}

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/FilterList.jsx

@@ -25,7 +25,7 @@ const FilterList = (props) => {
         (v) =>
           v[1] &&
           baseFacets.length > 0 &&
-          !baseFacets.map((bf) => bf.field?.value).includes(v[0]),
+          baseFacets.map((bf) => bf.field?.value).includes(v[0]),
       ),
   );
 

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/SearchInput.jsx

@@ -30,7 +30,7 @@ const SearchInput = (props) => {
   return (
     <div className="search-input">
       <Input
-        maxLength="8000"
+        maxLength="200"
         id={`${props.id}-searchtext`}
         value={searchText}
         placeholder={

package/src/components/Blocks/customBlocks.js

@@ -65,6 +65,7 @@ import homeBand from '@plone/volto/icons/image-wide.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
 import navSVG from '@plone/volto/icons/nav.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
+import ImageWidget from '@eeacms/volto-clms-theme/components/Widgets/ImageWidget';
 
 export const customGroupBlocksOrder = [
   {
@@ -474,6 +475,31 @@ const customBlocks = (config) => ({
             isMulti: true,
           }),
       },
+      {
+        id: 'topic_vocabulary',
+        label: 'Topics Vocabulary',
+        component: (props) =>
+          VocabularyWidget({
+            ...props,
+            vocabulary: 'clms.types.TopicsVocabulary',
+            isMulti: true,
+          }),
+      },
+      {
+        id: 'spatial_coverage_vocabulary',
+        label: 'Spatial Coverage Vocabulary',
+        component: (props) =>
+          VocabularyWidget({
+            ...props,
+            vocabulary: 'clms.types.UseCaseSpatialCoverageVocabulary',
+            isMulti: true,
+          }),
+      },
+      {
+        id: 'image_field_widget',
+        label: 'Image Field Widget',
+        component: ImageWidget,
+      },
     ],
   },
 });

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -214,6 +214,24 @@ const CLMSCartContent = (props) => {
   };
 
   const TypeNaming = (typeProps) => {
+    const { item } = typeProps;
+    if (item.file_id) {
+      return (
+        <span className={'tag tag-' + item?.type?.toLowerCase()}>
+          {contentOrDash(item.type)}
+        </span>
+      );
+    } else if (!item.type) {
+      return '-';
+    } else {
+      let values = item.type_options.filter((myitem) => {
+        return myitem['id'] === item.type;
+      });
+      return values.length > 0 ? values[0].name : '.';
+    }
+  };
+
+  const CollectionNaming = (typeProps) => {
     const { item } = typeProps;
     if (item.file_id) {
       return (
@@ -237,11 +255,7 @@ const CLMSCartContent = (props) => {
           return {
             key: option.id,
             value: option.id,
-            text:
-              option.name +
-              ((option.collection !== undefined &&
-                ' (' + option.collection + ')') ||
-                ''),
+            text: (option.collection === undefined && '-') || option.collection,
           };
         })}
         onChange={(e, data) => {
@@ -290,6 +304,7 @@ const CLMSCartContent = (props) => {
                   <th>Source</th>
                   <th>Area</th>
                   <th>Type</th>
+                  <th>Collection</th>
                   <th>Format</th>
                   <th>Projection</th>
                   <th></th>
@@ -346,6 +361,9 @@ const CLMSCartContent = (props) => {
                       <td>
                         <TypeNaming item={item} />
                       </td>
+                      <td>
+                        <CollectionNaming item={item} />
+                      </td>
                       <td className="table-td-format">
                         {!item.file_id ? (
                           <Select

package/src/components/CLMSLoginView/CLMSLogin.css

@@ -0,0 +1,17 @@
+.header-login-link {
+  color: white;
+}
+
+.green-login-link {
+  color: #a0b128bf;
+  cursor: pointer;
+}
+
+.login {
+  margin-top: 3rem;
+}
+
+.login-button {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}

package/src/components/CLMSLoginView/CLMSLogin.jsx

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import config from '@plone/volto/registry';
+import { toPublicURL } from '@plone/volto/helpers/Url/Url';
+import './CLMSLogin.css';
+
+/**
+ * Login Modal component doc.
+ * @function CclLoginModal
+ * @example <CclLoginModal />
+ *
+ */
+function CLMSLoginView(props) {
+  const registryRecords = useSelector((state) => state.registry.records);
+  const [loginUrl, setLoginUrl] = React.useState('');
+  const registry_key = config.settings?.registry?.login_url || null;
+
+  useEffect(() => {
+    if (registryRecords && registry_key in registryRecords) {
+      setLoginUrl(
+        registryRecords[registry_key] + '?came_from=' + window.location.href,
+      );
+    }
+  }, [registryRecords, registry_key]);
+
+  return (
+    <>
+      <div className="ccl-container login">
+        <h1 className="page-title">Registration / Login</h1>
+        <div className="modal-login-text">
+          <p>
+            This site uses EU Login to handle user registration and login. You
+            can read more about this service in the{' '}
+            <a href="https://ecas.ec.europa.eu/cas/about.html">
+              EU Login site help
+            </a>
+            .
+          </p>
+          <p>
+            {' '}
+            When you clik on the following link, you will be sent to EU Login
+            and after a successful login there you will be redirected back to
+            this site.
+          </p>
+          <p>
+            If you have any issues or questions, please contact us using the
+            <a href="/en/contact-service-helpdesk"> helpdesk</a>.
+          </p>
+        </div>
+      </div>
+      <div className="login-button">
+        <div className="modal-buttons">
+          <a
+            href={toPublicURL(loginUrl) || '#'}
+            className="ccl-button ccl-button-green"
+          >
+            Login using EU Login
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}
+export default CLMSLoginView;

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -20,6 +20,10 @@ import { postMeetingRegister } from '../../actions';
 import { toast } from 'react-toastify';
 import { LightGalleryListing } from './CclLightGallery';
 import CclListingCards from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingCards';
+import config from '@plone/volto/registry';
+import AnimateHeight from 'react-animate-height';
+import { Accordion } from 'semantic-ui-react';
+import { CLMSRelatedItems } from '../CLMSRelatedItems';
 
 export const CLMSMeetingView = (props) => {
   const { content, intl } = props;
@@ -109,15 +113,9 @@ export const CLMSMeetingView = (props) => {
     );
     history.push(props.location.pathname + '/form');
   }
-
-  const files =
-    content.items !== undefined
-      ? content.items.map((item) => (item['@type'] === 'File' ? item : null))
-      : [];
-  const index = files.indexOf(null);
-  if (index > -1) {
-    files.splice(index, 1);
-  }
+  const files = content.items
+    ? content.items.filter((item) => item['@type'] === 'File')
+    : [];
   const RegistrationButton = ({ rContent, rMeeting_register, rIsLoggedIn }) => {
     return (
       <>
@@ -182,6 +180,36 @@ export const CLMSMeetingView = (props) => {
       intl.formatMessage(messages.no_fullname_customfield),
     );
 
+  const [activeIndex, setActiveIndex] = React.useState([99]);
+
+  const handleClick = ({ index }) => {
+    const newIndex =
+      activeIndex.indexOf(index) === -1
+        ? [...activeIndex, index]
+        : activeIndex.filter((item) => item !== index);
+
+    setActiveIndex(newIndex);
+  };
+
+  const [activeDatasetIndex, setActiveDatasetIndex] = React.useState([99]);
+
+  const handleDatasetClick = ({ datasetindex }) => {
+    const newDatasetIndex =
+      activeDatasetIndex.indexOf(datasetindex) === -1
+        ? [...activeDatasetIndex, datasetindex]
+        : activeDatasetIndex.filter((item) => item !== datasetindex);
+
+    setActiveDatasetIndex(newDatasetIndex);
+  };
+
+  const titleIcons = config.blocks?.blocksConfig?.accordion?.titleIcons;
+
+  function iconName(iconData, iTitleIcons) {
+    return iconData?.right_arrows
+      ? iTitleIcons.rightPosition
+      : iTitleIcons.leftPosition;
+  }
+
   return (
     <div className="ccl-container">
       <h1 className="page-title">{content.title}</h1>
@@ -392,6 +420,7 @@ export const CLMSMeetingView = (props) => {
         )}
         <StringToHTML string={content.text?.data || ''} />
         <LightGalleryListing />
+
         {files.length > 0 && (
           <CclListingCards
             variation="file"
@@ -399,6 +428,63 @@ export const CLMSMeetingView = (props) => {
             linkHref={`${files['@id']}/@@download/file`}
           />
         )}
+        <div className="dataset-info-documents dropdown">
+          <div className="accordion-block"></div>
+          {content?.products?.length > 0 && (
+            <Accordion fluid styled>
+              <Accordion.Title
+                as={'h2'}
+                onClick={() => handleClick({ index: 0 })}
+                className={'accordion-title align-arrow-right'}
+              >
+                {activeIndex.includes(0) ? (
+                  <Icon
+                    name={iconName(content, titleIcons.opened)}
+                    size="24px"
+                  />
+                ) : (
+                  <Icon
+                    name={iconName(content, titleIcons.closed)}
+                    size="24px"
+                  />
+                )}
+                <span>Related products</span>
+              </Accordion.Title>
+              <Accordion.Content active={activeIndex.includes(0)}>
+                <AnimateHeight animateOpacity duration={500} height={'auto'}>
+                  <CLMSRelatedItems items={content.products} />
+                </AnimateHeight>
+              </Accordion.Content>
+            </Accordion>
+          )}
+          {content?.datasets?.length > 0 && (
+            <Accordion fluid styled>
+              <Accordion.Title
+                as={'h2'}
+                onClick={() => handleDatasetClick({ datasetindex: 0 })}
+                className={'accordion-title align-arrow-right'}
+              >
+                {activeDatasetIndex.includes(0) ? (
+                  <Icon
+                    name={iconName(content, titleIcons.opened)}
+                    size="24px"
+                  />
+                ) : (
+                  <Icon
+                    name={iconName(content, titleIcons.closed)}
+                    size="24px"
+                  />
+                )}
+                <span>Related datasets</span>
+              </Accordion.Title>
+              <Accordion.Content active={activeDatasetIndex.includes(0)}>
+                <AnimateHeight animateOpacity duration={500} height={'auto'}>
+                  <CLMSRelatedItems items={content.datasets} />
+                </AnimateHeight>
+              </Accordion.Content>
+            </Accordion>
+          )}
+        </div>
       </Segment>
     </div>
   );

package/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx

@@ -5,16 +5,47 @@ import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { cclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
 import { LightGalleryListing } from '@eeacms/volto-clms-theme/components/CLMSMeetingView/CclLightGallery';
 import CclListingCards from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingCards';
+import config from '@plone/volto/registry';
+import { Icon } from '@plone/volto/components';
+import AnimateHeight from 'react-animate-height';
+import { Accordion } from 'semantic-ui-react';
+import { CLMSRelatedItems } from '../CLMSRelatedItems';
+
 const CLMSNewsItemView = (props) => {
   const { content } = props;
-  const files =
-    content.items !== undefined
-      ? content.items.map((item) => (item['@type'] === 'File' ? item : null))
-      : [];
-  const index = files.indexOf(null);
-  if (index > -1) {
-    files.splice(index, 1);
+  const files = content.items
+    ? content.items.filter((item) => item['@type'] === 'File')
+    : [];
+  const [activeIndex, setActiveIndex] = React.useState([99]);
+
+  const handleClick = ({ index }) => {
+    const newIndex =
+      activeIndex.indexOf(index) === -1
+        ? [...activeIndex, index]
+        : activeIndex.filter((item) => item !== index);
+
+    setActiveIndex(newIndex);
+  };
+
+  const [activeDatasetIndex, setActiveDatasetIndex] = React.useState([99]);
+
+  const handleDatasetClick = ({ datasetindex }) => {
+    const newDatasetIndex =
+      activeDatasetIndex.indexOf(datasetindex) === -1
+        ? [...activeDatasetIndex, datasetindex]
+        : activeDatasetIndex.filter((item) => item !== datasetindex);
+
+    setActiveDatasetIndex(newDatasetIndex);
+  };
+
+  const titleIcons = config.blocks?.blocksConfig?.accordion?.titleIcons;
+
+  function iconName(iconData, iTitleIcons) {
+    return iconData?.right_arrows
+      ? iTitleIcons.rightPosition
+      : iTitleIcons.leftPosition;
   }
+
   return (
     <div className="ccl-container">
       {hasBlocksData(content) && content.blocks_layout?.items?.length > 4 ? (
@@ -45,16 +76,58 @@ const CLMSNewsItemView = (props) => {
               <StringToHTML string={content.text?.data || ''} />
             </div>
             <LightGalleryListing />
-            {files.length > 0 && (
-              <CclListingCards
-                variation="file"
-                items={files}
-                linkHref={`${files['@id']}/@@download/file`}
-              />
-            )}
           </div>
         </>
       )}
+      {files.length > 0 && (
+        <CclListingCards
+          variation="file"
+          items={files}
+          linkHref={`${files['@id']}/@@download/file`}
+        />
+      )}
+      {content?.products?.length > 0 && (
+        <Accordion fluid styled>
+          <Accordion.Title
+            as={'h2'}
+            onClick={() => handleClick({ index: 0 })}
+            className={'accordion-title align-arrow-right'}
+          >
+            {activeIndex.includes(0) ? (
+              <Icon name={iconName(content, titleIcons.opened)} size="24px" />
+            ) : (
+              <Icon name={iconName(content, titleIcons.closed)} size="24px" />
+            )}
+            <span>Related products</span>
+          </Accordion.Title>
+          <Accordion.Content active={activeIndex.includes(0)}>
+            <AnimateHeight animateOpacity duration={500} height={'auto'}>
+              <CLMSRelatedItems items={content.products} />
+            </AnimateHeight>
+          </Accordion.Content>
+        </Accordion>
+      )}
+      {content?.datasets?.length > 0 && (
+        <Accordion fluid styled>
+          <Accordion.Title
+            as={'h2'}
+            onClick={() => handleDatasetClick({ datasetindex: 0 })}
+            className={'accordion-title align-arrow-right'}
+          >
+            {activeDatasetIndex.includes(0) ? (
+              <Icon name={iconName(content, titleIcons.opened)} size="24px" />
+            ) : (
+              <Icon name={iconName(content, titleIcons.closed)} size="24px" />
+            )}
+            <span>Related datasets</span>
+          </Accordion.Title>
+          <Accordion.Content active={activeDatasetIndex.includes(0)}>
+            <AnimateHeight animateOpacity duration={500} height={'auto'}>
+              <CLMSRelatedItems items={content.datasets} />
+            </AnimateHeight>
+          </Accordion.Content>
+        </Accordion>
+      )}
     </div>
   );
 };

package/src/components/CLMSRelatedItems/CLMSRelatedItems.jsx

@@ -0,0 +1,39 @@
+import { Grid, Image } from 'semantic-ui-react';
+import PlaceHolder from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-thumbnail-placeholder.jpg';
+
+const CLMSRelatedItems = (props) => {
+  const { items } = props;
+
+  return (
+    <>
+      {items.map((item, key) => (
+        <>
+          <Grid columns="2">
+            <Grid.Column width={3} key={key}>
+              {item.mage_field ? (
+                <Image
+                  src={`${item['@id']}/@@images/image/mini`}
+                  alt={item?.title || 'Placeholder'}
+                />
+              ) : (
+                <Image
+                  fluid="true"
+                  src={PlaceHolder}
+                  alt={item?.title || 'Placeholder'}
+                />
+              )}
+            </Grid.Column>
+            <Grid.Column width={9}>
+              <a href={item['@id']}>
+                <strong>{item.title}</strong>
+              </a>
+              {item?.description && <p>{item.description}</p>}
+            </Grid.Column>
+          </Grid>
+        </>
+      ))}
+    </>
+  );
+};
+
+export { CLMSRelatedItems };

package/src/components/CLMSRelatedItems/index.js

@@ -0,0 +1,3 @@
+import { CLMSRelatedItems } from './CLMSRelatedItems';
+
+export { CLMSRelatedItems };