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

package/dist/components/search-form/search-form.schema.dereffed.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-form.schema.json",
+  "title": "Search Form",
+  "type": "object",
+  "properties": {
+    "component": {
+      "type": "string",
+      "description": "ks-component attribute",
+      "default": "dsa.search-form"
+    },
+    "result": {
+      "type": "object",
+      "properties": {
+        "maxSubresults": {
+          "type": "number",
+          "description": "Max number of subresults of a single search result"
+        },
+        "showLink": {
+          "title": "Show Link",
+          "type": "boolean",
+          "description": "Whether to display the link to the search result.",
+          "default": true
+        },
+        "imageColSize": {
+          "title": "Image Row Size",
+          "type": "string",
+          "description": "The reserved space of the image row.",
+          "default": "small",
+          "enum": [
+            "none",
+            "small",
+            "large"
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
+    "resultPerPage": {
+      "type": "number",
+      "default": 10
+    },
+    "moreButtonLabel": {
+      "type": "string",
+      "default": "View all results"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search-form/search-form.schema.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-form.schema.json",
+  "title": "Search Form",
+  "type": "object",
+  "properties": {
+    "component": {
+      "type": "string",
+      "description": "ks-component attribute",
+      "default": "dsa.search-form"
+    },
+    "result": {
+      "type": "object",
+      "properties": {
+        "maxSubresults": {
+          "type": "number",
+          "description": "Max number of subresults of a single search result"
+        },
+        "showLink": {
+          "$ref": "http://schema.mydesignsystem.com/search-result.schema.json#/properties/showLink"
+        },
+        "imageColSize": {
+          "$ref": "http://schema.mydesignsystem.com/search-result.schema.json#/properties/imageColSize"
+        }
+      },
+      "additionalProperties": false
+    },
+    "resultPerPage": {
+      "type": "number",
+      "default": 10
+    },
+    "moreButtonLabel": {
+      "type": "string",
+      "default": "View all results"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search-modal/RadioEmit.client.d.ts

@@ -0,0 +1,5 @@
+declare class RadioEmit {
+    static identifier: string;
+    constructor(element: any);
+}
+export { RadioEmit as default };

package/dist/components/search-modal/RadioEmit.client.js

@@ -0,0 +1,17 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+class RadioEmit extends Component {
+    constructor(element) {
+        super(element);
+        const { topic, action = "click", value } = element.dataset;
+        const handler = () => window._ks.radio.emit(topic, value);
+        element.addEventListener(action, handler);
+        this.onDisconnect(() => {
+            element.removeEventListener(action, handler);
+        });
+    }
+}
+RadioEmit.identifier = "dsa.radio-emit";
+define(RadioEmit.identifier, RadioEmit);
+
+export { RadioEmit as default };

package/dist/components/search-modal/SearchModal.client.d.ts

@@ -0,0 +1,5 @@
+declare class SearchModal {
+    static identifier: string;
+    constructor(element: any);
+}
+export { SearchModal as default };

package/dist/components/search-modal/SearchModal.client.js

@@ -0,0 +1,31 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+class SearchModal extends Component {
+    constructor(element) {
+        super(element);
+        const form = element.querySelector(".dsa-search-form");
+        const searchInput = element.querySelector(".dsa-search-bar__input");
+        const onBackdropClick = (event) => {
+            if (event.target === element)
+                window._ks.radio.emit("dsa.search-modal.close");
+        };
+        const openToken = window._ks.radio.on("dsa.search-modal.open", () => {
+            element.showModal();
+            searchInput.focus();
+        });
+        const closeToken = window._ks.radio.on("dsa.search-modal.close", () => {
+            form.reset();
+            element.close();
+        });
+        element.addEventListener("click", onBackdropClick);
+        this.onDisconnect(() => {
+            window._ks.radio.off(openToken);
+            window._ks.radio.off(closeToken);
+            element.removeEventListener("click", onBackdropClick);
+        });
+    }
+}
+SearchModal.identifier = "dsa.search-modal";
+define(SearchModal.identifier, SearchModal);
+
+export { SearchModal as default };

package/dist/components/search-modal/index.d.ts

@@ -0,0 +1,18 @@
+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 { SearchFormProps } from "../../SearchFormProps-3d2c3462.js";
+interface SearchModalProps {
+    headline: string;
+    closeAriaLabel: string;
+    /**
+     * Referenced component SearchFormProps
+     */
+    form?: SearchFormProps;
+}
+declare const SearchModal: FC<SearchModalProps>;
+export { SearchModal };

package/dist/components/search-modal/index.js

@@ -0,0 +1,39 @@
+import "./search-modal.css";
+import { jsx } from 'react/jsx-runtime';
+import { Section } from '../section/index.js';
+import { Button } from '../button/index.js';
+import { SearchForm } from '../search-form/index.js';
+import './SearchModal.client.js';
+import 'react';
+import 'classnames';
+import '@kickstartds/core/lib/react';
+import '@kickstartds/base/lib/section';
+import '../section/js/Section.client.js';
+import '@kickstartds/core/lib/component';
+import '../../helpers-12f48df8.js';
+import '@kickstartds/base/lib/button';
+import '../search-bar/index.js';
+import '@kickstartds/form/lib/text-field';
+import 'markdown-to-jsx';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/base/lib/link';
+import '../search-result/index.js';
+import '@kickstartds/base/lib/rich-text';
+import '@kickstartds/base/lib/picture';
+import '@kickstartds/core/lib/container';
+import '../search-result-match/index.js';
+import '../pagination/index.js';
+import '../search-form/SearchForm.client.js';
+import '@kickstartds/core/lib/core';
+import '@kickstartds/core/lib/utils';
+
+const SearchModal = ({ headline = "Search", closeAriaLabel = "close", form: formProps = {}, }) => (jsx("dialog", { "ks-component": "dsa.search-modal", className: "dsa-search-modal", children: jsx(Section, { headline: {
+            text: headline,
+            sub: closeAriaLabel,
+            // @ts-expect-error
+            renderSubheadline(sub) {
+                return (jsx(Button, { className: "dsa-search-modal__close", "aria-label": sub, label: "", icon: "close", size: "small", "ks-component": "dsa.radio-emit", "data-topic": "dsa.search-modal.close" }));
+            },
+        }, spaceBefore: "small", spaceAfter: "small", children: jsx(SearchForm, { ...formProps }) }) }));
+
+export { SearchModal };

package/dist/components/search-modal/search-modal.css

@@ -0,0 +1,27 @@
+.dsa-search-modal[open] {
+  border-radius: var(--ks-border-radius-card);
+  border: var(--ks-border-color-interface) solid var(--ks-border-width-default);
+  box-shadow: var(--dsa-cookie-consent-dialogue--box-shadow, var(--ks-box-shadow-card));
+  background-color: var(--ks-background-color-default);
+  padding: 0;
+  width: calc(100% - var(--ks-spacing-inset-xs) * 2);
+  max-height: calc(100% - var(--ks-spacing-inset-xs) * 2);
+  margin-top: var(--ks-spacing-inset-xs);
+}
+.dsa-search-modal::backdrop {
+  background-color: var(--dsa-overlay--background-color);
+}
+.dsa-search-modal__close {
+  --dsa-button--padding: 1em;
+}
+.dsa-search-modal .l-section__container--headline .dsa-headline {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.dsa-search-modal .dsa-search-bar {
+  position: sticky;
+  top: 0;
+  background: var(--ks-background-color-default);
+  padding: 1em 0;
+}

package/dist/components/search-modal/search-modal.schema.dereffed.json

@@ -0,0 +1,70 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-modal.schema.json",
+  "title": "Search Modal",
+  "type": "object",
+  "properties": {
+    "headline": {
+      "type": "string",
+      "default": "Search"
+    },
+    "closeAriaLabel": {
+      "type": "string",
+      "default": "close"
+    },
+    "form": {
+      "$schema": "http://json-schema.org/draft-07/schema#",
+      "$id": "http://schema.mydesignsystem.com/search-form.schema.json",
+      "title": "Search Form",
+      "type": "object",
+      "properties": {
+        "component": {
+          "type": "string",
+          "description": "ks-component attribute",
+          "default": "dsa.search-form"
+        },
+        "result": {
+          "type": "object",
+          "properties": {
+            "maxSubresults": {
+              "type": "number",
+              "description": "Max number of subresults of a single search result"
+            },
+            "showLink": {
+              "title": "Show Link",
+              "type": "boolean",
+              "description": "Whether to display the link to the search result.",
+              "default": true
+            },
+            "imageColSize": {
+              "title": "Image Row Size",
+              "type": "string",
+              "description": "The reserved space of the image row.",
+              "default": "small",
+              "enum": [
+                "none",
+                "small",
+                "large"
+              ]
+            }
+          },
+          "additionalProperties": false
+        },
+        "resultPerPage": {
+          "type": "number",
+          "default": 10
+        },
+        "moreButtonLabel": {
+          "type": "string",
+          "default": "View all results"
+        }
+      },
+      "additionalProperties": false
+    }
+  },
+  "required": [
+    "headline",
+    "closeAriaLabel"
+  ],
+  "additionalProperties": false
+}

package/dist/components/search-modal/search-modal.schema.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-modal.schema.json",
+  "title": "Search Modal",
+  "type": "object",
+  "properties": {
+    "headline": {
+      "type": "string",
+      "default": "Search"
+    },
+    "closeAriaLabel": {
+      "type": "string",
+      "default": "close"
+    },
+    "form": {
+      "$ref": "http://schema.mydesignsystem.com/search-form.schema.json"
+    }
+  },
+  "required": [
+    "headline",
+    "closeAriaLabel"
+  ],
+  "additionalProperties": false
+}

package/dist/components/search-result/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { SearchResultProps } from "../../SearchResultProps-224c2338.js";
-declare const SearchResultContextDefault: import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLAnchorElement>>;
-declare const SearchResultContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLAnchorElement>>>;
-declare const SearchResult: import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLAnchorElement>>;
+import { SearchResultProps } from "../../SearchResultProps-f6f07017.js";
+declare const SearchResultContextDefault: import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SearchResultContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const SearchResult: import("react").ForwardRefExoticComponent<SearchResultProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { SearchResultProps };
 export { SearchResultContextDefault, SearchResultContext, SearchResult };

package/dist/components/search-result/index.js

@@ -1,15 +1,24 @@
 import "./search-result.css";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, createContext, useContext } from 'react';
 import { Link } from '@kickstartds/base/lib/link';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+import classnames from 'classnames';
+import { Picture } from '@kickstartds/base/lib/picture';
+import { Container } from '@kickstartds/core/lib/container';
+import { SearchResultMatch } from '../search-result-match/index.js';
 
 const defaults = {
+    "imageColSize": "small",
+    "matches": [],
     "showLink": true
 };
 
-const SearchResultContextDefault = forwardRef(({ title, text, url, showLink, ariaLabel }, ref) => (jsxs(Link, { "aria-label": ariaLabel, href: url, className: "dsa-search-result", ref: ref, children: [jsx("span", { className: "dsa-search-result__title", children: title }), jsx(RichText, { text: text, className: "dsa-search-result__text" }), showLink && jsx("span", { className: "dsa-search-result__link", children: url })] })));
+const SearchResultContextDefault = forwardRef(({ title, previewImage, imageColSize = "small", initialMatch, matches, url, showLink, }, ref) => (jsx(Container, { name: "search-result", children: jsxs("div", { ref: ref, className: classnames("dsa-search-result", {
+            "dsa-search-result--image-row-large": imageColSize === "large",
+            "dsa-search-result--image-row-none": imageColSize === "none",
+        }), children: [jsxs("div", { className: "dsa-search-result__content", children: [jsx("div", { className: "dsa-search-result__header", children: jsx(Link, { "data-result-link": true, "data-result-title": true, href: url, className: "dsa-search-result__title", children: title }) }), jsx(RichText, { className: "dsa-search-result__initial-match", text: initialMatch, "data-result-excerpt": true }), jsx("div", { className: "dsa-search-result__matches", "data-result-subresults": true, children: matches.map((match, index) => (jsx(SearchResultMatch, { ...match }, index))) }), showLink && (jsx(Link, { href: url, className: "dsa-search-result__link", "data-result-link": true, "data-result-url": true, children: url }))] }), imageColSize !== "none" && (jsx("div", { className: "dsa-search-result__preview-image-row", children: jsx(Link, { tabIndex: -1, "aria-hidden": true, href: url, className: "dsa-search-result__preview-image-wrapper", "data-result-link": true, children: jsx(Picture, { src: previewImage, alt: "", className: "dsa-search-result__preview-image", "data-result-image": true }) }) }))] }) })));
 const SearchResultContext = createContext(SearchResultContextDefault);
 const SearchResult = forwardRef((props, ref) => {
     const Component = useContext(SearchResultContext);

package/dist/components/search-result/search-result.css

@@ -1,28 +1,76 @@
+.l-container--search-result {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: search-result;
+}
+
 .dsa-search-result {
   --g-link--border-radius: var(--ks-border-radius-card);
   --g-link--text-decoration: none;
   --g-link--text-decoration-hover: none;
   display: flex;
-  flex-direction: column;
-  gap: var(--ks-spacing-stack-xs);
-  border: var(--ks-border-width-default) solid var(--ks-border-color-card-interactive);
-  padding: var(--ks-spacing-inset-m);
-  transition: var(--ks-transition-hover);
+  gap: var(--ks-spacing-stack-m) var(--ks-spacing-inline-m);
+}
+.dsa-search-result .l-container {
+  container-type: unset;
 }
 .dsa-search-result:hover {
   border-color: var(--ks-border-color-card-interactive-hover);
 }
-.dsa-search-result__title {
-  font: var(--dsa-topic--font);
-  color: var(--dsa-topic--color);
-  font-weight: var(--dsa-topic--font-weight);
+.dsa-search-result__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-xs);
+  flex-basis: var(--dsa-tile--width_medium);
+  flex-grow: 1;
 }
 .dsa-search-result__link {
+  --g-link--color: var(--ks-color-fg-alpha-4);
+  --g-link--color-hover: var(--ks-color-fg-alpha-2);
   width: fit-content;
   font: var(--ks-font-interface-s);
-  color: var(--dsa-link--color);
-  transition: inherit;
 }
-.dsa-search-result__link:hover {
-  color: var(--dsa-link--color_hover);
+.dsa-search-result strong,
+.dsa-search-result mark {
+  border-bottom: 1px dashed var(--ks-color-fg);
+  font-weight: unset;
+  color: var(--ks-color-fg);
+  background-color: transparent;
+}
+.dsa-search-result__matches {
+  padding: var(--ks-spacing-xxs) 0;
+}
+.dsa-search-result__matches:empty {
+  display: none;
+}
+.dsa-search-result__title {
+  font-size: var(--ks-font-size-display-l);
+  font-family: var(--ks-font-family-display);
+  line-height: var(--ks-line-height-display-m);
+}
+.dsa-search-result__preview-image-row {
+  height: fit-content;
+  flex-basis: var(--dsa-tile--width_smallest);
+}
+.dsa-search-result--image-row-large .dsa-search-result__preview-image-row {
+  flex-basis: var(--dsa-tile--width_small);
+}
+@media (max-width: 980px) {
+  .dsa-search-result__preview-image-row {
+    display: none;
+  }
+  @container search-result (min-width: 640px) {
+    .dsa-search-result__preview-image-row {
+      display: block;
+    }
+  }
+}
+.dsa-search-result__preview-image {
+  width: 100%;
+  height: fit-content;
+  object-fit: cover;
+  aspect-ratio: 4/3;
+  border-radius: calc(var(--ks-border-radius-card) / 2);
+}
+.dsa-search-result__preview-image:not([src]) {
+  display: none;
 }

package/dist/components/search-result/search-result.schema.dereffed.json

@@ -20,27 +20,70 @@
         "AI Conference 2023"
       ]
     },
-    "text": {
-      "title": "Text",
+    "imageColSize": {
+      "title": "Image Row Size",
       "type": "string",
-      "description": "The main content or description of the search result.",
-      "examples": [
-        "Join us for the AI Conference 2023, where industry leaders discuss the future of AI."
+      "description": "The reserved space of the image row.",
+      "default": "small",
+      "enum": [
+        "none",
+        "small",
+        "large"
       ]
     },
+    "previewImage": {
+      "title": "Preview Image",
+      "type": "string",
+      "description": "A URL to an image preview for the search result."
+    },
+    "initialMatch": {
+      "title": "Initial Match",
+      "type": "string",
+      "description": "The initial search match or summary of the search result."
+    },
+    "matches": {
+      "title": "Matches",
+      "type": "array",
+      "description": "An array of search matches.",
+      "items": {
+        "$schema": "http://json-schema.org/draft-07/schema#",
+        "$id": "http://schema.mydesignsystem.com/search-result-match.schema.json",
+        "title": "Search Result Match",
+        "type": "object",
+        "properties": {
+          "title": {
+            "title": "Title",
+            "type": "string",
+            "description": "The title of the match.",
+            "examples": [
+              "Panel Discussion: Ethics in AI"
+            ]
+          },
+          "snippet": {
+            "title": "Text",
+            "type": "string",
+            "description": "The main content or description of the search result.",
+            "examples": [
+              "Experts debate the ethical challenges and responsibilities of deploying AI technologies."
+            ]
+          },
+          "url": {
+            "title": "URL",
+            "type": "string",
+            "description": "A URL linking to the specific match or more information.",
+            "examples": [
+              "https://www.example.com/ai-conference-2023/panel-discussion"
+            ]
+          }
+        },
+        "additionalProperties": false
+      }
+    },
     "showLink": {
       "title": "Show Link",
       "type": "boolean",
       "description": "Whether to display the link to the search result.",
       "default": true
-    },
-    "ariaLabel": {
-      "title": "ARIA Label",
-      "type": "string",
-      "description": "An ARIA label for accessibility purposes.",
-      "examples": [
-        "Search result: Conference 2023"
-      ]
     }
   },
   "additionalProperties": false

package/dist/components/search-result/search-result.schema.json

@@ -16,25 +16,36 @@
       "description": "The title of the search result.",
       "examples": ["AI Conference 2023"]
     },
-    "text": {
-      "title": "Text",
+    "imageColSize": {
+      "title": "Image Row Size",
       "type": "string",
-      "description": "The main content or description of the search result.",
-      "examples": [
-        "Join us for the AI Conference 2023, where industry leaders discuss the future of AI."
-      ]
+      "description": "The reserved space of the image row.",
+      "default": "small",
+      "enum": ["none", "small", "large"]
+    },
+    "previewImage": {
+      "title": "Preview Image",
+      "type": "string",
+      "description": "A URL to an image preview for the search result."
+    },
+    "initialMatch": {
+      "title": "Initial Match",
+      "type": "string",
+      "description": "The initial search match or summary of the search result."
+    },
+    "matches": {
+      "title": "Matches",
+      "type": "array",
+      "description": "An array of search matches.",
+      "items": {
+        "$ref": "http://schema.mydesignsystem.com/search-result-match.schema.json"
+      }
     },
     "showLink": {
       "title": "Show Link",
       "type": "boolean",
       "description": "Whether to display the link to the search result.",
       "default": true
-    },
-    "ariaLabel": {
-      "title": "ARIA Label",
-      "type": "string",
-      "description": "An ARIA label for accessibility purposes.",
-      "examples": ["Search result: Conference 2023"]
     }
   },
   "additionalProperties": false

package/dist/components/search-result-match/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SearchResultMatchProps } from "../../SearchResultMatchProps-777cd47c.js";
+declare const SearchResultMatchContextDefault: import("react").ForwardRefExoticComponent<SearchResultMatchProps & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const SearchResultMatchContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchResultMatchProps & import("react").RefAttributes<HTMLAnchorElement>>>;
+declare const SearchResultMatch: import("react").ForwardRefExoticComponent<SearchResultMatchProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export type { SearchResultMatchProps };
+export { SearchResultMatchContextDefault, SearchResultMatchContext, SearchResultMatch };

package/dist/components/search-result-match/index.js

@@ -0,0 +1,18 @@
+import "./search-result-match.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { Link } from '@kickstartds/base/lib/link';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {};
+
+const SearchResultMatchContextDefault = forwardRef(({ title, snippet, url, ...props }, ref) => (jsxs(Link, { ref: ref, href: url, className: "dsa-search-result-match", "data-result-link": true, ...props, children: [jsx("div", { "data-result-title": true, className: "dsa-search-result-match__title", children: title }), jsx(RichText, { text: snippet, className: "dsa-search-result-match__snippet", "data-result-excerpt": true })] })));
+const SearchResultMatchContext = createContext(SearchResultMatchContextDefault);
+const SearchResultMatch = forwardRef((props, ref) => {
+    const Component = useContext(SearchResultMatchContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+SearchResultMatch.displayName = "SearchResultMatch";
+
+export { SearchResultMatch, SearchResultMatchContext, SearchResultMatchContextDefault };

package/dist/components/search-result-match/search-result-match.css

@@ -0,0 +1,18 @@
+.dsa-search-result-match {
+  --g-link--border-radius: 0;
+  font: var(--ks-font-interface-m);
+  padding: var(--ks-spacing-stack-s) 0;
+  border-top: 1px solid var(--ks-border-color-default);
+  display: block;
+  margin-left: 1.25em;
+}
+.dsa-search-result-match__snippet {
+  font: var(--ks-font-copy-m);
+}
+.dsa-search-result-match__chevron {
+  width: 1em;
+  height: 1em;
+}
+.dsa-search-result-match:last-child {
+  border-bottom: 1px solid var(--ks-border-color-default);
+}