@kickstartds/ds-agency-premium 1.6.71 → 1.6.72--canary.43.2474.0

package/dist/components/business-card/business-card.schema.json

@@ -0,0 +1,126 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/business-card.schema.json",
+  "title": "Business Card",
+  "type": "object",
+  "properties": {
+    "centered": {
+      "type": "boolean",
+      "title": "Centered",
+      "description": "Whether the business card content is centered.",
+      "default": false
+    },
+    "image": {
+      "type": "object",
+      "title": "Background Image",
+      "description": "A background or feature image displayed on the business card.",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "uri",
+          "description": "URL of the background image shown on the business card."
+        },
+        "alt": {
+          "type": "string",
+          "description": "Alternative text describing the background image."
+        }
+      },
+      "required": ["src"]
+    },
+    "logo": {
+      "type": "object",
+      "title": "Company Logo",
+      "description": "The logo of the company or organization displayed on the business card.",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "uri",
+          "description": "URL of the company or organization logo."
+        },
+        "alt": {
+          "type": "string",
+          "description": "Alternative text describing the logo."
+        },
+        "url": {
+          "type": "string",
+          "format": "uri",
+          "description": "URL to the company's website or landing page."
+        }
+      },
+      "required": ["src"]
+    },
+    "topic": {
+      "type": "string",
+      "title": "Topic",
+      "description": "A headline or main topic for the business card, such as a job title or department."
+    },
+    "address": {
+      "type": "string",
+      "title": "Address",
+      "description": "The physical or mailing address displayed on the business card."
+    },
+    "avatar": {
+      "type": "object",
+      "title": "Avatar",
+      "description": "A profile image or avatar representing the person on the business card.",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "uri",
+          "description": "URL of the person's avatar or profile image."
+        },
+        "alt": {
+          "type": "string",
+          "description": "Alternative text describing the avatar."
+        }
+      },
+      "required": ["src"]
+    },
+    "contact": {
+      "type": "array",
+      "title": "Contact Information",
+      "description": "A list of contact methods for the person or business (e.g., email, phone, website).",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "Label describing the contact method (e.g., 'Email', 'Phone')."
+          },
+          "icon": {
+            "type": "string",
+            "description": "Icon name or identifier representing the contact method."
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "URL or link for the contact method, if applicable."
+          }
+        },
+        "required": ["label"]
+      }
+    },
+    "buttons": {
+      "type": "array",
+      "title": "Buttons",
+      "description": "A list of action buttons shown on the business card.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "Text label for the link."
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "URL the link points to."
+          }
+        },
+        "required": ["label", "url"],
+        "additionalProperties": false
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/business-card/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BusinessCardProps } from "../../BusinessCardProps-e10e7b62.js";
+declare const BusinessCardContextDefault: import("react").ForwardRefExoticComponent<BusinessCardProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const BusinessCardContext: import("react").Context<import("react").ForwardRefExoticComponent<BusinessCardProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const BusinessCard: import("react").ForwardRefExoticComponent<BusinessCardProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { BusinessCardProps };
+export { BusinessCardContextDefault, BusinessCardContext, BusinessCard };

package/dist/components/business-card/index.js

