@eccenca/gui-elements 23.0.0-rc.5 → 23.0.0-rc.7

package/dist/types/components/Icon/canonicalIconNames.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /** Valid icon names. */
-export declare type ValidIconName = "application-dataintegration" | "application-homepage" | "application-useraccount" | "application-warning" | "application-mapping" | "application-explore" | "application-vocabularies" | "application-queries" | "application-legacygui" | "application-activities" | "module-timetracker" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-search" | "module-visualization" | "module-reports" | "module-thesauri" | "module-linkedrules" | "module-integrations" | "module-gdprsearch" | "toggler-showmore" | "toggler-showless" | "toggler-moveright" | "toggler-moveleft" | "toggler-maximize" | "toggler-minimize" | "toggler-tree" | "navigation-back" | "navigation-forth" | "navigation-close" | "navigation-jump" | "navigation-last" | "navigation-previous" | "navigation-next" | "navigation-first" | "item-moremenu" | "item-vertmenu" | "item-viewdetails" | "item-clone" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-remove" | "item-add-artefact" | "item-launch" | "item-download" | "item-upload" | "item-question" | "item-comment" | "item-copy" | "item-save" | "item-start" | "item-stop" | "item-reload" | "item-reset" | "item-shuffle" | "item-draggable" | "item-settings" | "operation-search" | "operation-clear" | "operation-undo" | "operation-redo" | "operation-logout" | "operation-filter" | "operation-filteredit" | "operation-comparison" | "operation-transform" | "operation-aggregation" | "operation-commit" | "operation-sharelink" | "data-sourcepath" | "data-targetpath" | "list-sort" | "list-sortasc" | "list-sortdesc" | "state-info" | "state-success" | "state-warning" | "state-danger" | "state-unchecked" | "state-checked" | "state-checkedsimple" | "state-partlychecked" | "state-declined" | "state-confirmed" | "artefact-project" | "artefact-workflow" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-multicsv" | "artefact-dataset-sparkview" | "artefact-dataset-sqlendpoint" | "artefact-dataset-jdbc" | "artefact-dataset-xml" | "artefact-dataset-json" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-neo4j" | "artefact-transform" | "artefact-linking" | "artefact-task" | "artefact-customtask" | "artefact-file" | "artefact-embedded" | "artefact-remote" | "artefact-deprecated" | "artefact-uncategorized" | "artefact-rawdata" | "artefact-report" | "artefact-commit" | "activity-error-report" | "select-caret" | "linked-item" | "operation-auto-graph-layout" | "unlinked-item" | "write-protected" | "settings" | "favorite-empty" | "favorite-filled" | "undefined" | "Undefined";
+export declare type ValidIconName = "application-activities" | "application-dataintegration" | "application-explore" | "application-homepage" | "application-legacygui" | "application-mapping" | "application-queries" | "application-useraccount" | "application-vocabularies" | "application-warning" | "artefact-commit" | "artefact-customtask" | "artefact-dataset" | "artefact-dataset-csv" | "artefact-dataset-eccencadataplatform" | "artefact-dataset-excel" | "artefact-dataset-file" | "artefact-dataset-jdbc" | "artefact-dataset-json" | "artefact-dataset-multicsv" | "artefact-dataset-neo4j" | "artefact-dataset-sparkview" | "artefact-dataset-sparqlendpoint" | "artefact-dataset-sqlendpoint" | "artefact-dataset-xml" | "artefact-deprecated" | "artefact-embedded" | "artefact-errorlog" | "artefact-file" | "artefact-linking" | "artefact-project" | "artefact-rawdata" | "artefact-remote" | "artefact-report" | "artefact-task" | "artefact-transform" | "artefact-uncategorized" | "artefact-workflow" | "data-sourcepath" | "data-targetpath" | "item-add-artefact" | "item-clone" | "item-comment" | "item-copy" | "item-download" | "item-draggable" | "item-edit" | "item-evaluation" | "item-execution" | "item-info" | "item-launch" | "item-moremenu" | "item-question" | "item-reload" | "item-remove" | "item-reset" | "item-save" | "item-settings" | "item-shuffle" | "item-start" | "item-stop" | "item-upload" | "item-vertmenu" | "item-viewdetails" | "list-sort" | "list-sortasc" | "list-sortdesc" | "module-accesscontrol" | "module-annotation" | "module-dashboard" | "module-gdprsearch" | "module-integrations" | "module-linkedrules" | "module-reports" | "module-search" | "module-thesauri" | "module-timetracker" | "module-visualization" | "navigation-back" | "navigation-close" | "navigation-first" | "navigation-forth" | "navigation-jump" | "navigation-last" | "navigation-next" | "navigation-previous" | "operation-aggregation" | "operation-autolayout" | "operation-clear" | "operation-commit" | "operation-comparison" | "operation-filter" | "operation-filteredit" | "operation-link" | "operation-logout" | "operation-redo" | "operation-search" | "operation-sharelink" | "operation-transform" | "operation-undo" | "operation-unlink" | "state-checked" | "state-checkedsimple" | "state-confirmed" | "state-danger" | "state-declined" | "state-info" | "state-partlychecked" | "state-protected" | "state-success" | "state-unchecked" | "state-warning" | "toggler-caret" | "toggler-maximize" | "toggler-minimize" | "toggler-moveleft" | "toggler-moveright" | "toggler-showless" | "toggler-showmore" | "toggler-star-empty" | "toggler-star-filled" | "toggler-tree" | "undefined" | "Undefined";
 export interface IconSized {
     small: (props: any) => JSX.Element | null;
     normal: (props: any) => JSX.Element | null;

package/dist/types/components/Menu/Menu.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-declare function Menu({ children, className, ...restProps }: any): JSX.Element;
+import { MenuProps as BlueprintMenuProps } from "@blueprintjs/core";
+export interface MenuProps extends BlueprintMenuProps {
+}
+declare function Menu({ children, className, ...restProps }: MenuProps): JSX.Element;
 export default Menu;

package/dist/types/components/Menu/MenuDivider.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-declare function MenuDivider({ children, className, ...restProps }: any): JSX.Element;
+import { MenuDividerProps as BlueprintMenuDividerProps } from "@blueprintjs/core";
+export interface MenuDividerProps extends BlueprintMenuDividerProps {
+}
+declare function MenuDivider({ children, className, ...restProps }: MenuDividerProps): JSX.Element;
 export default MenuDivider;

package/dist/types/components/Menu/MenuItem.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { MenuItemProps as BlueprintMenuItemProps } from "@blueprintjs/core";
 import { ValidIconName } from "../Icon/canonicalIconNames";
-export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target"> {
+export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon" | "children">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "children"> {
     icon?: ValidIconName | string[];
+    children?: React.ReactNode;
 }
