@kickstartds/ds-agency-premium 1.0.1

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

@@ -0,0 +1,121 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/features.schema.json",
+  "title": "Features",
+  "description": "Component used to display a set of features",
+  "type": "object",
+  "properties": {
+    "layout": {
+      "type": "string",
+      "title": "Layout",
+      "description": "The layout variant to use for the features",
+      "enum": [
+        "largeTiles",
+        "smallTiles",
+        "list"
+      ],
+      "default": "largeTiles"
+    },
+    "style": {
+      "type": "string",
+      "enum": [
+        "intext",
+        "stack",
+        "centered",
+        "besideLarge",
+        "besideSmall"
+      ],
+      "default": "stack"
+    },
+    "ctas": {
+      "type": "object",
+      "properties": {
+        "toggle": {
+          "type": "boolean",
+          "default": true,
+          "title": "CTA Toggle",
+          "description": "Activate/disable the CTAs"
+        },
+        "style": {
+          "type": "string",
+          "enum": [
+            "button",
+            "link",
+            "intext"
+          ],
+          "default": "link"
+        }
+      },
+      "additionalProperties": false
+    },
+    "features": {
+      "type": "array",
+      "title": "Features",
+      "description": "The features to display",
+      "items": {
+        "type": "object",
+        "properties": {
+          "icon": {
+            "type": "string",
+            "title": "Icon",
+            "description": "The icon for the feature",
+            "examples": [
+              "person"
+            ]
+          },
+          "title": {
+            "type": "string",
+            "title": "Title",
+            "description": "The title of the feature",
+            "examples": [
+              "Feature 1"
+            ]
+          },
+          "text": {
+            "type": "string",
+            "title": "Text",
+            "description": "The description of the feature",
+            "examples": [
+              "This is a feature"
+            ]
+          },
+          "cta": {
+            "type": "object",
+            "title": "Call to Action",
+            "description": "The call to action",
+            "properties": {
+              "target": {
+                "type": "string",
+                "title": "Call to Action target",
+                "description": "The CTA target",
+                "default": "#",
+                "format": "uri"
+              },
+              "label": {
+                "type": "string",
+                "title": "Link Label",
+                "description": "The text label displayed on the link",
+                "default": "See more",
+                "examples": [
+                  "See all our partners"
+                ]
+              }
+            },
+            "additionalProperties": false
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "title",
+          "text"
+        ]
+      },
+      "minItems": 1,
+      "maxItems": 8
+    },
+    "type": {
+      "const": "features"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/features/features.schema.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/features.schema.json",
+  "title": "Features",
+  "description": "Component used to display a set of features",
+  "type": "object",
+  "properties": {
+    "layout": {
+      "type": "string",
+      "title": "Layout",
+      "description": "The layout variant to use for the features",
+      "enum": ["largeTiles", "smallTiles", "list"],
+      "default": "largeTiles"
+    },
+    "style": {
+      "type": "string",
+      "enum": ["intext", "stack", "centered", "besideLarge", "besideSmall"],
+      "default": "stack"
+    },
+    "ctas": {
+      "type": "object",
+      "properties": {
+        "toggle": {
+          "type": "boolean",
+          "default": true,
+          "title": "CTA Toggle",
+          "description": "Activate/disable the CTAs"
+        },
+        "style": {
+          "type": "string",
+          "enum": ["button", "link", "intext"],
+          "default": "link"
+        }
+      },
+      "additionalProperties": false
+    },
+    "features": {
+      "type": "array",
+      "title": "Features",
+      "description": "The features to display",
+      "items": {
+        "type": "object",
+        "properties": {
+          "icon": {
+            "type": "string",
+            "title": "Icon",
+            "description": "The icon for the feature",
+            "examples": ["person"]
+          },
+          "title": {
+            "type": "string",
+            "title": "Title",
+            "description": "The title of the feature",
+            "examples": ["Feature 1"]
+          },
+          "text": {
+            "type": "string",
+            "title": "Text",
+            "description": "The description of the feature",
+            "examples": ["This is a feature"]
+          },
+          "cta": {
+            "type": "object",
+            "title": "Call to Action",
+            "description": "The call to action",
+            "properties": {
+              "target": {
+                "type": "string",
+                "title": "Call to Action target",
+                "description": "The CTA target",
+                "default": "#",
+                "format": "uri"
+              },
+              "label": {
+                "type": "string",
+                "title": "Link Label",
+                "description": "The text label displayed on the link",
+                "default": "See more",
+                "examples": ["See all our partners"]
+              }
+            },
+            "additionalProperties": false
+          }
+        },
+        "additionalProperties": false,
+        "required": ["title", "text"]
+      },
+      "minItems": 1,
+      "maxItems": 8
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/features/index.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes, FC } from "react";
+import { FeaturesProps } from "../../FeaturesProps-79dea880.js";
+declare const Features: FC<FeaturesProps & HTMLAttributes<HTMLDivElement>>;
+export { Features };

package/dist/components/features/index.js

@@ -0,0 +1,32 @@
+import "./features.css";
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Feature } from '../feature/index.js';
+import '@kickstartds/base/lib/icon';
+import '../button/index.js';
+import 'react';
+import '@kickstartds/base/lib/button';
+import '@kickstartds/base/lib/link';
+
+const Features = ({ layout = "largeTiles", ctas = {
+    style: "link",
+    toggle: true,
+}, style = "intext", features = [], ...props }) => {
+    return (jsx("div", { className: classnames(`c-features c-features--${layout === "largeTiles"
+            ? "large-tiles"
+            : layout === "smallTiles"
+                ? "small-tiles"
+                : `${layout}`}`), ...props, children: features.map((feature, index) => (jsx(Feature, { title: feature.title, text: feature.text, style: style === "intext"
+                ? "intext"
+                : style === "stack"
+                    ? "stack"
+                    : style === "centered"
+                        ? "centered"
+                        : style === "besideLarge"
+                            ? "besideLarge"
+                            : style === "besideSmall"
+                                ? "besideSmall"
+                                : undefined, icon: feature?.icon, ctaLabel: feature?.cta?.label, ctaTarget: feature?.cta?.target, ctaToggle: ctas?.toggle, ctaStyle: ctas?.style }, index))) }));
+};
+
+export { Features };

package/dist/components/footer/footer.css

@@ -0,0 +1,53 @@
+.c-footer {
+  --g-logo--height: 1.5rem;
+}
+@media (min-width: 42rem) {
+  .c-footer {
+    --g-logo--height: 1.5rem;
+  }
+}
+@media (min-width: 62em) {
+  .c-footer {
+    --g-logo--height: 2rem;
+  }
+}
+
+.c-footer {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  display: flex;
+  background-color: var(--ks-background-color-default);
+}
+.c-footer__content {
+  padding: var(--l-section--space-small) var(--l-section--content-padding);
+  border-top: 1px solid var(--ks-border-color-accent);
+  max-width: var(--l-section--content-width-wide);
+  width: 100%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ks-spacing-stack-m);
+}
+.c-footer__logo {
+  display: block;
+}
+.c-footer__logo img {
+  height: var(--g-logo--height);
+  width: auto;
+}
+.c-footer__trademark {
+  font: var(--ks-font-copy-xs);
+  color: var(--ks-text-color-default);
+}
+.c-footer__links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--ks-spacing-inline-m);
+}
+.c-footer__link {
+  font: var(--ks-font-interface-s);
+  --g-link--color: var(--ks-text-color-default);
+}

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

@@ -0,0 +1,178 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/footer.schema.json",
+  "title": "Footer",
+  "type": "object",
+  "properties": {
+    "logo": {
+      "$schema": "http://json-schema.org/draft-07/schema#",
+      "$id": "http://schema.kickstartds.com/base/picture.schema.json",
+      "title": "Picture",
+      "description": "Base component to display a picture",
+      "type": "object",
+      "properties": {
+        "src": {
+          "title": "Source",
+          "description": "Picture source",
+          "type": "string",
+          "format": "image",
+          "examples": [
+            "https://picsum.photos/seed/kdspicture/300/300"
+          ]
+        },
+        "srcSet": {
+          "title": "Picture sourceset",
+          "description": "Use a srcSet to display picture",
+          "type": "string",
+          "format": "image"
+        },
+        "alt": {
+          "title": "Alt text",
+          "description": "Alt text to display for picture",
+          "type": "string"
+        },
+        "width": {
+          "title": "Width",
+          "description": "Width of the picture",
+          "type": "integer",
+          "minimum": 0,
+          "examples": [
+            300
+          ]
+        },
+        "height": {
+          "title": "Height",
+          "description": "Height of the picture",
+          "type": "integer",
+          "minimum": 0,
+          "examples": [
+            300
+          ]
+        },
+        "className": {
+          "title": "Additional Classes",
+          "description": "Add additional css classes that should be applied to the button",
+          "type": "string"
+        },
+        "component": {
+          "title": "`ks-component` attribute",
+          "description": "Optional custom component identifier",
+          "type": "string"
+        },
+        "id": {
+          "title": "Id",
+          "description": "Add id attribute to the image",
+          "type": "string"
+        },
+        "itemProp": {
+          "title": "`itemprop` attribute",
+          "description": "Define an itemprop attribute for the picture",
+          "type": "string"
+        },
+        "style": {
+          "title": "`style` attribute",
+          "description": "Define a style attribute for the picture",
+          "type": "string"
+        },
+        "noscript": {
+          "title": "Noscript",
+          "description": "Render noscript fallback",
+          "type": "boolean",
+          "default": true
+        },
+        "lazy": {
+          "title": "Lazy",
+          "description": "Load the picture lazily",
+          "type": "boolean",
+          "default": true
+        },
+        "sources": {
+          "title": "Sources",
+          "description": "Additional sources. This will result in a `picture`-Element",
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "srcSet": {
+                "title": "Picture sourceset",
+                "description": "Use a srcSet to display picture",
+                "type": "string",
+                "format": "image"
+              },
+              "media": {
+                "title": "TODO MEDIA TITLE",
+                "description": "TODO MEDIA DESCRIPTION",
+                "type": "string"
+              },
+              "type": {
+                "title": "TODO TYPE TITLE",
+                "description": "TODO TYPE DESCRIPTION",
+                "type": "string"
+              }
+            },
+            "additionalProperties": false
+          }
+        },
+        "pictureClassName": {
+          "title": "`class` attribute",
+          "description": "Set additional class(es) to the picture",
+          "type": "string"
+        },
+        "type": {
+          "const": "picture"
+        }
+      },
+      "additionalProperties": false
+    },
+    "logoHref": {
+      "type": "string",
+      "default": "/"
+    },
+    "navItems": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "href": {
+            "type": "string"
+          },
+          "label": {
+            "type": "string"
+          },
+          "target": {
+            "type": "string"
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "href",
+          "label"
+        ]
+      },
+      "examples": [
+        [
+          {
+            "href": "#privacy-policy",
+            "label": "Privacy policy"
+          },
+          {
+            "href": "#changelog",
+            "label": "Changelog"
+          },
+          {
+            "href": "https://main--64f08cbba622af835d382b4f.chromatic.com/",
+            "label": "Storybook",
+            "target": "_blank"
+          }
+        ]
+      ]
+    },
+    "type": {
+      "const": "footer"
+    }
+  },
+  "required": [
+    "logo"
+  ],
+  "additionalProperties": false
+}

package/dist/components/footer/footer.schema.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/footer.schema.json",
+  "title": "Footer",
+  "type": "object",
+  "properties": {
+    "logo": {
+      "$ref": "http://schema.kickstartds.com/base/picture.schema.json"
+    },
+    "logoHref": {
+      "type": "string",
+      "default": "/"
+    },
+    "navItems": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "href": { "type": "string" },
+          "label": { "type": "string" },
+          "target": { "type": "string" }
+        },
+        "additionalProperties": false,
+        "required": ["href", "label"]
+      },
+      "examples": [
+        [
+          {
+            "href": "#privacy-policy",
+            "label": "Privacy policy"
+          },
+          {
+            "href": "#changelog",
+            "label": "Changelog"
+          },
+          {
+            "href": "https://main--64f08cbba622af835d382b4f.chromatic.com/",
+            "label": "Storybook",
+            "target": "_blank"
+          }
+        ]
+      ]
+    }
+  },
+  "required": ["logo"],
+  "additionalProperties": false
+}

package/dist/components/footer/index.d.ts

@@ -0,0 +1,22 @@
+import { 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.
+ */
+import { PictureProps } from "@kickstartds/base/lib/picture/typing";
+interface FooterProps {
+    /**
+     * Referenced component PictureProps
+     */
+    logo: PictureProps;
+    logoHref?: string;
+    navItems?: {
+        href: string;
+        label: string;
+        target?: string;
+    }[];
+}
+declare const Footer: FC<FooterProps>;
+export { Footer };

package/dist/components/footer/index.js

@@ -0,0 +1,11 @@
+import "./footer.css";
+import { createElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Picture } from '@kickstartds/base/lib/picture';
+import { Link } from '@kickstartds/base/lib/link';
+
+const now = new Date();
+const Footer = ({ logo, logoHref = "/", navItems = [], }) => (jsx("div", { className: classnames("c-footer"), children: jsxs("div", { className: "c-footer__content", children: [jsx(Link, { className: "c-footer__logo", href: logoHref, children: jsx(Picture, { ...logo }) }), jsxs("span", { className: "c-footer__trademark", children: ["\u00A9 ", now.getFullYear(), " systemics Inc. All rights reserved."] }), navItems.length > 0 ? (jsx("div", { className: "c-footer__links", children: navItems.map(({ label, ...linkProps }) => (createElement(Link, { ...linkProps, className: "c-footer__link", key: linkProps.href + label }, label))) })) : null] }) }));
+
+export { Footer };

package/dist/components/gallery/gallery.css

@@ -0,0 +1,50 @@
+.c-gallery__grid--stack {
+  display: flex;
+  gap: var(--ks-spacing-stack-m);
+  flex-direction: column;
+}
+.c-gallery__grid--small-tiles {
+  display: grid;
+  gap: var(--ks-spacing-inline-m);
+  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+}
+.c-gallery__grid--large-tiles {
+  display: grid;
+  gap: var(--ks-spacing-inline-m);
+  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
+}
+.c-gallery__image {
+  flex: 1 1;
+}
+.c-gallery__image--square img {
+  aspect-ratio: 1/1;
+  object-fit: cover;
+}
+.c-gallery__image--wide img {
+  aspect-ratio: 4/3;
+  object-fit: cover;
+}
+.c-gallery__image--landscape img {
+  aspect-ratio: 16/9;
+  object-fit: cover;
+}
+
+.pswp .pswp__img {
+  object-fit: contain;
+}
+.pswp .pswp__caption {
+  background-color: var(--ks-color-bg-alpha-3);
+  color: var(--ks-color-fg);
+}
+
+:root,
+[ks-inverted],
+[ks-theme] {
+  --c-lightbox--bg: var(--ks-color-bg) !important;
+  --c-lightbox--placeholder-bg: var(--ks-color-fg-to-bg-1) !important;
+  --c-lightbox--root-z-index: var(--ks-depth-modal) !important;
+  --c-lightbox--icon-color: var(--ks-color-fg) !important;
+  --c-lightbox--icon-color-secondary: var(--ks-color-secondary) !important;
+  --c-lightbox--stroke-width: 0px !important;
+  --c-lightbox--error-text-color: var(--ks-color-fg-to-bg-9) !important;
+}