@kickstartds/ds-agency-premium 1.4.16--canary.15.832.0 → 1.4.17--canary.15.838.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.
@@ -20,13 +20,17 @@ type ImageSource = string;
20
20
  */
21
21
  type AltText = string;
22
22
  /**
23
- * The Twitter name of the author
23
+ * Image uses all the horizontal space vailable
24
24
  */
25
- type Twitter = string;
25
+ type FullWidth = boolean;
26
26
  /**
27
- * The Email of the author
27
+ * Aspect Ratio of the Images
28
28
  */
29
- type Email = string;
29
+ type AspectRatio = "wide" | "square" | "vertical";
30
+ /**
31
+ * Open link in new Tab
32
+ */
33
+ type OpenLinkInNewTab = boolean;
30
34
  /**
31
35
  * The icon name for the social link
32
36
  */
@@ -74,8 +78,14 @@ interface Author {
74
78
  image?: {
75
79
  src?: ImageSource;
76
80
  alt?: AltText;
81
+ fullWidth?: FullWidth;
82
+ aspectRatio?: AspectRatio;
77
83
  };
78
- twitter?: Twitter;
79
- email?: Email;
84
+ links?: {
85
+ icon?: string;
86
+ label?: string;
87
+ href?: string;
88
+ newTab?: OpenLinkInNewTab;
89
+ }[];
80
90
  }
