Add step card component and render it in step sidebar

[MAILPOET-4420]

mailpoet/assets/css/src/components-automation-editor/_step-card.scss

@@ -0,0 +1,33 @@
+// See: https://github.com/WordPress/gutenberg/blob/af7da80dd54d7fe52772890e2cc1b65073db9655/packages/block-editor/src/components/block-card/style.scss
+
+.block-editor-block-card {
+  align-items: flex-start;
+  display: flex;
+  padding: 16px;
+}
+
+.block-editor-block-card__content {
+  flex-grow: 1;
+  margin-bottom: 4px;
+}
+
+.block-editor-block-card__title {
+  font-weight: 500;
+
+  &.block-editor-block-card__title {
+    line-height: 24px;
+    margin: 0 0 4px;
+  }
+}
+
+.block-editor-block-card__description {
+  font-size: 13px;
+}
+
+.block-editor-block-card .block-editor-block-icon {
+  flex: 0 0 24px;
+  height: 24px;
+  margin-left: 0;
+  margin-right: 12px;
+  width: 24px;
+}

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

@@ -10,4 +10,5 @@
 @import './components-automation-editor/separator';
 @import './components-automation-editor/status';
 @import './components-automation-editor/step';
+@import './components-automation-editor/step-card';
 @import './components-automation-editor/workflow';

mailpoet/assets/js/src/automation/editor/components/sidebar/step/index.tsx

@@ -1,11 +1,13 @@
 import { PanelBody } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store } from '../../../store';
+import { StepCard } from '../../step-card';
 
 export function StepSidebar(): JSX.Element {
-  const { selectedStep } = useSelect(
+  const { selectedStep, selectedStepType } = useSelect(
     (select) => ({
       selectedStep: select(store).getSelectedStep(),
+      selectedStepType: select(store).getSelectedStepType(),
     }),
     [],
   );
@@ -15,19 +17,27 @@ export function StepSidebar(): JSX.Element {
   }
 
   return (
-    <PanelBody>
-      <div>
-        <strong>ID:</strong> {selectedStep.id}
-      </div>
-      <div>
-        <strong>Type:</strong> {selectedStep.type}
-      </div>
-      <div>
-        <strong>Key:</strong> {selectedStep.key}
-      </div>
-      <div>
-        <strong>Args:</strong> {JSON.stringify(selectedStep.args)}
-      </div>
-    </PanelBody>
+    <div className="block-editor-block-inspector">
+      <StepCard
+        title={selectedStepType.title}
+        description={selectedStepType.description}
+        icon={selectedStepType.icon}
+      />
+
+      <PanelBody>
+        <div>
+          <strong>ID:</strong> {selectedStep.id}
+        </div>
+        <div>
+          <strong>Type:</strong> {selectedStep.type}
+        </div>
+        <div>
+          <strong>Key:</strong> {selectedStep.key}
+        </div>
+        <div>
+          <strong>Args:</strong> {JSON.stringify(selectedStep.args)}
+        </div>
+      </PanelBody>
+    </div>
   );
 }

mailpoet/assets/js/src/automation/editor/components/step-card/index.tsx

@@ -0,0 +1,24 @@
+import { ComponentType } from 'react';
+import { StepIcon } from '../step-icon';
+
+// See: https://github.com/WordPress/gutenberg/blob/af7da80dd54d7fe52772890e2cc1b65073db9655/packages/block-editor/src/components/block-card/index.js
+
+type Props = {
+  title: string;
+  description: string;
+  icon: ComponentType;
+};
+
+export function StepCard({ title, description, icon }: Props): JSX.Element {
+  return (
+    <div className="block-editor-block-card">
+      <StepIcon icon={icon} />
+      <div className="block-editor-block-card__content">
+        <h2 className="block-editor-block-card__title">{title}</h2>
+        <span className="block-editor-block-card__description">
+          {description}
+        </span>
+      </div>
+    </div>
+  );
+}

mailpoet/assets/js/src/automation/editor/store/types.ts

@@ -1,3 +1,4 @@
+import { ComponentType } from 'react';
 import { Item } from '../components/inserter/item';
 import { Step, Workflow } from '../components/workflow/types';
 
@@ -9,6 +10,7 @@ export type StepType = {
   key: string;
   title: string;
   description: string;
+  icon: ComponentType;
 };
 
 export type State = {