Include ImageSizeWidget to fix eea/volto-block-style incompatibility

plone · Jul 26, 2022 · ff1a0eb · ff1a0eb
1 parent 4f73371
commit ff1a0eb
Show file tree

Hide file tree

Showing 5 changed files with 237 additions and 0 deletions.
diff --git a/src/components/manage/Widgets/ImageSizeWidget.jsx b/src/components/manage/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);
diff --git a/src/components/manage/Widgets/ImageSizeWidget.stories.jsx b/src/components/manage/Widgets/ImageSizeWidget.stories.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import ImageSizeWidget from './ImageSizeWidget';
+import WidgetStory from './story';
+
+export const Text = WidgetStory.bind({
+  props: { id: 'image_size', title: 'Image Sizes' },
+  widget: ImageSizeWidget,
+});
+
+export default {
+  title: 'Widgets/Image Sizes',
+  component: ImageSizeWidget,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};
diff --git a/src/components/manage/Widgets/ImageSizeWidget.test.jsx b/src/components/manage/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();
+});
diff --git a/src/components/manage/Widgets/__snapshots__/ImageSizeWidget.test.jsx.snap b/src/components/manage/Widgets/__snapshots__/ImageSizeWidget.test.jsx.snap
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders an image sizes widget component 1`] = `
+<div
+  className="inline field field-wrapper-image_size"
+>
+  <div
+    className="ui grid"
+  >
+    <div
+      className="stretched row"
+    >
+      <div
+        className="four wide column"
+      >
+        <div
+          className="wrapper"
+        >
+          <label
+            htmlFor="field-image_size"
+            id="fieldset-default-field-label-image_size"
+          >
+            Image Size
+          </label>
+        </div>
+      </div>
+      <div
+        className="eight wide column"
+      >
+        <div
+          className="ui grid"
+        >
+          <div
+            className="row"
+          >
+            <div
+              className="eight wide column field-image_size"
+            >
+              <div
+                className="ui buttons"
+              >
+                <button
+                  aria-label="Small"
+                  className="ui basic icon button"
+                  onClick={[Function]}
+                >
+                  <div
+                    className="image-sizes-text"
+                  >
+                    S
+                  </div>
+                </button>
+              </div>
+              <div
+                className="ui buttons"
+              >
+                <button
+                  aria-label="Medium"
+                  className="ui basic icon button"
+                  onClick={[Function]}
+                >
+                  <div
+                    className="image-sizes-text"
+                  >
+                    M
+                  </div>
+                </button>
+              </div>
+              <div
+                className="ui buttons"
+              >
+                <button
+                  aria-label="Large"
+                  className="ui active basic icon button"
+                  onClick={[Function]}
+                >
+                  <div
+                    className="image-sizes-text"
+                  >
+                    L
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/config/Widgets.jsx b/src/config/Widgets.jsx
@@ -21,6 +21,7 @@ import WysiwygWidget from '@plone/volto/components/manage/Widgets/WysiwygWidget'
 import UrlWidget from '@plone/volto/components/manage/Widgets/UrlWidget';
 import EmailWidget from '@plone/volto/components/manage/Widgets/EmailWidget';
 import NumberWidget from '@plone/volto/components/manage/Widgets/NumberWidget';
+import ImageSizeWidget from '@plone/volto/components/manage/Widgets/ImageSizeWidget';
 
 import ReferenceWidget from '@plone/volto/components/manage/Widgets/ReferenceWidget';
 import ObjectBrowserWidget from '@plone/volto/components/manage/Widgets/ObjectBrowserWidget';
@@ -69,6 +70,7 @@ export const widgetMapping = {
     object: ObjectWidget,
     object_list: ObjectListWidget,
     vocabularyterms: VocabularyTermsWidget,
+    image_size: ImageSizeWidget,
     select_querystring_field: SelectMetadataWidget,
     autocomplete: SelectAutoComplete,
   },