@kickstartds/ds-agency-premium 1.0.1

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

@@ -0,0 +1,76 @@
+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 name of the author
+ */
+type Name = string;
+/**
+ * The byline of the author
+ */
+type Byline = string;
+/**
+ * The image URL of the author
+ */
+type Image = string;
+/**
+ * The Twitter name of the author
+ */
+type Twitter = string;
+/**
+ * The Email of the author
+ */
+type Email = string;
+/**
+ * The icon name for the social link
+ */
+type Icon = string;
+/**
+ * The href for the social link
+ */
+type Href = string;
+/**
+ * The title for the social link
+ */
+type Title = string;
+/**
+ * The social sharing links for the blog post
+ */
+type SocialSharing = {
+    icon: Icon;
+    href: Href;
+    title: Title;
+}[];
+/**
+ * The reading time for the blog post
+ */
+type ReadingTime = string;
+/**
+ * The date when the blog post was published
+ */
+type PublishedDate = string;
+/**
+ * Meta info for a singular blog entry
+ */
+interface BlogAsideProps {
+    author: Author;
+    socialSharing?: SocialSharing;
+    readingTime?: ReadingTime;
+    date: PublishedDate;
+}
+/**
+ * The author of the blog post
+ */
+interface Author {
+    name: Name;
+    byline?: Byline;
+    image?: Image;
+    twitter?: Twitter;
+    email?: Email;
+}
+declare const BlogAside: FC<BlogAsideProps & HTMLAttributes<HTMLElement>>;
+export { BlogAside };

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

@@ -0,0 +1,55 @@
+import "./blog-aside.css";
+import { jsx } from 'react/jsx-runtime';
+import { PostAside } from '@kickstartds/blog/lib/post-aside';
+
+const BlogAside = ({ author, socialSharing, readingTime, date, }) => {
+    const socialLinks = socialSharing?.map((link) => {
+        return {
+            icon: link.icon,
+            href: link.href,
+            title: link.title,
+        };
+    });
+    const metaItems = [
+        {
+            icon: "date",
+            text: date,
+        },
+    ];
+    if (readingTime)
+        metaItems.push({
+            icon: "time",
+            text: readingTime,
+        });
+    const authorLinks = [];
+    if (author.twitter)
+        authorLinks.push({
+            href: `https://twitter.com/${author.twitter}`,
+            icon: "twitter",
+            newTab: true,
+            label: `@${author.twitter}`,
+        });
+    if (author.email)
+        authorLinks.push({
+            href: `mailto:${author.email}`,
+            icon: "email",
+            newTab: false,
+            label: author.email,
+        });
+    return (jsx(PostAside, { author: {
+            title: author.name,
+            image: author.image && { src: author.image },
+            copy: author.byline,
+            links: authorLinks,
+        }, shareBar: {
+            headline: {
+                text: "Share this post",
+                level: "h3",
+            },
+            links: socialLinks,
+        }, meta: {
+            items: metaItems,
+        } }));
+};
+
+export { BlogAside };

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

@@ -0,0 +1,3 @@
+.c-post-head__image {
+  margin-bottom: var(--ks-spacing-stack-m);
+}

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

@@ -0,0 +1,54 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/blog-head.schema.json",
+  "title": "Blog Head",
+  "description": "Intro portion of a singular blog entry",
+  "type": "object",
+  "properties": {
+    "date": {
+      "title": "Published Date",
+      "description": "The date when the blog post was published",
+      "type": "string",
+      "format": "date",
+      "examples": [
+        "12/30/2022"
+      ]
+    },
+    "tags": {
+      "type": "array",
+      "title": "Tags",
+      "description": "The tags associated with the blog post",
+      "items": {
+        "type": "string",
+        "examples": [
+          "tech",
+          "programming"
+        ]
+      }
+    },
+    "headline": {
+      "title": "Headline",
+      "description": "The headline of the blog post",
+      "type": "string",
+      "examples": [
+        "This is a blog post headline"
+      ]
+    },
+    "image": {
+      "title": "Cover Image",
+      "description": "The source of the cover image for the blog post",
+      "type": "string",
+      "format": "uri",
+      "examples": [
+        "img/close-up-young-business-team-working.png"
+      ]
+    },
+    "type": {
+      "const": "blog-head"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "headline"
+  ]
+}

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

