DDFLSBP-651-implement-cookie-blocking-placeholder

Added CookiePlaceholder to the design system.

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,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({});

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;

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;
+}