@kickstartds/ds-agency-premium 1.5.26 → 1.6.0--canary.17.1001.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/footer/footer.css +2 -2
- package/dist/components/html/HtmlConsent.client.d.ts +5 -0
- package/dist/components/html/HtmlConsent.client.js +25 -0
- package/dist/components/html/html.css +20 -0
- package/dist/components/html/html.schema.dereffed.json +55 -0
- package/dist/components/html/html.schema.json +29 -2
- package/dist/components/html/index.d.ts +8 -2
- package/dist/components/html/index.js +16 -3
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +27 -0
- package/dist/tokens/themes.css +4 -4
- package/dist/tokens/tokens.css +1 -1
- package/dist/tokens/tokens.js +1 -1
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
--dsa-footer__link--font-weight: var(--dsa-link--font-weight);
|
|
11
11
|
--dsa-footer__link--color: var(--dsa-link--color);
|
|
12
12
|
--dsa-footer__link--text-tecoration: none;
|
|
13
|
-
--dsa-footer__link--text-
|
|
13
|
+
--dsa-footer__link--text-tecorationhover: underline;
|
|
14
14
|
--dsa-footer__logo--height: 1.5rem;
|
|
15
15
|
}
|
|
16
16
|
@media (min-width: 62em) {
|
|
@@ -57,6 +57,6 @@
|
|
|
57
57
|
text-decoration: var(--dsa-footer__link--text-tecoration, none);
|
|
58
58
|
}
|
|
59
59
|
.dsa-footer__link:not(.c-button):hover {
|
|
60
|
-
text-decoration: var(--dsa-footer__link--text-
|
|
60
|
+
text-decoration: var(--dsa-footer__link--text-tecoration-hover, underline);
|
|
61
61
|
color: var(--dsa-footer__link--color_hover, var(--dsa-link--color_hover));
|
|
62
62
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { define, Component } from '@kickstartds/core/lib/component';
|
|
2
|
+
|
|
3
|
+
const consentButtonSelector = ".c-html__consent-button";
|
|
4
|
+
class Html extends Component {
|
|
5
|
+
constructor(element) {
|
|
6
|
+
super(element);
|
|
7
|
+
const consentButton = element.querySelector(consentButtonSelector);
|
|
8
|
+
if (consentButton) {
|
|
9
|
+
const replaceHtml = () => {
|
|
10
|
+
const template = element.querySelector("template");
|
|
11
|
+
const clone = template?.content.cloneNode(true);
|
|
12
|
+
element.replaceChildren(clone);
|
|
13
|
+
consentButton.removeEventListener("click", replaceHtml);
|
|
14
|
+
};
|
|
15
|
+
consentButton.addEventListener("click", replaceHtml);
|
|
16
|
+
this.onDisconnect(() => {
|
|
17
|
+
consentButton.removeEventListener("click", replaceHtml);
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
Html.identifier = "dsa.html-consent";
|
|
23
|
+
define(Html.identifier, Html);
|
|
24
|
+
|
|
25
|
+
export { Html as default };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.c-html__consent {
|
|
2
|
+
color: var(--ks-text-color-default);
|
|
3
|
+
font: var(--ks-font-interface-m);
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
}
|
|
9
|
+
.c-html__consent--sixteen-to-nine {
|
|
10
|
+
aspect-ratio: 16/9;
|
|
11
|
+
}
|
|
12
|
+
.c-html__consent--sixteen-to-ten {
|
|
13
|
+
aspect-ratio: 16/10;
|
|
14
|
+
}
|
|
15
|
+
.c-html__consent--four-to-three {
|
|
16
|
+
aspect-ratio: 4/3;
|
|
17
|
+
}
|
|
18
|
+
.c-html__consent--square {
|
|
19
|
+
aspect-ratio: 1;
|
|
20
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/html.schema.json",
|
|
4
|
+
"title": "HTML",
|
|
5
|
+
"description": "Display raw HTML.",
|
|
6
|
+
"type": "object",
|
|
7
|
+
"properties": {
|
|
8
|
+
"html": {
|
|
9
|
+
"title": "HTML string",
|
|
10
|
+
"type": "string",
|
|
11
|
+
"examples": [
|
|
12
|
+
"<p style=\"color: var(--ks-text-color-default);\">Hello World</p>"
|
|
13
|
+
]
|
|
14
|
+
},
|
|
15
|
+
"consent": {
|
|
16
|
+
"title": "Show HTML after consent",
|
|
17
|
+
"type": "boolean",
|
|
18
|
+
"default": false
|
|
19
|
+
},
|
|
20
|
+
"consentText": {
|
|
21
|
+
"type": "string"
|
|
22
|
+
},
|
|
23
|
+
"consentButtonLabel": {
|
|
24
|
+
"type": "string"
|
|
25
|
+
},
|
|
26
|
+
"consentBackgroundImage": {
|
|
27
|
+
"type": "string",
|
|
28
|
+
"format": "image"
|
|
29
|
+
},
|
|
30
|
+
"consentAspectRatio": {
|
|
31
|
+
"type": "string",
|
|
32
|
+
"enum": [
|
|
33
|
+
"16:9",
|
|
34
|
+
"16:10",
|
|
35
|
+
"4:3",
|
|
36
|
+
"1:1"
|
|
37
|
+
],
|
|
38
|
+
"default": "16:9"
|
|
39
|
+
},
|
|
40
|
+
"className": {
|
|
41
|
+
"title": "Additional Classes",
|
|
42
|
+
"description": "Add additional css classes that should be applied to the element",
|
|
43
|
+
"type": "string"
|
|
44
|
+
},
|
|
45
|
+
"component": {
|
|
46
|
+
"title": "`ks-component` attribute",
|
|
47
|
+
"description": "Optional custom component identifier",
|
|
48
|
+
"type": "string"
|
|
49
|
+
},
|
|
50
|
+
"type": {
|
|
51
|
+
"const": "html"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"additionalProperties": false
|
|
55
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
-
"$id": "http://schema.
|
|
3
|
+
"$id": "http://schema.mydesignsystem.com/html.schema.json",
|
|
4
4
|
"title": "HTML",
|
|
5
5
|
"description": "Display raw HTML.",
|
|
6
6
|
"type": "object",
|
|
@@ -8,7 +8,34 @@
|
|
|
8
8
|
"html": {
|
|
9
9
|
"title": "HTML string",
|
|
10
10
|
"type": "string",
|
|
11
|
-
"examples": [
|
|
11
|
+
"examples": [
|
|
12
|
+
"<p style=\"color: var(--ks-text-color-default);\">Hello World</p>"
|
|
13
|
+
]
|
|
14
|
+
},
|
|
15
|
+
"consent": {
|
|
16
|
+
"title": "Show HTML after consent",
|
|
17
|
+
"type": "boolean",
|
|
18
|
+
"default": false
|
|
19
|
+
},
|
|
20
|
+
"consentText": {
|
|
21
|
+
"type": "string"
|
|
22
|
+
},
|
|
23
|
+
"consentButtonLabel": {
|
|
24
|
+
"type": "string"
|
|
25
|
+
},
|
|
26
|
+
"consentBackgroundImage": {
|
|
27
|
+
"type": "string",
|
|
28
|
+
"format": "image"
|
|
29
|
+
},
|
|
30
|
+
"consentAspectRatio": {
|
|
31
|
+
"type": "string",
|
|
32
|
+
"enum": [
|
|
33
|
+
"16:9",
|
|
34
|
+
"16:10",
|
|
35
|
+
"4:3",
|
|
36
|
+
"1:1"
|
|
37
|
+
],
|
|
38
|
+
"default": "16:9"
|
|
12
39
|
},
|
|
13
40
|
"className": {
|
|
14
41
|
"title": "Additional Classes",
|
|
@@ -4,9 +4,10 @@ import { HTMLAttributes } from "react";
|
|
|
4
4
|
/**
|
|
5
5
|
* This file was automatically generated by json-schema-to-typescript.
|
|
6
6
|
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
|
7
|
-
* and run
|
|
7
|
+
* and run json-schema-to-typescript to regenerate this file.
|
|
8
8
|
*/
|
|
9
9
|
type HTMLString = string;
|
|
10
|
+
type ShowHTMLAfterConsent = boolean;
|
|
10
11
|
/**
|
|
11
12
|
* Add additional css classes that should be applied to the element
|
|
12
13
|
*/
|
|
@@ -20,10 +21,15 @@ type KsComponentAttribute = string;
|
|
|
20
21
|
*/
|
|
21
22
|
interface HTMLProps {
|
|
22
23
|
html?: HTMLString;
|
|
24
|
+
consent?: ShowHTMLAfterConsent;
|
|
25
|
+
consentText?: string;
|
|
26
|
+
consentButtonLabel?: string;
|
|
27
|
+
consentBackgroundImage?: string;
|
|
28
|
+
consentAspectRatio?: "16:9" | "16:10" | "4:3" | "1:1";
|
|
23
29
|
className?: AdditionalClasses;
|
|
24
30
|
component?: KsComponentAttribute;
|
|
25
31
|
}
|
|
26
32
|
declare const HtmlContextDefault: import("react").ForwardRefExoticComponent<HTMLProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
27
33
|
declare const HtmlContext: import("react").Context<import("react").ForwardRefExoticComponent<HTMLProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
28
|
-
declare const Html: import("react").ForwardRefExoticComponent<HTMLProps &
|
|
34
|
+
declare const Html: import("react").ForwardRefExoticComponent<HTMLProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
29
35
|
export { HtmlContextDefault, HtmlContext, Html };
|
|
@@ -1,9 +1,22 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "./html.css";
|
|
2
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
3
|
import { forwardRef, createContext, useContext } from 'react';
|
|
3
4
|
import classnames from 'classnames';
|
|
5
|
+
import { Button } from '@kickstartds/base/lib/button';
|
|
6
|
+
import './HtmlConsent.client.js';
|
|
7
|
+
import '@kickstartds/core/lib/component';
|
|
4
8
|
|
|
5
|
-
const HtmlContextDefault = forwardRef(({ html, className, component, ...props }, ref) => {
|
|
6
|
-
return (jsx("div", { ref: ref, className: classnames("c-html", className), dangerouslySetInnerHTML: { __html: html }, "ks-component": component, ...props })
|
|
9
|
+
const HtmlContextDefault = forwardRef(({ html, consent, consentText, consentBackgroundImage, consentButtonLabel, consentAspectRatio = "16:9", className, component, ...props }, ref) => {
|
|
10
|
+
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: {
|
|
11
|
+
backgroundImage: consentBackgroundImage
|
|
12
|
+
? `url(${consentBackgroundImage})`
|
|
13
|
+
: undefined,
|
|
14
|
+
}, className: classnames("c-html__consent", {
|
|
15
|
+
"c-html__consent--sixteen-to-nine": consentAspectRatio === "16:9",
|
|
16
|
+
"c-html__consent--sixteen-to-ten": consentAspectRatio === "16:10",
|
|
17
|
+
"c-html__consent--four-to-three": consentAspectRatio === "4:3",
|
|
18
|
+
"c-html__consent--square": consentAspectRatio === "1:1",
|
|
19
|
+
}), children: [jsx("p", { children: consentText }), jsx(Button, { type: "button", label: consentButtonLabel, className: "c-html__consent-button" })] })] })) : undefined }));
|
|
7
20
|
});
|
|
8
21
|
const HtmlContext = createContext(HtmlContextDefault);
|
|
9
22
|
const Html = forwardRef((props, ref) => {
|
|
@@ -2154,6 +2154,33 @@
|
|
|
2154
2154
|
},
|
|
2155
2155
|
"screenshot": "img/screenshots/components-hero--text-box-on-full-screen.png"
|
|
2156
2156
|
},
|
|
2157
|
+
{
|
|
2158
|
+
"id": "components-html--html",
|
|
2159
|
+
"group": "Components/HTML",
|
|
2160
|
+
"name": "HTML",
|
|
2161
|
+
"code": "<Html\n consentAspectRatio=\"16:9\"\n html=\"<p style="color: var(--ks-text-color-default);">Hello World</p>\"\n/>",
|
|
2162
|
+
"args": {
|
|
2163
|
+
"html": "<p style=\"color: var(--ks-text-color-default);\">Hello World</p>",
|
|
2164
|
+
"consent": false,
|
|
2165
|
+
"consentAspectRatio": "16:9"
|
|
2166
|
+
},
|
|
2167
|
+
"screenshot": "img/screenshots/components-html--html.png"
|
|
2168
|
+
},
|
|
2169
|
+
{
|
|
2170
|
+
"id": "components-html--with-consent",
|
|
2171
|
+
"group": "Components/HTML",
|
|
2172
|
+
"name": "WithConsent",
|
|
2173
|
+
"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="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>\"\n/>",
|
|
2174
|
+
"args": {
|
|
2175
|
+
"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>",
|
|
2176
|
+
"consent": true,
|
|
2177
|
+
"consentAspectRatio": "16:9",
|
|
2178
|
+
"consentText": "would you like to watch the youtube video?",
|
|
2179
|
+
"consentButtonLabel": "yes!",
|
|
2180
|
+
"consentBackgroundImage": "img/02.jpg"
|
|
2181
|
+
},
|
|
2182
|
+
"screenshot": "img/screenshots/components-html--with-consent.png"
|
|
2183
|
+
},
|
|
2157
2184
|
{
|
|
2158
2185
|
"id": "components-image-story--sticky-image-next-to-scrolling-text",
|
|
2159
2186
|
"group": "Components/Image Story",
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Wed, 11 Sep 2024 09:53:03 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root [ks-theme=business] {
|
|
6
6
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -2727,7 +2727,7 @@
|
|
|
2727
2727
|
}
|
|
2728
2728
|
/**
|
|
2729
2729
|
* Do not edit directly
|
|
2730
|
-
* Generated on
|
|
2730
|
+
* Generated on Wed, 11 Sep 2024 09:53:06 GMT
|
|
2731
2731
|
*/
|
|
2732
2732
|
:root [ks-theme=google] {
|
|
2733
2733
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -5458,7 +5458,7 @@
|
|
|
5458
5458
|
}
|
|
5459
5459
|
/**
|
|
5460
5460
|
* Do not edit directly
|
|
5461
|
-
* Generated on
|
|
5461
|
+
* Generated on Wed, 11 Sep 2024 09:53:05 GMT
|
|
5462
5462
|
*/
|
|
5463
5463
|
:root [ks-theme=ngo] {
|
|
5464
5464
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -8459,7 +8459,7 @@
|
|
|
8459
8459
|
}
|
|
8460
8460
|
/**
|
|
8461
8461
|
* Do not edit directly
|
|
8462
|
-
* Generated on
|
|
8462
|
+
* Generated on Wed, 11 Sep 2024 09:53:08 GMT
|
|
8463
8463
|
*/
|
|
8464
8464
|
:root [ks-theme=telekom] {
|
|
8465
8465
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
package/dist/tokens/tokens.css
CHANGED
package/dist/tokens/tokens.js
CHANGED