@@ -0,0 +1,31 @@
+import "./business-card.css";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { forwardRef, createContext, useContext } from 'react';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { Picture } from '@kickstartds/base/lib/picture';
+import Markdown from 'markdown-to-jsx';
+import { Button } from '../button/index.js';
+import { Link } from '@kickstartds/base/lib/link';
+import { Container } from '@kickstartds/core/lib/container';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+import '@kickstartds/base/lib/button';
+
+const defaults = {
+    "centered": false,
+    "image": {},
+    "logo": {},
+    "avatar": {},
+    "contact": [],
+    "buttons": []
+};
+
+const BusinessCardContextDefault = forwardRef(({ centered, image, logo, topic, address, avatar, contact, buttons }, ref) => (jsx(Container, { name: "business-card", children: jsxs("div", { className: classnames("dsa-business-card", centered && "dsa-business-card--centered"), ref: ref, children: [image.src && (jsx("div", { className: "dsa-business-card__image", children: jsx(Picture, { src: image.src, alt: image.alt }) })), jsxs("div", { className: "dsa-business-card__content", children: [logo && (jsx(Fragment, { children: logo.url ? (jsx(Link, { href: logo.url, className: "dsa-business-card__logo dsa-business-card__logo-link", children: jsx(Picture, { src: logo.src, alt: logo.alt }) })) : (jsx(Picture, { className: "dsa-business-card__logo", src: logo.src, alt: logo.alt })) })), jsxs("address", { className: classnames("dsa-business-card__address", centered && "dsa-business-card__address--centered"), children: [jsxs("div", { className: "dsa-business-card__infos", children: [topic && (jsx("div", { className: "dsa-business-card__topic", children: jsx("span", { children: topic }) })), jsx(Markdown, { className: "dsa-business-card__location", children: address })] }), jsxs("div", { className: "dsa-business-card__contact", children: [avatar && (jsx(Picture, { className: "dsa-business-card__avatar", src: avatar?.src, alt: avatar?.alt })), contact && (jsx("div", { className: "dsa-business-card__contact-items", children: contact.map((item, index) => (jsx(Fragment, { children: jsxs(Link, { href: item?.url, className: "dsa-business-card__contact-item", children: [item?.icon && jsx(Icon, { icon: item?.icon }), jsx("span", { children: item.label })] }, index) }))) }))] })] }), buttons && buttons.length > 0 && (jsx("div", { className: "dsa-business-card__buttons", children: buttons.map((button, index) => (jsx(Button, { label: button.label, url: button.url, className: "dsa-business-card__button", variant: "primary" }, index))) }))] })] }) })));
+const BusinessCardContext = createContext(BusinessCardContextDefault);
+const BusinessCard = forwardRef((props, ref) => {
+    const Component = useContext(BusinessCardContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+BusinessCard.displayName = "BusinessCard";
+
+export { BusinessCard, BusinessCardContext, BusinessCardContextDefault };

package/dist/components/button/button.css

@@ -1,7 +1,7 @@
 .dsa-button {
-  --dsa-button--padding: 0.75em 2em;
+  --dsa-button--padding: 0.75em 1.5em;
   --dsa-button--border-width: var(--ks-border-width-default);
-  --dsa-button--border-radius: var(--ks-border-radius-pill);
+  --dsa-button--border-radius: var(--ks-border-radius-control);
   --dsa-button--font-weight: var(--ks-font-weight-semi-bold);
   --dsa-button--text-transform: default;
   --dsa-button_small--font: var(--ks-font-interface-s);
@@ -35,7 +35,9 @@
   --c-button--font-weight: var(--dsa-button--font-weight, var(--ks-font-weight-semi-bold));
   --c-button--border-width: var(--dsa-button--border-width, var(--ks-border-width-default));
   text-transform: var(--dsa-button--text-transform);
-  transition-property: box-shadow, transform, background-color, color, border;
+}
+.dsa-button.c-button .icon {
+  margin-left: var(--ks-spacing-xxs);
 }
 .dsa-button.c-button.c-button--small {
   --c-button--font: var(--dsa-button_small--font, var(--ks-font-interface-s));
@@ -120,6 +122,9 @@
   --c-button--background-color-active: var(--dsa-button_terciary--background-color_active, none);
   --c-button--background-color-selected: var(--dsa-button_terciary--background-color_selected, none);
 }
+.dsa-button.c-button {
+  transition-property: box-shadow, transform, background-color, color, border;
+}
 .dsa-button.c-button:disabled {
   pointer-events: none;
 }

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

@@ -13,10 +13,10 @@
         "Book a meeting"
       ]
     },
-    "target": {
+    "url": {
       "type": "string",
-      "title": "Target",
-      "description": "Target that should be linked, makes the button behave like a link semantically",
+      "title": "URL",
+      "description": "The URL to link to when the button is clicked",
       "format": "uri"
     },
     "variant": {
@@ -54,7 +54,13 @@
       "default": false
     },
     "type": {
-      "const": "button"
+      "type": "string",
+      "title": "Button Type",
+      "enum": [
+        "button",
+        "submit",
+        "reset"
+      ]
     }
   },
   "additionalProperties": false,

package/dist/components/button/button.schema.json

@@ -11,10 +11,10 @@
       "description": "Text content to display inside the button",
       "examples": ["Book a meeting"]
     },
