DDFLSBP-651 - Implement cookie blocking placeholder

base.scss

@@ -102,6 +102,7 @@
 @import "./src/stories/Library/article-header/article-header";
 @import "./src/stories/Library/content-list/content-list";
 @import "./src/stories/Library/content-list-item/content-list-item";
+@import "./src/stories/Library/cookie-placeholder/cookie-placeholder";
 @import "./src/stories/Library/image-credited/image-credited";
 @import "./src/stories/Library/event-description/event-description";
 @import "./src/stories/Library/link-with-icon/link-with-icon";

src/stories/Library/cookie-placeholder/CookiePLaceholder.stories.tsx

@@ -0,0 +1,40 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { CookiePlaceholder } from "./CookiePlaceholder";
+import VideoEmbed from "../video-embed/VideoEmbed";
+
+export default {
+  title: "Library / Cookie Placeholder",
+  component: CookiePlaceholder,
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=16042-22933&t=kwXRJW0pZzoQmJHm-1",
+    },
+    layout: "fullscreen",
+  },
+  argTypes: {
+    buttonText: {
+      defaultValue: "Manage consent",
+      type: "string",
+    },
+    acceptCookies: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    info: {
+      defaultValue:
+        "To view this content, we need your consent to use cookies.",
+      type: "string",
+    },
+    src: {
+      defaultValue: "https://www.youtube.com/embed/CmzKQ3PSrow",
+      type: "string",
+    },
+  },
+} as ComponentMeta<typeof CookiePlaceholder>;
+
+const Template: ComponentStory<typeof CookiePlaceholder> = (props) => (
+  <CookiePlaceholder {...props} />
+);
+
+export const CookiesBlocked = Template.bind({});

src/stories/Library/cookie-placeholder/CookiePlaceholder.tsx

@@ -0,0 +1,66 @@
+import { useState, useEffect } from "react";
+import { Button } from "../Buttons/button/Button";
+
+type CookiePlaceholderProps = {
+  info: string;
+  buttonText: string;
+  src: string;
+  acceptCookies: boolean;
+};
+
+export const CookiePlaceholder = ({
+  info,
+  buttonText,
+  src,
+  acceptCookies: acceptCookiesProp,
+}: CookiePlaceholderProps) => {
+  const [acceptCookies, setAcceptCookies] = useState(acceptCookiesProp);
+
+  useEffect(() => {
+    setAcceptCookies(acceptCookiesProp);
+  }, [acceptCookiesProp]);
+
+  const handleButtonClick = () => {
+    setAcceptCookies(!acceptCookies);
+  };
+
+  return (
+    <section className="video-embed">
+      <div className="video-embed__wrapper">
+        <iframe
+          className={`${acceptCookies ? "" : "cookie-placeholder__hide"}`}
+          src={src}
+          title="VideoEmbed"
+          width="auto"
+          height="auto"
+          allowFullScreen
+        />
+        <div
+          className={`consent-placeholder cookie-placeholder ${
+            acceptCookies ? "cookie-placeholder__hide" : ""
+          }`}
+          data-category="cookie_cat_marketing"
+        >
+          <div className="pagefold-triangle--medium pagefold-inherit-parent" />
+          <div className="cookie-placeholder__wrapper">
+            <div className="cookie-placeholder__description">
+              <div id="dpl-react-apps-cookie-placeholder">{info}</div>
+            </div>
+            <Button
+              classNames="cookie-placeholder__manage-consent-button"
+              size="xlarge"
+              label={buttonText}
+              buttonType="none"
+              variant="outline"
+              collapsible={false}
+              disabled={false}
+              onClick={handleButtonClick}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CookiePlaceholder;

src/stories/Library/cookie-placeholder/cookie-placeholder.scss

@@ -0,0 +1,33 @@
+.cookie-placeholder {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #eee9e5;
+  width: 100%;
+  height: 100%;
+  clip-path: polygon(24px 0, 0 24px, 0 100%, 100% 100%, 100% 0);
+  -webkit-clip-path: polygon(24px 0, 0 24px, 0 100%, 100% 100%, 100% 0);
+}
+
+.cookie-placeholder__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $s-lg;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.cookie-placeholder__description {
+  font-family: $font__body;
+  font-weight: $font__weight--normal;
+  margin-bottom: $s-lg;
+}
+
+.cookie-placeholder__hide{
+  display: none;
+}