🧱 🧱 Blocks Layout and Functionality

[IanOdhiambo9]

Block Layout and Functionality

---

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

---

Summary

As a user I want to see blocks I can use to create my story

Description

Every block inherits it's main layout from a source block-component, we want to change the layout of the various controls in these blocks. Every block needs to have the following base functionality:

1. Icon and name of the block
2. A copy button
3. A delete button
4. An anchor on the left side

Currently the blocks header is as shown below:

We need to be updated to appear as shown below:

Your assignment is to redesign the component to appear as above.

Please take note that the blocks will have different names and icons. For the names they can be passed as an input to the block for the icons you can consider using an ng-content instead.
Also not the shape and color of the left side anchor that should be on all blocks.

Technical Analysis

This feature can be found in libs/features/stories/blocks/main

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. All the functionality still works i.e copy, delete and rendering of the different blocks.