@kickstartds/ds-agency-premium 1.6.0--canary.19.1102.0 → 1.6.0--canary.19.1115.0

package/dist/{HtmlProps-8e3e725a.d.ts → HtmlProps-8e95ed81.d.ts}

@@ -4,6 +4,7 @@
  * and run json-schema-to-typescript to regenerate this file.
  */
 type HTMLString = string;
+type ShowHTMLAfterConsent = boolean;
 /**
  * Add additional css classes that should be applied to the element
  */
@@ -17,7 +18,12 @@ type KsComponentAttribute = string;
  */
 interface HtmlProps {
     html?: HTMLString;
+    consent?: ShowHTMLAfterConsent;
+    consentText?: string;
+    consentButtonLabel?: string;
+    consentBackgroundImage?: string;
+    consentAspectRatio?: "16:9" | "16:10" | "4:3" | "1:1";
     className?: AdditionalClasses;
     component?: KsComponentAttribute;
 }
-export { HTMLString, AdditionalClasses, KsComponentAttribute, HtmlProps };
+export { HTMLString, ShowHTMLAfterConsent, AdditionalClasses, KsComponentAttribute, HtmlProps };

package/dist/SectionProps-7a46a8ad.d.ts

@@ -9,7 +9,7 @@ import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-b05859d6.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-cf82a16d.js";
-import { HtmlProps } from "./HtmlProps-8e3e725a.js";
+import { HtmlProps } from "./HtmlProps-8e95ed81.js";
 import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";

package/dist/components/blog-overview/blog-overview.schema.dereffed.json

@@ -902,9 +902,34 @@
                       "title": "HTML string",
                       "type": "string",
                       "examples": [
-                        "<p>Hello world!</p>"
+                        "<p style=\"color: var(--ks-text-color-default);\">Hello World</p>"
                       ]
                     },
+                    "consent": {
+                      "title": "Show HTML after consent",
+                      "type": "boolean",
+                      "default": false
+                    },
+                    "consentText": {
+                      "type": "string"
+                    },
+                    "consentButtonLabel": {
+                      "type": "string"
+                    },
+                    "consentBackgroundImage": {
+                      "type": "string",
+                      "format": "image"
+                    },
+                    "consentAspectRatio": {
+                      "type": "string",
+                      "enum": [
+                        "16:9",
+                        "16:10",
+                        "4:3",
+                        "1:1"
+                      ],
+                      "default": "16:9"
+                    },
                     "className": {
                       "title": "Additional Classes",
                       "description": "Add additional css classes that should be applied to the element",

package/dist/components/blog-post/blog-post.schema.dereffed.json

@@ -1170,9 +1170,34 @@
                       "title": "HTML string",
                       "type": "string",
                       "examples": [
-                        "<p>Hello world!</p>"
+                        "<p style=\"color: var(--ks-text-color-default);\">Hello World</p>"
                       ]
                     },
