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

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.6",
+  "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.tsx

@@ -5,10 +5,10 @@ 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.
@@ -65,7 +65,8 @@ export const Markdown = ({
                              removeMarkup = false,
                              inheritBlock = false,
                              allowedElements,
-                             reHypePlugins
+                             reHypePlugins,
+                             ...otherProps
                          }: MarkdownParserProps) => {
 
     const configHtml = allowHtml ? {
@@ -93,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/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>
     );

package/src/components/Accordion/AccordionItem.tsx

@@ -1,45 +1,35 @@
 import React from "react";
-import {AccordionItem as CarbonAccordionItem} from "carbon-components-react";
+import {
+    AccordionItem as CarbonAccordionItem,
+    AccordionItemProps as CarbonAccordionItemProps,
+} from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface AccordionItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
-    /*
-        additional user class name
-    */
+export interface AccordionItemProps extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando"> {
+    /**
+     * additional user class name
+     */
     className?: string;
-    /*
-        content of accordion item
-    */
-    children: string | JSX.Element | JSX.Element[];
-    /*
-        disable accordion item
-    */
-    disabled?: boolean;
-    /*
-        set accordion item expliciteky as open when displayed first
-    */
-    open?: boolean;
-    /*
-        header of accordion item
-    */
+    /**
+     * header of accordion item
+     */
     label: string | JSX.Element;
-    /*
-        use full available width for content
-    */
+    /**
+     * use full available width for content
+     */
     fullWidth?: boolean;
-    /*
-        minimize white space and paddings
-    */
+    /**
+     * minimize white space and paddings
+     */
     condensed?: boolean;
-    /*
-        do not use borders as visible separations on accordion item
-    */
+    /**
+     * do not use borders as visible separations on accordion item
+     */
     noBorder?: boolean;
-    /*
-        highlight accordion item by different background color
-    */
+    /**
+     * highlight accordion item by different background color
+     */
     elevated?: boolean;
-    title?: never;
 };
 
 function AccordionItem({

package/src/components/Accordion/Stories/Accordion.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Accordion, AccordionItem } from "../../../../index";
+import { Default as AccordionStoryItem } from '../Stories/AccordionItem.stories'
+
+export default {
+    title: "Components/Accordion",
+    component: Accordion,
+    subcomponents: { AccordionItem },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements to include into the Accordion component"
+        },
+    }
+
+} as ComponentMeta<typeof Accordion>;
+
+const TemplateIcons: ComponentStory<typeof Accordion> = (args) => (
+    <Accordion {...args} />
+);
+export const Default = TemplateIcons.bind({});
+Default.args = {
+    children : [
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 1" />,
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 2 (elevated)" elevated />,
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 3 (initially opened)" open />,
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 4 (disabled)" disabled />,
+        <AccordionItem {...AccordionStoryItem.args} label="Accordion item 5" />,
+    ],
+    align: "start",
+    size: "medium"
+};

package/src/components/Accordion/Stories/AccordionItem.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Accordion, AccordionItem, HtmlContentBlock } from "../../../../index";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+export default {
+    title: "Components/Accordion/AccordionItem",
+    component: AccordionItem,
+    argTypes: {
+        children: {
+            control: "none",
+            description: "content of accordion item"
+        },
+    }
+
+} as ComponentMeta<typeof AccordionItem>;
+
+const Template : ComponentStory<typeof AccordionItem> = (args) => (
+    <Accordion>
+        <AccordionItem {...args} />
+    </Accordion>
+);
+export const Default = Template.bind({});
+Default.args = {
+    label: "Title of accordion item",
+    children : <HtmlContentBlock><LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} /></HtmlContentBlock>
+};

package/src/components/Accordion/accordion.scss

@@ -1,3 +1,8 @@
+// own vars
+$eccgui-color-accordion-background-elevated: rgba($eccgui-color-accent, 0.1) !default;
+$eccgui-color-accordion-toggler-hover: $menu-item-color-hover !default;
+$eccgui-color-accordion-toggler-elevated-hover: mix($eccgui-color-accordion-background-elevated, $eccgui-color-accordion-toggler-hover, 50%) !default;
+
 // lib import
 @import "~carbon-components/scss/components/accordion/accordion";
 
@@ -57,8 +62,22 @@
     }
 }
 
+.#{$prefix}--accordion__heading {
+    &:hover::before,
+    &:focus::before {
+        background-color: $eccgui-color-accordion-toggler-hover;
+    }
+}
+
 .#{$eccgui}-accordion__item--elevated {
-    background-color: $data-table-zebra-color; //rgba($ui-03, alpha($ui-03) * $eccgui-opacity-muted);
+    background-color: $eccgui-color-accordion-background-elevated;
+
+    .#{$prefix}--accordion__heading {
+        &:hover::before,
+        &:focus::before {
+            background-color: $eccgui-color-accordion-toggler-elevated-hover;
+        }
+    }
 }
 
 .#{$eccgui}-accordion__item--noborder {