81
- export { Name, Byline, ImageSource, AltText, Twitter, Email, Icon, Href, Title, SocialSharing, ReadingTime, PublishedDate, BlogAsideProps, Author };
91
+ export { Name, Byline, ImageSource, AltText, FullWidth, AspectRatio, OpenLinkInNewTab, 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-3f6e4072.js";
7
- import { BlogAsideProps } from "./BlogAsideProps-99489f0b.js";
7
+ import { BlogAsideProps } from "./BlogAsideProps-b06e0358.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,23 +1,65 @@
1
+ .l-container--blog-aside {
2
+ /* stylelint-disable-next-line property-no-unknown */
3
+ container-name: blog-aside;
4
+ }
5
+
1
6
  .dsa-blog-aside {
7
+ --dsa-blog-aside--gap: var(--ks-spacing-stack-xs);
8
+ --dsa-blog-aside__author__title--font: var(--ks-font-copy-m);
9
+ --dsa-blog-aside__author__subtitle--font: var(--ks-font-copy-s);
10
+ --dsa-blog-aside__author__image--flex-basis: 120px;
11
+ --dsa-blog-aside__author__link--font: var(--ks-font-interface-s);
2
12
  --dsa-blog-aside__meta__item--font: var(--ks-font-interface-s);
3
13
  --dsa-blog-aside__meta__item--color: var(--ks-text-color-interface);
4
14
  --dsa-blog-aside__meta__item__icon--size: 1.2em;
5
- --dsa-blog-aside__title--color: var(--dsa-headline--color);
6
- --dsa-blog-aside__title--font: var(--dsa-headline_h3--font);
7
- --dsa-blog-aside__links--color: var(--dsa-link--color);
8
- --dsa-blog-aside__divider--color: var(--ks-border-color-accent);
15
+ --dsa-blog-aside__share-bar__icon--size: 1.75em;
16
+ --dsa-blog-aside__sharebar__link--color: var(--dsa-link--color);
17
+ --dsa-blog-aside__sharebar__link--color_hover: var(--dsa-link--color_hover);
18
+ }
19
+ @container blog-aside (min-width: 640px) {
20
+ .dsa-blog-aside {
21
+ --dsa-blog-aside__author__title--font: var(--ks-font-copy-l);
22
+ --dsa-blog-aside__author__subtitle--font: var(--ks-font-copy-m);
23
+ --dsa-blog-aside__author__link--font: var(--ks-font-interface-m);
24
+ --dsa-blog-aside__meta__item--font: var(--ks-font-interface-m);
25
+ --dsa-blog-aside__share-bar__icon--size: 2em;
26
+ }
27
+ }
28
+
29
+ .l-container--blog-aside {
30
+ /* stylelint-disable-next-line property-no-unknown */
31
+ container-name: blog-aside;
9
32
  }
10
33
 
11
34
  .dsa-blog-aside {
12
- --c-post-aside--gap: var(--ks-spacing-stack-s);
35
+ display: flex;
36
+ flex-direction: column;
37
+ gap: var(--dsa-blog-aside--gap);
38
+ }
39
+ .dsa-blog-aside .dsa-contact {
40
+ --dsa-contact--gap-vertical: var(--dsa-blog-asde__author--gap-vertical, var(--ks-spacing-stack-xs));
41
+ --dsa-contact--gap-horizontal: var(--dsa-blog-asde__author--gap-horizontal, var(--ks-spacing-inline-xs));
42
+ --dsa-contact__image--flex-basis: var(--dsa-blog-aside__author__image--flex-basis, 200px);
43
+ --dsa-contact__title--font: var(--dsa-blog-aside__author__title--font, var(--ks-font-copy-m));
44
+ --dsa-contact__subtitle--font: var(--dsa-blog-aside__author__subtitle--font, var(--ks-font-copy-s));
45
+ --dsa-contact__link--font: var(--dsa-blog-aside__author__link--font, var(--ks-font-interface-s));
13
46
  }
14
47
  .dsa-blog-aside .c-post-meta {
15
- --c-post-meta--gap: var(--ks-spacing-m);
16
- --c-post-meta_item--gap: var(--ks-spacing-xs);
48
+ --c-post-meta--gap: 0.25em var(--ks-spacing-inline-s);
49
+ --c-post-meta_item--gap: 0.5em;
17
50
  --c-post-meta_item--font: var(--dsa-blog-aside__meta__item--font, var(--ks-font-interface-s));
18
51
  --c-post-meta_item--color: var(--dsa-blog-aside__meta__item--color, var(--ks-text-color-interface));
19
52
  --c-post-meta_item--icon-size: var(--dsa-blog-aside__meta__item__icon--size, 1.2em);
20
53
  }
54
+ .dsa-blog-aside .c-post-share-bar {
55
+ --c-post-share-bar_link--icon-size: var(--dsa-blog-aside__share-bar__icon--size, 1.5rem);
56
+ }
57
+ .dsa-blog-aside .c-post-share-bar .c-post-share-bar__link {
58
+ color: var(--dsa-blog-aside__sharebar__link--color, var(--dsa-link--color));
59
+ }
60
+ .dsa-blog-aside .c-post-share-bar .c-post-share-bar__link:hover {
61
+ color: var(--dsa-blog-aside__sharebar__link--color_hover, var(--dsa-link--color_hover));
62
+ }
21
63
  .dsa-blog-aside .c-contact__links {
22
64
  color: var(--dsa-blog-aside__links--color, var(--dsa-link--color));
23
65
  }
@@ -45,25 +45,64 @@
45
45
  "examples": [
46
46
  "Picture of Jane Smith"
47
47
  ]
48
+ },
49
+ "fullWidth": {
50
+ "type": "boolean",
51
+ "title": "Full Width",
52
+ "description": "Image uses all the horizontal space vailable",
53
+ "default": false
54
+ },
55
+ "aspectRatio": {
56
+ "type": "string",
57
+ "title": "aspectRatio",
58
+ "description": "Aspect Ratio of the Images",
59
+ "enum": [
60
+ "wide",
61
+ "square",
62
+ "vertical"
63
+ ],
64
+ "default": "square"
48
65
  }
49
66
  },
50
67
  "additionalProperties": false
51
68
  },