@@ -0,0 +1,40 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/blog-head.schema.json",
+  "title": "Blog Head",
+  "description": "Intro portion of a singular blog entry",
+  "type": "object",
+  "properties": {
+    "date": {
+      "title": "Published Date",
+      "description": "The date when the blog post was published",
+      "type": "string",
+      "format": "date",
+      "examples": ["12/30/2022"]
+    },
+    "tags": {
+      "type": "array",
+      "title": "Tags",
+      "description": "The tags associated with the blog post",
+      "items": {
+        "type": "string",
+        "examples": ["tech", "programming"]
+      }
+    },
+    "headline": {
+      "title": "Headline",
+      "description": "The headline of the blog post",
+      "type": "string",
+      "examples": ["This is a blog post headline"]
+    },
+    "image": {
+      "title": "Cover Image",
+      "description": "The source of the cover image for the blog post",
+      "type": "string",
+      "format": "uri",
+      "examples": ["img/close-up-young-business-team-working.png"]
+    }
+  },
+  "additionalProperties": false,
+  "required": ["headline"]
+}

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

@@ -0,0 +1,34 @@
+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 when the blog post was published
+ */
+type PublishedDate = string;
+/**
+ * The tags associated with the blog post
+ */
+type Tags = string[];
+/**
+ * The headline of the blog post
+ */
+type Headline = string;
+/**
+ * The source of the cover image for the blog post
+ */
+type CoverImage = string;
+/**
+ * Intro portion of a singular blog entry
+ */
+interface BlogHeadProps {
+    date?: PublishedDate;
+    tags?: Tags;
+    headline: Headline;
+    image?: CoverImage;
+}
+declare const BlogHead: FC<BlogHeadProps & HTMLAttributes<HTMLElement>>;
+export { BlogHead };

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

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

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

@@ -0,0 +1,58 @@
+.l-container--post-teaser {
+  /* stylelint-disable-next-line property-no-unknown */
+  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);
+}
+@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);
+  }
+}
+@container post-teaser (min-width: 1000px) {
+  article.c-post-teaser {
+    --g-topic--font: var(--ks-font-display-xl);
+  }
+}
+article.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);
+}
+article.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);
+}
+article.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;
+  margin: 0;
+}
+article.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 {
+  text-align: left;
+  transition: var(--ks-transition-hover);
+  transition-property: text-shadow;
+}

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

@@ -0,0 +1,135 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/blog-teaser.schema.json",
+  "title": "Blog Teaser",
+  "description": "Display a blog teaser with date, tags, headline, teaser text and author",
+  "type": "object",
+  "properties": {
+    "date": {
+      "title": "Date",
+      "description": "The date of the blog post",
+      "type": "string",
+      "format": "date",
+      "examples": [
+        "12/30/2022"
+      ]
+    },
+    "tags": {
+      "type": "array",
+      "title": "Tags",
+      "description": "The tags for the blog post",
+      "items": {
+        "type": "string",
+        "examples": [
+          "tech",
+          "programming"
+        ]
+      }
+    },
+    "headline": {
+      "title": "Headline",
+      "description": "The headline of the blog post",
+      "type": "string",
+      "examples": [
+        "This is a blog post headline"
+      ]
+    },
+    "teaserText": {
+      "title": "Teaser Text",
+      "description": "The teaser text of the blog post",
+      "type": "string",
+      "examples": [
+        "This is a teaser text for the blog post"
+      ]
+    },
+    "image": {
+      "title": "Image",
+      "description": "The preview image for the blog post",
+      "type": "string",
+      "format": "image",
+      "examples": [
+        "img/close-up-young-business-team-working.png"
+      ]
+    },
+    "link": {
+      "type": "object",
+      "title": "Link",
+      "description": "URL and label for the blog post linked",
+      "properties": {
+        "url": {
+          "title": "URL",
+          "description": "The blog entry URL to link",
+          "type": "string",
+          "format": "uri",
+          "examples": [
+            "https://example.com"
+          ]
+        },
+        "label": {
+          "title": "Label",
+          "description": "The label to use for the link",
+          "type": "string",
+          "examples": [
+            "Read more"
+          ],
+          "default": "Read more"
+        }
+      },
+      "additionalProperties": false,
+      "required": [
+        "url"
+      ]
+    },
+    "readingTime": {
+      "title": "Reading Time",
+      "description": "Time to read for the blog post",
+      "type": "string",
+      "examples": [
+        "5 min read"
+      ]
+    },
+    "author": {
+      "type": "object",
+      "title": "Author",
+      "description": "The author of the blog post",
+      "properties": {
+        "name": {
+          "title": "Name",
+          "description": "The name of the author",
+          "type": "string",
+          "examples": [
+            "John Doe"
+          ]
+        },
+        "title": {
+          "title": "Title",
+          "description": "The title of the author",
+          "type": "string",
+          "examples": [
+            "CEO"
+          ]
+        },
+        "image": {
+          "title": "Image",
+          "description": "The image URL of the author",
+          "type": "string",
+          "examples": [
+            "img/people/author-emily.png"
+          ]
+        }
+      },
+      "additionalProperties": false,
+      "required": [
+        "name"
+      ]
+    },
+    "type": {
+      "const": "blog-teaser"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "headline",
+    "teaserText"
+  ]
+}

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

