DDFLSBP-651 - Implement cookie blocking placeholder

[Dresse]

Link to issue

https://reload.atlassian.net/browse/DDFLSBP-651

Description

This PR adds the Cookie placeholder element to the design system.
Link to the design in Figma: https://www.figma.com/design/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=16042-22933&t=kwXRJW0pZzoQmJHm-1

It is added as part of the VideoEmbed story.

Screenshot of the result

Image showing the result in dpl-desgin-system storybook:

Desktop:

Mobile:

Video recording showing the end result:
https://github.com/danskernesdigitalebibliotek/dpl-design-system/assets/6142323/74dd4689-ad6f-4684-80e1-05eed9fb2f8c

[Adamik10]

I have one comment I'd like you to look at :)) Otherwise great job!

Also for future reference, I would like to see a mobile view screenshot in the PR overview.

✨🎖️

[Dresse]

I have one comment I'd like you to look at :)) Otherwise great job!

Also for future reference, I would like to see a mobile view screenshot in the PR overview.

✨🎖️

Thanks for all the feedback and comments Adam 👍

I have updated the PR with new screenshots (both desktop and mobile).

I have also changed the padding: 20px and margin-bottom: 20px with a suitable variable from variables-spacing.scss.

I have also done some other changes to the overall markup, as I needed to adjust it to work with cookieinformation logic. Although this means that the cookiepopup is set to 'display: none' as default. Because of this, it is now also hidden in StoryBook/Chromatic.

So my question is; how should I handle this? Should I do some kind of logic to the StoryBook, that changes the 'display: none' value to 'display: block'? Do you have any suggestions?

[spaceo]

I honour the review already given. :)
But I have one comment I think is, somewhat, important:
I think the cookie placeholder story and the video embed story should me merged. Either could the cookie placeholder story be a sub story of the video embed or you could have a control on the videoembed story that toggels the placeholder.
There is alreday a whole lot of stories in the storybook and I think we can try to "minmize clutter" by bundling stories that are related.

[spaceo]

Btw there is a whole lot of chromatic tests that need to be approved. I think at least some of them are related. One troubeling one is one that seems like the contrast changes on the input fields that Claus did has been reverted?:
https://www.chromatic.com/test?appId=616ffdab9acbf5003ad5fd2b&id=6661c5837b4c653d0766aa3c

[Dresse]

I honour the review already given. :) But I have one comment I think is, somewhat, important: I think the cookie placeholder story and the video embed story should me merged. Either could the cookie placeholder story be a sub story of the video embed or you could have a control on the videoembed story that toggels the placeholder. There is alreday a whole lot of stories in the storybook and I think we can try to "minmize clutter" by bundling stories that are related.

I have now added the cookie placeholder story to the videoEmbed story. It has a control to toggle between the video and the placeholder. You can also click on the button on the placeholder to "accept" cookies and then see the video.

[Dresse]

Btw there is a whole lot of chromatic tests that need to be approved. I think at least some of them are related. One troubeling one is one that seems like the contrast changes on the input fields that Claus did has been reverted?: https://www.chromatic.com/test?appId=616ffdab9acbf5003ad5fd2b&id=6661c5837b4c653d0766aa3c

It seems to be because I didn't have the newest version of develop merged into my branch. After merging develop into my branch, the only chromatic tests that needs to be approved are the new one introduces by my PR.

[Adamik10]

Wonderful 💯

To answer your question about visibility in storybook - yes, I would probably give it an argument in storybook that overwrites some styling in order to show the component. But then we would also need to make sure people don't take it into dpl-react and add it there for correct rendering in the final product :)

[Dresse]

Wonderful 💯

To answer your question about visibility in storybook - yes, I would probably give it an argument in storybook that overwrites some styling in order to show the component. But then we would also need to make sure people don't take it into dpl-react and add it there for correct rendering in the final product :)

This is not relevant anymore as I have added it as part of the VideoEmbed story. I added functionality to hide/show the placeholder when clicking on the button and also as part of a config.