52
- "twitter": {
53
- "title": "Twitter",
54
- "description": "The Twitter name of the author",
55
- "type": "string",
56
- "examples": [
57
- "johndoe"
58
- ]
59
- },
60
- "email": {
61
- "title": "Email",
62
- "description": "The Email of the author",
63
- "type": "string",
64
- "pattern": "^[A-Za-z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Za-z0-9.-]+$",
69
+ "links": {
70
+ "type": "array",
71
+ "items": {
72
+ "type": "object",
73
+ "properties": {
74
+ "icon": {
75
+ "type": "string"
76
+ },
77
+ "label": {
78
+ "type": "string"
79
+ },
80
+ "href": {
81
+ "type": "string",
82
+ "format": "uri"
83
+ },
84
+ "newTab": {
85
+ "title": "Open link in new Tab",
86
+ "description": "Open link in new Tab",
87
+ "type": "boolean",
88
+ "default": false
89
+ }
90
+ },
91
+ "additionalProperties": false
92
+ },
65
93
  "examples": [
66
- "johndoe@example.com"
94
+ [
95
+ {
96
+ "icon": "phone",
97
+ "label": "0228 / 688 966 20",
98
+ "href": "tel:+4922868896620"
99
+ },
100
+ {
101
+ "icon": "email",
102
+ "label": "mail@example.com",
103
+ "href": "mailto:mail@example.com"
104
+ }
105
+ ]
67
106
  ]
68
107
  }
69
108
  },
@@ -23,35 +23,10 @@
23
23
  "examples": ["CEO at Company"]
24
24
  },
25
25
  "image": {
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
- }
42
- },
43
- "twitter": {
44
- "title": "Twitter",
45
- "description": "The Twitter name of the author",
46
- "type": "string",
47
- "examples": ["johndoe"]
26
+ "$ref": "http://schema.mydesignsystem.com/contact.schema.json#/properties/image"
48
27
  },
49
- "email": {
50
- "title": "Email",
51
- "description": "The Email of the author",
52
- "type": "string",
53
- "pattern": "^[A-Za-z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Za-z0-9.-]+$",
54
- "examples": ["johndoe@example.com"]
28
+ "links": {
29
+ "$ref": "http://schema.mydesignsystem.com/contact.schema.json#/properties/links"
55
30
  }
56
31
  },
57
32
  "additionalProperties": false,
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { BlogAsideProps } from "../../BlogAsideProps-99489f0b.js";
2
+ import { BlogAsideProps } from "../../BlogAsideProps-b06e0358.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>>;
@@ -1,10 +1,21 @@
1
1
  import "./blog-aside.css";
2
- import { jsx } from 'react/jsx-runtime';
2
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
  import classnames from 'classnames';
4
4
  import { forwardRef, createContext, useContext } from 'react';
5
- import { PostAside } from '@kickstartds/blog/lib/post-aside';
5
+ import { PostMeta } from '@kickstartds/blog/lib/post-meta';
6
+ import { PostShareBar } from '@kickstartds/blog/lib/post-share-bar';
7
+ import { Container } from '@kickstartds/core/lib/container';
8
+ import { Contact } from '../contact/index.js';
9
+ import { Headline } from '../headline/index.js';
10
+ import '@kickstartds/base/lib/picture';
11
+ import '@kickstartds/base/lib/contact';
12
+ import '@kickstartds/base/lib/link';
13
+ import '@kickstartds/base/lib/icon';
14
+ import '@kickstartds/base/lib/rich-text';
15
+ import 'markdown-to-jsx';
16
+ import '@kickstartds/base/lib/headline';
6
17
 
