@kickstartds/ds-agency-premium 1.4.14 → 1.4.16--canary.15.832.0

package/dist/{BlogAsideProps-e1cbd5d3.d.ts → BlogAsideProps-99489f0b.d.ts}

@@ -12,9 +12,13 @@ type Name = string;
  */
 type Byline = string;
 /**
- * The image URL of the author
+ * URL of the image to display
  */
-type Image = string;
+type ImageSource = string;
+/**
+ * Alt text of the image
+ */
+type AltText = string;
 /**
  * The Twitter name of the author
  */
@@ -67,8 +71,11 @@ interface BlogAsideProps {
 interface Author {
     name: Name;
     byline?: Byline;
-    image?: Image;
+    image?: {
+        src?: ImageSource;
+        alt?: AltText;
+    };
     twitter?: Twitter;
     email?: Email;
 }
-export { Name, Byline, Image, Twitter, Email, Icon, Href, Title, SocialSharing, ReadingTime, PublishedDate, BlogAsideProps, Author };
+export { Name, Byline, ImageSource, AltText, Twitter, Email, Icon, Href, Title, SocialSharing, ReadingTime, PublishedDate, BlogAsideProps, Author };

package/dist/{BlogOverviewProps-83d399b4.d.ts → BlogOverviewProps-9f207f1c.d.ts}

@@ -3,8 +3,8 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-03ff6d21.js";
-import { BlogTeaserProps } from "./BlogTeaserProps-71a3cb5c.js";
+import { SectionProps } from "./SectionProps-83d399b4.js";
+import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
 import { CtaProps } from "./CtaProps-93230a76.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/{BlogPostProps-3f6e4072.d.ts → BlogPostProps-99489f0b.d.ts}

@@ -4,8 +4,8 @@
  * and run json-schema-to-typescript to regenerate this file.
  */
 import { BlogHeadProps } from "./BlogHeadProps-3f6e4072.js";
-import { BlogAsideProps } from "./BlogAsideProps-e1cbd5d3.js";
-import { SectionProps } from "./SectionProps-03ff6d21.js";
+import { BlogAsideProps } from "./BlogAsideProps-99489f0b.js";
+import { SectionProps } from "./SectionProps-83d399b4.js";
 import { CtaProps } from "./CtaProps-93230a76.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**

package/dist/{PageProps-83d399b4.d.ts → PageProps-aa29c554.d.ts}

@@ -3,7 +3,7 @@
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { SectionProps } from "./SectionProps-03ff6d21.js";
+import { SectionProps } from "./SectionProps-83d399b4.js";
 import { SeoProps } from "./SeoProps-f2d6dcaa.js";
 /**
  * Collection of sections (with their contents) to render on the page

package/dist/{SectionProps-03ff6d21.d.ts → SectionProps-83d399b4.d.ts}

@@ -8,7 +8,7 @@ import { FaqProps } from "./FaqProps-ad618cd5.js";
 import { FeaturesProps } from "./FeaturesProps-b05859d6.js";
 import { GalleryProps } from "./GalleryProps-76e7de44.js";
 import { HeroProps } from "./HeroProps-cf82a16d.js";
-import { ImageStoryProps } from "./ImageStoryProps-03ff6d21.js";
+import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
 import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
 import { LogosProps } from "./LogosProps-f9474fe2.js";
 import { MosaicProps } from "./MosaicProps-d52c7151.js";

package/dist/components/blog-aside/blog-aside.css

@@ -1,8 +1,9 @@
 .dsa-blog-aside {
+  --dsa-blog-aside__meta__item--font: var(--ks-font-interface-s);
+  --dsa-blog-aside__meta__item--color: var(--ks-text-color-interface);
+  --dsa-blog-aside__meta__item__icon--size: 1.2em;
   --dsa-blog-aside__title--color: var(--dsa-headline--color);
   --dsa-blog-aside__title--font: var(--dsa-headline_h3--font);
-  --dsa-blog-aside__copy--color: var(--dsa-rich-text--color);
-  --dsa-blog-aside__copy--font: var(--dsa-rich-text--font);
   --dsa-blog-aside__links--color: var(--dsa-link--color);
   --dsa-blog-aside__divider--color: var(--ks-border-color-accent);
 }
@@ -13,25 +14,16 @@
 .dsa-blog-aside .c-post-meta {
   --c-post-meta--gap: var(--ks-spacing-m);
   --c-post-meta_item--gap: var(--ks-spacing-xs);
-  --c-post-meta_item--font: var(--dsa-post-aside__meta__item--font, var(--ks-font-interface-s));
-  --c-post-meta_item--color: var(--dsa-post-aside__meta__item--color, var(--ks-text-color-interface));
-  --c-post-meta_item--icon-size: var(--dsa-post-aside__meta__item__icon--size, 1.2em);
-}
-.dsa-blog-aside .c-contact__copy {
-  --c-rich-text-font: var(--dsa-post-aside__copy--font, var(--dsa-rich-text--font, var(--ks-font-copy-m)));
-  --c-rich-text-color: var(--dsa-post-aside__copy--color, var(--dsa-rich-text--color, var(--ks-text-color-default)));
-}
-.dsa-blog-aside .dsa-headline .dsa-headline__headline {
-  font: var(--dsa-post-aside__title--font, var(--dsa-headline_h3--font, var(--ks-font-display-l)));
-  font-weight: var(--dsa-headline--font-weight);
-  color: var(--dsa-post-aside__title--color, var(--dsa-headline--color, var(--ks-text-color-display)));
+  --c-post-meta_item--font: var(--dsa-blog-aside__meta__item--font, var(--ks-font-interface-s));
+  --c-post-meta_item--color: var(--dsa-blog-aside__meta__item--color, var(--ks-text-color-interface));
+  --c-post-meta_item--icon-size: var(--dsa-blog-aside__meta__item__icon--size, 1.2em);
 }
 .dsa-blog-aside .c-contact__links {
-  color: var(--dsa-post-aside__links--color, var(--dsa-link--color));
+  color: var(--dsa-blog-aside__links--color, var(--dsa-link--color));
 }
 .dsa-blog-aside .c-contact__links .icon {
   color: inherit;
 }
 .dsa-blog-aside .c-divider {
-  --c-divider--background: var(--dsa-post-aside__divider--color, var(--ks-border-color-accent));
+  --c-divider--background: var(--dsa-blog-aside__divider--color, var(--ks-border-color-accent));
 }

package/dist/components/blog-aside/blog-aside.schema.dereffed.json

@@ -27,13 +27,27 @@
           ]
         },
         "image": {
-          "title": "Image",
-          "description": "The image URL of the author",
-          "type": "string",
-          "format": "image",
-          "examples": [
-            "img/people/author-emily.png"
-          ]
+          "type": "object",
+          "properties": {
+            "src": {
+              "type": "string",
+              "format": "image",
+              "title": "Image Source",
+              "description": "URL of the image to display",
+              "examples": [
+                "img/people/author-emily.png"
+              ]
+            },
+            "alt": {
+              "type": "string",
+              "title": "Alt Text",
+              "description": "Alt text of the image",
+              "examples": [
+                "Picture of Jane Smith"
+              ]
+            }
+          },
+          "additionalProperties": false
         },
         "twitter": {
           "title": "Twitter",

package/dist/components/blog-aside/blog-aside.schema.json

@@ -23,11 +23,22 @@
           "examples": ["CEO at Company"]
         },
         "image": {
-          "title": "Image",
-          "description": "The image URL of the author",
-          "type": "string",
-          "format": "image",
-          "examples": ["img/people/author-emily.png"]
+          "type": "object",
+          "properties": {
+            "src": {
+              "type": "string",
+              "format": "image",
+              "title": "Image Source",
+              "description": "URL of the image to display",
+              "examples": ["img/people/author-emily.png"]
+            },
+            "alt": {
+              "type": "string",
+              "title": "Alt Text",
+              "description": "Alt text of the image",
+              "examples": ["Picture of Jane Smith"]
+            }
+          }
         },
         "twitter": {
           "title": "Twitter",

package/dist/components/blog-aside/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogAsideProps } from "../../BlogAsideProps-e1cbd5d3.js";
+import { BlogAsideProps } from "../../BlogAsideProps-99489f0b.js";
 declare const BlogAsideContextDefault: import("react").ForwardRefExoticComponent<BlogAsideProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const BlogAsideContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogAsideProps & import("react").RefAttributes<HTMLDivElement>>>;
 declare const BlogAside: import("react").ForwardRefExoticComponent<BlogAsideProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/blog-aside/index.js

@@ -40,8 +40,8 @@ const BlogAsideContextDefault = forwardRef(({ author, socialSharing, readingTime
         });
     return (jsx(PostAside, { ...rest, className: classnames(className, "dsa-blog-aside"), author: {
             title: author?.name,
-            image: author?.image && { src: author.image },
-            copy: author?.byline,
+            subtitle: author?.byline,
+            image: author?.image,
             links: authorLinks,
         }, shareBar: {
             headline: {

package/dist/components/blog-overview/index.d.ts

@@ -1,4 +1,4 @@
-import { BlogOverviewProps } from "../../BlogOverviewProps-83d399b4.js";
+import { BlogOverviewProps } from "../../BlogOverviewProps-9f207f1c.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogOverview: FC<PropsWithChildren<BlogOverviewProps>>;
 export { BlogOverview };

package/dist/components/blog-post/blog-post.schema.dereffed.json

@@ -107,13 +107,27 @@
               ]
             },
             "image": {
-              "title": "Image",
-              "description": "The image URL of the author",
-              "type": "string",
-              "format": "image",
-              "examples": [
-                "img/people/author-emily.png"
-              ]
+              "type": "object",
+              "properties": {
+                "src": {
+                  "type": "string",
+                  "format": "image",
+                  "title": "Image Source",
+                  "description": "URL of the image to display",
+                  "examples": [
+                    "img/people/author-emily.png"
+                  ]
+                },
+                "alt": {
+                  "type": "string",
+                  "title": "Alt Text",
+                  "description": "Alt text of the image",
+                  "examples": [
+                    "Picture of Jane Smith"
+                  ]
+                }
+              },
+              "additionalProperties": false
             },
             "twitter": {
               "title": "Twitter",

package/dist/components/blog-post/index.d.ts

@@ -1,4 +1,4 @@
-import { BlogPostProps } from "../../BlogPostProps-3f6e4072.js";
+import { BlogPostProps } from "../../BlogPostProps-99489f0b.js";
 import { FC, PropsWithChildren } from "react";
 declare const BlogPost: FC<PropsWithChildren<BlogPostProps>>;
 export { BlogPost };

package/dist/components/blog-post/index.js

@@ -19,7 +19,7 @@ import '@kickstartds/base/lib/button';
 import '../button-group/index.js';
 import '@kickstartds/base/lib/button-group';
 
-const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), content ? jsx(Text, { text: content }) : children] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Section, { content: { mode: "list" }, children: jsx(Cta, { ...cta }) }))] }));
+const BlogPost = ({ head, content, aside, cta, children, }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { mainSectionWidth: "narrow", layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), content ? jsx(Text, { text: content }) : children] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Section, { content: { mode: "list" }, children: jsx(Cta, { ...cta }) }))] }));
 BlogPost.displayName = "BlogPost";
 
 export { BlogPost };

package/dist/components/blog-teaser/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BlogTeaserProps } from "../../BlogTeaserProps-71a3cb5c.js";
+import { BlogTeaserProps } from "../../BlogTeaserProps-f5855e93.js";
 declare const BlogTeaserContextDefault: import("react").ForwardRefExoticComponent<BlogTeaserProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const BlogTeaserContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogTeaserProps & import("react").RefAttributes<HTMLDivElement>>>;
 declare const BlogTeaser: import("react").ForwardRefExoticComponent<BlogTeaserProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/contact/contact.css

@@ -0,0 +1,125 @@
+.l-container--contact {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: contact;
+}
+
+.dsa-contact {
+  --dsa-contact--gap-horizontal: var(--ks-spacing-inline-m);
+  --dsa-contact--gap-vertical: var(--ks-spacing-stack-m);
+  --dsa-contact__header--gap: 0;
+  --dsa-contact__image--flex-basis: 200px;
+  --dsa-contact__image--border-radius: var(--ks-border-radius-card);
+  --dsa-contact__body--gap: var(--ks-spacing-stack-xs);
+  --dsa-contact__body--flex-basis: 300px;
+  --dsa-contact__copy--font: var(--dsa-rich-text--font);
+  --dsa-contact__copy--color: var(--dsa-rich-text--color);
+  --dsa-contact__title--color: var(--ks-text-color-display);
+  --dsa-contact__title--font: var(--ks-font-copy-l);
+  --dsa-contact__title--font-weight: var(--ks-font-weight-bold);
+  --dsa-contact__subtitle--color: var(--ks-text-color-display);
+  --dsa-contact__subtitle--font: var(--ks-font-copy-m);
+  --dsa-contact__subtitle--font-weight: var(--ks-font-weight-regular);
+  --dsa-contact__links--gap: 0;
+  --dsa-contact__link--color: var(--dsa-link--color);
+  --dsa-contact__link--color_hover: var(--dsa-link--color_hover);
+  --dsa-contact__link--font: var(--ks-font-interface-m);
+  --dsa-contact__link--font-weight: var(--dsa-link--font-weight);
+  --dsa-contact__link__icon--margin-right: 0.5em;
+  --dsa-contact__link__icon--size: 1.5em;
+  --dsa-contact__link__icon--color: inherit;
+}
+
+.l-container--contact {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: contact;
+}
+
+.dsa-contact {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsa-contact--gap-horizontal) var(--dsa-contact--gap-vertical);
+}
+.dsa-contact__image-wrap, .dsa-contact__body {
+  flex-grow: 1;
+}
+.dsa-contact__body {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: var(--dsa-contact__body--gap);
+  flex-basis: var(--dsa-contact__body--flex-basis);
+}
+.dsa-contact__copy {
+  font: var(--dsa-contact__copy--font);
+  color: var(--dsa-contact__copy--color);
+}
+.dsa-contact__image-wrap {
+  flex: none;
+  flex-basis: var(--dsa-contact__image--flex-basis);
+  height: 100%;
+  width: 100%;
+}
+.dsa-contact--image-full-width .dsa-contact__image-wrap {
+  flex-grow: 1;
+}
+.dsa-contact--image-square .dsa-contact__image-wrap {
+  aspect-ratio: 1/1;
+}
+.dsa-contact--image-wide .dsa-contact__image-wrap {
+  aspect-ratio: 4/3;
+}
+.dsa-contact--image-vertical .dsa-contact__image-wrap {
+  aspect-ratio: 3/4;
+}
+.dsa-contact__image {
+  width: 100%;
+  object-fit: cover;
+  height: 100%;
+  border-radius: var(--dsa-contact__image--border-radius);
+}
+.dsa-contact__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsa-contact__header--gap);
+}
+.dsa-contact__title {
+  font: var(--dsa-contact__title--font);
+  color: var(--dsa-contact__title--color);
+  font-weight: var(--dsa-contact__title--font-weight);
+}
+.dsa-contact__subtitle {
+  font: var(--dsa-contact__subtitle--font);
+  color: var(--dsa-contact__subtitle--color);
+  font-weight: var(--dsa-contact__subtitle--font-weight);
+}
+.dsa-contact__links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsa-contact__links--gap);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.dsa-contact a.dsa-contact__link {
+  color: var(--dsa-contact__link--color);
+  font: var(--dsa-contact__link--font);
+  font-weight: var(--dsa-contact__link--font-weight);
+}
+.dsa-contact a.dsa-contact__link .icon {
+  width: var(--dsa-contact__link__icon--size);
+  height: var(--dsa-contact__link__icon--size);
+  color: var(--dsa-contact__link__icon--color);
+  margin-right: var(--dsa-contact__link__icon--margin-right);
+}
+.dsa-contact a.dsa-contact__link:hover {
+  color: var(--dsa-contact__link--color_hover);
+}
+.dsa-contact .c-headline {
+  --c-headline--color: var(--dsa-contact__headline--color);
+  --c-headline--font: var(--dsa-contact__headline--font);
+  --c-headline--font-weight: var(--dsa-contact__headline--font-weight);
+  --c-headline__subheadline--color: var(--dsa-contact__headline__subheadline--color);
+  --c-headline__subheadline--font: var(--dsa-contact__headline__subheadline--font);
+  --c-headline__subheadline--font-weight: var(--dsa-contact__headline__subheadline--font-weight);
+}

package/dist/components/contact/contact.schema.dereffed.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/contact.schema.json",
+  "title": "Contact",
+  "description": "Component used for user interaction",
+  "type": "object",
+  "properties": {
+    "image": {
+      "type": "object",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "image",
+          "title": "Image Source",
+          "description": "URL of the image to display",
+          "examples": [
+            "img/people/author-emily.png"
+          ]
+        },
+        "alt": {
+          "type": "string",
+          "title": "Alt Text",
+          "description": "Alt text of the image",
+          "examples": [
+            "Picture of Jane Smith"
+          ]
+        },
+        "fullWidth": {
+          "type": "boolean",
+          "title": "Full Width",
+          "description": "Image uses all the horizontal space vailable",
+          "default": false
+        },
+        "aspectRatio": {
+          "type": "string",
+          "title": "aspectRatio",
+          "description": "Aspect Ratio of the Images",
+          "enum": [
+            "wide",
+            "square",
+            "vertical"
+          ],
+          "default": "square"
+        }
+      },
+      "additionalProperties": false
+    },
+    "title": {
+      "title": "Title",
+      "description": "Name, company name, etc.",
+      "type": "string",
+      "examples": [
+        "Jane Smith"
+      ]
+    },
+    "subtitle": {
+      "title": "Subtitle",
+      "description": "Position, profession, department, location, etc.",
+      "type": "string",
+      "examples": [
+        "CEO at Company"
+      ]
+    },
+    "links": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "icon": {
+            "type": "string"
+          },
+          "label": {
+            "type": "string"
+          },
+          "href": {
+            "type": "string",
+            "format": "uri"
+          },
+          "newTab": {
+            "title": "Open link in new Tab",
+            "description": "Open link in new Tab",
+            "type": "boolean",
+            "default": false
+          }
+        },
+        "additionalProperties": false
+      },
+      "examples": [
+        [
+          {
+            "icon": "phone",
+            "label": "0228 / 688 966 20",
+            "href": "tel:+4922868896620"
+          },
+          {
+            "icon": "email",
+            "label": "mail@example.com",
+            "href": "mailto:mail@example.com"
+          }
+        ]
+      ]
+    },
+    "copy": {
+      "title": "Copy text",
+      "type": "string"
+    },
+    "className": {
+      "title": "Class",
+      "description": "Additional css classes attached to the wrapping element",
+      "type": "string"
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string"
+    },
+    "type": {
+      "const": "contact"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "name"
+  ]
+}

package/dist/components/contact/contact.schema.json

@@ -0,0 +1,107 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/contact.schema.json",
+  "title": "Contact",
+  "description": "Component used for user interaction",
+  "type": "object",
+  "properties": {
+    "image": {
+      "type": "object",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "image",
+          "title": "Image Source",
+          "description": "URL of the image to display",
+          "examples": ["img/people/author-emily.png"]
+        },
+        "alt": {
+          "type": "string",
+          "title": "Alt Text",
+          "description": "Alt text of the image",
+          "examples": ["Picture of Jane Smith"]
+        },
+        "fullWidth": {
+          "type": "boolean",
+          "title": "Full Width",
+          "description": "Image uses all the horizontal space vailable",
+          "default": false
+        },
+        "aspectRatio": {
+          "type": "string",
+          "title": "aspectRatio",
+          "description": "Aspect Ratio of the Images",
+          "enum": ["wide", "square", "vertical"],
+          "default": "square"
+        }
+      }
+    },
+    "title": {
+      "title": "Title",
+      "description": "Name, company name, etc.",
+      "type": "string",
+      "examples": ["Jane Smith"]
+    },
+    "subtitle": {
+      "title": "Subtitle",
+      "description": "Position, profession, department, location, etc.",
+      "type": "string",
+      "examples": ["CEO at Company"]
+    },
+    "links": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "icon": {
+            "type": "string"
+          },
+          "label": {
+            "type": "string"
+          },
+          "href": {
+            "type": "string",
+            "format": "uri"
+          },
+          "newTab": {
+            "title": "Open link in new Tab",
+            "description": "Open link in new Tab",
+            "type": "boolean",
+            "default": false
+          }
+        },
+        "additionalProperties": false
+      },
+      "examples": [
+        [
+          {
+            "icon": "phone",
+            "label": "0228 / 688 966 20",
+            "href": "tel:+4922868896620"
+          },
+          {
+            "icon": "email",
+            "label": "mail@example.com",
+            "href": "mailto:mail@example.com"
+          }
+        ]
+      ]
+    },
+    "copy": {
+      "title": "Copy text",
+      "type": "string"
+    },
+    "className": {
+      "title": "Class",
+      "description": "Additional css classes attached to the wrapping element",
+      "type": "string"
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string"
+    }
+  },
+  "additionalProperties": false,
+  "required": ["name"]
+}