@kickstartds/ds-agency-premium 1.2.10--canary.168.f4de958.0 → 1.2.10--canary.175.799b9aa.0

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

@@ -1,11 +1,17 @@
 import "./blog-head.css";
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
 import { PostHead } from '@kickstartds/blog/lib/post-head';
 
-const BlogHead = ({ date, tags, headline, image, }) => {
+const BlogHeadContextDefault = forwardRef(({ date, tags = [], headline, image }, ref) => {
     return (jsx(PostHead, { date: date, headline: { text: headline, level: "h1", align: "left" }, image: { src: image }, categories: tags.map((tag) => {
             return { label: tag };
-        }) }));
-};
+        }), ref: ref }));
+});
+const BlogHeadContext = createContext(BlogHeadContextDefault);
+const BlogHead = forwardRef((props, ref) => {
+    const Component = useContext(BlogHeadContext);
+    return jsx(Component, { ...props, ref: ref });
+});
 
-export { BlogHead };
+export { BlogHead, BlogHeadContext, BlogHeadContextDefault };

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

@@ -40,6 +40,7 @@
           "title": "Headline",
           "description": "The headline of the blog post",
           "type": "string",
+          "format": "markdown",
           "examples": [
             "This is a blog post headline"
           ]
@@ -48,6 +49,7 @@
           "title": "Teaser Text",
           "description": "The teaser text of the blog post",
           "type": "string",
+          "format": "markdown",
           "examples": [
             "This is a teaser text for the blog post"
           ]
@@ -123,6 +125,7 @@
               "title": "Image",
               "description": "The image URL of the author",
               "type": "string",
+              "format": "image",
               "examples": [
                 "img/people/author-emily.png"
               ]
@@ -133,6 +136,9 @@
             "name"
           ]
         },
+        "className": {
+          "type": "string"
+        },
         "type": {
           "const": "blog-teaser"
         }
@@ -179,6 +185,7 @@
             "title": "Headline",
             "description": "The headline of the blog post",
             "type": "string",
+            "format": "markdown",
             "examples": [
               "This is a blog post headline"
             ]
@@ -187,6 +194,7 @@
             "title": "Teaser Text",
             "description": "The teaser text of the blog post",
             "type": "string",
+            "format": "markdown",
             "examples": [
               "This is a teaser text for the blog post"
             ]
@@ -262,6 +270,7 @@
                 "title": "Image",
                 "description": "The image URL of the author",
                 "type": "string",
+                "format": "image",
                 "examples": [
                   "img/people/author-emily.png"
                 ]
@@ -272,6 +281,9 @@
               "name"
             ]
           },
+          "className": {
+            "type": "string"
+          },
           "type": {
             "const": "blog-teaser"
           }
@@ -319,6 +331,7 @@
             "title": "Headline",
             "description": "The headline of the blog post",
             "type": "string",
+            "format": "markdown",
             "examples": [
               "This is a blog post headline"
             ]
@@ -327,6 +340,7 @@
             "title": "Teaser Text",
             "description": "The teaser text of the blog post",
             "type": "string",
+            "format": "markdown",
             "examples": [
               "This is a teaser text for the blog post"
             ]
@@ -402,6 +416,7 @@
                 "title": "Image",
                 "description": "The image URL of the author",
                 "type": "string",
+                "format": "image",
                 "examples": [
                   "img/people/author-emily.png"
                 ]
@@ -412,6 +427,9 @@
               "name"
             ]
           },
+          "className": {
+            "type": "string"
+          },
           "type": {
             "const": "blog-teaser"
           }

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

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+import { BlogTeaserProps } from "../../BlogTeaserProps-525f7f9f.js";
+import { CtaProps } from "../../CtaProps-93230a76.js";
+import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
+/**
+ * Collection of posts to list on the page
+ */
+type Posts = BlogTeaserProps[];
+/**
+ * Collection of posts to list on the page
+ */
+type Posts1 = BlogTeaserProps[];
+/**
+ * Abstracts a blog overview concept into JSON schema
+ */
+interface BlogOverviewProps {
+    /**
+     * Referenced component BlogTeaserProps
+     */
+    latest?: BlogTeaserProps;
+    list?: Posts;
+    more?: Posts1;
+    /**
+     * Referenced component CtaProps
+     */
+    cta?: CtaProps;
+    /**
+     * Referenced component SeoProps
+     */
+    seo: SeoProps;
+}
+declare const BlogOverview: ({ latest, more, }: BlogOverviewProps) => import("react/jsx-runtime").JSX.Element;
+export { BlogOverview };

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

