Create a new components for selection item

[MAILPOET-2963]

assets/css/src/components-form-editor/_selection-item.scss

@@ -0,0 +1,75 @@
+
+.selection-item {
+  background-color: #fff;
+  border: solid $selection-item-active-border $selection-item-base-color;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px 0 $selection-item-base-color;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding: 6px;
+  pointer-events: auto;
+  position: relative;
+}
+
+.selection-item-overlay {
+  background-color: rgba(0, 0, 0, .3);
+  border-radius: 2px;
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 3;
+}
+
+.selection-item-active {
+  border: solid $selection-item-active-border $gutenberg-control-active-color;
+  box-shadow: 0 4px 8px 0 rgba(156, 166, 204, .5);
+}
+
+.selection-item-settings {
+  display: flex;
+  flex-direction: row;
+  height: 25px;
+  justify-content: space-between;
+  pointer-events: none;
+  width: 100%;
+  z-index: 4;
+}
+
+.selection-item-settings-oval {
+  background-color: $selection-item-oval-color;
+  border: solid 1px $selection-item-oval-border-color;
+  border-radius: 7px;
+  height: 13px;
+  pointer-events: none;
+  width: 13px;
+}
+
+.selection-item-settings-check {
+  height: 13px;
+  pointer-events: none;
+  width: 13px;
+  z-index: 4;
+}
+
+.selection-item-settings-icon {
+  height: 14px;
+  pointer-events: none;
+  width: 14px;
+  z-index: 4;
+
+  svg {
+    fill: $selection-item-base-color;
+  }
+}
+
+.selection-item-settings-icon-hover {
+  svg {
+    fill: white;
+  }
+}

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

@@ -123,78 +123,3 @@
     color: #ff5301 !important;
   }
 }
-
-.selection-item {
-  background-color: #fff;
-  border: solid $selection-item-active-border $selection-item-base-color;
-  border-radius: 4px;
-  box-shadow: 0 1px 2px 0 $selection-item-base-color;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  margin-bottom: 16px;
-  padding: 6px;
-  pointer-events: auto;
-  position: relative;
-}
-
-.selection-item-overlay {
-  background-color: rgba(0, 0, 0, .3);
-  border-radius: 2px;
-  height: 100%;
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 3;
-}
-
-.selection-item-active {
-  border: solid $selection-item-active-border $gutenberg-control-active-color;
-  box-shadow: 0 4px 8px 0 rgba(156, 166, 204, .5);
-}
-
-.selection-item-settings {
-  display: flex;
-  flex-direction: row;
-  height: 25px;
-  justify-content: space-between;
-  pointer-events: none;
-  width: 100%;
-  z-index: 4;
-}
-
-.selection-item-settings-oval {
-  background-color: $selection-item-oval-color;
-  border: solid 1px $selection-item-oval-border-color;
-  border-radius: 7px;
-  height: 13px;
-  pointer-events: none;
-  width: 13px;
-}
-
-.selection-item-settings-check {
-  height: 13px;
-  pointer-events: none;
-  width: 13px;
-  z-index: 4;
-}
-
-.selection-item-settings-icon {
-  height: 14px;
-  pointer-events: none;
-  width: 14px;
-  z-index: 4;
-
-  svg {
-    fill: $selection-item-base-color;
-  }
-}
-
-.selection-item-settings-icon-hover {
-  svg {
-    fill: white;
-  }
-}

assets/css/src/mailpoet-form-editor.scss

@@ -35,6 +35,7 @@
 @import './components-form-editor/form-placement';
 @import './components-form-editor/preview';
 @import './components-form-editor/block-editor';
+@import './components-form-editor/selection-item';
 @import './components-form-editor/sidebar';
 @import './components-form-editor/sidebar-style-settings';
 @import './components-form-editor/template-selection';

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import CloseButtonSettings from '../close_button_settings';
-
-export default {
-  title: 'FormEditor/Close Icon Settings',
-};
-
-export const CloseIconSettings = () => (
-  <div>
-    <CloseButtonSettings
-      name="Select"
-      onChange={action('on change')}
-    />
-  </div>
-);

assets/js/src/form_editor/components/form_settings/_stories/selection_item.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import SelectionItem from '../selection_item';
+
+export default {
+  title: 'FormEditor/Selection Item',
+};
+
+export const CloseIconSettings = () => (
+  <div className="close-button-selection-item-list">
+    <SelectionItem
+      label="kjk1"
+      active={false}
+      onClick={action('on change')}
+    >
+      <div>Inactive</div>
+    </SelectionItem>
+    <SelectionItem
+      label="kjk3"
+      active={false}
+      canBeActive={false}
+      onClick={action('on change')}
+    >
+      <div>Cannot Activate</div>
+    </SelectionItem>
+    <SelectionItem
+      label="kjk2"
+      active
+      onClick={action('on change')}
+    >
+      <div>Active</div>
+    </SelectionItem>
+    <SelectionItem
+      label="kjk3"
+      active={false}
+      displaySettingsIcon={false}
+      onClick={action('on change')}
+    >
+      <div>Without Settings Icon</div>
+    </SelectionItem>
+    <SelectionItem
+      label="kjk3"
+      active
+      displaySettingsIcon={false}
+      canBeActive={false}
+      onClick={action('on change')}
+    >
+      <div>Without Settings Icon</div>
+    </SelectionItem>
+    <SelectionItem
+      label="kjk3"
+      active
+      displaySettingsIcon={false}
+      onClick={action('on change')}
+    >
+      <div>Without Settings Icon</div>
+    </SelectionItem>
+  </div>
+);

assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx

@@ -1,8 +1,5 @@
-import React, { useState } from 'react';
+import React from 'react';
-import classnames from 'classnames';
+import SelectionItem from '../selection_item';
-
-import SettingsIcon from './icons/settings_icon';
-import CheckIcon from './icons/checkbox_icon';
 
 type Props = {
   label: string,
@@ -18,71 +15,23 @@ const FormPlacementOption = ({
   active,
   canBeActive,
   onClick,
-}: Props) => {
+}: Props) => (
-  const [hover, setHover] = useState(false);
+  <SelectionItem
-  return (
+    label={label}
-    <div
+    onClick={onClick}
-      key={label}
+    active={active}
-      data-automation-id={`form-placement-option-${label}`}
+    canBeActive={canBeActive}
-      className={
+    className="form-placement-option"
-        classnames(
+    automationId={`form-placement-option-${label}`}
-          'form-placement-option',
+  >
-          'selection-item',
+    <div className="form-placement-option-icon">
-          { 'selection-item-active': active && canBeActive }
+      {icon}
-        )
-      }
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-      onClick={onClick}
-      onKeyDown={(event) => {
-        if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
-        ) {
-          event.preventDefault();
-          onClick();
-        }
-      }}
-      role="button"
-      tabIndex={0}
-    >
-      <div>
-        <div className="selection-item-settings">
-          <div
-            className={
-              classnames(
-                'selection-item-icon',
-                { 'selection-item-icon-hover': hover }
-              )
-            }
-          >
-            {SettingsIcon}
-          </div>
-          {
-            hover && !active && canBeActive
-            && <div className="selection-item-settings-oval" />
-          }
-          {
-            active && canBeActive
-            && (
-              <div className="selection-item-check">
-                {CheckIcon}
-              </div>
-            )
-          }
-        </div>
-        <div className="form-placement-option-icon">
-          {icon}
-        </div>
-        <div className="form-placement-option-label">
-          <p>{label}</p>
-        </div>
-      </div>
-      {
-        hover
-        && <div className="selection-item-overlay" />
-      }
     </div>
-  );
+    <div className="form-placement-option-label">
-};
+      <p>{label}</p>
+    </div>
+  </SelectionItem>
+);
 
 FormPlacementOption.defaultProps = {
   canBeActive: true,

assets/js/src/form_editor/components/form_settings/selection_item.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+
+import SettingsIcon from './form_placement_options/icons/settings_icon';
+import CheckIcon from './form_placement_options/icons/checkbox_icon';
+
+type Props = {
+  label: string
+  active: boolean
+  displaySettingsIcon?: boolean
+  canBeActive?: boolean
+  onClick: () => void
+  className?: string
+  children: React.ReactNode
+  automationId?: string
+}
+
+const SelectionItem = ({
+  label,
+  active,
+  canBeActive,
+  onClick,
+  children,
+  className,
+  automationId,
+  displaySettingsIcon,
+}: Props) => {
+  const [hover, setHover] = useState(false);
+  return (
+    <div
+      key={label}
+      data-automation-id={automationId}
+      className={
+        classnames(
+          className,
+          'selection-item',
+          { 'selection-item-active': active && canBeActive }
+        )
+      }
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      onClick={onClick}
+      onKeyDown={(event) => {
+        if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+        ) {
+          event.preventDefault();
+          onClick();
+        }
+      }}
+      role="button"
+      tabIndex={0}
+    >
+      <div>
+        <div className="selection-item-settings">
+          {
+            displaySettingsIcon
+              ? (
+                <div
+                  className={
+                    classnames(
+                      'selection-item-icon',
+                      { 'selection-item-icon-hover': hover }
+                    )
+                  }
+                >
+                  {SettingsIcon}
+                </div>
+              )
+              : (<div />)
+          }
+          {
+            hover && !active && canBeActive
+            && <div className="selection-item-settings-oval" />
+          }
+          {
+            active && canBeActive
+            && (
+              <div className="selection-item-check">
+                {CheckIcon}
+              </div>
+            )
+          }
+        </div>
+        {children}
+      </div>
+      {
+        hover
+        && <div className="selection-item-overlay" />
+      }
+    </div>
+  );
+};
+
+SelectionItem.defaultProps = {
+  canBeActive: true,
+  displaySettingsIcon: true,
+  className: undefined,
+  automationId: undefined,
+};
+
+export default SelectionItem;