@kickstartds/ds-agency-premium 1.4.12 → 1.4.13--canary.15.811.0

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"]
+}

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

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+import { HTMLAttributes, FC, PropsWithChildren } 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.
+ */
+/**
+ * URL of the image to display
+ */
+type ImageSource = string;
+/**
+ * Alt text of the image
+ */
+type AltText = string;
+/**
+ * Image uses all the horizontal space vailable
+ */
+type FullWidth = boolean;
+/**
+ * Aspect Ratio of the Images
+ */
+type AspectRatio = "wide" | "square" | "vertical";
+/**
+ * Name, company name, etc.
+ */
+type Title = string;
+/**
+ * Position, profession, department, location, etc.
+ */
+type Subtitle = string;
+/**
+ * Open link in new Tab
+ */
+type OpenLinkInNewTab = boolean;
+type CopyText = string;
+/**
+ * Additional css classes attached to the wrapping element
+ */
+type Class = string;
+/**
+ * Optional custom component identifier
+ */
+type KsComponentAttribute = string;
+/**
+ * Component used for user interaction
+ */
+interface ContactProps {
+    image?: {
+        src?: ImageSource;
+        alt?: AltText;
+        fullWidth?: FullWidth;
+        aspectRatio?: AspectRatio;
+    };
+    title?: Title;
+    subtitle?: Subtitle;
+    links?: {
+        icon?: string;
+        label?: string;
+        href?: string;
+        newTab?: OpenLinkInNewTab;
+    }[];
+    copy?: CopyText;
+    className?: Class;
+    component?: KsComponentAttribute;
+}
+declare const Contact: import("react").ForwardRefExoticComponent<ContactProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const ContactProvider: FC<PropsWithChildren>;
+export { Contact, ContactProvider };

package/dist/components/contact/index.js

@@ -0,0 +1,16 @@
+import "./contact.css";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import classnames from 'classnames';
+import { Picture } from '@kickstartds/base/lib/picture';
+import { ContactContext } from '@kickstartds/base/lib/contact';
+import { Link } from '@kickstartds/base/lib/link';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+import { Container } from '@kickstartds/core/lib/container';
+
+const Contact = forwardRef(({ title, subtitle, image, links, copy, className, ...props }, ref) => (jsx(Container, { name: "contact", children: jsxs("address", { className: classnames("dsa-contact", image?.aspectRatio && `dsa-contact--image-${image?.aspectRatio}`, image?.fullWidth && `dsa-contact--image-full-width`, className), ref: ref, ...props, children: [image && image.src ? (jsx("div", { className: "dsa-contact__image-wrap", children: jsx(Picture, { ...image, className: "dsa-contact__image" }) })) : (""), jsxs("div", { className: "dsa-contact__body", children: [title && (jsxs("div", { className: "dsa-contact__header", children: [jsx("span", { className: "dsa-contact__title", children: title }), jsx("span", { className: "dsa-contact__subtitle", children: subtitle })] })), copy && jsx(RichText, { text: copy, className: "dsa-contact__copy" }), links.length ? (jsx("ul", { className: "dsa-contact__links", children: links.map(({ icon, href, label, newTab }, i) => (jsx("li", { children: jsxs(Link, { className: "dsa-contact__link", href: href, ...(newTab ? { target: "_blank", rel: "noopener" } : {}), children: [jsx(Icon, { icon: icon }), label] }) }, i))) })) : ("")] })] }) })));
+Contact.displayName = "Contact";
+const ContactProvider = (props) => (jsx(ContactContext.Provider, { ...props, value: Contact }));
+
+export { Contact, ContactProvider };

