@kickstartds/ds-agency-premium 1.3.47 → 1.3.49
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/{BlogPostProps-0910f130.d.ts → BlogPostProps-e1cbd5d3.d.ts} +8 -2
- package/dist/components/blog-post/blog-post.schema.dereffed.json +3095 -1
- package/dist/components/blog-post/blog-post.schema.json +9 -1
- package/dist/components/blog-post/index.d.ts +3 -6
- package/dist/components/blog-post/index.js +1 -1
- package/dist/components/cta/cta.css +37 -37
- package/dist/components/feature/index.js +7 -7
- package/dist/components/features/features.css +26 -28
- package/dist/components/features/index.js +1 -1
- package/dist/components/image/image.css +5 -5
- package/dist/components/image/index.js +1 -1
- package/dist/components/index/index.d.ts +2 -2
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +129 -1
- package/dist/components/section/index.d.ts +1 -1
- 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
- /package/dist/{SectionProps-93230a76.d.ts → SectionProps-83d399b4.d.ts} +0 -0
|
@@ -15,9 +15,17 @@
|
|
|
15
15
|
"content": {
|
|
16
16
|
"type": "string",
|
|
17
17
|
"title": "Text",
|
|
18
|
-
"description": "Body text for the blog post",
|
|
18
|
+
"description": "Body text for the blog post, overwrites sections if present",
|
|
19
19
|
"format": "markdown"
|
|
20
20
|
},
|
|
21
|
+
"section": {
|
|
22
|
+
"type": "array",
|
|
23
|
+
"title": "Blog Sections",
|
|
24
|
+
"description": "Collection of sections (with their contents) to render on the blog post",
|
|
25
|
+
"items": {
|
|
26
|
+
"$ref": "http://schema.mydesignsystem.com/section.schema.json"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
21
29
|
"cta": {
|
|
22
30
|
"$ref": "http://schema.mydesignsystem.com/cta.schema.json"
|
|
23
31
|
},
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
declare const BlogPost:
|
|
4
|
-
({ head, content, aside, cta }: BlogPostProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
-
displayName: string;
|
|
6
|
-
};
|
|
1
|
+
import { BlogPostProps } from "../../BlogPostProps-e1cbd5d3.js";
|
|
2
|
+
import { FC, PropsWithChildren } from "react";
|
|
3
|
+
declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
|
|
7
4
|
export { BlogPost };
|
|
@@ -19,7 +19,7 @@ import '@kickstartds/base/lib/button';
|
|
|
19
19
|
import '../button-group/index.js';
|
|
20
20
|
import '@kickstartds/base/lib/button-group';
|
|
21
21
|
|
|
22
|
-
const BlogPost = ({ head, content, aside, cta }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), jsx(Text, { text: content })] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Section, { children: jsx(Cta, { ...cta }) }))] }));
|
|
22
|
+
const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), children || jsx(Text, { text: content })] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Section, { children: jsx(Cta, { ...cta }) }))] }));
|
|
23
23
|
BlogPost.displayName = "BlogPost";
|
|
24
24
|
|
|
25
25
|
export { BlogPost };
|
|
@@ -15,27 +15,19 @@
|
|
|
15
15
|
--dsa-cta_highlight-text__copy--font: var(--ks-font-copy-l);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
.dsa-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
|
|
20
|
-
.dsa-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
|
|
21
|
-
padding-top: calc(var(--dsa-header--height) + var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)));
|
|
22
|
-
z-index: 1;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.c-storytelling.dsa-cta {
|
|
18
|
+
.dsa-cta.c-storytelling {
|
|
27
19
|
--c-storytelling--padding-ratio: 2;
|
|
28
20
|
--c-storytelling--horizontal-padding: var(--l-section--content-padding);
|
|
29
21
|
justify-content: center;
|
|
30
22
|
align-items: center;
|
|
31
23
|
padding: 0;
|
|
32
24
|
}
|
|
33
|
-
.c-storytelling
|
|
25
|
+
.dsa-cta.c-storytelling--color-neutral {
|
|
34
26
|
--dsa-cta__copy--color: var(--dsa-cta_color-neutral__copy--color, var(--ks-text-color-default));
|
|
35
27
|
--dsa-cta__headline--color: var(--dsa-cta_color-neutral__headline--color, var(--ks-text-color-default));
|
|
36
28
|
--dsa-cta__subheadline--color: var(--dsa-cta_color-neutral__subheadline--color, var(--ks-text-color-default));
|
|
37
29
|
}
|
|
38
|
-
.c-storytelling
|
|
30
|
+
.dsa-cta.c-storytelling--highlight-text {
|
|
39
31
|
--dsa-cta__copy--font: var(--dsa-cta_highlight-text__copy--font, var(--ks-font-copy-l));
|
|
40
32
|
--dsa-cta__headline--font: var(--dsa-cta_highlight-text__headline--font, var(--dsa-headline_h1--font));
|
|
41
33
|
--dsa-cta__subheadline--font: var(
|
|
@@ -43,90 +35,98 @@
|
|
|
43
35
|
var(--dsa-headline_h1__subheadline--font)
|
|
44
36
|
);
|
|
45
37
|
}
|
|
46
|
-
.
|
|
38
|
+
.dsa-cta.c-storytelling.c-storytelling--full {
|
|
47
39
|
--c-storytelling--padding-ratio: 1;
|
|
48
40
|
}
|
|
49
|
-
.
|
|
41
|
+
.dsa-cta.c-storytelling.c-storytelling--full.c-storytelling--order-desktop-image-last .c-storytelling__box {
|
|
50
42
|
padding-left: var(--dsa-cta--horizontal-padding);
|
|
51
43
|
}
|
|
52
|
-
.c-storytelling.dsa-cta
|
|
44
|
+
.dsa-cta.c-storytelling.dsa-cta--align-top {
|
|
53
45
|
align-items: flex-start;
|
|
54
46
|
}
|
|
55
|
-
.c-storytelling.dsa-cta
|
|
47
|
+
.dsa-cta.c-storytelling.dsa-cta--align-bottom {
|
|
56
48
|
align-items: flex-end;
|
|
57
49
|
}
|
|
58
|
-
.c-storytelling.dsa-cta
|
|
50
|
+
.dsa-cta.c-storytelling.dsa-cta--highlight-text .c-storytelling__text {
|
|
59
51
|
font: var(--ks-font-copy-l);
|
|
60
52
|
color: var(--ks-color-fg);
|
|
61
53
|
}
|
|
62
|
-
.c-storytelling
|
|
54
|
+
.dsa-cta.c-storytelling .c-storytelling__box {
|
|
63
55
|
width: 100%;
|
|
64
56
|
padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
|
|
65
57
|
}
|
|
66
58
|
@container storytelling (max-width: 640px) {
|
|
67
|
-
.c-storytelling
|
|
59
|
+
.dsa-cta.c-storytelling .c-storytelling__box {
|
|
68
60
|
padding-top: calc(var(--dsa-cta--vertical-padding, var(--l-section--space-default)) / var(--c-storytelling--padding-ratio));
|
|
69
61
|
}
|
|
70
|
-
.c-storytelling
|
|
62
|
+
.dsa-cta.c-storytelling .c-storytelling__box:only-child {
|
|
71
63
|
padding-top: var(--dsa-cta--vertical-padding, var(--l-section--space-default));
|
|
72
64
|
}
|
|
73
65
|
}
|
|
74
|
-
.c-storytelling
|
|
66
|
+
.dsa-cta.c-storytelling .c-storytelling__box:only-child {
|
|
75
67
|
padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
|
|
76
68
|
}
|
|
77
|
-
.c-storytelling
|
|
69
|
+
.dsa-cta.c-storytelling .c-storytelling__box__content {
|
|
78
70
|
max-width: 100%;
|
|
79
71
|
}
|
|
80
|
-
.c-storytelling
|
|
72
|
+
.dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__headline {
|
|
81
73
|
font: var(--dsa-cta__headline--font, var(--dsa-headline_h2--font, var(--ks-font-display-xl)));
|
|
82
74
|
color: var(--dsa-cta__headline--color, var(--ks-text-color-display));
|
|
83
75
|
font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-semi-bold));
|
|
84
76
|
}
|
|
85
|
-
.c-storytelling
|
|
77
|
+
.dsa-cta.c-storytelling .c-storytelling__box .dsa-headline__subheadline {
|
|
86
78
|
font: var(--dsa-cta__subheadline--font, var(--dsa-headline_h2__subheadline--font, var(--ks-font-display-xl)));
|
|
87
79
|
color: var(--dsa-cta__subheadline--color, var(--ks-text-color-primary));
|
|
88
80
|
font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-medium));
|
|
89
81
|
}
|
|
90
|
-
.c-storytelling
|
|
82
|
+
.dsa-cta.c-storytelling .c-storytelling__box .c-rich-text {
|
|
91
83
|
font: var(--dsa-cta__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
|
|
92
84
|
color: var(--dsa-cta__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-copy)));
|
|
93
85
|
}
|
|
94
|
-
.c-storytelling
|
|
86
|
+
.dsa-cta.c-storytelling .c-storytelling__box:only-child {
|
|
95
87
|
--dsa-cta--horizontal-padding: var(--l-section--content-padding);
|
|
96
88
|
}
|
|
97
|
-
.c-storytelling
|
|
89
|
+
.dsa-cta.c-storytelling .c-storytelling__image {
|
|
98
90
|
margin: 0;
|
|
99
91
|
}
|
|
100
92
|
@container storytelling (min-width: 640px) {
|
|
101
|
-
.
|
|
93
|
+
.dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__image {
|
|
102
94
|
padding-left: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
|
|
103
95
|
}
|
|
104
|
-
.
|
|
96
|
+
.dsa-cta.c-storytelling.c-storytelling--order-desktop-image-last .c-storytelling__box {
|
|
105
97
|
padding-right: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
|
|
106
98
|
}
|
|
107
|
-
.c-storytelling
|
|
99
|
+
.dsa-cta.c-storytelling .c-storytelling__box {
|
|
108
100
|
padding-left: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
|
|
109
101
|
}
|
|
110
|
-
.c-storytelling
|
|
102
|
+
.dsa-cta.c-storytelling .c-storytelling__box__content--center .c-button-group {
|
|
111
103
|
justify-content: center;
|
|
112
104
|
}
|
|
113
|
-
.c-storytelling
|
|
105
|
+
.dsa-cta.c-storytelling .c-storytelling__box:only-child {
|
|
114
106
|
width: 100%;
|
|
115
107
|
max-width: calc(var(--l-section--content-width-default) - var(--l-section--content-padding) * var(--c-storytelling--padding-ratio));
|
|
116
108
|
}
|
|
117
|
-
.c-storytelling
|
|
109
|
+
.dsa-cta.c-storytelling > .c-storytelling__image {
|
|
118
110
|
padding: var(--dsa-cta--vertical-padding, var(--l-section--space-default)) var(--dsa-cta--horizontal-padding, var(--l-section--content-padding));
|
|
119
111
|
padding-right: calc(var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)) / var(--c-storytelling--padding-ratio));
|
|
120
112
|
}
|
|
121
|
-
.
|
|
113
|
+
.dsa-cta.c-storytelling.c-storytelling--full > .c-storytelling__image {
|
|
122
114
|
padding: 0;
|
|
123
115
|
}
|
|
124
|
-
.c-storytelling
|
|
125
|
-
.c-storytelling
|
|
116
|
+
.dsa-cta.c-storytelling > .c-storytelling__image,
|
|
117
|
+
.dsa-cta.c-storytelling > .c-storytelling__box {
|
|
126
118
|
max-width: calc(var(--l-section--content-width-wide) / 2);
|
|
127
119
|
}
|
|
128
|
-
.c-storytelling.dsa-cta
|
|
129
|
-
.c-storytelling.dsa-cta
|
|
120
|
+
.dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__image,
|
|
121
|
+
.dsa-cta.c-storytelling.dsa-cta--full-width > .c-storytelling__box {
|
|
130
122
|
max-width: 100%;
|
|
131
123
|
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
@media (min-width: 640px) {
|
|
127
|
+
.dsa-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
|
|
128
|
+
.dsa-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
|
|
129
|
+
padding-top: calc(var(--dsa-header--height) + var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)));
|
|
130
|
+
z-index: 1;
|
|
131
|
+
}
|
|
132
132
|
}
|
|
@@ -6,17 +6,17 @@ import { Button } from '../button/index.js';
|
|
|
6
6
|
import { Link } from '@kickstartds/base/lib/link';
|
|
7
7
|
import '@kickstartds/base/lib/button';
|
|
8
8
|
|
|
9
|
-
const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon, cta: { toggle = true, style: ctaStyle = "link", target, label = "Read more", }, ...rest }, ref) => (jsxs("div", { ...rest, ref: ref, className: classnames(`
|
|
10
|
-
? `stack
|
|
9
|
+
const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon, cta: { toggle = true, style: ctaStyle = "link", target, label = "Read more", }, ...rest }, ref) => (jsxs("div", { ...rest, ref: ref, className: classnames(`dsa-feature dsa-feature--${style === `stack`
|
|
10
|
+
? `stack dsa-feature--large`
|
|
11
11
|
: style === `besideSmall`
|
|
12
|
-
? `beside
|
|
12
|
+
? `beside dsa-feature--small`
|
|
13
13
|
: style === `besideLarge`
|
|
14
|
-
? `beside
|
|
14
|
+
? `beside dsa-feature--large`
|
|
15
15
|
: style === `intext`
|
|
16
|
-
? `intext
|
|
16
|
+
? `intext dsa-feature--small`
|
|
17
17
|
: style === `centered`
|
|
18
|
-
? `centered
|
|
19
|
-
: `${style}`}`), children: [jsxs("div", { className: "
|
|
18
|
+
? `centered dsa-feature--large`
|
|
19
|
+
: `${style}`}`), children: [jsxs("div", { className: "dsa-feature__header", children: [icon && jsx(Icon, { className: "dsa-feature__icon", icon: icon }), jsx("span", { className: "dsa-feature__title", children: title })] }), text || ctaStyle === "intext" ? (jsxs("p", { className: "dsa-feature__text", children: [text, ctaStyle === "intext" && toggle ? (jsxs(Fragment, { children: [" ", jsx(Link, { href: target, children: label ? label : "See more" })] })) : ("")] })) : (""), toggle && (ctaStyle === "link" || ctaStyle === "button") && (jsx("div", { className: "dsa-feature__cta", children: ctaStyle === "link" ? (jsxs(Link, { className: "dsa-feature__link", href: target, children: [label ? label : "See more", jsx(Icon, { icon: "arrow-right" })] })) : ctaStyle === "button" ? (jsx(Button, { className: "dsa-feature__button", size: "small", target: target, label: label ? label : "See more" })) : ("") }))] })));
|
|
20
20
|
const FeatureContext = createContext(FeatureContextDefault);
|
|
21
21
|
const Feature = forwardRef((props, ref) => {
|
|
22
22
|
const Component = useContext(FeatureContext);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.dsa-features {
|
|
2
2
|
--dsa-features--gap-vertical: var(--ks-spacing-stack-l);
|
|
3
3
|
--dsa-features--gap-horizontal: var(--ks-spacing-inline-m);
|
|
4
4
|
--dsa-feature__title--color: var(--dsa-topic--color);
|
|
@@ -8,9 +8,7 @@
|
|
|
8
8
|
--dsa-feature__copy--font: var(--ks-font-copy-s);
|
|
9
9
|
--dsa-feature__link-font: var(--ks-font-copy-s);
|
|
10
10
|
--dsa-feature__icon--color: var(--ks-text-color-primary);
|
|
11
|
-
--dsa-feature_small__icon--size: calc(
|
|
12
|
-
var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m)
|
|
13
|
-
);
|
|
11
|
+
--dsa-feature_small__icon--size: calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m));
|
|
14
12
|
--dsa-feature_large__icon--size: calc(var(--ks-font-size-copy-m) * 2.5);
|
|
15
13
|
--dsa-feature_small--gap: var(--ks-spacing-stack-xs);
|
|
16
14
|
--dsa-feature_large--gap: var(--ks-spacing-stack-s);
|
|
@@ -18,42 +16,42 @@
|
|
|
18
16
|
--dsa-feature_large__icon--gap: var(--ks-spacing-s);
|
|
19
17
|
}
|
|
20
18
|
|
|
21
|
-
.
|
|
19
|
+
.dsa-features {
|
|
22
20
|
gap: var(--dsa-features--gap-vertical, var(--ks-spacing-stack-l)) var(--dsa-features--gap-horizontal, var(--ks-spacing-inline-m));
|
|
23
21
|
}
|
|
24
|
-
.
|
|
22
|
+
.dsa-features--list {
|
|
25
23
|
display: flex;
|
|
26
24
|
flex-direction: column;
|
|
27
25
|
gap: var(--dsa-features--gap-vertical);
|
|
28
26
|
}
|
|
29
|
-
.
|
|
27
|
+
.dsa-features--large-tiles {
|
|
30
28
|
display: grid;
|
|
31
29
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
32
30
|
}
|
|
33
|
-
.
|
|
31
|
+
.dsa-features--large-tiles .dsa-feature {
|
|
34
32
|
flex-basis: 300px;
|
|
35
33
|
flex-grow: 1;
|
|
36
34
|
flex-shrink: 0;
|
|
37
35
|
}
|
|
38
|
-
.
|
|
36
|
+
.dsa-features--small-tiles {
|
|
39
37
|
display: grid;
|
|
40
38
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
41
39
|
}
|
|
42
|
-
.l-section--align-center .
|
|
40
|
+
.l-section--align-center .dsa-features--small-tiles {
|
|
43
41
|
justify-content: center;
|
|
44
42
|
}
|
|
45
|
-
.
|
|
43
|
+
.dsa-features .dsa-feature {
|
|
46
44
|
display: flex;
|
|
47
45
|
position: relative;
|
|
48
46
|
flex-direction: column;
|
|
49
47
|
gap: var(--dsa-feature--gap);
|
|
50
48
|
}
|
|
51
|
-
.
|
|
49
|
+
.dsa-features .dsa-feature--large {
|
|
52
50
|
--dsa-feature__icon--size: var(--dsa-feature_large__icon--size, calc(var(--ks-font-size-copy-m) * 2.5));
|
|
53
51
|
--dsa-feature__icon--gap: var(--dsa-feature_large__icon--gap, var(--ks-spacing-xs));
|
|
54
52
|
--dsa-feature--gap: var(--dsa-feature_large--gap, var(--ks-spacing-stack-s));
|
|
55
53
|
}
|
|
56
|
-
.
|
|
54
|
+
.dsa-features .dsa-feature--small {
|
|
57
55
|
--dsa-feature__icon--size: var(
|
|
58
56
|
--dsa-feature_small__icon--size,
|
|
59
57
|
calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m))
|
|
@@ -61,67 +59,67 @@
|
|
|
61
59
|
--dsa-feature__icon--gap: var(--dsa-feature_small__icon--gap, var(--ks-spacing-xs));
|
|
62
60
|
--dsa-feature--gap: var(--dsa-feature_small--gap, var(--ks-spacing-stack-xs));
|
|
63
61
|
}
|
|
64
|
-
.
|
|
62
|
+
.dsa-features .dsa-feature--beside {
|
|
65
63
|
padding-left: calc(var(--dsa-feature__icon--size) + var(--dsa-feature__icon--gap));
|
|
66
64
|
}
|
|
67
|
-
.
|
|
65
|
+
.dsa-features .dsa-feature--beside .dsa-feature__icon {
|
|
68
66
|
position: absolute;
|
|
69
67
|
top: 0;
|
|
70
68
|
left: 0;
|
|
71
69
|
}
|
|
72
|
-
.
|
|
70
|
+
.dsa-features .dsa-feature--stack .dsa-feature__header {
|
|
73
71
|
display: flex;
|
|
74
72
|
flex-direction: column;
|
|
75
73
|
align-items: flex-start;
|
|
76
74
|
}
|
|
77
|
-
.
|
|
75
|
+
.dsa-features .dsa-feature--centered .dsa-feature__header {
|
|
78
76
|
display: flex;
|
|
79
77
|
flex-direction: column;
|
|
80
78
|
align-items: center;
|
|
81
79
|
}
|
|
82
|
-
.
|
|
83
|
-
.
|
|
80
|
+
.dsa-features .dsa-feature--centered .dsa-feature__title,
|
|
81
|
+
.dsa-features .dsa-feature--centered .dsa-feature__text {
|
|
84
82
|
text-align: center;
|
|
85
83
|
}
|
|
86
|
-
.
|
|
84
|
+
.dsa-features .dsa-feature--centered .dsa-feature__cta {
|
|
87
85
|
display: flex;
|
|
88
86
|
justify-content: center;
|
|
89
87
|
}
|
|
90
|
-
.
|
|
88
|
+
.dsa-features .dsa-feature__header {
|
|
91
89
|
display: flex;
|
|
92
90
|
align-items: center;
|
|
93
91
|
gap: var(--dsa-feature__icon--gap);
|
|
94
92
|
}
|
|
95
|
-
.
|
|
93
|
+
.dsa-features .dsa-feature__title {
|
|
96
94
|
font: var(--dsa-feature__title--font, var(--ks-font-interface-m));
|
|
97
95
|
color: var(--dsa-feature__title--color, var(--ks-topic-color));
|
|
98
96
|
font-family: var(--dsa-feature__title--font-family, var(--ks-font-family-display));
|
|
99
97
|
font-weight: var(--dsa-feature__title--font-weight, var(--ks-font-weight-semi-bold));
|
|
100
98
|
}
|
|
101
|
-
.
|
|
99
|
+
.dsa-features .dsa-feature__text {
|
|
102
100
|
color: var(--dsa-feature__copy--color, var(--dsa-rich-text-color), var(--ks-text-color-default));
|
|
103
101
|
font: var(--dsa-feature__copy--font, var(--ks-font-copy-s));
|
|
104
102
|
margin: 0;
|
|
105
103
|
}
|
|
106
|
-
.
|
|
104
|
+
.dsa-features .dsa-feature__icon {
|
|
107
105
|
color: var(--dsa-feature__icon--color, var(--ks-text-color-primary));
|
|
108
106
|
width: var(--dsa-feature__icon--size);
|
|
109
107
|
height: var(--dsa-feature__icon--size);
|
|
110
108
|
}
|
|
111
|
-
.
|
|
109
|
+
.dsa-features .dsa-feature__cta {
|
|
112
110
|
margin-top: auto;
|
|
113
111
|
}
|
|
114
|
-
.
|
|
112
|
+
.dsa-features .dsa-feature__link {
|
|
115
113
|
font: var(--dsa-feature__link-font, var(--ks-font-copy-s));
|
|
116
114
|
display: flex;
|
|
117
115
|
align-items: center;
|
|
118
116
|
gap: var(--ks-spacing-xxs);
|
|
119
117
|
width: fit-content;
|
|
120
118
|
}
|
|
121
|
-
.
|
|
119
|
+
.dsa-features .dsa-feature__link .icon {
|
|
122
120
|
width: 1.125em;
|
|
123
121
|
height: 1.125em;
|
|
124
122
|
}
|
|
125
|
-
.
|
|
123
|
+
.dsa-features .dsa-feature__button {
|
|
126
124
|
margin-top: calc(var(--dsa-feature--gap) * 0.5);
|
|
127
125
|
}
|
|
@@ -11,7 +11,7 @@ import '@kickstartds/base/lib/link';
|
|
|
11
11
|
const FeaturesContextDefault = forwardRef(({ layout = "largeTiles", ctas = {
|
|
12
12
|
style: "link",
|
|
13
13
|
toggle: true,
|
|
14
|
-
}, style = "intext", feature: features = [], ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: classnames(`
|
|
14
|
+
}, style = "intext", feature: features = [], ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: classnames(`dsa-features dsa-features--${layout === "largeTiles"
|
|
15
15
|
? "large-tiles"
|
|
16
16
|
: layout === "smallTiles"
|
|
17
17
|
? "small-tiles"
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
.
|
|
1
|
+
.dsa-image {
|
|
2
2
|
--c-image--ratio-square: 1/1;
|
|
3
3
|
--c-image--ratio-wide: 4/3;
|
|
4
4
|
--c-image--ratio-landscape: 16/9;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
.
|
|
7
|
+
.dsa-image {
|
|
8
8
|
object-fit: cover;
|
|
9
9
|
}
|
|
10
|
-
.
|
|
10
|
+
.dsa-image--square {
|
|
11
11
|
aspect-ratio: var(--c-image--ratio-square);
|
|
12
12
|
}
|
|
13
|
-
.
|
|
13
|
+
.dsa-image--wide {
|
|
14
14
|
aspect-ratio: var(--c-image--ratio-wide);
|
|
15
15
|
}
|
|
16
|
-
.
|
|
16
|
+
.dsa-image--landscape {
|
|
17
17
|
aspect-ratio: var(--c-image--ratio-landscape);
|
|
18
18
|
}
|
|
@@ -4,7 +4,7 @@ import classnames from 'classnames';
|
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
5
|
import { PictureContextDefault, PictureContext } from '@kickstartds/base/lib/picture';
|
|
6
6
|
|
|
7
|
-
const Image = forwardRef(({ src, srcSet, alt, width, height, aspectRatio, className, id, itemProp, style, lazy, sources, pictureClassName, ...props }, ref) => (jsx(PictureContextDefault, { ...props, src: src, srcSet: srcSet, alt: alt, width: width, height: height, id: id, itemProp: itemProp, style: style, lazy: lazy, sources: sources, pictureClassName: pictureClassName, ref: ref, className: classnames("
|
|
7
|
+
const Image = forwardRef(({ src, srcSet, alt, width, height, aspectRatio, className, id, itemProp, style, lazy, sources, pictureClassName, ...props }, ref) => (jsx(PictureContextDefault, { ...props, src: src, srcSet: srcSet, alt: alt, width: width, height: height, id: id, itemProp: itemProp, style: style, lazy: lazy, sources: sources, pictureClassName: pictureClassName, ref: ref, className: classnames("dsa-image", aspectRatio !== "unset" && `dsa-image--${aspectRatio}`, className) })));
|
|
8
8
|
Image.displayName = "Image";
|
|
9
9
|
const ImageProvider = (props) => (jsx(PictureContext.Provider, { ...props, value: Image }));
|
|
10
10
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
|
5
5
|
* and run json-schema-to-typescript to regenerate this file.
|
|
6
6
|
*/
|
|
7
|
-
import { SectionProps } from "../../SectionProps-
|
|
7
|
+
import { SectionProps } from "../../SectionProps-83d399b4.js";
|
|
8
8
|
import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
|
|
9
9
|
/* eslint-disable */
|
|
10
10
|
/**
|
|
@@ -72,6 +72,6 @@ interface SettingsProps {
|
|
|
72
72
|
*/
|
|
73
73
|
seo: SeoProps;
|
|
74
74
|
}
|
|
75
|
-
export * from "../../BlogPostProps-
|
|
75
|
+
export * from "../../BlogPostProps-e1cbd5d3.js";
|
|
76
76
|
export * from "../../BlogOverviewProps-f385fc47.js";
|
|
77
77
|
export { Sections, ToggleFloating, ToggleInverted, ToggleInverted1, PageProps, Header, Footer, SettingsProps };
|
|
@@ -315,7 +315,7 @@
|
|
|
315
315
|
"id": "pages-archetypes--blog-post",
|
|
316
316
|
"group": "Pages/Archetypes",
|
|
317
317
|
"name": "BlogPost",
|
|
318
|
-
"code": "<BlogPost\n aside={{\n author: {\n byline: 'Senior Developer',\n email: 'Jane.doe@example.com',\n image: 'img/people/author-emily.png',\n name: 'Jane Doe',\n twitter: 'Janedoe'\n },\n date: '12/30/2022',\n readingTime: '5 min read',\n socialSharing: [\n {\n href: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog',\n icon: 'twitter',\n title: 'Share on Twitter'\n },\n {\n href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline',\n icon: 'linkedin',\n title: 'Share on LinkedIn'\n }\n ]\n }}\n content=\"\n## Introduction\nThe future of **ArtiEficial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n \"\n cta={{\n buttons: [\n {\n icon: 'person',\n label: 'Contact Us',\n target: '#'\n },\n {\n icon: 'date',\n label: 'Learn More',\n target: '#'\n }\n ],\n colorNeutral: false,\n contentAlign: 'center',\n fullWidth: false,\n headline: 'Ready to Transform Your Development Process?',\n highlightText: false,\n image: {\n padding: true\n },\n order: {\n desktopImageLast: true,\n mobileImageLast: false\n },\n sub: 'Start your journey today.',\n text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n textAlign: 'center'\n }}\n head={{\n date: '12/30/2022',\n headline: 'The Future of AI: A Glimpse into the Unseen',\n image: 'img/close-up-young-business-team-working.png',\n tags: [\n 'Technology',\n 'AI'\n ]\n }}\n/>",
|
|
318
|
+
"code": "<BlogPost\n aside={{\n author: {\n byline: 'Senior Developer',\n email: 'Jane.doe@example.com',\n image: 'img/people/author-emily.png',\n name: 'Jane Doe',\n twitter: 'Janedoe'\n },\n date: '12/30/2022',\n readingTime: '5 min read',\n socialSharing: [\n {\n href: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog',\n icon: 'twitter',\n title: 'Share on Twitter'\n },\n {\n href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline',\n icon: 'linkedin',\n title: 'Share on LinkedIn'\n }\n ]\n }}\n content=\"\n## Introduction\nThe future of **ArtiEficial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n \"\n cta={{\n buttons: [\n {\n icon: 'person',\n label: 'Contact Us',\n target: '#'\n },\n {\n icon: 'date',\n label: 'Learn More',\n target: '#'\n }\n ],\n colorNeutral: false,\n contentAlign: 'center',\n fullWidth: false,\n headline: 'Ready to Transform Your Development Process?',\n highlightText: false,\n image: {\n padding: true\n },\n order: {\n desktopImageLast: true,\n mobileImageLast: false\n },\n sub: 'Start your journey today.',\n text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n textAlign: 'center'\n }}\n head={{\n date: '12/30/2022',\n headline: 'The Future of AI: A Glimpse into the Unseen',\n image: 'img/close-up-young-business-team-working.png',\n tags: [\n 'Technology',\n 'AI'\n ]\n }}\n section={[\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'list',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n width: 'default'\n },\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'list',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n width: 'default'\n },\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'list',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n style: 'default',\n width: 'default'\n }\n ]}\n/>",
|
|
319
319
|
"args": {
|
|
320
320
|
"head": {
|
|
321
321
|
"date": "12/30/2022",
|
|
@@ -349,6 +349,134 @@
|
|
|
349
349
|
"readingTime": "5 min read",
|
|
350
350
|
"date": "12/30/2022"
|
|
351
351
|
},
|
|
352
|
+
"section": [
|
|
353
|
+
{
|
|
354
|
+
"width": "default",
|
|
355
|
+
"style": "default",
|
|
356
|
+
"backgroundColor": "default",
|
|
357
|
+
"spotlight": false,
|
|
358
|
+
"spaceBefore": "default",
|
|
359
|
+
"spaceAfter": "default",
|
|
360
|
+
"inverted": false,
|
|
361
|
+
"headerSpacing": false,
|
|
362
|
+
"headline": {
|
|
363
|
+
"text": "Section headline",
|
|
364
|
+
"large": false,
|
|
365
|
+
"width": "unset"
|
|
366
|
+
},
|
|
367
|
+
"content": {
|
|
368
|
+
"width": "unset",
|
|
369
|
+
"align": "center",
|
|
370
|
+
"gutter": "default",
|
|
371
|
+
"mode": "list",
|
|
372
|
+
"tileWidth": "default"
|
|
373
|
+
},
|
|
374
|
+
"buttons": [
|
|
375
|
+
{
|
|
376
|
+
"label": "Book a meeting",
|
|
377
|
+
"variant": "secondary",
|
|
378
|
+
"size": "medium",
|
|
379
|
+
"disabled": false
|
|
380
|
+
},
|
|
381
|
+
{
|
|
382
|
+
"label": "Book a meeting",
|
|
383
|
+
"variant": "secondary",
|
|
384
|
+
"size": "medium",
|
|
385
|
+
"disabled": false
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
"label": "Book a meeting",
|
|
389
|
+
"variant": "secondary",
|
|
390
|
+
"size": "medium",
|
|
391
|
+
"disabled": false
|
|
392
|
+
}
|
|
393
|
+
]
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"width": "default",
|
|
397
|
+
"style": "default",
|
|
398
|
+
"backgroundColor": "default",
|
|
399
|
+
"spotlight": false,
|
|
400
|
+
"spaceBefore": "default",
|
|
401
|
+
"spaceAfter": "default",
|
|
402
|
+
"inverted": false,
|
|
403
|
+
"headerSpacing": false,
|
|
404
|
+
"headline": {
|
|
405
|
+
"text": "Section headline",
|
|
406
|
+
"large": false,
|
|
407
|
+
"width": "unset"
|
|
408
|
+
},
|
|
409
|
+
"content": {
|
|
410
|
+
"width": "unset",
|
|
411
|
+
"align": "center",
|
|
412
|
+
"gutter": "default",
|
|
413
|
+
"mode": "list",
|
|
414
|
+
"tileWidth": "default"
|
|
415
|
+
},
|
|
416
|
+
"buttons": [
|
|
417
|
+
{
|
|
418
|
+
"label": "Book a meeting",
|
|
419
|
+
"variant": "secondary",
|
|
420
|
+
"size": "medium",
|
|
421
|
+
"disabled": false
|
|
422
|
+
},
|
|
423
|
+
{
|
|
424
|
+
"label": "Book a meeting",
|
|
425
|
+
"variant": "secondary",
|
|
426
|
+
"size": "medium",
|
|
427
|
+
"disabled": false
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
"label": "Book a meeting",
|
|
431
|
+
"variant": "secondary",
|
|
432
|
+
"size": "medium",
|
|
433
|
+
"disabled": false
|
|
434
|
+
}
|
|
435
|
+
]
|
|
436
|
+
},
|
|
437
|
+
{
|
|
438
|
+
"width": "default",
|
|
439
|
+
"style": "default",
|
|
440
|
+
"backgroundColor": "default",
|
|
441
|
+
"spotlight": false,
|
|
442
|
+
"spaceBefore": "default",
|
|
443
|
+
"spaceAfter": "default",
|
|
444
|
+
"inverted": false,
|
|
445
|
+
"headerSpacing": false,
|
|
446
|
+
"headline": {
|
|
447
|
+
"text": "Section headline",
|
|
448
|
+
"large": false,
|
|
449
|
+
"width": "unset"
|
|
450
|
+
},
|
|
451
|
+
"content": {
|
|
452
|
+
"width": "unset",
|
|
453
|
+
"align": "center",
|
|
454
|
+
"gutter": "default",
|
|
455
|
+
"mode": "list",
|
|
456
|
+
"tileWidth": "default"
|
|
457
|
+
},
|
|
458
|
+
"buttons": [
|
|
459
|
+
{
|
|
460
|
+
"label": "Book a meeting",
|
|
461
|
+
"variant": "secondary",
|
|
462
|
+
"size": "medium",
|
|
463
|
+
"disabled": false
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
"label": "Book a meeting",
|
|
467
|
+
"variant": "secondary",
|
|
468
|
+
"size": "medium",
|
|
469
|
+
"disabled": false
|
|
470
|
+
},
|
|
471
|
+
{
|
|
472
|
+
"label": "Book a meeting",
|
|
473
|
+
"variant": "secondary",
|
|
474
|
+
"size": "medium",
|
|
475
|
+
"disabled": false
|
|
476
|
+
}
|
|
477
|
+
]
|
|
478
|
+
}
|
|
479
|
+
],
|
|
352
480
|
"cta": {
|
|
353
481
|
"headline": "Ready to Transform Your Development Process?",
|
|
354
482
|
"sub": "Start your journey today.",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HTMLAttributes, FC, PropsWithChildren } from "react";
|
|
3
|
-
import { SectionProps } from "../../SectionProps-
|
|
3
|
+
import { SectionProps } from "../../SectionProps-83d399b4.js";
|
|
4
4
|
declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
6
6
|
declare const Section: import("react").ForwardRefExoticComponent<SectionProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|