@kickstartds/ds-agency-premium 1.6.71--canary.45.1758.0 → 1.6.71--canary.45.1762.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 +103 -3
- package/dist/components/split-even/index.d.ts +69 -1
- package/dist/components/split-even/index.js +6 -0
- package/dist/components/split-even/split-even.css +95 -0
- 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 +101 -0
- package/dist/components/split-weighted/split-weighted.schema.dereffed.json +5950 -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
|
},
|
|
@@ -3850,6 +3850,106 @@
|
|
|
3850
3850
|
},
|
|
3851
3851
|
"screenshot": "img/screenshots/layout-split-even--text-with-teaser.png"
|
|
3852
3852
|
},
|
|
3853
|
+
{
|
|
3854
|
+
"id": "layout-split-weighted--text-with-contact",
|
|
3855
|
+
"group": "Layout/Split Weighted",
|
|
3856
|
+
"name": "TextWithContact",
|
|
3857
|
+
"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: 'narrow'\n }}\n horizontalGutter=\"large\"\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.\"/><Button label=\"Learn more\" variant=\"primary\"/></>}\n mainLayout={{\n gutter: 'small',\n minWidth: 'narrow'\n }}\n order={{\n desktop: 'mainFirst',\n mobile: 'mainFirst'\n }}\n verticalGutter=\"default\"\n/>",
|
|
3858
|
+
"args": {
|
|
3859
|
+
"verticalGutter": "default",
|
|
3860
|
+
"horizontalGutter": "large",
|
|
3861
|
+
"sticky": false,
|
|
3862
|
+
"mainLayout": {
|
|
3863
|
+
"gutter": "small",
|
|
3864
|
+
"minWidth": "narrow"
|
|
3865
|
+
},
|
|
3866
|
+
"contextLayout": {
|
|
3867
|
+
"gutter": "default",
|
|
3868
|
+
"minWidth": "narrow"
|
|
3869
|
+
},
|
|
3870
|
+
"order": {
|
|
3871
|
+
"mobile": "mainFirst",
|
|
3872
|
+
"desktop": "mainFirst"
|
|
3873
|
+
},
|
|
3874
|
+
"main": {
|
|
3875
|
+
"key": null,
|
|
3876
|
+
"ref": null,
|
|
3877
|
+
"props": {
|
|
3878
|
+
"children": [
|
|
3879
|
+
{
|
|
3880
|
+
"type": {},
|
|
3881
|
+
"key": null,
|
|
3882
|
+
"ref": null,
|
|
3883
|
+
"props": {
|
|
3884
|
+
"text": "Innovative solutions for Industry 4.0",
|
|
3885
|
+
"level": "h2",
|
|
3886
|
+
"spaceAfter": "minimum"
|
|
3887
|
+
},
|
|
3888
|
+
"_owner": null
|
|
3889
|
+
},
|
|
3890
|
+
{
|
|
3891
|
+
"type": {},
|
|
3892
|
+
"key": null,
|
|
3893
|
+
"ref": null,
|
|
3894
|
+
"props": {
|
|
3895
|
+
"highlightText": true,
|
|
3896
|
+
"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."
|
|
3897
|
+
},
|
|
3898
|
+
"_owner": null
|
|
3899
|
+
},
|
|
3900
|
+
{
|
|
3901
|
+
"type": {},
|
|
3902
|
+
"key": null,
|
|
3903
|
+
"ref": null,
|
|
3904
|
+
"props": {
|
|
3905
|
+
"label": "Learn more",
|
|
3906
|
+
"variant": "primary"
|
|
3907
|
+
},
|
|
3908
|
+
"_owner": null
|
|
3909
|
+
}
|
|
3910
|
+
]
|
|
3911
|
+
},
|
|
3912
|
+
"_owner": null
|
|
3913
|
+
},
|
|
3914
|
+
"context": {
|
|
3915
|
+
"key": null,
|
|
3916
|
+
"ref": null,
|
|
3917
|
+
"props": {
|
|
3918
|
+
"children": {
|
|
3919
|
+
"type": {},
|
|
3920
|
+
"key": null,
|
|
3921
|
+
"ref": null,
|
|
3922
|
+
"props": {
|
|
3923
|
+
"title": "Isabella Doe",
|
|
3924
|
+
"subtitle": "Creative Director",
|
|
3925
|
+
"image": {
|
|
3926
|
+
"src": "img/people/contact-isabella.png",
|
|
3927
|
+
"aspectRatio": "wide",
|
|
3928
|
+
"fullWidth": true
|
|
3929
|
+
},
|
|
3930
|
+
"links": [
|
|
3931
|
+
{
|
|
3932
|
+
"icon": "twitter",
|
|
3933
|
+
"url": "#",
|
|
3934
|
+
"label": "@Isabella_Doe",
|
|
3935
|
+
"ariaLabel": "Isabella Doe on Twitter"
|
|
3936
|
+
},
|
|
3937
|
+
{
|
|
3938
|
+
"url": "mailto:mail@example.com",
|
|
3939
|
+
"icon": "linkedin",
|
|
3940
|
+
"label": "Isabella.Doe",
|
|
3941
|
+
"ariaLabel": "Isabella Doe on LinkedIn"
|
|
3942
|
+
}
|
|
3943
|
+
]
|
|
3944
|
+
},
|
|
3945
|
+
"_owner": null
|
|
3946
|
+
}
|
|
3947
|
+
},
|
|
3948
|
+
"_owner": null
|
|
3949
|
+
}
|
|
3950
|
+
},
|
|
3951
|
+
"screenshot": "img/screenshots/layout-split-weighted--text-with-contact.png"
|
|
3952
|
+
},
|
|
3853
3953
|
{
|
|
3854
3954
|
"id": "components-stats--count-up-with-icons",
|
|
3855
3955
|
"group": "Components/Stats",
|
|
@@ -1 +1,69 @@
|
|
|
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" | "medium" | "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 space between the two halves of the split layout
|
|
44
|
+
*/
|
|
45
|
+
type Gutter = "large" | "default" | "small" | "none";
|
|
46
|
+
/**
|
|
47
|
+
* Allowed components for the first half of the split layout
|
|
48
|
+
*/
|
|
49
|
+
type First = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
|
|
50
|
+
/**
|
|
51
|
+
* Allowed components for the second half of the split layout
|
|
52
|
+
*/
|
|
53
|
+
type Second = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
|
|
54
|
+
interface SplitEvenProps {
|
|
55
|
+
contentMinWidth?: ContentMinimumWidth;
|
|
56
|
+
contentGutter?: ContentGutter;
|
|
57
|
+
mobileLayout?: MobileLayout;
|
|
58
|
+
verticalAlign?: VerticalAlignment;
|
|
59
|
+
gutter?: Gutter;
|
|
60
|
+
firstComponents?: First;
|
|
61
|
+
secondComponents?: Second;
|
|
62
|
+
}
|
|
63
|
+
interface ComponentProps {
|
|
64
|
+
first?: React.ReactNode;
|
|
65
|
+
second?: React.ReactNode;
|
|
66
|
+
}
|
|
67
|
+
type SplitEvenComponentProps = SplitEvenProps & ComponentProps;
|
|
68
|
+
declare const SplitEven: FC<SplitEvenComponentProps>;
|
|
69
|
+
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", gutter = "default", contentGutter = "default", first, second, }) => (jsxs("div", { className: classnames("l-split-even", mobileLayout === "stackReverse" && "l-split-even--mobile_stack-reverse", gutter && `l-split-even--gutter-${gutter}`, contentGutter && `l-split-even--content-gutter-${contentGutter}`, contentMinWidth && `l-split-even--width-${contentMinWidth}`, verticalAlign && `l-split-even--align-${verticalAlign}`), children: [jsx("div", { className: "l-split-even__content l-split-even__content--first", children: first }), jsx("div", { className: "l-split-even__content l-split-even__content--second", children: second })] }));
|
|
6
|
+
|
|
7
|
+
export { SplitEven };
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
.l-split-even {
|
|
2
|
+
--dsa-split-even--gutter_small: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
|
|
3
|
+
--dsa-split-even--gutter_default: var(--ks-spacing-stack-m) var(--ks-spacing-inline-m);
|
|
4
|
+
--dsa-split-even--gutter_large: var(--ks-spacing-stack-xl) var(--ks-spacing-xxl);
|
|
5
|
+
--dsa-split-even__content--gutter_small: var(--ks-spacing-stack-s);
|
|
6
|
+
--dsa-split-even__content--gutter_default: var(--ks-spacing-stack-m);
|
|
7
|
+
--dsa-split-even__content--gutter_large: var(--ks-spacing-stack-xl);
|
|
8
|
+
--dsa-split-even__content--flex-basis_narrow: var(--dsa-tile--width_small);
|
|
9
|
+
--dsa-split-even__content--flex-basis_medium: var(--dsa-tile--width_medium);
|
|
10
|
+
--dsa-split-even__content--flex-basis_wide: var(--dsa-tile--width_large);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.l-split-even {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-wrap: wrap;
|
|
16
|
+
gap: var(--dsa-split-even--gutter);
|
|
17
|
+
}
|
|
18
|
+
.l-split-even--width-narrow {
|
|
19
|
+
--dsa-split-even__content--flex-basis: var(
|
|
20
|
+
--dsa-split-even__content--flex-basis_narrow,
|
|
21
|
+
var(--dsa-tile--width_small)
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
.l-split-even--width-medium {
|
|
25
|
+
--dsa-split-even__content--flex-basis: var(
|
|
26
|
+
--dsa-split-even__content--flex-basis_medium,
|
|
27
|
+
var(--dsa-tile--width_medium)
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
.l-split-even--width-wide {
|
|
31
|
+
--dsa-split-even__content--flex-basis: var(
|
|
32
|
+
--dsa-split-even__content--flex-basis_wide,
|
|
33
|
+
var(--dsa-tile--width_large)
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
.l-split-even--gutter-none {
|
|
37
|
+
--dsa-split-even--gutter: 0;
|
|
38
|
+
}
|
|
39
|
+
.l-split-even--gutter-default {
|
|
40
|
+
--dsa-split-even--gutter: var(
|
|
41
|
+
--dsa-split-even--gutter_default,
|
|
42
|
+
var(--ks-spacing-stack-m) var(--ks-spacing-inline-m)
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
.l-split-even--gutter-small {
|
|
46
|
+
--dsa-split-even--gutter: var(
|
|
47
|
+
--dsa-split-even--gutter_small,
|
|
48
|
+
var(--ks-spacing-stack-s) var(--ks-spacing-inline-s)
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
.l-split-even--gutter-large {
|
|
52
|
+
--dsa-split-even--gutter: var(
|
|
53
|
+
--dsa-split-even--gutter_large,
|
|
54
|
+
var(--ks-spacing-stack-xl) var(--ks-spacing-inline-xl)
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
.l-split-even--content-gutter-none {
|
|
58
|
+
--dsa-split-even__content--gutter: 0;
|
|
59
|
+
}
|
|
60
|
+
.l-split-even--content-gutter-medium {
|
|
61
|
+
--dsa-split-even__content--gutter: var(--dsa-split-even__content--gutter_default, var(--ks-spacing-stack-m));
|
|
62
|
+
}
|
|
63
|
+
.l-split-even--content-gutter-small {
|
|
64
|
+
--dsa-split-even__content--gutter: var(--dsa-split-even__content--gutter_small, var(--ks-spacing-stack-s));
|
|
65
|
+
}
|
|
66
|
+
.l-split-even--content-gutter-large {
|
|
67
|
+
--dsa-split-even__content--gutter: var(--dsa-split-even__content--gutter_large, var(--ks-spacing-stack-xl));
|
|
68
|
+
}
|
|
69
|
+
.l-split-even--align-top {
|
|
70
|
+
align-items: flex-start;
|
|
71
|
+
}
|
|
72
|
+
.l-split-even--align-center {
|
|
73
|
+
align-items: center;
|
|
74
|
+
}
|
|
75
|
+
.l-split-even--align-bottom {
|
|
76
|
+
align-items: flex-end;
|
|
77
|
+
}
|
|
78
|
+
.l-split-even--mobile_stack-reverse {
|
|
79
|
+
flex-wrap: wrap-reverse;
|
|
80
|
+
}
|
|
81
|
+
.l-split-even--mobile_stack-reverse.l-split-even--align-top {
|
|
82
|
+
align-items: flex-end;
|
|
83
|
+
}
|
|
84
|
+
.l-split-even--mobile_stack-reverse.l-split-even--align-bottom {
|
|
85
|
+
align-items: flex-start;
|
|
86
|
+
}
|
|
87
|
+
.l-split-even__content {
|
|
88
|
+
flex: 1 1 var(--dsa-split-even__content--flex-basis);
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-direction: column;
|
|
91
|
+
gap: var(--dsa-split-even__content--gutter);
|
|
92
|
+
}
|
|
93
|
+
.l-split-even__content .c-button {
|
|
94
|
+
width: fit-content;
|
|
95
|
+
}
|
|
@@ -0,0 +1,101 @@
|
|
|
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 vertical space between the content of the split layout
|
|
28
|
+
*/
|
|
29
|
+
type VerticalGutter = "large" | "default" | "small" | "none";
|
|
30
|
+
/**
|
|
31
|
+
* Sets the horizontal space between the content of the split layout
|
|
32
|
+
*/
|
|
33
|
+
type HorizontalGutter = "large" | "default" | "small" | "none";
|
|
34
|
+
/**
|
|
35
|
+
* Makes the side part sticky on scroll
|
|
36
|
+
*/
|
|
37
|
+
type Sticky = boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Sets the space between the content of the split layout
|
|
40
|
+
*/
|
|
41
|
+
type ContentGutter = "large" | "default" | "small" | "none";
|
|
42
|
+
/**
|
|
43
|
+
* Sets the minimum width of the main section
|
|
44
|
+
*/
|
|
45
|
+
type MinimumWidth = "narrow" | "wide";
|
|
46
|
+
/**
|
|
47
|
+
* Size of gutter to use
|
|
48
|
+
*/
|
|
49
|
+
type Gutter = "large" | "default" | "small" | "none";
|
|
50
|
+
/**
|
|
51
|
+
* Sets the minimum width of the main section
|
|
52
|
+
*/
|
|
53
|
+
type MinimumWidth1 = "narrow" | "wide";
|
|
54
|
+
/**
|
|
55
|
+
* Determines the order of sections on mobile devices
|
|
56
|
+
*/
|
|
57
|
+
type MobileOrder = "mainFirst" | "contextFirst";
|
|
58
|
+
/**
|
|
59
|
+
* Determines the order of sections on desktop devices
|
|
60
|
+
*/
|
|
61
|
+
type DesktopOrder = "mainFirst" | "contextFirst";
|
|
62
|
+
/**
|
|
63
|
+
* Allowed components for the main half of the split layout
|
|
64
|
+
*/
|
|
65
|
+
type Main = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
|
|
66
|
+
/**
|
|
67
|
+
* Allowed components for the context half of the split layout
|
|
68
|
+
*/
|
|
69
|
+
type Context = (CtaProps | DividerProps | FaqProps | FeaturesProps | GalleryProps | HeroProps | HtmlProps | ImageStoryProps | ImageTextProps | LogosProps | MosaicProps | SliderProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps)[];
|
|
70
|
+
interface SplitWeightedProps {
|
|
71
|
+
verticalGutter?: VerticalGutter;
|
|
72
|
+
horizontalGutter?: HorizontalGutter;
|
|
73
|
+
sticky?: Sticky;
|
|
74
|
+
mainLayout?: MainLayout;
|
|
75
|
+
contextLayout?: ContextLayout;
|
|
76
|
+
order?: Order;
|
|
77
|
+
mainComponents?: Main;
|
|
78
|
+
contextComponents?: Context;
|
|
79
|
+
}
|
|
80
|
+
interface MainLayout {
|
|
81
|
+
gutter?: ContentGutter;
|
|
82
|
+
minWidth?: MinimumWidth;
|
|
83
|
+
}
|
|
84
|
+
interface ContextLayout {
|
|
85
|
+
gutter?: Gutter;
|
|
86
|
+
minWidth?: MinimumWidth1;
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Sets the order of the main and context sections in the split layout
|
|
90
|
+
*/
|
|
91
|
+
interface Order {
|
|
92
|
+
mobile?: MobileOrder;
|
|
93
|
+
desktop?: DesktopOrder;
|
|
94
|
+
}
|
|
95
|
+
interface ComponentProps {
|
|
96
|
+
main?: React.ReactNode;
|
|
97
|
+
context?: React.ReactNode;
|
|
98
|
+
}
|
|
99
|
+
type SplitWeightedComponentProps = SplitWeightedProps & ComponentProps;
|
|
100
|
+
declare const SplitWeighted: FC<SplitWeightedComponentProps>;
|
|
101
|
+
export { ComponentProps, SplitWeightedComponentProps, SplitWeighted };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import "./split-weighted.css";
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import classnames from 'classnames';
|
|
4
|
+
|
|
5
|
+
const SplitWeighted = ({ order, mainLayout, contextLayout, horizontalGutter = "default", verticalGutter = "default", main, context, sticky = false, }) => (jsxs("div", { className: classnames("l-split-weighted", order?.desktop === "contextFirst" &&
|
|
6
|
+
"l-split-weighted--desktop-context-first", order?.mobile === "contextFirst" &&
|
|
7
|
+
"l-split-weighted--mobile-context-first", horizontalGutter && `l-split-weighted--h-gutter-${horizontalGutter}`, verticalGutter && `l-split-weighted--v-gutter-${verticalGutter}`, sticky && `l-split-weighted--sticky`), children: [jsx("div", { className: classnames("l-split-weighted__main l-split-weighted__content", mainLayout?.gutter &&
|
|
8
|
+
`l-split-weighted__main--gutter-${mainLayout.gutter}`, mainLayout?.minWidth &&
|
|
9
|
+
`l-split-weighted__main--width-${mainLayout.minWidth}`), children: sticky ? (jsx("div", { className: "l-split-weighted__sticky-container", children: main })) : (main) }), jsx("div", { className: classnames("l-split-weighted__context l-split-weighted__content", contextLayout?.gutter &&
|
|
10
|
+
`l-split-weighted__context--gutter-${contextLayout.gutter || "large"}`, contextLayout?.minWidth &&
|
|
11
|
+
`l-split-weighted__context--width-${contextLayout.minWidth}`), children: sticky ? (jsx("div", { className: "l-split-weighted__sticky-container", children: context })) : (context) })] }));
|
|
12
|
+
|
|
13
|
+
export { SplitWeighted };
|