@eeacms/volto-clms-theme 1.0.118 → 1.0.121

package/CHANGELOG.md

@@ -4,6 +4,50 @@ 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.121](https://github.com/eea/volto-clms-theme/compare/1.0.120...1.0.121) - 5 September 2022
+
+#### :bug: Bug Fixes
+
+- fix: CLMS-1224 this file should be removed with volto-16 [Unai - [`7cf72ab`](https://github.com/eea/volto-clms-theme/commit/7cf72aba7b1d69cf1b310a89410aa3a3753f01f3)]
+- fix:lint problems [Unai - [`4e8b9dc`](https://github.com/eea/volto-clms-theme/commit/4e8b9dc6c3cb6813baeb4b75fea5afb1198d9640)]
+- fix: not count children filters on checboxParentFacets [ionlizarazu - [`4b21b1c`](https://github.com/eea/volto-clms-theme/commit/4b21b1c3337e132248ad1ada6a9bf268c5332579)]
+- fix: related use cases [Unai - [`381af05`](https://github.com/eea/volto-clms-theme/commit/381af058fe7484805e5175600b40cd80d52d2c9e)]
+- fix: changed data resource abstract with overview [Unai - [`c630b7e`](https://github.com/eea/volto-clms-theme/commit/c630b7e6a6e093319473554a4a724fd320783f2d)]
+- fix:redirect to download from map viewer when necesary [Unai - [`9ad9d78`](https://github.com/eea/volto-clms-theme/commit/9ad9d78e7e7b946c34da20d7edea2d68c7cd6fe5)]
+- fix: file card modified to show effective date [Unai - [`b2467e7`](https://github.com/eea/volto-clms-theme/commit/b2467e7a3a813871811388e92b308aea62aa688c)]
+- fix:technical documents on datasets general info view [Unai - [`532cf09`](https://github.com/eea/volto-clms-theme/commit/532cf094933c9d0ba1b9fa77609555621645972a)]
+- fix:carousel link open in new tab [Unai - [`bcc39a5`](https://github.com/eea/volto-clms-theme/commit/bcc39a5b921fee81a653743afd1f219a79c4748f)]
+
+#### :nail_care: Enhancements
+
+- refactor: removed overview title from dataset [Unai - [`e08ff03`](https://github.com/eea/volto-clms-theme/commit/e08ff0348e2a371b033206e3e66f900f09edd443)]
+
+#### :hammer_and_wrench: Others
+
+- merge sprint-31 branch [Mikel Larreategi - [`617b5d2`](https://github.com/eea/volto-clms-theme/commit/617b5d25a17cdd264b017a8440d3c4c1c9e283bd)]
+- rename variable [ionlizarazu - [`7b4c537`](https://github.com/eea/volto-clms-theme/commit/7b4c53783e4bbe676ee6e7982610b191a9b40532)]
+### [1.0.120](https://github.com/eea/volto-clms-theme/compare/1.0.119...1.0.120) - 2 September 2022
+
+#### :bug: Bug Fixes
+
+- fix: use plain a for EU Login URL [Mikel Larreategi - [`e8d2d66`](https://github.com/eea/volto-clms-theme/commit/e8d2d664e750df517a8d955c4833a70e0f8b34e3)]
+
+#### :hammer_and_wrench: Others
+
+- Map login button fix [rodriama - [`0e7e520`](https://github.com/eea/volto-clms-theme/commit/0e7e520ac2515846b4af6e782a9f4cdc2375a467)]
+- Card doc fix [rodriama - [`556e33c`](https://github.com/eea/volto-clms-theme/commit/556e33c833b9980edab3b778fc408e662fd5fffd)]
+- ESLint fix [rodriama - [`d55db81`](https://github.com/eea/volto-clms-theme/commit/d55db818a02be4ccfcc524c1f03005600644a9e4)]
+- Credits pop up fix [rodriama - [`3772c16`](https://github.com/eea/volto-clms-theme/commit/3772c163a0a998a7dc7b0fddd176346f2d56a4e1)]
+- ESLint fix [rodriama - [`08a9bd8`](https://github.com/eea/volto-clms-theme/commit/08a9bd8c3cc78d928df58cc8b66fa3aea81f2b13)]
+- Event detail segment [rodriama - [`524e3ff`](https://github.com/eea/volto-clms-theme/commit/524e3fff130ae53ffb09aa534d120677e5fd1c1a)]
+### [1.0.119](https://github.com/eea/volto-clms-theme/compare/1.0.118...1.0.119) - 1 September 2022
+
+#### :bug: Bug Fixes
+
+- fix: restore taxonomy item ordering [Mikel Larreategi - [`5080a9f`](https://github.com/eea/volto-clms-theme/commit/5080a9f456888bba77042b673f62e3db5cfe86fb)]
+- fix: reverse checkbox label ordering [ionlizarazu - [`cd2ea37`](https://github.com/eea/volto-clms-theme/commit/cd2ea377f9f6c4cdd584dd9c5df41e3574fcd686)]
+- fix: search facet checkbox functionality. Order by title and replace starting text 00# from the checkbox labels [ionlizarazu - [`df69da5`](https://github.com/eea/volto-clms-theme/commit/df69da5124b25ac098b4204e20663524c2ebb91a)]
+
 ### [1.0.118](https://github.com/eea/volto-clms-theme/compare/1.0.117...1.0.118) - 1 September 2022
 
 #### :bug: Bug Fixes

package/package.json

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

package/src/components/Blocks/CclHomeBgImageBlock/CclGreenBgView.jsx

@@ -69,6 +69,8 @@ const CclGreenBgView = (props) => {
                 <a
                   className="ccl-banner-info-link"
                   href={'' + data?.locationHref?.[0]?.['@id']}
+                  target="_blank"
+                  rel="noreferrer"
                 >
                   More info
                 </a>

package/src/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselView.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import loadable from '@loadable/component';
+import { UniversalLink } from '@plone/volto/components';
 const Slider = loadable(() => import('react-slick'));
 
 const CclTextLinkCarouselView = (props) => {
@@ -24,7 +25,14 @@ const CclTextLinkCarouselView = (props) => {
           {data?.textLink?.items.map((item, index) => (
             <div className="text-link-carousel-block" key={index}>
               <div className="text-link-carousel-block-content">
-                <a href={'' + item?.link?.[0]?.['@id']}>{item?.text}</a>
+                <UniversalLink
+                  openLinkInNewTab={true}
+                  href={'' + item?.link?.[0]?.['@id']}
+                >
+                  {item?.text}
+                </UniversalLink>
+
+                {/* <a href={'' + item?.link?.[0]?.['@id']}>{item?.text}</a> */}
               </div>
             </div>
           ))}

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

@@ -10,7 +10,7 @@ import {
   selectFacetStateToValue,
   selectFacetValueToQuery,
 } from '@plone/volto/components/manage/Blocks/Search/components/base';
-import { checkAllChildren } from './utils';
+import { checkAllChildren, uncheckOptionAndChildren } from './utils';
 
 const hasAllChildrensSelected = (value, childrens) => {
   var result = true;
@@ -92,16 +92,9 @@ const CheckboxListParent = ({ option, key, onChange, value, id }) => {
                     ...checkAllChildren(value, option).map((f) => f.value),
                   ])
                 : onChange(id, [
-                    ...value
-                      .filter((item) => item.value !== option.value)
-                      .filter(
-                        (item) =>
-                          option.childrens?.length > 0 &&
-                          !option.childrens
-                            .map((ch) => ch.value)
-                            .includes(item.value),
-                      )
-                      .map((f) => f.value),
+                    ...uncheckOptionAndChildren(value, option).map(
+                      (f) => f.value,
+                    ),
                   ]);
             }}
             label={

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, Icon } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
+import { structure_taxonomy_terms } from '@eeacms/volto-clms-theme/components';
 
 const messages = defineMessages({
   currentFilters: {
@@ -14,7 +15,7 @@ const messages = defineMessages({
 });
 
 const FilterList = (props) => {
-  const { facets, setFacets, isEditMode, data } = props;
+  const { facets, setFacets, isEditMode, data, querystring } = props;
   const showFilterList = !Object.values(facets).every((facet) => !facet.length);
 
   const baseFacets = data.facets;
@@ -28,10 +29,44 @@ const FilterList = (props) => {
           baseFacets.map((bf) => bf.field?.value).includes(v[0]),
       ),
   );
+  const fieldsToAvoidChildren = data.facets
+    .filter((item) => item.type === 'checkboxTreeParentFacet')
+    .map((item) => item.field.value);
+  let filtersToAvoid = [];
+  if (querystring.loaded) {
+    filtersToAvoid = fieldsToAvoidChildren
+      .map((field) => {
+        let result = [];
+        const fieldValuesDict = querystring.indexes[field].values;
+        const fieldValues = Object.keys(fieldValuesDict).map((fieldKey) => {
+          return { value: fieldKey, label: fieldValuesDict[fieldKey].title };
+        });
+        const fieldStructuredValues = structure_taxonomy_terms(fieldValues);
+        fieldStructuredValues.forEach((parent) => {
+          parent.childrens.forEach((children) => result.push(children.value));
+        });
+        return result;
+      })
+      .flat(1);
+  }
+  const filtersToAvoidSet = new Set(filtersToAvoid);
 
-  const totalFilters = [].concat.apply([], Object.values(currentFilters))
-    .length;
+  // if (choices?.length > 0) {
+  //   options = structure_taxonomy_terms(choices);
+  // }
+  const currentFiltersToCount = {};
+  Object.keys(currentFilters).forEach((filterKey) => {
+    currentFiltersToCount[filterKey] = currentFilters[filterKey].filter(
+      (filter) => {
+        return !filtersToAvoidSet.has(filter);
+      },
+    );
+  });
+  // const totalFilters = [].concat.apply([], Object.values(currentFilters))
+  //   .length;
 
+  const totalFilters = [].concat.apply([], Object.values(currentFiltersToCount))
+    .length;
   const intl = useIntl();
 
   return showFilterList && Object.keys(currentFilters).length ? (

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/rewriteOptions.js

@@ -80,6 +80,20 @@ const rewriteOptions = (name, choices) => {
         return 0;
       });
   }
+  if (name === 'taxonomy_technical_library_categorization') {
+    result = choices
+      .sort((a, b) => {
+        if (a.label < b.label) {
+          return -1;
+        } else if (a.label > b.label) {
+          return 1;
+        }
+        return 0;
+      })
+      .map((opt) => {
+        return { ...opt, label: opt.label.replace(/^[0-9][0-9]#/, '') };
+      });
+  }
   return result;
 };
 

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/utils.js

@@ -7,5 +7,17 @@ export const checkAllChildren = (value, option) => {
       value.push(ch);
     }
   });
-  return value;
+  return [...value, { label: option.label, value: option.value }];
+};
+
+export const uncheckOptionAndChildren = (value, option) => {
+  return value
+    .filter((item) => item.value !== option.value)
+    .filter((item) => {
+      if (option.childrens?.length > 0) {
+        return !option.childrens.map((ch) => ch.value).includes(item.value);
+      } else {
+        return true;
+      }
+    });
 };

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/custom.less

@@ -32,6 +32,7 @@ div.tabs-block.CCLCarousel {
 .text-link-carousel-block {
   height: 2rem;
   padding: 0;
+  margin-left: 0.5rem;
 }
 
 .text-link-carousel-block-content {

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.jsx

@@ -77,6 +77,7 @@ const CLMSDatasetDetailView = ({ content, token }) => {
                   key={item.id}
                   loading={geonetwork_importation.loading}
                   circular
+                  style={{ width: '50%' }}
                 >
                   <strong>
                     {item.title} (from {item.type}):{' '}
@@ -203,6 +204,7 @@ const CLMSDatasetDetailView = ({ content, token }) => {
             key={'wms-layers-import'}
             loading={wms_layers_importation?.loading}
             circular
+            style={{ width: '50%' }}
           >
             <Modal
               onClose={() => {
@@ -288,17 +290,13 @@ const CLMSDatasetDetailView = ({ content, token }) => {
               </p>
             )}
           </Segment>
-        </Segment.Group>
-      )}
-
-      {user?.roles && user.roles.includes('Manager') && (
-        <Segment.Group compact horizontal>
           <Segment
             padded={'very'}
             color={'olive'}
             key={'wms-fields-import'}
             loading={wms_fields_importation?.loading}
             circular
+            style={{ width: '50%' }}
           >
             <Modal
               onClose={() => {

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -14,22 +14,14 @@ import { useLocation } from 'react-router-dom';
 
 const DataSetInfoContent = (props) => {
   const dispatch = useDispatch();
-  const {
-    UID,
-    id,
-    validation,
-    dataResourceAbstract,
-    data,
-    geonetwork_identifiers,
-    citation,
-  } = props;
+  const { UID, id, validation, data, geonetwork_identifiers, citation } = props;
   const location = useLocation();
   const searchSubrequests = useSelector((state) => state.search.subrequests);
   let libraries = searchSubrequests?.[id]?.items || [];
   let librariesPending = searchSubrequests?.[id]?.loading;
   const user = useSelector((state) => state.users.user);
   React.useEffect(() => {
-    if (location.hash === '#GeneralInfo' && UID) {
+    if (location.hash === '#General-Info' && UID) {
       dispatch(
         searchContent(
           '',
@@ -66,7 +58,6 @@ const DataSetInfoContent = (props) => {
       ? iTitleIcons.rightPosition
       : iTitleIcons.leftPosition;
   }
-
   return (
     <div>
       {validation?.data && validation?.data !== '<p><br/></p>' && (
@@ -77,11 +68,9 @@ const DataSetInfoContent = (props) => {
         ></CclCitation>
       )}
       <CclInfoContainer>
-        {dataResourceAbstract?.data && (
+        {props?.description && (
           <CclInfoDescription
-            title="Data resource abstract"
-            description={<StringToHTML string={dataResourceAbstract.data} />}
-            tooltip="Brief narrative summary of the content of the resource(s) with coverage, main attributes, data sources, important of the work, etc."
+            description={<StringToHTML string={props.description} />}
           ></CclInfoDescription>
         )}
       </CclInfoContainer>

package/src/components/CLMSDatasetDetailView/DownloadDataSetContent.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import CclDownloadTable from '@eeacms/volto-clms-theme/components/CclDownloadTable/CclDownloadTable';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, Redirect } from 'react-router-dom';
 
 const DownloadDataSetContent = (data) => {
   let url = '/register';
@@ -9,6 +9,12 @@ const DownloadDataSetContent = (data) => {
 
   return (
     <div>
+      {data.downloadable_files?.items[0].path === '' &&
+      location.hash === '#Download' ? (
+        <Redirect to={location.pathname + '/download-by-area'} />
+      ) : (
+        ''
+      )}
       {data.token === '' && (
         <div className="login-block">
           <div className="login-content">

package/src/components/CLMSDatasetDetailView/RelatedUseCases.jsx

@@ -14,7 +14,7 @@ const RelatedUseCases = (props) => {
   let librariesPending = searchSubrequests?.[id]?.loading;
   const location = useLocation();
   React.useEffect(() => {
-    if (location.hash === '#Usecases' && UID) {
+    if (location.hash === '#Use-cases' && UID) {
       dispatch(
         searchContent(
           '',

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -288,7 +288,13 @@ export const CLMSMeetingView = (props) => {
           </Segment.Group>
         )}
       {content.description}
-      <Segment compact padded={'very'} color={'olive'} floated="left">
+      <Segment
+        compact
+        padded={'small'}
+        color={'olive'}
+        floated="right"
+        style={{ marginRight: 0 }}
+      >
         <div className="dataset-info-field">
           <div className="dataset-field-title">
             <Header>{intl.formatMessage(messages.when)}</Header>

package/src/components/CclCard/CclCard.jsx

@@ -49,30 +49,30 @@ const CardLink = ({ url, children, className, condition = true }) => {
 const DocCard = ({ card, url, showEditor, children }) => {
   return (
     <>
-      <div className="card-doc-title">
-        {card?.Type === 'TechnicalLibrary' ? (
-          <a href={`${card['@id']}/@@download/file`}>{card?.title}</a>
-        ) : (
-          <Link to={url}>{card?.title}</Link>
-        )}
-        {card?.Type === 'TechnicalLibrary' && showEditor && (
-          <Link to={`${url}/edit`}>
-            <Icon
-              name={penSVG}
-              size="15px"
-              className="circled"
-              title={'Edit'}
-            />
-          </Link>
-        )}
-      </div>
-      <div className="card-doc-text">
-        <div className="doc-description">{card?.description}</div>
+      <div className="card-doc-header">
+        <div className="card-doc-title">
+          {card?.Type === 'TechnicalLibrary' ? (
+            <a href={`${card['@id']}/@@download/file`}>{card?.title}</a>
+          ) : (
+            <Link to={url}>{card?.title}</Link>
+          )}
+          {card?.Type === 'TechnicalLibrary' && showEditor && (
+            <Link to={`${url}/edit`}>
+              <Icon
+                name={penSVG}
+                size="15px"
+                className="circled"
+                title={'Edit'}
+              />
+            </Link>
+          )}
+        </div>
         {card?.Type === 'TechnicalLibrary' && (
           <div className="card-doc-size">{card.getObjSize || ''}</div>
         )}
-        {children}
       </div>
+      <div className="card-doc-description">{card?.description}</div>
+      {children}
     </>
   );
 };
@@ -140,6 +140,9 @@ function CclCard(props) {
                 </div>
                 <div className="card-text">
                   <CardLink url={url}>{card?.title}</CardLink>
+                  <div className="news-detail-date">
+                    {cclDateFormat(card?.effective)}
+                  </div>
                   <div className="card-description">{card?.description}</div>
                   {children}
                 </div>

package/src/components/CclCard/cards.less

@@ -375,13 +375,9 @@
   border-bottom: solid 1px #a0b12833;
 }
 
-/* Documents */
-.card-doc {
-  padding: 1rem;
-}
-
-.card-doc:not(:last-of-type) {
-  border-bottom: solid 1px #a0b12833;
+.card-doc-header {
+  display: flex;
+  justify-content: space-between;
 }
 
 .card-doc-title {
@@ -391,11 +387,6 @@
   font-weight: bold;
 }
 
-.card-doc-text {
-  display: flex;
-  justify-content: space-between;
-}
-
 .card-doc-size {
   margin-left: 1rem;
   white-space: nowrap;

package/src/components/CclLoginModal/CclLoginModal.jsx

@@ -90,12 +90,9 @@ function CclLoginModal(props) {
       </div>
       <div className="actions">
         <div className="modal-buttons">
-          <UniversalLink
-            href={loginUrl || '#'}
-            className="ccl-button ccl-button-green"
-          >
+          <a href={loginUrl || '#'} className="ccl-button ccl-button-green">
             Login using EU Login
-          </UniversalLink>
+          </a>
         </div>
       </div>
     </CclModal>

package/src/components/Widgets/TaxonomyWidget.jsx

@@ -180,7 +180,7 @@ const CheckboxListParent = ({ option, key, onChange, value, id }) => {
                 }}
                 label={
                   <label htmlFor={`field-${option.value}`}>
-                    {option.label}
+                    {option.label.replace(/^[0-9][0-9]#/, '')}
                   </label>
                 }
                 checked={

package/src/components/Widgets/taxonomyUtils.js

@@ -46,5 +46,6 @@ export const structure_taxonomy_terms = (choices) => {
   // });
 
   // return sort_array_items_by_key(options, 'label');
-  return options.reverse();
+  //return options.reverse();
+  return options;
 };

package/src/customizations/volto/components/manage/Widgets/ArrayWidget.jsx

@@ -0,0 +1,413 @@
+/**
+ * ArrayWidget component.
+ * @module components/manage/Widgets/ArrayWidget
+ */
+
+import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { find, isObject } from 'lodash';
+
+import {
+  getVocabFromHint,
+  getVocabFromField,
+  getVocabFromItems,
+} from '@plone/volto/helpers';
+import { getVocabulary } from '@plone/volto/actions';
+
+import {
+  Option,
+  DropdownIndicator,
+  ClearIndicator,
+  selectTheme,
+  customSelectStyles,
+  MenuList,
+  SortableMultiValue,
+  SortableMultiValueLabel,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+
+const messages = defineMessages({
+  select: {
+    id: 'Select…',
+    defaultMessage: 'Select…',
+  },
+  no_value: {
+    id: 'No value',
+    defaultMessage: 'No value',
+  },
+  no_options: {
+    id: 'No options',
+    defaultMessage: 'No options',
+  },
+});
+
+function arrayMove(array, from, to) {
+  const slicedArray = array.slice();
+  slicedArray.splice(
+    to < 0 ? array.length + to : to,
+    0,
+    slicedArray.splice(from, 1)[0],
+  );
+  return slicedArray;
+}
+
+function normalizeArrayValue(choices, value) {
+  if (!value || !Array.isArray(value)) return [];
+  if (value.length === 0) return value;
+
+  if (typeof value[0] === 'string') {
+    // raw value like ['foo', 'bar']
+    return value.map((v) => {
+      return {
+        label: find(choices, (c) => c.value === v)?.label || v,
+        value: v,
+      };
+    });
+  }
+
+  if (
+    isObject(value[0]) &&
+    Object.keys(value[0]).includes('token') // Array of objects, w/ label+value
+  ) {
+    return value
+      .map((v) => {
+        const item = find(choices, (c) => c.value === v.token);
+        return item
+          ? {
+              label: item.label || item.title || item.token,
+              value: v.token,
+            }
+          : {
+              // avoid a crash if choices doesn't include this item
+              label: v.label,
+              value: v.token,
+            };
+      })
+      .filter((f) => !!f);
+  }
+
+  return [];
+}
+
+function normalizeChoices(choices) {
+  if (Array.isArray(choices) && choices.length && Array.isArray(choices[0])) {
+    return choices.map((option) => ({
+      value: option[0],
+      label:
+        // Fix "None" on the serializer, to remove when fixed in p.restapi
+        option[1] !== 'None' && option[1] ? option[1] : option[0],
+    }));
+  }
+
+  return choices;
+}
+
+/**
+ * Compare values and return true if equal.
+ * Consider upper and lower case.
+ * @method compareOption
+ * @param {*} inputValue
+ * @param {*} option
+ * @param {*} accessors
+ * @returns {boolean}
+ */
+const compareOption = (inputValue = '', option, accessors) => {
+  const candidate = String(inputValue);
+  const optionValue = String(accessors.getOptionValue(option));
+  const optionLabel = String(accessors.getOptionLabel(option));
+  return optionValue === candidate || optionLabel === candidate;
+};
+
+/**
+ * ArrayWidget component class.
+ * @class ArrayWidget
+ * @extends Component
+ *
+ * A createable select array widget will be rendered if the named vocabulary is
+ * in the widget definition (hint) like:
+ *
+ * ```
+ * list_field_voc_unconstrained = schema.List(
+ *     title=u"List field with values from vocabulary but not constrained to them.",
+ *     description=u"zope.schema.List",
+ *     value_type=schema.TextLine(),
+ *     required=False,
+ *     missing_value=[],
+ * )
+ * directives.widget(
+ *     "list_field_voc_unconstrained",
+ *     AjaxSelectFieldWidget,
+ *     vocabulary="plone.app.vocabularies.PortalTypes",
+ * )
+ * ```
+ */
+class ArrayWidget extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    required: PropTypes.bool,
+    error: PropTypes.arrayOf(PropTypes.string),
+    getVocabulary: PropTypes.func.isRequired,
+    choices: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    ),
+    vocabLoading: PropTypes.bool,
+    vocabLoaded: PropTypes.bool,
+    items: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    widgetOptions: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    value: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    ),
+    onChange: PropTypes.func.isRequired,
+    wrapped: PropTypes.bool,
+    creatable: PropTypes.bool, //if widget has no vocab and you want to be creatable
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    items: {
+      vocabulary: null,
+    },
+    widgetOptions: {
+      vocabulary: null,
+    },
+    error: [],
+    choices: [],
+    value: null,
+    creatable: false,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs Actions
+   */
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    if (
+      !this.props.items?.choices?.length &&
+      !this.props.choices?.length &&
+      this.props.vocabBaseUrl
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  componentDidUpdate() {
+    if (
+      !this.props.items?.choices?.length &&
+      !this.props.choices?.length &&
+      this.props.vocabLoading === undefined &&
+      !this.props.vocabLoaded
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  /**
+   * Handle the field change, store it in the local state and back to simple
+   * array of tokens for correct serialization
+   * @method handleChange
+   * @param {array} selectedOption The selected options (already aggregated).
+   * @returns {undefined}
+   */
+  handleChange(selectedOption) {
+    this.props.onChange(
+      this.props.id,
+      selectedOption ? selectedOption.map((item) => item.value) : null,
+    );
+  }
+
+  onSortEnd = (selectedOption, { oldIndex, newIndex }) => {
+    const newValue = arrayMove(selectedOption, oldIndex, newIndex);
+
+    this.handleChange(newValue);
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const choices = normalizeChoices(this.props?.choices || []);
+    const selectedOption = normalizeArrayValue(choices, this.props.value);
+
+    const CreatableSelect = this.props.reactSelectCreateable.default;
+    const { SortableContainer } = this.props.reactSortableHOC;
+    const Select = this.props.reactSelect.default;
+    const SortableSelect =
+      // It will be only createable if the named vocabulary is in the widget definition
+      // (hint) like:
+      // list_field_voc_unconstrained = schema.List(
+      //     title=u"List field with values from vocabulary but not constrained to them.",
+      //     description=u"zope.schema.List",
+      //     value_type=schema.TextLine(),
+      //     required=False,
+      //     missing_value=[],
+      // )
+      // directives.widget(
+      //     "list_field_voc_unconstrained",
+      //     AjaxSelectFieldWidget,
+      //     vocabulary="plone.app.vocabularies.PortalTypes",
+      // )
+      this.props?.choices &&
+      !getVocabFromHint(this.props) &&
+      !this.props.creatable
+        ? SortableContainer(Select)
+        : SortableContainer(CreatableSelect);
+
+    return (
+      <FormFieldWrapper {...this.props}>
+        <SortableSelect
+          useDragHandle
+          // react-sortable-hoc props:
+          axis="xy"
+          onSortEnd={this.onSortEnd}
+          distance={4}
+          // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
+          getHelperDimensions={({ node }) => node.getBoundingClientRect()}
+          id={`field-${this.props.id}`}
+          key={this.props.id}
+          isDisabled={this.props.disabled || this.props.isDisabled}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          options={
+            this.props.vocabBaseUrl
+              ? choices
+              : this.props.choices
+              ? [
+                  ...choices,
+                  ...(this.props.noValueOption && !this.props.default
+                    ? [
+                        {
+                          label: this.props.intl.formatMessage(
+                            messages.no_value,
+                          ),
+                          value: 'no-value',
+                        },
+                      ]
+                    : []),
+                ]
+              : [
+                  {
+                    label: this.props.intl.formatMessage(messages.no_value),
+                    value: 'no-value',
+                  },
+                ]
+          }
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            ...(this.props.choices?.length > 25 && {
+              MenuList,
+            }),
+            MultiValue: SortableMultiValue,
+            MultiValueLabel: SortableMultiValueLabel,
+            DropdownIndicator,
+            ClearIndicator,
+            Option,
+          }}
+          value={selectedOption || []}
+          placeholder={this.props.intl.formatMessage(messages.select)}
+          onChange={this.handleChange}
+          isValidNewOption={(
+            inputValue,
+            selectValue,
+            selectOptions,
+            accessors,
+          ) =>
+            !(
+              !inputValue ||
+              selectValue.some((option) =>
+                compareOption(inputValue, option, accessors),
+              ) ||
+              selectOptions.some((option) =>
+                compareOption(inputValue, option, accessors),
+              )
+            )
+          }
+          isClearable
+          isMulti
+        />
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export const ArrayWidgetComponent = injectIntl(ArrayWidget);
+
+export default compose(
+  injectIntl,
+  injectLazyLibs(['reactSelect', 'reactSelectCreateable', 'reactSortableHOC']),
+  connect(
+    (state, props) => {
+      const vocabBaseUrl =
+        getVocabFromHint(props) ||
+        getVocabFromField(props) ||
+        getVocabFromItems(props);
+
+      const vocabState =
+        state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.intl.locale];
+
+      // If the schema already has the choices in it, then do not try to get the vocab,
+      // even if there is one
+      if (props.items?.choices) {
+        return {
+          choices: props.items.choices,
+          lang: state.intl.locale,
+        };
+      } else if (vocabState) {
+        return {
+          choices: vocabState.items,
+          vocabBaseUrl,
+          vocabLoading: vocabState.loading,
+          vocabLoaded: vocabState.loaded,
+          lang: state.intl.locale,
+        };
+      }
+      return { vocabBaseUrl, lang: state.intl.locale };
+    },
+    { getVocabulary },
+  ),
+)(ArrayWidget);

package/theme/clms/css/carousel.css

@@ -496,7 +496,7 @@
 .ccl-banner-info {
   position: absolute;
   z-index: 1;
-  right: 0;
+  right: 2rem;
   bottom: 2rem;
   display: none;
   width: 100%;
@@ -524,9 +524,7 @@
 }
 
 .ccl-banner-info-link {
-  display: inline-block;
-  width: 100%;
-  text-align: right;
+  float: right;
 }
 
 .tabs-block > .styled {

package/theme/clms/css/home.css

@@ -68,7 +68,6 @@
 
 .ccl-banner-top-bar {
   height: 2rem;
-  padding: 0 1rem;
   border-top: 1px solid #6c6e73;
   border-bottom: 1px solid #6c6e73;
   background-color: #a0b128;
@@ -91,13 +90,13 @@
 }
 
 .ccl-banner-top-bar .ccl-container .ccl-banner-top-bar-right {
-  margin-left: 0.5rem;
   cursor: pointer;
 }
 
 .ccl-banner-top-bar .ccl-container {
   display: flex;
   height: 100%;
+  padding: 0 2rem;
   align-items: center;
   justify-content: space-between;
 }

package/theme/clms/css/maps.less

@@ -583,7 +583,14 @@
     margin: 0;
     background: none;
     float: none;
-    font-size: 0.85rem;
+  }
+
+  .login-panel .login-text {
+    margin-bottom: 1rem;
+  }
+
+  .login-panel .login-block .ccl-button {
+    margin: 0;
   }
 
   #login_close {