@kickstartds/ds-agency-premium 1.5.27 → 1.6.0--canary.17.1001.0

package/dist/BlogTeaserProps-f5855e93.d.ts

@@ -28,6 +28,10 @@ type Image = string;
  * The blog entry URL to link
  */
 type URL = string;
+/**
+ * The label to use for the link
+ */
+type Label = string;
 /**
  * Time to read for the blog post
  */
@@ -63,6 +67,7 @@ interface BlogTeaserProps {
  */
 interface Link {
     url: URL;
+    label?: Label;
 }
 /**
  * The author of the blog post
@@ -72,4 +77,4 @@ interface Author {
     title?: Title;
     image?: Image1;
 }
-export { Date, Tags, Headline, TeaserText, Image, URL, ReadingTime, Name, Title, Image1, BlogTeaserProps, Link, Author };
+export { Date, Tags, Headline, TeaserText, Image, URL, Label, ReadingTime, Name, Title, Image1, BlogTeaserProps, Link, Author };

package/dist/SectionProps-83d399b4.d.ts

@@ -8,7 +8,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 { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
+import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

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

@@ -3190,6 +3190,15 @@
               "examples": [
                 "https://example.com"
               ]
+            },
+            "label": {
+              "title": "Label",
+              "description": "The label to use for the link",
+              "type": "string",
+              "examples": [
+                "Read more"
+              ],
+              "default": "Read more"
             }
           },
           "additionalProperties": false,
@@ -3346,6 +3355,15 @@
                 "examples": [
                   "https://example.com"
                 ]
+              },
+              "label": {
+                "title": "Label",
+                "description": "The label to use for the link",
+                "type": "string",
+                "examples": [
+                  "Read more"
+                ],
+                "default": "Read more"
               }
             },
             "additionalProperties": false,
@@ -3503,6 +3521,15 @@
                 "examples": [
                   "https://example.com"
                 ]
+              },
+              "label": {
+                "title": "Label",
+                "description": "The label to use for the link",
+                "type": "string",
+                "examples": [
+                  "Read more"
+                ],
+                "default": "Read more"
               }
             },
             "additionalProperties": false,

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

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-83d399b4.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
 export { BlogOverview };

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

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

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

@@ -80,6 +80,15 @@
           "examples": [
             "https://example.com"
           ]
+        },
+        "label": {
+          "title": "Label",
+          "description": "The label to use for the link",
+          "type": "string",
+          "examples": [
+            "Read more"
+          ],
+          "default": "Read more"
         }
       },
       "additionalProperties": false,

package/dist/components/blog-teaser/blog-teaser.schema.json

@@ -52,6 +52,13 @@
           "type": "string",
           "format": "uri",
           "examples": ["https://example.com"]
+        },
+        "label": {
+          "title": "Label",
+          "description": "The label to use for the link",
+          "type": "string",
+          "examples": ["Read more"],
+          "default": "Read more"
         }
       },
       "additionalProperties": false,

package/dist/components/blog-teaser/index.js

@@ -29,6 +29,7 @@ const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaser
                 items: teaserMetaItems,
             }, link: link
                 ? {
+                    label: link.label || "Read more",
                     // @ts-expect-error
                     target: link.url,
                 }

package/dist/components/footer/footer.css

@@ -10,7 +10,7 @@
   --dsa-footer__link--font-weight: var(--dsa-link--font-weight);
   --dsa-footer__link--color: var(--dsa-link--color);
   --dsa-footer__link--text-tecoration: none;
-  --dsa-footer__link--text-tecoration_hover: underline;
+  --dsa-footer__link--text-tecorationhover: underline;
   --dsa-footer__logo--height: 1.5rem;
 }
 @media (min-width: 62em) {
@@ -57,6 +57,6 @@
   text-decoration: var(--dsa-footer__link--text-tecoration, none);
 }
 .dsa-footer__link:not(.c-button):hover {
-  text-decoration: var(--dsa-footer__link--text-tecoration_hover, underline);
+  text-decoration: var(--dsa-footer__link--text-tecoration-hover, underline);
   color: var(--dsa-footer__link--color_hover, var(--dsa-link--color_hover));
 }

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

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

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

@@ -0,0 +1,25 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+const consentButtonSelector = ".c-html__consent-button";
+class Html extends Component {
+    constructor(element) {
+        super(element);
+        const consentButton = element.querySelector(consentButtonSelector);
+        if (consentButton) {
+            const replaceHtml = () => {
+                const template = element.querySelector("template");
+                const clone = template?.content.cloneNode(true);
+                element.replaceChildren(clone);
+                consentButton.removeEventListener("click", replaceHtml);
+            };
+            consentButton.addEventListener("click", replaceHtml);
+            this.onDisconnect(() => {
+                consentButton.removeEventListener("click", replaceHtml);
+            });
+        }
+    }
+}
+Html.identifier = "dsa.html-consent";
+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

@@ -0,0 +1,55 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/html.schema.json",
+  "title": "HTML",
+  "description": "Display raw HTML.",
+  "type": "object",
+  "properties": {
+    "html": {
+      "title": "HTML string",
+      "type": "string",
+      "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",
+      "description": "Add additional css classes that should be applied to the element",
+      "type": "string"
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string"
+    },
+    "type": {
+      "const": "html"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "http://schema.kickstartds.com/base/html.schema.json",
+  "$id": "http://schema.mydesignsystem.com/html.schema.json",
   "title": "HTML",
   "description": "Display raw HTML.",
   "type": "object",
@@ -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

@@ -4,9 +4,10 @@ import { HTMLAttributes } from "react";
 /**
  * This file was automatically generated by json-schema-to-typescript.
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
- * and run `yarn run schema` to regenerate this file.
+ * 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
  */
@@ -20,10 +21,15 @@ 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;
 }
 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>>;
