Reset Design Keys

[hvanyo]

Discussed in #1851

^{Originally posted by wodenx January 23, 2021}

User Story

As a site builder
I want to be able to remove elements from a flexible design (rich text, chameleon, flow container, etc)
So that I can customize.

As a site builder
I want to be able to remove tokens previously associated with a given design key
So that I can apply styling or behavior to a clean slate.

Use Cases

• Remove an option form an existing chameleon
• Remove avaialble componetns from flow containe or editor.
• Replace an editor
• Completely restyle an element in a composed component

Acceptance Criteria

AC1.
There is an API which allows removing a design key, and when a design key is removed:

• If the designable component specifies a default (or "starting") component for that key, it receives the default component with no tokens added.
• • If the designable component does not specify a default component for that key, it receives no component fo that key.
    no component is passed to the underlying designable for that key.

AC2.
A removed design key can be added back by wrapping again in withDesign This has the effect of "starting over" - ie, the new tokens are applied to the starting component (if any), exactly as if no previous designs had been applied.

AC3.
There is a page on the test site that demos these different scenarios.

Notes

For further implementation details and examples see https://github.com/wodenx/Bodiless-JS/blob/doc/post-pilot/packages/fclasses/doc/Refactor.md

[hvanyo]

This is till applicable and slight enhancement.
if I replace a component, I want the design key to still apply..
aka the Hero Card Wrapper loses it design key
and only has
<div data-shadowed-by="__vitaltest__:Card:Hero" class="flex-col md:flex-row-reverse w-full flex md:flex-row">