-/** A single item in a Menu. */
+/**
+ * Single item, used as child inside `Menu`.
+ */
 declare function MenuItem({ children, className, icon, onClick, href, ...restProps }: MenuItemProps): JSX.Element;
 export default MenuItem;

package/dist/types/components/Pagination/Pagination.d.ts

@@ -1,20 +1,24 @@
 /// <reference types="react" />
 import { PaginationProps as CarbonPaginationProps } from "carbon-components-react";
-interface PaginationProps extends CarbonPaginationProps {
+export interface PaginationProps extends CarbonPaginationProps {
     /**
-     Hide the select option to set how many items per page are displayed.
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Hide dropdown to select how many items will be shown per page.
      */
     hidePageSizeConfiguration?: boolean;
     /**
-     Hide info about the item numbers that are currently displayed.
+     * Hide info block about the section of the displayed items.
      */
     hideInfoText?: boolean;
     /**
-     Hide select box to switch between pages.
+     * Hide dropdown to select page number directly.
      */
     hidePageSelect?: boolean;
     /**
-     Hide buttons to switch beteen nex/prev pages.
+     * Hide prev/next arrows to navigate through the pages.
      */
     hideNavigationArrows?: boolean;
 }

package/dist/types/components/RadioButton/RadioButton.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-declare function RadioButton({ children, className, ...restProps }: any): JSX.Element;
+import { RadioProps as BlueprintRadioProps } from "@blueprintjs/core";
+interface RadioButtonProps extends BlueprintRadioProps {
+}
+declare function RadioButton({ children, className, ...restProps }: RadioButtonProps): JSX.Element;
 export default RadioButton;

package/dist/types/components/Separation/Spacing.d.ts

@@ -1,9 +1,23 @@
 /// <reference types="react" />
-interface IProps {
+export interface SpacingProps {
+    /**
+     * Set the amount of white space that separates two elements.
+     */
     size?: "tiny" | "small" | "medium" | "large";
+    /**
+     * If set then is a ruler displayed in the middle of the spacing area.
+     * The direction of the ruler is used from the spacing.
+     */
     hasDivider?: boolean;
+    /**
+     * If set then the spacing separates two elements on the horizontal axis.
+     * The spacing area then is created on a vertical axis.
+     */
     vertical?: boolean;
 }
-/** Adds horizontal or vertical space between neighbouring elements. */
-declare function Spacing({ size, hasDivider, vertical }: IProps): JSX.Element;
+/**
+ * Adds horizontal or vertical space between neighbouring elements.
+ * It also can add a visual ruler inside.
+ */
+declare function Spacing({ size, hasDivider, vertical }: SpacingProps): JSX.Element;
 export default Spacing;

package/dist/types/components/Spinner/Spinner.d.ts

@@ -5,21 +5,54 @@ export declare type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarg
 export declare type SpinnerStroke = "thin" | "medium" | "bold";
 declare type Intent = "inherit" | "primary" | "success" | "warning" | "danger";
 /** A spinner that is either displayed globally or locally. */
-export interface SpinnerProps extends Partial<BlueprintOverlayProps & Omit<BlueprintSpinnerProps, "size">> {
+export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size"> {
+    /**
+     * intent value or a valid css color definition
+     */
     color?: Intent | string;
+    /**
+     * Additional CSS class names.
+     */
     className?: string;
-    description?: string;
+    /**
+     * Position where and how the spinner is displayed:
+     * * `local`: the spinner is displayed as centered overlay to the neareast parent with relative (or equivalent) positioning
+     * * `inline`: the spinner is displayed as inline element
+     * * `global`: the spinner is displayed including backdrop centered over the full viewport
+     */
     position?: SpinnerPosition;
+    /**
+     * The size of the spinner.
+     * The default size relates to the `position`.
+     */
     size?: SpinnerSize;
+    /**
+     * The stroke width that is used to visualize the spinner.
+     * The default size relates to the `position`.
+     * There are only rare cases to set this property,
+     */
     stroke?: SpinnerStroke;
+    /**
+     * Delay when to show the spinner in ms.
+     */
     delay?: number;
     /**
      * Includes a backdrop behind the spinner that narrows visibility of the area behind the spinner.
      * This option only works with "local" spinners, for "inline" spinners there is no backdrop, "global" spinners always have backdrops.
-     * The backdrop and the spinner are located over the nearest parent element that is styled by `position: relative` or soe equivalent CSS rule.
+     * The backdrop and the spinner are located over the nearest parent element that is styled by `position: relative` or some other CSS rule with an equivalent outcome.
      */
     showLocalBackdrop?: boolean;
+    /**
+     * Use this property to alter the display of the backdrop used for the global spinner
+     */
+    overlayProps?: BlueprintOverlayProps;
+    /**
+     * Label displayed next to the spinner (planned).
+     * You can set it to document the purpose of the spinner.
+     * It is currently not supported and not displayed.
+     */
+    description?: string;
 }
-declare function Spinner({ className, color, description, // currently unsupported (FIXME)
-position, size, stroke, showLocalBackdrop, delay, ...otherProps }: SpinnerProps): JSX.Element | null;
+declare function Spinner({ className, color, position, size, stroke, showLocalBackdrop, delay, overlayProps, description, // currently unsupported (FIXME):
+...otherProps }: SpinnerProps): JSX.Element | null;
 export default Spinner;

package/dist/types/components/Switch/Switch.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
-import { SwitchProps } from "@blueprintjs/core";
-interface Props extends Omit<SwitchProps, "onChange"> {
+import { SwitchProps as BlueprintSwitchProps } from "@blueprintjs/core";
+export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
+    /**
+     * Event handler for changed state.
+     */
     onChange?: (value: boolean) => any;
 }
-declare function Switch({ onChange, ...otherProps }: Props): JSX.Element;
+declare function Switch({ onChange, ...otherProps }: SwitchProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Switch>;
 export default _default;

package/dist/types/extensions/react-flow/edges/EdgeDefault.d.ts

@@ -1,13 +1,28 @@
 import React from 'react';
 import { EdgeProps as ReactFlowEdgeProps } from "react-flow-renderer/dist/types";
 export interface EdgeDefaultDataProps {
+    /**
+     * Size of the "glow" effect when the edge is hovered.
+     */
     pathGlowWidth?: number;
     inversePath?: boolean;
+    /**
+     * Reference linnk to the SVG marker used for the start of the edge
+     */
     markerStart?: string;
+    /**
+     * Callback handler that returns a React element used as edge title.
+     */
     renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
 }
 export interface EdgeDefaultProps extends ReactFlowEdgeProps {
+    /**
+     * Defining content and markers for the edge.
+     */
     data?: EdgeDefaultDataProps;
+    /**
+     * Callback handler that returns a SVG path as string to define how the edge is rendered.
+     */
     drawSvgPath?: (edge: ReactFlowEdgeProps) => string;
 }
 export declare const EdgeDefault: React.MemoExoticComponent<(edge: EdgeDefaultProps) => JSX.Element>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eccenca/gui-elements",
   "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-  "version": "23.0.0-rc.5",
+  "version": "23.0.0-rc.7",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -116,7 +116,6 @@
     "@typescript-eslint/parser": "^4.33.0",
     "babel-jest": "^27.5.1",
     "chromatic": "^6.5.1",
-    "css-loader": "3.4.2",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "identity-obj-proxy": "^3.0.0",
@@ -131,11 +130,9 @@
     "rimraf": "^3.0.2",
     "sass": "^1.53.0",
     "sass-loader": "^10.3.1",
-    "style-loader": "0.23.1",
     "ts-node": "^10.9.1",
     "tsc-esm-fix": "^2.13.0",
-    "typescript": "4.4.4",
-    "webpack": "^4.46.0"
+    "typescript": "4.4.4"
   },
   "peerDependencies": {
     "react": ">=16",
@@ -152,7 +149,8 @@
     "**/glob-parent": "^5.1.2",
     "**/trim": "^0.0.3",
     "**/trim-newlines": "^3.0.1",
-    "**/minimist": "^1.2.6"
+    "**/minimist": "^1.2.6",
+    "**/postcss": "^7.0.36"
   },
   "eslintConfig": {
     "extends": [

package/src/cmem/markdown/Markdown.stories.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Markdown } from "./../../../index";
+
+export default {
+    title: "Cmem/Markdown",
+    component: Markdown,
+    argTypes: {
+    },
+} as ComponentMeta<typeof Markdown>;
+
+const Template: ComponentStory<typeof Markdown> = (args) => <Markdown {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+    children: `
+# This is a headline level 1
+
+This is a paragraph.
+
+* this is a unordered list
+    * with sub items
+    * with sub items
+       * another level
+       * another level
+    * sub item
+* other list item
+* a last one
+
+1. ordered list
+    1. ordered sub items
+    2. second line
+2. second item
+    * unordered sub items
+    * another line
+3. third item
+
+This is a paragraph with a [text link](http://example.com/).
+
+## Headline level 2
+### Headline level 3
+#### Headline level 4
+##### Headline level 5
+###### Headline level 6
+
+    This is a code block.
+
+> This is a block quote.
+>
+> With 2 paragraphs.
+
+A line with some <strong>HTML code</strong> inside.
+    `
+};

package/src/cmem/markdown/Markdown.tsx

@@ -5,20 +5,31 @@ import remarkGfm from "remark-gfm";
 import remarkTypograf from "@mavrin/remark-typograf";
 import {remarkDefinitionList} from 'remark-definition-list';
 import React from "react";
-import { HtmlContentBlock } from "../../index";
+import {HtmlContentBlock, TestableComponent} from "../../index";
 import { PluggableList } from "react-markdown/lib/react-markdown";
 
-export interface MarkdownParserProps {
+export interface MarkdownParserProps extends TestableComponent {
     children: string;
-    // allow HTML as partial content, otherwise escape HTML tags (pls use with caution)
+    /**
+     * Allow HTML as partial content, otherwise escape HTML tags.
+     * Use with caution!
+     */
     allowHtml?: boolean;
-    // return an object that only contains simple text without any HTML
+    /**
+     * Return an object that only contains simple text without any HTML.
+     */
     removeMarkup?: boolean;
-    // If defined, only elements from this list will be rendered. This overwrites the removeMarkup parameter if both are set.
+    /**
+     * If defined, only elements from this list will be rendered.
+     * This overwrites the removeMarkup parameter if both are set.
+     */
     allowedElements?: string[];
-    // do not wrap it in a content block element
+    /**
+     * Do not wrap it in a content block element.
+     */
     inheritBlock?: boolean;
-    /** Additional reHype plugins to execute.
+    /**
+     * Additional reHype plugins to execute.
      * @see https://github.com/remarkjs/react-markdown#architecture
      */
     reHypePlugins?: PluggableList;
@@ -54,7 +65,8 @@ export const Markdown = ({
                              removeMarkup = false,
                              inheritBlock = false,
                              allowedElements,
-                             reHypePlugins
+                             reHypePlugins,
+                             ...otherProps
                          }: MarkdownParserProps) => {
 
     const configHtml = allowHtml ? {
@@ -82,7 +94,7 @@ export const Markdown = ({
     return inheritBlock ? (
         <ReactMarkdown {...reactMarkdownProperties} />
     ) : (
-        <HtmlContentBlock>
+        <HtmlContentBlock data-test-id={otherProps["data-test-id"]} >
             <ReactMarkdown {...reactMarkdownProperties} />
         </HtmlContentBlock>
     );

package/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -1,15 +1,8 @@
 import React, { useState, useEffect, useCallback, FC } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ReactFlow, EdgeTools, NodeTools, IconButton } from "./../../../index";
+import { ReactFlow, EdgeTools, NodeTools } from "./../../../index";
 import { ReactFlowProps } from "./ReactFlow";
-import { ArrowHeadType, Elements, FlowElement, getMarkerEnd } from "react-flow-renderer";
-
-export default {
-    title: "CMEM/React Flow/Configurations",
-    component: ReactFlow,
-    argTypes: {
-    },
-} as ComponentMeta<typeof ReactFlow>;
+import { Elements, FlowElement } from "react-flow-renderer";
 
 const nodeExamples = {
     unspecified: [
@@ -32,10 +25,10 @@ const nodeExamples = {
             position: { x: 200, y: 300 },
         },
         {
-            id: 'unspecified-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed",source: 'unspecified-1', target: 'unspecified-2',
+            id: 'unspecified-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed", source: 'unspecified-1', target: 'unspecified-2',
         },
         {
-            id: 'unspecified-e2', type: 'step', label: "step edge", arrowHeadType: "arrowclosed",source: 'unspecified-2', target: 'unspecified-1',
+            id: 'unspecified-e2', type: 'step', label: "step edge", arrowHeadType: "arrowclosed", source: 'unspecified-2', target: 'unspecified-1',
         }
     ],
     linking: [
@@ -188,83 +181,19 @@ const nodeExamples = {
         { id: 'graph-e4', type: 'subproperty', label: "subproperty edge", arrowHeadType: "arrowclosed",source: 'graph-4', target: 'graph-5' },
         { id: 'graph-e5', type: 'rdftype', label: "rdftype edge", arrowHeadType: "arrowclosed",source: 'graph-5', target: 'graph-1' },
     ],
-    inverseEdge: [
-        {
-            id: 'inverseEdge-1',
-            type: "default",
-            data: {
-                label: "Default ", content: "Example content.", minimalShape: "none"
-            },
-            position: { x: 200, y: 50 },
-        },
-        {
-            id: 'inverseEdge-2',
-            type: "default",
-            data: {
-                label: "Default ", content: "Example content.", minimalShape: "none",
-                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ],
-                inversePath: true,
-            },
-            position: { x: 200, y: 300 },
-        },
-        {
-            id: 'inverseEdge-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed",source: 'inverseEdge-1', target: 'inverseEdge-2',
-        },
-        {
-            id: 'inverseEdge-e2', type: 'default', label: "inverse edge", source: 'inverseEdge-2', target: 'inverseEdge-1',
-            data: {
-                markerStart: getMarkerEnd(
-                    `${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType
-                ),
-            }
-        }
-    ],
-    customLabel: [
-        {
-            id: 'customLabel-1',
-            type: "default",
-            data: {
-                label: "Default ", content: "Example content.", minimalShape: "none"
-            },
-            position: { x: 200, y: 50 },
-        },
-        {
-            id: 'customLabel-2',
-            type: "default",
-            data: {
-                label: "Default ", content: "Example content.", minimalShape: "none",
-                handles: [ { type: "source", position: "left" }, { type: "target", position: "right" } ],
-                inversePath: true,
-            },
-            position: { x: 200, y: 300 },
-        },
-        {
-            id: 'customLabel-e1', type: 'straight', label: "straight edge", arrowHeadType: "arrowclosed", source: 'customLabel-1', target: 'customLabel-2',
-        },
-        {
-            id: 'customLabel-e2', type: 'default', label: "custom edge", arrowHeadType: "arrowclosed", source: 'customLabel-2', target: 'customLabel-1',
-            data: {
-                renderLabel: (
-                    edgeCenter: [number, number, number, number]
-                ) => (
-                    <foreignObject
-                        width={30}
-                        height={30}
-                        x={edgeCenter[0] - 15}
-                        y={edgeCenter[1] - 15}
-                        className="instance-viz-multiedge"
-                        requiredExtensions="http://www.w3.org/1999/xhtml"
-                    >
-                        <body>
-                            <IconButton name="navigation-close" />
-                        </body>
-                    </foreignObject>
-                )
-            }
-        }
-    ]
 }
 
+export default {
+    title: "CMEM/React Flow/Configurations",
+    component: ReactFlow,
+    argTypes: {
+        configuration: {
+            control: "select",
+            options: Object.keys(nodeExamples),
+        }
+    },
+} as ComponentMeta<typeof ReactFlow>;
+
 const ReactFlowExample: FC<ReactFlowProps> = (args) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);

package/src/cmem/react-flow/ReactFlow/ReactFlow.tsx

@@ -5,14 +5,12 @@ import * as unspecifiedConfig from "./../configuration/unspecified";
 import * as graphConfig from "./../configuration/graph";
 import * as workflowConfig from "./../configuration/workflow";
 import * as linkingConfig from "./../configuration/linking";
-import * as inverseEdgeConfig from "./../configuration/inverseEdge";
-import * as customLabelConfig from "./../configuration/customLabel";
 
 export interface ReactFlowProps extends ReactFlowOriginalProps {
     /**
      * Load `ReactFlow` component with pre-configured values for `nodeTypes` and `edgeTypes`
      */
-    configuration?: "unspecified" | "graph" | "workflow" | "linking" | "inverseEdge" | "customLabel";
+    configuration?: "unspecified" | "graph" | "workflow" | "linking";
 }
 
 /**
@@ -31,8 +29,6 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
         graph: graphConfig,
         workflow: workflowConfig,
         linking: linkingConfig,
-        inverseEdge: inverseEdgeConfig,
-        customLabel: customLabelConfig,
     }
 
     return (

package/src/cmem/react-flow/nodes/_stickynote.scss

@@ -17,7 +17,7 @@
             .#{$eccgui}-graphviz__node__content {
                 color: currentColor;
                 background: transparent;
-                padding: $eccgui-size-block-whitespace / 2;
+                padding: $eccgui-size-block-whitespace * 0.5;
             }
         }
     }

package/src/components/Accordion/Accordion.tsx

@@ -1,10 +1,40 @@
 import React from "react";
-import {Accordion as CarbonAccordion} from "carbon-components-react";
+import {
+    Accordion as CarbonAccordion,
+    AccordionProps as CarbonAccordionProps,
+} from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function Accordion({ children, className = "", align = "start", ...otherProps }: any) {
+export interface AccordionProps extends Omit<CarbonAccordionProps, "className" | "size"> {
+    /**
+     * Additional CSS classes.
+     */
+    className?: string;
+    /**
+     * How much space is used for the header of the each of the accordion items.
+     */
+    size?: "small" | "medium" | "large";
+}
+
+const carbonAccordionSizeMapping = {
+    "small": "sm" as "sm",
+    "medium": "md" as "md",
+    "large": "lg" as "lg"
+}
+
+function Accordion({
+    children,
+    className = "",
+    align = "start",
+    size = "medium",
+    ...otherProps
+}: AccordionProps) {
     return (
-        <CarbonAccordion className={`${eccgui}-accordion__container ` + className} align={align} {...otherProps}>
+        <CarbonAccordion
+            className={`${eccgui}-accordion__container ` + className}
+            align={align}
+            size={carbonAccordionSizeMapping[size]}
+            {...otherProps}>
             {children}
         </CarbonAccordion>
     );