+declare const Html: import("react").ForwardRefExoticComponent<HTMLProps & import("react").RefAttributes<HTMLDivElement>>;
 export { HtmlContextDefault, HtmlContext, Html };

package/dist/components/html/index.js

@@ -1,9 +1,22 @@
-import { jsx } from 'react/jsx-runtime';
+import "./html.css";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
+import { Button } from '@kickstartds/base/lib/button';
+import './HtmlConsent.client.js';
+import '@kickstartds/core/lib/component';
 
-const HtmlContextDefault = forwardRef(({ html, className, component, ...props }, ref) => {
-    return (jsx("div", { ref: ref, className: classnames("c-html", className), dangerouslySetInnerHTML: { __html: html }, "ks-component": component, ...props }));
+const HtmlContextDefault = forwardRef(({ html, consent, consentText, consentBackgroundImage, consentButtonLabel, consentAspectRatio = "16:9", className, component, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: classnames("c-html", className), dangerouslySetInnerHTML: consent ? undefined : { __html: html }, "ks-component": component || (consent ? "dsa.html-consent" : undefined), ...props, children: consent ? (jsxs(Fragment, { children: [jsx("template", { dangerouslySetInnerHTML: { __html: html } }), 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: [jsx("p", { children: consentText }), jsx(Button, { type: "button", label: consentButtonLabel, className: "c-html__consent-button" })] })] })) : undefined }));
 });
 const HtmlContext = createContext(HtmlContextDefault);
 const Html = forwardRef((props, ref) => {

package/dist/components/image-story/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes } from "react";
-import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.js";
+import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
 declare const ImageStoryContextDefault: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 declare const ImageStoryContext: import("react").Context<import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const ImageStory: import("react").ForwardRefExoticComponent<ImageStoryProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

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

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

@@ -1,4 +1,4 @@
-import { PageProps } from "../../PageProps-83d399b4.js";
+import { PageProps } from "../../PageProps-aa29c554.js";
 import { FC, PropsWithChildren } from "react";
 declare const Page: FC<PropsWithChildren<PageProps>>;
 export { Page };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Sep 2024 11:08:24 GMT
+ * Generated on Wed, 11 Sep 2024 09:53:01 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);

package/dist/components/presets.json

@@ -102,14 +102,15 @@
     "id": "blog-blog-teaser--default",
     "group": "Blog/ Blog Teaser",
     "name": "Default",
-    "code": "<BlogTeaser\n  author={{\n    image: 'img/people/author-emily.png',\n    name: 'Jane Smith',\n    title: 'Senior AI Researcher'\n  }}\n  date=\"12/30/2022\"\n  headline=\"The Future of AI\"\n  image=\"img/close-up-young-business-team-working.png\"\n  link={{\n    url: 'https://example.com'\n  }}\n  readingTime=\"5 min read\"\n  tags={[\n    {\n      entry: 'Technology'\n    },\n    {\n      entry: 'AI'\n    }\n  ]}\n  teaserText=\"Dive into the future of AI in this detailed blog post. Discover how technology is rapidly evolving, the impact of AI on various industries, and what to expect in the coming years. Learn about the latest advancements, challenges, and the potential solutions that AI brings to the table.\"\n/>",
+    "code": "<BlogTeaser\n  author={{\n    image: 'img/people/author-emily.png',\n    name: 'Jane Smith',\n    title: 'Senior AI Researcher'\n  }}\n  date=\"12/30/2022\"\n  headline=\"The Future of AI\"\n  image=\"img/close-up-young-business-team-working.png\"\n  link={{\n    label: 'Read more',\n    url: 'https://example.com'\n  }}\n  readingTime=\"5 min read\"\n  tags={[\n    {\n      entry: 'Technology'\n    },\n    {\n      entry: 'AI'\n    }\n  ]}\n  teaserText=\"Dive into the future of AI in this detailed blog post. Discover how technology is rapidly evolving, the impact of AI on various industries, and what to expect in the coming years. Learn about the latest advancements, challenges, and the potential solutions that AI brings to the table.\"\n/>",
     "args": {
       "date": "12/30/2022",
       "headline": "The Future of AI",
       "teaserText": "Dive into the future of AI in this detailed blog post. Discover how technology is rapidly evolving, the impact of AI on various industries, and what to expect in the coming years. Learn about the latest advancements, challenges, and the potential solutions that AI brings to the table.",
       "image": "img/close-up-young-business-team-working.png",
       "link": {
-        "url": "https://example.com"
+        "url": "https://example.com",
+        "label": "Read more"
       },
       "readingTime": "5 min read",
       "author": {
@@ -2153,6 +2154,33 @@
     },
     "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-image-story--sticky-image-next-to-scrolling-text",
     "group": "Components/Image Story",

package/dist/tokens/themes.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Sep 2024 11:08:27 GMT
+ * Generated on Wed, 11 Sep 2024 09:53:03 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 Wed, 11 Sep 2024 11:08:31 GMT
+ * Generated on Wed, 11 Sep 2024 09:53:06 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 Wed, 11 Sep 2024 11:08:29 GMT
+ * Generated on Wed, 11 Sep 2024 09:53:05 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 Wed, 11 Sep 2024 11:08:33 GMT
+ * Generated on Wed, 11 Sep 2024 09:53:08 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 Wed, 11 Sep 2024 11:08:24 GMT
+ * Generated on Wed, 11 Sep 2024 09:53:01 GMT
  */
 
 :root, [ks-theme] {

package/dist/tokens/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 11 Sep 2024 11:08:25 GMT
+ * Generated on Wed, 11 Sep 2024 09:53:01 GMT
  */
 
 export const KsBackgroundColorAccentBase = "#230a2b";

package/package.json

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