Add component for size settings

[MAILPOET-2811]

assets/css/src/components-form-editor/_preview.scss

@@ -80,3 +80,11 @@
     width: 300px;
   }
 }
+
+.mailpoet-size-settings-control {
+  .components-radio-control__option {
+    display: inline-block;
+    margin-right: 1em;
+    width: auto;
+  }
+}

assets/js/src/form_editor/components/_stories/size_settings.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { SizeSettings } from '../size_settings';
+
+export default {
+  title: 'FormEditor/Size Settings',
+};
+
+export const Settings = () => (
+  <>
+    <SizeSettings
+      label="Basic Size Settings"
+      value={{
+        unit: 'pixel',
+        value: 200,
+      }}
+      onChange={action('on change no action')}
+    />
+    <SizeSettings
+      label="Size Settings With All Props"
+      value={{
+        unit: 'pixel',
+        value: 200,
+      }}
+      defaultPercentValue={25}
+      defaultPixelValue={150}
+      maxPercents={80}
+      maxPixels={500}
+      minPercents={20}
+      minPixels={100}
+      onChange={action('on change no action')}
+    />
+  </>
+);
+
+
+export const SettingsInSidebar = () => (
+  <div className="edit-post-sidebar mailpoet_form_editor_sidebar">
+    <SizeSettings
+      label="Basic Size Settings"
+      value={{
+        unit: 'pixel',
+        value: 200,
+      }}
+      onChange={action('on change no action')}
+    />
+    <SizeSettings
+      label="Size Settings in %"
+      value={{
+        unit: 'percent',
+        value: 100,
+      }}
+      maxPercents={100}
+      minPercents={10}
+      onChange={action('on change no action')}
+    />
+  </div>
+);

assets/js/src/form_editor/components/size_settings.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { RangeControl, RadioControl } from '@wordpress/components';
+
+export type SizeDefinition = {
+  value: number|undefined,
+  unit: 'percent'|'pixel',
+};
+
+type Props = {
+  label: string,
+  minPercents?: number,
+  maxPercents?: number,
+  minPixels?: number,
+  maxPixels?: number,
+  value: SizeDefinition|undefined,
+  defaultPercentValue?: number,
+  defaultPixelValue?: number,
+  onChange: (value: SizeDefinition) => any,
+}
+
+export const SizeSettings = ({
+  label,
+  minPercents = 0,
+  maxPercents = 100,
+  minPixels = 10,
+  maxPixels = 1000,
+  value,
+  defaultPercentValue = 50,
+  defaultPixelValue = 200,
+  onChange,
+}: Props) => {
+  const [localValue, setLocalValue] = useState(value ?? { unit: 'pixel', value: undefined });
+  return (
+    <div className="mailpoet-size-settings-control">
+      <h3>{label}</h3>
+      <RadioControl
+        selected={localValue.unit || 'pixel'}
+        options={[
+          { label: 'px', value: 'pixel' },
+          { label: '%', value: 'percent' },
+        ]}
+        onChange={(unit) => {
+          const newValue = {
+            value: unit === 'pixel' ? defaultPixelValue : defaultPercentValue,
+            unit,
+          };
+          setLocalValue(newValue);
+          onChange(newValue);
+        }}
+      />
+      <RangeControl
+        value={localValue.value ?? (localValue.unit === 'pixel' ? defaultPixelValue : defaultPercentValue)}
+        min={localValue.unit === 'pixel' ? minPixels : minPercents}
+        max={localValue.unit === 'pixel' ? maxPixels : maxPercents}
+        onChange={(val) => {
+          const newValue: SizeDefinition = {
+            unit: localValue.unit === 'pixel' ? 'pixel' : 'percent',
+            value: val,
+          };
+          setLocalValue(newValue);
+          onChange(newValue);
+        }}
+      />
+    </div>
+  );
+};