From 4aa1212dc5c5e4b9f1e15daed213d7a326588faa Mon Sep 17 00:00:00 2001
From: Andreas Nielsen <andreas@reload.dk>
Date: Fri, 31 May 2024 13:49:02 +0200
Subject: [PATCH] DDFLSBP-651-implement-cookie-blocking-placeholder Added
 CookiePlaceholder to the design system.

---
 base.scss                                     |  1 +
 .../CookiePLaceholder.stories.tsx             | 31 +++++++++++++++++++
 .../cookie-placeholder/CookiePlaceholder.tsx  | 31 +++++++++++++++++++
 .../cookie-placeholder.scss                   | 14 +++++++++
 4 files changed, 77 insertions(+)
 create mode 100644 src/stories/Library/cookie-placeholder/CookiePLaceholder.stories.tsx
 create mode 100644 src/stories/Library/cookie-placeholder/CookiePlaceholder.tsx
 create mode 100644 src/stories/Library/cookie-placeholder/cookie-placeholder.scss

diff --git a/base.scss b/base.scss
index 359618de7..418197c8f 100644
--- a/base.scss
+++ b/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";
diff --git a/src/stories/Library/cookie-placeholder/CookiePLaceholder.stories.tsx b/src/stories/Library/cookie-placeholder/CookiePLaceholder.stories.tsx
new file mode 100644
index 000000000..af247f2fb
--- /dev/null
+++ b/src/stories/Library/cookie-placeholder/CookiePLaceholder.stories.tsx
@@ -0,0 +1,31 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { CookiePlaceholder } from "./CookiePlaceholder";
+
+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: {
+    info: {
+      defaultValue:
+        "To view this content, we need your consent to use cookies.",
+      type: "string",
+    },
+    buttonText: {
+      defaultValue: "Manage consent",
+      type: "string",
+    },
+  },
+} as ComponentMeta<typeof CookiePlaceholder>;
+
+const Template: ComponentStory<typeof CookiePlaceholder> = (props) => (
+  <CookiePlaceholder {...props} />
+);
+
+export const CookiesBlocked = Template.bind({});
diff --git a/src/stories/Library/cookie-placeholder/CookiePlaceholder.tsx b/src/stories/Library/cookie-placeholder/CookiePlaceholder.tsx
new file mode 100644
index 000000000..ae457ea6b
--- /dev/null
+++ b/src/stories/Library/cookie-placeholder/CookiePlaceholder.tsx
@@ -0,0 +1,31 @@
+import { Button } from "../Buttons/button/Button";
+
+type CookiePlaceholderProps = {
+  info: string;
+  buttonText: string;
+};
+
+export const CookiePlaceholder = ({
+  info,
+  buttonText,
+}: CookiePlaceholderProps) => {
+  return (
+    <div className="cookie-placeholder">
+      <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}
+      />
+    </div>
+  );
+};
+
+export default CookiePlaceholder;
diff --git a/src/stories/Library/cookie-placeholder/cookie-placeholder.scss b/src/stories/Library/cookie-placeholder/cookie-placeholder.scss
new file mode 100644
index 000000000..5e6dad94b
--- /dev/null
+++ b/src/stories/Library/cookie-placeholder/cookie-placeholder.scss
@@ -0,0 +1,14 @@
+.cookie-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    border-radius: 5px;    
+}
+
+.cookie-placeholder__description {
+  font-family: $font__body;
+  font-weight: $font__weight--normal;
+  margin-bottom: 20px;
+}