@kickstartds/ds-agency-premium 1.4.6--canary.764.6e5c982.0 → 1.4.6--canary.767.c06aa08.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/{BlogAsideProps-e1cbd5d3.d.ts → BlogAsideProps-99489f0b.d.ts} +11 -4
- package/dist/BlogPostProps-440f88a5.d.ts +1 -1
- package/dist/components/blog-aside/blog-aside.css +2 -5
- package/dist/components/blog-aside/blog-aside.schema.dereffed.json +21 -7
- package/dist/components/blog-aside/blog-aside.schema.json +16 -5
- package/dist/components/blog-aside/index.d.ts +1 -1
- package/dist/components/blog-aside/index.js +2 -2
- package/dist/components/blog-post/blog-post.schema.dereffed.json +21 -7
- package/dist/components/contact/contact.css +3 -4
- package/dist/components/contact/index.d.ts +3 -2
- package/dist/components/contact/index.js +3 -1
- package/dist/components/page-wrapper/index.js +6 -0
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +10 -4
- package/dist/components/providers/index.js +7 -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
|
@@ -12,9 +12,13 @@ type Name = string;
|
|
|
12
12
|
*/
|
|
13
13
|
type Byline = string;
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
15
|
+
* URL of the image to display
|
|
16
16
|
*/
|
|
17
|
-
type
|
|
17
|
+
type ImageSource = string;
|
|
18
|
+
/**
|
|
19
|
+
* Alt text of the image
|
|
20
|
+
*/
|
|
21
|
+
type AltText = string;
|
|
18
22
|
/**
|
|
19
23
|
* The Twitter name of the author
|
|
20
24
|
*/
|
|
@@ -67,8 +71,11 @@ interface BlogAsideProps {
|
|
|
67
71
|
interface Author {
|
|
68
72
|
name: Name;
|
|
69
73
|
byline?: Byline;
|
|
70
|
-
image?:
|
|
74
|
+
image?: {
|
|
75
|
+
src?: ImageSource;
|
|
76
|
+
alt?: AltText;
|
|
77
|
+
};
|
|
71
78
|
twitter?: Twitter;
|
|
72
79
|
email?: Email;
|
|
73
80
|
}
|
|
74
|
-
export { Name, Byline,
|
|
81
|
+
export { Name, Byline, ImageSource, AltText, Twitter, Email, Icon, Href, Title, SocialSharing, ReadingTime, PublishedDate, BlogAsideProps, Author };
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* and run json-schema-to-typescript to regenerate this file.
|
|
5
5
|
*/
|
|
6
6
|
import { BlogHeadProps } from "./BlogHeadProps-f9a49428.js";
|
|
7
|
-
import { BlogAsideProps } from "./BlogAsideProps-
|
|
7
|
+
import { BlogAsideProps } from "./BlogAsideProps-99489f0b.js";
|
|
8
8
|
import { SectionProps } from "./SectionProps-83d399b4.js";
|
|
9
9
|
import { CtaProps } from "./CtaProps-93230a76.js";
|
|
10
10
|
import { SeoProps } from "./SeoProps-f2d6dcaa.js";
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
.dsa-blog-aside {
|
|
2
2
|
--dsa-blog-aside__title--color: var(--dsa-headline--color);
|
|
3
3
|
--dsa-blog-aside__title--font: var(--dsa-headline_h3--font);
|
|
4
|
-
--dsa-blog-aside__copy--color: var(--dsa-rich-text--color);
|
|
5
|
-
--dsa-blog-aside__copy--font: var(--dsa-rich-text--font);
|
|
6
4
|
--dsa-blog-aside__links--color: var(--dsa-link--color);
|
|
7
5
|
--dsa-blog-aside__divider--color: var(--ks-border-color-accent);
|
|
8
6
|
}
|
|
@@ -17,9 +15,8 @@
|
|
|
17
15
|
--c-post-meta_item--color: var(--dsa-post-aside__meta__item--color, var(--ks-text-color-interface));
|
|
18
16
|
--c-post-meta_item--icon-size: var(--dsa-post-aside__meta__item__icon--size, 1.2em);
|
|
19
17
|
}
|
|
20
|
-
.dsa-blog-aside .
|
|
21
|
-
|
|
22
|
-
--c-rich-text-color: var(--dsa-post-aside__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-default)));
|
|
18
|
+
.dsa-blog-aside .dsa-contact {
|
|
19
|
+
justify-content: flex-start;
|
|
23
20
|
}
|
|
24
21
|
.dsa-blog-aside .dsa-headline .dsa-headline__headline {
|
|
25
22
|
font: var(--dsa-post-aside__title--font, var(--dsa-headline_h3--font, var(--ks-font-display-l)));
|
|
@@ -27,13 +27,27 @@
|
|
|
27
27
|
]
|
|
28
28
|
},
|
|
29
29
|
"image": {
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
"type": "object",
|
|
31
|
+
"properties": {
|
|
32
|
+
"src": {
|
|
33
|
+
"type": "string",
|
|
34
|
+
"format": "image",
|
|
35
|
+
"title": "Image Source",
|
|
36
|
+
"description": "URL of the image to display",
|
|
37
|
+
"examples": [
|
|
38
|
+
"img/people/author-emily.png"
|
|
39
|
+
]
|
|
40
|
+
},
|
|
41
|
+
"alt": {
|
|
42
|
+
"type": "string",
|
|
43
|
+
"title": "Alt Text",
|
|
44
|
+
"description": "Alt text of the image",
|
|
45
|
+
"examples": [
|
|
46
|
+
"Picture of Jane Smith"
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
"additionalProperties": false
|
|
37
51
|
},
|
|
38
52
|
"twitter": {
|
|
39
53
|
"title": "Twitter",
|
|
@@ -23,11 +23,22 @@
|
|
|
23
23
|
"examples": ["CEO at Company"]
|
|
24
24
|
},
|
|
25
25
|
"image": {
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
26
|
+
"type": "object",
|
|
27
|
+
"properties": {
|
|
28
|
+
"src": {
|
|
29
|
+
"type": "string",
|
|
30
|
+
"format": "image",
|
|
31
|
+
"title": "Image Source",
|
|
32
|
+
"description": "URL of the image to display",
|
|
33
|
+
"examples": ["img/people/author-emily.png"]
|
|
34
|
+
},
|
|
35
|
+
"alt": {
|
|
36
|
+
"type": "string",
|
|
37
|
+
"title": "Alt Text",
|
|
38
|
+
"description": "Alt text of the image",
|
|
39
|
+
"examples": ["Picture of Jane Smith"]
|
|
40
|
+
}
|
|
41
|
+
}
|
|
31
42
|
},
|
|
32
43
|
"twitter": {
|
|
33
44
|
"title": "Twitter",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { BlogAsideProps } from "../../BlogAsideProps-
|
|
2
|
+
import { BlogAsideProps } from "../../BlogAsideProps-99489f0b.js";
|
|
3
3
|
declare const BlogAsideContextDefault: import("react").ForwardRefExoticComponent<BlogAsideProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
4
|
declare const BlogAsideContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogAsideProps & import("react").RefAttributes<HTMLDivElement>>>;
|
|
5
5
|
declare const BlogAside: import("react").ForwardRefExoticComponent<BlogAsideProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -40,8 +40,8 @@ const BlogAsideContextDefault = forwardRef(({ author, socialSharing, readingTime
|
|
|
40
40
|
});
|
|
41
41
|
return (jsx(PostAside, { ...rest, className: classnames(className, "dsa-blog-aside"), author: {
|
|
42
42
|
title: author?.name,
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
subtitle: author?.byline,
|
|
44
|
+
image: author?.image,
|
|
45
45
|
links: authorLinks,
|
|
46
46
|
}, shareBar: {
|
|
47
47
|
headline: {
|
|
@@ -92,13 +92,27 @@
|
|
|
92
92
|
]
|
|
93
93
|
},
|
|
94
94
|
"image": {
|
|
95
|
-
"
|
|
96
|
-
"
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
95
|
+
"type": "object",
|
|
96
|
+
"properties": {
|
|
97
|
+
"src": {
|
|
98
|
+
"type": "string",
|
|
99
|
+
"format": "image",
|
|
100
|
+
"title": "Image Source",
|
|
101
|
+
"description": "URL of the image to display",
|
|
102
|
+
"examples": [
|
|
103
|
+
"img/people/author-emily.png"
|
|
104
|
+
]
|
|
105
|
+
},
|
|
106
|
+
"alt": {
|
|
107
|
+
"type": "string",
|
|
108
|
+
"title": "Alt Text",
|
|
109
|
+
"description": "Alt text of the image",
|
|
110
|
+
"examples": [
|
|
111
|
+
"Picture of Jane Smith"
|
|
112
|
+
]
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
"additionalProperties": false
|
|
102
116
|
},
|
|
103
117
|
"twitter": {
|
|
104
118
|
"title": "Twitter",
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
.dsa-contact {
|
|
2
2
|
--dsa-contact--gap: var(--ks-spacing-stack-m) var(--ks-spacing-inline-m);
|
|
3
|
-
--dsa-contact--flex-basis: 150px;
|
|
4
3
|
--dsa-contact__header--gap: 0;
|
|
5
4
|
--dsa-contact__body--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
|
|
6
5
|
--dsa-contact__title--color: var(--ks-text-color-display);
|
|
@@ -21,9 +20,9 @@
|
|
|
21
20
|
display: flex;
|
|
22
21
|
flex-wrap: wrap;
|
|
23
22
|
gap: var(--dsa-contact--gap);
|
|
23
|
+
justify-content: center;
|
|
24
24
|
}
|
|
25
|
-
.dsa-
|
|
26
|
-
flex-basis: var(--dsa-contact--flex-basis);
|
|
25
|
+
.dsa-contact__image, .dsa-contact__body {
|
|
27
26
|
flex-grow: 1;
|
|
28
27
|
}
|
|
29
28
|
.dsa-contact__body {
|
|
@@ -47,7 +46,7 @@
|
|
|
47
46
|
font-weight: var(--dsa-contact__subtitle--font-weight);
|
|
48
47
|
}
|
|
49
48
|
.dsa-contact__image {
|
|
50
|
-
|
|
49
|
+
align-self: center;
|
|
51
50
|
}
|
|
52
51
|
.dsa-contact__links {
|
|
53
52
|
display: flex;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { HTMLAttributes } from "react";
|
|
2
|
+
import { HTMLAttributes, FC, PropsWithChildren } from "react";
|
|
3
3
|
/* eslint-disable */
|
|
4
4
|
/**
|
|
5
5
|
* This file was automatically generated by json-schema-to-typescript.
|
|
@@ -56,4 +56,5 @@ interface ContactProps {
|
|
|
56
56
|
component?: KsComponentAttribute;
|
|
57
57
|
}
|
|
58
58
|
declare const Contact: import("react").ForwardRefExoticComponent<ContactProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
59
|
-
|
|
59
|
+
declare const ContactProvider: FC<PropsWithChildren>;
|
|
60
|
+
export { Contact, ContactProvider };
|
|
@@ -3,11 +3,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { Picture } from '@kickstartds/base/lib/picture';
|
|
6
|
+
import { ContactContext } from '@kickstartds/base/lib/contact';
|
|
6
7
|
import { Link } from '@kickstartds/base/lib/link';
|
|
7
8
|
import { Icon } from '@kickstartds/base/lib/icon';
|
|
8
9
|
import { RichText } from '@kickstartds/base/lib/rich-text';
|
|
9
10
|
|
|
10
11
|
const Contact = forwardRef(({ title, subtitle, image, links, copy, className, ...props }, ref) => (jsxs("address", { className: classnames("dsa-contact", className), ref: ref, ...props, children: [image && image.src ? (jsx("div", { className: "dsa-contact__image", children: jsx(Picture, { ...image }) })) : (""), jsxs("div", { className: "dsa-contact__body", children: [title && (jsxs("div", { className: "dsa-contact__header", children: [jsx("span", { className: "dsa-contact__title", children: title }), jsx("span", { className: "dsa-contact__subtitle", children: subtitle })] })), links.length ? (jsx("ul", { className: "dsa-contact__links", children: links.map(({ icon, href, label, newTab }, i) => (jsx("li", { children: jsxs(Link, { className: "dsa-contact__link", href: href, ...(newTab ? { target: "_blank", rel: "noopener" } : {}), children: [jsx(Icon, { icon: icon }), label] }) }, i))) })) : (""), copy && jsx(RichText, { text: copy, className: "dsa-contact__copy" })] })] })));
|
|
11
12
|
Contact.displayName = "Contact";
|
|
13
|
+
const ContactProvider = (props) => (jsx(ContactContext.Provider, { ...props, value: Contact }));
|
|
12
14
|
|
|
13
|
-
export { Contact };
|
|
15
|
+
export { Contact, ContactProvider };
|
|
@@ -15,6 +15,12 @@ import '@kickstartds/core/lib/component';
|
|
|
15
15
|
import '../teaser-card/index.js';
|
|
16
16
|
import '@kickstartds/base/lib/teaser-box';
|
|
17
17
|
import '@kickstartds/core/lib/container';
|
|
18
|
+
import '../contact/index.js';
|
|
19
|
+
import '@kickstartds/base/lib/picture';
|
|
20
|
+
import '@kickstartds/base/lib/contact';
|
|
21
|
+
import '@kickstartds/base/lib/link';
|
|
22
|
+
import '@kickstartds/base/lib/icon';
|
|
23
|
+
import '@kickstartds/base/lib/rich-text';
|
|
18
24
|
import '../headline/index.js';
|
|
19
25
|
import 'markdown-to-jsx';
|
|
20
26
|
import '@kickstartds/base/lib/headline';
|
|
@@ -3,12 +3,15 @@
|
|
|
3
3
|
"id": "blog-blog-aside--default",
|
|
4
4
|
"group": "Blog/ Blog Aside",
|
|
5
5
|
"name": "Default",
|
|
6
|
-
"code": "<BlogAside\n author={{\n byline: 'CEO at Company',\n email: 'jane.smith@example.com',\n image: 'img/people/author-emily.png',\n name: 'Jane Smith',\n twitter: 'jane_smith'\n }}\n date=\"12/30/2022\"\n readingTime=\"5 min read\"\n socialSharing={[\n {\n href: 'https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai',\n icon: 'twitter',\n title: 'Share on Twitter'\n },\n {\n href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog/the-future-of-ai&title=The%20Future%20of%20AI&summary=The%20Future%20of%20AI&source=LinkedIn',\n icon: 'linkedin',\n title: 'Share on LinkedIn'\n }\n ]}\n/>",
|
|
6
|
+
"code": "<BlogAside\n author={{\n byline: 'CEO at Company',\n email: 'jane.smith@example.com',\n image: {\n alt: 'Picture of Jane Smith',\n src: 'img/people/author-emily.png'\n },\n name: 'Jane Smith',\n twitter: 'jane_smith'\n }}\n date=\"12/30/2022\"\n readingTime=\"5 min read\"\n socialSharing={[\n {\n href: 'https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai',\n icon: 'twitter',\n title: 'Share on Twitter'\n },\n {\n href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog/the-future-of-ai&title=The%20Future%20of%20AI&summary=The%20Future%20of%20AI&source=LinkedIn',\n icon: 'linkedin',\n title: 'Share on LinkedIn'\n }\n ]}\n/>",
|
|
7
7
|
"args": {
|
|
8
8
|
"author": {
|
|
9
9
|
"name": "Jane Smith",
|
|
10
10
|
"byline": "CEO at Company",
|
|
11
|
-
"image":
|
|
11
|
+
"image": {
|
|
12
|
+
"src": "img/people/author-emily.png",
|
|
13
|
+
"alt": "Picture of Jane Smith"
|
|
14
|
+
},
|
|
12
15
|
"twitter": "jane_smith",
|
|
13
16
|
"email": "jane.smith@example.com"
|
|
14
17
|
},
|
|
@@ -446,7 +449,7 @@
|
|
|
446
449
|
"id": "pages-archetypes--blog-post",
|
|
447
450
|
"group": "Pages/Archetypes",
|
|
448
451
|
"name": "BlogPost",
|
|
449
|
-
"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/>",
|
|
452
|
+
"code": "<BlogPost\n aside={{\n author: {\n byline: 'Senior Developer',\n email: 'Jane.doe@example.com',\n image: {\n alt: 'Picture of Jane Smith',\n src: 'img/people/author-emily.png'\n },\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/>",
|
|
450
453
|
"args": {
|
|
451
454
|
"head": {
|
|
452
455
|
"date": "12/30/2022",
|
|
@@ -461,7 +464,10 @@
|
|
|
461
464
|
"author": {
|
|
462
465
|
"name": "Jane Doe",
|
|
463
466
|
"byline": "Senior Developer",
|
|
464
|
-
"image":
|
|
467
|
+
"image": {
|
|
468
|
+
"src": "img/people/author-emily.png",
|
|
469
|
+
"alt": "Picture of Jane Smith"
|
|
470
|
+
},
|
|
465
471
|
"twitter": "Janedoe",
|
|
466
472
|
"email": "Jane.doe@example.com"
|
|
467
473
|
},
|
|
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { ButtonProvider } from '../button/index.js';
|
|
3
3
|
import { SectionProvider } from '../section/index.js';
|
|
4
4
|
import { TeaserBoxProvider } from '../teaser-card/index.js';
|
|
5
|
+
import { ContactProvider } from '../contact/index.js';
|
|
5
6
|
import { HeadlineProvider } from '../headline/index.js';
|
|
6
7
|
import { ThemeProvider } from '@bedrock-layout/spacing-constants';
|
|
7
8
|
import { ButtonGroupProvider } from '../button-group/index.js';
|
|
@@ -14,6 +15,11 @@ import '../section/js/Section.client.js';
|
|
|
14
15
|
import '@kickstartds/core/lib/component';
|
|
15
16
|
import '@kickstartds/base/lib/teaser-box';
|
|
16
17
|
import '@kickstartds/core/lib/container';
|
|
18
|
+
import '@kickstartds/base/lib/picture';
|
|
19
|
+
import '@kickstartds/base/lib/contact';
|
|
20
|
+
import '@kickstartds/base/lib/link';
|
|
21
|
+
import '@kickstartds/base/lib/icon';
|
|
22
|
+
import '@kickstartds/base/lib/rich-text';
|
|
17
23
|
import 'markdown-to-jsx';
|
|
18
24
|
import '@kickstartds/base/lib/headline';
|
|
19
25
|
import '@kickstartds/base/lib/button-group';
|
|
@@ -32,7 +38,7 @@ const theme = {
|
|
|
32
38
|
};
|
|
33
39
|
const BedrockProvider = (props) => (jsx(ThemeProvider, { theme: theme, ...props }));
|
|
34
40
|
|
|
35
|
-
const Providers = (props) => (jsx(BedrockProvider, { children: jsx(ButtonProvider, { children: jsx(ButtonGroupProvider, { children: jsx(HeadlineProvider, { children: jsx(SectionProvider, { children: jsx(TeaserBoxProvider, { ...props }) }) }) }) }) }));
|
|
41
|
+
const Providers = (props) => (jsx(BedrockProvider, { children: jsx(ButtonProvider, { children: jsx(ContactProvider, { children: jsx(ButtonGroupProvider, { children: jsx(HeadlineProvider, { children: jsx(SectionProvider, { children: jsx(TeaserBoxProvider, { ...props }) }) }) }) }) }) }));
|
|
36
42
|
const providerDecorator = (storyFn, context) => (jsx(Providers, { children: storyFn(context) }));
|
|
37
43
|
|
|
38
44
|
export { Providers as default, providerDecorator };
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Mon, 26 Aug 2024
|
|
3
|
+
* Generated on Mon, 26 Aug 2024 12:01:11 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 Mon, 26 Aug 2024
|
|
2730
|
+
* Generated on Mon, 26 Aug 2024 12:01:16 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 Mon, 26 Aug 2024
|
|
5461
|
+
* Generated on Mon, 26 Aug 2024 12:01:13 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 Mon, 26 Aug 2024
|
|
8462
|
+
* Generated on Mon, 26 Aug 2024 12:01:18 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
package/package.json
CHANGED