@@ -0,0 +1,102 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/blog-teaser.schema.json",
+  "title": "Blog Teaser",
+  "description": "Display a blog teaser with date, tags, headline, teaser text and author",
+  "type": "object",
+  "properties": {
+    "date": {
+      "title": "Date",
+      "description": "The date of the blog post",
+      "type": "string",
+      "format": "date",
+      "examples": ["12/30/2022"]
+    },
+    "tags": {
+      "type": "array",
+      "title": "Tags",
+      "description": "The tags for the blog post",
+      "items": {
+        "type": "string",
+        "examples": ["tech", "programming"]
+      }
+    },
+    "headline": {
+      "title": "Headline",
+      "description": "The headline of the blog post",
+      "type": "string",
+      "examples": ["This is a blog post headline"]
+    },
+    "teaserText": {
+      "title": "Teaser Text",
+      "description": "The teaser text of the blog post",
+      "type": "string",
+      "examples": ["This is a teaser text for the blog post"]
+    },
+    "image": {
+      "title": "Image",
+      "description": "The preview image for the blog post",
+      "type": "string",
+      "format": "image",
+      "examples": ["img/close-up-young-business-team-working.png"]
+    },
+    "link": {
+      "type": "object",
+      "title": "Link",
+      "description": "URL and label for the blog post linked",
+      "properties": {
+        "url": {
+          "title": "URL",
+          "description": "The blog entry URL to link",
+          "type": "string",
+          "format": "uri",
+          "examples": ["https://example.com"]
+        },
+        "label": {
+          "title": "Label",
+          "description": "The label to use for the link",
+          "type": "string",
+          "examples": ["Read more"],
+          "default": "Read more"
+        }
+      },
+      "additionalProperties": false,
+      "required": ["url"]
+    },
+    "readingTime": {
+      "title": "Reading Time",
+      "description": "Time to read for the blog post",
+      "type": "string",
+      "examples": ["5 min read"]
+    },
+    "author": {
+      "type": "object",
+      "title": "Author",
+      "description": "The author of the blog post",
+      "properties": {
+        "name": {
+          "title": "Name",
+          "description": "The name of the author",
+          "type": "string",
+          "examples": ["John Doe"]
+        },
+        "title": {
+          "title": "Title",
+          "description": "The title of the author",
+          "type": "string",
+          "examples": ["CEO"]
+        },
+        "image": {
+          "title": "Image",
+          "description": "The image URL of the author",
+          "type": "string",
+          "examples": ["img/people/author-emily.png"]
+        }
+      },
+      "additionalProperties": false,
+      "required": ["name"]
+    }
+  },
+  "additionalProperties": false,
+  "required": ["headline", "teaserText"]
+}

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

@@ -0,0 +1,81 @@
+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 };

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

@@ -0,0 +1,37 @@
+import "./blog-teaser.css";
+import { jsx } from 'react/jsx-runtime';
+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 teaserMetaItems = [];
+    if (date)
+        teaserMetaItems.push({
+            icon: "date",
+            text: typeof date === "number" ? new Date(date).toLocaleDateString() : date,
+        });
+    if (readingTime)
+        teaserMetaItems.push({
+            icon: "time",
+            text: readingTime,
+        });
+    return (jsx(Container, { name: "post-teaser", children: jsx(PostTeaserContextDefault
+        // @ts-expect-error
+        , { 
+            // @ts-expect-error
+            image: { src: image }, meta: {
+                author: {
+                    image: author.image && { src: author.image },
+                    name: author.name,
+                },
+                items: teaserMetaItems,
+            }, link: {
+                label: link.label || "Read more",
+                // @ts-expect-error
+                target: link.url,
+            }, title: headline, body: teaserText, categories: tags.map((tag) => {
+                return { label: tag };
+            }) }) }));
+};
+
+export { BlogTeaser };