@@ -0,0 +1,17 @@
+import { createElement } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Section } from '../section/index.js';
+import { BlogTeaser } from '../blog-teaser/index.js';
+import 'classnames';
+import '@kickstartds/core/lib/react';
+import '@kickstartds/base/lib/section';
+import '../section/js/Section.client.js';
+import '@kickstartds/core/lib/component';
+import '@kickstartds/blog/lib/post-teaser';
+import '@kickstartds/core/lib/container';
+
+const BlogOverview = ({ latest, more = [], }) => {
+    return (jsxs(Fragment, { children: [latest && (jsx(Section, { width: "wide", children: jsx(BlogTeaser, { ...latest }) })), more.length > 0 && (jsx(Section, { headline: { text: "More articles" }, children: more.map((article) => (createElement(BlogTeaser, { ...article, key: article.headline }))) }))] }));
+};
+
+export { BlogOverview };

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

@@ -40,6 +40,7 @@
           "title": "Headline",
           "description": "The headline of the blog post",
           "type": "string",
+          "format": "markdown",
           "examples": [
             "This is a blog post headline"
           ]
@@ -48,7 +49,7 @@
           "title": "Cover Image",
           "description": "The source of the cover image for the blog post",
           "type": "string",
-          "format": "uri",
+          "format": "image",
           "examples": [
             "img/close-up-young-business-team-working.png"
           ]
@@ -94,7 +95,7 @@
               "title": "Image",
               "description": "The image URL of the author",
               "type": "string",
-              "format": "uri",
+              "format": "image",
               "examples": [
                 "img/people/author-emily.png"
               ]
@@ -103,7 +104,6 @@
               "title": "Twitter",
               "description": "The Twitter name of the author",
               "type": "string",
-              "format": "uri",
               "examples": [
                 "johndoe"
               ]
@@ -112,7 +112,7 @@
               "title": "Email",
               "description": "The Email of the author",
               "type": "string",
-              "format": "email",
+              "pattern": "^[A-Za-z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Za-z0-9.-]+$",
               "examples": [
                 "johndoe@example.com"
               ]
@@ -182,6 +182,9 @@
             "12/30/2022"
           ]
         },
+        "className": {
+          "type": "string"
+        },
         "type": {
           "const": "blog-aside"
         }

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

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+import { BlogHeadProps } from "../../BlogHeadProps-f9a49428.js";
+import { BlogAsideProps } from "../../BlogAsideProps-e1cbd5d3.js";
+import { CtaProps } from "../../CtaProps-93230a76.js";
+import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
+/**
+ * Body text for the blog post
+ */
+type Text = string;
+/**
+ * Abstracts a blog post concept into JSON schema
+ */
+interface BlogPostProps {
+    /**
+     * Referenced component BlogHeadProps
+     */
+    head?: BlogHeadProps;
+    /**
+     * Referenced component BlogAsideProps
+     */
+    aside?: BlogAsideProps;
+    content?: Text;
+    /**
+     * Referenced component CtaProps
+     */
+    cta?: CtaProps;
+    /**
+     * Referenced component SeoProps
+     */
+    seo: SeoProps;
+}
+declare const BlogPost: ({ head, content, aside, cta }: BlogPostProps) => import("react/jsx-runtime").JSX.Element;
+export { BlogPost };

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

