@kickstartds/ds-agency-premium 1.6.0--canary.19.1102.0 → 1.6.0--canary.19.1105.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/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 = ".c-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,20 @@
+.c-html__consent {
+  color: var(--ks-text-color-default);
+  font: var(--ks-font-interface-m);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.c-html__consent--sixteen-to-nine {
+  aspect-ratio: 16/9;
+}
+.c-html__consent--sixteen-to-ten {
+  aspect-ratio: 16/10;
+}
+.c-html__consent--four-to-three {
+  aspect-ratio: 4/3;
+}
+.c-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("c-html", className), "ks-component": component, ...props, children: [jsx("template", { dangerouslySetInnerHTML: { __html: html } }), consent && (jsxs("div", { style: {
+                    backgroundImage: consentBackgroundImage
+                        ? `url(${consentBackgroundImage})`
+                        : undefined,
+                }, className: classnames("c-html__consent", {
+                    "c-html__consent--sixteen-to-nine": consentAspectRatio === "16:9",
+                    "c-html__consent--sixteen-to-ten": consentAspectRatio === "16:10",
+                    "c-html__consent--four-to-three": consentAspectRatio === "4:3",
+                    "c-html__consent--square": consentAspectRatio === "1:1",
+                }), children: [consentText && jsx(RichText, { text: consentText }), jsx(Button, { type: "button", label: consentButtonLabel, className: "c-html__consent-button" })] }))] }));
 });
 const HtmlContext = createContext(HtmlContextDefault);
 const Html = forwardRef((props, ref) => {

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 Thu, 24 Oct 2024 14:37:17 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 Thu, 24 Oct 2024 14:37:21 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 Thu, 24 Oct 2024 14:37:26 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 Thu, 24 Oct 2024 14:37:24 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 Thu, 24 Oct 2024 14:37:29 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 Thu, 24 Oct 2024 14:37:17 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 Thu, 24 Oct 2024 14:37:18 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.1105.0",
   "description": "",
   "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
   "bugs": {