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

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

@@ -4,6 +4,139 @@
   "title": "Search",
   "type": "object",
   "properties": {
+    "headline": {
+      "$schema": "http://json-schema.org/draft-07/schema#",
+      "$id": "http://schema.mydesignsystem.com/headline.schema.json",
+      "title": "Headline",
+      "description": "Component used for headlines",
+      "type": "object",
+      "properties": {
+        "text": {
+          "type": "string",
+          "title": "Text",
+          "description": "Text content of headline",
+          "format": "markdown"
+        },
+        "sub": {
+          "type": "string",
+          "title": "Sub",
+          "description": "Subheadline content",
+          "format": "markdown"
+        },
+        "switchOrder": {
+          "type": "boolean",
+          "title": "Switch order?",
+          "description": "Switch order of headline and subheadline",
+          "default": false
+        },
+        "align": {
+          "type": "string",
+          "title": "Section alignment",
+          "enum": [
+            "left",
+            "center",
+            "right"
+          ]
+        },
+        "level": {
+          "type": "string",
+          "title": "Level",
+          "description": "Level of headline to use",
+          "enum": [
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "p"
+          ],
+          "default": "h2"
+        },
+        "style": {
+          "type": "string",
+          "title": "Style",
+          "description": "Style of headline to show",
+          "enum": [
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "p"
+          ],
+          "default": "h2"
+        },
+        "spaceAfter": {
+          "type": "string",
+          "title": "Space after?",
+          "description": "Whether to display space after headline",
+          "enum": [
+            "minimum",
+            "small",
+            "large"
+          ],
+          "default": "small"
+        },
+        "className": {
+          "type": "string",
+          "title": "Class Name",
+          "description": "Set a custom class name"
+        },
+        "id": {
+          "type": "string",
+          "title": "ID",
+          "description": "Set a custom id attribute"
+        }
+      },
+      "additionalProperties": false,
+      "required": [
+        "level",
+        "text"
+      ]
+    },
+    "searchBar": {
+      "$schema": "http://json-schema.org/draft-07/schema#",
+      "$id": "http://schema.mydesignsystem.com/search-bar.schema.json",
+      "title": "Search Bar",
+      "type": "object",
+      "properties": {
+        "placeholder": {
+          "title": "Placeholder",
+          "type": "string",
+          "description": "Placeholder text for the search input field.",
+          "examples": [
+            "Search..."
+          ]
+        },
+        "buttonText": {
+          "type": "string",
+          "description": "Text displayed on the search button.",
+          "examples": [
+            "Search"
+          ]
+        },
+        "hint": {
+          "type": "string",
+          "description": "Additional information or instructions related to the search functionality.",
+          "examples": [
+            "Press <kbd>Enter</kbd> to search"
+          ]
+        },
+        "alternativeText": {
+          "type": "string",
+          "description": "Text to display when offering alternative results.",
+          "examples": [
+            "Did you mean"
+          ]
+        },
+        "alternativeResult": {
+          "type": "string",
+          "description": "The alternative result to display when offering suggestions.",
+          "examples": [
+            "AI Conference"
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
     "searchFilter": {
       "$schema": "http://json-schema.org/draft-07/schema#",
       "$id": "http://schema.mydesignsystem.com/search-filter.schema.json",
@@ -94,27 +227,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/search.schema.json

@@ -4,6 +4,12 @@
   "title": "Search",
   "type": "object",
   "properties": {
+    "headline": {
+      "$ref": "http://schema.mydesignsystem.com/headline.schema.json"
+    },
+    "searchBar": {
+      "$ref": "http://schema.mydesignsystem.com/search-bar.schema.json"
+    },
     "searchFilter": {
       "$ref": "http://schema.mydesignsystem.com/search-filter.schema.json"
     },

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

@@ -1,33 +1,5 @@
 /// <reference types="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.
- */
-/**
- * Placeholder text for the search input field.
- */
-type Placeholder = string;
-interface SearchBarProps {
-    placeholder?: Placeholder;
-    /**
-     * Text displayed on the search button.
-     */
-    buttonText?: string;
-    /**
-     * Additional information or instructions related to the search functionality.
-     */
-    hint?: string;
-    /**
-     * Text to display when offering alternative results.
-     */
-    alternativeText?: string;
-    /**
-     * The alternative result to display when offering suggestions.
-     */
-    alternativeResult?: string;
-}
+import { SearchBarProps } from "../../SearchBarProps-26263244.js";
 declare const SearchBarContextDefault: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>;
 declare const SearchBarContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>>;
 declare const SearchBar: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -9,7 +9,7 @@ import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
 const defaults = {};
 
-const SearchBarContextDefault = forwardRef(({ placeholder, hint = "Press <kbd>Enter</kbd> to search", alternativeText = "Did you mean", alternativeResult = "AI Conference", }, ref) => (jsxs("div", { className: "dsa-search-bar", ref: ref, children: [jsxs("div", { className: "dsa-search-bar__input-container", children: [jsx(TextField, { hideLabel: true, type: "search", placeholder: placeholder || "Search...", className: "dsa-search-bar__input" }), jsx(Icon, { icon: "search" })] }), hint && jsx(Markdown, { className: "dsa-search-bar__hint", children: hint }), alternativeResult && (jsx("p", { className: "dsa-search-bar__alternative-text", children: jsxs(Fragment, { children: [alternativeText + " ", jsx(Link, { href: "#", children: alternativeResult })] }) }))] })));
+const SearchBarContextDefault = forwardRef(({ placeholder, hint = "Press <kbd>Enter</kbd> to search", alternativeText = "Did you mean", alternativeResult = "AI Conference", }, ref) => (jsxs("div", { className: "dsa-search-bar", ref: ref, children: [jsxs("div", { className: "dsa-search-bar__input-container", children: [jsx(TextField, { hideLabel: true, type: "search", placeholder: placeholder || "Search...", className: "dsa-search-bar__input", autoComplete: "off", name: "q" }), jsx(Icon, { icon: "search" })] }), hint && jsx(Markdown, { className: "dsa-search-bar__hint", children: hint }), alternativeResult && (jsx("p", { className: "dsa-search-bar__alternative-text", children: jsxs(Fragment, { children: [alternativeText + " ", jsx(Link, { href: "#", children: alternativeResult })] }) }))] })));
 const SearchBarContext = createContext(SearchBarContextDefault);
 const SearchBar = forwardRef((props, ref) => {
     const Component = useContext(SearchBarContext);

package/dist/components/search-form/SearchForm.client.d.ts

@@ -0,0 +1,25 @@
+declare class SearchForm {
+    static identifier: string;
+    constructor(element: any);
+    lazyResults: WeakMap<object, any>;
+    resultsPerPage: number;
+    state: {
+        term: any;
+        page: any;
+        results: any;
+    };
+    loadEngine(): Promise<void>;
+    $searchInput: any;
+    $resultTemplate: any;
+    $subresultTemplate: any;
+    $paginationLinkTemplate: any;
+    $pagination: any;
+    $results: any;
+    $moreButton: any;
+    updateFromHash(): void;
+    renderResults(results: any): void;
+    onRadio(topic: any, fn: any): () => void;
+    on(element: any, type: any, fn: any): () => any;
+    $(selector: any, element?: any): any;
+}
+export { SearchForm as default };

package/dist/components/search-form/SearchForm.client.js

@@ -0,0 +1,228 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+import { events } from '@kickstartds/core/lib/core';
+import { debounce } from '@kickstartds/core/lib/utils';
+
+const parser = new DOMParser();
+const renderPagination = ($pagination, $linkTemplate, totalPages, currentPageIndex, hrefPrefix) => {
+    const [$first, $prev, $pages, $next, $last] = $pagination.children;
+    $pages.textContent = "";
+    for (let i = 0; i < totalPages; i++) {
+        const $link = $linkTemplate.cloneNode(true);
+        $link.textContent = i + 1;
+        $link.href = hrefPrefix + (i + 1);
+        $link.setAttribute("aria-current", i === currentPageIndex ? "page" : "false");
+        $pages.appendChild($link);
+    }
+    $first.href = hrefPrefix + 1;
+    $prev.href = hrefPrefix + (currentPageIndex + 1 - 1);
+    $next.href = hrefPrefix + (currentPageIndex + 1 + 1);
+    $last.href = hrefPrefix + totalPages;
+    if (currentPageIndex === 0) {
+        $first.setAttribute("hidden", "");
+        $prev.setAttribute("hidden", "");
+    }
+    else {
+        $first.removeAttribute("hidden", "");
+        $prev.removeAttribute("hidden", "");
+    }
+    if (currentPageIndex === totalPages - 1) {
+        $next.setAttribute("hidden", "");
+        $last.setAttribute("hidden", "");
+    }
+    else {
+        $next.removeAttribute("hidden", "");
+        $last.removeAttribute("hidden", "");
+    }
+    $pagination.removeAttribute("hidden");
+};
+const renderMoreButton = ($button, totalResults) => {
+    $button.removeAttribute("hidden");
+    const $count = $button.children[0].children[0];
+    $count.textContent = totalResults;
+};
+const renderResult = (result, element) => {
+    const $ = element.querySelector.bind(element), $$ = element.querySelectorAll.bind(element);
+    if (result.title) {
+        const title = $("[data-result-title]");
+        if (title)
+            title.textContent = result.title;
+    }
+    if (result.excerpt) {
+        const doc = parser.parseFromString(result.excerpt, "text/html");
+        const excerpt = $("[data-result-excerpt]");
+        if (excerpt)
+            excerpt.replaceChildren(...doc.body.childNodes);
+    }
+    if (result.url) {
+        const url = $("[data-result-url]");
+        if (url)
+            url.textContent = result.url;
+        const links = $$("[data-result-link]");
+        for (const link of links) {
+            link.setAttribute("href", result.url);
+        }
+    }
+    if (result.image) {
+        const image = $("[data-result-image]");
+        if (image)
+            image.src = result.image;
+    }
+};
+const limitSubResults = (subResults, limit) => {
+    if (subResults.length <= limit)
+        return subResults;
+    const topUrls = [...subResults]
+        .sort((a, b) => b.locations.length - a.locations.length)
+        .slice(0, limit)
+        .map((r) => r.url);
+    return subResults.filter((r) => topUrls.includes(r.url));
+};
+const parseNumber = (value, fallback) => {
+    const number = Number(value);
+    return isNaN(number) ? fallback : number;
+};
+const debouncedSearch = debounce((term) => window._ks.radio.emit("dsa.search.search", { term }), 300);
+class SearchForm extends Component {
+    async loadEngine() {
+        throw new Error("please connect a search engine");
+    }
+    constructor(element) {
+        super(element);
+        this.lazyResults = new WeakMap();
+        this.resultsPerPage = 10;
+        this.state = {
+            term: undefined,
+            page: undefined,
+            results: undefined,
+        };
+        this.$searchInput = this.$(".dsa-search-bar__input");
+        this.$resultTemplate = this.$("[data-template=result]");
+        this.$subresultTemplate = this.$("[data-template=subresult]");
+        this.$paginationLinkTemplate = this.$("[data-template=pagination-link]");
+        this.$pagination = this.$(".dsa-pagination");
+        this.$results = this.$(".dsa-search-form__results");
+        this.$moreButton = this.$(".c-button");
+        const subResultsLimit = parseNumber(element.dataset.maxSubresults, 3);
+        this.resultsPerPage = parseNumber(element.dataset.resultsPerPage, 10);
+        this.on(this.$searchInput, "input", () => {
+            const term = this.$searchInput.value.trim();
+            if (term.length) {
+                debouncedSearch(term);
+            }
+            else {
+                window._ks.radio.emit("dsa.search.reset");
+            }
+        });
+        this.on(element, "submit", (event) => {
+            event.preventDefault();
+            const url = new URL(element.getAttribute("action") || "", window.location);
+            const formData = new FormData(element);
+            url.hash = new URLSearchParams(formData);
+            window.location.href = url;
+        });
+        this.on(element, "reset", (event) => {
+            window._ks.radio.emit("dsa.search.reset");
+        });
+        this.on(window, "hashchange", () => {
+            this.updateFromHash();
+        });
+        this.onRadio(events.beforeunveil, async (_, el) => {
+            if (this.lazyResults.has(el)) {
+                const lazyResult = this.lazyResults.get(el);
+                const result = await lazyResult();
+                renderResult(result, el);
+                const $subResults = this.$("[data-result-subresults]", el);
+                const subResults = limitSubResults(result.subResults, subResultsLimit);
+                for (const subResult of subResults) {
+                    const $subResultClone = this.$subresultTemplate.cloneNode(true);
+                    $subResultClone.setAttribute("href", subResult.url);
+                    renderResult(subResult, $subResultClone);
+                    $subResults.appendChild($subResultClone);
+                }
+            }
+        });
+        // init
+        this.loadEngine().then((search) => {
+            this.updateFromHash();
+            this.onRadio("dsa.search.reset", () => {
+                this.$results.textContent = "";
+                this.$pagination.setAttribute("hidden", "");
+                this.state = {};
+            });
+            this.onRadio("dsa.search.search", async (_, { term, page = 0 }) => {
+                window._ks.radio.emit("dsa.search.loading");
+                this.state.term = term;
+                this.state.page = page;
+                try {
+                    this.state.results = await search(term);
+                    window._ks.radio.emit("dsa.search.loaded");
+                }
+                catch (e) {
+                    console.error(e);
+                    window._ks.radio.emit("dsa.search.reset");
+                }
+            });
+            this.onRadio("dsa.search.loaded", () => {
+                if (this.state.results.length) {
+                    const startIndex = this.state.page * this.resultsPerPage;
+                    const endIndex = startIndex + this.resultsPerPage;
+                    const results = this.state.results.slice(startIndex, endIndex);
+                    this.renderResults(results);
+                    if (this.element.hasAttribute("action")) {
+                        renderMoreButton(this.$moreButton, this.state.results.length);
+                    }
+                    else {
+                        renderPagination(this.$pagination, this.$paginationLinkTemplate, Math.ceil(this.state.results.length / this.resultsPerPage), this.state.page, `#q=${this.state.term}&page=`);
+                    }
+                }
+            });
+            this.onRadio("dsa.search.goToPage", (_, page) => {
+                this.state.page = page;
+                window._ks.radio.emit("dsa.search.loaded");
+            });
+        });
+    }
+    updateFromHash() {
+        const params = new URLSearchParams(window.location.hash.slice(1));
+        if (params.has("q")) {
+            const term = params.get("q");
+            const page = params.has("page") ? Number(params.get("page")) - 1 : 0;
+            this.$searchInput.value = term;
+            if (term) {
+                if (term !== this.state.term) {
+                    window._ks.radio.emit("dsa.search.search", { term, page });
+                }
+                else if (page !== this.state.page) {
+                    window._ks.radio.emit("dsa.search.goToPage", page);
+                }
+            }
+        }
+    }
+    renderResults(results) {
+        this.$results.textContent = "";
+        for (const result of results) {
+            const $resultClone = this.$resultTemplate.cloneNode(true);
+            this.lazyResults.set($resultClone, result);
+            this.$results.appendChild($resultClone);
+        }
+    }
+    onRadio(topic, fn) {
+        const token = window._ks.radio.on(topic, fn);
+        const cleanUp = () => window._ks.radio.off(token);
+        this.onDisconnect(cleanUp);
+        return cleanUp;
+    }
+    on(element, type, fn) {
+        const cleanUp = () => element.removeventListener(type, fn);
+        element.addEventListener(type, fn);
+        this.onDisconnect(cleanUp);
+        return cleanUp;
+    }
+    $(selector, element = this.element) {
+        return element.querySelector(selector);
+    }
+}
+SearchForm.identifier = "dsa.search-form";
+define(SearchForm.identifier, SearchForm);
+
+export { SearchForm as default };

package/dist/components/search-form/SearchFormPagefind.client.d.ts

@@ -0,0 +1,5 @@
+import SearchForm from "./SearchForm.client.js";
+declare class SearchFormPagefind extends SearchForm {
+    loadEngine(): Promise<(term: any) => Promise<any>>;
+}
+export { SearchFormPagefind as default };

package/dist/components/search-form/SearchFormPagefind.client.js

@@ -0,0 +1,40 @@
+import { define } from '@kickstartds/core/lib/component';
+import SearchForm from './SearchForm.client.js';
+import '@kickstartds/core/lib/core';
+import '@kickstartds/core/lib/utils';
+
+const staticPageFindPath = "/pagefind/pagefind.js";
+const pagefindResult2searchResult = ({ sub_results, ...result }) => {
+    const hasRootSubResult = sub_results?.[0]?.url === (result.meta.url || result.url);
+    const subResults = hasRootSubResult
+        ? sub_results.slice(1)
+        : sub_results || [];
+    return {
+        title: result.meta.title,
+        url: result.meta.url || result.url,
+        excerpt: result.excerpt,
+        image: result.meta.image,
+        subResults: subResults.map((subResult) => ({
+            title: subResult.title,
+            url: subResult.url,
+            excerpt: subResult.excerpt,
+            locations: subResult.locations,
+        })),
+    };
+};
+class SearchFormPagefind extends SearchForm {
+    async loadEngine() {
+        const pagefind = await import(/* @vite-ignore */ staticPageFindPath);
+        await pagefind.init();
+        return async function search(term) {
+            const search = await pagefind.search(term);
+            if (search) {
+                return search.results.map((result) => () => result.data().then(pagefindResult2searchResult));
+            }
+        };
+    }
+}
+SearchFormPagefind.identifier = "dsa.search-form.pagefind";
+define(SearchFormPagefind.identifier, SearchFormPagefind);
+
+export { SearchFormPagefind as default };

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

@@ -0,0 +1,4 @@
+import { FC, HTMLAttributes } from "react";
+import { SearchFormProps } from "../../SearchFormProps-3d2c3462.js";
+declare const SearchForm: FC<SearchFormProps & HTMLAttributes<HTMLFormElement>>;
+export { SearchForm };

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

@@ -0,0 +1,25 @@
+import "./search-form.css";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Button } from '@kickstartds/base/lib/button';
+import { SearchBar } from '../search-bar/index.js';
+import { SearchResult } from '../search-result/index.js';
+import { SearchResultMatch } from '../search-result-match/index.js';
+import { PageLink, Pagination } from '../pagination/index.js';
+import './SearchForm.client.js';
+import 'react';
+import '@kickstartds/form/lib/text-field';
+import 'markdown-to-jsx';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/base/lib/link';
+import '../../helpers-12f48df8.js';
+import '@kickstartds/base/lib/rich-text';
+import '@kickstartds/base/lib/picture';
+import '@kickstartds/core/lib/container';
+import '@kickstartds/core/lib/component';
+import '@kickstartds/core/lib/core';
+import '@kickstartds/core/lib/utils';
+
+const SearchForm = ({ className, component = "dsa.search-form", result = {}, resultPerPage, moreButtonLabel = "View all results", ...props }) => (jsxs("form", { className: classnames("dsa-search-form", className), "ks-component": component, "data-max-subresults": result.maxSubresults, "data-results-per-page": resultPerPage, ...props, children: [jsx(SearchBar, { alternativeText: "", alternativeResult: "", hint: "" }), jsxs("div", { hidden: true, children: [jsx("li", { "data-template": "result", className: "lazyload", children: jsx(SearchResult, { showLink: result.showLink, imageColSize: result.imageColSize }) }), jsx(SearchResultMatch, { "data-template": "subresult" }), jsx(PageLink, { "data-template": "pagination-link" })] }), jsx("ol", { className: "dsa-search-form__results" }), jsxs("div", { className: "dsa-search-form__nav", children: [jsx(Pagination, { hidden: true }), jsx(Button, { variant: "primary", hidden: true, label: moreButtonLabel, type: "submit", renderLabel: (label) => (jsxs(Fragment, { children: [label, " (", jsx("span", {}), ")"] })) })] })] }));
+
+export { SearchForm };

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

@@ -0,0 +1,10 @@
+.dsa-search-form__results {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-l);
+  list-style: none;
+  padding: 0;
+}
+.dsa-search-form__nav {
+  text-align: center;
+}