@@ -0,0 +1,24 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Split } from '../split/index.js';
+import { BlogHead } from '../blog-head/index.js';
+import { Section } from '../section/index.js';
+import { BlogAside } from '../blog-aside/index.js';
+import { Text } from '../text/index.js';
+import { Cta } from '../cta/index.js';
+import 'classnames';
+import 'react';
+import '@kickstartds/blog/lib/post-head';
+import '@kickstartds/core/lib/react';
+import '@kickstartds/base/lib/section';
+import '../section/js/Section.client.js';
+import '@kickstartds/core/lib/component';
+import '@kickstartds/blog/lib/post-aside';
+import '@kickstartds/base/lib/rich-text';
+import '@kickstartds/content/lib/storytelling';
+import '@kickstartds/base/lib/button';
+import '../button-group/index.js';
+import '@kickstartds/base/lib/button-group';
+
+const BlogPost = ({ head, content, aside, cta }) => (jsxs(Fragment, { children: [jsx(Section, { width: "wide", children: jsxs(Split, { layout: "sidebarRight", children: [jsxs("div", { children: [head && jsx(BlogHead, { ...head }), jsx(Text, { text: content })] }), jsx(BlogAside, { ...aside })] }) }), cta && (jsx(Section, { children: jsx(Cta, { ...cta }) }))] }));
+
+export { BlogPost };

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

@@ -3,55 +3,79 @@
   container-name: post-teaser;
 }
 
-article.c-post-teaser {
-  --c-teaser--background: transparent;
-  --c-post-teaser--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
-  --c-teaser_text--spacing: var(--ks-spacing-stack-s);
-  --g-topic--font: var(--ks-font-display-s);
+.dsa-blog-teaser {
+  --dsa-blog-teaser--background: transparent;
+  --dsa-blog-teaser__topic--font: var(--ks-font-display-l);
+  --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-xs);
+  --dsa-blog-teaser__copy--font: var(--dsa-rich-text--font, var(--ks-font-copy-m));
+  --dsa-blog-teaser__copy--color: var(--dsa-rich-text--color);
+  --dsa-blog-teaser__copy--color_hover: var(--ks-text-color-copy-interface-interactive-hover);
+  --dsa-blog-teaser__copy--margin-top: var(--ks-spacing-stack-s);
+  --dsa-blog-teaser__meta--font: var(--ks-spacing-stack-s);
+  --dsa-blog-teaser__meta--color: var(--c-post-meta_item--color);
+  --dsa-blog-teaser__meta__author--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-post-teaser__image--border-radius: var(--ks-border-radius-card);
 }
 @container post-teaser (min-width: 640px) {
-  article.c-post-teaser {
-    --g-topic--font: var(--ks-font-display-l);
-    --c-rich-text--font: var(--ks-font-copy-m);
-  }
-  article.c-post-teaser .c-tag-label--s {
-    --c-tag-label--font: var(--ks-font-interface-s);
+  .dsa-blog-teaser {
+    --dsa-blog-teaser__topic--font: var(--ks-font-display-l);
+    --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-s);
   }
 }
 @container post-teaser (min-width: 1000px) {
-  article.c-post-teaser {
-    --g-topic--font: var(--ks-font-display-xl);
+  .dsa-blog-teaser {
+    --dsa-blog-teaser__topic--font: var(--ks-font-display-xl);
   }
 }
-article.c-post-teaser .c-teaser {
+
+.l-container--post-teaser {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: post-teaser;
+}
+
+.dsa-blog-teaser.c-post-teaser {
+  --c-teaser--background: var(--dsa-blog-teaser--background, transparent);
+  --c-post-teaser--gap: var(--dsa-blog-teaser--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-s));
+  --c-teaser_text--spacing: var(--dsa-blog-teaser__copy--margin-top, var(--ks-spacing-stack-s));
+  --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--dsa-rich-text--color));
+}
+.dsa-blog-teaser.c-post-teaser .c-tag-label {
+  --c-tag-label--font: var(--dsa-blog-teaser__tag-label--font, var(--ks-font-interface-s));
+}
+.dsa-blog-teaser.c-post-teaser .c-teaser {
   overflow: visible;
   cursor: pointer;
 }
