@kickstartds/ds-agency-premium 1.7.0--canary.46.1927.0 → 1.7.0--canary.43.2352.0

package/dist/components/providers/index.js

@@ -9,11 +9,11 @@ import { ButtonGroupProvider } from '../button-group/index.js';
 import 'react';
 import 'classnames';
 import '@kickstartds/base/lib/button';
+import '../../helpers-12f48df8.js';
 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/teaser-box';
 import '@kickstartds/core/lib/container';
 import 'markdown-to-jsx';

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

@@ -0,0 +1,29 @@
+import { 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.
+ */
+import { HeadlineProps } from "../../HeadlineProps-e1305784.js";
+import { SearchBarProps } from "../../SearchBarProps-26263244.js";
+import { SearchFilterProps } from "../../SearchFilterProps-2fa6419b.js";
+import { SearchResultProps } from "../../SearchResultProps-f6f07017.js";
+interface SearchProps {
+    /**
+     * Referenced component HeadlineProps
+     */
+    headline?: HeadlineProps;
+    /**
+     * Referenced component SearchBarProps
+     */
+    searchBar?: SearchBarProps;
+    /**
+     * Referenced component SearchFilterProps
+     */
+    searchFilter?: SearchFilterProps;
+    searchResults?: SearchResultProps[];
+}
+declare const Search: FC<PropsWithChildren<SearchProps>>;
+export type { SearchProps };
+export { Search };

package/dist/components/search/index.js

@@ -0,0 +1,53 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Section } from '../section/index.js';
+import { SplitWeighted } from '../split-weighted/index.js';
+import { SearchFilter } from '../search-filter/index.js';
+import { SearchResult } from '../search-result/index.js';
+import { RichText } from '@kickstartds/base/lib/rich-text';
+import { Pagination } from '../pagination/index.js';
+import { SearchBar } from '../search-bar/index.js';
+import { Headline } from '../headline/index.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 'markdown-to-jsx';
+import '@kickstartds/base/lib/link';
+import '@kickstartds/base/lib/picture';
+import '@kickstartds/core/lib/container';
+import '../search-result-match/index.js';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/form/lib/text-field';
+import '@kickstartds/base/lib/headline';
+
+const Search = ({ headline, searchBar, searchFilter, searchResults, }) => (jsxs(Fragment, { children: [jsxs(Section, { content: {
+                mode: "list",
+                gutter: "none",
+            }, spaceAfter: "small", children: [jsx(Headline, { ...headline }), jsx(SearchBar, { ...searchBar })] }), jsx(Section, { width: "wide", spaceBefore: "small", content: {
+                mode: "list",
+            }, children: jsx(SplitWeighted, { verticalAlign: "sticky", mainLayout: {
+                    minWidth: "narrow",
+                    gutter: "large",
+                }, asideLayout: {
+                    gutter: "small",
+                }, order: {
+                    desktop: "asideFirst",
+                    mobile: "asideFirst",
+                }, aside: jsxs(Fragment, { children: [jsx(SearchFilter, { ...searchFilter }), jsx(RichText, { text: `Showing 6 out of 18 results` })] }), main: jsxs(Fragment, { children: [searchResults.map((searchResult, index) => (jsx(SearchResult, { ...searchResult }, index))), jsx(Pagination, { pages: [
+                                {
+                                    url: "https://example.com/page1",
+                                    active: true,
+                                },
+                                {
+                                    url: "https://example.com/page2",
+                                },
+                                {
+                                    url: "https://example.com/page3",
+                                },
+                            ] })] }) }) })] }));
+Search.displayName = "Search";
+
+export { Search };

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

@@ -0,0 +1,301 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/cms/search.schema.json",
+  "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",
+      "title": "Search Filter",
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string",
+          "description": "The title of the search filter.",
+          "examples": [
+            "Search by category"
+          ]
+        },
+        "categories": {
+          "type": "array",
+          "description": "The categories to filter by.",
+          "examples": [
+            [
+              {
+                "title": "Pages",
+                "amount": "10"
+              },
+              {
+                "title": "News",
+                "amount": "5"
+              },
+              {
+                "title": "Blog Posts",
+                "amount": "8"
+              }
+            ]
+          ],
+          "items": {
+            "type": "object",
+            "properties": {
+              "title": {
+                "type": "string",
+                "description": "The name of the category.",
+                "examples": [
+                  "Pages",
+                  "News"
+                ]
+              },
+              "amount": {
+                "type": "string",
+                "description": "The number of items in the category.",
+                "examples": [
+                  "10",
+                  "5"
+                ]
+              },
+              "url": {
+                "type": "string",
+                "format": "uri",
+                "description": "The URL to filter by this category.",
+                "examples": [
+                  "#"
+                ]
+              }
+            },
+            "additionalProperties": false
+          }
+        }
+      },
+      "additionalProperties": false
+    },
+    "searchResults": {
+      "type": "array",
+      "items": {
+        "$schema": "http://json-schema.org/draft-07/schema#",
+        "$id": "http://schema.mydesignsystem.com/search-result.schema.json",
+        "title": "Search Result",
+        "type": "object",
+        "properties": {
+          "url": {
+            "title": "URL",
+            "type": "string",
+            "description": "A URL linking to the search result or more information.",
+            "examples": [
+              "https://www.example.com/ai-conference-2023"
+            ]
+          },
+          "title": {
+            "title": "Title",
+            "type": "string",
+            "description": "The title of the search result.",
+            "examples": [
+              "AI Conference 2023"
+            ]
+          },
+          "imageColSize": {
+            "title": "Image Row Size",
+            "type": "string",
+            "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
+          }
+        },
+        "additionalProperties": false
+      }
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,24 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/cms/search.schema.json",
+  "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"
+    },
+    "searchResults": {
+      "type": "array",
+      "items": {
+        "$ref": "http://schema.mydesignsystem.com/search-result.schema.json"
+      }
+    }
+  },
+  "additionalProperties": false
+}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+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>>;
+export type { SearchBarProps };
+export { SearchBarContextDefault, SearchBarContext, SearchBar };

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

@@ -0,0 +1,20 @@
+import "./search-bar.css";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { TextField } from '@kickstartds/form/lib/text-field';
+import Markdown from 'markdown-to-jsx';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { Link } from '@kickstartds/base/lib/link';
+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", 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);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+SearchBar.displayName = "SearchBar";
+
+export { SearchBar, SearchBarContext, SearchBarContextDefault };

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

@@ -0,0 +1,33 @@
+.dsa-search-bar__input-container {
+  position: relative;
+}
+.dsa-search-bar__input-container .icon {
+  position: absolute;
+  left: var(--ks-spacing-inset-s);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ks-color-fg-alpha-6);
+  width: 1em;
+  height: 1em;
+}
+.dsa-search-bar__input.c-form-field__input {
+  padding: var(--ks-spacing-inset-xs);
+  font: var(--ks-font-interface-s);
+  padding-left: calc(var(--ks-spacing-inset-s) + 1em + var(--ks-spacing-xxs));
+}
+.dsa-search-bar__hint {
+  display: block;
+  font: var(--ks-font-interface-xs);
+  color: var(--ks-color-fg-alpha-4);
+  margin-top: var(--ks-spacing-stack-xs);
+}
+.dsa-search-bar__hint kbd {
+  font-size: 0.8em;
+  border-radius: 3px;
+}
+.dsa-search-bar__alternative-text {
+  margin-top: var(--ks-spacing-stack-s);
+  margin-bottom: 0;
+  font: var(--ks-font-interface-m);
+  color: var(--ks-text-color-interface);
+}

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

@@ -0,0 +1,45 @@
+{
+  "$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
+}

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

@@ -0,0 +1,35 @@
+{
+  "$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
+}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SearchFilterProps } from "../../SearchFilterProps-2fa6419b.js";
+declare const SearchFilterContextDefault: import("react").ForwardRefExoticComponent<SearchFilterProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SearchFilterContext: import("react").Context<import("react").ForwardRefExoticComponent<SearchFilterProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const SearchFilter: import("react").ForwardRefExoticComponent<SearchFilterProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { SearchFilterProps };
+export { SearchFilterContextDefault, SearchFilterContext, SearchFilter };

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

@@ -0,0 +1,20 @@
+import "./search-filter.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import Markdown from 'markdown-to-jsx';
+import { Link } from '@kickstartds/base/lib/link';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "categories": []
+};
+
+const SearchFilterContextDefault = forwardRef(({ title, categories }, ref) => (jsxs("div", { className: "dsa-search-filter", ref: ref, children: [title && jsx(Markdown, { className: "dsa-search-filter__title", children: title }), jsx("div", { className: "dsa-search-filter__categories", children: categories.map((category, index) => (jsxs("div", { className: "dsa-search-filter__category", children: [jsx(Link, { href: category.url, className: "dsa-search-filter__category-title", children: category.title }), jsx("span", { className: "dsa-search-filter__category-amount", children: " (" + category.amount + ")" })] }, index))) })] })));
+const SearchFilterContext = createContext(SearchFilterContextDefault);
+const SearchFilter = forwardRef((props, ref) => {
+    const Component = useContext(SearchFilterContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+SearchFilter.displayName = "SearchFilter";
+
+export { SearchFilter, SearchFilterContext, SearchFilterContextDefault };

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

@@ -0,0 +1,22 @@
+.dsa-search-filter {
+  background-color: var(--ks-background-color-accent);
+  border-radius: var(--ks-border-radius-card);
+  padding: var(--ks-spacing-inset-m);
+}
+.dsa-search-filter__title {
+  font: var(--dsa-topic--font);
+  color: var(--dsa-topic--color);
+  font-weight: var(--dsa-topic--font-weight);
+}
+.dsa-search-filter__categories {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-xxs);
+  margin-top: var(--ks-spacing-stack-s);
+}
+.dsa-search-filter__category {
+  --g-link--text-decoration: none;
+  --g-link--text-decoration-hover: none;
+  font: var(--ks-font-interface-m);
+  color: var(--ks-text-color-interface);
+}