Separate Decorator into multiple components

[elycheea]

Issue

Technically, the Decorator is a small component (one icon, one label, and one value), but can behave differently depending on the variation chosen (non-interactive, link, single and dual buttons).

As a single component, this requires a lot of if/else statements in code, one very long SCSS file, and some props that are not applicable depending on which variant is chosen. To make sense of this, a lot of supplementary documentation must be written to explain how it all works. This is complicated to implement and doesn't scale well.

Solution

It's been decided to break down the Decorator into smaller, more focused components. This means code, props, and documentation can be written exclusively for each component and its function.

Components

• DecoratorBase (internal, serves as a common code base for all the other Decorators)
• Decorator (non-interactive)
• DecoratorLink (as a single link)
• DecoratorSingleButton (as a single button)
• DecoratorDualButton (where the label and value each behave as button)