feat(file-download): add preview link - FRONT-4574

[emeryro]

No description provided.

[github-actions]

🚀 Deployed on https://ecl-preview-3577--europa-component-library.netlify.app

[planctus]

but..do we know what the webtools widget is going to inject here..? Are we sure we need to define the link ourselves or could that be coming from webtools directly? I would imagine them using the download button to build the markup for their widget and add the preview link on request. Maybe you had infomation about this, just asking

[emeryro]

I don't have more information...
All that I know is what we discussed with Sergio in the Teams channel

[planctus]

I've asked to gather information about this request, the response is that the button will be injected by webtools, they also have the option to show it before or after the download button, but basically we don't need to do anything as long as we don't receive specific requests by webtools. So we can close this pull request, we won't demo the "preview" button at all.

[emeryro]

I'm not fully sure... If Webtools add the button, that's fine for me, but in the PR I had to create a container for the buttons, to be able to place them correctly.
I don't know if that would still be needed

[planctus]

i guess that they will wrap by themselves the two buttons as they do in their demo, if they will need anything from us they will request it

[planctus]

Mmh..but how are we "testing" the webtools markup and css that will be injected like this? We added css on our side to handle a second link, but we will get styles that will potentially conflict with those, that was the idea, to set up a demo using the webtools markup and css so that we could reliably expect the widget to look ok in our component.
About "our" styles, it seems we need to handle the small viewports, this is what happens currently:

[emeryro]

I would say that it is up to Webtools to ensure that their markup and css are displayed correctly. We offer a wrapper, and provide an example with a link. I don't want to add specific Webtools css in our repo, as we would have to maintain it.
I pushed an update to add the webtools data attribute hen needed (to check if it is possible), and to remove the spacing from our css as it will be handled on their side

[planctus]

it's from the beginning of this tale that we've been warned about the fact that the styles coming from webtools will not take care of the ECL file download component. This whole idea is based on the fact that we might have conflicting styles or issues, in any case, once webtools will start injecting their markup and css.
This work here, other than for adding a wrapper, was meant to test the component with the webtools markup and css, i don't like the idea either of having webtools injecting anything in a component or ours, but that is the case, so here we are trying to ensure that will not result in a completely broken functionality once it will be enabled.

[emeryro]

But they are using our markup and css (with a prefix). The only thing added on their side is the spacing after the link; that's why I handled it in the story and not in the css. The rest of the css is the same.

[planctus]

I remember Vlad expecting some vertical spacing in this case: