[Infra] Rethink addon primitives as contextual and not UI components

[Alonski]

Currently this addon makes some opinionated choices about how the UI of the collapsible panels is rendered.

A better fit for this addon might be to provide contextual components that don't render anything but instead provide the primitives needed for collapsible panels without the UI.

[cah-brian-gantzler]

Now that modifiers are out, I think this would best be served with modifiers. I just made a pull request for ember sortable, very similar in the demands.

Looking into this, easily doable except for liquid fire. Would have to drop support for animations.

What would be better would be if liquid fire could supply modifiers. Ok looking into that if would be ember-animated now. Would it possibly be better for the end user to wrap panel.body in an animated-if themselves and remove the dependency on animate from this addon completely.

[cah-brian-gantzler]

Ok where this differs from ember sortable is the hiding of the body. A modifier cant really do that except to make the DOM element hidden. Not really the same thing.

Where you are going to run into the problem with primitives that dont render anything is where to put the toggle. When it comes down to it a collapsible panel is an if and an isOpen variable.

The panels component yields some functionality.

[cah-brian-gantzler]

So what would this look like. Im guessing the below? If user wanted animation they would replace if with animated-if or their animation addon of choice. Its not this addon's responcibility.

The click me isnt an anchor but they could make an anchor and put the {{on}} it. Thats the point really. Allow them to specify the DOM.

{{#cp-panel as |p|}}
    <p class="{{p.toggleClass}}" {{on "click" p.toggleAction}}>Click me!</p>

  {{#if p.isOpen}}
    <div class=""{{p.bodyClass}}">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo repellendus nisi asperiores esse aperiam aliquid nulla ad dolor autem neque, nihil inventore temporibus delectus earum facere corporis, quam ipsum maxime.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus neque magnam, hic quis beatae repellendus harum modi pariatur minus quidem alias! Eius incidunt impedit eaque, est, illo officiis expedita molestiae.</p>
    </div>
  {{/if}}
{{/cp-panel}}

I hate to say it but how far is that from below, which I believe is a collapsible panel

<p class="cp-Panel-toggle {{if this.isOpen "cp-is-open"}}" {{on "click" (toggle "isOpen" this)}}>Click me!</p>

{{#if this.isOpen}}
    <div class="cp-Panel-body {{if this.isOpen "cp-is-open"}}">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo repellendus nisi asperiores esse aperiam aliquid nulla ad dolor autem neque, nihil inventore temporibus delectus earum facere corporis, quam ipsum maxime.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus neque magnam, hic quis beatae repellendus harum modi pariatur minus quidem alias! Eius incidunt impedit eaque, est, illo officiis expedita molestiae.</p>
    </div>
{{/if}}

(toggle) is available from https://github.com/DockYard/ember-composable-helpers#toggle