@dso-toolkit/react 86.0.0 → 88.0.0

package/dist/components/highlight-box/highlight-box.react-template.js

@@ -3,8 +3,8 @@ import { DsoHighlightBox } from "../../components";
 export const reactHighlightBox = {
     component: "highlightBox",
     implementation: "react",
-    template: ({ iconTemplate }) => function highlightBoxTemplate({ yellow, white, dropShadow, border, step, icon, content }) {
-        return (React.createElement(DsoHighlightBox, { step: step, yellow: yellow, white: white, dropShadow: dropShadow, border: border },
+    template: ({ iconTemplate }) => function highlightBoxTemplate({ yellow, white, green, dropShadow, border, step, icon, content }) {
+        return (React.createElement(DsoHighlightBox, { step: step, yellow: yellow, white: white, green: green, dropShadow: dropShadow, border: border },
             icon && iconTemplate({ icon, slot: "icon" }),
             typeof content === "string" ? (React.createElement("div", { className: "dso-rich-content", dangerouslySetInnerHTML: { __html: content } })) : (React.createElement("div", { className: "dso-rich-content" }, content))));
     },

package/dist/components/highlight-box/highlight-box.stories.js

@@ -7,7 +7,7 @@ const meta = {
     title: "Highlight Box",
 };
 export default meta;
-const { Default, Yellow, WhiteWithDropshadow, WithBorder, WithIcon, WithBannerImage } = highlightBoxStories({
+const { Default, Yellow, Green, WhiteWithDropshadow, WithBorder, WithIcon, WithBannerImage } = highlightBoxStories({
     templateContainer,
     storyTemplates: (templates) => {
         const { highlightBoxTemplate, iconTemplate } = templates;
@@ -39,4 +39,4 @@ const { Default, Yellow, WhiteWithDropshadow, WithBorder, WithIcon, WithBannerIm
         };
     },
 });
-export { Default, WhiteWithDropshadow, WithBannerImage, WithBorder, WithIcon, Yellow };
+export { Default, Green, WhiteWithDropshadow, WithBannerImage, WithBorder, WithIcon, Yellow };

package/dist/components/info-button/info-button.content.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+export const children = (React.createElement("div", { className: "dso-rich-content" },
+    React.createElement("h2", null, "Samenspel tussen wetgever en ontwikkelaars"),
+    React.createElement("p", null,
+        "Het DSO wordt ontwikkeld door het programma",
+        " ",
+        React.createElement("a", { href: "https://aandeslagmetdeomgevingswet.nl/digitaal-stelsel/" }, "Aan de slag met de Omgevingswet"),
+        " in samenwerking met haar partners. De ontwikkeling vraagt een intensief samenspel tussen de wetgever en de ontwikkelpartners van het DSO. Enerzijds moeten wetgever en de ontwikkelpartners zorgen dat alles wat in de wet- en regelgeving wordt geregeld ook makkelijk toegankelijk is of kan worden. Anderzijds moeten zij zorgen dat alles wat digitaal wordt gerealiseerd, ook juridisch verankerd is of kan worden.")));

package/dist/components/info-button/info-button.react-template.js

@@ -1,9 +1,9 @@
-import * as React from "react";
+import React from "react";
 import { DsoInfoButton } from "../../components";
 export const reactInfoButton = {
     component: "infoButton",
     implementation: "react",
-    template: () => function infoButtonTemplate({ label, active, secondary, dsoToggle }) {
-        return (React.createElement(DsoInfoButton, { label: label, active: active, secondary: secondary, onDsoToggle: (e) => dsoToggle?.(e.detail) }));
+    template: () => function infoButtonTemplate({ label, active, toggletipPlacement, secondary, dsoToggle, children }) {
+        return (React.createElement(DsoInfoButton, { label: label, active: active, secondary: secondary, toggletipPlacement: toggletipPlacement, onDsoToggle: (e) => dsoToggle?.(e.detail) }, children && React.createElement("div", { slot: "toggletip" }, children)));
     },
 };

package/dist/components/info-button/info-button.stories.js

@@ -1,16 +1,20 @@
 import { infoButtonMeta, infoButtonStories } from "dso-toolkit";
 import { templateContainer } from "../../templates";
+import { children } from "./info-button.content";
 import readme from "./readme.md?raw";
 const meta = {
     ...infoButtonMeta({ readme }),
     title: "Info Button",
 };
 export default meta;
-const { Active, Inactive, SecondaryActive, SecondaryInactive } = infoButtonStories({
+const { Default, Information, SecondaryActive, SecondaryInactive } = infoButtonStories({
     templateContainer,
     storyTemplates: (templates) => {
         const { infoButtonTemplate } = templates;
-        return { infoButtonTemplate };
+        return {
+            infoButtonTemplate,
+            children,
+        };
     },
 });
-export { Active, Inactive, SecondaryActive, SecondaryInactive };
+export { Default, Information, SecondaryActive, SecondaryInactive };

package/dist/components.js

@@ -18,6 +18,7 @@ import { DsoButtonGroup as DsoButtonGroupElement, defineCustomElement as defineD
 import { DsoCardContainer as DsoCardContainerElement, defineCustomElement as defineDsoCardContainer } from "@dso-toolkit/core/dist/components/dso-card-container.js";
 import { DsoCard as DsoCardElement, defineCustomElement as defineDsoCard } from "@dso-toolkit/core/dist/components/dso-card.js";
 import { DsoContactInformation as DsoContactInformationElement, defineCustomElement as defineDsoContactInformation } from "@dso-toolkit/core/dist/components/dso-contact-information.js";
+import { DsoCursorTooltip as DsoCursorTooltipElement, defineCustomElement as defineDsoCursorTooltip } from "@dso-toolkit/core/dist/components/dso-cursor-tooltip.js";
 import { DsoDatePicker as DsoDatePickerElement, defineCustomElement as defineDsoDatePicker } from "@dso-toolkit/core/dist/components/dso-date-picker.js";
 import { DsoDocumentCard as DsoDocumentCardElement, defineCustomElement as defineDsoDocumentCard } from "@dso-toolkit/core/dist/components/dso-document-card.js";
 import { DsoDocumentComponent as DsoDocumentComponentElement, defineCustomElement as defineDsoDocumentComponent } from "@dso-toolkit/core/dist/components/dso-document-component.js";
@@ -234,6 +235,14 @@ export const DsoContactInformation = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineDsoContactInformation
 });
+export const DsoCursorTooltip = /*@__PURE__*/ createComponent({
+    tagName: 'dso-cursor-tooltip',
+    elementClass: DsoCursorTooltipElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineDsoCursorTooltip
+});
 export const DsoDatePicker = /*@__PURE__*/ createComponent({
     tagName: 'dso-date-picker',
     elementClass: DsoDatePickerElement,

package/dist/types/components/highlight-box/highlight-box.stories.d.ts

@@ -18,6 +18,14 @@ declare const Default: import("storybook/internal/csf").BaseAnnotations<import("
     story?: Omit<import("storybook/internal/csf").StoryAnnotations<import("storybook/internal/csf").Renderer, HighlightBoxArgs, Partial<HighlightBoxArgs>>, "story"> | undefined;
 } & {
     args?: Partial<HighlightBoxArgs> | undefined;
+}, Green: import("storybook/internal/csf").BaseAnnotations<import("storybook/internal/csf").Renderer, HighlightBoxArgs> & {
+    name?: import("storybook/internal/csf").StoryName;
+    storyName?: import("storybook/internal/csf").StoryName;
+    play?: import("storybook/internal/csf").PlayFunction<import("storybook/internal/csf").Renderer, HighlightBoxArgs> | undefined;
+    globals?: import("storybook/internal/csf").Globals | undefined;
+    story?: Omit<import("storybook/internal/csf").StoryAnnotations<import("storybook/internal/csf").Renderer, HighlightBoxArgs, Partial<HighlightBoxArgs>>, "story"> | undefined;
+} & {
+    args?: Partial<HighlightBoxArgs> | undefined;
 }, WhiteWithDropshadow: import("storybook/internal/csf").BaseAnnotations<import("storybook/internal/csf").Renderer, HighlightBoxArgs> & {
     name?: import("storybook/internal/csf").StoryName;
     storyName?: import("storybook/internal/csf").StoryName;
@@ -51,4 +59,4 @@ declare const Default: import("storybook/internal/csf").BaseAnnotations<import("
 } & {
     args?: Partial<HighlightBoxArgs> | undefined;
 };
-export { Default, WhiteWithDropshadow, WithBannerImage, WithBorder, WithIcon, Yellow };
+export { Default, Green, WhiteWithDropshadow, WithBannerImage, WithBorder, WithIcon, Yellow };

package/dist/types/components/info-button/info-button.content.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const children: React.JSX.Element;

package/dist/types/components/info-button/info-button.react-template.d.ts

@@ -1,3 +1,4 @@
 import { InfoButton } from "dso-toolkit";
+import { JSX } from "react";
 import { ComponentImplementation } from "../../templates";
-export declare const reactInfoButton: ComponentImplementation<InfoButton>;
+export declare const reactInfoButton: ComponentImplementation<InfoButton<JSX.Element>>;

package/dist/types/components/info-button/info-button.stories.d.ts

@@ -2,7 +2,7 @@ import type { Meta } from "@storybook/react-vite";
 import { InfoButtonArgs } from "dso-toolkit";
 declare const meta: Meta<InfoButtonArgs>;
 export default meta;
-declare const Active: import("storybook/internal/csf").BaseAnnotations<import("storybook/internal/csf").Renderer, InfoButtonArgs> & {
+declare const Default: import("storybook/internal/csf").BaseAnnotations<import("storybook/internal/csf").Renderer, InfoButtonArgs> & {
     name?: import("storybook/internal/csf").StoryName;
     storyName?: import("storybook/internal/csf").StoryName;
     play?: import("storybook/internal/csf").PlayFunction<import("storybook/internal/csf").Renderer, InfoButtonArgs> | undefined;
@@ -10,7 +10,7 @@ declare const Active: import("storybook/internal/csf").BaseAnnotations<import("s
     story?: Omit<import("storybook/internal/csf").StoryAnnotations<import("storybook/internal/csf").Renderer, InfoButtonArgs, Partial<InfoButtonArgs>>, "story"> | undefined;
 } & {
     args?: Partial<InfoButtonArgs> | undefined;
-}, Inactive: import("storybook/internal/csf").BaseAnnotations<import("storybook/internal/csf").Renderer, InfoButtonArgs> & {
+}, Information: import("storybook/internal/csf").BaseAnnotations<import("storybook/internal/csf").Renderer, InfoButtonArgs> & {
     name?: import("storybook/internal/csf").StoryName;
     storyName?: import("storybook/internal/csf").StoryName;
     play?: import("storybook/internal/csf").PlayFunction<import("storybook/internal/csf").Renderer, InfoButtonArgs> | undefined;
@@ -35,4 +35,4 @@ declare const Active: import("storybook/internal/csf").BaseAnnotations<import("s
 } & {
     args?: Partial<InfoButtonArgs> | undefined;
 };
-export { Active, Inactive, SecondaryActive, SecondaryInactive };
+export { Default, Information, SecondaryActive, SecondaryInactive };

package/dist/types/components.d.ts

@@ -22,6 +22,7 @@ import { DsoButtonGroup as DsoButtonGroupElement } from "@dso-toolkit/core/dist/
 import { DsoCardContainer as DsoCardContainerElement } from "@dso-toolkit/core/dist/components/dso-card-container.js";
 import { DsoCard as DsoCardElement } from "@dso-toolkit/core/dist/components/dso-card.js";
 import { DsoContactInformation as DsoContactInformationElement } from "@dso-toolkit/core/dist/components/dso-contact-information.js";
+import { DsoCursorTooltip as DsoCursorTooltipElement } from "@dso-toolkit/core/dist/components/dso-cursor-tooltip.js";
 import { DsoDatePicker as DsoDatePickerElement } from "@dso-toolkit/core/dist/components/dso-date-picker.js";
 import { DsoDocumentCard as DsoDocumentCardElement } from "@dso-toolkit/core/dist/components/dso-document-card.js";
 import { DsoDocumentComponent as DsoDocumentComponentElement } from "@dso-toolkit/core/dist/components/dso-document-component.js";
@@ -137,6 +138,8 @@ export type DsoCardContainerEvents = NonNullable<unknown>;
 export declare const DsoCardContainer: StencilReactComponent<DsoCardContainerElement, DsoCardContainerEvents>;
 export type DsoContactInformationEvents = NonNullable<unknown>;
 export declare const DsoContactInformation: StencilReactComponent<DsoContactInformationElement, DsoContactInformationEvents>;
+export type DsoCursorTooltipEvents = NonNullable<unknown>;
+export declare const DsoCursorTooltip: StencilReactComponent<DsoCursorTooltipElement, DsoCursorTooltipEvents>;
 export type DsoDatePickerEvents = {
     onDsoDateChange: EventName<DsoDatePickerCustomEvent<DatePickerChangeEvent>>;
     onDsoBlur: EventName<DsoDatePickerCustomEvent<DatePickerBlurEvent>>;

package/dist/types/templates.d.ts

@@ -20,7 +20,7 @@ export interface Components {
     icon: Icon;
     imageOverlay: ImageOverlay;
     info: Info<JSX.Element>;
-    infoButton: InfoButton;
+    infoButton: InfoButton<JSX.Element>;
     label: Label;
     listButton: ListButton;
     modal: Modal<JSX.Element>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dso-toolkit/react",
   "type": "module",
-  "version": "86.0.0",
+  "version": "88.0.0",
   "description": "React specific wrapper for @dso-toolkit/core web components",
   "homepage": "https://www.dso-toolkit.nl/",
   "repository": {
@@ -30,7 +30,7 @@
     "@types/lodash.startcase": "^4.4.9",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "dso-toolkit": "^86.0.0",
+    "dso-toolkit": "^88.0.0",
     "eslint": "^9.39.2",
     "eslint-plugin-storybook": "10.1.9",
     "http-proxy-middleware": "^3.0.5",
@@ -45,7 +45,7 @@
     "wait-on": "^9.0.3"
   },
   "peerDependencies": {
-    "@dso-toolkit/core": "86.0.0",
+    "@dso-toolkit/core": "88.0.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
   },