+                    "consent": {
+                      "title": "Show HTML after consent",
+                      "type": "boolean",
+                      "default": false
+                    },
+                    "consentText": {
+                      "type": "string"
+                    },
+                    "consentButtonLabel": {
+                      "type": "string"
+                    },
+                    "consentBackgroundImage": {
+                      "type": "string",
+                      "format": "image"
+                    },
+                    "consentAspectRatio": {
+                      "type": "string",
+                      "enum": [
+                        "16:9",
+                        "16:10",
+                        "4:3",
+                        "1:1"
+                      ],
+                      "default": "16:9"
+                    },
                     "className": {
                       "title": "Additional Classes",
                       "description": "Add additional css classes that should be applied to the element",

package/dist/components/blog-post/index.d.ts

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
+import { BlogPostProps } from "../../BlogPostProps-d9decb7c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export type { BlogPostProps };

package/dist/components/html/Html.client.d.ts

@@ -0,0 +1,5 @@
+declare class Html {
+    static identifier: string;
+    constructor(element: any);
+}
+export { Html as default };

package/dist/components/html/Html.client.js

@@ -0,0 +1,41 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+const consentButtonSelector = ".dsa-html__consent-button";
+const copyScriptTag = (original) => {
+    if (original.tagName === "SCRIPT") {
+        const copy = document.createElement("script");
+        for (const attr of original.attributes) {
+            copy.setAttribute(attr.name, attr.value);
+        }
+        copy.textContent = original.textContent;
+        return copy;
+    }
+    return original;
+};
+class Html extends Component {
+    constructor(element) {
+        super(element);
+        const consentButton = element.querySelector(consentButtonSelector);
+        const replaceHtml = () => {
+            const template = element.querySelector("template");
+            if (template) {
+                const elements = [...template.content.children].map(copyScriptTag);
+                element.replaceChildren(...elements);
+                consentButton?.removeEventListener("click", replaceHtml);
+            }
+        };
+        if (consentButton) {
+            consentButton.addEventListener("click", replaceHtml);
+            this.onDisconnect(() => {
+                consentButton.removeEventListener("click", replaceHtml);
+            });
+        }
+        else {
+            replaceHtml();
+        }
+    }
+}
+Html.identifier = "dsa.html";
+define(Html.identifier, Html);
+
+export { Html as default };

package/dist/components/html/html.css

@@ -0,0 +1,48 @@
+.dsa-html {
+  --dsa-html__consent--color: var(--ks-text-color-display);
+  --dsa-html__consent--font: var(--ks-font-copy-m);
+  --dsa-html__consent--background: var(--ks-color-fg-inverted-alpha-4);
+}
+
+.dsa-html__consent {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  gap: var(--ks-spacing-stack-s);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background-position: center;
+  background-size: cover;
+}
+.dsa-html__consent .c-rich-text {
+  color: var(--dsa-html__consent--color, var(--ks-text-color-display));
+  font: var(--dsa-html__consent--font, var(--ks-font-interface-m));
+}
+.dsa-html__consent:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  background-color: var(--dsa-html__consent--background, var(--ks-color-fg-inverted-alpha-6));
+}
+.dsa-html__consent > * {
+  z-index: 1;
+}
+.dsa-html__consent .l-container {
+  container-type: normal;
+}
+.dsa-html__consent--sixteen-to-nine {
+  aspect-ratio: 16/9;
+}
+.dsa-html__consent--sixteen-to-ten {
+  aspect-ratio: 16/10;
+}
+.dsa-html__consent--four-to-three {
+  aspect-ratio: 4/3;
+}
+.dsa-html__consent--square {
+  aspect-ratio: 1;
+}

package/dist/components/html/html.schema.dereffed.json

@@ -9,9 +9,34 @@
       "title": "HTML string",
       "type": "string",
       "examples": [
-        "<p>Hello world!</p>"
+        "<p style=\"color: var(--ks-text-color-default);\">Hello World</p>"
       ]
     },
