feat: Make selectable component cards [FC-0114]

cms/static/js/views/pages/container.js

@@ -43,6 +43,7 @@ function($, _, Backbone, gettext, BasePage,
             'click .collapse-button': 'collapseXBlock',
             'click .xblock-view-action-button': 'viewXBlockContent',
             'click .xblock-view-group-link': 'viewXBlockContent',
+            'click .xblock-header-primary': 'selectXBlock',
         },
 
         options: {
@@ -182,6 +183,13 @@ function($, _, Backbone, gettext, BasePage,
                             offset: document.getElementById(data.payload.locator).offsetTop
                         }, document.referrer);
                         break;
+                    case 'clearSelection':
+                        this.$('.studio-xblock-wrapper.is-selected').removeClass('is-selected');
+                        break;
+                    case 'selectXBlock':
+                        this.$('.studio-xblock-wrapper.is-selected').removeClass('is-selected');
+                        xblockWrapper.addClass('is-selected');
+                        break;
                     default:
                         console.warn('Unhandled message type:', data.type);
                     }
@@ -476,6 +484,30 @@ function($, _, Backbone, gettext, BasePage,
             });
         },
 
+        selectXBlock: function(event) {
+            // Only select when clicking on the header's white space, not on
+            // buttons, links, inputs, or other interactive elements within it.
+            var $target = $(event.target);
+            if ($target.closest('button, a, input, label, .actions-list').length) {
+                return;
+            }
+
+            var $wrapper = $target.closest('.studio-xblock-wrapper');
+
+            // Deselect all other xblocks
+            this.$('.studio-xblock-wrapper.is-selected').not($wrapper).removeClass('is-selected');
+
+            $wrapper.toggleClass('is-selected');
+
+            if (this.options.isIframeEmbed) {
+                const contentId = this.findXBlockElement(event.target).data('locator');
+                this.postMessageToParent({
+                    type: 'xblockSelected',
+                    payload: { contentId },
+                });
+            }
+        },
+
         editXBlock: function(event, options) {
             event.preventDefault();
             const isAccessButton = event.currentTarget.className === 'access-button';

cms/static/sass/course-unit-mfe-iframe-bundle.scss

@@ -35,9 +35,18 @@ body,
       border-color: transparent;
     }
 
+    .studio-xblock-wrapper {
+      // STATE: selected
+      &.is-selected {
+        border-color: $primary;
+        box-shadow: 0 0 3px 3px $primary;
+      }
+    }
+
     .xblock-header-primary {
       padding: ($baseline * 1.2) ($baseline * 1.2) ($baseline / 1.67);
       border-bottom: none;
+      cursor: pointer;
 
       .header-details {
         .xblock-display-title {