@eeacms/volto-clms-theme 1.0.108 → 1.0.109

package/CHANGELOG.md

@@ -4,9 +4,18 @@ 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)
 
-- EmailWidget fix [`cd56839`](https://github.com/eea/volto-clms-theme/commit/cd5683951ae27f7ceb51703593e898e33928bf0e)
+> 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)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.108",
+  "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/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

@@ -64,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,