Add basic SlideOver component

[ethancrawford]

This introduces a basic SlideOver component adapted from the existing Modal. TODO:

• Work out how to handle max-height/max-width, if at all.
• Add RTL/writing mode support.
• Make any further changes as requested by the Petal components core developers.

[ethancrawford]

Eh... I made these changes locally inside the petal_development repo. Guess I need to specifically clone petal_boilerplate instead?

[mplatts]

You should be able to do it in petal_development. There's just some conflicts - within petal_development you'll need to pull the latest main branch for petal_boilerplate then rebase the add_slide_over branch on top of main and fix the conflicts

[mplatts]

Can get a bit confusing in petal_development with the umbrella stuff admittedly. If it's too painful we can just copy and paste from this PR.

[ethancrawford]

Nah. I think my confusion was trying to pull the latest from petal_development, not petal_boilerplate 😅

[ethancrawford]

(I'm not super familiar with submodules 😉 )

[mplatts]

haha all good. Git submodules are not the most intuitive

[ethancrawford]

I think I must have broken something locally in the process - I thought I resolved it, but I'm getting an error:

lib/petal_boilerplate_web/live/page_live.ex:93: undefined function slide_over/1 (expected PetalBoilerplateWeb.PageLive to define such a function or for it to be imported, but none are available)

(Hence the draft PR 😅 )

[ethancrawford]

I ran setup.sh in the umbrella app and pulled the latest changes into the petal_components submodule, and everything seemed to work. I also get a bunch of changes appearing in assets/tailwind.config.js, config/config.exs, config/dev.exs and mix.exs, but assume they're not relevant to this PR?

[ethancrawford]

Out of curiosity, was it intentional on your live demo (https://petal-components-demo.fly.dev/live) that the h1 on the live page was grouped with the first demo (dropdowns) and the other two (Modal and Interactive Pagination) were similarly grouped together?

[mplatts]

In regard to undefined function slide_over/1 - I think during the rebasing you lost the bit where you import the SlideOver module in petal_components.ex.

I ran setup.sh in the umbrella ...

Yeah setup will modify some files in petal_boilerplate to allow it to work in an umbrella app - just have to ignore those during development.

Out of curiosity, was it intentional ...

Oh... no, that seems wrong. Seems we might have too many <.containers>.

[ethancrawford]

Ok, simplified the containers to just one that wraps all the content under the sticky nav bar. LMK if you prefer something else 🙂 (also adjusted some of the heading margins slightly)

[ethancrawford]

(Oh yes, and moved the SlideOver component underneath the Modal - since they are similar button-based previews, seemed tidy to put them together 🤷 )

[mplatts]

Cheers