+    "consent": {
+      "title": "Show HTML after consent",
+      "type": "boolean",
+      "default": false
+    },
+    "consentText": {
+      "type": "string"
+    },
+    "consentButtonLabel": {
+      "type": "string"
+    },
+    "consentBackgroundImage": {
+      "type": "string",
+      "format": "image"
+    },
+    "consentAspectRatio": {
+      "type": "string",
+      "enum": [
+        "16:9",
+        "16:10",
+        "4:3",
+        "1:1"
+      ],
+      "default": "16:9"
+    },
     "className": {
       "title": "Additional Classes",
       "description": "Add additional css classes that should be applied to the element",

package/dist/components/html/html.schema.json

@@ -8,7 +8,34 @@
     "html": {
       "title": "HTML string",
       "type": "string",
-      "examples": ["<p>Hello world!</p>"]
+      "examples": [
+        "<p style=\"color: var(--ks-text-color-default);\">Hello World</p>"
+      ]
+    },
+    "consent": {
+      "title": "Show HTML after consent",
+      "type": "boolean",
+      "default": false
+    },
+    "consentText": {
+      "type": "string"
+    },
+    "consentButtonLabel": {
+      "type": "string"
+    },
+    "consentBackgroundImage": {
+      "type": "string",
+      "format": "image"
+    },
+    "consentAspectRatio": {
+      "type": "string",
+      "enum": [
+        "16:9",
+        "16:10",
+        "4:3",
+        "1:1"
+      ],
+      "default": "16:9"
     },
     "className": {
       "title": "Additional Classes",

package/dist/components/html/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { HtmlProps } from "../../HtmlProps-8e3e725a.js";
+import { HtmlProps } from "../../HtmlProps-8e95ed81.js";
 declare const HtmlContextDefault: import("react").ForwardRefExoticComponent<HtmlProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const HtmlContext: import("react").Context<import("react").ForwardRefExoticComponent<HtmlProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Html: import("react").ForwardRefExoticComponent<HtmlProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/html/index.js

@@ -1,35 +1,23 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle, useEffect, createContext, useContext } from 'react';
+import "./html.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
+import { Button } from '@kickstartds/base/lib/button';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+import './Html.client.js';
+import '@kickstartds/core/lib/component';
 
-const copyScriptTag = (original) => {
-    if (original.tagName !== "SCRIPT") {
-        return original;
-    }
-    const copy = document.createElement("script");
-    for (const attr of original.attributes) {
-        copy.setAttribute(attr.name, attr.value);
-    }
-    copy.textContent = original.textContent;
-    return copy;
-};
-const HtmlContextDefault = forwardRef(({ html, className, component, ...props }, forwardedRef) => {
-    const ref = useRef(null);
-    useImperativeHandle(forwardedRef, () => ref.current);
-    useEffect(() => {
-        if (html && ref.current) {
-            const parser = new DOMParser();
-            const doc = parser.parseFromString(html, "text/html");
-            const elements = [...doc.head.children, ...doc.body.children];
-            const insertedElements = elements.map((element) => ref.current.appendChild(copyScriptTag(element)));
-            return () => {
-                for (const insertedElement of insertedElements) {
-                    insertedElement?.remove();
-                }
-            };
-        }
-    }, [html, ref.current]);
-    return (jsx("div", { ref: ref, className: classnames("c-html", className), "ks-component": component, ...props }));
+const HtmlContextDefault = forwardRef(({ html, consent, consentText, consentBackgroundImage, consentButtonLabel, consentAspectRatio = "16:9", className, component = "dsa.html", ...props }, ref) => {
+    return (jsxs("div", { ref: ref, className: classnames("dsa-html", className), "ks-component": component, ...props, children: [jsx("template", { dangerouslySetInnerHTML: { __html: html } }), consent && (jsxs("div", { style: {
+                    backgroundImage: consentBackgroundImage
+                        ? `url(${consentBackgroundImage})`
+                        : undefined,
+                }, className: classnames("dsa-html__consent", {
+                    "dsa-html__consent--sixteen-to-nine": consentAspectRatio === "16:9",
+                    "dsa-html__consent--sixteen-to-ten": consentAspectRatio === "16:10",
+                    "dsa-html__consent--four-to-three": consentAspectRatio === "4:3",
+                    "dsa-html__consent--square": consentAspectRatio === "1:1",
+                }), children: [consentText && jsx(RichText, { text: consentText }), jsx(Button, { type: "button", label: consentButtonLabel, className: "dsa-html__consent-button", variant: "tertiary" })] }))] }));
 });
 const HtmlContext = createContext(HtmlContextDefault);
 const Html = forwardRef((props, ref) => {

package/dist/components/index/index.d.ts

@@ -24,7 +24,7 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-6b3cff22.js";
+export * from "../../BlogPostProps-d9decb7c.js";
 export * from "../../BlogOverviewProps-9f207f1c.js";
 export * from "../../PageProps-aa29c554.js";
 export { SettingsProps };

package/dist/components/page/page.schema.dereffed.json

@@ -902,9 +902,34 @@
                       "title": "HTML string",
                       "type": "string",
                       "examples": [
-                        "<p>Hello world!</p>"
+                        "<p style=\"color: var(--ks-text-color-default);\">Hello World</p>"
                       ]
                     },
+                    "consent": {
+                      "title": "Show HTML after consent",
+                      "type": "boolean",
+                      "default": false
+                    },
+                    "consentText": {
+                      "type": "string"
+                    },
+                    "consentButtonLabel": {
+                      "type": "string"
+                    },
+                    "consentBackgroundImage": {
+                      "type": "string",
+                      "format": "image"
+                    },
+                    "consentAspectRatio": {
+                      "type": "string",
+                      "enum": [
+                        "16:9",
+                        "16:10",
+                        "4:3",
+                        "1:1"
+                      ],
+                      "default": "16:9"
+                    },
                     "className": {
                       "title": "Additional Classes",
                       "description": "Add additional css classes that should be applied to the element",

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 13:27:40 GMT
+ * Generated on Fri, 25 Oct 2024 09:37:21 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/components/presets.json

@@ -2153,6 +2153,46 @@
     },
     "screenshot": "img/screenshots/components-hero--text-box-on-full-screen.png"
   },
+  {
+    "id": "components-html--html",
+    "group": "Components/HTML",
+    "name": "HTML",
+    "code": "<Html\n  consentAspectRatio=\"16:9\"\n  html=\"<p style=&quot;color: var(--ks-text-color-default);&quot;>Hello World</p>\"\n/>",
+    "args": {
+      "html": "<p style=\"color: var(--ks-text-color-default);\">Hello World</p>",
+      "consent": false,
+      "consentAspectRatio": "16:9"
+    },
+    "screenshot": "img/screenshots/components-html--html.png"
+  },
+  {
+    "id": "components-html--with-consent",
+    "group": "Components/HTML",
+    "name": "WithConsent",
+    "code": "<Html\n  consent\n  consentAspectRatio=\"16:9\"\n  consentBackgroundImage=\"img/02.jpg\"\n  consentButtonLabel=\"yes!\"\n  consentText=\"would you like to watch the youtube video?\"\n  html=\"<iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube-nocookie.com/embed/oGGIkuGY-7U?si=Y5_JHflGsNwRCLu_&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot; referrerpolicy=&quot;strict-origin-when-cross-origin&quot; allowfullscreen></iframe>\"\n/>",
+    "args": {
+      "html": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/oGGIkuGY-7U?si=Y5_JHflGsNwRCLu_\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>",
+      "consent": true,
+      "consentAspectRatio": "16:9",
+      "consentText": "would you like to watch the youtube video?",
+      "consentButtonLabel": "yes!",
+      "consentBackgroundImage": "img/02.jpg"
+    },
+    "screenshot": "img/screenshots/components-html--with-consent.png"
+  },
+  {
+    "id": "components-html--with-script",
+    "group": "Components/HTML",
+    "name": "WithScript",
+    "code": "<Html\n  consent\n  consentAspectRatio=\"16:9\"\n  consentButtonLabel=\"Say hello\"\n  html=\"<script>alert(&quot;Hello :)&quot;)</script><p style=&quot;color: var(--ks-text-color-default);&quot;>Nice to meet you!</p>\"\n/>",
+    "args": {
+      "html": "<script>alert(\"Hello :)\")</script><p style=\"color: var(--ks-text-color-default);\">Nice to meet you!</p>",
+      "consent": true,
+      "consentAspectRatio": "16:9",
+      "consentButtonLabel": "Say hello"
+    },
+    "screenshot": "img/screenshots/components-html--with-script.png"
+  },
   {
     "id": "components-image-story--sticky-image-next-to-scrolling-text",
     "group": "Components/Image Story",

package/dist/components/section/section.schema.dereffed.json

@@ -888,9 +888,34 @@
                 "title": "HTML string",
                 "type": "string",
                 "examples": [
-                  "<p>Hello world!</p>"
+                  "<p style=\"color: var(--ks-text-color-default);\">Hello World</p>"
                 ]
               },
+              "consent": {
+                "title": "Show HTML after consent",
+                "type": "boolean",
+                "default": false
+              },
+              "consentText": {
+                "type": "string"
+              },
+              "consentButtonLabel": {
+                "type": "string"
+              },
+              "consentBackgroundImage": {
+                "type": "string",
+                "format": "image"
+              },
+              "consentAspectRatio": {
+                "type": "string",
+                "enum": [
+                  "16:9",
+                  "16:10",
+                  "4:3",
+                  "1:1"
+                ],
+                "default": "16:9"
+              },
               "className": {
                 "title": "Additional Classes",
                 "description": "Add additional css classes that should be applied to the element",

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 13:27:44 GMT
+ * Generated on Fri, 25 Oct 2024 09:37:24 GMT
  */
 :root [ks-theme=business] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -2727,7 +2727,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 13:27:49 GMT
+ * Generated on Fri, 25 Oct 2024 09:37:29 GMT
  */
 :root [ks-theme=google] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -5458,7 +5458,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 13:27:47 GMT
+ * Generated on Fri, 25 Oct 2024 09:37:26 GMT
  */
 :root [ks-theme=ngo] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -8459,7 +8459,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 13:27:51 GMT
+ * Generated on Fri, 25 Oct 2024 09:37:31 GMT
  */
 :root [ks-theme=telekom] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/tokens/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 13:27:40 GMT
+ * Generated on Fri, 25 Oct 2024 09:37:21 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 24 Oct 2024 13:27:41 GMT
+ * Generated on Fri, 25 Oct 2024 09:37:22 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#230a2b";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kickstartds/ds-agency-premium",
-  "version": "1.6.0--canary.19.1102.0",
+  "version": "1.6.0--canary.19.1115.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {