@kickstartds/ds-agency-premium 1.0.1

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

@@ -0,0 +1,84 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/gallery.schema.json",
+  "title": "Gallery",
+  "description": "Component used to display a gallery of images",
+  "type": "object",
+  "properties": {
+    "images": {
+      "type": "array",
+      "title": "Images",
+      "description": "The images to display in the gallery",
+      "items": {
+        "type": "object",
+        "properties": {
+          "src": {
+            "type": "string",
+            "title": "src",
+            "description": "The source of the image",
+            "examples": [
+              "https://example.com/image1.jpg"
+            ]
+          },
+          "alt": {
+            "type": "string",
+            "title": "Alt text",
+            "description": "Alt text of the image",
+            "examples": [
+              "https://example.com/image1.jpg"
+            ]
+          },
+          "caption": {
+            "type": "string",
+            "title": "Caption",
+            "description": "The caption of the image",
+            "examples": [
+              "Caption Image"
+            ]
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "src"
+        ]
+      },
+      "minItems": 1,
+      "maxItems": 10
+    },
+    "layout": {
+      "type": "string",
+      "title": "Layout",
+      "description": "The layout of the gallery images",
+      "enum": [
+        "stack",
+        "smallTiles",
+        "largeTiles"
+      ]
+    },
+    "aspectRatio": {
+      "type": "string",
+      "title": "Aspect Ratio",
+      "description": "The aspect ratio of the gallery images",
+      "enum": [
+        "unset",
+        "square",
+        "wide",
+        "landscape"
+      ],
+      "default": "unset"
+    },
+    "lightbox": {
+      "type": "boolean",
+      "title": "Lightbox",
+      "description": "Display images in a lightbox gallery",
+      "default": false
+    },
+    "type": {
+      "const": "gallery"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "images"
+  ]
+}

package/dist/components/gallery/gallery.schema.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/gallery.schema.json",
+  "title": "Gallery",
+  "description": "Component used to display a gallery of images",
+  "type": "object",
+  "properties": {
+    "images": {
+      "type": "array",
+      "title": "Images",
+      "description": "The images to display in the gallery",
+      "items": {
+        "type": "object",
+        "properties": {
+          "src": {
+            "type": "string",
+            "title": "src",
+            "description": "The source of the image",
+            "examples": ["https://example.com/image1.jpg"]
+          },
+          "alt": {
+            "type": "string",
+            "title": "Alt text",
+            "description": "Alt text of the image",
+            "examples": ["https://example.com/image1.jpg"]
+          },
+          "caption": {
+            "type": "string",
+            "title": "Caption",
+            "description": "The caption of the image",
+            "examples": ["Caption Image"]
+          }
+        },
+        "additionalProperties": false,
+        "required": ["src"]
+      },
+      "minItems": 1,
+      "maxItems": 10
+    },
+    "layout": {
+      "type": "string",
+      "title": "Layout",
+      "description": "The layout of the gallery images",
+      "enum": ["stack", "smallTiles", "largeTiles"]
+    },
+    "aspectRatio": {
+      "type": "string",
+      "title": "Aspect Ratio",
+      "description": "The aspect ratio of the gallery images",
+      "enum": ["unset", "square", "wide", "landscape"],
+      "default": "unset"
+    },
+    "lightbox": {
+      "type": "boolean",
+      "title": "Lightbox",
+      "description": "Display images in a lightbox gallery",
+      "default": false
+    }
+  },
+  "additionalProperties": false,
+  "required": ["images"]
+}

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

@@ -0,0 +1,4 @@
+import { HTMLAttributes, FC } from "react";
+import { GalleryProps } from "../../GalleryProps-76e7de44.js";
+declare const Gallery: FC<GalleryProps & HTMLAttributes<HTMLElement>>;
+export { Gallery };

package/dist/components/gallery/index.js

@@ -0,0 +1,35 @@
+import "./gallery.css";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import classnames from 'classnames';
+import { TextMedia } from '@kickstartds/base/lib/text-media';
+
+const Gallery = ({ lightbox = false, layout = "tiles", aspectRatio = "square", images = [], }) => {
+    const galleryId = useMemo(() => `gallery-${Date.now()}`, []);
+    return (jsx("div", { className: `c-gallery`, children: jsx("div", { className: classnames(`c-gallery__grid`, `c-gallery__grid--${layout === "smallTiles"
+                ? "small-tiles"
+                : layout === "largeTiles"
+                    ? "large-tiles"
+                    : layout}`), children: images.map((image, index) => (jsx("div", { className: classnames("c-gallery__image", aspectRatio !== "unset" && `c-gallery__image--${aspectRatio}`), children: jsx(TextMedia, { media: [
+                        {
+                            ...(lightbox && {
+                                lightboxImage: {
+                                    thumb: image.src,
+                                    image: image.src,
+                                    alt: image.alt,
+                                    gallery: galleryId,
+                                },
+                            }),
+                            ...(lightbox === false && {
+                                image: {
+                                    src: image.src,
+                                    alt: image.alt,
+                                    gallery: galleryId,
+                                },
+                            }),
+                            caption: image.caption,
+                        },
+                    ], text: undefined }) }, index))) }) }));
+};
+
+export { Gallery };

package/dist/components/header/header.css

@@ -0,0 +1,78 @@
+:root {
+  --g-logo--height: 2rem;
+  --g-header--spacing-v: var(--ks-spacing-stack-m);
+  --g-header-spacing-h: var(--l-section--content-padding);
+  --g-nav-toggle--color: var(--ks-color-fg);
+  --g-nav-toggle-open--color: var(--ks-color-fg);
+}
+@media (min-width: 42rem) {
+  :root {
+    --g-logo--height: 2.5rem;
+  }
+}
+@media (min-width: 62em) {
+  :root {
+    --g-logo--height: 3rem;
+  }
+}
+
+:root {
+  --g-logo--height: 2rem;
+}
+@media (min-width: 42rem) {
+  :root {
+    --g-logo--height: 2.5rem;
+  }
+}
+@media (min-width: 62em) {
+  :root {
+    --g-logo--height: 3rem;
+  }
+}
+
+.c-header {
+  --g-header--spacing-v: var(--ks-spacing-stack-m);
+  --g-header-spacing-h: var(--l-section--content-padding);
+  position: relative;
+  background-color: var(--ks-background-color-default);
+  z-index: 1;
+  width: 100%;
+  display: flex;
+  padding: var(--g-header--spacing-v) 0;
+}
+.c-header--floating {
+  background: linear-gradient(var(--ks-color-bg-alpha-5), transparent);
+  position: absolute;
+  z-index: 999;
+}
+.c-header--floating .c-nav-main__link {
+  text-shadow: 0 0 10px var(--ks-color-bg-alpha-5);
+}
+.c-header__content {
+  padding: 0 var(--g-header-spacing-h);
+  max-width: var(--l-section--content-width-max);
+  width: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+}
+.c-header__logo {
+  display: block;
+}
+.c-header__logo img {
+  height: var(--g-logo--height);
+  width: auto;
+}
+
+.c-header--spacer {
+  display: none;
+}
+@media (min-width: 640px) {
+  .c-header--spacer {
+    display: block;
+    height: var(--g-header-height);
+    z-index: -1;
+    position: relative;
+    background-color: var(--ks-background-color-default);
+  }
+}

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

@@ -0,0 +1,188 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/header.schema.json",
+  "title": "Header",
+  "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": "/"
+    },
+    "floating": {
+      "type": "boolean",
+      "title": "Floating",
+      "description": "Make the header float over the first Section",
+      "default": false
+    },
+    "navItems": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "href": {
+            "type": "string"
+          },
+          "label": {
+            "type": "string"
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "href",
+          "label"
+        ]
+      },
+      "examples": [
+        [
+          {
+            "href": "#about",
+            "label": "About us"
+          },
+          {
+            "href": "#services",
+            "label": "Our Services"
+          },
+          {
+            "href": "#project",
+            "label": "Project"
+          },
+          {
+            "href": "#showcase",
+            "label": "Showcase"
+          },
+          {
+            "href": "#blog",
+            "label": "Blog"
+          }
+        ]
+      ]
+    },
+    "type": {
+      "const": "header"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "logo"
+  ]
+}

package/dist/components/header/header.schema.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/header.schema.json",
+  "title": "Header",
+  "type": "object",
+  "properties": {
+    "logo": {
+      "$ref": "http://schema.kickstartds.com/base/picture.schema.json"
+    },
+    "logoHref": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/logoHref"
+    },
+    "floating": {
+      "type": "boolean",
+      "title": "Floating",
+      "description": "Make the header float over the first Section",
+      "default": false
+    },
+    "navItems": {
+      "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/items"
+    }
+  },
+  "additionalProperties": false,
+  "required": ["logo"]
+}

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

@@ -0,0 +1,26 @@
+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";
+/**
+ * Make the header float over the first Section
+ */
+type Floating = boolean;
+interface HeaderProps {
+    /**
+     * Referenced component PictureProps
+     */
+    logo: PictureProps;
+    logoHref?: string;
+    floating?: Floating;
+    navItems?: {
+        href: string;
+        label: string;
+    }[];
+}
+declare const Header: FC<HeaderProps>;
+export { Header };

package/dist/components/header/index.js

@@ -0,0 +1,16 @@
+import "./header.css";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Picture } from '@kickstartds/base/lib/picture';
+import { Link } from '@kickstartds/base/lib/link';
+import { NavMain } from '../nav-main/index.js';
+import 'react';
+import '../nav-main/js/NavToggle.client.js';
+import '@kickstartds/core/lib/component';
+import '../nav-main/js/navMainEvents.client.js';
+import '@kickstartds/core/lib/core';
+import '../nav-main/js/body.client.js';
+
+const Header = ({ logo, floating, logoHref = "/", navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("c-header", floating ? `c-header--floating` : ""), children: jsxs("div", { className: "c-header__content", children: [jsx(Link, { className: "c-header__logo", href: logoHref, children: jsx(Picture, { ...logo }) }), jsx(NavMain, { logo: logo, logoHref: logoHref, items: navItems })] }) }) }));
+
+export { Header };

package/dist/components/headline/headline.css

@@ -0,0 +1,78 @@
+:root, :root #root, [ks-inverted], [ks-inverted] #root, #root [ks-inverted], [ks-inverted] #root, [ks-theme], [ks-theme] #root, #root [ks-theme] {
+  --g-headline--color: var(--ks-color-fg);
+  --g-headline--font-weight: var(--ks-font-weight-medium);
+  --c-headline--higlight-gradient: var(--g-gradient--higlight);
+}
+:root .c-headline, :root #root .c-headline, [ks-inverted] .c-headline, [ks-inverted] #root .c-headline, #root [ks-inverted] .c-headline, [ks-inverted] #root .c-headline, [ks-theme] .c-headline, [ks-theme] #root .c-headline, #root [ks-theme] .c-headline {
+  --c-headline--color: var(--g-headline--color);
+  --c-headline--font-weight: var(--g-headline--font-weight);
+  --c-headline--gap: 0.25em;
+}
+:root .c-headline--h1, :root #root .c-headline--h1, [ks-inverted] .c-headline--h1, [ks-inverted] #root .c-headline--h1, #root [ks-inverted] .c-headline--h1, [ks-inverted] #root .c-headline--h1, [ks-theme] .c-headline--h1, [ks-theme] #root .c-headline--h1, #root [ks-theme] .c-headline--h1 {
+  --c-headline--font: var(--ks-font-display-xxl);
+}
+:root .c-headline--h1 .c-headline__subheadline, :root #root .c-headline--h1 .c-headline__subheadline, [ks-inverted] .c-headline--h1 .c-headline__subheadline, [ks-inverted] #root .c-headline--h1 .c-headline__subheadline, #root [ks-inverted] .c-headline--h1 .c-headline__subheadline, [ks-inverted] #root .c-headline--h1 .c-headline__subheadline, [ks-theme] .c-headline--h1 .c-headline__subheadline, [ks-theme] #root .c-headline--h1 .c-headline__subheadline, #root [ks-theme] .c-headline--h1 .c-headline__subheadline {
+  --c-headline_subheadline--font: var(--ks-font-copy-l);
+}
+@media (min-width: 42rem) {
+  :root .c-headline--h1 .c-headline__subheadline, :root #root .c-headline--h1 .c-headline__subheadline, [ks-inverted] .c-headline--h1 .c-headline__subheadline, [ks-inverted] #root .c-headline--h1 .c-headline__subheadline, #root [ks-inverted] .c-headline--h1 .c-headline__subheadline, [ks-inverted] #root .c-headline--h1 .c-headline__subheadline, [ks-theme] .c-headline--h1 .c-headline__subheadline, [ks-theme] #root .c-headline--h1 .c-headline__subheadline, #root [ks-theme] .c-headline--h1 .c-headline__subheadline {
+    --c-headline_subheadline--font: var(--ks-font-copy-xl);
+  }
+}
+:root .c-headline--h2, :root #root .c-headline--h2, [ks-inverted] .c-headline--h2, [ks-inverted] #root .c-headline--h2, #root [ks-inverted] .c-headline--h2, [ks-inverted] #root .c-headline--h2, [ks-theme] .c-headline--h2, [ks-theme] #root .c-headline--h2, #root [ks-theme] .c-headline--h2 {
+  --c-headline--font: var(--ks-font-display-xl);
+}
+@media (min-width: 42rem) {
+  :root .c-headline--h2 .c-headline__subheadline, :root #root .c-headline--h2 .c-headline__subheadline, [ks-inverted] .c-headline--h2 .c-headline__subheadline, [ks-inverted] #root .c-headline--h2 .c-headline__subheadline, #root [ks-inverted] .c-headline--h2 .c-headline__subheadline, [ks-inverted] #root .c-headline--h2 .c-headline__subheadline, [ks-theme] .c-headline--h2 .c-headline__subheadline, [ks-theme] #root .c-headline--h2 .c-headline__subheadline, #root [ks-theme] .c-headline--h2 .c-headline__subheadline {
+    --c-headline_subheadline--font: var(--ks-font-copy-l);
+  }
+}
+:root .c-headline--h3, :root #root .c-headline--h3, [ks-inverted] .c-headline--h3, [ks-inverted] #root .c-headline--h3, #root [ks-inverted] .c-headline--h3, [ks-inverted] #root .c-headline--h3, [ks-theme] .c-headline--h3, [ks-theme] #root .c-headline--h3, #root [ks-theme] .c-headline--h3 {
+  --c-headline--font: var(--ks-font-display-l);
+}
+:root .c-headline--h4, :root #root .c-headline--h4, [ks-inverted] .c-headline--h4, [ks-inverted] #root .c-headline--h4, #root [ks-inverted] .c-headline--h4, [ks-inverted] #root .c-headline--h4, [ks-theme] .c-headline--h4, [ks-theme] #root .c-headline--h4, #root [ks-theme] .c-headline--h4 {
+  --c-headline--font: var(--ks-font-display-m);
+}
+:root .c-headline--p, :root #root .c-headline--p, [ks-inverted] .c-headline--p, [ks-inverted] #root .c-headline--p, #root [ks-inverted] .c-headline--p, [ks-inverted] #root .c-headline--p, [ks-theme] .c-headline--p, [ks-theme] #root .c-headline--p, #root [ks-theme] .c-headline--p {
+  --c-headline--font: var(--ks-font-copy-m);
+}
+:root .c-headline__subheadline, :root #root .c-headline__subheadline, [ks-inverted] .c-headline__subheadline, [ks-inverted] #root .c-headline__subheadline, #root [ks-inverted] .c-headline__subheadline, [ks-inverted] #root .c-headline__subheadline, [ks-theme] .c-headline__subheadline, [ks-theme] #root .c-headline__subheadline, #root [ks-theme] .c-headline__subheadline {
+  --c-headline_subheadline--font: var(--ks-font-copy-m);
+  --c-headline_subheadline--color: var(--ks-text-color-primary);
+  --c-headline_subheadline--font-weight: var(--ks-font-weight-semi-bold);
+}
+
+.c-headline {
+  max-width: unset;
+  font: var(--c-headline--font);
+  display: flex;
+  flex-direction: column;
+  gap: var(--c-headline--gap);
+}
+.c-headline__headline {
+  font: var(--c-headline--font);
+  font-weight: var(--c-headline--font-weight);
+}
+.c-headline__subheadline {
+  margin: 0;
+  max-width: var(--l-section--content-width-default);
+}
+.c-headline--align-center .c-headline__headline {
+  text-align: center;
+}
+.c-headline--align-center .c-headline__subheadline {
+  margin: auto;
+}
+
+.c-headline strong,
+h1 strong,
+h2 strong,
+h3 strong,
+h4 strong,
+h5 strong {
+  font-weight: inherit;
+  background: var(--c-headline--higlight-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  filter: var(--g-filter-drop-shadow--higlight);
+}