-    "target": {
+    "url": {
       "type": "string",
-      "title": "Target",
-      "description": "Target that should be linked, makes the button behave like a link semantically",
+      "title": "URL",
+      "description": "The URL to link to when the button is clicked",
       "format": "uri"
     },
     "variant": {
@@ -42,6 +42,11 @@
       "title": "Disabled?",
       "description": "Whether the button should be disabled",
       "default": false
+    },
+    "type": {
+      "type": "string",
+      "title": "Button Type",
+      "enum": ["button", "submit", "reset"]
     }
   },
   "additionalProperties": false,

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { ButtonProps } from "../../ButtonProps-03ff6d21.js";
+import { ButtonProps } from "../../ButtonProps-4e2b2ecf.js";
 declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 declare const ButtonProvider: FC<PropsWithChildren>;
 export type { ButtonProps };

package/dist/components/button/index.js

@@ -3,16 +3,26 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import classnames from 'classnames';
 import { ButtonContextDefault, ButtonContext } from '@kickstartds/base/lib/button';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
-const Button = forwardRef(({ label, target, size = "medium", variant = "secondary", icon, disabled = false, className, ...props }, ref) => (jsx(ButtonContextDefault, { ...props, className: classnames("dsa-button", className), href: target, label: label, size: size, variant: variant === "primary"
-        ? "solid"
-        : variant === "secondary"
-            ? "clear"
-            : variant === "tertiary"
-                ? "outline"
-                : "solid", disabled: disabled, iconAfter: {
-        icon: icon,
-    }, ref: ref })));
+const defaults = {
+    "variant": "secondary",
+    "size": "medium",
+    "disabled": false
+};
+
+const Button = forwardRef((props, ref) => {
+    const { label, url, size = "medium", variant = "secondary", icon, disabled = false, className, ...rest } = deepMergeDefaults(defaults, props);
+    return (jsx(ButtonContextDefault, { ...rest, className: classnames("dsa-button", className), href: url, label: label, size: size, variant: variant === "primary"
+            ? "solid"
+            : variant === "secondary"
+                ? "clear"
+                : variant === "tertiary"
+                    ? "outline"
+                    : "solid", disabled: disabled, iconAfter: {
+            icon: icon,
+        }, ref: ref }));
+});
 Button.displayName = "Button";
 const ButtonProvider = (props) => (jsx(ButtonContext.Provider, { ...props, value: Button }));
 

package/dist/components/button-group/button-group.schema.dereffed.json

@@ -23,10 +23,10 @@
               "Book a meeting"
             ]
           },
-          "target": {
+          "url": {
             "type": "string",
-            "title": "Target",
-            "description": "Target that should be linked, makes the button behave like a link semantically",
+            "title": "URL",
+            "description": "The URL to link to when the button is clicked",
             "format": "uri"
           },
           "variant": {
@@ -64,7 +64,13 @@
             "default": false
           },
           "type": {
-            "const": "button"
+            "type": "string",
+            "title": "Button Type",
+            "enum": [
+              "button",
+              "submit",
+              "reset"
+            ]
           }
         },
         "additionalProperties": false,
@@ -80,9 +86,9 @@
       "type": "boolean"
     },
     "size": {
-      "title": "Button Size",
-      "description": "Choose a size between small, medium and large",
       "type": "string",
+      "title": "Size",
+      "description": "Size of button to use",
       "enum": [
         "small",
         "medium",
@@ -107,9 +113,6 @@
       "title": "Additional Classes",
       "description": "Add additional css classes that should be applied to the button",
       "type": "string"
-    },
-    "type": {
-      "const": "button-group"
     }
   },
   "additionalProperties": false

