@kickstartds/ds-agency-premium 1.6.71--canary.45.1758.0 → 1.6.71--canary.45.1764.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/blog-aside/blog-aside.css +4 -4
- package/dist/components/blog-aside/index.js +3 -3
- package/dist/components/blog-post/index.d.ts +1 -1
- package/dist/components/blog-post/index.js +4 -2
- package/dist/components/contact/contact.css +8 -6
- package/dist/components/index/index.d.ts +1 -1
- package/dist/components/logos/index.js +1 -1
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +138 -70
- package/dist/components/split-even/index.d.ts +74 -1
- package/dist/components/split-even/index.js +6 -0
- package/dist/components/split-even/split-even.css +94 -0
- package/dist/components/split-even/split-even.schema.dereffed.json +17 -5
- package/dist/components/split-even/split-even.schema.json +12 -5
- package/dist/components/split-weighted/index.d.ts +101 -0
- package/dist/components/split-weighted/index.js +13 -0
- package/dist/components/split-weighted/split-weighted.css +109 -0
- package/dist/components/split-weighted/split-weighted.schema.dereffed.json +5952 -0
- package/dist/components/split-weighted/split-weighted.schema.json +210 -0
- package/dist/static/img/people/author-emily.png +0 -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
- package/dist/components/split/index.d.ts +0 -14
- package/dist/components/split/index.js +0 -17
- package/dist/components/split/split.css +0 -53
- package/dist/components/split/split.schema.dereffed.json +0 -29
- package/dist/components/split/split.schema.json +0 -19
- /package/dist/{BlogPostProps-c760fd2a.d.ts → BlogPostProps-6b3cff22.d.ts} +0 -0
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.dsa-blog-aside {
|
|
7
|
-
--dsa-blog-aside--gap: var(--ks-spacing-stack-
|
|
7
|
+
--dsa-blog-aside--gap: var(--ks-spacing-stack-s);
|
|
8
8
|
--dsa-blog-aside__author__title--font: var(--ks-font-copy-m);
|
|
9
9
|
--dsa-blog-aside__author__subtitle--font: var(--ks-font-copy-s);
|
|
10
10
|
--dsa-blog-aside__author__image--flex-basis: 120px;
|
|
11
|
-
--dsa-blog-aside__author__body--flex-basis:
|
|
11
|
+
--dsa-blog-aside__author__body--flex-basis: 100px;
|
|
12
12
|
--dsa-blog-aside__author__link--font: var(--ks-font-interface-s);
|
|
13
|
-
--dsa-blog-aside__author--gap-horizontal: var(--ks-spacing-inline-
|
|
13
|
+
--dsa-blog-aside__author--gap-horizontal: var(--ks-spacing-inline-s);
|
|
14
14
|
--dsa-blog-aside__author--gap-vertical: var(--ks-spacing-stack-xs);
|
|
15
15
|
--dsa-blog-aside__meta__item--font: var(--ks-font-interface-s);
|
|
16
16
|
--dsa-blog-aside__meta__item--color: var(--ks-text-color-interface);
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
--dsa-blog-aside__sharebar__link--color: var(--dsa-link--color);
|
|
20
20
|
--dsa-blog-aside__sharebar__link--color_hover: var(--dsa-link--color_hover);
|
|
21
21
|
}
|
|
22
|
-
@container blog-aside (min-width:
|
|
22
|
+
@container blog-aside (min-width: 370px) {
|
|
23
23
|
.dsa-blog-aside {
|
|
24
24
|
--dsa-blog-aside__author__image--flex-basis: 180px;
|
|
25
25
|
--dsa-blog-aside__author__title--font: var(--ks-font-copy-l);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "./blog-aside.css";
|
|
2
|
-
import { jsx, jsxs
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { forwardRef, createContext, useContext } from 'react';
|
|
5
5
|
import { PostMeta } from '@kickstartds/blog/lib/post-meta';
|
|
@@ -20,7 +20,7 @@ const BlogAsideContextDefault = forwardRef(({ author, socialSharing, readingTime
|
|
|
20
20
|
const socialLinks = socialSharing?.map((link) => {
|
|
21
21
|
return {
|
|
22
22
|
icon: link.icon,
|
|
23
|
-
|
|
23
|
+
href: link.url,
|
|
24
24
|
title: link.title,
|
|
25
25
|
};
|
|
26
26
|
});
|
|
@@ -35,7 +35,7 @@ const BlogAsideContextDefault = forwardRef(({ author, socialSharing, readingTime
|
|
|
35
35
|
icon: "time",
|
|
36
36
|
text: readingTime,
|
|
37
37
|
});
|
|
38
|
-
return (jsx(Container, { name: "blog-aside", children: jsxs("div", { ref: ref, className: classnames(className, "dsa-blog-aside"), ...props, children: [jsx(BlogAuthor, { ...author }), metaItems && (jsx(
|
|
38
|
+
return (jsx(Container, { name: "blog-aside", children: jsxs("div", { ref: ref, className: classnames(className, "dsa-blog-aside"), ...props, children: [jsx(BlogAuthor, { ...author }), metaItems && (jsx(PostMeta, { className: "dsa-blog-aside__meta", items: metaItems })), socialLinks && (jsxs("div", { children: [jsx(Headline, { text: "Share this Article", level: "p", style: "p", spaceAfter: "minimum" }), jsx(PostShareBar, { className: "dsa-blog-aside__share-bar", links: socialLinks })] }))] }) }));
|
|
39
39
|
});
|
|
40
40
|
const BlogAsideContext = createContext(BlogAsideContextDefault);
|
|
41
41
|
const BlogAside = forwardRef((props, ref) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BlogPostProps } from "../../BlogPostProps-
|
|
1
|
+
import { BlogPostProps } from "../../BlogPostProps-6b3cff22.js";
|
|
2
2
|
import { FC, PropsWithChildren } from "react";
|
|
3
3
|
declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
|
|
4
4
|
export type { BlogPostProps };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { SplitWeighted } from '../split-weighted/index.js';
|
|
3
3
|
import { BlogHead } from '../blog-head/index.js';
|
|
4
4
|
import { Section } from '../section/index.js';
|
|
5
5
|
import { BlogAside } from '../blog-aside/index.js';
|
|
@@ -30,7 +30,9 @@ import '@kickstartds/base/lib/button';
|
|
|
30
30
|
import '../button-group/index.js';
|
|
31
31
|
import '@kickstartds/base/lib/button-group';
|
|
32
32
|
|
|
33
|
-
const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children:
|
|
33
|
+
const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsx(SplitWeighted, { sticky: true, mainLayout: {
|
|
34
|
+
minWidth: "narrow",
|
|
35
|
+
}, main: jsxs(Fragment, { children: [head && jsx(BlogHead, { ...head }), content ? jsx(Text, { text: content }) : children] }), context: aside && jsx(BlogAside, { ...aside }) }) }), cta && (jsx(Fragment, { children: jsx(Section, { backgroundColor: "accent", content: { mode: "list" }, children: jsx(Cta, { ...cta }) }) }))] }));
|
|
34
36
|
BlogPost.displayName = "BlogPost";
|
|
35
37
|
|
|
36
38
|
export { BlogPost };
|
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.dsa-contact {
|
|
7
|
-
--dsa-contact--gap-horizontal: var(--ks-spacing-inline-
|
|
8
|
-
--dsa-contact--gap-vertical: var(--ks-spacing-stack-
|
|
7
|
+
--dsa-contact--gap-horizontal: var(--ks-spacing-inline-s);
|
|
8
|
+
--dsa-contact--gap-vertical: var(--ks-spacing-stack-s);
|
|
9
9
|
--dsa-contact__header--gap: 0;
|
|
10
|
-
--dsa-contact__image--flex-basis:
|
|
10
|
+
--dsa-contact__image--flex-basis: var(--dsa-tile--width_smallest);
|
|
11
11
|
--dsa-contact__image--border-radius: var(--ks-border-radius-card);
|
|
12
12
|
--dsa-contact__body--gap: var(--ks-spacing-stack-xs);
|
|
13
|
-
--dsa-contact__body--flex-basis:
|
|
13
|
+
--dsa-contact__body--flex-basis: var(--dsa-tile--width_small);
|
|
14
14
|
--dsa-contact__copy--font: var(--dsa-rich-text--font);
|
|
15
15
|
--dsa-contact__copy--color: var(--dsa-rich-text--color);
|
|
16
16
|
--dsa-contact__title--color: var(--ks-text-color-display);
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
.dsa-contact {
|
|
41
41
|
display: flex;
|
|
42
42
|
flex-wrap: wrap;
|
|
43
|
-
gap: var(--dsa-contact--gap-
|
|
43
|
+
gap: var(--dsa-contact--gap-vertical) var(--dsa-contact--gap-horizontal);
|
|
44
44
|
}
|
|
45
45
|
.dsa-contact__image-wrap, .dsa-contact__body {
|
|
46
46
|
flex-grow: 1;
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
.dsa-contact__body {
|
|
49
49
|
display: flex;
|
|
50
50
|
flex-grow: 1;
|
|
51
|
-
flex-shrink:
|
|
51
|
+
flex-shrink: 1;
|
|
52
52
|
flex-direction: column;
|
|
53
53
|
gap: var(--dsa-contact__body--gap);
|
|
54
54
|
flex-basis: var(--dsa-contact__body--flex-basis);
|
|
@@ -62,6 +62,7 @@
|
|
|
62
62
|
flex-basis: var(--dsa-contact__image--flex-basis);
|
|
63
63
|
height: 100%;
|
|
64
64
|
width: 100%;
|
|
65
|
+
flex-shrink: 1;
|
|
65
66
|
}
|
|
66
67
|
.dsa-contact--image-full-width .dsa-contact__image-wrap {
|
|
67
68
|
flex-grow: 1;
|
|
@@ -112,6 +113,7 @@
|
|
|
112
113
|
font: var(--dsa-contact__link--font);
|
|
113
114
|
font-weight: var(--dsa-contact__link--font-weight);
|
|
114
115
|
text-decoration: var(--dsa-contact__link--text-decoration);
|
|
116
|
+
width: fit-content;
|
|
115
117
|
}
|
|
116
118
|
.dsa-contact a.dsa-contact__link .icon {
|
|
117
119
|
width: var(--dsa-contact__link__icon--size);
|
|
@@ -29,7 +29,7 @@ interface SettingsProps {
|
|
|
29
29
|
seo: SeoProps;
|
|
30
30
|
iconSprite?: IconSprite;
|
|
31
31
|
}
|
|
32
|
-
export * from "../../BlogPostProps-
|
|
32
|
+
export * from "../../BlogPostProps-6b3cff22.js";
|
|
33
33
|
export * from "../../BlogOverviewProps-9f207f1c.js";
|
|
34
34
|
export * from "../../PageProps-aa29c554.js";
|
|
35
35
|
export { IconSprite, SettingsProps };
|
|
@@ -7,7 +7,7 @@ import { Button } from '@kickstartds/base/lib/button';
|
|
|
7
7
|
import { Link } from '@kickstartds/base/lib/link';
|
|
8
8
|
import { Container } from '@kickstartds/core/lib/container';
|
|
9
9
|
|
|
10
|
-
const LogosContextDefault = forwardRef(({ logo: logos = [], tagline, align, cta, logosPerRow = "6", ...rest }, ref) => (jsx("div", { ...rest, ref: ref, children: jsx(Container, { name: "logos", children: jsxs("div", { className: classnames(`dsa-logos dsa-logos--align-${align}`), children: [tagline && jsx("div", { className: "dsa-logos__tagline", children: tagline }), jsx(LogoTiles, { className: classnames(`dsa-logo-tiles dsa-logo-tiles--cols-${logosPerRow}`), logos: logos }), cta?.toggle ? (jsxs("div", { className: "dsa-logos__cta", children: [jsxs("div", { className: "dsa-logos__cta__text", children: [cta?.text, cta?.style === "text" && (jsxs(Fragment, { children: [" ", jsx(Link, { className: "dsa-logos__cta__link", href: cta.link, children: cta.label })] }))] }), cta?.style === "button" && (jsx(Button, { href: cta.link, label: cta.label }))] })) : ("")] }) }) })));
|
|
10
|
+
const LogosContextDefault = forwardRef(({ logo: logos = [], tagline, align = "center", cta, logosPerRow = "6", ...rest }, ref) => (jsx("div", { ...rest, ref: ref, children: jsx(Container, { name: "logos", children: jsxs("div", { className: classnames(`dsa-logos dsa-logos--align-${align}`), children: [tagline && jsx("div", { className: "dsa-logos__tagline", children: tagline }), jsx(LogoTiles, { className: classnames(`dsa-logo-tiles dsa-logo-tiles--cols-${logosPerRow}`), logos: logos }), cta?.toggle ? (jsxs("div", { className: "dsa-logos__cta", children: [jsxs("div", { className: "dsa-logos__cta__text", children: [cta?.text, cta?.style === "text" && (jsxs(Fragment, { children: [" ", jsx(Link, { className: "dsa-logos__cta__link", href: cta.link, children: cta.label })] }))] }), cta?.style === "button" && (jsx(Button, { href: cta.link, label: cta.label }))] })) : ("")] }) }) })));
|
|
11
11
|
const LogosContext = createContext(LogosContextDefault);
|
|
12
12
|
const Logos = forwardRef((props, ref) => {
|
|
13
13
|
const Component = useContext(LogosContext);
|
|
@@ -538,7 +538,7 @@
|
|
|
538
538
|
"id": "page-archetypes-blog-post--blog-post",
|
|
539
539
|
"group": "Page Archetypes/Blog Post",
|
|
540
540
|
"name": "BlogPost",
|
|
541
|
-
"code": "<BlogPost\n aside={{\n author: {\n byline: 'Senior Developer',\n email: 'Jane.doe@example.com',\n image: {\n alt: 'Picture of
|
|
541
|
+
"code": "<BlogPost\n aside={{\n author: {\n byline: 'Senior Developer',\n email: 'Jane.doe@example.com',\n image: {\n alt: 'Picture of Jane Doe',\n aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/contact-isabella.png'\n },\n links: [\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'phone',\n label: '0228 / 688 966 20',\n newTab: false,\n url: 'tel:+4922868896620'\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n icon: 'email',\n label: 'mail@example.com',\n newTab: false,\n url: 'mailto:mail@example.com'\n }\n ],\n name: 'Jane Doe',\n twitter: 'Janedoe'\n },\n date: '12/30/2022',\n readingTime: '5 min read',\n socialSharing: [\n {\n icon: 'twitter',\n title: 'Share on Twitter',\n url: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog'\n },\n {\n icon: 'linkedin',\n title: 'Share on LinkedIn',\n url: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline'\n }\n ]\n }}\n contact={{\n copy: 'Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.',\n image: {\n alt: 'Picture of Jane Smith',\n aspectRatio: 'vertical',\n fullWidth: false,\n src: 'img/people/contact-john.png'\n },\n links: [\n {\n icon: 'xing',\n label: 'john.smith',\n newTab: false,\n url: 'mailto:mail@example.com'\n },\n {\n icon: 'twitter',\n label: '@john_smith',\n newTab: false,\n url: '#'\n }\n ],\n subtitle: 'Sales Representative',\n title: 'John Smith'\n }}\n content=\"\n## Introduction\nThe future of **Artificial 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 align: 'center',\n buttons: [\n {\n icon: 'person',\n label: 'Contact Us',\n url: '#'\n },\n {\n icon: 'date',\n label: 'Learn More',\n url: '#'\n }\n ],\n colorNeutral: false,\n headline: 'Ready to Transform Your Development Process?',\n highlightText: false,\n image: {\n align: 'center',\n padding: true\n },\n inverted: false,\n order: {\n desktopImageLast: true,\n mobileImageLast: false\n },\n padding: false,\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 alt: 'Image of a business team working',\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 {\n entry: 'Technology'\n },\n {\n entry: 'AI'\n }\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 transition: '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 transition: '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 transition: 'default',\n width: 'default'\n }\n ]}\n/>",
|
|
542
542
|
"args": {
|
|
543
543
|
"head": {
|
|
544
544
|
"date": "12/30/2022",
|
|
@@ -559,8 +559,8 @@
|
|
|
559
559
|
"name": "Jane Doe",
|
|
560
560
|
"byline": "Senior Developer",
|
|
561
561
|
"image": {
|
|
562
|
-
"src": "img/people/
|
|
563
|
-
"alt": "Picture of
|
|
562
|
+
"src": "img/people/contact-isabella.png",
|
|
563
|
+
"alt": "Picture of Jane Doe",
|
|
564
564
|
"fullWidth": false,
|
|
565
565
|
"aspectRatio": "square"
|
|
566
566
|
},
|
|
@@ -3591,51 +3591,34 @@
|
|
|
3591
3591
|
"id": "layout-split-even--text-with-logos",
|
|
3592
3592
|
"group": "Layout/Split Even",
|
|
3593
3593
|
"name": "TextWithLogos",
|
|
3594
|
-
"code": "<SplitEven\n contentGutter=\"small\"\n contentMinWidth=\"medium\"\n first={<><
|
|
3594
|
+
"code": "<SplitEven\n contentGutter=\"small\"\n contentMinWidth=\"medium\"\n first={<><Cta buttons={[{label: 'Learn more'}]} headline=\"Discover our solutions for Industry 4.0\" text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n horizontalGutter=\"default\"\n mobileLayout=\"stack\"\n second={<><Logos logo={[{alt: 'Logo 1', src: 'img/logos/logoipsum-344.svg'}, {alt: 'Logo 2', src: 'img/logos/logoipsum-347.svg'}, {alt: 'Logo 3', src: 'img/logos/logoipsum-352.svg'}, {alt: 'Logo 4', src: 'img/logos/logoipsum-356.svg'}, {alt: 'Logo 5', src: 'img/logos/logoipsum-358.svg'}, {alt: 'Logo 6', src: 'img/logos/logoipsum-369.svg'}]} logosPerRow={3}/></>}\n sectionMinWidth=\"wide\"\n verticalAlign=\"center\"\n verticalGutter=\"default\"\n/>",
|
|
3595
3595
|
"args": {
|
|
3596
3596
|
"contentMinWidth": "medium",
|
|
3597
3597
|
"contentGutter": "small",
|
|
3598
3598
|
"mobileLayout": "stack",
|
|
3599
3599
|
"verticalAlign": "center",
|
|
3600
|
-
"
|
|
3600
|
+
"verticalGutter": "default",
|
|
3601
|
+
"horizontalGutter": "default",
|
|
3601
3602
|
"sectionMinWidth": "wide",
|
|
3602
3603
|
"first": {
|
|
3603
3604
|
"key": null,
|
|
3604
3605
|
"ref": null,
|
|
3605
3606
|
"props": {
|
|
3606
|
-
"children":
|
|
3607
|
-
{
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
|
|
3611
|
-
"
|
|
3612
|
-
|
|
3613
|
-
|
|
3614
|
-
|
|
3615
|
-
|
|
3616
|
-
|
|
3617
|
-
|
|
3618
|
-
{
|
|
3619
|
-
"type": {},
|
|
3620
|
-
"key": null,
|
|
3621
|
-
"ref": null,
|
|
3622
|
-
"props": {
|
|
3623
|
-
"highlightText": true,
|
|
3624
|
-
"text": "We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry."
|
|
3625
|
-
},
|
|
3626
|
-
"_owner": null
|
|
3607
|
+
"children": {
|
|
3608
|
+
"type": {},
|
|
3609
|
+
"key": null,
|
|
3610
|
+
"ref": null,
|
|
3611
|
+
"props": {
|
|
3612
|
+
"headline": "Discover our solutions for Industry 4.0",
|
|
3613
|
+
"text": "We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.",
|
|
3614
|
+
"buttons": [
|
|
3615
|
+
{
|
|
3616
|
+
"label": "Learn more"
|
|
3617
|
+
}
|
|
3618
|
+
]
|
|
3627
3619
|
},
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
"key": null,
|
|
3631
|
-
"ref": null,
|
|
3632
|
-
"props": {
|
|
3633
|
-
"label": "Learn more",
|
|
3634
|
-
"variant": "primary"
|
|
3635
|
-
},
|
|
3636
|
-
"_owner": null
|
|
3637
|
-
}
|
|
3638
|
-
]
|
|
3620
|
+
"_owner": null
|
|
3621
|
+
}
|
|
3639
3622
|
},
|
|
3640
3623
|
"_owner": null
|
|
3641
3624
|
},
|
|
@@ -3688,13 +3671,14 @@
|
|
|
3688
3671
|
"id": "layout-split-even--faq-with-form",
|
|
3689
3672
|
"group": "Layout/Split Even",
|
|
3690
3673
|
"name": "FAQWithForm",
|
|
3691
|
-
"code": "<SplitEven\n contentGutter=\"small\"\n contentMinWidth=\"medium\"\n first={<><Headline level=\"h2\" text=\"Frequently Asked Questions\"/><Faq questions={[{answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What are the benefits of investing in a Design System?'}, {answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What is a Design System?'}, {answer: 'A Headless CMS plays a crucial role in a Design System by providing a content-first approach. It separates the back-end content from the front-end presentation layer, allowing for seamless integration with any design system. This results in a flexible, scalable, and platform-agnostic system that ensures content consistency across all platforms and devices.', question: 'What is the role of a Headless CMS in a Design System?'}]} /></>}\n
|
|
3674
|
+
"code": "<SplitEven\n contentGutter=\"small\"\n contentMinWidth=\"medium\"\n first={<><Headline level=\"h2\" text=\"Frequently Asked Questions\"/><Faq questions={[{answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What are the benefits of investing in a Design System?'}, {answer: 'Experience the speed & scalability unlike anything seen before with our Headless CMS powered websites, web apps & composable architecture.', question: 'What is a Design System?'}, {answer: 'A Headless CMS plays a crucial role in a Design System by providing a content-first approach. It separates the back-end content from the front-end presentation layer, allowing for seamless integration with any design system. This results in a flexible, scalable, and platform-agnostic system that ensures content consistency across all platforms and devices.', question: 'What is the role of a Headless CMS in a Design System?'}]} /></>}\n horizontalGutter=\"large\"\n mobileLayout=\"stack\"\n second={<><Headline level=\"h3\" spaceAfter=\"minimum\" style=\"h3\" text=\"Still have questions?\"/><No Display Name label=\"Ask us directly!\" /><Button label=\"Submit\" /></>}\n sectionMinWidth=\"medium\"\n verticalAlign=\"top\"\n verticalGutter=\"large\"\n/>",
|
|
3692
3675
|
"args": {
|
|
3693
3676
|
"contentMinWidth": "medium",
|
|
3694
3677
|
"contentGutter": "small",
|
|
3695
3678
|
"mobileLayout": "stack",
|
|
3696
3679
|
"verticalAlign": "top",
|
|
3697
|
-
"
|
|
3680
|
+
"verticalGutter": "large",
|
|
3681
|
+
"horizontalGutter": "large",
|
|
3698
3682
|
"sectionMinWidth": "medium",
|
|
3699
3683
|
"first": {
|
|
3700
3684
|
"key": null,
|
|
@@ -3780,18 +3764,109 @@
|
|
|
3780
3764
|
"screenshot": "img/screenshots/layout-split-even--faq-with-form.png"
|
|
3781
3765
|
},
|
|
3782
3766
|
{
|
|
3783
|
-
"id": "layout-split-
|
|
3784
|
-
"group": "Layout/Split
|
|
3767
|
+
"id": "layout-split-weighted--text-with-contact",
|
|
3768
|
+
"group": "Layout/Split Weighted",
|
|
3769
|
+
"name": "TextWithContact",
|
|
3770
|
+
"code": "<SplitWeighted\n context={<><Contact image={{aspectRatio: 'wide', fullWidth: true, src: 'img/people/contact-isabella.png'}} links={[{ariaLabel: 'Isabella Doe on Twitter', icon: 'twitter', label: '@Isabella_Doe', url: '#'}, {ariaLabel: 'Isabella Doe on LinkedIn', icon: 'linkedin', label: 'Isabella.Doe', url: 'mailto:mail@example.com'}]} subtitle=\"Creative Director\" title=\"Isabella Doe\"/></>}\n contextLayout={{\n gutter: 'default',\n minWidth: 'wide'\n }}\n horizontalGutter=\"default\"\n main={<><Cta buttons={[{label: 'Learn more'}]} headline=\"Discover our solutions for Industry 4.0\" text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n mainLayout={{\n gutter: 'default',\n minWidth: 'wide'\n }}\n order={{\n desktop: 'mainFirst',\n mobile: 'mainFirst'\n }}\n verticalGutter=\"large\"\n/>",
|
|
3771
|
+
"args": {
|
|
3772
|
+
"verticalGutter": "large",
|
|
3773
|
+
"horizontalGutter": "default",
|
|
3774
|
+
"sticky": false,
|
|
3775
|
+
"mainLayout": {
|
|
3776
|
+
"gutter": "default",
|
|
3777
|
+
"minWidth": "wide"
|
|
3778
|
+
},
|
|
3779
|
+
"contextLayout": {
|
|
3780
|
+
"gutter": "default",
|
|
3781
|
+
"minWidth": "wide"
|
|
3782
|
+
},
|
|
3783
|
+
"order": {
|
|
3784
|
+
"mobile": "mainFirst",
|
|
3785
|
+
"desktop": "mainFirst"
|
|
3786
|
+
},
|
|
3787
|
+
"main": {
|
|
3788
|
+
"key": null,
|
|
3789
|
+
"ref": null,
|
|
3790
|
+
"props": {
|
|
3791
|
+
"children": {
|
|
3792
|
+
"type": {},
|
|
3793
|
+
"key": null,
|
|
3794
|
+
"ref": null,
|
|
3795
|
+
"props": {
|
|
3796
|
+
"headline": "Discover our solutions for Industry 4.0",
|
|
3797
|
+
"text": "We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.",
|
|
3798
|
+
"buttons": [
|
|
3799
|
+
{
|
|
3800
|
+
"label": "Learn more"
|
|
3801
|
+
}
|
|
3802
|
+
]
|
|
3803
|
+
},
|
|
3804
|
+
"_owner": null
|
|
3805
|
+
}
|
|
3806
|
+
},
|
|
3807
|
+
"_owner": null
|
|
3808
|
+
},
|
|
3809
|
+
"context": {
|
|
3810
|
+
"key": null,
|
|
3811
|
+
"ref": null,
|
|
3812
|
+
"props": {
|
|
3813
|
+
"children": {
|
|
3814
|
+
"type": {},
|
|
3815
|
+
"key": null,
|
|
3816
|
+
"ref": null,
|
|
3817
|
+
"props": {
|
|
3818
|
+
"title": "Isabella Doe",
|
|
3819
|
+
"subtitle": "Creative Director",
|
|
3820
|
+
"image": {
|
|
3821
|
+
"src": "img/people/contact-isabella.png",
|
|
3822
|
+
"aspectRatio": "wide",
|
|
3823
|
+
"fullWidth": true
|
|
3824
|
+
},
|
|
3825
|
+
"links": [
|
|
3826
|
+
{
|
|
3827
|
+
"icon": "twitter",
|
|
3828
|
+
"url": "#",
|
|
3829
|
+
"label": "@Isabella_Doe",
|
|
3830
|
+
"ariaLabel": "Isabella Doe on Twitter"
|
|
3831
|
+
},
|
|
3832
|
+
{
|
|
3833
|
+
"url": "mailto:mail@example.com",
|
|
3834
|
+
"icon": "linkedin",
|
|
3835
|
+
"label": "Isabella.Doe",
|
|
3836
|
+
"ariaLabel": "Isabella Doe on LinkedIn"
|
|
3837
|
+
}
|
|
3838
|
+
]
|
|
3839
|
+
},
|
|
3840
|
+
"_owner": null
|
|
3841
|
+
}
|
|
3842
|
+
},
|
|
3843
|
+
"_owner": null
|
|
3844
|
+
}
|
|
3845
|
+
},
|
|
3846
|
+
"screenshot": "img/screenshots/layout-split-weighted--text-with-contact.png"
|
|
3847
|
+
},
|
|
3848
|
+
{
|
|
3849
|
+
"id": "layout-split-weighted--text-with-teaser",
|
|
3850
|
+
"group": "Layout/Split Weighted",
|
|
3785
3851
|
"name": "TextWithTeaser",
|
|
3786
|
-
"code": "<
|
|
3852
|
+
"code": "<SplitWeighted\n context={<TeaserCard button={{chevron: false, hidden: false, label: 'Read more'}} headline=\"Transforming Industry\" image=\"img/logos/castaway.svg\" imageRatio=\"landscape\" layout=\"row\" text=\"with Smart Solutions\" url=\"#\"/>}\n contextLayout={{\n gutter: 'default',\n minWidth: 'narrow'\n }}\n horizontalGutter=\"default\"\n main={<><Headline level=\"h2\" spaceAfter=\"minimum\" text=\"Innovative solutions for Industry 4.0\"/><Text highlightText text=\"We help companies make their production processes more efficient and future-proof through digitalization, automation, and smart technologies. Rely on our many years of experience in the industrial sector.\n\nRevolutionize your manufacturing with our tailored solutions designed to meet the specific needs of your industry.\"/></>}\n mainLayout={{\n gutter: 'small',\n minWidth: 'wide'\n }}\n order={{\n desktop: 'mainFirst',\n mobile: 'mainFirst'\n }}\n verticalGutter=\"default\"\n/>",
|
|
3787
3853
|
"args": {
|
|
3788
|
-
"
|
|
3789
|
-
"
|
|
3790
|
-
"
|
|
3791
|
-
"
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
|
|
3854
|
+
"verticalGutter": "default",
|
|
3855
|
+
"horizontalGutter": "default",
|
|
3856
|
+
"sticky": false,
|
|
3857
|
+
"mainLayout": {
|
|
3858
|
+
"gutter": "small",
|
|
3859
|
+
"minWidth": "wide"
|
|
3860
|
+
},
|
|
3861
|
+
"contextLayout": {
|
|
3862
|
+
"gutter": "default",
|
|
3863
|
+
"minWidth": "narrow"
|
|
3864
|
+
},
|
|
3865
|
+
"order": {
|
|
3866
|
+
"mobile": "mainFirst",
|
|
3867
|
+
"desktop": "mainFirst"
|
|
3868
|
+
},
|
|
3869
|
+
"main": {
|
|
3795
3870
|
"key": null,
|
|
3796
3871
|
"ref": null,
|
|
3797
3872
|
"props": {
|
|
@@ -3821,34 +3896,27 @@
|
|
|
3821
3896
|
},
|
|
3822
3897
|
"_owner": null
|
|
3823
3898
|
},
|
|
3824
|
-
"
|
|
3899
|
+
"context": {
|
|
3900
|
+
"type": {},
|
|
3825
3901
|
"key": null,
|
|
3826
3902
|
"ref": null,
|
|
3827
3903
|
"props": {
|
|
3828
|
-
"
|
|
3829
|
-
|
|
3830
|
-
"
|
|
3831
|
-
"
|
|
3832
|
-
"
|
|
3833
|
-
|
|
3834
|
-
|
|
3835
|
-
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
"imageRatio": "landscape",
|
|
3840
|
-
"headline": "Transforming Industry",
|
|
3841
|
-
"text": "with Smart Solutions",
|
|
3842
|
-
"image": "img/logos/castaway.svg",
|
|
3843
|
-
"url": "#"
|
|
3844
|
-
},
|
|
3845
|
-
"_owner": null
|
|
3846
|
-
}
|
|
3904
|
+
"layout": "row",
|
|
3905
|
+
"button": {
|
|
3906
|
+
"chevron": false,
|
|
3907
|
+
"hidden": false,
|
|
3908
|
+
"label": "Read more"
|
|
3909
|
+
},
|
|
3910
|
+
"imageRatio": "landscape",
|
|
3911
|
+
"headline": "Transforming Industry",
|
|
3912
|
+
"text": "with Smart Solutions",
|
|
3913
|
+
"image": "img/logos/castaway.svg",
|
|
3914
|
+
"url": "#"
|
|
3847
3915
|
},
|
|
3848
3916
|
"_owner": null
|
|
3849
3917
|
}
|
|
3850
3918
|
},
|
|
3851
|
-
"screenshot": "img/screenshots/layout-split-
|
|
3919
|
+
"screenshot": "img/screenshots/layout-split-weighted--text-with-teaser.png"
|
|
3852
3920
|
},
|
|
3853
3921
|
{
|
|
3854
3922
|
"id": "components-stats--count-up-with-icons",
|
|
@@ -1 +1,74 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FC } from "react";
|
|
3
|
+
/* eslint-disable */
|
|
4
|
+
/**
|
|
5
|
+
* This file was automatically generated by json-schema-to-typescript.
|
|
6
|
+
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
|
7
|
+
* and run json-schema-to-typescript to regenerate this file.
|
|
8
|
+
*/
|
|
9
|
+
import { CtaProps } from "../../CtaProps-babe4ee6.js";
|
|
10
|
+
import { DividerProps } from "../../DividerProps-2ef31901.js";
|
|
11
|
+
import { FaqProps } from "../../FaqProps-ad618cd5.js";
|
|
12
|
+
import { FeaturesProps } from "../../FeaturesProps-a9041d97.js";
|
|
13
|
+
import { GalleryProps } from "../../GalleryProps-76e7de44.js";
|
|
14
|
+
import { HeroProps } from "../../HeroProps-40f6c7f5.js";
|
|
15
|
+
import { HtmlProps } from "../../HtmlProps-9d091769.js";
|
|
16
|
+
import { ImageStoryProps } from "../../ImageStoryProps-e853e1e7.js";
|
|
17
|
+
import { ImageTextProps } from "../../ImageTextProps-9286cca4.js";
|
|
18
|
+
import { LogosProps } from "../../LogosProps-f9474fe2.js";
|
|
19
|
+
import { MosaicProps } from "../../MosaicProps-d52c7151.js";
|
|
20
|
+
import { SliderProps } from "../../SliderProps-babe4ee6.js";
|
|
21
|
+
import { StatsProps } from "../../StatsProps-bf5ef578.js";
|
|
22
|
+
import { TeaserCardProps } from "../../TeaserCardProps-994cb119.js";
|
|
23
|
+
import { TestimonialsProps } from "../../TestimonialsProps-e344f597.js";
|
|
24
|
+
import { TextProps } from "../../TextProps-a23170d2.js";
|
|
25
|
+
import { VideoCurtainProps } from "../../VideoCurtainProps-a2c0cc7f.js";
|
|
26
|
+
/**
|
|
27
|
+
* Sets the minimum width for each half of the split layout
|
|
28
|
+
*/
|
|
29
|
+
type ContentMinimumWidth = "narrow" | "medium" | "wide";
|
|
30
|
+
/**
|
|
31
|
+
* Sets the space between the content inside the two halves of the split layout
|
|
32
|
+
*/
|
|
33
|
+
type ContentGutter = "narrow" | "default" | "wide" | "none";
|
|
34
|
+
/**
|
|
35
|
+
* Determines the layout of the sections on mobile devices
|
|
36
|
+
*/
|
|
37
|
+
type MobileLayout = "stack" | "stackReverse";
|
|
38
|
+
/**
|
|
39
|
+
* Aligns the content vertically within the sections
|
|
40
|
+
*/
|
|
41
|
+
type VerticalAlignment = "top" | "center" | "bottom";
|
|
42
|
+
/**
|
|
43
|
+
* Sets the vertical space between the content of the split layout
|
|
44
|
+
*/
|
|
45
|
+
type VerticalGutter = "large" | "default" | "small" | "none";
|
|
46
|
+
/**
|
|
47
|
+
* Sets the horizontal space between the content of the split layout
|
|
48
|
+
*/
|
|
49
|
+
type HorizontalGutter = "large" | "default" | "small" | "none";
|
|
50
|
+
/**
|
|
51
|
+
* Allowed components for the first half of the split layout
|
|
52
|
+
*/
|
|
53
|
+
type First = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
|
|
54
|
+
/**
|
|
55
|
+
* Allowed components for the second half of the split layout
|
|
56
|
+
*/
|
|
57
|
+
type Second = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
|
|
58
|
+
interface SplitEvenProps {
|
|
59
|
+
contentMinWidth?: ContentMinimumWidth;
|
|
60
|
+
contentGutter?: ContentGutter;
|
|
61
|
+
mobileLayout?: MobileLayout;
|
|
62
|
+
verticalAlign?: VerticalAlignment;
|
|
63
|
+
verticalGutter?: VerticalGutter;
|
|
64
|
+
horizontalGutter?: HorizontalGutter;
|
|
65
|
+
firstComponents?: First;
|
|
66
|
+
secondComponents?: Second;
|
|
67
|
+
}
|
|
68
|
+
interface ComponentProps {
|
|
69
|
+
first?: React.ReactNode;
|
|
70
|
+
second?: React.ReactNode;
|
|
71
|
+
}
|
|
72
|
+
type SplitEvenComponentProps = SplitEvenProps & ComponentProps;
|
|
73
|
+
declare const SplitEven: FC<SplitEvenComponentProps>;
|
|
74
|
+
export { ComponentProps, SplitEvenComponentProps, SplitEven };
|
|
@@ -1 +1,7 @@
|
|
|
1
|
+
import "./split-even.css";
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import classnames from 'classnames';
|
|
1
4
|
|
|
5
|
+
const SplitEven = ({ mobileLayout = "stack", contentMinWidth = "medium", verticalAlign = "top", horizontalGutter = "default", verticalGutter = "default", contentGutter = "default", first, second, }) => (jsxs("div", { className: classnames("l-split-even", mobileLayout === "stackReverse" && "l-split-even--mobile_stack-reverse", horizontalGutter && `l-split-even--h-gutter-${horizontalGutter}`, verticalGutter && `l-split-even--v-gutter-${verticalGutter}`, contentMinWidth && `l-split-even--width-${contentMinWidth}`, verticalAlign && `l-split-even--align-${verticalAlign}`), children: [jsx("div", { className: classnames("l-split-even__content l-split-even__content--first", contentGutter && `l-split-even__content--gutter-${contentGutter}`), children: first }), jsx("div", { className: classnames("l-split-even__content l-split-even__content--second", contentGutter && `l-split-even__content--gutter-${contentGutter}`), children: second })] }));
|
|
6
|
+
|
|
7
|
+
export { SplitEven };
|