feat(cc-flex-gap): Remove the component and replace it with CSS

[florian-sanders-cc]

Fixes #769

What does this PR do?

• Removes the cc-flex-gap component,
• Replaces it usage with CSS,
• Improves responsiveness of some components.

Note:

• This PR does not modify cc-pricing-* components and cc-zone. It should be merged after the pricing PR.

Things to check

• every commit,
• compare these components visually with prod:
  • cc-toaster story
  • cc-tcp-redirection
  • cc-invoice-table
  • cc-heptapod-info
  • cc-header-orga
  • cc-header-app
  • cc-header-addon
  • cc-env-var-input
  • cc-env-var-form
  • cc-env-var-create
  • cc-elasticsearch-info
  • cc-addon-credentials
  • cc-addon-linked-apps
  • cc-addon-features

TODO (Flo)

• Rebase and fixup feedback commits

[github-actions]

🔎 A preview has been automatically published : https://clever-components-preview.cellar-c2.services.clever-cloud.com/cc-flex-gap/remove/index.html.

This preview will be deleted once this PR is closed.

[pdesoyres-cc]

Well done Flo! I've got nothing to say.

[Galimede]

Hello, nice job on changing them, I've checked the components as you asked and I found some things that I left below. Otherwise good job! 💪

• question: cc-header-orga has an alignment difference, is this voluntary?
• nitpick(non-blocking): there is a slight alignment difference for cc-env-var-input but it's barely noticeable so we can leave it like that I guess. As the cc-env-var-form contains some cc-env-var-input you can see it in the component too.
• issue: the alignment with the zone is broken on cc-addon-linked-apps

(:warning: Watch out you put cc-addon-credentials twice in the components to review visually 😉)

[roberttran-cc]

A very thorough PR, as usual: very nice job!

I have the same feedback as Mathieu on:

• cc-addon-linked-apps: cc-zone alignment is off with the beginning of the line
• cc-header-orga: space is missing between the main name and the badge

I'll also add:

• cc-header-addon: breakpoints when content should wrap is broken

[florian-sanders-cc]

Thanks for your reviews @Galimede @roberttran-cc!

cc-header-orga:
Oups, forgot to reset a test I made. I still find the spacing between "hotline" and the badge below weird but it's roughly the same as prod now 👍

cc-addon-linked-apps:
Fixed 👍 The alignment is more centered than in prod now. I think it's better this way but WDYT?

cc-header-addon:
Very good catch @roberttran-cc. I fixed it. There might still be a slight difference but the component can shrink below 450px compared to the one in prod so I think it's for the best 👍.

cc-env-var-input:
You are right @Galimede, I did not see at first but now I do. I'd say we can leave it like that 👍.

I made separate commits for your fixes so you can check them easily (cc-zone + the ones with your names 😉)

[roberttran-cc]

cc-header-orga, cc-header-addon, cc-env-var-input : perfect!

cc-addon-linked-apps: I made a suggestion on how to fix the issue, tell me what you think about it!

[Galimede]

LGTM, GG! 💪

[github-actions]

🔎 The preview has been automatically deleted.