package/dist/components/button-group/index.d.ts

@@ -6,7 +6,7 @@ import { FC, PropsWithChildren } from "react";
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { ButtonProps } from "../../ButtonProps-03ff6d21.js";
+import { ButtonProps } from "../../ButtonProps-4e2b2ecf.js";
 /**
  * Buttons of the Button Group
  */
@@ -16,9 +16,9 @@ type Buttons = ButtonProps[];
  */
 type ColorNeutral = boolean;
 /**
- * Choose a size between small, medium and large
+ * Size of button to use
  */
-type ButtonSize = "small" | "medium" | "large";
+type Size = "small" | "medium" | "large";
 /**
  * Vertical arrangement of the buttons
  */
@@ -30,7 +30,7 @@ type AdditionalClasses = string;
 interface ButtonGroupProps {
     buttons?: Buttons;
     colorNeutral?: ColorNeutral;
-    size?: ButtonSize;
+    size?: Size;
     arrangement?: ButtonArrangement;
     className?: AdditionalClasses;
 }

package/dist/components/button-group/index.js

@@ -2,9 +2,18 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { ButtonContext } from '@kickstartds/base/lib/button';
 import { ButtonGroupContextDefault, ButtonGroupContext } from '@kickstartds/base/lib/button-group';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
-const ButtonGroup = forwardRef(({ buttons, colorNeutral, size, ...props }, ref) => {
-    return buttons && buttons.length > 0 ? (jsx(ButtonGroupContextDefault, { ...props, items: buttons
+const defaults = {
+    "buttons": [],
+    "colorNeutral": false,
+    "size": "medium",
+    "arrangement": "left"
+};
+
+const ButtonGroup = forwardRef((props, ref) => {
+    const { buttons, colorNeutral, size, ...rest } = deepMergeDefaults(defaults, props);
+    return buttons && buttons.length > 0 ? (jsx(ButtonGroupContextDefault, { ...rest, items: buttons
             .filter((button) => button.label)
             .map((button, index) => ({
             size: size,

package/dist/components/contact/contact.css

@@ -4,22 +4,22 @@
 }
 
 .dsa-contact {
-  --dsa-contact--gap-horizontal: var(--ks-spacing-inline-m);
-  --dsa-contact--gap-vertical: var(--ks-spacing-stack-m);
+  --dsa-contact--gap-horizontal: var(--ks-spacing-inline-s);
+  --dsa-contact--gap-vertical: var(--ks-spacing-stack-s);
   --dsa-contact__header--gap: 0;
-  --dsa-contact__image--flex-basis: 200px;
+  --dsa-contact__image--flex-basis: var(--dsa-tile--width_smallest);
   --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__body--flex-basis: var(--dsa-tile--width_small);
+  --dsa-contact__copy--font: var(--ks-font-copy-m);
+  --dsa-contact__copy--color: var(--ks-text-color-copy);
   --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__links--gap: calc(var(--ks-spacing-xxs) * 0.5);
   --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);
@@ -40,7 +40,7 @@
 .dsa-contact {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--dsa-contact--gap-horizontal) var(--dsa-contact--gap-vertical);
+  gap: var(--dsa-contact--gap-vertical) var(--dsa-contact--gap-horizontal);
 }
 .dsa-contact__image-wrap, .dsa-contact__body {
   flex-grow: 1;
@@ -48,7 +48,7 @@
 .dsa-contact__body {
   display: flex;
   flex-grow: 1;
-  flex-shrink: 0;
+  flex-shrink: 1;
   flex-direction: column;
   gap: var(--dsa-contact__body--gap);
   flex-basis: var(--dsa-contact__body--flex-basis);
@@ -62,6 +62,7 @@
   flex-basis: var(--dsa-contact__image--flex-basis);
   height: 100%;
   width: 100%;
+  flex-shrink: 1;
 }
 .dsa-contact--image-full-width .dsa-contact__image-wrap {
   flex-grow: 1;
@@ -112,6 +113,7 @@
   font: var(--dsa-contact__link--font);
   font-weight: var(--dsa-contact__link--font-weight);
   text-decoration: var(--dsa-contact__link--text-decoration);
+  width: fit-content;
 }
 .dsa-contact a.dsa-contact__link .icon {
   width: var(--dsa-contact__link__icon--size);
@@ -122,12 +124,4 @@
 .dsa-contact a.dsa-contact__link:hover {
   color: var(--dsa-contact__link--color_hover);
   text-decoration: var(--dsa-contact__link--text-decoration_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

@@ -22,7 +22,7 @@
           "title": "Alt Text",
           "description": "Alt text of the image",
           "examples": [
-            "Picture of Jane Smith"
+            "Picture of Isabella Doe"
           ]
         },
         "fullWidth": {
@@ -50,7 +50,7 @@
       "description": "Name, company name, etc.",
       "type": "string",
       "examples": [
-        "Jane Smith"
+        "Isabella Doe"
       ]
     },
     "subtitle": {
@@ -73,7 +73,7 @@
           "label": {
             "type": "string"
           },
-          "href": {
+          "url": {
             "type": "string",
             "format": "uri"
           },
@@ -82,6 +82,14 @@
             "description": "Open link in new Tab",
             "type": "boolean",
             "default": false
+          },
+          "ariaLabel": {
+            "title": "Aria Label",
+            "description": "Aria label for the link",
+            "type": "string",
+            "examples": [
+              "Link to Isabella Doe's social media profile"
+            ]
           }
         },
         "additionalProperties": false
@@ -91,12 +99,12 @@
           {
             "icon": "phone",
             "label": "0228 / 688 966 20",
-            "href": "tel:+4922868896620"
+            "url": "tel:+4922868896620"
           },
           {
             "icon": "email",
             "label": "mail@example.com",
-            "href": "mailto:mail@example.com"
+            "url": "mailto:mail@example.com"
           }
         ]
       ]
@@ -114,9 +122,6 @@
       "title": "`ks-component` attribute",
       "description": "Optional custom component identifier",
       "type": "string"
-    },
-    "type": {
-      "const": "contact"
     }
   },
   "additionalProperties": false,

package/dist/components/contact/contact.schema.json

@@ -19,7 +19,7 @@
           "type": "string",
           "title": "Alt Text",
           "description": "Alt text of the image",
-          "examples": ["Picture of Jane Smith"]
+          "examples": ["Picture of Isabella Doe"]
         },
         "fullWidth": {
           "type": "boolean",
@@ -40,7 +40,7 @@
       "title": "Title",
       "description": "Name, company name, etc.",
       "type": "string",
-      "examples": ["Jane Smith"]
+      "examples": ["Isabella Doe"]
     },
     "subtitle": {
       "title": "Subtitle",
@@ -60,7 +60,7 @@
           "label": {
             "type": "string"
           },
-          "href": {
+          "url": {
             "type": "string",
             "format": "uri"
           },
@@ -69,6 +69,12 @@
             "description": "Open link in new Tab",
             "type": "boolean",
             "default": false
+          },
+          "ariaLabel": {
+            "title": "Aria Label",
+            "description": "Aria label for the link",
+            "type": "string",
+            "examples": ["Link to Isabella Doe's social media profile"]
           }
         },
         "additionalProperties": false
@@ -78,12 +84,12 @@
           {
             "icon": "phone",
             "label": "0228 / 688 966 20",
-            "href": "tel:+4922868896620"
+            "url": "tel:+4922868896620"
           },
           {
             "icon": "email",
             "label": "mail@example.com",
-            "href": "mailto:mail@example.com"
+            "url": "mailto:mail@example.com"
           }
         ]
       ]