package/dist/components/html/html.schema.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.kickstartds.com/base/html.schema.json",
+  "title": "HTML",
+  "description": "Display raw HTML.",
+  "type": "object",
+  "properties": {
+    "html": {
+      "title": "HTML string",
+      "type": "string",
+      "examples": ["<p>Hello world!</p>"]
+    },
+    "className": {
+      "title": "Additional Classes",
+      "description": "Add additional css classes that should be applied to the element",
+      "type": "string"
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string"
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,26 @@
+import { ForwardRefRenderFunction, HTMLAttributes } 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 `yarn run schema` to regenerate this file.
+ */
+type HTMLString = string;
+/**
+ * Add additional css classes that should be applied to the element
+ */
+type AdditionalClasses = string;
+/**
+ * Optional custom component identifier
+ */
+type KsComponentAttribute = string;
+/**
+ * Display raw HTML.
+ */
+interface HTMLProps {
+    html?: HTMLString;
+    className?: AdditionalClasses;
+    component?: KsComponentAttribute;
+}
+declare const HtmlComponent: ForwardRefRenderFunction<HTMLDivElement, HTMLProps & HTMLAttributes<HTMLDivElement>>;
+export { HTMLProps, HtmlComponent };

package/dist/components/html/index.js

@@ -0,0 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+
+const HtmlComponent = ({ html, className, component, ...props }, ref) => (jsx("div", { className: classnames('c-html', className), dangerouslySetInnerHTML: { __html: html }, "ks-component": component, ref: ref, ...props }));
+
+export { HtmlComponent };

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

@@ -1,4 +1,12 @@
 /* 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 { SectionProps } from "../../SectionProps-83d399b4.js";
+import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
+/* eslint-disable */
 /**
  * This file was automatically generated by json-schema-to-typescript.
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
@@ -6,7 +14,47 @@
  */
 import { HeaderProps } from "../../HeaderProps-e22382f1.js";
 import { FooterProps } from "../../FooterProps-171a3067.js";
-import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
+/**
+ * Collection of sections (with their contents) to render on the page
+ */
+type Sections = SectionProps[];
+/**
+ * Toggle default floating header behaviour set in global settings
+ */
+type ToggleFloating = boolean;
+/**
+ * Toggle default inverted header behaviour set in global settings
+ */
+type ToggleInverted = boolean;
+/**
+ * Toggle default inverted footer behaviour set in global settings
+ */
+type ToggleInverted1 = boolean;
+/**
+ * Abstracts a page concept into JSON schema
+ */
+interface PageProps {
+    section?: Sections;
+    header?: Header;
+    footer?: Footer;
+    /**
+     * Referenced component SeoProps
+     */
+    seo: SeoProps;
+}
+/**
+ * Header settings for the page
+ */
+interface Header {
+    floating?: ToggleFloating;
+    inverted?: ToggleInverted;
+}
+/**
+ * Footer settings for the page
+ */
+interface Footer {
+    inverted?: ToggleInverted1;
+}
 /**
  * Abstracts global settings made for a website into JSON Schema
  */
@@ -24,7 +72,6 @@ interface SettingsProps {
      */
     seo: SeoProps;
 }
-export * from "../../BlogPostProps-6b3cff22.js";
+export * from "../../BlogPostProps-f9a49428.js";
 export * from "../../BlogOverviewProps-9f207f1c.js";
-export * from "../../PageProps-aa29c554.js";
-export { SettingsProps };
+export { Sections, ToggleFloating, ToggleInverted, ToggleInverted1, PageProps, Header, Footer, SettingsProps };

package/dist/components/nav-flyout/nav-flyout.css

@@ -27,7 +27,7 @@
 }
 
 .dsa-nav-flyout {
-  display: flex;
+  display: none;
   font: var(--dsa-nav-flyout__label--font);
   flex-direction: column;
   gap: var(--dsa-nav-flyout--gap);
@@ -47,6 +47,11 @@
   -webkit-overflow-scrolling: touch;
   max-width: var(--dsa-nav-flyout--max-width);
 }
+@media (max-width: 62rem) {
+  .dsa-nav-flyout {
+    display: flex;
+  }
+}
 .dsa-nav-flyout ul {
   padding: 0;
   margin: 0;

package/dist/components/nav-main/index.js

@@ -1,4 +1,3 @@
-import "./nav-main.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import './js/NavToggle.client.js';

package/dist/components/nav-toggle/nav-toggle.css

@@ -23,6 +23,11 @@ button.dsa-nav-toggle {
   transform: translateX(var(--dsa-header--spacing-horizontal));
   --toggle__icon-bar--offset: 45%;
 }
+@media (min-width: 62em) {
+  button.dsa-nav-toggle {
+    display: none;
+  }
+}
 button.dsa-nav-toggle .dsa-nav-toggle__label {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);

package/dist/components/nav-topbar/nav-topbar.css

@@ -19,6 +19,12 @@
 .dsa-nav-topbar {
   --g-link--text-decoration: none;
   --g-link--text-decoration_hover: none;
+  display: none;
+}
+@media (min-width: 62rem) {
+  .dsa-nav-topbar {
+    display: block;
+  }
 }
 .dsa-nav-topbar ul {
   list-style: none;
@@ -44,7 +50,7 @@
   display: flex;
   align-items: stretch;
 }
-.dsa-nav-topbar .dsa-nav-topbar__item--dropdown:last-of-type .dsa-nav-dropdown, .dsa-nav-topbar .dsa-nav-topbar__item--dropdown:nth-last-of-type(2) .dsa-nav-dropdown {
+.dsa-nav-topbar .dsa-nav-topbar__item--dropdown:last-child .dsa-nav-dropdown {
   right: 0;
 }
 .dsa-nav-topbar .dsa-nav-topbar__item .dsa-nav-dropdown {

package/dist/components/page-wrapper/index.js

@@ -15,6 +15,12 @@ import '@kickstartds/core/lib/component';
 import '../teaser-card/index.js';
 import '@kickstartds/base/lib/teaser-box';
 import '@kickstartds/core/lib/container';
+import '../contact/index.js';
+import '@kickstartds/base/lib/picture';
+import '@kickstartds/base/lib/contact';
+import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/base/lib/rich-text';
 import '../headline/index.js';
 import 'markdown-to-jsx';
 import '@kickstartds/base/lib/headline';