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

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

@@ -0,0 +1,61 @@
+import "./event-filter.css";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { TextField } from '@kickstartds/form/lib/text-field';
+import { Checkbox } from '@kickstartds/form/lib/checkbox';
+import { Button } from '../button/index.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+import 'classnames';
+import '@kickstartds/base/lib/button';
+
+const defaults = {
+    "datePicker": {
+        "title": "Find Appointment",
+        "dateFromInput": {
+            "label": "From",
+            "placeholder": "Select a date"
+        },
+        "dateToInput": {
+            "label": "To",
+            "placeholder": "Select a date"
+        },
+        "toggle": true
+    },
+    "categories": {
+        "title": "Categories",
+        "categoryCheckboxes": [],
+        "toggle": true
+    },
+    "applyButton": {
+        "label": "Filter Appointments"
+    },
+    "resetButton": {
+        "label": "Reset Filters"
+    }
+};
+
+const EventFilterContextDefault = forwardRef(({ categories = {
+    title: "Categories",
+    toggle: true,
+}, datePicker = {
+    title: "Find Appointment",
+    toggle: true,
+}, applyButton = {
+    label: "Filter Appointments",
+}, resetButton = {
+    label: "Reset Filters",
+}, }, ref) => (jsxs("div", { className: "dsa-event-filter", ref: ref, children: [datePicker?.toggle && (jsxs(Fragment, { children: [jsx("span", { className: "dsa-event-filter__topic", children: datePicker.title || "Find Appointment" }), jsx("div", { className: "dsa-event-filter__item", children: jsxs("div", { className: "dsa-event-filter__date-picker", children: [jsx(TextField, { type: "date", label: datePicker.dateFromInput.label || "From", placeholder: datePicker.dateFromInput.placeholder || "Select a date" }), jsx(TextField, { type: "date", label: datePicker.dateToInput.label || "To", placeholder: datePicker.dateToInput.placeholder || "Select a date" })] }) })] })), categories && categories?.toggle && (jsxs(Fragment, { children: [jsx("span", { className: "dsa-event-filter__topic", children: categories?.title || "Categories" }), jsx("div", { className: "dsa-event-filter__item", children: jsx("div", { className: "dsa-event-filter__categories", children: categories &&
+                            categories.categoryCheckboxes.length > 0 &&
+                            categories.categoryCheckboxes.map((category, index) => (jsx(Checkbox, { label: category }, index))) }) })] })), jsxs("div", { className: "dsa-event-filter__buttons", children: [jsx(Button, { size: "small", label: applyButton?.label || "Filter Appointments", variant: "primary", onClick: () => {
+                        // Handle button click
+                    } }), jsx(Button, { size: "small", label: resetButton?.label || "Reset Filters", onClick: () => {
+                        // Handle button click
+                    } })] })] })));
+const EventFilterContext = createContext(EventFilterContextDefault);
+const EventFilter = forwardRef((props, ref) => {
+    const Component = useContext(EventFilterContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+EventFilter.displayName = "EventFilter";
+
+export { EventFilter, EventFilterContext, EventFilterContextDefault };

package/dist/components/event-header/event-header.css

@@ -0,0 +1,6 @@
+.dsa-event-header__categories {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-bottom: var(--ks-spacing-stack-s);
+}

package/dist/components/event-header/event-header.schema.dereffed.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-header.schema.json",
+  "title": "Event Header",
+  "type": "object",
+  "properties": {
+    "title": {
+      "title": "Title",
+      "description": "Title of the event",
+      "type": "string"
+    },
+    "categories": {
+      "title": "Categories",
+      "description": "Categories associated with the event",
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "title": "Label",
+            "description": "Label of the category",
+            "type": "string"
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    "intro": {
+      "title": "Intro",
+      "description": "Introductory text for the event",
+      "type": "string"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/event-header/event-header.schema.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-header.schema.json",
+  "title": "Event Header",
+  "type": "object",
+  "properties": {
+    "title": {
+      "title": "Title",
+      "description": "Title of the event",
+      "type": "string"
+    },
+    "categories": {
+      "title": "Categories",
+      "description": "Categories associated with the event",
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "title": "Label",
+            "description": "Label of the category",
+            "type": "string"
+          }
+        }
+      }
+    },
+    "intro": {
+      "title": "Intro",
+      "description": "Introductory text for the event",
+      "type": "string"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/event-header/index.d.ts

@@ -0,0 +1,35 @@
+/// <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.
+ */
+/**
+ * Title of the event
+ */
+type Title = string;
+/**
+ * Label of the category
+ */
+type Label = string;
+/**
+ * Categories associated with the event
+ */
+type Categories = {
+    label?: Label;
+}[];
+/**
+ * Introductory text for the event
+ */
+type Intro = string;
+interface EventHeaderProps {
+    title?: Title;
+    categories?: Categories;
+    intro?: Intro;
+}
+declare const EventHeaderContextDefault: import("react").ForwardRefExoticComponent<EventHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const EventHeaderContext: import("react").Context<import("react").ForwardRefExoticComponent<EventHeaderProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const EventHeader: import("react").ForwardRefExoticComponent<EventHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { EventHeaderProps };
+export { EventHeaderContextDefault, EventHeaderContext, EventHeader };

package/dist/components/event-header/index.js

@@ -0,0 +1,25 @@
+import "./event-header.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { Headline } from '../headline/index.js';
+import { Text } from '../text/index.js';
+import { TagLabel } from '@kickstartds/base/lib/tag-label';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+import 'classnames';
+import 'markdown-to-jsx';
+import '@kickstartds/base/lib/headline';
+import '@kickstartds/base/lib/rich-text';
+
+const defaults = {
+    "categories": []
+};
+
+const EventHeaderContextDefault = forwardRef(({ title, categories, intro }, ref) => (jsxs("div", { className: "dsa-event-header", ref: ref, children: [categories && categories.length > 0 && (jsx("div", { className: "dsa-event-header__categories", children: categories.map((category, index) => (jsx(TagLabel, { className: "dsa-event__category", label: category?.label }, index))) })), jsx(Headline, { text: title, level: "h1" }), intro && jsx(Text, { highlightText: true, text: intro })] })));
+const EventHeaderContext = createContext(EventHeaderContextDefault);
+const EventHeader = forwardRef((props, ref) => {
+    const Component = useContext(EventHeaderContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+EventHeader.displayName = "EventHeader";
+
+export { EventHeader, EventHeaderContext, EventHeaderContextDefault };

package/dist/components/event-latest/event-latest.css

@@ -0,0 +1,5 @@
+.dsa-event-latest {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-s);
+}

package/dist/components/event-latest/event-latest.schema.dereffed.json

@@ -0,0 +1,136 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-latest.schema.json",
+  "title": "Event Latest",
+  "description": "Display a list of latest events, ordered chronologically",
+  "type": "object",
+  "properties": {
+    "events": {
+      "title": "Events",
+      "description": "List of events to display",
+      "type": "array",
+      "items": {
+        "$schema": "http://json-schema.org/draft-07/schema#",
+        "$id": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json",
+        "title": "Event Latest Teaser",
+        "description": "Display an event teaser with date, title and location",
+        "type": "object",
+        "properties": {
+          "date": {
+            "title": "Date",
+            "description": "The date of the event",
+            "type": "string",
+            "format": "date",
+            "examples": [
+              "12.30.2022"
+            ]
+          },
+          "calendar": {
+            "type": "object",
+            "title": "Calendar",
+            "description": "Calendar icon to display the date",
+            "properties": {
+              "month": {
+                "title": "Month",
+                "description": "The month of the event",
+                "type": "string",
+                "examples": [
+                  "Dec"
+                ]
+              },
+              "day": {
+                "title": "Day",
+                "description": "The day of the event",
+                "type": "string",
+                "examples": [
+                  "30"
+                ]
+              }
+            },
+            "additionalProperties": false
+          },
+          "title": {
+            "title": "Headline",
+            "description": "Title of the event",
+            "type": "string",
+            "format": "markdown",
+            "examples": [
+              "This is a event teaser title"
+            ]
+          },
+          "location": {
+            "title": "Location",
+            "description": "Location of the event",
+            "type": "string",
+            "format": "markdown",
+            "examples": [
+              "This is a location"
+            ]
+          },
+          "url": {
+            "title": "URL",
+            "description": "The event entry URL to link",
+            "type": "string",
+            "format": "uri",
+            "examples": [
+              "https://example.com"
+            ]
+          },
+          "cta": {
+            "title": "Call to Action",
+            "description": "Text for the call to action",
+            "type": "string",
+            "examples": [
+              "Show event"
+            ]
+          },
+          "ariaLabel": {
+            "title": "ARIA Label",
+            "description": "ARIA label for accessibility",
+            "type": "string",
+            "examples": [
+              "Event teaser for "
+            ]
+          },
+          "className": {
+            "type": "string"
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "title",
+          "date",
+          "location"
+        ]
+      },
+      "minItems": 1,
+      "examples": [
+        [
+          {
+            "date": "12/30/2022",
+            "headline": "Event 1",
+            "location": "Location 1",
+            "link": {
+              "url": "https://example.com/event1",
+              "text": "Show event 1"
+            }
+          },
+          {
+            "date": "01/15/2023",
+            "headline": "Event 2",
+            "location": "Location 2",
+            "link": {
+              "url": "https://example.com/event2",
+              "text": "Show event 2"
+            }
+          }
+        ]
+      ]
+    },
+    "className": {
+      "type": "string"
+    }
+  },
+  "additionalProperties": false,
+  "required": []
+}

package/dist/components/event-latest/event-latest.schema.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-latest.schema.json",
+  "title": "Event Latest",
+  "description": "Display a list of latest events, ordered chronologically",
+  "type": "object",
+  "properties": {
+    "events": {
+      "title": "Events",
+      "description": "List of events to display",
+      "type": "array",
+      "items": {
+        "$ref": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json"
+      },
+      "minItems": 1,
+      "examples": [
+        [
+          {
+            "date": "12/30/2022",
+            "headline": "Event 1",
+            "location": "Location 1",
+            "link": {
+              "url": "https://example.com/event1",
+              "text": "Show event 1"
+            }
+          },
+          {
+            "date": "01/15/2023",
+            "headline": "Event 2",
+            "location": "Location 2",
+            "link": {
+              "url": "https://example.com/event2",
+              "text": "Show event 2"
+            }
+          }
+        ]
+      ]
+    },
+
+    "className": {
+      "type": "string"
+    }
+  },
+  "additionalProperties": false,
+  "required": []
+}

package/dist/components/event-latest/index.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+import { EventLatestTeaserProps } from "../../EventLatestTeaserProps-fc9d3281.js";
+/**
+ * List of events to display
+ *
+ * @minItems 1
+ */
+type Events = [
+    EventLatestTeaserProps,
+    ...EventLatestTeaserProps[]
+];
+/**
+ * Display a list of latest events, ordered chronologically
+ */
+interface EventLatestProps {
+    events?: Events;
+    className?: string;
+}
+declare const EventLatestContextDefault: import("react").ForwardRefExoticComponent<EventLatestProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const EventLatestContext: import("react").Context<import("react").ForwardRefExoticComponent<EventLatestProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const EventLatest: import("react").ForwardRefExoticComponent<EventLatestProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { EventLatestProps };
+export { EventLatestContextDefault, EventLatestContext, EventLatest };

package/dist/components/event-latest/index.js

@@ -0,0 +1,24 @@
+import "./event-latest.css";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { EventLatestTeaser } from '../event-latest-teaser/index.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+import 'classnames';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/core/lib/container';
+
+const defaults = {
+    "events": []
+};
+
+const EventLatestContextDefault = forwardRef(({ events }, ref) => {
+    return (jsx("div", { className: "dsa-event-latest", ref: ref, children: events.map((event, index) => (jsx(EventLatestTeaser, { ...event }, index))) }));
+});
+const EventLatestContext = createContext(EventLatestContextDefault);
+const EventLatest = forwardRef((props, ref) => {
+    const Component = useContext(EventLatestContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+EventLatest.displayName = "EventLatest";
+
+export { EventLatest, EventLatestContext, EventLatestContextDefault };

package/dist/components/event-latest-teaser/event-latest-teaser.css

@@ -0,0 +1,131 @@
+.l-container--event-latest-teaser {
+  /* stylelint-disable-next-line property-no-unknown */
+  container-name: event-latest-teaser;
+}
+
+.dsa-event-latest-teaser {
+  --g-link--border-radius: var(--ks-border-radius-card);
+  display: flex;
+  gap: var(--ks-spacing-inline-s);
+  padding: var(--ks-spacing-inset-s);
+  flex-direction: column;
+  border: var(--ks-border-width-default) solid var(--ks-border-color-card-interactive);
+}
+@container event-latest-teaser (min-width: 640px) {
+  .dsa-event-latest-teaser {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--ks-spacing-inline-m);
+  }
+}
+.dsa-event-latest-teaser:hover {
+  border-color: var(--ks-border-color-card-interactive-hover);
+}
+.dsa-event-latest-teaser__content {
+  display: flex;
+  gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-s);
+  flex-grow: 1;
+  min-width: 0;
+  flex-direction: column;
+}
+@container event-latest-teaser (min-width: 640px) {
+  .dsa-event-latest-teaser__content {
+    flex-direction: row;
+  }
+}
+.dsa-event-latest-teaser .dsa-event-latest-teaser-calendar {
+  align-self: start;
+  position: relative;
+  background-color: var(--ks-background-color-primary);
+  color: var(--dsa-text-color-on-primary);
+  border-radius: var(--ks-border-radius-control);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 0.25em;
+  padding: var(--ks-spacing-inset-s);
+  flex-shrink: 0;
+  font: var(--ks-font-display-l);
+  font-weight: var(--ks-font-weight-semi-bold);
+}
+@container event-latest-teaser (min-width: 640px) {
+  .dsa-event-latest-teaser .dsa-event-latest-teaser-calendar {
+    container-type: inline-size;
+    padding: var(--ks-spacing-xxs);
+    flex-direction: column;
+    align-items: center;
+    padding: var(--ks-spacing-inset-stretch-xs);
+    gap: var(--ks-spacing-xxs);
+    width: calc(var(--ks-spacing-l) * 3);
+    height: calc(var(--ks-spacing-l) * 3);
+  }
+  .dsa-event-latest-teaser .dsa-event-latest-teaser-calendar__month, .dsa-event-latest-teaser .dsa-event-latest-teaser-calendar__day {
+    font-weight: var(--ks-font-weight-semi-bold) !important;
+    font-family: var(--ks-font-family-display);
+    line-height: 1;
+  }
+  .dsa-event-latest-teaser .dsa-event-latest-teaser-calendar__day {
+    font-size: 50cqw;
+  }
+  .dsa-event-latest-teaser .dsa-event-latest-teaser-calendar__month {
+    font-size: 25cqw;
+  }
+}
+.dsa-event-latest-teaser__text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--ks-spacing-stack-xs);
+  flex-grow: 1;
+}
+.dsa-event-latest-teaser__title {
+  font: var(--ks-font-display-m);
+  font-weight: var(--ks-font-weight-semi-bold);
+  color: var(--ks-text-color-display);
+}
+.dsa-event-latest-teaser__infos {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ks-spacing-xxs) var(--ks-spacing-inline-s);
+  flex-direction: column;
+  align-items: flex-start;
+}
+@container event-latest-teaser (min-width: 640px) {
+  .dsa-event-latest-teaser__infos {
+    flex-direction: row;
+  }
+}
+.dsa-event-latest-teaser__info {
+  display: flex;
+  gap: calc(var(--ks-spacing-xxs) * 0.75);
+  font: var(--ks-font-interface-s);
+  align-items: center;
+  color: var(--ks-text-color-interface);
+}
+.dsa-event-latest-teaser__info .icon {
+  align-self: flex-start;
+  width: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
+  height: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
+  color: var(--ks-text-color-primary);
+  flex-shrink: 0;
+  flex-grow: 1;
+}
+.dsa-event-latest-teaser__cta {
+  font: var(--ks-font-interface-s);
+  font-weight: var(--ks-font-weight-semi-bold);
+  color: var(--dsa-link--color);
+  display: flex;
+  align-items: center;
+  text-wrap: nowrap;
+  margin-left: auto;
+  transition: var(--ks-transition-hover);
+}
+.dsa-event-latest-teaser__cta:hover {
+  color: var(--ks-text-color-primary-hover);
+}
+.dsa-event-latest-teaser__cta .icon {
+  width: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
+  height: calc(var(--ks-font-size-interface-s) * var(--ks-line-height-interface-s));
+  flex-shrink: 0;
+  flex-grow: 1;
+}

package/dist/components/event-latest-teaser/event-latest-teaser.schema.dereffed.json

@@ -0,0 +1,94 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/event-latest-teaser.schema.json",
+  "title": "Event Latest Teaser",
+  "description": "Display an event teaser with date, title and location",
+  "type": "object",
+  "properties": {
+    "date": {
+      "title": "Date",
+      "description": "The date of the event",
+      "type": "string",
+      "format": "date",
+      "examples": [
+        "12.30.2022"
+      ]
+    },
+    "calendar": {
+      "type": "object",
+      "title": "Calendar",
+      "description": "Calendar icon to display the date",
+      "properties": {
+        "month": {
+          "title": "Month",
+          "description": "The month of the event",
+          "type": "string",
+          "examples": [
+            "Dec"
+          ]
+        },
+        "day": {
+          "title": "Day",
+          "description": "The day of the event",
+          "type": "string",
+          "examples": [
+            "30"
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
+    "title": {
+      "title": "Headline",
+      "description": "Title of the event",
+      "type": "string",
+      "format": "markdown",
+      "examples": [
+        "This is a event teaser title"
+      ]
+    },
+    "location": {
+      "title": "Location",
+      "description": "Location of the event",
+      "type": "string",
+      "format": "markdown",
+      "examples": [
+        "This is a location"
+      ]
+    },
+    "url": {
+      "title": "URL",
+      "description": "The event entry URL to link",
+      "type": "string",
+      "format": "uri",
+      "examples": [
+        "https://example.com"
+      ]
+    },
+    "cta": {
+      "title": "Call to Action",
+      "description": "Text for the call to action",
+      "type": "string",
+      "examples": [
+        "Show event"
+      ]
+    },
+    "ariaLabel": {
+      "title": "ARIA Label",
+      "description": "ARIA label for accessibility",
+      "type": "string",
+      "examples": [
+        "Event teaser for "
+      ]
+    },
+    "className": {
+      "type": "string"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "title",
+    "date",
+    "location"
+  ]
+}