7
- const BlogAsideContextDefault = forwardRef(({ author, socialSharing, readingTime, date, className, ...rest }, ref) => {
18
+ const BlogAsideContextDefault = forwardRef(({ author, socialSharing, readingTime, date, className }) => {
8
19
  const socialLinks = socialSharing?.map((link) => {
9
20
  return {
10
21
  icon: link.icon,
@@ -23,35 +34,7 @@ const BlogAsideContextDefault = forwardRef(({ author, socialSharing, readingTime
23
34
  icon: "time",
24
35
  text: readingTime,
25
36
  });
26
- const authorLinks = [];
27
- if (author?.twitter)
28
- authorLinks.push({
29
- href: `https://twitter.com/${author.twitter}`,
30
- icon: "twitter",
31
- newTab: true,
32
- label: `@${author.twitter}`,
33
- });
34
- if (author?.email)
35
- authorLinks.push({
36
- href: `mailto:${author.email}`,
37
- icon: "email",
38
- newTab: false,
39
- label: author.email,
40
- });
41
- return (jsx(PostAside, { ...rest, className: classnames(className, "dsa-blog-aside"), author: {
42
- title: author?.name,
43
- subtitle: author?.byline,
44
- image: author?.image,
45
- links: authorLinks,
46
- }, shareBar: {
47
- headline: {
48
- text: "Share this post",
49
- level: "h3",
50
- },
51
- links: socialLinks,
52
- }, meta: {
53
- items: metaItems,
54
- }, ref: ref }));
37
+ return (jsx(Container, { name: "blog-aside", children: jsxs("div", { className: classnames(className, "dsa-blog-aside"), children: [jsx(Contact, { className: "dsa-blog-aside__author", title: author?.name, subtitle: author?.byline, image: author?.image, links: author?.links }), metaItems && (jsx(Fragment, { children: 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 })] }))] }) }));
55
38
  });
56
39
  const BlogAsideContext = createContext(BlogAsideContextDefault);
57
40
  const BlogAside = forwardRef((props, ref) => {
@@ -125,25 +125,64 @@
125
125
  "examples": [
126
126
  "Picture of Jane Smith"
127
127
  ]
128
+ },
129
+ "fullWidth": {
130
+ "type": "boolean",
131
+ "title": "Full Width",
132
+ "description": "Image uses all the horizontal space vailable",
133
+ "default": false
134
+ },
135
+ "aspectRatio": {
136
+ "type": "string",
137
+ "title": "aspectRatio",
138
+ "description": "Aspect Ratio of the Images",
139
+ "enum": [
140
+ "wide",
141
+ "square",
142
+ "vertical"
143
+ ],
144
+ "default": "square"
128
145
  }
129
146
  },
130
147
  "additionalProperties": false
131
148
  },
132
- "twitter": {
133
- "title": "Twitter",
134
- "description": "The Twitter name of the author",
135
- "type": "string",
136
- "examples": [
137
- "johndoe"
138
- ]
139
- },
140
- "email": {
141
- "title": "Email",
142
- "description": "The Email of the author",
143
- "type": "string",
144
- "pattern": "^[A-Za-z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Za-z0-9.-]+$",
149
+ "links": {
150
+ "type": "array",
151
+ "items": {
152
+ "type": "object",
153
+ "properties": {
154
+ "icon": {
155
+ "type": "string"
156
+ },
157
+ "label": {
158
+ "type": "string"
159
+ },
160
+ "href": {
161
+ "type": "string",
162
+ "format": "uri"
163
+ },
164
+ "newTab": {
165
+ "title": "Open link in new Tab",
166
+ "description": "Open link in new Tab",
167
+ "type": "boolean",
168
+ "default": false
169
+ }
170
+ },
171
+ "additionalProperties": false
172
+ },
145
173
  "examples": [
146
- "johndoe@example.com"
174
+ [
175
+ {
176
+ "icon": "phone",
177
+ "label": "0228 / 688 966 20",
178
+ "href": "tel:+4922868896620"
179
+ },
180
+ {
181
+ "icon": "email",
182
+ "label": "mail@example.com",
183
+ "href": "mailto:mail@example.com"
184
+ }
185
+ ]
147
186
  ]
148
187
  }
149
188
  },
@@ -1,4 +1,4 @@
1
- import { BlogPostProps } from "../../BlogPostProps-99489f0b.js";
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 { BlogPost };
@@ -12,8 +12,18 @@ import '@kickstartds/core/lib/react';
12
12
  import '@kickstartds/base/lib/section';
13
13
  import '../section/js/Section.client.js';
14
14
  import '@kickstartds/core/lib/component';
15
- import '@kickstartds/blog/lib/post-aside';
15
+ import '@kickstartds/blog/lib/post-meta';
16
+ import '@kickstartds/blog/lib/post-share-bar';
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';
16
23
  import '@kickstartds/base/lib/rich-text';
24
+ import '../headline/index.js';
25
+ import 'markdown-to-jsx';
26
+ import '@kickstartds/base/lib/headline';
17
27
  import '@kickstartds/content/lib/storytelling';
18
28
  import '@kickstartds/base/lib/button';
19
29
  import '../button-group/index.js';
@@ -27,6 +27,8 @@
27
27
  --dsa-contact__link__icon--margin-right: 0.5em;
28
28
  --dsa-contact__link__icon--size: 1.5em;
29
29
  --dsa-contact__link__icon--color: inherit;
30
+ --dsa-contact__link--text-decoration: none;
31
+ --dsa-contact__link--text-decoration_hover: none;
30
32
  }
31
33
 
32
34
  .l-container--contact {
@@ -105,6 +107,7 @@
105
107
  color: var(--dsa-contact__link--color);
106
108
  font: var(--dsa-contact__link--font);
107
109
  font-weight: var(--dsa-contact__link--font-weight);
110
+ text-decoration: var(--dsa-contact__link--text-decoration);
108
111
  }
109
112
  .dsa-contact a.dsa-contact__link .icon {
110
113
  width: var(--dsa-contact__link__icon--size);
@@ -114,6 +117,7 @@
114
117
  }
115
118
  .dsa-contact a.dsa-contact__link:hover {
116
119
  color: var(--dsa-contact__link--color_hover);
120
+ text-decoration: var(--dsa-contact__link--text-decoration_hover);
117
121
  }
118
122
  .dsa-contact .c-headline {
119
123
  --c-headline--color: var(--dsa-contact__headline--color);
@@ -2,18 +2,39 @@
2
2
  --dsa-headline--color: var(--ks-text-color-display);
3
3
  --dsa-headline--font-weight: var(--ks-font-weight-medium);
4
4
  --dsa-headline--text-transform: none;
5
+ --dsa-headline--gap: 0.25em;
6
+ --dsa-headline--space-after_large: var(--ks-spacing-stack-l);
7
+ --dsa-headline--space-after_small: var(--ks-spacing-stack-m);
8
+ --dsa-headline--space-after_minimum: var(--ks-spacing-stack-s);
5
9
  --dsa-headline--higlight-background: linear-gradient(90deg, var(--ks-color-secondary), var(--ks-color-primary));
6
10
  --dsa-headline__subheadline--color: var(--ks-text-color-primary);
7
11
  --dsa-headline__subheadline--font-weight: var(--ks-font-weight-semi-bold);
8
- --dsa-headline--gap: 0.25em;
9
12
  --dsa-headline_h1--font: var(--ks-font-display-xxl);
10
13
  --dsa-headline_h1__subheadline--font: var(--ks-font-copy-l);
14
+ --dsa-headline_h1--space-after_large: var(--ks-spacing-stack-l);
15
+ --dsa-headline_h1--space-after_small: var(--ks-spacing-stack-m);
16
+ --dsa-headline_h1--space-after_minimum: var(--ks-spacing-stack-s);
11
17
  --dsa-headline_h2--font: var(--ks-font-display-xl);
12
18
  --dsa-headline_h2__subheadline--font: var(--ks-font-copy-m);
19
+ --dsa-headline_h2--space-after_large: var(--ks-spacing-stack-l);
20
+ --dsa-headline_h2--space-after_small: var(--ks-spacing-stack-m);
21
+ --dsa-headline_h2--space-after_minimum: var(--ks-spacing-stack-s);
13
22
  --dsa-headline_h3--font: var(--ks-font-display-l);
14
23
  --dsa-headline_h3__subheadline--font: var(--ks-font-copy-m);
24
+ --dsa-headline_h3--space-after_large: var(--ks-spacing-stack-m);
25
+ --dsa-headline_h3--space-after_small: var(--ks-spacing-stack-s);
26
+ --dsa-headline_h3--space-after_minimum: var(--ks-spacing-stack-xs);
15
27
  --dsa-headline_h4--font: var(--ks-font-display-m);
16
- --dsa-headline__p--font: var(--ks-font-copy-m);
28
+ --dsa-headline_h4__subheadline--font: var(--ks-font-copy-s);
29
+ --dsa-headline_h4--space-after_large: var(--ks-spacing-stack-m);
30
+ --dsa-headline_h4--space-after_small: var(--ks-spacing-stack-s);
31
+ --dsa-headline_h4--space-after_minimum: var(--ks-spacing-stack-xs);
32
+ --dsa-headline_p--font: var(--ks-font-copy-m);
33
+ --dsa-headline__subheadline_p--font: var(--ks-font-copy-s);
34
+ --dsa-headline_p__subheadline--font: var(--ks-font-copy-s);
35
+ --dsa-headline_p--space-after_large: var(--ks-spacing-stack-xs);
36
+ --dsa-headline_p--space-after_small: var(--ks-spacing-xxs);
37
+ --dsa-headline_p--space-after_minimum: none;
17
38
  }
18
39
  @media (min-width: 48em) {
19
40
  :root, [ks-inverted], [ks-theme] {
@@ -39,22 +60,37 @@
39
60
  .dsa-headline--h1 {
40
61
  --headline--font: var(--dsa-headline_h1--font, var(--ks-font-display-xxl));
41
62
  --subheadline--font: var(--dsa-headline_h1__subheadline--font, var(--ks-font-copy-xl));
63
+ --headline--space-after_minimum: var(--dsa-headline_h1--space-after_minimum);
64
+ --headline--space-after_small: var(--dsa-headline_h1--space-after_small);
65
+ --headline--space-after_large: var(--dsa-headline_h1--space-after_large);
42
66
  }
43
67
  .dsa-headline--h2 {
44
68
  --headline--font: var(--dsa-headline_h2--font, var(--ks-font-display-xl));
45
69
  --subheadline--font: var(--dsa-headline_h2__subheadline--font, var(--ks-font-copy-l));
70
+ --headline--space-after_minimum: var(--dsa-headline_h2--space-after_minimum);
71
+ --headline--space-after_small: var(--dsa-headline_h2--space-after_small);
72
+ --headline--space-after_large: var(--dsa-headline_h2--space-after_large);
46
73
  }
47
74
  .dsa-headline--h3 {
48
75
  --headline--font: var(--dsa-headline_h3--font, var(--ks-font-display-l));
49
76
  --subheadline--font: var(--dsa-headline_h3__subheadline--font, var(--ks-font-copy-l));
77
+ --headline--space-after_minimum: var(--dsa-headline_h3--space-after_minimum);
78
+ --headline--space-after_small: var(--dsa-headline_h3--space-after_small);
79
+ --headline--space-after_large: var(--dsa-headline_h3--space-after_large);
50
80
  }
51
81
  .dsa-headline--h4 {
52
82
  --headline--font: var(--dsa-headline_h4--font, var(--ks-font-display-m));
53
83
  --subheadline--font: var(--dsa-headline_h4__subheadline--font, var(--ks-font-copy-m));
84
+ --headline--space-after_minimum: var(--dsa-headline_h4--space-after_minimum);
85
+ --headline--space-after_small: var(--dsa-headline_h4--space-after_small);
86
+ --headline--space-after_large: var(--dsa-headline_h4--space-after_large);
54
87
  }
55
88
  .dsa-headline--p {
56
- --headline--font: var(--dsa-headline__p--font, var(--ks-font-copy-m));
57
- --subheadline--font: var(--dsa-headline__p__subheadline--font, var(--ks-font-copy-s));
89
+ --headline--font: var(--dsa-headline_p--font, var(--ks-font-copy-m));
90
+ --subheadline--font: var(--dsa-headline_p__subheadline--font, var(--ks-font-copy-s));
91
+ --headline--space-after_minimum: var(--dsa-headline_p--space-after_minimum);
92
+ --headline--space-after_small: var(--dsa-headline_p--space-after_small);
93
+ --headline--space-after_large: var(--dsa-headline_p--space-after_large);
58
94
  }
59
95
  .dsa-headline .dsa-headline__headline {
60
96
  font: var(--headline--font);
@@ -70,13 +106,13 @@
70
106
  font-weight: var(--dsa-headline__subheadline--font-weight, var(--ks-font-weight-semi-bold));
71
107
  }
72
108
  .dsa-headline--space-after-minimum {
73
- margin-bottom: var(--ks-spacing-stack-s);
109
+ margin-bottom: var(--headline--space-after_minimum);
74
110
  }
75
111
  .dsa-headline--space-after-small {
76
- margin-bottom: var(--ks-spacing-stack-m);
112
+ margin-bottom: var(--headline--space-after_small);
77
113
  }
78
114
  .dsa-headline--space-after-large {
79
- margin-bottom: var(--ks-spacing-stack-l);
115
+ margin-bottom: var(--headline--space-after_large);
80
116
  }
81
117
  .dsa-headline--align-center .dsa-headline__headline {
82
118
  text-align: center;
@@ -24,7 +24,7 @@ interface SettingsProps {
24
24
  */
25
25
  seo: SeoProps;
26
26
  }
27
- export * from "../../BlogPostProps-99489f0b.js";
27
+ export * from "../../BlogPostProps-6b3cff22.js";
28
28
  export * from "../../BlogOverviewProps-9f207f1c.js";
29
29
  export * from "../../PageProps-aa29c554.js";
30
30
  export { SettingsProps };
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 03 Sep 2024 13:04:06 GMT
3
+ * Generated on Tue, 03 Sep 2024 14:21:38 GMT
4
4
  */
5
5
  :root, [ks-theme] {
6
6
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -3,17 +3,31 @@
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: {\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 title=\"Blog Post\"\n/>",
6
+ "code": "<BlogAside\n author={{\n byline: 'CEO at Company',\n image: {\n alt: 'Picture of Jane Smith',\n aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/author-emily.png'\n },\n links: [\n {\n href: 'tel:+4922868896620',\n icon: 'twitter',\n label: 'jane_smith',\n newTab: false\n },\n {\n href: 'mailto:mail@example.com',\n icon: 'email',\n label: 'jane.smith@example.com',\n newTab: false\n }\n ],\n name: '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 title=\"Blog Post\"\n/>",
7
7
  "args": {
8
8
  "author": {
9
9
  "name": "Jane Smith",
10
10
  "byline": "CEO at Company",
11
11
  "image": {
12
12
  "src": "img/people/author-emily.png",
13
- "alt": "Picture of Jane Smith"
13
+ "alt": "Picture of Jane Smith",
14
+ "fullWidth": false,
15
+ "aspectRatio": "square"
14
16
  },
15
- "twitter": "jane_smith",
16
- "email": "jane.smith@example.com"
17
+ "links": [
18
+ {
19
+ "icon": "twitter",
20
+ "label": "jane_smith",
21
+ "href": "tel:+4922868896620",
22
+ "newTab": false
23
+ },
24
+ {
25
+ "icon": "email",
26
+ "label": "jane.smith@example.com",
27
+ "href": "mailto:mail@example.com",
28
+ "newTab": false
29
+ }
30
+ ]
17
31
  },
18
32
  "socialSharing": [
19
33
  {
@@ -443,7 +457,7 @@
443
457
  "id": "pages-archetypes--blog-post",
444
458
  "group": "Pages/Archetypes",
445
459
  "name": "BlogPost",
446
- "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 **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 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 {\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 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/>",
460
+ "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 aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/author-emily.png'\n },\n links: [\n {\n href: 'tel:+4922868896620',\n icon: 'phone',\n label: '0228 / 688 966 20',\n newTab: false\n },\n {\n href: 'mailto:mail@example.com',\n icon: 'email',\n label: 'mail@example.com',\n newTab: false\n }\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 **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 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 {\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 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/>",
447
461
  "args": {
448
462
  "head": {
449
463
  "date": "12/30/2022",
@@ -464,8 +478,24 @@
464
478
  "byline": "Senior Developer",
465
479
  "image": {
466
480
  "src": "img/people/author-emily.png",
467
- "alt": "Picture of Jane Smith"
481
+ "alt": "Picture of Jane Smith",
482
+ "fullWidth": false,
483
+ "aspectRatio": "square"
468
484
  },
485
+ "links": [
486
+ {
487
+ "icon": "phone",
488
+ "label": "0228 / 688 966 20",
489
+ "href": "tel:+4922868896620",
490
+ "newTab": false
491
+ },
492
+ {
493
+ "icon": "email",
494
+ "label": "mail@example.com",
495
+ "href": "mailto:mail@example.com",
496
+ "newTab": false
497
+ }
498
+ ],
469
499
  "twitter": "Janedoe",
470
500
  "email": "Jane.doe@example.com"
471
501
  },
@@ -1,6 +1,7 @@
1
1
  .l-split {
2
2
  --dsa-split--gap-vertical: var(--ks-spacing-stack-l);
3
3
  --dsa-split--gap-horizontal: var(--ks-spacing-inline-l);
4
+ --dsa-split__side--top-offset: var(--ks-spacing-stack-l);
4
5
  --dsa-split__side--top-margin: var(--ks-spacing-stack-l);
5
6
  --dsa-split__side--flex-basis: 210px;
6
7
  }
@@ -35,8 +36,9 @@
35
36
  flex-basis: var(--dsa-split__side--flex-basis, 210px);
36
37
  position: -webkit-sticky;
37
38
  position: sticky;
38
- top: var(--dsa-split__side--top-margin, var(--ks-spacing-stack-l));
39
+ top: var(--dsa-split__side--top-offset, var(--ks-spacing-stack-l));
39
40
  height: fit-content;
41
+ margin-top: var(--dsa-split__side-top-margin, var(--ks-spacing-stack-l));
40
42
  }
41
43
  .l-split--sidebar-left > :last-child {
42
44
  flex-basis: calc(var(--split__main--flex-basis) - var(--l-section--content-padding) * 2);
@@ -47,4 +49,5 @@
47
49
  position: sticky;
48
50
  top: var(--dsa-split__side--top-margin, var(--ks-spacing-stack-l));
49
51
  height: fit-content;
52
+ margin-top: var(--dsa-split__side-top-margin, var(--ks-spacing-stack-l));
50
53
  }
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 03 Sep 2024 13:04:09 GMT
3
+ * Generated on Tue, 03 Sep 2024 14:21:41 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 Tue, 03 Sep 2024 13:04:13 GMT
2730
+ * Generated on Tue, 03 Sep 2024 14:21:44 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 Tue, 03 Sep 2024 13:04:11 GMT
5461
+ * Generated on Tue, 03 Sep 2024 14:21:43 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 Tue, 03 Sep 2024 13:04:14 GMT
8462
+ * Generated on Tue, 03 Sep 2024 14:21:46 GMT
8463
8463
  */
8464
8464
  :root [ks-theme=telekom] {
8465
8465
  --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 03 Sep 2024 13:04:06 GMT
3
+ * Generated on Tue, 03 Sep 2024 14:21:38 GMT
4
4
  */
5
5
 
6
6
  :root, [ks-theme] {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 03 Sep 2024 13:04:07 GMT
3
+ * Generated on Tue, 03 Sep 2024 14:21:39 GMT
4
4
  */
5
5
 
6
6
  export const KsBackgroundColorAccentBase = "#230a2b";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kickstartds/ds-agency-premium",
3
- "version": "1.4.16--canary.15.832.0",
3
+ "version": "1.4.17--canary.15.838.0",
4
4
  "description": "",
5
5
  "homepage": "https://github.com/kickstartDS/ds-agency-premium#readme",
6
6
  "bugs": {