cc-domain-management: init component

[florian-sanders-cc]

Fixes #1095

How to review?

• Check the code (since these are mostly new files, it might be more convenient to review locally),
• Check the preview:
  • all stories,
  • both French & English,
  • different viewport sizes.
• Proceed with the QA,
  • note that this QA should be done using the console (links to specific cases are available within the docs).
• At least 4 or 5 reviews are required for this PR.

A few specific questions

• Component naming, should we got for cc-domain-list instead? It feels more consistent even though it doesn't only deal with the list of domains.
• The API sends us the domain & path concatenated into a single fqdn property:
  • to display the domain name and the path prefix separately and differently within the list, we need to have two separate properties (domain & pathPrefix). Internally, within the component, the pathPrefix can never be null or empty because it's always at least /.
  • for the API, the pathPrefix thing does not exist and we have to concatenate (+ encode :-1: ) everything. When no path prefix is set, there is no trailing slash within fqdn.
  • To sum it up, for example.com:
  • API: { fqdn: 'example.com' }
  • component data = { fqdn: 'example.com', domainName: 'example.com', pathPrefix: '/' }
  • Question: do we keep fqdn naming or do we change it? At first I went with domainWithPathPrefix but it creates confusion because it's not an actual concatenation of domainName + pathPrefix. I opted to keep fqdn even though I don't like the naming because it highlights that this comes from the API. This is some kind of unique identifier we use to communicate with the API but we don't actually use it apart from within the smart.
• Do we go for a grid design or cards?
  • Preview - Grid version
  • Preview - Cards version
  • Note that in the future, we'll propably add more badges (DNS config status, certificate status) and action buttons will be regrouped into 1 menu button.
  • I have tried several options for the grid version, none of which totally convinced me so far:

No columns for badges

 **Issues:** Some people are triggered by the "misaligned" aspect. Note that the more you think about it the more you find it annoying but as a user, there are similar cases that I had never noticed as annoying, for instance in GitHub PR view: 

Column dedicated to primary badge

 **Issues:** Considering "primary" can only applied to one row and that it is always the first row, it feels weird to dedicate a column to it.

Align right for badge columns

 **Issues:** Badges are pretty far from what they are directly related to: the domain.

My personal preference if you wanna know

1. cards 2. grid as within the preview (primary inlined with the domain name + column for badges, left aligned). 3. grid with no columns for the badges, all inlined next to the domain, GitHub's way

Card design

@hsablonniere has suggested a few nice improvements for the card design, feel free to give your opinion about these as well

Issue with domain names wrapping

When there's not enough space (small viewport or long domain name), the domain name wraps to a new line. Sometimes the link icon ends up alone on a line, sometimes the path prefix ends up on a line. We cannot really prevent that but we can improve the design so it happens less often by making the domain name span accross the whole width and position the buttons below it: 

Gap between cards or not

When there's only one column (small viewport), should we remove the gap between cards and make it look like a "table"? 

TODO Flo

• [ ] update smart doc with proper links
• [x] rebase once forms have been merged
• [ ] run prettier once all reviews & feedback have been processed.