-article.c-post-teaser .c-teaser:hover .c-teaser__topic {
-  text-shadow: 0 0 15px var(--ks-color-fg-alpha-5);
-}
-article.c-post-teaser .c-teaser:hover .c-rich-text {
-  color: var(--ks-color-fg);
+.dsa-blog-teaser.c-post-teaser .c-teaser:hover .c-rich-text {
+  color: var(--dsa-blog-teaser__copy--color_hover, var(--ks-text-color-copy-interface-interactive-hover));
 }
-article.c-post-teaser .c-teaser:hover .c-rich-text > :not(.c-post-meta) {
+.dsa-blog-teaser.c-post-teaser .c-teaser:hover .c-rich-text > :not(.c-post-meta) {
   text-decoration: none;
 }
-article.c-post-teaser .c-post-teaser__image img {
-  border-radius: var(--ks-border-radius-card);
+.dsa-blog-teaser.c-post-teaser .c-post-teaser__image img {
+  border-radius: var(--dsa-post-teaser__image--border-radius, var(--ks-border-radius-card));
 }
-article.c-post-teaser .c-post-meta {
+.dsa-blog-teaser.c-post-teaser .c-post-meta {
   --c-post-meta_author--font-weight: var(--ks-font-weight-semi-bold);
   --c-post-meta--gap: 0.5em 1em;
+  --c-post-meta_item--font: var(--dsa-blog-teaser__meta--font, var(--ks-font-interface-s));
+  --c-post-meta_author--color: var(--dsa-blog-teaser__meta--color, var(--c-post-meta_item--color));
+  --c-post-meta_author--font-weight: var(
+    --dsa-blog-teaser__meta__author--font-weight,
+    var(--ks-font-weight-semi-bold)
+  );
   margin: 0;
 }
-article.c-post-teaser .c-rich-text {
+.dsa-blog-teaser.c-post-teaser .c-rich-text {
   transition: var(--ks-transition-hover);
   transition-property: color;
   display: flex;
   flex-direction: column;
   gap: var(--c-post-teaser--gap);
 }
-article.c-post-teaser .c-teaser__topic {
+.dsa-blog-teaser.c-post-teaser .c-teaser__topic {
+  font: var(--dsa-blog-teaser__topic--font, var(--dsa-topic--font, var(--ks-font-display-m)));
+  font-weight: var(--dsa-topic--font-weight);
   text-align: left;
   transition: var(--ks-transition-hover);
   transition-property: text-shadow;

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

@@ -30,6 +30,7 @@
       "title": "Headline",
       "description": "The headline of the blog post",
       "type": "string",
+      "format": "markdown",
       "examples": [
         "This is a blog post headline"
       ]
@@ -38,6 +39,7 @@
       "title": "Teaser Text",
       "description": "The teaser text of the blog post",
       "type": "string",
+      "format": "markdown",
       "examples": [
         "This is a teaser text for the blog post"
       ]
@@ -113,6 +115,7 @@
           "title": "Image",
           "description": "The image URL of the author",
           "type": "string",
+          "format": "image",
           "examples": [
             "img/people/author-emily.png"
           ]
@@ -123,6 +126,9 @@
         "name"
       ]
     },
+    "className": {
+      "type": "string"
+    },
     "type": {
       "const": "blog-teaser"
     }

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

@@ -25,12 +25,14 @@
       "title": "Headline",
       "description": "The headline of the blog post",
       "type": "string",
+      "format": "markdown",
       "examples": ["This is a blog post headline"]
     },
     "teaserText": {
       "title": "Teaser Text",
       "description": "The teaser text of the blog post",
       "type": "string",
+      "format": "markdown",
       "examples": ["This is a teaser text for the blog post"]
     },
     "image": {
@@ -90,11 +92,15 @@
           "title": "Image",
           "description": "The image URL of the author",
           "type": "string",
+          "format": "image",
           "examples": ["img/people/author-emily.png"]
         }
       },
       "additionalProperties": false,
       "required": ["name"]
+    },
+    "className": {
+      "type": "string"
     }
   },
   "additionalProperties": false,

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

@@ -1,81 +1,6 @@
-import { HTMLAttributes, FC } from "react";
-/* eslint-disable */
-/**
- * This file was automatically generated by json-schema-to-typescript.
- * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
- * and run json-schema-to-typescript to regenerate this file.
- */
-/**
- * The date of the blog post
- */
-type Date = string;
-/**
- * The tags for the blog post
- */
-type Tags = string[];
-/**
- * The headline of the blog post
- */
-type Headline = string;
-/**
- * The teaser text of the blog post
- */
-type TeaserText = string;
-/**
- * The preview image for the blog post
- */
-type Image = string;
-/**
- * The blog entry URL to link
- */
-type URL = string;
-/**
- * The label to use for the link
- */
-type Label = string;
-/**
- * Time to read for the blog post
- */
-type ReadingTime = string;
-/**
- * The name of the author
- */
-type Name = string;
-/**
- * The title of the author
- */
-type Title = string;
-/**
- * The image URL of the author
- */
-type Image1 = string;
-/**
- * Display a blog teaser with date, tags, headline, teaser text and author
- */
-interface BlogTeaserProps {
-    date?: Date;
-    tags?: Tags;
-    headline: Headline;
-    teaserText: TeaserText;
-    image?: Image;
-    link?: Link;
-    readingTime?: ReadingTime;
-    author?: Author;
-}
-/**
- * URL and label for the blog post linked
- */
-interface Link {
-    url: URL;
-    label?: Label;
-}
-/**
- * The author of the blog post
- */
-interface Author {
-    name: Name;
-    title?: Title;
-    image?: Image1;
-}
-declare const BlogTeaser: FC<BlogTeaserProps & HTMLAttributes<HTMLElement>>;
-export { BlogTeaser };
+/// <reference types="react" />
+import { BlogTeaserProps } from "../../BlogTeaserProps-525f7f9f.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>>;
+export { BlogTeaserContextDefault, BlogTeaserContext, BlogTeaser };

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

@@ -1,9 +1,11 @@
 import "./blog-teaser.css";
 import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { forwardRef, createContext, useContext } from 'react';
 import { PostTeaserContextDefault } from '@kickstartds/blog/lib/post-teaser';
 import { Container } from '@kickstartds/core/lib/container';
 
-const BlogTeaser = ({ date, tags, headline, teaserText, image, link, readingTime, author, }) => {
+const BlogTeaserContextDefault = forwardRef(({ date, tags = [], headline, teaserText, image, link, readingTime, author, className, }, ref) => {
     const teaserMetaItems = [];
     if (date)
         teaserMetaItems.push({
@@ -15,23 +17,30 @@ const BlogTeaser = ({ date, tags, headline, teaserText, image, link, readingTime
             icon: "time",
             text: readingTime,
         });
-    return (jsx(Container, { name: "post-teaser", children: jsx(PostTeaserContextDefault
-        // @ts-expect-error
-        , { 
+    return (jsx(Container, { name: "post-teaser", children: jsx(PostTeaserContextDefault, { className: classnames(className, "dsa-blog-teaser"), 
             // @ts-expect-error
             image: { src: image }, meta: {
-                author: {
-                    image: author.image && { src: author.image },
-                    name: author.name,
-                },
+                author: author
+                    ? {
+                        image: author.image && { src: author.image },
+                        name: author.name,
+                    }
+                    : undefined,
                 items: teaserMetaItems,
-            }, link: {
-                label: link.label || "Read more",
-                // @ts-expect-error
-                target: link.url,
-            }, title: headline, body: teaserText, categories: tags.map((tag) => {
+            }, link: link
+                ? {
+                    label: link.label || "Read more",
+                    // @ts-expect-error
+                    target: link.url,
+                }
+                : undefined, title: headline, body: teaserText, categories: tags.map((tag) => {
                 return { label: tag };
-            }) }) }));
-};
+            }), ref: ref }) }));
+});
+const BlogTeaserContext = createContext(BlogTeaserContextDefault);
+const BlogTeaser = forwardRef((props, ref) => {
+    const Component = useContext(BlogTeaserContext);
+    return jsx(Component, { ...props, ref: ref });
+});
 
-export { BlogTeaser };
+export { BlogTeaser, BlogTeaserContext, BlogTeaserContextDefault };