@kickstartds/ds-agency-premium 1.4.10 → 1.4.12--canary.15.804.0

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/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';

package/dist/components/page-wrapper/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Aug 2024 10:00:23 GMT
+ * Generated on Mon, 02 Sep 2024 11:11:36 GMT
  */
 :root, [ks-theme] {
   --ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
@@ -115,8 +115,8 @@
   --ks-background-color-secondary-inverted-interactive-active-base: var(--ks-color-secondary-inverted-to-bg-2-base);
   --ks-background-color-secondary-inverted-interactive-selected-base: var(--ks-color-secondary-inverted-to-bg-4-base);
   --ks-background-color-secondary-inverted-translucent-base: var(--ks-color-secondary-inverted-alpha-5-base);
-  --ks-border-color-accent-base: var(--ks-color-primary-to-bg-8-base);
-  --ks-border-color-accent-inverted-base: var(--ks-color-primary-inverted-to-bg-8-base);
+  --ks-border-color-accent-base: var(--ks-color-fg-to-bg-7-base);
+  --ks-border-color-accent-inverted-base: var(--ks-color-fg-inverted-to-bg-7-base);
   --ks-border-color-clear-base: var(--ks-color-transparent-base);
   --ks-border-color-clear-interactive-base: var(--ks-color-transparent-base);
   --ks-border-color-clear-interactive-hover-base: var(--ks-color-primary-alpha-8-base);
@@ -807,14 +807,14 @@
   --ks-spacing-inset-stretch-xl: var(--ks-spacing-xxl) var(--ks-spacing-xl);
   --ks-text-color-default-base: var(--ks-color-fg-base);
   --ks-text-color-default-interactive-base: var(--ks-color-link-base);
-  --ks-text-color-default-interactive-hover-base: var(--ks-color-link-base);
-  --ks-text-color-default-interactive-active-base: var(--ks-color-link-base);
-  --ks-text-color-default-interactive-selected-base: var(--ks-color-link-base);
+  --ks-text-color-default-interactive-hover-base: var(--ks-color-link-to-fg-5-base);
+  --ks-text-color-default-interactive-active-base: var(--ks-color-link-to-fg-5-base);
+  --ks-text-color-default-interactive-selected-base: var(--ks-color-link-to-fg-5-base);
   --ks-text-color-default-inverted-base: var(--ks-color-fg-inverted-base);
   --ks-text-color-default-inverted-interactive-base: var(--ks-color-link-inverted-base);
-  --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-link-inverted-base);
-  --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-link-inverted-base);
-  --ks-text-color-default-inverted-interactive-selected-base: var(--ks-color-link-inverted-base);
+  --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-link-inverted-to-fg-5-base);
+  --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-link-inverted-to-fg-5-base);
+  --ks-text-color-default-inverted-interactive-selected-base: var(--ks-color-link-inverted-to-fg-5-base);
   --ks-text-color-copy-base: var(--ks-color-fg-alpha-3-base);
   --ks-text-color-copy-interactive-base: var(--ks-color-link-base);
   --ks-text-color-copy-interactive-hover-base: var(--ks-color-link-to-fg-2-base);