feat(creation-tunnel): init plan components

[Galimede]

What does this PR do?

This PR introduces three new components for the new creation-tunnel:

• cc-plan-item => The base plan card
• cc-plan-picker => One plan picker
• cc-plan-configurator => The form control element where you can refine your choice with two pickers

How to review?

• Check the code
• Check the stories

[github-actions]

🔎 A preview has been automatically published : https://clever-components-preview.cellar-c2.services.clever-cloud.com/tunnel-creation/plan-select/index.html.

This preview will be deleted once this PR is closed.

[florian-sanders-cc]

Well done @Galimede the component looks good and the code is easy to read 👍

I left a few minor feedback and here are a few more:

• When reviewing, I felt like the cc-plan-picker and cc-plan-configurator could be merged into a single component. cc-plan-picker could be a subrender that is nested only when there are relatedPlans. It's not that big of a deal, this is a nitpick and I'll leave it up to you ;),
• Unless we're planning on using cc-plan-picker alone (but I don't see the usecase), I don't think we need to make cc-plan-picker a form element. Since its value is controlled by the parent anyway it doesn't bring any benefits.

Apart from that it's great!

[pdesoyres-cc]

Well done @Galimede.

I really like the design.

I feal like you could merge cc-plan-picker and cc-plan-configurator inside one single component (that could be named cc-plan-picker)

I also left some comments

[HeleneAmouzou]

GG ! It looks very nice ! 👏
I have left some comments, mostly nitpicks.

[florian-sanders-cc]

Don't forget to add the cc-plan-item & cc-plan-picker components to the list of components to be typechecked by CI (in tsconfig.ci.json) 😉

Apart from that I only have a few nitpicks compared to my first review!

Gg @Galimede almost there 😎

[florian-sanders-cc]

All good! Thanks & gg @Galimede

[pdesoyres-cc]

Well done Mathieu. Almost there, I left some comments and nitpicks.

[hsablonniere]

Well done @Galimede, the API and types are really good. I mostly have issues/nitpicks about the CSS and UI.

cc-plan-item

• when the name of the plan is long, it does not wrap
  • we will try to avoid such situations but the component should still work properly if it happens
  • we need to story to demonstrate such a case: long plan name and custom CSS for story with a small width on the component (like when it's used in the picker).
• I wrote a lot of comments about your flexbox usage, but here's one that is a bit more global: the display: flex on the :host is not really used (same for the two flex: xx on .title and .details. They could/should be useful in the picker so all cc-plan-item have the same height and the .title takes the rest of the height`
  • This requires a change in the picker
  • The flex: xx on .title and .details would still need to be fixed
• the "selected" icon can sometimes go above the plan name or badge, is this a problem?

cc-plan-picker

• like we need a story in cc-plan-item for long plan names, we need a story in this one to show how a long name will wrap, grow the height of the plan item and the other on the same row.

[roberttran-cc]

Looking good! A few minor feedback on my side.

Also, I observed a weird behavior with the plan picker & keyboard focus but it may be legit:

• testing a story with related plans
• choosing another "parent" plan with the right arrow (you should just not select the last "parent" plan)
• focus is now on the new value
• pressing tab
• the focus is on the "related" plans, the first one
• pressing shift+tab to focus back to the "parent" plans
• I expect to be focused on the selected plan but I'm focused on the last "parent" plan

[hsablonniere]

I had a quick look at the "hubert feedbacks", LGTM 👍 Well done!

[github-actions]

🔎 The preview has been automatically deleted.