@eeacms/volto-clms-theme 1.0.106 → 1.0.109

package/CHANGELOG.md

@@ -4,8 +4,35 @@ 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.109](https://github.com/eea/volto-clms-theme/compare/1.0.108...1.0.109)
+
+- add ImageSizeWidget to fix volto-style-block incompatibility with Volto 15 [`15e4d97`](https://github.com/eea/volto-clms-theme/commit/15e4d9785aa3d34787ca151319aeaf8a4d8930b4)
+- breadcrumbs on file views [`03ff26a`](https://github.com/eea/volto-clms-theme/commit/03ff26acf75090ebe61a71fb6f9c144548df1615)
+- prettier [`b1f7295`](https://github.com/eea/volto-clms-theme/commit/b1f72954e990a789c84c6a4cc0764bbf98fcb6a2)
+- email field style login popup and footer subscribe [`0561cb5`](https://github.com/eea/volto-clms-theme/commit/0561cb51cacb93f83c448ce82ef4079947942922)
+
+#### [1.0.108](https://github.com/eea/volto-clms-theme/compare/1.0.107...1.0.108)
+
+> 18 July 2022
+
+- EmailWidget fix [`#279`](https://github.com/eea/volto-clms-theme/pull/279)
+
+#### [1.0.107](https://github.com/eea/volto-clms-theme/compare/1.0.106...1.0.107)
+
+> 14 July 2022
+
+- Develop [`#278`](https://github.com/eea/volto-clms-theme/pull/278)
+- 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)

package/package.json

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

package/src/components/CLMSDownloadableFileView/CLMSDownloadableFileView.jsx

@@ -1,18 +1,10 @@
-import React, { useEffect } from 'react';
-
+import React from 'react';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import { getBreadcrumbs } from '@plone/volto/actions';
-import { useDispatch } from 'react-redux';
-import { Label } from 'semantic-ui-react';
+import { Label, Container } from 'semantic-ui-react';
 
 export const CLMSDownloadableFileView = (props) => {
-  const dispatch = useDispatch();
   const { content } = props;
 
-  useEffect(() => {
-    dispatch(getBreadcrumbs([]));
-  }, [dispatch]);
-
   const options = content.taxonomy_technical_library_categorization?.map(
     (cat) => {
       return {
@@ -26,26 +18,28 @@ export const CLMSDownloadableFileView = (props) => {
 
   return (
     <>
-      <div id="page-document" className="ui container">
-        <h1 className="page-title">{content.title}</h1>
-        <div>
-          <p>{content.description}</p>
+      <Container className="view-wrapper">
+        <div id="page-document" className="ui container">
+          <h1 className="page-title">{content.title}</h1>
+          <div>
+            <p>{content.description}</p>
+          </div>
+          {options?.length > 0 && (
+            <Label.Group>
+              {options.map((cat, key) => {
+                return (
+                  <Label key={key} color="olive">
+                    {cat.title}
+                  </Label>
+                );
+              })}
+            </Label.Group>
+          )}{' '}
+          <CclButton download={true} url={content?.file?.download}>
+            Download file
+          </CclButton>
         </div>
-        {options?.length > 0 && (
-          <Label.Group>
-            {options.map((cat, key) => {
-              return (
-                <Label key={key} color="olive">
-                  {cat.title}
-                </Label>
-              );
-            })}
-          </Label.Group>
-        )}{' '}
-        <CclButton download={true} url={content?.file?.download}>
-          Download file
-        </CclButton>
-      </div>
+      </Container>
     </>
   );
 };

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -1,7 +1,7 @@
 import './meetingstyles.less';
 
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { Header, Image, Message, Segment, Grid } from 'semantic-ui-react';
+import { Header, Image, Message, Segment } from 'semantic-ui-react';
 import { Icon, Toast } from '@plone/volto/components';
 import {
   Recurrence,
@@ -23,6 +23,7 @@ import CclListingCards from '@eeacms/volto-clms-theme/components/Blocks/CustomTe
 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;
@@ -112,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 (
       <>
@@ -425,6 +420,7 @@ export const CLMSMeetingView = (props) => {
         )}
         <StringToHTML string={content.text?.data || ''} />
         <LightGalleryListing />
+
         {files.length > 0 && (
           <CclListingCards
             variation="file"
@@ -456,36 +452,7 @@ export const CLMSMeetingView = (props) => {
               </Accordion.Title>
               <Accordion.Content active={activeIndex.includes(0)}>
                 <AnimateHeight animateOpacity duration={500} height={'auto'}>
-                  <ul>
-                    {content.products.map((product, key) => (
-                      <li key={key}>
-                        <Grid columns={2}>
-                          <Grid.Column width={2}>
-                            {product.image_field && (
-                              <img
-                                src={
-                                  product.image_field
-                                    ? `${product['@id']}/@@images/image`
-                                    : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                                }
-                                alt={
-                                  product.image_field
-                                    ? product.image?.filename
-                                    : 'Placeholder'
-                                }
-                              />
-                            )}
-                          </Grid.Column>
-                          <Grid.Column width={10}>
-                            <a href={product['@id']}>
-                              <strong>{product.title}</strong>
-                            </a>
-                            <p>{product.description}</p>
-                          </Grid.Column>
-                        </Grid>
-                      </li>
-                    ))}
-                  </ul>
+                  <CLMSRelatedItems items={content.products} />
                 </AnimateHeight>
               </Accordion.Content>
             </Accordion>
@@ -512,36 +479,7 @@ export const CLMSMeetingView = (props) => {
               </Accordion.Title>
               <Accordion.Content active={activeDatasetIndex.includes(0)}>
                 <AnimateHeight animateOpacity duration={500} height={'auto'}>
-                  <ul>
-                    {content.datasets.map((dataset, key) => (
-                      <li key={key}>
-                        <Grid columns={2}>
-                          <Grid.Column width={2}>
-                            {dataset.image_field && (
-                              <img
-                                src={
-                                  dataset.image_field
-                                    ? `${dataset['@id']}/@@images/image`
-                                    : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                                }
-                                alt={
-                                  dataset.image_field
-                                    ? dataset.image?.filename
-                                    : 'Placeholder'
-                                }
-                              />
-                            )}
-                          </Grid.Column>
-                          <Grid.Column width={10}>
-                            <a href={dataset['@id']}>
-                              <strong>{dataset.title}</strong>
-                            </a>
-                            <p>{dataset.description}</p>
-                          </Grid.Column>
-                        </Grid>
-                      </li>
-                    ))}
-                  </ul>
+                  <CLMSRelatedItems items={content.datasets} />
                 </AnimateHeight>
               </Accordion.Content>
             </Accordion>

package/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx

@@ -8,18 +8,14 @@ import CclListingCards from '@eeacms/volto-clms-theme/components/Blocks/CustomTe
 import config from '@plone/volto/registry';
 import { Icon } from '@plone/volto/components';
 import AnimateHeight from 'react-animate-height';
-import { Accordion, Grid } from 'semantic-ui-react';
+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 }) => {
@@ -80,128 +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`}
-              />
-            )}
-            {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'}>
-                    <ul>
-                      {content.products.map((product, key) => (
-                        <li key={key}>
-                          <Grid columns={2}>
-                            <Grid.Column width={2}>
-                              {product.image_field && (
-                                <img
-                                  src={
-                                    product.image_field
-                                      ? `${product['@id']}/@@images/image`
-                                      : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                                  }
-                                  alt={
-                                    product.image_field
-                                      ? product.image?.filename
-                                      : 'Placeholder'
-                                  }
-                                />
-                              )}
-                            </Grid.Column>
-                            <Grid.Column width={10}>
-                              <a href={product['@id']}>
-                                <strong>{product.title}</strong>
-                              </a>
-                              <p>{product.description}</p>
-                            </Grid.Column>
-                          </Grid>
-                        </li>
-                      ))}
-                    </ul>
-                  </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'}>
-                    <ul>
-                      {content.datasets.map((dataset, key) => (
-                        <li key={key}>
-                          <Grid columns={2}>
-                            <Grid.Column width={2}>
-                              {dataset.image_field && (
-                                <img
-                                  src={
-                                    dataset.image_field
-                                      ? `${dataset['@id']}/@@images/image`
-                                      : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                                  }
-                                  alt={
-                                    dataset.image_field
-                                      ? dataset.image?.filename
-                                      : 'Placeholder'
-                                  }
-                                />
-                              )}
-                            </Grid.Column>
-                            <Grid.Column width={10}>
-                              <a href={dataset['@id']}>
-                                <strong>{dataset.title}</strong>
-                              </a>
-                              <p>{dataset.description}</p>
-                            </Grid.Column>
-                          </Grid>
-                        </li>
-                      ))}
-                    </ul>
-                  </AnimateHeight>
-                </Accordion.Content>
-              </Accordion>
-            )}
           </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 };

package/src/components/CclModal/modal.less

@@ -23,6 +23,11 @@
   margin-bottom: 1rem;
 }
 
+.ui.tiny.modal {
+  width: 540px;
+  margin: 0em 0em 0em 0em !important;
+}
+
 .modal-clms-container {
   position: relative;
   display: flex;

package/src/components/Widgets/ImageSizeWidget.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Button, Grid } from 'semantic-ui-react';
+import { FormFieldWrapper } from '@plone/volto/components';
+
+const messages = defineMessages({
+  small: {
+    id: 'Small',
+    defaultMessage: 'Small',
+  },
+  medium: {
+    id: 'Medium',
+    defaultMessage: 'Medium',
+  },
+  large: {
+    id: 'Large',
+    defaultMessage: 'Large',
+  },
+});
+
+const ImageSizeWidget = (props) => {
+  const { onChange, id, disabled, intl, value } = props;
+
+  return (
+    <FormFieldWrapper {...props}>
+      <Grid>
+        <Grid.Row>
+          <Grid.Column width="8" className="field-image_size">
+            <Button.Group>
+              <Button
+                icon
+                basic
+                aria-label={intl.formatMessage(messages.small)}
+                onClick={() => onChange(id, 's')}
+                active={value === 's'}
+                disabled={disabled}
+              >
+                <div className="image-sizes-text">S</div>
+              </Button>
+            </Button.Group>
+            <Button.Group>
+              <Button
+                icon
+                basic
+                aria-label={intl.formatMessage(messages.medium)}
+                onClick={() => onChange(id, 'm')}
+                active={value === 'm'}
+                disabled={disabled}
+              >
+                <div className="image-sizes-text">M</div>
+              </Button>
+            </Button.Group>
+            <Button.Group>
+              <Button
+                icon
+                basic
+                aria-label={intl.formatMessage(messages.large)}
+                onClick={() => onChange(id, 'l')}
+                active={value === 'l' || value === undefined}
+                disabled={disabled}
+              >
+                <div className="image-sizes-text">L</div>
+              </Button>
+            </Button.Group>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </FormFieldWrapper>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+ImageSizeWidget.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
+  id: PropTypes.string.isRequired,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+ImageSizeWidget.defaultProps = {
+  onChange: () => {},
+};
+
+export default injectIntl(ImageSizeWidget);

package/src/components/Widgets/ImageSizeWidget.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import ImageSizeWidget from './ImageSizeWidget';
+
+const mockStore = configureStore();
+
+test('renders an image sizes widget component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <ImageSizeWidget
+        id="image_size"
+        title="Image Size"
+        fieldSet="default"
+        onChange={() => {}}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

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

@@ -47,11 +47,13 @@ const EmailWidget = (props) => {
   // email.addEventListener('input', function (e) {
   React.useEffect(() => {
     if (email !== '') {
-      if (email.validity.typeMismatch) {
-        email.setCustomValidity(intl.formatMessage(messages.invalid_email));
-        email.reportValidity();
-      } else {
-        email.setCustomValidity('');
+      if (email.validity !== undefined) {
+        if (email.validity.typeMismatch) {
+          email.setCustomValidity(intl.formatMessage(messages.invalid_email));
+          email.reportValidity();
+        } else {
+          email.setCustomValidity('');
+        }
       }
     } else {
       return;
@@ -62,24 +64,25 @@ const EmailWidget = (props) => {
 
   return (
     <FormFieldWrapper {...props} className="email">
-      <input
-        className="ui input"
-        id={inputId}
-        name={id}
-        type="email"
-        value={value || ''}
-        disabled={isDisabled}
-        placeholder={placeholder}
-        onChange={({ target }) =>
-          onChange(id, target.value === '' ? undefined : target.value)
-        }
-        onBlur={({ target }) =>
-          onBlur(id, target.value === '' ? undefined : target.value)
-        }
-        onClick={() => onClick()}
-        minLength={minLength || null}
-        maxLength={200}
-      />
+      <div className="ui input">
+        <input
+          id={inputId}
+          name={id}
+          type="email"
+          value={value || ''}
+          disabled={isDisabled}
+          placeholder={placeholder}
+          onChange={({ target }) =>
+            onChange(id, target.value === '' ? undefined : target.value)
+          }
+          onBlur={({ target }) =>
+            onBlur(id, target.value === '' ? undefined : target.value)
+          }
+          onClick={() => onClick()}
+          minLength={minLength || null}
+          maxLength={200}
+        />
+      </div>
     </FormFieldWrapper>
   );
 };

package/src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -142,9 +142,7 @@ class Footer extends Component {
 
   handleInputChange() {
     this.setState({
-      inputValue: validator.isEmail(this.state.value)
-        ? !this.state.inputValue
-        : this.state.inputValue,
+      inputValue: !this.state.inputValue,
     });
   }
 

package/src/index.js

@@ -33,6 +33,8 @@ import MapLayersWidget from './components/Widgets/MapLayersWidget';
 import TabsWidget from './components/Blocks/CustomTemplates/VoltoTabsBlock/TabsWidget';
 import TaxonomyWidget from './components/Widgets/TaxonomyWidget';
 import ProductComponentsWidget from './components/Widgets/ProductComponentsWidget';
+import ImageSizeWidget from './components/Widgets/ImageSizeWidget';
+
 // CUSTOM REDUCERS IMPORT
 import TextLinkWidget from './components/Widgets/TextLinkWidget';
 
@@ -78,6 +80,7 @@ const applyConfig = (config) => {
     geonetwork_identifiers_widget: GeonetworkIdentifiersWidget,
     text_link_widget: TextLinkWidget,
     dataset_download_information_widget: DatasetDownloadInformationWidget,
+    image_size: ImageSizeWidget,
   };
   config.widgets.id = {
     ...config.widgets.id,